maj de vue-nex-select pour avoir la selection avec le clavier, encore des bug

css/gamutable.css

@@ -28,6 +28,11 @@
   table-layout: auto;
 }
 
+.gamutable table .vue-dropdown-item > span {
+  display: inline-block;
+  min-height: 1rem;
+}
+
 .gamutable table thead {
   border: 1px solid #777777;
 }

css/gamutable.css.map

@@ -1 +1 @@
-{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADHA;EAME,iBAAiB;ACCnB;;ADEA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADAA;EACC,qBAAqB;ACGtB;;ADAA;EACC,eAAe;EACf,kBAAkB;ACGnB;;ADLA;EAIE,yBAAoC;ACKtC;;ADTA;EAOE,oBAAa;EAAb,aAAa;ACMf;;ADbA;EAUE,oBAAY;MAAZ,YAAY;ACOd;;ADjBA;EAaE,YAAY;EACZ,WAAW;ACQb;;ADtBA;EAkBE,eAAe;EACf,aAAa;ACQf;;AD3BA;EAsBE,UAAU;ACSZ;;ADNA;EACC,0CAA0C;ACS3C;;ADNA;EACC,eAAe;ACShB;;ADNA;EACC,WAAW;EACX,kBAAkB;ACSnB;;ADNA;EACC,UAAU;ACSX;;ADVA;EAGE,SAAS;ACWX;;ADPA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACUnB;;ADRA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACWnB;;ADhBA;EAOE,yBAAyB;ACa3B;;ADTA;EACC,iBAAiB;ACYlB;;ADTA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACYhB;;ADVA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACanB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n\t.gamutable-nbrMax {\n\t\tmargin-left: 2rem;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n.gamutable__input--rechercher {\n\tpadding: 0.25rem 1rem;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\ttable-layout: auto;\n\tthead {\n\t\tborder: 1px solid rgb(119, 119, 119);\n\t}\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\ntr.filtreColonne th {\n\tpadding: 0;\n\tselect {\n\t\tmargin: 0;\n\t}\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--surTable .gamutable-nbrMax {\n  margin-left: 2rem;\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__input--rechercher {\n  padding: 0.25rem 1rem;\n}\n\n.gamutable table {\n  font-size: 1rem;\n  table-layout: auto;\n}\n\n.gamutable table thead {\n  border: 1px solid #777777;\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\ntr.filtreColonne th {\n  padding: 0;\n}\n\ntr.filtreColonne th select {\n  margin: 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\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"]}
+{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADHA;EAME,iBAAiB;ACCnB;;ADEA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADAA;EACC,qBAAqB;ACGtB;;ADAA;EAOC,eAAe;EACf,kBAAkB;ACHnB;;ADLA;EAGE,qBAAqB;EACrB,gBAAgB;ACMlB;;ADVA;EAUE,yBAAoC;ACItC;;ADdA;EAaE,oBAAa;EAAb,aAAa;ACKf;;ADlBA;EAgBE,oBAAY;MAAZ,YAAY;ACMd;;ADtBA;EAmBE,YAAY;EACZ,WAAW;ACOb;;AD3BA;EAwBE,eAAe;EACf,aAAa;ACOf;;ADhCA;EA4BE,UAAU;ACQZ;;ADLA;EACC,0CAA0C;ACQ3C;;ADLA;EACC,eAAe;ACQhB;;ADLA;EACC,WAAW;EACX,kBAAkB;ACQnB;;ADLA;EACC,UAAU;ACQX;;ADTA;EAGE,SAAS;ACUX;;ADNA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACSnB;;ADPA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACUnB;;ADfA;EAOE,yBAAyB;ACY3B;;ADRA;EACC,iBAAiB;ACWlB;;ADRA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACWhB;;ADTA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACYnB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n\t.gamutable-nbrMax {\n\t\tmargin-left: 2rem;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n.gamutable__input--rechercher {\n\tpadding: 0.25rem 1rem;\n}\n\n.gamutable table {\n\t// patch provisoire\n\t.vue-dropdown-item > span {\n\t\tdisplay: inline-block;\n\t\tmin-height: 1rem;\n\t}\n\n\tfont-size: 1rem;\n\ttable-layout: auto;\n\tthead {\n\t\tborder: 1px solid rgb(119, 119, 119);\n\t}\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\ntr.filtreColonne th {\n\tpadding: 0;\n\tselect {\n\t\tmargin: 0;\n\t}\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--surTable .gamutable-nbrMax {\n  margin-left: 2rem;\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__input--rechercher {\n  padding: 0.25rem 1rem;\n}\n\n.gamutable table {\n  font-size: 1rem;\n  table-layout: auto;\n}\n\n.gamutable table .vue-dropdown-item > span {\n  display: inline-block;\n  min-height: 1rem;\n}\n\n.gamutable table thead {\n  border: 1px solid #777777;\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\ntr.filtreColonne th {\n  padding: 0;\n}\n\ntr.filtreColonne th select {\n  margin: 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\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

@@ -19,6 +19,12 @@
 }
 
 .gamutable table {
+	// patch provisoire
+	.vue-dropdown-item > span {
+		display: inline-block;
+		min-height: 1rem;
+	}
+
 	font-size: 1rem;
 	table-layout: auto;
 	thead {

css/vue-next-select.css

@@ -157,13 +157,17 @@
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 }
-.vue-dropdown-item:hover {
+.vue-dropdown-item.highlighted {
 	background-color: #41b883;
 }
+.vue-dropdown-item.disabled {
+	background-color: rgba(239, 239, 239);
+	cursor: not-allowed;
+}
 .vue-dropdown-item.selected {
 	background-color: #f3f3f3;
 }
-.vue-dropdown-item.selected:hover {
+.vue-dropdown-item.selected.highlighted {
 	background-color: #ff6a6a;
 }
 .vue-dropdown[data-addable='false'][data-multiple='true'] .vue-dropdown-item:not(.selected):hover {
@@ -194,3 +198,4 @@
 .icon.loading div:nth-child(2) {
 	animation-delay: -0.16s;
 }
+

js/gamutable.es6.js

@@ -333,6 +333,7 @@ let monTableau = {
 			if (this.filtrecolmulti === 'non') {
 				this.filtreCol.forEach((col) => {
 					let Tval = [''];
+					// let Tval = [];
 					this.tableau.forEach((t) => {
 						let valCol = t[this.champ_search][col];
 						if (Tval.indexOf(valCol) === -1) {
@@ -385,6 +386,7 @@ let monTableau = {
 					if (config.filtreCol !== undefined) {
 						this.filtreColType = config.filtreCol;
 						Object.keys(this.filtreColType).forEach((col) => {
+							// let Tval = [];
 							let Tval = [''];
 							this.table.forEach((t) => {
 								let valCol = t[this.champ_search][col];
@@ -432,11 +434,14 @@ let monTableau = {
 						this.filtreColType = config.filtreCol;
 						Object.keys(this.filtreColType).forEach((col) => {
 							let Tval = [''];
+							// let Tval = [];
 							this.table.forEach((t) => {
 								let valCol = t[this.champ_search][col];
+								if (valCol) {
 									if (Tval.indexOf(valCol) === -1) {
 										Tval.push(valCol);
 									}
+								}
 							});
 							this.filtreCol.push(col);
 							this.filtreColVal[col] = Tval;

js/gamutable.js

@@ -374,7 +374,7 @@ var monTableau = {
       // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       if (this.filtrecolmulti === 'non') {
         this.filtreCol.forEach(function (col) {
-          var Tval = [''];
+          var Tval = ['']; // let Tval = [];
 
           _this3.tableau.forEach(function (t) {
             var valCol = t[_this3.champ_search][col];
@@ -440,6 +440,7 @@ var monTableau = {
           if (config.filtreCol !== undefined) {
             this.filtreColType = config.filtreCol;
             Object.keys(this.filtreColType).forEach(function (col) {
+              // let Tval = [];
               var Tval = [''];
 
               _this4.table.forEach(function (t) {
@@ -499,14 +500,16 @@ var monTableau = {
         if (config.filtreCol !== undefined) {
           _this4.filtreColType = config.filtreCol;
           Object.keys(_this4.filtreColType).forEach(function (col) {
-            var Tval = [''];
+            var Tval = ['']; // let Tval = [];
 
             _this4.table.forEach(function (t) {
               var valCol = t[_this4.champ_search][col];
 
+              if (valCol) {
                 if (Tval.indexOf(valCol) === -1) {
                   Tval.push(valCol);
                 }
+              }
             });
 
             _this4.filtreCol.push(col);