vue bloc OK, chargement ajax du bloc texte html

css/gamutable.css

@@ -66,4 +66,18 @@ td.icone i {
   font-size: 1.8rem;
 }
 
+.vueBlocs {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.vueBlocs-unbloc {
+  width: 23%;
+  border: 1px solid #cecece;
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
 /*# sourceMappingURL=gamutable.css.map */

css/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,iBAAiB;ACSlB","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}\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\ntd.icone i {\n  font-size: 1.8rem;\n}\n"]}
+{"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,iBAAiB;ACSlB;;ADNA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACShB;;ADPA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACUnB","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}\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--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\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"]}

css/gamutable.scss

@@ -52,3 +52,14 @@ td.icone > * {
 td.icone i {
 	font-size: 1.8rem;
 }
+
+.vueBlocs {
+	display: flex;
+	flex-wrap: wrap;
+}
+.vueBlocs-unbloc {
+	width: 23%;
+	border: 1px solid #cecece;
+	margin-bottom: 1rem;
+	margin-right: 1rem;
+}

inclure/gamutable.html

@@ -9,7 +9,7 @@
 		champcsv="#ENV{champcsv,html}"
 		delimitercsv="#ENV{delimitercsv,','}"
 		namecsv="#ENV{namecsv,export.csv}"
-		vuebloc="#ENV{vuebloc}"
+		urlvuebloc="[(#ENV{vuebloc})]"
 		url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
 		url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
 		ref="montableau"

js/gamutable.es6.js

@@ -146,7 +146,11 @@ function trouver_index(table, id) {
 	});
 	return i;
 }
-
+String.fromHtmlEntities = function (string) {
+	return (string + '').replace(/&#\d+;/gm, function (s) {
+		return String.fromCharCode(s.match(/\d+/gm)[0]);
+	});
+};
 let monTableau = {
 	props: {
 		tparpage: {
@@ -174,6 +178,9 @@ let monTableau = {
 		url_sort_desc: {
 			type: String,
 		},
+		urlvuebloc: {
+			type: String,
+		},
 		vueblocdefaut: {
 			type: String,
 			default: 'tableau',
@@ -197,10 +204,19 @@ let monTableau = {
 			chargement: true,
 			nameLocalStorage: this.calculer_nameLocalStorage(),
 			quelleVue: this.vueblocdefaut,
+			vuebloc: '',
 		};
 	},
 	mounted() {
 		this.chargerJson();
+		if (this.urlvuebloc) {
+			fetch(this.urlvuebloc)
+				.then((response) => response.text())
+				.then((data) => {
+					console.log(data);
+					this.vuebloc = data;
+				});
+		}
 	},
 	computed: {
 		tableau: function () {
@@ -387,7 +403,6 @@ let monTableau = {
 		},
 		replaceBloc(ligne) {
 			let html = this.vuebloc;
-			console.log(ligne);
 			Object.keys(ligne).forEach((key) => {
 				html = html.replace(`@@${key}@@`, ligne[key]);
 			});
@@ -412,12 +427,14 @@ let monTableau = {
 
 			<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>
@@ -439,7 +456,7 @@ let monTableau = {
 			</span>
 		</div>
 		<div class="vueBlocs" v-if="quelleVue === 'bloc'">
-			<div class="toto"
+			<div class="vueBlocs-unbloc"
 			v-for="(ligne) in tableau"
 			:key=ligne.id
 			v-html=replaceBloc(ligne.html)

js/gamutable.js

@@ -195,6 +195,12 @@ function trouver_index(table, id) {
   return i;
 }
 
+String.fromHtmlEntities = function (string) {
+  return (string + '').replace(/&#\d+;/gm, function (s) {
+    return String.fromCharCode(s.match(/\d+/gm)[0]);
+  });
+};
+
 var monTableau = {
   props: {
     tparpage: {
@@ -222,6 +228,9 @@ var monTableau = {
     url_sort_desc: {
       type: String
     },
+    urlvuebloc: {
+      type: String
+    },
     vueblocdefaut: {
       type: String,
       default: 'tableau'
@@ -244,15 +253,27 @@ var monTableau = {
       champ_search: 'html',
       chargement: true,
       nameLocalStorage: this.calculer_nameLocalStorage(),
-      quelleVue: this.vueblocdefaut
+      quelleVue: this.vueblocdefaut,
+      vuebloc: ''
     };
   },
   mounted: function mounted() {
+    var _this = this;
+
     this.chargerJson();
+
+    if (this.urlvuebloc) {
+      fetch(this.urlvuebloc).then(function (response) {
+        return response.text();
+      }).then(function (data) {
+        console.log(data);
+        _this.vuebloc = data;
+      });
+    }
   },
   computed: {
     tableau: function tableau() {
-      var _this = this;
+      var _this2 = this;
 
       this.setPages();
 
@@ -261,7 +282,7 @@ var monTableau = {
       }
 
       return this.pagination(this.table.filter(function (ligne) {
-        return Object.values(ligne[_this.champ_search]).toString().toLowerCase().indexOf(_this.search.toLowerCase()) < 0 ? false : true;
+        return Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
       }));
     }
   },
@@ -290,7 +311,7 @@ var monTableau = {
       return this.apiuri.match(/.*page=(.*)/)[1];
     },
     chargerJson: function chargerJson(id) {
-      var _this2 = this;
+      var _this3 = this;
 
       var url = this.apiuri;
 
@@ -326,40 +347,40 @@ var monTableau = {
         return response.json();
       }).then(function (data) {
         var config = data.shift();
-        _this2.header = config.header;
+        _this3.header = config.header;
 
         if (config.crayons !== undefined) {
-          _this2.crayons = config.crayons;
+          _this3.crayons = config.crayons;
         }
 
         if (config.classes !== undefined) {
-          _this2.classes = config.classes;
+          _this3.classes = config.classes;
         }
 
         if (parseInt(id) > 0) {
           if (data.length > 0) {
-            var i = trouver_index(_this2.table, id);
+            var i = trouver_index(_this3.table, id);
-            _this2.table[i] = data[0];
+            _this3.table[i] = data[0];
           } else {
-            var _i2 = trouver_index(_this2.table, id);
+            var _i2 = trouver_index(_this3.table, id);
 
             console.log('index ', _i2);
 
-            _this2.table.splice(_i2, 1);
+            _this3.table.splice(_i2, 1);
           }
         } else {
-          _this2.table = data;
+          _this3.table = data;
 
           if (data[0] && data[0].search) {
-            _this2.champ_search = 'search';
+            _this3.champ_search = 'search';
           }
         }
 
         Vue.nextTick(function () {
-          _this2.chargement = false;
+          _this3.chargement = false;
 
           if ($_id > 0) {
-            _this2.selectLigne($_id, 'id');
+            _this3.selectLigne($_id, 'id');
 
             var _url = new URL(window.location);
 
@@ -444,7 +465,7 @@ var monTableau = {
       }
     },
     exportCSV: function exportCSV() {
-      var _this3 = this;
+      var _this4 = this;
 
       var $csv = [];
       var $header = [];
@@ -454,7 +475,7 @@ var monTableau = {
       });
       $tableau = this.tableau.reduce(function (acc, ligne) {
         var $uneLigne = [];
-        Object.values(ligne[_this3.champcsv]).forEach(function (l) {
+        Object.values(ligne[_this4.champcsv]).forEach(function (l) {
           return $uneLigne.push(l);
         });
         return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
@@ -464,7 +485,6 @@ var monTableau = {
     },
     replaceBloc: function replaceBloc(ligne) {
       var html = this.vuebloc;
-      console.log(ligne);
       Object.keys(ligne).forEach(function (key) {
         html = html.replace("@@".concat(key, "@@"), ligne[key]);
       });
@@ -474,7 +494,7 @@ var monTableau = {
       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\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-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-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\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=\"toto\"\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}} \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\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}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
 };
 var gamuTable = {
   components: {