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'],
|
tparpage=[15,25,50,'Tous'],
|
||||||
champcsv="search",
|
champcsv="search",
|
||||||
delimitercsv=";",
|
delimitercsv=";",
|
||||||
|
urlvuebloc=spip.php?page=mon_bloc_type_html,
|
||||||
|
vueblocdefaut='bloc ou tableau', // par defaut tableau
|
||||||
namecsv="souscripteurs.csv",
|
namecsv="souscripteurs.csv",
|
||||||
url_sort_asc="#CHEMIN{...}"
|
url_sort_asc="#CHEMIN{...}"
|
||||||
url_sort_desc="#CHEMIN{...}"
|
url_sort_desc="#CHEMIN{...}"
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
.gamutable--surTable select,
|
||||||
|
.gamutable--surTable input {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.gamutable--sousTable {
|
.gamutable--sousTable {
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -51,10 +56,6 @@ th.icone {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
td.icone {
|
|
||||||
/*padding: 0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
td.icone > * {
|
td.icone > * {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -78,4 +79,18 @@ td.icone i {
|
||||||
font-size: 1.8rem;
|
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 */
|
/*# 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 {
|
.gamutable--sousTable {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -39,9 +45,6 @@ th.icone {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
td.icone {
|
|
||||||
/*padding: 0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
td.icone > * {
|
td.icone > * {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -63,3 +66,14 @@ div.gamutable .url_action {
|
||||||
td.icone i {
|
td.icone i {
|
||||||
font-size: 1.8rem;
|
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]})]
|
[(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
|
||||||
<span class="crayon xxxx-yyyy-nn"></span>
|
<span class="crayon xxxx-yyyy-nn"></span>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<mon-tableau
|
<div class="gamutableUn">
|
||||||
apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
|
[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
|
||||||
:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
|
<mon-tableau
|
||||||
champcsv="#ENV{champcsv,html}"
|
apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
|
||||||
delimitercsv="#ENV{delimitercsv,','}"
|
:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
|
||||||
namecsv="#ENV{namecsv,export.csv}"
|
champcsv="#ENV{champcsv,html}"
|
||||||
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
|
delimitercsv="#ENV{delimitercsv,','}"
|
||||||
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
|
namecsv="#ENV{namecsv}"
|
||||||
ref="montableau"
|
urlvuebloc="[(#ENV{urlvuebloc})]"
|
||||||
></mon-tableau>
|
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>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ jQuery(function () {
|
||||||
}
|
}
|
||||||
let url = $(this).attr('href');
|
let url = $(this).attr('href');
|
||||||
let id = $(this).data('id');
|
let id = $(this).data('id');
|
||||||
|
let nomBlocAjaxReload = $(this).data('ajaxreload');
|
||||||
console.time('Chargement de VueJs APRES Ajax');
|
console.time('Chargement de VueJs APRES Ajax');
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: url,
|
url: url,
|
||||||
|
|
@ -25,9 +26,7 @@ jQuery(function () {
|
||||||
if (nomBlocAjaxReload !== undefined) {
|
if (nomBlocAjaxReload !== undefined) {
|
||||||
ajaxReload(nomBlocAjaxReload, {
|
ajaxReload(nomBlocAjaxReload, {
|
||||||
args: { id },
|
args: { id },
|
||||||
callback: function () {
|
callback: function () {},
|
||||||
console.log('couco reload');
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -146,7 +145,6 @@ function trouver_index(table, id) {
|
||||||
});
|
});
|
||||||
return i;
|
return i;
|
||||||
}
|
}
|
||||||
|
|
||||||
let monTableau = {
|
let monTableau = {
|
||||||
props: {
|
props: {
|
||||||
tparpage: {
|
tparpage: {
|
||||||
|
|
@ -174,6 +172,13 @@ let monTableau = {
|
||||||
url_sort_desc: {
|
url_sort_desc: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
urlvuebloc: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
vueblocdefaut: {
|
||||||
|
type: String,
|
||||||
|
default: 'tableau',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -192,10 +197,19 @@ let monTableau = {
|
||||||
champ_search: 'html',
|
champ_search: 'html',
|
||||||
chargement: true,
|
chargement: true,
|
||||||
nameLocalStorage: this.calculer_nameLocalStorage(),
|
nameLocalStorage: this.calculer_nameLocalStorage(),
|
||||||
|
quelleVue: this.vueblocdefaut,
|
||||||
|
vuebloc: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.chargerJson();
|
this.chargerJson();
|
||||||
|
if (this.urlvuebloc) {
|
||||||
|
fetch(this.urlvuebloc)
|
||||||
|
.then((response) => response.text())
|
||||||
|
.then((data) => {
|
||||||
|
this.vuebloc = data;
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tableau: function () {
|
tableau: function () {
|
||||||
|
|
@ -241,7 +255,10 @@ let monTableau = {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
calculer_nameLocalStorage() {
|
calculer_nameLocalStorage() {
|
||||||
return this.apiuri.match(/.*page=(.*)/)[1];
|
if (this.apiuri) {
|
||||||
|
return this.apiuri.match(/.*page=(.*)/)[1];
|
||||||
|
}
|
||||||
|
return '';
|
||||||
},
|
},
|
||||||
chargerJson(id) {
|
chargerJson(id) {
|
||||||
let url = this.apiuri;
|
let url = this.apiuri;
|
||||||
|
|
@ -283,7 +300,6 @@ let monTableau = {
|
||||||
this.table[i] = data[0];
|
this.table[i] = data[0];
|
||||||
} else {
|
} else {
|
||||||
let i = trouver_index(this.table, id);
|
let i = trouver_index(this.table, id);
|
||||||
console.log('index ', i);
|
|
||||||
this.table.splice(i, 1);
|
this.table.splice(i, 1);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -380,6 +396,16 @@ let monTableau = {
|
||||||
$csv = [[...$header], ...$tableau];
|
$csv = [[...$header], ...$tableau];
|
||||||
exporterCSV($csv, this.delimitercsv, this.namecsv);
|
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: `
|
template: `
|
||||||
<div class="gamutable">
|
<div class="gamutable">
|
||||||
|
|
@ -388,45 +414,66 @@ let monTableau = {
|
||||||
<option v-for="v in tparpage" :key="v">{{v}}</option>
|
<option v-for="v in tparpage" :key="v">{{v}}</option>
|
||||||
</select>
|
</select>
|
||||||
<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher">
|
<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()"
|
<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
|
||||||
|
v-show="this.namecsv"
|
||||||
title="Exporter le tableau affiché en csv"
|
title="Exporter le tableau affiché en csv"
|
||||||
>
|
>
|
||||||
<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
|
<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
|
||||||
</button>
|
</button>
|
||||||
<span v-show="chargement" class="rouge">
|
<span v-show="chargement" class="rouge">
|
||||||
<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
|
<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>
|
||||||
<span v-show="!chargement" class="verte">
|
<span v-show="!chargement" class="btn verte" style="cursor:auto;"
|
||||||
<i class="fa fa-check"></i>
|
title="Base de donnée synchronisée !"
|
||||||
Base de données synchronisée
|
>
|
||||||
|
<i class="fa fas fa-database"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
|
<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
|
||||||
<div>
|
<span v-html="label"></span>
|
||||||
<div class="label_tete_colonne" v-html="label" @click.stop="tri(head)"></div>
|
<span class="iconeTri">
|
||||||
<div class="iconeTri">
|
<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
|
||||||
<svg class="tri_col" :class="ordreActif(head, 'asc')" width="1rem" height="1rem" @click.stop="tri(head,'asc')">
|
<i class="fa fa-sort-desc fa-sort-down":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
|
||||||
<title></title>
|
</span>
|
||||||
<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>
|
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<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' : ''" >
|
<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], l.classes !== undefined ? l.classes[name] : '']" v-html="td" @click="selectLigne(l.html.id,name)">
|
<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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,22 @@
|
||||||
"use strict";
|
"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; }
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||||
|
|
||||||
|
|
@ -32,6 +36,7 @@ jQuery(function () {
|
||||||
|
|
||||||
var url = $(this).attr('href');
|
var url = $(this).attr('href');
|
||||||
var id = $(this).data('id');
|
var id = $(this).data('id');
|
||||||
|
var nomBlocAjaxReload = $(this).data('ajaxreload');
|
||||||
console.time('Chargement de VueJs APRES Ajax');
|
console.time('Chargement de VueJs APRES Ajax');
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: url,
|
url: url,
|
||||||
|
|
@ -48,9 +53,7 @@ jQuery(function () {
|
||||||
args: {
|
args: {
|
||||||
id: id
|
id: id
|
||||||
},
|
},
|
||||||
callback: function callback() {
|
callback: function callback() {}
|
||||||
console.log('couco reload');
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -217,6 +220,13 @@ var monTableau = {
|
||||||
},
|
},
|
||||||
url_sort_desc: {
|
url_sort_desc: {
|
||||||
type: String
|
type: String
|
||||||
|
},
|
||||||
|
urlvuebloc: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
vueblocdefaut: {
|
||||||
|
type: String,
|
||||||
|
default: 'tableau'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: function data() {
|
data: function data() {
|
||||||
|
|
@ -235,15 +245,27 @@ var monTableau = {
|
||||||
selectTr: [],
|
selectTr: [],
|
||||||
champ_search: 'html',
|
champ_search: 'html',
|
||||||
chargement: true,
|
chargement: true,
|
||||||
nameLocalStorage: this.calculer_nameLocalStorage()
|
nameLocalStorage: this.calculer_nameLocalStorage(),
|
||||||
|
quelleVue: this.vueblocdefaut,
|
||||||
|
vuebloc: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted: function mounted() {
|
mounted: function mounted() {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
this.chargerJson();
|
this.chargerJson();
|
||||||
|
|
||||||
|
if (this.urlvuebloc) {
|
||||||
|
fetch(this.urlvuebloc).then(function (response) {
|
||||||
|
return response.text();
|
||||||
|
}).then(function (data) {
|
||||||
|
_this.vuebloc = data;
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tableau: function tableau() {
|
tableau: function tableau() {
|
||||||
var _this = this;
|
var _this2 = this;
|
||||||
|
|
||||||
this.setPages();
|
this.setPages();
|
||||||
|
|
||||||
|
|
@ -252,7 +274,7 @@ var monTableau = {
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.pagination(this.table.filter(function (ligne) {
|
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: {
|
methods: {
|
||||||
calculer_nameLocalStorage: function calculer_nameLocalStorage() {
|
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) {
|
chargerJson: function chargerJson(id) {
|
||||||
var _this2 = this;
|
var _this3 = this;
|
||||||
|
|
||||||
var url = this.apiuri;
|
var url = this.apiuri;
|
||||||
|
|
||||||
|
|
@ -317,40 +343,38 @@ var monTableau = {
|
||||||
return response.json();
|
return response.json();
|
||||||
}).then(function (data) {
|
}).then(function (data) {
|
||||||
var config = data.shift();
|
var config = data.shift();
|
||||||
_this2.header = config.header;
|
_this3.header = config.header;
|
||||||
|
|
||||||
if (config.crayons !== undefined) {
|
if (config.crayons !== undefined) {
|
||||||
_this2.crayons = config.crayons;
|
_this3.crayons = config.crayons;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.classes !== undefined) {
|
if (config.classes !== undefined) {
|
||||||
_this2.classes = config.classes;
|
_this3.classes = config.classes;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (parseInt(id) > 0) {
|
if (parseInt(id) > 0) {
|
||||||
if (data.length > 0) {
|
if (data.length > 0) {
|
||||||
var i = trouver_index(_this2.table, id);
|
var i = trouver_index(_this3.table, id);
|
||||||
_this2.table[i] = data[0];
|
_this3.table[i] = data[0];
|
||||||
} else {
|
} else {
|
||||||
var _i2 = trouver_index(_this2.table, id);
|
var _i2 = trouver_index(_this3.table, id);
|
||||||
|
|
||||||
console.log('index ', _i2);
|
_this3.table.splice(_i2, 1);
|
||||||
|
|
||||||
_this2.table.splice(_i2, 1);
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
_this2.table = data;
|
_this3.table = data;
|
||||||
|
|
||||||
if (data[0] && data[0].search) {
|
if (data[0] && data[0].search) {
|
||||||
_this2.champ_search = 'search';
|
_this3.champ_search = 'search';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Vue.nextTick(function () {
|
Vue.nextTick(function () {
|
||||||
_this2.chargement = false;
|
_this3.chargement = false;
|
||||||
|
|
||||||
if ($_id > 0) {
|
if ($_id > 0) {
|
||||||
_this2.selectLigne($_id, 'id');
|
_this3.selectLigne($_id, 'id');
|
||||||
|
|
||||||
var _url = new URL(window.location);
|
var _url = new URL(window.location);
|
||||||
|
|
||||||
|
|
@ -435,7 +459,7 @@ var monTableau = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
exportCSV: function exportCSV() {
|
exportCSV: function exportCSV() {
|
||||||
var _this3 = this;
|
var _this4 = this;
|
||||||
|
|
||||||
var $csv = [];
|
var $csv = [];
|
||||||
var $header = [];
|
var $header = [];
|
||||||
|
|
@ -445,16 +469,26 @@ var monTableau = {
|
||||||
});
|
});
|
||||||
$tableau = this.tableau.reduce(function (acc, ligne) {
|
$tableau = this.tableau.reduce(function (acc, ligne) {
|
||||||
var $uneLigne = [];
|
var $uneLigne = [];
|
||||||
Object.values(ligne[_this3.champcsv]).forEach(function (l) {
|
Object.values(ligne[_this4.champcsv]).forEach(function (l) {
|
||||||
return $uneLigne.push(l);
|
return $uneLigne.push(l);
|
||||||
});
|
});
|
||||||
return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
|
return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
|
||||||
}, []);
|
}, []);
|
||||||
$csv = [[].concat($header)].concat(_toConsumableArray($tableau));
|
$csv = [[].concat($header)].concat(_toConsumableArray($tableau));
|
||||||
exporterCSV($csv, this.delimitercsv, this.namecsv);
|
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 = {
|
var gamuTable = {
|
||||||
components: {
|
components: {
|
||||||
|
|
|
||||||
151
js/vue.js
151
js/vue.js
|
|
@ -252,7 +252,7 @@ var Vue = (function (exports) {
|
||||||
|
|
||||||
const EMPTY_OBJ = Object.freeze({})
|
const EMPTY_OBJ = Object.freeze({})
|
||||||
;
|
;
|
||||||
const EMPTY_ARR = [];
|
const EMPTY_ARR = Object.freeze([]) ;
|
||||||
const NOOP = () => { };
|
const NOOP = () => { };
|
||||||
/**
|
/**
|
||||||
* Always return false.
|
* Always return false.
|
||||||
|
|
@ -292,7 +292,9 @@ var Vue = (function (exports) {
|
||||||
key !== 'NaN' &&
|
key !== 'NaN' &&
|
||||||
key[0] !== '-' &&
|
key[0] !== '-' &&
|
||||||
'' + parseInt(key, 10) === key;
|
'' + 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,' +
|
'onVnodeBeforeMount,onVnodeMounted,' +
|
||||||
'onVnodeBeforeUpdate,onVnodeUpdated,' +
|
'onVnodeBeforeUpdate,onVnodeUpdated,' +
|
||||||
'onVnodeBeforeUnmount,onVnodeUnmounted');
|
'onVnodeBeforeUnmount,onVnodeUnmounted');
|
||||||
|
|
@ -314,15 +316,15 @@ var Vue = (function (exports) {
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
const hyphenate = cacheStringFunction((str) => {
|
const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase());
|
||||||
return str.replace(hyphenateRE, '-$1').toLowerCase();
|
|
||||||
});
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
const capitalize = cacheStringFunction((str) => {
|
const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
|
||||||
return 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.
|
// compare whether a value has changed, accounting for NaN.
|
||||||
const hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
|
const hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
|
||||||
const invokeArrayFns = (fns, arg) => {
|
const invokeArrayFns = (fns, arg) => {
|
||||||
|
|
@ -667,7 +669,7 @@ var Vue = (function (exports) {
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
function ownKeys(target) {
|
function ownKeys(target) {
|
||||||
track(target, "iterate" /* ITERATE */, ITERATE_KEY);
|
track(target, "iterate" /* ITERATE */, isArray(target) ? 'length' : ITERATE_KEY);
|
||||||
return Reflect.ownKeys(target);
|
return Reflect.ownKeys(target);
|
||||||
}
|
}
|
||||||
const mutableHandlers = {
|
const mutableHandlers = {
|
||||||
|
|
@ -1739,21 +1741,21 @@ var Vue = (function (exports) {
|
||||||
exports.devtools.emit("component:emit" /* COMPONENT_EMIT */, component.appContext.app, component, event, params);
|
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 props = instance.vnode.props || EMPTY_OBJ;
|
||||||
{
|
{
|
||||||
const { emitsOptions, propsOptions: [propsOptions] } = instance;
|
const { emitsOptions, propsOptions: [propsOptions] } = instance;
|
||||||
if (emitsOptions) {
|
if (emitsOptions) {
|
||||||
if (!(event in 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 ` +
|
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 {
|
else {
|
||||||
const validator = emitsOptions[event];
|
const validator = emitsOptions[event];
|
||||||
if (isFunction(validator)) {
|
if (isFunction(validator)) {
|
||||||
const isValid = validator(...args);
|
const isValid = validator(...rawArgs);
|
||||||
if (!isValid) {
|
if (!isValid) {
|
||||||
warn(`Invalid event arguments: event validation failed for event "${event}".`);
|
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);
|
devtoolsComponentEmit(instance, event, args);
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
const lowerCaseEvent = event.toLowerCase();
|
const lowerCaseEvent = event.toLowerCase();
|
||||||
if (lowerCaseEvent !== event && props[`on` + capitalize(lowerCaseEvent)]) {
|
if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
|
||||||
warn(`Event "${lowerCaseEvent}" is emitted in component ` +
|
warn(`Event "${lowerCaseEvent}" is emitted in component ` +
|
||||||
`${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". ` +
|
`${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". ` +
|
||||||
`Note that HTML attributes are case-insensitive and you cannot use ` +
|
`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
|
// convert handler name to camelCase. See issue #2249
|
||||||
let handlerName = `on${capitalize(camelize(event))}`;
|
let handlerName = toHandlerKey(camelize(event));
|
||||||
let handler = props[handlerName];
|
let handler = props[handlerName];
|
||||||
// for v-model update:xxx events, also trigger kebab-case equivalent
|
// for v-model update:xxx events, also trigger kebab-case equivalent
|
||||||
// for props passed via kebab-case
|
// for props passed via kebab-case
|
||||||
if (!handler && event.startsWith('update:')) {
|
if (!handler && isModelListener) {
|
||||||
handlerName = `on${capitalize(hyphenate(event))}`;
|
handlerName = toHandlerKey(hyphenate(event));
|
||||||
handler = props[handlerName];
|
handler = props[handlerName];
|
||||||
}
|
}
|
||||||
if (!handler) {
|
if (handler) {
|
||||||
handler = props[handlerName + `Once`];
|
callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
|
||||||
|
}
|
||||||
|
const onceHandler = props[handlerName + `Once`];
|
||||||
|
if (onceHandler) {
|
||||||
if (!instance.emitted) {
|
if (!instance.emitted) {
|
||||||
(instance.emitted = {})[handlerName] = true;
|
(instance.emitted = {})[handlerName] = true;
|
||||||
}
|
}
|
||||||
else if (instance.emitted[handlerName]) {
|
else if (instance.emitted[handlerName]) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
callWithAsyncErrorHandling(onceHandler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
|
||||||
if (handler) {
|
|
||||||
callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function normalizeEmitsOptions(comp, appContext, asMixin = false) {
|
function normalizeEmitsOptions(comp, appContext, asMixin = false) {
|
||||||
|
|
@ -2003,11 +2020,13 @@ var Vue = (function (exports) {
|
||||||
const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
|
const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
|
||||||
const setRoot = (updatedRoot) => {
|
const setRoot = (updatedRoot) => {
|
||||||
rawChildren[index] = updatedRoot;
|
rawChildren[index] = updatedRoot;
|
||||||
if (dynamicIndex > -1) {
|
if (dynamicChildren) {
|
||||||
dynamicChildren[dynamicIndex] = updatedRoot;
|
if (dynamicIndex > -1) {
|
||||||
}
|
dynamicChildren[dynamicIndex] = updatedRoot;
|
||||||
else if (dynamicChildren && updatedRoot.patchFlag > 0) {
|
}
|
||||||
dynamicChildren.push(updatedRoot);
|
else if (updatedRoot.patchFlag > 0) {
|
||||||
|
vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return [normalizeVNode(childRoot), setRoot];
|
return [normalizeVNode(childRoot), setRoot];
|
||||||
|
|
@ -2145,7 +2164,7 @@ var Vue = (function (exports) {
|
||||||
mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals);
|
mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized, rendererInternals);
|
patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, rendererInternals);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hydrate: hydrateSuspense,
|
hydrate: hydrateSuspense,
|
||||||
|
|
@ -2159,13 +2178,13 @@ var Vue = (function (exports) {
|
||||||
const hiddenContainer = createElement('div');
|
const hiddenContainer = createElement('div');
|
||||||
const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals));
|
const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals));
|
||||||
// start mounting the content subtree in an off-dom container
|
// 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
|
// now check if we have encountered any async deps
|
||||||
if (suspense.deps > 0) {
|
if (suspense.deps > 0) {
|
||||||
// has async
|
// has async
|
||||||
// mount the fallback tree
|
// mount the fallback tree
|
||||||
patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||||
isSVG, optimized);
|
isSVG);
|
||||||
setActiveBranch(suspense, vnode.ssFallback);
|
setActiveBranch(suspense, vnode.ssFallback);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
@ -2173,7 +2192,7 @@ var Vue = (function (exports) {
|
||||||
suspense.resolve();
|
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);
|
const suspense = (n2.suspense = n1.suspense);
|
||||||
suspense.vnode = n2;
|
suspense.vnode = n2;
|
||||||
n2.el = n1.el;
|
n2.el = n1.el;
|
||||||
|
|
@ -2184,13 +2203,13 @@ var Vue = (function (exports) {
|
||||||
suspense.pendingBranch = newBranch;
|
suspense.pendingBranch = newBranch;
|
||||||
if (isSameVNodeType(newBranch, pendingBranch)) {
|
if (isSameVNodeType(newBranch, pendingBranch)) {
|
||||||
// same root type but content may have changed.
|
// 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) {
|
if (suspense.deps <= 0) {
|
||||||
suspense.resolve();
|
suspense.resolve();
|
||||||
}
|
}
|
||||||
else if (isInFallback) {
|
else if (isInFallback) {
|
||||||
patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||||
isSVG, optimized);
|
isSVG);
|
||||||
setActiveBranch(suspense, newFallback);
|
setActiveBranch(suspense, newFallback);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2216,25 +2235,25 @@ var Vue = (function (exports) {
|
||||||
suspense.hiddenContainer = createElement('div');
|
suspense.hiddenContainer = createElement('div');
|
||||||
if (isInFallback) {
|
if (isInFallback) {
|
||||||
// already in fallback state
|
// 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) {
|
if (suspense.deps <= 0) {
|
||||||
suspense.resolve();
|
suspense.resolve();
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||||
isSVG, optimized);
|
isSVG);
|
||||||
setActiveBranch(suspense, newFallback);
|
setActiveBranch(suspense, newFallback);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
|
else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
|
||||||
// toggled "back" to current active branch
|
// 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
|
// force resolve
|
||||||
suspense.resolve(true);
|
suspense.resolve(true);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// switched to a 3rd branch
|
// 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) {
|
if (suspense.deps <= 0) {
|
||||||
suspense.resolve();
|
suspense.resolve();
|
||||||
}
|
}
|
||||||
|
|
@ -2244,7 +2263,7 @@ var Vue = (function (exports) {
|
||||||
else {
|
else {
|
||||||
if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
|
if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
|
||||||
// root did not change, just normal patch
|
// 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);
|
setActiveBranch(suspense, newBranch);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
@ -2257,7 +2276,7 @@ var Vue = (function (exports) {
|
||||||
// mount pending branch in off-dom container
|
// mount pending branch in off-dom container
|
||||||
suspense.pendingBranch = newBranch;
|
suspense.pendingBranch = newBranch;
|
||||||
suspense.pendingId++;
|
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) {
|
if (suspense.deps <= 0) {
|
||||||
// incoming branch has no async deps, resolve now.
|
// incoming branch has no async deps, resolve now.
|
||||||
suspense.resolve();
|
suspense.resolve();
|
||||||
|
|
@ -2293,7 +2312,6 @@ var Vue = (function (exports) {
|
||||||
parent,
|
parent,
|
||||||
parentComponent,
|
parentComponent,
|
||||||
isSVG,
|
isSVG,
|
||||||
optimized,
|
|
||||||
container,
|
container,
|
||||||
hiddenContainer,
|
hiddenContainer,
|
||||||
anchor,
|
anchor,
|
||||||
|
|
@ -2376,7 +2394,7 @@ var Vue = (function (exports) {
|
||||||
if (!suspense.pendingBranch) {
|
if (!suspense.pendingBranch) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { vnode, activeBranch, parentComponent, container, isSVG, optimized } = suspense;
|
const { vnode, activeBranch, parentComponent, container, isSVG } = suspense;
|
||||||
// invoke @fallback event
|
// invoke @fallback event
|
||||||
const onFallback = vnode.props && vnode.props.onFallback;
|
const onFallback = vnode.props && vnode.props.onFallback;
|
||||||
if (isFunction(onFallback)) {
|
if (isFunction(onFallback)) {
|
||||||
|
|
@ -2389,7 +2407,7 @@ var Vue = (function (exports) {
|
||||||
}
|
}
|
||||||
// mount the fallback tree
|
// mount the fallback tree
|
||||||
patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context
|
||||||
isSVG, optimized);
|
isSVG);
|
||||||
setActiveBranch(suspense, fallbackVNode);
|
setActiveBranch(suspense, fallbackVNode);
|
||||||
};
|
};
|
||||||
const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in';
|
const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in';
|
||||||
|
|
@ -3058,7 +3076,7 @@ var Vue = (function (exports) {
|
||||||
return wrappedHook;
|
return wrappedHook;
|
||||||
}
|
}
|
||||||
else {
|
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 ` +
|
warn(`${apiName} is called when there is no active component instance to be ` +
|
||||||
`associated with. ` +
|
`associated with. ` +
|
||||||
`Lifecycle injection APIs can only be used during execution of setup().` +
|
`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) => {
|
const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
|
||||||
if (oldProps !== newProps) {
|
if (oldProps !== newProps) {
|
||||||
for (const key in newProps) {
|
for (const key in newProps) {
|
||||||
|
// empty string is not valid prop
|
||||||
if (isReservedProp(key))
|
if (isReservedProp(key))
|
||||||
continue;
|
continue;
|
||||||
const next = newProps[key];
|
const next = newProps[key];
|
||||||
|
|
@ -5623,7 +5642,10 @@ var Vue = (function (exports) {
|
||||||
// fast path for block nodes: only need to unmount dynamic children.
|
// fast path for block nodes: only need to unmount dynamic children.
|
||||||
unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);
|
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);
|
unmountChildren(children, parentComponent, parentSuspense);
|
||||||
}
|
}
|
||||||
// an unmounted teleport should always remove its children if not disabled
|
// an unmounted teleport should always remove its children if not disabled
|
||||||
|
|
@ -6518,7 +6540,7 @@ var Vue = (function (exports) {
|
||||||
: incoming;
|
: incoming;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else if (key !== '') {
|
||||||
ret[key] = toMerge[key];
|
ret[key] = toMerge[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6552,8 +6574,13 @@ var Vue = (function (exports) {
|
||||||
// a functional component
|
// a functional component
|
||||||
const instance = currentInstance || currentRenderingInstance;
|
const instance = currentInstance || currentRenderingInstance;
|
||||||
if (instance) {
|
if (instance) {
|
||||||
const provides = instance.provides;
|
// #2400
|
||||||
if (key in provides) {
|
// 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
|
// TS doesn't allow symbol as index type
|
||||||
return provides[key];
|
return provides[key];
|
||||||
}
|
}
|
||||||
|
|
@ -7317,7 +7344,7 @@ var Vue = (function (exports) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 0. create render proxy property access cache
|
// 0. create render proxy property access cache
|
||||||
instance.accessCache = {};
|
instance.accessCache = Object.create(null);
|
||||||
// 1. create public instance / render proxy
|
// 1. create public instance / render proxy
|
||||||
// also mark it raw so it's never observed
|
// also mark it raw so it's never observed
|
||||||
instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
|
instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
|
||||||
|
|
@ -7913,7 +7940,7 @@ var Vue = (function (exports) {
|
||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
for (const key in obj) {
|
for (const key in obj) {
|
||||||
ret[`on${capitalize(key)}`] = obj[key];
|
ret[toHandlerKey(key)] = obj[key];
|
||||||
}
|
}
|
||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
@ -7940,7 +7967,7 @@ var Vue = (function (exports) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Core API ------------------------------------------------------------------
|
// Core API ------------------------------------------------------------------
|
||||||
const version = "3.0.1";
|
const version = "3.0.2";
|
||||||
/**
|
/**
|
||||||
* SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
|
* SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
|
||||||
* @internal
|
* @internal
|
||||||
|
|
@ -9276,6 +9303,7 @@ var Vue = (function (exports) {
|
||||||
const TO_HANDLERS = Symbol( `toHandlers` );
|
const TO_HANDLERS = Symbol( `toHandlers` );
|
||||||
const CAMELIZE = Symbol( `camelize` );
|
const CAMELIZE = Symbol( `camelize` );
|
||||||
const CAPITALIZE = Symbol( `capitalize` );
|
const CAPITALIZE = Symbol( `capitalize` );
|
||||||
|
const TO_HANDLER_KEY = Symbol( `toHandlerKey` );
|
||||||
const SET_BLOCK_TRACKING = Symbol( `setBlockTracking` );
|
const SET_BLOCK_TRACKING = Symbol( `setBlockTracking` );
|
||||||
const PUSH_SCOPE_ID = Symbol( `pushScopeId` );
|
const PUSH_SCOPE_ID = Symbol( `pushScopeId` );
|
||||||
const POP_SCOPE_ID = Symbol( `popScopeId` );
|
const POP_SCOPE_ID = Symbol( `popScopeId` );
|
||||||
|
|
@ -9308,6 +9336,7 @@ var Vue = (function (exports) {
|
||||||
[TO_HANDLERS]: `toHandlers`,
|
[TO_HANDLERS]: `toHandlers`,
|
||||||
[CAMELIZE]: `camelize`,
|
[CAMELIZE]: `camelize`,
|
||||||
[CAPITALIZE]: `capitalize`,
|
[CAPITALIZE]: `capitalize`,
|
||||||
|
[TO_HANDLER_KEY]: `toHandlerKey`,
|
||||||
[SET_BLOCK_TRACKING]: `setBlockTracking`,
|
[SET_BLOCK_TRACKING]: `setBlockTracking`,
|
||||||
[PUSH_SCOPE_ID]: `pushScopeId`,
|
[PUSH_SCOPE_ID]: `pushScopeId`,
|
||||||
[POP_SCOPE_ID]: `popScopeId`,
|
[POP_SCOPE_ID]: `popScopeId`,
|
||||||
|
|
@ -9464,7 +9493,7 @@ var Vue = (function (exports) {
|
||||||
}
|
}
|
||||||
const nonIdentifierRE = /^\d|[^\$\w]/;
|
const nonIdentifierRE = /^\d|[^\$\w]/;
|
||||||
const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
|
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) => {
|
const isMemberExpression = (path) => {
|
||||||
if (!path)
|
if (!path)
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -12481,12 +12510,12 @@ var Vue = (function (exports) {
|
||||||
if (arg.isStatic) {
|
if (arg.isStatic) {
|
||||||
const rawName = arg.content;
|
const rawName = arg.content;
|
||||||
// for all event listeners, auto convert it to camelCase. See issue #2249
|
// for all event listeners, auto convert it to camelCase. See issue #2249
|
||||||
const normalizedName = capitalize(camelize(rawName));
|
eventName = createSimpleExpression(toHandlerKey(camelize(rawName)), true, arg.loc);
|
||||||
eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc);
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
// #2388
|
||||||
eventName = createCompoundExpression([
|
eventName = createCompoundExpression([
|
||||||
`"on" + ${context.helperString(CAPITALIZE)}(`,
|
`${context.helperString(TO_HANDLER_KEY)}(`,
|
||||||
arg,
|
arg,
|
||||||
`)`
|
`)`
|
||||||
]);
|
]);
|
||||||
|
|
@ -12495,7 +12524,7 @@ var Vue = (function (exports) {
|
||||||
else {
|
else {
|
||||||
// already a compound expression.
|
// already a compound expression.
|
||||||
eventName = arg;
|
eventName = arg;
|
||||||
eventName.children.unshift(`"on" + ${context.helperString(CAPITALIZE)}(`);
|
eventName.children.unshift(`${context.helperString(TO_HANDLER_KEY)}(`);
|
||||||
eventName.children.push(`)`);
|
eventName.children.push(`)`);
|
||||||
}
|
}
|
||||||
// handler processing
|
// handler processing
|
||||||
|
|
@ -12544,6 +12573,13 @@ var Vue = (function (exports) {
|
||||||
const transformBind = (dir, node, context) => {
|
const transformBind = (dir, node, context) => {
|
||||||
const { exp, modifiers, loc } = dir;
|
const { exp, modifiers, loc } = dir;
|
||||||
const arg = dir.arg;
|
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
|
// .prop is no longer necessary due to new patch behavior
|
||||||
// .sync is replaced by v-model:arg
|
// .sync is replaced by v-model:arg
|
||||||
if (modifiers.includes('camel')) {
|
if (modifiers.includes('camel')) {
|
||||||
|
|
@ -12935,7 +12971,9 @@ var Vue = (function (exports) {
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
props: [
|
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.ssrContextKey = ssrContextKey;
|
||||||
exports.ssrUtils = ssrUtils;
|
exports.ssrUtils = ssrUtils;
|
||||||
exports.toDisplayString = toDisplayString;
|
exports.toDisplayString = toDisplayString;
|
||||||
|
exports.toHandlerKey = toHandlerKey;
|
||||||
exports.toHandlers = toHandlers;
|
exports.toHandlers = toHandlers;
|
||||||
exports.toRaw = toRaw;
|
exports.toRaw = toRaw;
|
||||||
exports.toRef = toRef;
|
exports.toRef = toRef;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue