Merge branch 'vue3EnBloc' into vuejs3
This commit is contained in:
commit
3e33eba61c
8 changed files with 307 additions and 133 deletions
|
|
@ -15,6 +15,8 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
|
|||
tparpage=[15,25,50,'Tous'],
|
||||
champcsv="search",
|
||||
delimitercsv=";",
|
||||
urlvuebloc=spip.php?page=mon_bloc_type_html,
|
||||
vueblocdefaut='bloc ou tableau', // par defaut tableau
|
||||
namecsv="souscripteurs.csv",
|
||||
url_sort_asc="#CHEMIN{...}"
|
||||
url_sort_desc="#CHEMIN{...}"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
.gamutable--surTable select,
|
||||
.gamutable--surTable input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gamutable--sousTable {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -51,10 +56,6 @@ th.icone {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
td.icone {
|
||||
/*padding: 0;*/
|
||||
}
|
||||
|
||||
td.icone > * {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
|
@ -78,4 +79,18 @@ td.icone i {
|
|||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.vueBlocs {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vueBlocs-unbloc {
|
||||
width: 23%;
|
||||
border: 1px solid #cecece;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=gamutable.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EACC,eAAe;ACEhB;;ADHA;EAGE,oBAAa;EAAb,aAAa;ACIf;;ADPA;EAME,oBAAY;MAAZ,YAAY;ACKd;;ADXA;EASE,YAAY;EACZ,WAAW;ACMb;;ADhBA;EAcE,eAAe;EACf,aAAa;ACMf;;ADrBA;EAkBE,UAAU;ACOZ;;ADJA;EACC,0CAA0C;ACO3C;;ADJA;EACC,eAAe;ACOhB;;ADJA;EACC,WAAW;EACX,kBAAkB;ACOnB;;ADLA;EACC,cAAA;ACQD;;ADLA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACQnB;;ADNA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACSnB;;ADdA;EAOE,yBAAyB;ACW3B;;ADPA;EACC,iBAAiB;ACUlB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table {\n font-size: 1rem;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ndiv.gamutable .url_action {\n padding: 0.2rem;\n display: inline-block;\n background-color: #f5f5f5;\n border: 1px solid #cecece;\n border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n background-color: #cecece;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n"]}
|
||||
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADGA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACA/B;;ADEA;EACC,oBAAa;EAAb,aAAa;ACCd;;ADEA;EACC,eAAe;ACChB;;ADFA;EAGE,oBAAa;EAAb,aAAa;ACGf;;ADNA;EAME,oBAAY;MAAZ,YAAY;ACId;;ADVA;EASE,YAAY;EACZ,WAAW;ACKb;;ADfA;EAcE,eAAe;EACf,aAAa;ACKf;;ADpBA;EAkBE,UAAU;ACMZ;;ADHA;EACC,0CAA0C;ACM3C;;ADHA;EACC,eAAe;ACMhB;;ADHA;EACC,WAAW;EACX,kBAAkB;ACMnB;;ADHA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACMnB;;ADJA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACOnB;;ADZA;EAOE,yBAAyB;ACS3B;;ADLA;EACC,iBAAiB;ACQlB;;ADLA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACQhB;;ADNA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACSnB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--surTable select,\n.gamutable--surTable input {\n margin-bottom: 0;\n}\n\n.gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table {\n font-size: 1rem;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ndiv.gamutable .url_action {\n padding: 0.2rem;\n display: inline-block;\n background-color: #f5f5f5;\n border: 1px solid #cecece;\n border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n background-color: #cecece;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n\n.vueBlocs {\n display: flex;\n flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n width: 23%;\n border: 1px solid #cecece;\n margin-bottom: 1rem;\n margin-right: 1rem;\n}\n"]}
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
.gamutable--surTable {
|
||||
select,
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.gamutable--sousTable {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -39,9 +45,6 @@ th.icone {
|
|||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
td.icone {
|
||||
/*padding: 0;*/
|
||||
}
|
||||
|
||||
td.icone > * {
|
||||
width: 100%;
|
||||
|
|
@ -63,3 +66,14 @@ div.gamutable .url_action {
|
|||
td.icone i {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.vueBlocs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.vueBlocs-unbloc {
|
||||
width: 23%;
|
||||
border: 1px solid #cecece;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,39 @@
|
|||
[(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
|
||||
<span class="crayon xxxx-yyyy-nn"></span>
|
||||
<div id="app">
|
||||
<mon-tableau
|
||||
apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
|
||||
:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
|
||||
champcsv="#ENV{champcsv,html}"
|
||||
delimitercsv="#ENV{delimitercsv,','}"
|
||||
namecsv="#ENV{namecsv,export.csv}"
|
||||
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
|
||||
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
<div class="gamutableUn">
|
||||
[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
|
||||
<mon-tableau
|
||||
apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
|
||||
:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
|
||||
champcsv="#ENV{champcsv,html}"
|
||||
delimitercsv="#ENV{delimitercsv,','}"
|
||||
namecsv="#ENV{namecsv}"
|
||||
urlvuebloc="[(#ENV{urlvuebloc})]"
|
||||
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
|
||||
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
|
||||
<BOUCLE_deux(CONDITION){si #ENV{apiuri_deux}|oui}>
|
||||
<span class="gamutableSep"></span>
|
||||
|
||||
<div class="gamutableDeux">
|
||||
[<span class="titre titreGamutableDeux">(#ENV{titreGamutableDeux})</span>]
|
||||
<mon-tableau
|
||||
apiuri="[(#ENV{apiuri_deux})]"
|
||||
:tparpage="#ENV{tparpage_deux, [10, 20, 50, 'Tous']}"
|
||||
champcsv="[(#ENV{champcsv,html})]"
|
||||
delimitercsv="[(#ENV{delimitercsv,','})]"
|
||||
namecsv="[(#ENV{namecsv_deux})]"
|
||||
urlvuebloc="[(#ENV{urlvuebloc_deux})]"
|
||||
url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]"
|
||||
url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
</BOUCLE_deux>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ jQuery(function () {
|
|||
}
|
||||
let url = $(this).attr('href');
|
||||
let id = $(this).data('id');
|
||||
let nomBlocAjaxReload = $(this).data('ajaxreload');
|
||||
console.time('Chargement de VueJs APRES Ajax');
|
||||
$.ajax({
|
||||
url: url,
|
||||
|
|
@ -25,9 +26,7 @@ jQuery(function () {
|
|||
if (nomBlocAjaxReload !== undefined) {
|
||||
ajaxReload(nomBlocAjaxReload, {
|
||||
args: { id },
|
||||
callback: function () {
|
||||
console.log('couco reload');
|
||||
},
|
||||
callback: function () {},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -146,7 +145,6 @@ function trouver_index(table, id) {
|
|||
});
|
||||
return i;
|
||||
}
|
||||
|
||||
let monTableau = {
|
||||
props: {
|
||||
tparpage: {
|
||||
|
|
@ -174,6 +172,13 @@ let monTableau = {
|
|||
url_sort_desc: {
|
||||
type: String,
|
||||
},
|
||||
urlvuebloc: {
|
||||
type: String,
|
||||
},
|
||||
vueblocdefaut: {
|
||||
type: String,
|
||||
default: 'tableau',
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
|
@ -192,10 +197,19 @@ let monTableau = {
|
|||
champ_search: 'html',
|
||||
chargement: true,
|
||||
nameLocalStorage: this.calculer_nameLocalStorage(),
|
||||
quelleVue: this.vueblocdefaut,
|
||||
vuebloc: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chargerJson();
|
||||
if (this.urlvuebloc) {
|
||||
fetch(this.urlvuebloc)
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
this.vuebloc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableau: function () {
|
||||
|
|
@ -241,7 +255,10 @@ let monTableau = {
|
|||
},
|
||||
methods: {
|
||||
calculer_nameLocalStorage() {
|
||||
return this.apiuri.match(/.*page=(.*)/)[1];
|
||||
if (this.apiuri) {
|
||||
return this.apiuri.match(/.*page=(.*)/)[1];
|
||||
}
|
||||
return '';
|
||||
},
|
||||
chargerJson(id) {
|
||||
let url = this.apiuri;
|
||||
|
|
@ -283,7 +300,6 @@ let monTableau = {
|
|||
this.table[i] = data[0];
|
||||
} else {
|
||||
let i = trouver_index(this.table, id);
|
||||
console.log('index ', i);
|
||||
this.table.splice(i, 1);
|
||||
}
|
||||
} else {
|
||||
|
|
@ -380,6 +396,16 @@ let monTableau = {
|
|||
$csv = [[...$header], ...$tableau];
|
||||
exporterCSV($csv, this.delimitercsv, this.namecsv);
|
||||
},
|
||||
replaceBloc(ligne) {
|
||||
let html = this.vuebloc;
|
||||
Object.keys(ligne).forEach((key) => {
|
||||
html = html.replace(`@@${key}@@`, ligne[key]);
|
||||
});
|
||||
return html;
|
||||
},
|
||||
changerVue(vue) {
|
||||
this.quelleVue = vue;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div class="gamutable">
|
||||
|
|
@ -388,45 +414,66 @@ let monTableau = {
|
|||
<option v-for="v in tparpage" :key="v">{{v}}</option>
|
||||
</select>
|
||||
<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher">
|
||||
<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
|
||||
|
||||
<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
|
||||
title="Réinitialiser les tris des colonnes">
|
||||
<i class="fa fa-repeat fas fa-redo">
|
||||
</button>
|
||||
|
||||
<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
|
||||
@click.stop="changerVue('tableau')"
|
||||
v-if="this.vuebloc"
|
||||
v-show="this.quelleVue === 'bloc'">
|
||||
<i class="fas fa fa-table">
|
||||
</button>
|
||||
|
||||
<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc"
|
||||
@click.stop="changerVue('bloc')"
|
||||
v-if="this.vuebloc"
|
||||
v-show="this.quelleVue === 'tableau'">
|
||||
<i class="fas fa fa-th-large">
|
||||
</button>
|
||||
<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
|
||||
v-show="this.namecsv"
|
||||
title="Exporter le tableau affiché en csv"
|
||||
>
|
||||
<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
|
||||
</button>
|
||||
<span v-show="chargement" class="rouge">
|
||||
<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
|
||||
Mise à jour de la base de donnée
|
||||
<span class="texteMajBDD">
|
||||
Mise à jour de la base de donnée
|
||||
</span>
|
||||
</span>
|
||||
<span v-show="!chargement" class="verte">
|
||||
<i class="fa fa-check"></i>
|
||||
Base de données synchronisée
|
||||
<span v-show="!chargement" class="btn verte" style="cursor:auto;"
|
||||
title="Base de donnée synchronisée !"
|
||||
>
|
||||
<i class="fa fas fa-database"></i>
|
||||
</span>
|
||||
</div>
|
||||
<table class="table table--zebra">
|
||||
<div class="vueBlocs" v-if="quelleVue === 'bloc'">
|
||||
<div class="vueBlocs-unbloc"
|
||||
v-for="(ligne) in tableau"
|
||||
:key=ligne.id
|
||||
v-html=replaceBloc(ligne.html)
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table--zebra" v-if="quelleVue === 'tableau'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
|
||||
<div>
|
||||
<div class="label_tete_colonne" v-html="label" @click.stop="tri(head)"></div>
|
||||
<div class="iconeTri">
|
||||
<svg class="tri_col" :class="ordreActif(head, 'asc')" width="1rem" height="1rem" @click.stop="tri(head,'asc')">
|
||||
<title></title>
|
||||
<use :xlink:href="url_sort_asc" />
|
||||
</svg>
|
||||
|
||||
<svg class="tri_col" :class="ordreActif(head, 'desc')" width="1rem" height="1rem" @click.stop="tri(head,'desc')">
|
||||
<title></title>
|
||||
<use :xlink:href="url_sort_desc" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span v-html="label"></span>
|
||||
<span class="iconeTri">
|
||||
<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
|
||||
<i class="fa fa-sort-desc fa-sort-down":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="l in tableau" :key="l.html.id" :id="'id_'+l.html.id" :data-id="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
|
||||
<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']" v-html="td" @click="selectLigne(l.html.id,name)">
|
||||
<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
|
||||
<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name]]" v-html="td" @click="selectLigne(l.html.id,name)">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
"use strict";
|
||||
|
||||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
|
||||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
||||
|
||||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
|
||||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
|
||||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
|
||||
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
||||
|
||||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
|
||||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
||||
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
||||
|
||||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
|
|
@ -32,6 +36,7 @@ jQuery(function () {
|
|||
|
||||
var url = $(this).attr('href');
|
||||
var id = $(this).data('id');
|
||||
var nomBlocAjaxReload = $(this).data('ajaxreload');
|
||||
console.time('Chargement de VueJs APRES Ajax');
|
||||
$.ajax({
|
||||
url: url,
|
||||
|
|
@ -48,9 +53,7 @@ jQuery(function () {
|
|||
args: {
|
||||
id: id
|
||||
},
|
||||
callback: function callback() {
|
||||
console.log('couco reload');
|
||||
}
|
||||
callback: function callback() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -217,6 +220,13 @@ var monTableau = {
|
|||
},
|
||||
url_sort_desc: {
|
||||
type: String
|
||||
},
|
||||
urlvuebloc: {
|
||||
type: String
|
||||
},
|
||||
vueblocdefaut: {
|
||||
type: String,
|
||||
default: 'tableau'
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
|
|
@ -235,15 +245,27 @@ var monTableau = {
|
|||
selectTr: [],
|
||||
champ_search: 'html',
|
||||
chargement: true,
|
||||
nameLocalStorage: this.calculer_nameLocalStorage()
|
||||
nameLocalStorage: this.calculer_nameLocalStorage(),
|
||||
quelleVue: this.vueblocdefaut,
|
||||
vuebloc: ''
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var _this = this;
|
||||
|
||||
this.chargerJson();
|
||||
|
||||
if (this.urlvuebloc) {
|
||||
fetch(this.urlvuebloc).then(function (response) {
|
||||
return response.text();
|
||||
}).then(function (data) {
|
||||
_this.vuebloc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableau: function tableau() {
|
||||
var _this = this;
|
||||
var _this2 = this;
|
||||
|
||||
this.setPages();
|
||||
|
||||
|
|
@ -252,7 +274,7 @@ var monTableau = {
|
|||
}
|
||||
|
||||
return this.pagination(this.table.filter(function (ligne) {
|
||||
return Object.values(ligne[_this.champ_search]).toString().toLowerCase().indexOf(_this.search.toLowerCase()) < 0 ? false : true;
|
||||
return Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
|
@ -278,10 +300,14 @@ var monTableau = {
|
|||
},
|
||||
methods: {
|
||||
calculer_nameLocalStorage: function calculer_nameLocalStorage() {
|
||||
return this.apiuri.match(/.*page=(.*)/)[1];
|
||||
if (this.apiuri) {
|
||||
return this.apiuri.match(/.*page=(.*)/)[1];
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
chargerJson: function chargerJson(id) {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var url = this.apiuri;
|
||||
|
||||
|
|
@ -317,40 +343,38 @@ var monTableau = {
|
|||
return response.json();
|
||||
}).then(function (data) {
|
||||
var config = data.shift();
|
||||
_this2.header = config.header;
|
||||
_this3.header = config.header;
|
||||
|
||||
if (config.crayons !== undefined) {
|
||||
_this2.crayons = config.crayons;
|
||||
_this3.crayons = config.crayons;
|
||||
}
|
||||
|
||||
if (config.classes !== undefined) {
|
||||
_this2.classes = config.classes;
|
||||
_this3.classes = config.classes;
|
||||
}
|
||||
|
||||
if (parseInt(id) > 0) {
|
||||
if (data.length > 0) {
|
||||
var i = trouver_index(_this2.table, id);
|
||||
_this2.table[i] = data[0];
|
||||
var i = trouver_index(_this3.table, id);
|
||||
_this3.table[i] = data[0];
|
||||
} else {
|
||||
var _i2 = trouver_index(_this2.table, id);
|
||||
var _i2 = trouver_index(_this3.table, id);
|
||||
|
||||
console.log('index ', _i2);
|
||||
|
||||
_this2.table.splice(_i2, 1);
|
||||
_this3.table.splice(_i2, 1);
|
||||
}
|
||||
} else {
|
||||
_this2.table = data;
|
||||
_this3.table = data;
|
||||
|
||||
if (data[0] && data[0].search) {
|
||||
_this2.champ_search = 'search';
|
||||
_this3.champ_search = 'search';
|
||||
}
|
||||
}
|
||||
|
||||
Vue.nextTick(function () {
|
||||
_this2.chargement = false;
|
||||
_this3.chargement = false;
|
||||
|
||||
if ($_id > 0) {
|
||||
_this2.selectLigne($_id, 'id');
|
||||
_this3.selectLigne($_id, 'id');
|
||||
|
||||
var _url = new URL(window.location);
|
||||
|
||||
|
|
@ -435,7 +459,7 @@ var monTableau = {
|
|||
}
|
||||
},
|
||||
exportCSV: function exportCSV() {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
var $csv = [];
|
||||
var $header = [];
|
||||
|
|
@ -445,16 +469,26 @@ var monTableau = {
|
|||
});
|
||||
$tableau = this.tableau.reduce(function (acc, ligne) {
|
||||
var $uneLigne = [];
|
||||
Object.values(ligne[_this3.champcsv]).forEach(function (l) {
|
||||
Object.values(ligne[_this4.champcsv]).forEach(function (l) {
|
||||
return $uneLigne.push(l);
|
||||
});
|
||||
return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
|
||||
}, []);
|
||||
$csv = [[].concat($header)].concat(_toConsumableArray($tableau));
|
||||
exporterCSV($csv, this.delimitercsv, this.namecsv);
|
||||
},
|
||||
replaceBloc: function replaceBloc(ligne) {
|
||||
var html = this.vuebloc;
|
||||
Object.keys(ligne).forEach(function (key) {
|
||||
html = html.replace("@@".concat(key, "@@"), ligne[key]);
|
||||
});
|
||||
return html;
|
||||
},
|
||||
changerVue: function changerVue(vue) {
|
||||
this.quelleVue = vue;
|
||||
}
|
||||
},
|
||||
template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<div class=\"label_tete_colonne\" v-html=\"label\" @click.stop=\"tri(head)\"></div>\n\t\t\t\t\t\t\t<div class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'asc')\" width=\"1rem\" height=\"1rem\" @click.stop=\"tri(head,'asc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_asc\" />\n\t\t\t\t\t\t\t\t</svg>\n\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'desc')\" width=\"1rem\" height=\"1rem\" @click.stop=\"tri(head,'desc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_desc\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :id=\"'id_'+l.html.id\" :data-id=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
|
||||
template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\"\n\t\t\t\ttitle=\"R\xE9initialiser les tris des colonnes\">\n\t\t\t\t<i class=\"fa fa-repeat fas fa-redo\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueTable\" title=\"Switcher en Vue tableau\"\n\t\t\t\t@click.stop=\"changerVue('tableau')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'bloc'\">\n\t\t\t\t<i class=\"fas fa fa-table\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueBloc\" title=\"Switcher en Vue Bloc\"\n\t\t\t\t@click.stop=\"changerVue('bloc')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'tableau'\">\n\t\t\t\t<i class=\"fas fa fa-th-large\">\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\t<span class=\"texteMajBDD\">\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"btn verte\" style=\"cursor:auto;\"\n\t\t\t\ttitle=\"Base de donn\xE9e synchronis\xE9e !\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fas fa-database\"></i>\n\t\t\t</span>\n\t\t</div>\n\t\t<div class=\"vueBlocs\" v-if=\"quelleVue === 'bloc'\">\n\t\t\t<div class=\"vueBlocs-unbloc\"\n\t\t\tv-for=\"(ligne) in tableau\"\n\t\t\t:key=ligne.id\n\t\t\tv-html=replaceBloc(ligne.html)\n\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<table class=\"table table--zebra\" v-if=\"quelleVue === 'tableau'\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name]]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
|
||||
};
|
||||
var gamuTable = {
|
||||
components: {
|
||||
|
|
|
|||
151
js/vue.js
151
js/vue.js
|
|
@ -252,7 +252,7 @@ var Vue = (function (exports) {
|
|||
|
||||
const EMPTY_OBJ = Object.freeze({})
|
||||
;
|
||||
const EMPTY_ARR = [];
|
||||
const EMPTY_ARR = Object.freeze([]) ;
|
||||
const NOOP = () => { };
|
||||
/**
|
||||
* Always return false.
|
||||
|
|
@ -292,7 +292,9 @@ var Vue = (function (exports) {
|
|||
key !== 'NaN' &&
|
||||
key[0] !== '-' &&
|
||||
'' + parseInt(key, 10) === key;
|
||||
const isReservedProp = /*#__PURE__*/ makeMap('key,ref,' +
|
||||
const isReservedProp = /*#__PURE__*/ makeMap(
|
||||
// the leading comma is intentional so empty string "" is also included
|
||||
',key,ref,' +
|
||||
'onVnodeBeforeMount,onVnodeMounted,' +
|
||||
'onVnodeBeforeUpdate,onVnodeUpdated,' +
|
||||
'onVnodeBeforeUnmount,onVnodeUnmounted');
|
||||
|
|
@ -314,15 +316,15 @@ var Vue = (function (exports) {
|
|||
/**
|
||||
* @private
|
||||
*/
|
||||
const hyphenate = cacheStringFunction((str) => {
|
||||
return str.replace(hyphenateRE, '-$1').toLowerCase();
|
||||
});
|
||||
const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase());
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const capitalize = cacheStringFunction((str) => {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
});
|
||||
const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
const toHandlerKey = cacheStringFunction((str) => (str ? `on${capitalize(str)}` : ``));
|
||||
// compare whether a value has changed, accounting for NaN.
|
||||
const hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
|
||||
const invokeArrayFns = (fns, arg) => {
|
||||
|
|
@ -667,7 +669,7 @@ var Vue = (function (exports) {
|
|||
return result;
|
||||
}
|
||||
function ownKeys(target) {
|
||||
track(target, "iterate" /* ITERATE */, ITERATE_KEY);
|
||||
track(target, "iterate" /* ITERATE */, isArray(target) ? 'length' : ITERATE_KEY);
|
||||
return Reflect.ownKeys(target);
|
||||
}
|
||||
const mutableHandlers = {
|
||||
|
|
@ -1739,21 +1741,21 @@ var Vue = (function (exports) {
|
|||
exports.devtools.emit("component:emit" /* COMPONENT_EMIT */, component.appContext.app, component, event, params);
|
||||
}
|
||||
|
||||
function emit(instance, event, ...args) {
|
||||
function emit(instance, event, ...rawArgs) {
|
||||
const props = instance.vnode.props || EMPTY_OBJ;
|
||||
{
|
||||
const { emitsOptions, propsOptions: [propsOptions] } = instance;
|
||||
if (emitsOptions) {
|
||||
if (!(event in emitsOptions)) {
|
||||
if (!propsOptions || !(`on` + capitalize(event) in propsOptions)) {
|
||||
if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
|
||||
warn(`Component emitted event "${event}" but it is neither declared in ` +
|
||||
`the emits option nor as an "on${capitalize(event)}" prop.`);
|
||||
`the emits option nor as an "${toHandlerKey(event)}" prop.`);
|
||||
}
|
||||
}
|
||||
else {
|
||||
const validator = emitsOptions[event];
|
||||
if (isFunction(validator)) {
|
||||
const isValid = validator(...args);
|
||||
const isValid = validator(...rawArgs);
|
||||
if (!isValid) {
|
||||
warn(`Invalid event arguments: event validation failed for event "${event}".`);
|
||||
}
|
||||
|
|
@ -1761,12 +1763,26 @@ var Vue = (function (exports) {
|
|||
}
|
||||
}
|
||||
}
|
||||
let args = rawArgs;
|
||||
const isModelListener = event.startsWith('update:');
|
||||
// for v-model update:xxx events, apply modifiers on args
|
||||
const modelArg = isModelListener && event.slice(7);
|
||||
if (modelArg && modelArg in props) {
|
||||
const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`;
|
||||
const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
|
||||
if (trim) {
|
||||
args = rawArgs.map(a => a.trim());
|
||||
}
|
||||
else if (number) {
|
||||
args = rawArgs.map(toNumber);
|
||||
}
|
||||
}
|
||||
{
|
||||
devtoolsComponentEmit(instance, event, args);
|
||||
}
|
||||
{
|
||||
const lowerCaseEvent = event.toLowerCase();
|
||||
if (lowerCaseEvent !== event && props[`on` + capitalize(lowerCaseEvent)]) {
|
||||
if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
|
||||
warn(`Event "${lowerCaseEvent}" is emitted in component ` +
|
||||
`${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". ` +
|
||||
`Note that HTML attributes are case-insensitive and you cannot use ` +
|
||||
|
|
@ -1775,25 +1791,26 @@ var Vue = (function (exports) {
|
|||
}
|
||||
}
|
||||
// convert handler name to camelCase. See issue #2249
|
||||
let handlerName = `on${capitalize(camelize(event))}`;
|
||||
let handlerName = toHandlerKey(camelize(event));
|
||||
let handler = props[handlerName];
|
||||
// for v-model update:xxx events, also trigger kebab-case equivalent
|
||||
// for props passed via kebab-case
|
||||
if (!handler && event.startsWith('update:')) {
|
||||
handlerName = `on${capitalize(hyphenate(event))}`;
|
||||
if (!handler && isModelListener) {
|
||||
handlerName = toHandlerKey(hyphenate(event));
|
||||
handler = props[handlerName];
|
||||
}
|
||||
if (!handler) {
|
||||
handler = props[handlerName + `Once`];
|
||||
if (handler) {
|
||||
callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
|
||||
}
|
||||
const onceHandler = props[handlerName + `Once`];
|
||||
if (onceHandler) {
|
||||
if (!instance.emitted) {
|
||||
(instance.emitted = {})[handlerName] = true;
|
||||
}
|
||||
else if (instance.emitted[handlerName]) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (handler) {
|
||||
callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
|
||||
callWithAsyncErrorHandling(onceHandler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
|
||||
}
|
||||
}
|
||||
function normalizeEmitsOptions(comp, appContext, asMixin = false) {
|
||||
|
|
@ -2003,11 +2020,13 @@ var Vue = (function (exports) {
|
|||
const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
|
||||
const setRoot = (updatedRoot) => {
|
||||
rawChildren[index] = updatedRoot;
|
||||
if (dynamicIndex > -1) {
|
||||
dynamicChildren[dynamicIndex] = updatedRoot;
|
||||
}
|
||||
else if (dynamicChildren && updatedRoot.patchFlag > 0) {
|
||||
dynamicChildren.push(updatedRoot);
|
||||
if (dynamicChildren) {
|
||||
if (dynamicIndex > -1) {
|
||||
dynamicChildren[dynamicIndex] = updatedRoot;
|
||||
}
|
||||
else if (updatedRoot.patchFlag > 0) {
|
||||
vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
|
||||
}
|
||||
}
|
||||
};
|
||||
return [normalizeVNode(childRoot), setRoot];
|
||||
|
|
@ -2145,7 +2164,7 @@ var Vue = (function (exports) {
|
|||
mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals);
|
||||
}
|
||||
else {
|
||||
patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized, rendererInternals);
|
||||
patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, rendererInternals);
|
||||
}
|
||||
},
|
||||
hydrate: hydrateSuspense,
|
||||
|
|
@ -2159,13 +2178,13 @@ var Vue = (function (exports) {
|
|||
const hiddenContainer = createElement('div');
|
||||
const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals));
|
||||
// start mounting the content subtree in an off-dom container
|
||||
patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
|
||||
patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG);
|
||||
// now check if we have encountered any async deps
|
||||
if (suspense.deps > 0) {
|
||||
// has async
|
||||
// mount the fallback tree
|
||||
patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||
isSVG, optimized);
|
||||
isSVG);
|
||||
setActiveBranch(suspense, vnode.ssFallback);
|
||||
}
|
||||
else {
|
||||
|
|
@ -2173,7 +2192,7 @@ var Vue = (function (exports) {
|
|||
suspense.resolve();
|
||||
}
|
||||
}
|
||||
function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized, { p: patch, um: unmount, o: { createElement } }) {
|
||||
function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, { p: patch, um: unmount, o: { createElement } }) {
|
||||
const suspense = (n2.suspense = n1.suspense);
|
||||
suspense.vnode = n2;
|
||||
n2.el = n1.el;
|
||||
|
|
@ -2184,13 +2203,13 @@ var Vue = (function (exports) {
|
|||
suspense.pendingBranch = newBranch;
|
||||
if (isSameVNodeType(newBranch, pendingBranch)) {
|
||||
// same root type but content may have changed.
|
||||
patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
|
||||
patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
|
||||
if (suspense.deps <= 0) {
|
||||
suspense.resolve();
|
||||
}
|
||||
else if (isInFallback) {
|
||||
patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||
isSVG, optimized);
|
||||
isSVG);
|
||||
setActiveBranch(suspense, newFallback);
|
||||
}
|
||||
}
|
||||
|
|
@ -2216,25 +2235,25 @@ var Vue = (function (exports) {
|
|||
suspense.hiddenContainer = createElement('div');
|
||||
if (isInFallback) {
|
||||
// already in fallback state
|
||||
patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
|
||||
patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
|
||||
if (suspense.deps <= 0) {
|
||||
suspense.resolve();
|
||||
}
|
||||
else {
|
||||
patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||
isSVG, optimized);
|
||||
isSVG);
|
||||
setActiveBranch(suspense, newFallback);
|
||||
}
|
||||
}
|
||||
else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
|
||||
// toggled "back" to current active branch
|
||||
patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, optimized);
|
||||
patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG);
|
||||
// force resolve
|
||||
suspense.resolve(true);
|
||||
}
|
||||
else {
|
||||
// switched to a 3rd branch
|
||||
patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
|
||||
patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
|
||||
if (suspense.deps <= 0) {
|
||||
suspense.resolve();
|
||||
}
|
||||
|
|
@ -2244,7 +2263,7 @@ var Vue = (function (exports) {
|
|||
else {
|
||||
if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
|
||||
// root did not change, just normal patch
|
||||
patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, optimized);
|
||||
patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG);
|
||||
setActiveBranch(suspense, newBranch);
|
||||
}
|
||||
else {
|
||||
|
|
@ -2257,7 +2276,7 @@ var Vue = (function (exports) {
|
|||
// mount pending branch in off-dom container
|
||||
suspense.pendingBranch = newBranch;
|
||||
suspense.pendingId++;
|
||||
patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
|
||||
patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
|
||||
if (suspense.deps <= 0) {
|
||||
// incoming branch has no async deps, resolve now.
|
||||
suspense.resolve();
|
||||
|
|
@ -2293,7 +2312,6 @@ var Vue = (function (exports) {
|
|||
parent,
|
||||
parentComponent,
|
||||
isSVG,
|
||||
optimized,
|
||||
container,
|
||||
hiddenContainer,
|
||||
anchor,
|
||||
|
|
@ -2376,7 +2394,7 @@ var Vue = (function (exports) {
|
|||
if (!suspense.pendingBranch) {
|
||||
return;
|
||||
}
|
||||
const { vnode, activeBranch, parentComponent, container, isSVG, optimized } = suspense;
|
||||
const { vnode, activeBranch, parentComponent, container, isSVG } = suspense;
|
||||
// invoke @fallback event
|
||||
const onFallback = vnode.props && vnode.props.onFallback;
|
||||
if (isFunction(onFallback)) {
|
||||
|
|
@ -2389,7 +2407,7 @@ var Vue = (function (exports) {
|
|||
}
|
||||
// mount the fallback tree
|
||||
patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||
isSVG, optimized);
|
||||
isSVG);
|
||||
setActiveBranch(suspense, fallbackVNode);
|
||||
};
|
||||
const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in';
|
||||
|
|
@ -3058,7 +3076,7 @@ var Vue = (function (exports) {
|
|||
return wrappedHook;
|
||||
}
|
||||
else {
|
||||
const apiName = `on${capitalize(ErrorTypeStrings[type].replace(/ hook$/, ''))}`;
|
||||
const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ''));
|
||||
warn(`${apiName} is called when there is no active component instance to be ` +
|
||||
`associated with. ` +
|
||||
`Lifecycle injection APIs can only be used during execution of setup().` +
|
||||
|
|
@ -4984,6 +5002,7 @@ var Vue = (function (exports) {
|
|||
const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
|
||||
if (oldProps !== newProps) {
|
||||
for (const key in newProps) {
|
||||
// empty string is not valid prop
|
||||
if (isReservedProp(key))
|
||||
continue;
|
||||
const next = newProps[key];
|
||||
|
|
@ -5623,7 +5642,10 @@ var Vue = (function (exports) {
|
|||
// fast path for block nodes: only need to unmount dynamic children.
|
||||
unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);
|
||||
}
|
||||
else if (!optimized && shapeFlag & 16 /* ARRAY_CHILDREN */) {
|
||||
else if ((type === Fragment &&
|
||||
(patchFlag & 128 /* KEYED_FRAGMENT */ ||
|
||||
patchFlag & 256 /* UNKEYED_FRAGMENT */)) ||
|
||||
(!optimized && shapeFlag & 16 /* ARRAY_CHILDREN */)) {
|
||||
unmountChildren(children, parentComponent, parentSuspense);
|
||||
}
|
||||
// an unmounted teleport should always remove its children if not disabled
|
||||
|
|
@ -6518,7 +6540,7 @@ var Vue = (function (exports) {
|
|||
: incoming;
|
||||
}
|
||||
}
|
||||
else {
|
||||
else if (key !== '') {
|
||||
ret[key] = toMerge[key];
|
||||
}
|
||||
}
|
||||
|
|
@ -6552,8 +6574,13 @@ var Vue = (function (exports) {
|
|||
// a functional component
|
||||
const instance = currentInstance || currentRenderingInstance;
|
||||
if (instance) {
|
||||
const provides = instance.provides;
|
||||
if (key in provides) {
|
||||
// #2400
|
||||
// to support `app.use` plugins,
|
||||
// fallback to appContext's `provides` if the intance is at root
|
||||
const provides = instance.parent == null
|
||||
? instance.vnode.appContext && instance.vnode.appContext.provides
|
||||
: instance.parent.provides;
|
||||
if (provides && key in provides) {
|
||||
// TS doesn't allow symbol as index type
|
||||
return provides[key];
|
||||
}
|
||||
|
|
@ -7317,7 +7344,7 @@ var Vue = (function (exports) {
|
|||
}
|
||||
}
|
||||
// 0. create render proxy property access cache
|
||||
instance.accessCache = {};
|
||||
instance.accessCache = Object.create(null);
|
||||
// 1. create public instance / render proxy
|
||||
// also mark it raw so it's never observed
|
||||
instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
|
||||
|
|
@ -7913,7 +7940,7 @@ var Vue = (function (exports) {
|
|||
return ret;
|
||||
}
|
||||
for (const key in obj) {
|
||||
ret[`on${capitalize(key)}`] = obj[key];
|
||||
ret[toHandlerKey(key)] = obj[key];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
|
@ -7940,7 +7967,7 @@ var Vue = (function (exports) {
|
|||
}
|
||||
|
||||
// Core API ------------------------------------------------------------------
|
||||
const version = "3.0.1";
|
||||
const version = "3.0.2";
|
||||
/**
|
||||
* SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
|
||||
* @internal
|
||||
|
|
@ -9276,6 +9303,7 @@ var Vue = (function (exports) {
|
|||
const TO_HANDLERS = Symbol( `toHandlers` );
|
||||
const CAMELIZE = Symbol( `camelize` );
|
||||
const CAPITALIZE = Symbol( `capitalize` );
|
||||
const TO_HANDLER_KEY = Symbol( `toHandlerKey` );
|
||||
const SET_BLOCK_TRACKING = Symbol( `setBlockTracking` );
|
||||
const PUSH_SCOPE_ID = Symbol( `pushScopeId` );
|
||||
const POP_SCOPE_ID = Symbol( `popScopeId` );
|
||||
|
|
@ -9308,6 +9336,7 @@ var Vue = (function (exports) {
|
|||
[TO_HANDLERS]: `toHandlers`,
|
||||
[CAMELIZE]: `camelize`,
|
||||
[CAPITALIZE]: `capitalize`,
|
||||
[TO_HANDLER_KEY]: `toHandlerKey`,
|
||||
[SET_BLOCK_TRACKING]: `setBlockTracking`,
|
||||
[PUSH_SCOPE_ID]: `pushScopeId`,
|
||||
[POP_SCOPE_ID]: `popScopeId`,
|
||||
|
|
@ -9464,7 +9493,7 @@ var Vue = (function (exports) {
|
|||
}
|
||||
const nonIdentifierRE = /^\d|[^\$\w]/;
|
||||
const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
|
||||
const memberExpRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\[[^\]]+\])*$/;
|
||||
const memberExpRE = /^[A-Za-z_$][\w$]*(?:\s*\.\s*[A-Za-z_$][\w$]*|\[[^\]]+\])*$/;
|
||||
const isMemberExpression = (path) => {
|
||||
if (!path)
|
||||
return false;
|
||||
|
|
@ -12481,12 +12510,12 @@ var Vue = (function (exports) {
|
|||
if (arg.isStatic) {
|
||||
const rawName = arg.content;
|
||||
// for all event listeners, auto convert it to camelCase. See issue #2249
|
||||
const normalizedName = capitalize(camelize(rawName));
|
||||
eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc);
|
||||
eventName = createSimpleExpression(toHandlerKey(camelize(rawName)), true, arg.loc);
|
||||
}
|
||||
else {
|
||||
// #2388
|
||||
eventName = createCompoundExpression([
|
||||
`"on" + ${context.helperString(CAPITALIZE)}(`,
|
||||
`${context.helperString(TO_HANDLER_KEY)}(`,
|
||||
arg,
|
||||
`)`
|
||||
]);
|
||||
|
|
@ -12495,7 +12524,7 @@ var Vue = (function (exports) {
|
|||
else {
|
||||
// already a compound expression.
|
||||
eventName = arg;
|
||||
eventName.children.unshift(`"on" + ${context.helperString(CAPITALIZE)}(`);
|
||||
eventName.children.unshift(`${context.helperString(TO_HANDLER_KEY)}(`);
|
||||
eventName.children.push(`)`);
|
||||
}
|
||||
// handler processing
|
||||
|
|
@ -12544,6 +12573,13 @@ var Vue = (function (exports) {
|
|||
const transformBind = (dir, node, context) => {
|
||||
const { exp, modifiers, loc } = dir;
|
||||
const arg = dir.arg;
|
||||
if (arg.type !== 4 /* SIMPLE_EXPRESSION */) {
|
||||
arg.children.unshift(`(`);
|
||||
arg.children.push(`) || ""`);
|
||||
}
|
||||
else if (!arg.isStatic) {
|
||||
arg.content = `${arg.content} || ""`;
|
||||
}
|
||||
// .prop is no longer necessary due to new patch behavior
|
||||
// .sync is replaced by v-model:arg
|
||||
if (modifiers.includes('camel')) {
|
||||
|
|
@ -12935,7 +12971,9 @@ var Vue = (function (exports) {
|
|||
}
|
||||
return {
|
||||
props: [
|
||||
createObjectProperty(createSimpleExpression(`textContent`, true, loc), exp || createSimpleExpression('', true))
|
||||
createObjectProperty(createSimpleExpression(`textContent`, true), exp
|
||||
? createCallExpression(context.helperString(TO_DISPLAY_STRING), [exp], loc)
|
||||
: createSimpleExpression('', true))
|
||||
]
|
||||
};
|
||||
};
|
||||
|
|
@ -13337,6 +13375,7 @@ var Vue = (function (exports) {
|
|||
exports.ssrContextKey = ssrContextKey;
|
||||
exports.ssrUtils = ssrUtils;
|
||||
exports.toDisplayString = toDisplayString;
|
||||
exports.toHandlerKey = toHandlerKey;
|
||||
exports.toHandlers = toHandlers;
|
||||
exports.toRaw = toRaw;
|
||||
exports.toRef = toRef;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue