SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Merge branch 'vue3EnBloc' into vuejs3

Browse source
This commit is contained in:
Christophe 2020-11-09 10:31:26 +01:00
commit 3e33eba61c
8 changed files with 307 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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{...}"

23
css/gamutable.css
View file

@ -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 */

2
css/gamutable.css.map
View file

@ -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"]}

20
css/gamutable.scss
View file

@ -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;
}

25
inclure/gamutable.html
View file

@ -3,18 +3,41 @@
[(#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">
<div class="gamutableUn">
[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
<mon-tableau <mon-tableau
apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}" apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}" :tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
champcsv="#ENV{champcsv,html}" champcsv="#ENV{champcsv,html}"
delimitercsv="#ENV{delimitercsv,','}" delimitercsv="#ENV{delimitercsv,','}"
namecsv="#ENV{namecsv,export.csv}" namecsv="#ENV{namecsv}"
urlvuebloc="[(#ENV{urlvuebloc})]"
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}" url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}" url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
ref="montableau" ref="montableau"
></mon-tableau> ></mon-tableau>
</div> </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"> <script type="text/javascript">
var $_id = #ENV{_id,0}; var $_id = #ENV{_id,0};
$_id = parseInt($_id); $_id = parseInt($_id);

99
js/gamutable.es6.js
View file

@ -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() {
if (this.apiuri) {
return this.apiuri.match(/.*page=(.*)/)[1]; 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>
<span class="texteMajBDD">
Mise à jour de la base de donnée Mise à jour de la base de donnée
</span> </span>
<span v-show="!chargement" class="verte"> </span>
<i class="fa fa-check"></i> <span v-show="!chargement" class="btn verte" style="cursor:auto;"
Base de données synchronisée title="Base de donnée 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>

94
js/gamutable.js
View file

@ -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() {
if (this.apiuri) {
return this.apiuri.match(/.*page=(.*)/)[1]; 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: {

145
js/vue.js
View file

@ -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 (dynamicChildren) {
if (dynamicIndex > -1) { if (dynamicIndex > -1) {
dynamicChildren[dynamicIndex] = updatedRoot; dynamicChildren[dynamicIndex] = updatedRoot;
} }
else if (dynamicChildren && updatedRoot.patchFlag > 0) { else if (updatedRoot.patchFlag > 0) {
dynamicChildren.push(updatedRoot); 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;