From abc1b659d41d9919611ce145d1fb59020629e4b5 Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Sat, 23 Jan 2021 18:25:26 +0100
Subject: [PATCH] ajout vue select sans passer par webpack

---
 inclure/gamutable.html |  3 +++
 js/gamutable.es6.js    | 14 +++++++++++++-
 js/gamutable.js        | 11 ++++++++---
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/inclure/gamutable.html b/inclure/gamutable.html
index 0faf3ff..3452de4 100644
--- a/inclure/gamutable.html
+++ b/inclure/gamutable.html
@@ -1,4 +1,5 @@
 <link rel="stylesheet" href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
+<link rel="stylesheet" href="https://unpkg.com/vue-next-select/dist/index.min.css">
 [(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
 [(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
 <span class="crayon gamutable-yyyy-nn"></span>
@@ -49,10 +50,12 @@ var nomBlocAjaxReload = '';
 [(#CONFIG{gamutable/version_js}|=={dev}|?{
 <script src="[(#CHEMIN{js/vue.js}|timestamp)]" type="text/javascript"></script>
 <script src="[(#CHEMIN{js/papaparse.js}|timestamp)]" type="text/javascript"></script>
+<script src="https://unpkg.com/vue-next-select"></script>
 <script src="[(#CHEMIN{js/gamutable.js}|timestamp)]" type="text/javascript"></script>
 ,
 <script src="[(#CHEMIN{js/vue.min.js}|timestamp)]" type="text/javascript"></script>
 <script src="[(#CHEMIN{js/papaparse.min.js}|timestamp)]" type="text/javascript"></script>
+<script src="https://unpkg.com/vue-next-select"></script>
 <script src="[(#CHEMIN{js/gamutable.js}|compacte|timestamp)]" type="text/javascript"></script>
 })]
 
diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 91aa832..79ba2ff 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -206,6 +206,8 @@ let monTableau = {
 			nameLocalStorage: this.calculer_nameLocalStorage(),
 			quelleVue: this.vueblocdefaut,
 			vuebloc: '',
+			model: null,
+			options: ['element', 'ant-design-vue', 'vuetify'],
 		};
 	},
 	mounted() {
@@ -486,6 +488,12 @@ let monTableau = {
 	template: `
 	<div class="gamutable">
 		<div class="gamutable--surTable">
+aa
+<vue-select
+  v-model="model"
+  :options="options"
+></vue-select>
+bb
 			<select id="parPage" v-model="parPageSelect">
 				<option v-for="v in tparpage" :key="v">{{v}}</option>
 			</select>
@@ -606,4 +614,8 @@ const gamuTable = {
 	},
 };
 
-let app = Vue.createApp(gamuTable).mount('#app');
+console.log(window.VueNextSelect);
+
+let app = Vue.createApp(gamuTable);
+app.component('vue-select', window.VueNextSelect);
+app.mount('#app');
diff --git a/js/gamutable.js b/js/gamutable.js
index 84471b2..0bd3cc0 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -254,7 +254,9 @@ var monTableau = {
       chargement: true,
       nameLocalStorage: this.calculer_nameLocalStorage(),
       quelleVue: this.vueblocdefaut,
-      vuebloc: ''
+      vuebloc: '',
+      model: null,
+      options: ['element', 'ant-design-vue', 'vuetify']
     };
   },
   mounted: function mounted() {
@@ -579,7 +581,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-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 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\t<span v-html=\"label\"></span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t\t<tr v-if=\"filtreCol.length\" class=\"filtreColonne\">\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'filtreCol_'+i\">\n\t\t\t\t\t\t<div v-if=\"filtreCol.indexOf(head) !== -1\" :id=\"'filtreCol_'+head\">\n\t\t\t\t\t\t\t<select class=\"filtrerCol\" v-model=\"filtreColSelected[head]\" v-if=\"filtrecolmulti !== 'non'\" multiple>\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tv-for=\"(option,j) in filtreColVal[head]\"\n\t\t\t\t\t\t\t\t:value=\"option\"\n\t\t\t\t\t\t\t\t@click=\"selectValCol\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{{j === 0 ? \"Tous\" : option}}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t\t<select class=\"filtrerCol\" v-model=\"filtreColSelected[head]\" v-else>\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tv-for=\"(option,j) in filtreColVal[head]\"\n\t\t\t\t\t\t\t\t:value=\"option\"\n\t\t\t\t\t\t\t\t@click=\"selectValCol\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{{j === 0 ? \"Tous\" : option}}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t</select>\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\" :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\"> Premier </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Pr\xE9c\xE9dent </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\"> Suivant </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Dernier </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\">\naa\n<vue-select\n  v-model=\"model\"\n  :options=\"options\"\n></vue-select>\nbb\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 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\t<span v-html=\"label\"></span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t\t<tr v-if=\"filtreCol.length\" class=\"filtreColonne\">\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'filtreCol_'+i\">\n\t\t\t\t\t\t<div v-if=\"filtreCol.indexOf(head) !== -1\" :id=\"'filtreCol_'+head\">\n\t\t\t\t\t\t\t<select class=\"filtrerCol\" v-model=\"filtreColSelected[head]\" v-if=\"filtrecolmulti !== 'non'\" multiple>\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tv-for=\"(option,j) in filtreColVal[head]\"\n\t\t\t\t\t\t\t\t:value=\"option\"\n\t\t\t\t\t\t\t\t@click=\"selectValCol\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{{j === 0 ? \"Tous\" : option}}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t\t<select class=\"filtrerCol\" v-model=\"filtreColSelected[head]\" v-else>\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tv-for=\"(option,j) in filtreColVal[head]\"\n\t\t\t\t\t\t\t\t:value=\"option\"\n\t\t\t\t\t\t\t\t@click=\"selectValCol\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{{j === 0 ? \"Tous\" : option}}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t</select>\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\" :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\"> Premier </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Pr\xE9c\xE9dent </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\"> Suivant </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Dernier </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
 };
 var gamuTable = {
   components: {
@@ -591,4 +593,7 @@ var gamuTable = {
     }
   }
 };
-var app = Vue.createApp(gamuTable).mount('#app');
\ No newline at end of file
+console.log(window.VueNextSelect);
+var app = Vue.createApp(gamuTable);
+app.component('vue-select', window.VueNextSelect);
+app.mount('#app');
\ No newline at end of file