From afb29bd79285bf8601b92e269e0dd2a57b1e2767 Mon Sep 17 00:00:00 2001 From: tofulm Date: Sun, 21 Mar 2021 22:49:00 +0100 Subject: [PATCH] On peut maintenant selectionner des items avec le clavier --- css/gamutable.css | 5 - css/gamutable.css.map | 2 +- css/gamutable.scss | 8 +- css/vue-next-select.css | 202 +-------- js/gamutable.es6.js | 12 +- js/gamutable.js | 9 +- js/vue-next-select.js | 877 +--------------------------------------- 7 files changed, 18 insertions(+), 1097 deletions(-) diff --git a/css/gamutable.css b/css/gamutable.css index b66d180..42a4cd8 100644 --- a/css/gamutable.css +++ b/css/gamutable.css @@ -28,11 +28,6 @@ table-layout: auto; } -.gamutable table .vue-dropdown-item > span { - display: inline-block; - min-height: 1rem; -} - .gamutable table thead { border: 1px solid #777777; } diff --git a/css/gamutable.css.map b/css/gamutable.css.map index 82f55a1..c529ab5 100644 --- a/css/gamutable.css.map +++ b/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;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"]} \ No newline at end of file +{"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;EAUE,yBAAoC;ACDtC;;ADTA;EAaE,oBAAa;EAAb,aAAa;ACAf;;ADbA;EAgBE,oBAAY;MAAZ,YAAY;ACCd;;ADjBA;EAmBE,YAAY;EACZ,WAAW;ACEb;;ADtBA;EAwBE,eAAe;EACf,aAAa;ACEf;;AD3BA;EA4BE,UAAU;ACGZ;;ADAA;EACC,0CAA0C;ACG3C;;ADAA;EACC,eAAe;ACGhB;;ADAA;EACC,WAAW;EACX,kBAAkB;ACGnB;;ADAA;EACC,UAAU;ACGX;;ADJA;EAGE,SAAS;ACKX;;ADDA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACInB;;ADFA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACKnB;;ADVA;EAOE,yBAAyB;ACO3B;;ADHA;EACC,iBAAiB;ACMlB;;ADHA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACMhB;;ADJA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACOnB","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 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"]} \ No newline at end of file diff --git a/css/gamutable.scss b/css/gamutable.scss index 6083426..c6053d0 100644 --- a/css/gamutable.scss +++ b/css/gamutable.scss @@ -20,10 +20,10 @@ .gamutable table { // patch provisoire - .vue-dropdown-item > span { - display: inline-block; - min-height: 1rem; - } + // .vue-dropdown-item > span { + // display: inline-block; + // min-height: 1rem; + // } font-size: 1rem; table-layout: auto; diff --git a/css/vue-next-select.css b/css/vue-next-select.css index 614c960..7f7ef1b 100644 --- a/css/vue-next-select.css +++ b/css/vue-next-select.css @@ -1,201 +1 @@ -@keyframes loading { - 0% { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -.icon.delete { - display: flex; - justify-content: center; - align-items: center; - padding: 0; - margin: 0; - border: 0; - background: 0 0; - height: 8px; - width: 8px; - min-height: 8px; - min-width: 8px; - max-height: 8px; - max-width: 8px; - cursor: pointer; -} -.icon.arrow-downward { - color: #999; - border-style: solid; - border-width: 4px 4px 0; - border-color: #999 transparent transparent; - content: ''; - transition: transform 0.2s linear; - cursor: pointer; -} -.icon.arrow-downward.active { - transform: rotate(180deg); -} -.vue-select { - position: relative; - display: flex; - align-items: flex-start; - justify-content: flex-start; - flex-direction: column; - width: 150px; - border-radius: 4px; - border: 1px solid #999; - box-sizing: border-box; - outline: 0; -} -.vue-select[data-is-focusing='true']:not([data-visible-length='0']) { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.vue-select.disabled { - background-color: rgba(239, 239, 239); -} -.vue-dropdown[data-removable='false'] .vue-dropdown-item.selected:hover, -.vue-select.disabled *, -.vue-select.disabled input, -.vue-tags[data-removable='false'] .vue-tag.selected img:hover { - cursor: not-allowed; -} -.vue-select-header { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; -} -.vue-select-header > .icon.arrow-downward, -.vue-select-header > .icon.loading, -.vue-tag > span { - margin-right: 4px; -} -.vue-tags { - display: flex; - flex-wrap: wrap; - margin: 0; - padding: 2px; - min-height: calc(1rem + 4px); - user-select: none; -} -.vue-tags.collapsed { - flex-wrap: nowrap; - overflow: auto; -} -.vue-tag, -.vue-tag.selected { - align-items: center; - justify-content: center; - background-color: #999; - border-radius: 4px; - padding: 0 4px; - font-size: 0.8rem; -} -.vue-tag { - display: none; - list-style-type: none; - margin: 2px; - min-height: 1rem; -} -.vue-tag.selected { - display: flex; -} -.vue-dropdown, -.vue-input { - min-width: 0; - box-sizing: border-box; -} -.vue-input, -.vue-input > input { - border: 0; - outline: 0; - width: 100%; -} -.vue-input { - display: flex; - align-items: center; - border-radius: 4px; - max-width: 100%; - padding: 4px; -} -.vue-input > input { - min-width: 0; - font-size: 0.8rem; - padding: 0; -} -.vue-input > input[disabled] { - background-color: rgba(239, 239, 239); -} -.vue-input > input[readonly], -.vue-select-header > .vue-input > input[disabled] { - background-color: unset; -} -.vue-dropdown { - position: absolute; - background-color: #fff; - z-index: 1; - max-height: 300px; - overflow-y: auto; - width: inherit; - left: -1px; - margin: 0; - padding: 0; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - border: 1px solid #999; - list-style-type: none; -} -.vue-dropdown[data-visible-length='0'] { - border: 0; -} -.vue-dropdown-item { - list-style-type: none; - padding: 4px; - cursor: pointer; -} -.vue-dropdown-item:last-child { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; -} -.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.highlighted { - background-color: #ff6a6a; -} -.vue-dropdown[data-addable='false'][data-multiple='true'] .vue-dropdown-item:not(.selected):hover { - cursor: not-allowed; -} -.icon.loading { - display: inline-block; - position: relative; - width: 8px; - min-width: 8px; - height: 8px; - min-height: 8px; -} -.icon.loading div { - box-sizing: border-box; - display: block; - position: absolute; - border: 1px solid #999; - width: 8px; - height: 8px; - border-radius: 50%; - animation: loading 1s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: #999 transparent transparent; -} -.icon.loading div:nth-child(1) { - animation-delay: -0.08s; -} -.icon.loading div:nth-child(2) { - animation-delay: -0.16s; -} - +@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon.delete{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:0;background:0 0;height:8px;width:8px;min-height:8px;min-width:8px;max-height:8px;max-width:8px;cursor:pointer}.icon.arrow-downward{color:#999;border-style:solid;border-width:4px 4px 0;border-color:#999 transparent transparent;content:'';transition:transform .2s linear;cursor:pointer}.icon.arrow-downward.active{transform:rotate(180deg)}.vue-select{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;width:150px;border-radius:4px;border:1px solid #999;box-sizing:border-box;outline:0}.vue-select[data-is-focusing=true]:not([data-visible-length='0']){border-bottom-left-radius:0;border-bottom-right-radius:0}.vue-select.disabled{background-color:rgba(239,239,239)}.vue-dropdown[data-removable=false] .vue-dropdown-item.selected:hover,.vue-select.disabled *,.vue-select.disabled input,.vue-tags[data-removable=false] .vue-tag.selected img:hover{cursor:not-allowed}.vue-select-header{display:flex;width:100%;align-items:center;justify-content:space-between}.vue-select-header>.icon.arrow-downward,.vue-select-header>.icon.loading,.vue-tag>span{margin-right:4px}.vue-tags{display:flex;flex-wrap:wrap;margin:0;padding:2px;min-height:calc(1rem + 4px);user-select:none}.vue-tags.collapsed{flex-wrap:nowrap;overflow:auto}.vue-tag,.vue-tag.selected{align-items:center;justify-content:center;background-color:#999;border-radius:4px;padding:0 4px;font-size:.8rem}.vue-tag{display:none;list-style-type:none;margin:2px;min-height:1rem}.vue-tag.selected{display:flex}.vue-dropdown,.vue-input{min-width:0;box-sizing:border-box}.vue-input,.vue-input>input{border:0;outline:0;width:100%}.vue-input{display:flex;align-items:center;border-radius:4px;max-width:100%;padding:4px}.vue-input>input{min-width:0;font-size:.8rem;padding:0}.vue-input>input[disabled]{background-color:rgba(239,239,239)}.vue-input>input[readonly],.vue-select-header>.vue-input>input[disabled]{background-color:unset}.vue-dropdown{position:absolute;background-color:#fff;z-index:1;max-height:300px;overflow-y:auto;width:inherit;left:-1px;margin:0;padding:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border:1px solid #999;list-style-type:none}.vue-dropdown[data-visible-length='0']{border:0}.vue-dropdown-item{list-style-type:none;padding:4px;cursor:pointer;min-height:1rem}.vue-dropdown-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.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.highlighted{background-color:#ff6a6a}.vue-dropdown[data-addable=false][data-multiple=true] .vue-dropdown-item:not(.selected):hover{cursor:not-allowed}.icon.loading{display:inline-block;position:relative;width:8px;min-width:8px;height:8px;min-height:8px}.icon.loading div{box-sizing:border-box;display:block;position:absolute;border:1px solid #999;width:8px;height:8px;border-radius:50%;animation:loading 1s cubic-bezier(.5,0,.5,1) infinite;border-color:#999 transparent transparent}.icon.loading div:nth-child(1){animation-delay:-.08s}.icon.loading div:nth-child(2){animation-delay:-.16s} \ No newline at end of file diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js index 2dc8e3e..be7d32b 100644 --- a/js/gamutable.es6.js +++ b/js/gamutable.es6.js @@ -332,8 +332,8 @@ let monTableau = { // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ if (this.filtrecolmulti === 'non') { this.filtreCol.forEach((col) => { - let Tval = ['']; - // let Tval = []; + // let Tval = ['']; + let Tval = []; this.tableau.forEach((t) => { let valCol = t[this.champ_search][col]; if (Tval.indexOf(valCol) === -1) { @@ -386,8 +386,8 @@ let monTableau = { if (config.filtreCol !== undefined) { this.filtreColType = config.filtreCol; Object.keys(this.filtreColType).forEach((col) => { - // let Tval = []; - let Tval = ['']; + let Tval = []; + // let Tval = ['']; this.table.forEach((t) => { let valCol = t[this.champ_search][col]; if (Tval.indexOf(valCol) === -1) { @@ -433,8 +433,8 @@ let monTableau = { if (config.filtreCol !== undefined) { this.filtreColType = config.filtreCol; Object.keys(this.filtreColType).forEach((col) => { - let Tval = ['']; - // let Tval = []; + // let Tval = ['']; + let Tval = []; this.table.forEach((t) => { let valCol = t[this.champ_search][col]; if (valCol) { diff --git a/js/gamutable.js b/js/gamutable.js index 52106f5..e4141c7 100644 --- a/js/gamutable.js +++ b/js/gamutable.js @@ -374,7 +374,8 @@ var monTableau = { // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ if (this.filtrecolmulti === 'non') { this.filtreCol.forEach(function (col) { - var Tval = ['']; // let Tval = []; + // let Tval = ['']; + var Tval = []; _this3.tableau.forEach(function (t) { var valCol = t[_this3.champ_search][col]; @@ -440,8 +441,7 @@ var monTableau = { if (config.filtreCol !== undefined) { this.filtreColType = config.filtreCol; Object.keys(this.filtreColType).forEach(function (col) { - // let Tval = []; - var Tval = ['']; + var Tval = []; // let Tval = ['']; _this4.table.forEach(function (t) { var valCol = t[_this4.champ_search][col]; @@ -500,7 +500,8 @@ var monTableau = { if (config.filtreCol !== undefined) { _this4.filtreColType = config.filtreCol; Object.keys(_this4.filtreColType).forEach(function (col) { - var Tval = ['']; // let Tval = []; + // let Tval = ['']; + var Tval = []; _this4.table.forEach(function (t) { var valCol = t[_this4.champ_search][col]; diff --git a/js/vue-next-select.js b/js/vue-next-select.js index e59ee1d..947d825 100644 --- a/js/vue-next-select.js +++ b/js/vue-next-select.js @@ -1,876 +1 @@ -this.VueNextSelect = (function (vue) { - 'use strict'; - - var script$2 = { - inheritAttrs: false, - name: 'vue-input', - props: { - modelValue: { - required: true, - type: String, - }, - placeholder: { - required: true, - type: String, - }, - disabled: { - required: true, - type: Boolean, - }, - tabindex: { - required: true, - type: Number, - }, - autofocus: { - required: true, - type: Boolean, - }, - }, - emits: ['update:modelValue', 'input', 'change', 'focus', 'blur', 'escape'], - setup(props, context) { - const handleInput = event => { - context.emit('input', event); - context.emit('update:modelValue', event.target.value); - }; - const handleChange = event => { - context.emit('change', event); - context.emit('update:modelValue', event.target.value); - }; - const handleFocus = event => { - context.emit('focus', event); - }; - const handleBlur = event => { - context.emit('blur', event); - }; - - const input = vue.ref(null); - const handleEscape = event => { - input.value.blur(); - context.emit('escape', event); - }; - vue.onMounted(() => { - if (props.autofocus) input.value.focus(); - }); - vue.onUpdated(() => { - if (props.autofocus) input.value.focus(); - }); - - return { - handleInput, - handleChange, - handleFocus, - handleBlur, - - input, - handleEscape, - } - }, - }; - - const _hoisted_1$1 = { class: "vue-input" }; - - function render$3(_ctx, _cache, $props, $setup, $data, $options) { - return (vue.openBlock(), vue.createBlock("div", _hoisted_1$1, [ - vue.renderSlot(_ctx.$slots, "prepend"), - vue.createVNode("input", { - ref: "input", - modelValue: $props.modelValue, - placeholder: $props.placeholder, - disabled: $props.disabled, - onInput: _cache[1] || (_cache[1] = (...args) => ($setup.handleInput && $setup.handleInput(...args))), - onChange: _cache[2] || (_cache[2] = (...args) => ($setup.handleChange && $setup.handleChange(...args))), - onFocus: _cache[3] || (_cache[3] = (...args) => ($setup.handleFocus && $setup.handleFocus(...args))), - onBlur: _cache[4] || (_cache[4] = (...args) => ($setup.handleBlur && $setup.handleBlur(...args))), - onKeyup: _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers((...args) => ($setup.handleEscape && $setup.handleEscape(...args)), ["exact"]), ["esc"])), - tabindex: $props.tabindex, - autofocus: $props.autofocus - }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["modelValue", "placeholder", "disabled", "tabindex", "autofocus"]), - vue.renderSlot(_ctx.$slots, "append") - ])) - } - - script$2.render = render$3; - script$2.__file = "src/components/input.vue"; - - var script$1 = { - inheritAttrs: false, - name: 'vue-tags', - props: { - modelValue: { - required: true, - type: Array, - validator(modelValue) { - return modelValue.every(option => { - return typeof option.key !== undefined && option.label !== undefined && typeof option.selected === 'boolean' - }) - }, - }, - collapseTags: { - type: Boolean, - }, - }, - emits: ['click'], - setup(props, context) { - const dataAttrs = vue.inject('dataAttrs'); - - const handleClick = event => { - context.emit('click', event); - }; - - return { - dataAttrs, - handleClick, - } - }, - }; - - function render$2(_ctx, _cache, $props, $setup, $data, $options) { - return (vue.openBlock(), vue.createBlock("ul", vue.mergeProps({ - class: ["vue-tags", { collapsed: $props.collapseTags }], - onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["prevent"])), - tabindex: "-1", - onClick: _cache[2] || (_cache[2] = (...args) => ($setup.handleClick && $setup.handleClick(...args))) - }, $setup.dataAttrs), [ - (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.modelValue, (option) => { - return (vue.openBlock(), vue.createBlock("li", { - key: option.key, - class: ["vue-tag", { selected: option.selected }] - }, [ - vue.renderSlot(_ctx.$slots, "default", { option: option }, () => [ - vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */) - ]) - ], 2 /* CLASS */)) - }), 128 /* KEYED_FRAGMENT */)) - ], 16 /* FULL_PROPS */)) - } - - script$1.render = render$2; - script$1.__file = "src/components/tags.vue"; - - var script = { - inheritAttrs: false, - name: 'vue-dropdown', - props: { - modelValue: { - required: true, - type: Array, - validator(modelValue) { - return modelValue.every(option => { - return typeof option.key !== undefined && option.label !== undefined && typeof option.selected === 'boolean' - }) - }, - }, - headerHeight: { - required: true, - type: String, - }, - }, - emits: ['click', 'mousemove'], - setup(props, context) { - const dataAttrs = vue.inject('dataAttrs'); - - const handleClick = (event, option) => { - if (option.disabled) return - context.emit('click', event, option); - }; - - const handleMousemove = (event, option, index) => { - context.emit('mousemove', event, option, index); - }; - - return { - dataAttrs, - handleClick, - handleMousemove, - } - }, - }; - - function render$1(_ctx, _cache, $props, $setup, $data, $options) { - return (vue.openBlock(), vue.createBlock("ul", vue.mergeProps({ - class: "vue-dropdown", - onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["prevent"])), - style: { top: $props.headerHeight } - }, $setup.dataAttrs), [ - (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.modelValue, (option, index) => { - return (vue.openBlock(), vue.createBlock(vue.Fragment, { - key: option.key - }, [ - (option.visible && option.hidden === false) - ? (vue.openBlock(), vue.createBlock("li", { - key: 0, - onClick: $event => ($setup.handleClick($event, option)), - class: ["vue-dropdown-item", { selected: option.selected, disabled: option.disabled, highlighted: option.highlighted }], - onMousemove: vue.withModifiers($event => ($setup.handleMousemove($event, option, index)), ["self"]) - }, [ - vue.renderSlot(_ctx.$slots, "default", { option: option }, () => [ - vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */) - ]) - ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, ["onClick", "onMousemove"])) - : vue.createCommentVNode("v-if", true) - ], 64 /* STABLE_FRAGMENT */)) - }), 128 /* KEYED_FRAGMENT */)) - ], 16 /* FULL_PROPS */)) - } - - script.render = render$1; - script.__file = "src/components/dropdown.vue"; - - const isSameOption = (option1, option2, { valueBy }) => { - return valueBy(option1) === valueBy(option2) - }; - - const hasOption = (options, option, { valueBy }) => { - return options.some(_option => isSameOption(_option, option, { valueBy })) - }; - - const getOptionByValue = (options, value, { valueBy }) => { - return options.find(option => valueBy(option) === value) - }; - - const addOption = (selectedOptions, option, { max, valueBy }) => { - if (hasOption(selectedOptions, option, { valueBy })) return selectedOptions - if (selectedOptions.length >= max) return selectedOptions - - return selectedOptions.concat(option) - }; - - const removeOption = (selectedOptions, option, { min, valueBy }) => { - if (hasOption(selectedOptions, option, { valueBy }) === false) return selectedOptions - if (selectedOptions.length <= min) return selectedOptions - - return selectedOptions.filter(_option => isSameOption(_option, option, { valueBy }) === false) - }; - - const createComputedForGetterFunction = maybePathFunc => - vue.computed(() => { - return typeof maybePathFunc.value === 'function' - ? maybePathFunc.value - : typeof maybePathFunc.value === 'string' - ? option => maybePathFunc.value.split('.').reduce((value, key) => value[key], option) - : option => option - }); - - var normalize = props => { - const trackBy = createComputedForGetterFunction(vue.toRef(props, 'trackBy')); - const labelBy = createComputedForGetterFunction(vue.toRef(props, 'labelBy')); - const valueBy = createComputedForGetterFunction(vue.toRef(props, 'valueBy')); - const disabledBy = createComputedForGetterFunction(vue.toRef(props, 'disabledBy')); - - const min = vue.computed(() => (props.multiple ? props.min : Math.min(1, props.min))); - const max = vue.computed(() => (props.multiple ? props.max : 1)); - - const options = vue.isRef(props.options) || vue.isReactive(props.options) ? vue.toRef(props, 'options') : vue.ref(props.options); - - return { - trackBy, - labelBy, - valueBy, - disabledBy, - min, - max, - options, - } - }; - - var useHeight = function (element, watchSource) { - var height = vue.ref('0'); - var calcHeaderHeight = function () { - vue.nextTick(function () { - if (!element.value) - return; - height.value = window.getComputedStyle(element.value).height; - }); - }; - vue.watch(watchSource, calcHeaderHeight); - vue.onMounted(calcHeaderHeight); - return height; - }; - var usePointer = function (endIndex) { - var highlightedIndex = vue.ref(); - var pointerForward = function () { return ++highlightedIndex.value; }; - var pointerBackward = function () { return --highlightedIndex.value; }; - var pointerSet = function (index) { return (highlightedIndex.value = index); }; - vue.watchEffect(function () { - if (endIndex.value <= 0) { - highlightedIndex.value = undefined; - } - else if (highlightedIndex.value === undefined) { - highlightedIndex.value = 0; - } - else if (highlightedIndex.value < 0) { - highlightedIndex.value = endIndex.value - 1; - } - else if (endIndex.value <= highlightedIndex.value) { - highlightedIndex.value = 0; - } - }); - return { - highlightedIndex: highlightedIndex, - pointerForward: pointerForward, - pointerBackward: pointerBackward, - pointerSet: pointerSet, - }; - }; - - var version = "1.3.0"; - - const VueSelect = { - name: 'vue-select', - inheritAttrs: false, - props: { - modelValue: { - required: true, - }, - emptyModelValue: { - default: null, - }, - options: { - required: true, - type: Array, - }, - visibleOptions: { - type: [Array, null], - default: null, - }, - multiple: { - default: false, - type: Boolean, - }, - min: { - default: 0, - type: Number, - }, - max: { - default: Infinity, - type: Number, - }, - closeOnSelect: { - default: false, - type: Boolean, - }, - clearOnSelect: { - default: false, - type: Boolean, - }, - trackBy: { - type: [String, Function], - }, - hideSelected: { - default: false, - type: Boolean, - }, - labelBy: { - type: [String, Function], - }, - valueBy: { - type: [String, Function], - }, - disabledBy: { - default: 'disabled', - type: [String, Function], - }, - - disabled: { - default: false, - type: Boolean, - }, - loading: { - default: false, - type: Boolean, - }, - placeholder: { - default: 'Select option', - type: String, - }, - searchPlaceholder: { - default: 'Type to search', - type: String, - }, - searchable: { - default: false, - type: Boolean, - }, - clearOnClose: { - default: false, - type: Boolean, - }, - - taggable: { - default: false, - type: Boolean, - }, - collapseTags: { - default: false, - type: Boolean, - }, - tabindex: { - default: 0, - type: Number, - }, - autofocus: { - default: false, - type: Boolean, - }, - }, - emits: [ - 'update:modelValue', - 'selected', - 'removed', - 'opened', - 'closed', - 'search:input', - 'search:change', - 'search:focus', - 'search:blur', - ], - setup(props, context) { - const { trackBy, labelBy, valueBy, disabledBy, min, max, options } = normalize(props); - - const instance = vue.getCurrentInstance(); - const wrapper = vue.ref(); - const input = vue.ref(); - const isFocusing = vue.ref(false); - vue.watch( - () => isFocusing.value, - () => { - if (isFocusing.value) { - context.emit('opened'); - if (props.searchable) { - if (input.value && input.value._.refs.input !== document.activeElement) { - input.value._.refs.input.focus(); - } - context.emit('search:focus'); - } else { - wrapper.value.focus(); - } - } else { - if (props.searchable) { - if (input.value && input.value._.refs.input === document.activeElement) { - input.value._.refs.input.blur(); - } - if (props.clearOnClose) clearInput(); - context.emit('search:blur'); - } else { - wrapper.value.blur(); - } - context.emit('closed'); - } - }, - ); - const focus = () => { - if (props.disabled) return - isFocusing.value = true; - }; - const blur = () => { - isFocusing.value = false; - }; - const toggle = () => { - if (isFocusing.value) blur(); - else focus(); - }; - vue.watch( - () => props.disabled, - () => blur(), - ); - - const header = vue.ref(); - const headerHeight = useHeight(header, () => props.modelValue); - const inputHeight = vue.computed(() => (props.searchable && props.multiple && props.taggable ? '22px' : '0px')); - const headerAndInputHeight = vue.computed(() => parseFloat(headerHeight.value) + parseFloat(inputHeight.value) + 'px'); - - // input - const searchingInputValue = vue.ref(''); - const handleInputForInput = event => { - context.emit('search:input', event); - }; - const handleChangeForInput = event => { - context.emit('search:change', event); - }; - const handleFocusForInput = event => { - focus(); - }; - const handleBlurForInput = event => { - blur(); - }; - const searchedOptions = vue.computed(() => { - const hasSearchListeners = instance.vnode.props['onSearch:input'] || instance.vnode.props['onSearch:change']; - return searchingInputValue.value && !hasSearchListeners - ? options.value.filter(option => (labelBy.value(option) + '').indexOf(searchingInputValue.value) > -1) - : undefined - }); - - // sync model value - const normalizedModelValue = vue.ref([]); - const isSynchronoused = () => { - if (props.multiple) { - if (Array.isArray(props.modelValue) === false) return false - if (normalizedModelValue.value.length !== props.modelValue.length) return false - if ( - Object.keys(normalizedModelValue.value).some( - index => - normalizedModelValue.value[index] !== - getOptionByValue(options.value, props.modelValue[index], { valueBy: valueBy.value }), - ) - ) - return false - } else { - if (normalizedModelValue.value.length === 0 && props.modelValue !== props.emptyModelValue) return false - if (normalizedModelValue.value.length === 1 && props.modelValue === props.emptyModelValue) return false - if ( - normalizedModelValue.value[0] !== - getOptionByValue(options.value, props.modelValue, { valueBy: valueBy.value }) - ) - return false - } - return true - }; - const syncFromModelValue = () => { - if (isSynchronoused()) return - normalizedModelValue.value = []; - const modelValue = props.multiple - ? props.modelValue - : props.modelValue === props.emptyModelValue - ? [] - : [props.modelValue]; - for (const value of modelValue) { - const option = getOptionByValue(options.value, value, { valueBy: valueBy.value }); - // guarantee options has modelValue - if (hasOption(options.value, option, { valueBy: valueBy.value }) === false) continue - normalizedModelValue.value = addOption(normalizedModelValue.value, option, { - max: Infinity, - valueBy: valueBy.value, - }); - } - }; - syncFromModelValue(); - vue.watch( - () => props.modelValue, - () => syncFromModelValue(), - { deep: true }, - ); - - const syncToModelValue = () => { - if (isSynchronoused()) return - const selectedValues = normalizedModelValue.value.map(option => valueBy.value(option)); - if (props.multiple) { - context.emit('update:modelValue', selectedValues); - } else { - if (selectedValues.length) context.emit('update:modelValue', selectedValues[0]); - else context.emit('update:modelValue', props.emptyModelValue); - } - }; - vue.watch( - () => normalizedModelValue, - () => syncToModelValue(), - { deep: true }, - ); - - // guarantee options has modelValue - vue.watch( - () => options.value, - () => { - const selectedValueSet = new Set(normalizedModelValue.value.map(option => valueBy.value(option))); - normalizedModelValue.value = options.value.filter(option => selectedValueSet.has(valueBy.value(option))); - }, - { deep: true }, - ); - - const addOrRemoveOption = (event, option) => { - if (props.disabled) return - - option = option.originalOption; - if (hasOption(normalizedModelValue.value, option, { valueBy: valueBy.value })) { - normalizedModelValue.value = removeOption(normalizedModelValue.value, option, { - min: min.value, - valueBy: valueBy.value, - }); - context.emit('removed', option); - } else { - if (!props.multiple) { - const removingOption = normalizedModelValue.value[0]; - normalizedModelValue.value = removeOption(normalizedModelValue.value, normalizedModelValue.value[0], { - min: 0, - valueBy: valueBy.value, - }); - context.emit('removed', removingOption); - } - normalizedModelValue.value = addOption(normalizedModelValue.value, option, { - max: max.value, - valueBy: valueBy.value, - }); - context.emit('selected', option); - } - if (props.closeOnSelect === true) isFocusing.value = false; - if (props.clearOnSelect === true && searchingInputValue.value) clearInput(); - }; - - const clearInput = () => { - // simulate clear input value - input.value._.refs.input.value = ''; - input.value._.refs.input.dispatchEvent(new Event('input')); - input.value._.refs.input.dispatchEvent(new Event('change')); - }; - - const renderedOptions = vue.computed(() => props.visibleOptions ?? searchedOptions.value ?? options.value); - - const optionsWithInfo = vue.computed(() => { - const selectedValueSet = new Set(normalizedModelValue.value.map(option => valueBy.value(option))); - const visibleValueSet = new Set(renderedOptions.value.map(option => valueBy.value(option))); - - return options.value.map((option, index) => ({ - key: trackBy.value(option), - label: labelBy.value(option), - selected: selectedValueSet.has(valueBy.value(option)), - disabled: disabledBy.value(option), - visible: visibleValueSet.has(valueBy.value(option)), - hidden: props.hideSelected ? selectedValueSet.has(valueBy.value(option)) : false, - highlighted: index === highlightedIndex.value, - originalOption: option, - })) - }); - - const { highlightedIndex, pointerForward, pointerBackward, pointerSet } = usePointer( - vue.computed(() => renderedOptions.value.length), - ); - - const dataAttrs = vue.computed(() => ({ - 'data-is-focusing': isFocusing.value, - 'data-visible-length': optionsWithInfo.value.filter(option => option.visible && option.hidden === false).length, - 'data-not-selected-length': options.value.length - optionsWithInfo.value.filter(option => option.selected).length, - 'data-selected-length': optionsWithInfo.value.filter(option => option.selected).length, - 'data-addable': optionsWithInfo.value.filter(option => option.selected).length < max.value, - 'data-removable': optionsWithInfo.value.filter(option => option.selected).length > min.value, - 'data-total-length': options.value.length, - 'data-multiple': props.multiple, - })); - vue.provide('dataAttrs', dataAttrs); - - const innerPlaceholder = vue.computed(() => { - const selectedOptions = optionsWithInfo.value.filter(option => option.selected); - - if (props.multiple) { - if (selectedOptions.length === 0) { - return props.placeholder - } else if (selectedOptions.length === 1) { - return '1 option selected' - } else { - return selectedOptions.length + ' options selected' - } - } else { - if (selectedOptions.length === 0) { - return props.placeholder - } else { - return selectedOptions[0].label + '' - } - } - }); - - return { - isFocusing, - wrapper, - input, - focus, - blur, - toggle, - - header, - headerAndInputHeight, - - searchingInputValue, - handleInputForInput, - handleChangeForInput, - handleFocusForInput, - handleBlurForInput, - - optionsWithInfo, - addOrRemoveOption, - - dataAttrs, - - innerPlaceholder, - - highlightedIndex, - pointerForward, - pointerBackward, - pointerSet, - } - }, - components: { - VInput: script$2, - VTags: script$1, - VDropdown: script, - }, - }; - - VueSelect.__VERSION__ = version; - - var _imports_0 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iZGVsZXRlIiBkYXRhLW5hbWU9ImRlbGV0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPmRlbGV0ZTwvdGl0bGU+PHBhdGggZD0iTTI1NiwyNEMzODMuOSwyNCw0ODgsMTI4LjEsNDg4LDI1NlMzODMuOSw0ODgsMjU2LDQ4OCwyNC4wNiwzODMuOSwyNC4wNiwyNTYsMTI4LjEsMjQsMjU2LDI0Wk0wLDI1NkMwLDM5Ny4xNiwxMTQuODQsNTEyLDI1Niw1MTJTNTEyLDM5Ny4xNiw1MTIsMjU2LDM5Ny4xNiwwLDI1NiwwLDAsMTE0Ljg0LDAsMjU2WiIgZmlsbD0iIzViNWI1ZiIvPjxwb2x5Z29uIHBvaW50cz0iMzgyIDE3Mi43MiAzMzkuMjkgMTMwLjAxIDI1NiAyMTMuMjkgMTcyLjcyIDEzMC4wMSAxMzAuMDEgMTcyLjcyIDIxMy4yOSAyNTYgMTMwLjAxIDMzOS4yOCAxNzIuNzIgMzgyIDI1NiAyOTguNzEgMzM5LjI5IDM4MS45OSAzODIgMzM5LjI4IDI5OC43MSAyNTYgMzgyIDE3Mi43MiIgZmlsbD0iIzViNWI1ZiIvPjwvc3ZnPg=='; - - const _hoisted_1 = { - ref: "header", - class: "vue-select-header" - }; - const _hoisted_2 = { - key: 0, - class: "vue-input" - }; - const _hoisted_3 = { class: "icon loading" }; - const _hoisted_4 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */); - const _hoisted_5 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */); - const _hoisted_6 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */); - const _hoisted_7 = { class: "icon loading" }; - const _hoisted_8 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */); - const _hoisted_9 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */); - const _hoisted_10 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */); - - function render(_ctx, _cache, $props, $setup, $data, $options) { - const _component_v_tags = vue.resolveComponent("v-tags"); - const _component_v_input = vue.resolveComponent("v-input"); - const _component_v_dropdown = vue.resolveComponent("v-dropdown"); - - return (vue.openBlock(), vue.createBlock("div", vue.mergeProps({ - ref: "wrapper", - class: ["vue-select", { disabled: _ctx.disabled }], - tabindex: _ctx.isFocusing ? -1 : _ctx.tabindex, - onFocus: _cache[10] || (_cache[10] = (...args) => (_ctx.focus && _ctx.focus(...args))), - onBlur: _cache[11] || (_cache[11] = () => (_ctx.searchable ? false : _ctx.blur())) - }, _ctx.dataAttrs, { - onKeypress: _cache[12] || (_cache[12] = vue.withKeys( - () => _ctx.highlightedIndex !== undefined && _ctx.addOrRemoveOption(_ctx.$event, _ctx.optionsWithInfo[_ctx.highlightedIndex]) - , ["enter"])), - onKeydown: [ - _cache[13] || (_cache[13] = vue.withKeys(vue.withModifiers((...args) => (_ctx.pointerForward && _ctx.pointerForward(...args)), ["prevent"]), ["down"])), - _cache[14] || (_cache[14] = vue.withKeys(vue.withModifiers((...args) => (_ctx.pointerBackward && _ctx.pointerBackward(...args)), ["prevent"]), ["up"])) - ] - }), [ - vue.createVNode("div", _hoisted_1, [ - ((_ctx.multiple && _ctx.taggable && _ctx.modelValue.length === 0) || (_ctx.searchable === false && _ctx.taggable === false)) - ? (vue.openBlock(), vue.createBlock("div", _hoisted_2, [ - vue.createVNode("input", { - placeholder: _ctx.innerPlaceholder, - readonly: "", - onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.focus && _ctx.focus(...args))) - }, null, 8 /* PROPS */, ["placeholder"]) - ])) - : vue.createCommentVNode("v-if", true), - (_ctx.multiple && _ctx.taggable) - ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 1 }, [ - vue.createVNode(_component_v_tags, { - modelValue: _ctx.optionsWithInfo, - "collapse-tags": _ctx.collapseTags, - tabindex: "-1", - onClick: _ctx.focus - }, { - default: vue.withCtx(({ option }) => [ - vue.renderSlot(_ctx.$slots, "tag", { - option: option.originalOption - }, () => [ - vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */), - vue.createVNode("img", { - src: _imports_0, - alt: "delete tag", - class: "icon delete", - onClick: vue.withModifiers(() => _ctx.addOrRemoveOption(_ctx.$event, option), ["prevent","stop"]) - }, null, 8 /* PROPS */, ["onClick"]) - ]) - ]), - _: 1 /* STABLE */ - }, 8 /* PROPS */, ["modelValue", "collapse-tags", "onClick"]), - vue.createVNode("span", { - class: ["icon arrow-downward", { active: _ctx.isFocusing }], - onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.toggle && _ctx.toggle(...args))), - onMousedown: _cache[3] || (_cache[3] = vue.withModifiers(() => {}, ["prevent","stop"])) - }, null, 34 /* CLASS, HYDRATE_EVENTS */) - ], 64 /* STABLE_FRAGMENT */)) - : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 2 }, [ - (_ctx.searchable) - ? (vue.openBlock(), vue.createBlock(_component_v_input, { - key: 0, - ref: "input", - modelValue: _ctx.searchingInputValue, - "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => (_ctx.searchingInputValue = $event)), - disabled: _ctx.disabled, - placeholder: _ctx.isFocusing ? _ctx.searchPlaceholder : _ctx.innerPlaceholder, - onInput: _ctx.handleInputForInput, - onChange: _ctx.handleChangeForInput, - onFocus: _ctx.handleFocusForInput, - onBlur: _ctx.handleBlurForInput, - onEscape: _ctx.blur, - autofocus: _ctx.autofocus || (_ctx.taggable && _ctx.searchable), - tabindex: _ctx.tabindex - }, null, 8 /* PROPS */, ["modelValue", "disabled", "placeholder", "onInput", "onChange", "onFocus", "onBlur", "onEscape", "autofocus", "tabindex"])) - : vue.createCommentVNode("v-if", true), - vue.withDirectives(vue.createVNode("span", _hoisted_3, [ - _hoisted_4, - _hoisted_5, - _hoisted_6 - ], 512 /* NEED_PATCH */), [ - [vue.vShow, _ctx.loading] - ]), - vue.withDirectives(vue.createVNode("span", { - class: ["icon arrow-downward", { active: _ctx.isFocusing }], - onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.toggle && _ctx.toggle(...args))), - onMousedown: _cache[6] || (_cache[6] = vue.withModifiers(() => {}, ["prevent","stop"])) - }, null, 34 /* CLASS, HYDRATE_EVENTS */), [ - [vue.vShow, _ctx.loading === false] - ]) - ], 64 /* STABLE_FRAGMENT */)) - ], 512 /* NEED_PATCH */), - (_ctx.multiple && _ctx.taggable && _ctx.searchable) - ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_v_input, { - key: 0, - ref: "input", - modelValue: _ctx.searchingInputValue, - "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => (_ctx.searchingInputValue = $event)), - disabled: _ctx.disabled, - placeholder: _ctx.searchPlaceholder, - onInput: _ctx.handleInputForInput, - onChange: _ctx.handleChangeForInput, - onFocus: _ctx.handleFocusForInput, - onBlur: _ctx.handleBlurForInput, - onEscape: _ctx.blur, - tabindex: _ctx.tabindex, - autofocus: _ctx.autofocus || (_ctx.taggable && _ctx.searchable) - }, { - append: vue.withCtx(() => [ - vue.withDirectives(vue.createVNode("span", _hoisted_7, [ - _hoisted_8, - _hoisted_9, - _hoisted_10 - ], 512 /* NEED_PATCH */), [ - [vue.vShow, _ctx.loading] - ]) - ]), - _: 1 /* STABLE */ - }, 8 /* PROPS */, ["modelValue", "disabled", "placeholder", "onInput", "onChange", "onFocus", "onBlur", "onEscape", "tabindex", "autofocus"])), [ - [vue.vShow, _ctx.isFocusing] - ]) - : vue.createCommentVNode("v-if", true), - vue.withDirectives(vue.createVNode(_component_v_dropdown, { - modelValue: _ctx.optionsWithInfo, - "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => (_ctx.optionsWithInfo = $event)), - onClick: _ctx.addOrRemoveOption, - onMousemove: _cache[9] || (_cache[9] = (ev, option, index) => _ctx.pointerSet(index)), - "header-height": _ctx.headerAndInputHeight - }, { - default: vue.withCtx(({ option }) => [ - vue.renderSlot(_ctx.$slots, "dropdown-item", { - option: option.originalOption - }, () => [ - vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */) - ]) - ]), - _: 1 /* STABLE */ - }, 8 /* PROPS */, ["modelValue", "onClick", "header-height"]), [ - [vue.vShow, _ctx.isFocusing] - ]) - ], 16 /* FULL_PROPS */, ["tabindex"])) - } - - VueSelect.render = render; - VueSelect.__file = "src/index.vue"; - - return VueSelect; - -}(Vue)); +this.VueNextSelect=function(e){"use strict";var l={inheritAttrs:!1,name:"vue-input",props:{modelValue:{required:!0,type:String},placeholder:{required:!0,type:String},disabled:{required:!0,type:Boolean},tabindex:{required:!0,type:Number},autofocus:{required:!0,type:Boolean}},emits:["update:modelValue","input","change","focus","blur","escape"],setup(l,a){const t=e.ref(null);return e.onMounted((()=>{l.autofocus&&t.value.focus()})),e.onUpdated((()=>{l.autofocus&&t.value.focus()})),{handleInput:e=>{a.emit("input",e),a.emit("update:modelValue",e.target.value)},handleChange:e=>{a.emit("change",e),a.emit("update:modelValue",e.target.value)},handleFocus:e=>{a.emit("focus",e)},handleBlur:e=>{a.emit("blur",e)},input:t,handleEscape:e=>{t.value.blur(),a.emit("escape",e)}}}};const a={class:"vue-input"};l.render=function(l,t,o,n,u,i){return e.openBlock(),e.createBlock("div",a,[e.renderSlot(l.$slots,"prepend"),e.createVNode("input",{ref:"input",modelValue:o.modelValue,placeholder:o.placeholder,disabled:o.disabled,onInput:t[1]||(t[1]=(...e)=>n.handleInput&&n.handleInput(...e)),onChange:t[2]||(t[2]=(...e)=>n.handleChange&&n.handleChange(...e)),onFocus:t[3]||(t[3]=(...e)=>n.handleFocus&&n.handleFocus(...e)),onBlur:t[4]||(t[4]=(...e)=>n.handleBlur&&n.handleBlur(...e)),onKeyup:t[5]||(t[5]=e.withKeys(e.withModifiers(((...e)=>n.handleEscape&&n.handleEscape(...e)),["exact"]),["esc"])),tabindex:o.tabindex,autofocus:o.autofocus},null,40,["modelValue","placeholder","disabled","tabindex","autofocus"]),e.renderSlot(l.$slots,"append")])},l.__file="src/components/input.vue";var t={inheritAttrs:!1,name:"vue-tags",props:{modelValue:{required:!0,type:Array,validator:e=>e.every((e=>void 0!==typeof e.key&&void 0!==e.label&&"boolean"==typeof e.selected))},collapseTags:{type:Boolean}},emits:["click"],setup:(l,a)=>({dataAttrs:e.inject("dataAttrs"),handleClick:e=>{a.emit("click",e)}})};t.render=function(l,a,t,o,n,u){return e.openBlock(),e.createBlock("ul",e.mergeProps({class:["vue-tags",{collapsed:t.collapseTags}],onMousedown:a[1]||(a[1]=e.withModifiers((()=>{}),["prevent"])),tabindex:"-1",onClick:a[2]||(a[2]=(...e)=>o.handleClick&&o.handleClick(...e))},o.dataAttrs),[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.modelValue,(a=>(e.openBlock(),e.createBlock("li",{key:a.key,class:["vue-tag",{selected:a.selected}]},[e.renderSlot(l.$slots,"default",{option:a},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1)]))],2)))),128))],16)},t.__file="src/components/tags.vue";var o={inheritAttrs:!1,name:"vue-dropdown",props:{modelValue:{required:!0,type:Array,validator:e=>e.every((e=>void 0!==typeof e.key&&void 0!==e.label&&"boolean"==typeof e.selected))},headerHeight:{required:!0,type:String}},emits:["click-item","mousemove"],setup:(l,a)=>({dataAttrs:e.inject("dataAttrs"),handleClickItem:(e,l)=>{l.disabled||a.emit("click-item",e,l)},handleMousemove:(e,l)=>{a.emit("mousemove",e,l)}})};o.render=function(l,a,t,o,n,u){return e.openBlock(),e.createBlock("ul",e.mergeProps({class:"vue-dropdown",onMousedown:a[1]||(a[1]=e.withModifiers((()=>{}),["prevent"])),style:{top:t.headerHeight}},o.dataAttrs),[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.modelValue,(a=>(e.openBlock(),e.createBlock(e.Fragment,{key:a.key},[a.visible&&!1===a.hidden?(e.openBlock(),e.createBlock("li",{key:0,onClick:e=>o.handleClickItem(e,a),class:["vue-dropdown-item",{selected:a.selected,disabled:a.disabled,highlighted:a.highlighted}],onMousemove:e.withModifiers((e=>o.handleMousemove(e,a)),["self"])},[e.renderSlot(l.$slots,"default",{option:a},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1)]))],42,["onClick","onMousemove"])):e.createCommentVNode("v-if",!0)],64)))),128))],16)},o.__file="src/components/dropdown.vue";const n=(e,l,{valueBy:a})=>a(e)===a(l),u=(e,l,{valueBy:a})=>e.some((e=>n(e,l,{valueBy:a}))),i=(e,l,{valueBy:a})=>e.find((e=>a(e)===l)),r=(e,l,{max:a,valueBy:t})=>u(e,l,{valueBy:t})||e.length>=a?e:e.concat(l),d=(e,l,{min:a,valueBy:t})=>!1===u(e,l,{valueBy:t})||e.length<=a?e:e.filter((e=>!1===n(e,l,{valueBy:t}))),c=l=>e.computed((()=>"function"==typeof l.value?l.value:"string"==typeof l.value?e=>l.value.split(".").reduce(((e,l)=>e[l]),e):e=>e));const s={name:"vue-select",inheritAttrs:!1,props:{modelValue:{required:!0},emptyModelValue:{default:null},options:{required:!0,type:Array},visibleOptions:{type:[Array,null],default:null},multiple:{default:!1,type:Boolean},min:{default:0,type:Number},max:{default:1/0,type:Number},closeOnSelect:{default:!1,type:Boolean},clearOnSelect:{default:!1,type:Boolean},trackBy:{type:[String,Function]},hideSelected:{default:!1,type:Boolean},labelBy:{type:[String,Function]},valueBy:{type:[String,Function]},disabledBy:{default:"disabled",type:[String,Function]},disabled:{default:!1,type:Boolean},loading:{default:!1,type:Boolean},placeholder:{default:"Select option",type:String},searchPlaceholder:{default:"Type to search",type:String},searchable:{default:!1,type:Boolean},clearOnClose:{default:!1,type:Boolean},taggable:{default:!1,type:Boolean},collapseTags:{default:!1,type:Boolean},tabindex:{default:0,type:Number},autofocus:{default:!1,type:Boolean}},emits:["update:modelValue","selected","removed","opened","closed","search:input","search:change","search:focus","search:blur"],setup(l,a){const{trackBy:t,labelBy:o,valueBy:n,disabledBy:s,min:p,max:v,options:h}=(l=>({trackBy:c(e.toRef(l,"trackBy")),labelBy:c(e.toRef(l,"labelBy")),valueBy:c(e.toRef(l,"valueBy")),disabledBy:c(e.toRef(l,"disabledBy")),min:e.computed((()=>l.multiple?l.min:Math.min(1,l.min))),max:e.computed((()=>l.multiple?l.max:1)),options:e.isRef(l.options)||e.isReactive(l.options)?e.toRef(l,"options"):e.ref(l.options)}))(l),m=e.getCurrentInstance(),g=e.ref(),f=e.ref(),y=e.computed((()=>f.value?._.refs.input)),b=e.ref(!1);e.watch((()=>b.value),(()=>{b.value?(a.emit("opened"),l.searchable?(y.value!==document.activeElement&&y.value.focus(),a.emit("search:focus")):g.value.focus()):(l.searchable?(y.value===document.activeElement&&y.value.blur(),l.clearOnClose&&E(),a.emit("search:blur")):g.value.blur(),a.emit("closed"))}));const w=()=>{l.disabled||(b.value=!0)},B=()=>{b.value=!1};e.watch((()=>l.disabled),(()=>B()));const I=e.ref(),V=(M=I,k=()=>l.modelValue,N=e.ref("0"),x=function(){e.nextTick((function(){M.value&&(N.value=window.getComputedStyle(M.value).height)}))},e.watch(k,x),e.onMounted(x),N);var M,k,N,x;const S=e.computed((()=>l.searchable&&l.multiple&&l.taggable?"22px":"0px")),C=e.computed((()=>parseFloat(V.value)+parseFloat(S.value)+"px")),F=e.ref(""),D=e.computed((()=>{const e=m.vnode.props["onSearch:input"]||m.vnode.props["onSearch:change"];return F.value&&!e?h.value.filter((e=>(o.value(e)+"").indexOf(F.value)>-1)):void 0})),O=e.ref([]),A=()=>{if(l.multiple){if(!1===Array.isArray(l.modelValue))return!1;if(O.value.length!==l.modelValue.length)return!1;if(Object.keys(O.value).some((e=>O.value[e]!==i(h.value,l.modelValue[e],{valueBy:n.value}))))return!1}else{if(0===O.value.length&&l.modelValue!==l.emptyModelValue)return!1;if(1===O.value.length&&l.modelValue===l.emptyModelValue)return!1;if(O.value[0]!==i(h.value,l.modelValue,{valueBy:n.value}))return!1}return!0},T=()=>{if(A())return;O.value=[];const e=l.multiple?l.modelValue:l.modelValue===l.emptyModelValue?[]:[l.modelValue];for(const l of e){const e=i(h.value,l,{valueBy:n.value});!1!==u(h.value,e,{valueBy:n.value})&&(O.value=r(O.value,e,{max:1/0,valueBy:n.value}))}};T(),e.watch((()=>l.modelValue),(()=>T()),{deep:!0});e.watch((()=>O),(()=>(()=>{if(A())return;const e=O.value.map((e=>n.value(e)));l.multiple?a.emit("update:modelValue",e):e.length?a.emit("update:modelValue",e[0]):a.emit("update:modelValue",l.emptyModelValue)})()),{deep:!0}),e.watch((()=>h.value),(()=>{const e=new Set(O.value.map((e=>n.value(e))));O.value=h.value.filter((l=>e.has(n.value(l))))}),{deep:!0});const E=()=>{y.value.value="",y.value.dispatchEvent(new Event("input")),y.value.dispatchEvent(new Event("change"))},L=e.computed((()=>l.visibleOptions??D.value??h.value)),z=e.ref(0),j=e.computed((()=>{const e=new Set(O.value.map((e=>n.value(e)))),a=new Set(L.value.map((e=>n.value(e))));return h.value.map(((u,i)=>({key:t.value(u),label:o.value(u),selected:e.has(n.value(u)),disabled:s.value(u),visible:a.has(n.value(u)),hidden:!!l.hideSelected&&e.has(n.value(u)),highlighted:i===z.value,originalIndex:i,originalOption:u})))})),{pointerForward:P,pointerBackward:R,pointerSet:_}=function(l,a){var t=function(e){var t=l.value.find((function(l){return l.originalIndex===e}));return void 0!==t&&!1!==o(t)&&(a.value=e,!0)},o=function(e){return!e.disabled&&!e.hidden&&e.visible},n=e.computed((function(){return l.value.some((function(e){return o(e)}))}));return e.watchEffect((function(){if(!1===n.value&&(a.value=null),null===a.value||!1===o(l.value[a.value]))for(var e=0,u=l.value;e({"data-is-focusing":b.value,"data-visible-length":j.value.filter((e=>e.visible&&!1===e.hidden)).length,"data-not-selected-length":h.value.length-j.value.filter((e=>e.selected)).length,"data-selected-length":j.value.filter((e=>e.selected)).length,"data-addable":j.value.filter((e=>e.selected)).lengthe.selected)).length>p.value,"data-total-length":h.value.length,"data-multiple":l.multiple})));e.provide("dataAttrs",Z);const W=e.computed((()=>{const e=j.value.filter((e=>e.selected));return l.multiple?0===e.length?l.placeholder:1===e.length?"1 option selected":e.length+" options selected":0===e.length?l.placeholder:e[0].label+""}));return{isFocusing:b,wrapper:g,input:f,focus:w,blur:B,toggle:()=>{b.value?B():w()},header:I,headerAndInputHeight:C,searchingInputValue:F,handleInputForInput:e=>{a.emit("search:input",e)},handleChangeForInput:e=>{a.emit("search:change",e)},handleFocusForInput:e=>{w()},handleBlurForInput:e=>{B()},optionsWithInfo:j,addOrRemoveOption:(e,t)=>{if(!l.disabled){if(t=t.originalOption,u(O.value,t,{valueBy:n.value}))O.value=d(O.value,t,{min:p.value,valueBy:n.value}),a.emit("removed",t);else{if(!l.multiple){const e=O.value[0];O.value=d(O.value,O.value[0],{min:0,valueBy:n.value}),a.emit("removed",e)}O.value=r(O.value,t,{max:v.value,valueBy:n.value}),a.emit("selected",t)}!0===l.closeOnSelect&&(b.value=!1),!0===l.clearOnSelect&&F.value&&E()}},dataAttrs:Z,innerPlaceholder:W,highlightedOriginalIndex:z,pointerForward:P,pointerBackward:R,pointerSet:_}},components:{VInput:l,VTags:t,VDropdown:o},__VERSION__:"1.3.4"};const p={ref:"header",class:"vue-select-header"},v={key:0,class:"vue-input"},h={class:"icon loading"},m=e.createVNode("div",null,null,-1),g=e.createVNode("div",null,null,-1),f=e.createVNode("div",null,null,-1),y={class:"icon loading"},b=e.createVNode("div",null,null,-1),w=e.createVNode("div",null,null,-1),B=e.createVNode("div",null,null,-1);return s.render=function(l,a,t,o,n,u){const i=e.resolveComponent("v-tags"),r=e.resolveComponent("v-input"),d=e.resolveComponent("v-dropdown");return e.openBlock(),e.createBlock("div",e.mergeProps({ref:"wrapper",class:["vue-select",{disabled:l.disabled}],tabindex:l.isFocusing?-1:l.tabindex,onFocus:a[10]||(a[10]=(...e)=>l.focus&&l.focus(...e)),onBlur:a[11]||(a[11]=()=>!l.searchable&&l.blur())},l.dataAttrs,{onKeypress:a[12]||(a[12]=e.withKeys((()=>null!==l.highlightedOriginalIndex&&l.addOrRemoveOption(l.$event,l.optionsWithInfo[l.highlightedOriginalIndex])),["enter"])),onKeydown:[a[13]||(a[13]=e.withKeys(e.withModifiers(((...e)=>l.pointerForward&&l.pointerForward(...e)),["prevent"]),["down"])),a[14]||(a[14]=e.withKeys(e.withModifiers(((...e)=>l.pointerBackward&&l.pointerBackward(...e)),["prevent"]),["up"]))]}),[e.createVNode("div",p,[l.multiple&&l.taggable&&0===l.modelValue.length||!1===l.searchable&&!1===l.taggable?(e.openBlock(),e.createBlock("div",v,[e.createVNode("input",{placeholder:l.innerPlaceholder,readonly:"",onClick:a[1]||(a[1]=(...e)=>l.focus&&l.focus(...e))},null,8,["placeholder"])])):e.createCommentVNode("v-if",!0),l.multiple&&l.taggable?(e.openBlock(),e.createBlock(e.Fragment,{key:1},[e.createVNode(i,{modelValue:l.optionsWithInfo,"collapse-tags":l.collapseTags,tabindex:"-1",onClick:l.focus},{default:e.withCtx((({option:a})=>[e.renderSlot(l.$slots,"tag",{option:a.originalOption},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1),e.createVNode("img",{src:"data:image/svg+xml;base64,PHN2ZyBpZD0iZGVsZXRlIiBkYXRhLW5hbWU9ImRlbGV0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPmRlbGV0ZTwvdGl0bGU+PHBhdGggZD0iTTI1NiwyNEMzODMuOSwyNCw0ODgsMTI4LjEsNDg4LDI1NlMzODMuOSw0ODgsMjU2LDQ4OCwyNC4wNiwzODMuOSwyNC4wNiwyNTYsMTI4LjEsMjQsMjU2LDI0Wk0wLDI1NkMwLDM5Ny4xNiwxMTQuODQsNTEyLDI1Niw1MTJTNTEyLDM5Ny4xNiw1MTIsMjU2LDM5Ny4xNiwwLDI1NiwwLDAsMTE0Ljg0LDAsMjU2WiIgZmlsbD0iIzViNWI1ZiIvPjxwb2x5Z29uIHBvaW50cz0iMzgyIDE3Mi43MiAzMzkuMjkgMTMwLjAxIDI1NiAyMTMuMjkgMTcyLjcyIDEzMC4wMSAxMzAuMDEgMTcyLjcyIDIxMy4yOSAyNTYgMTMwLjAxIDMzOS4yOCAxNzIuNzIgMzgyIDI1NiAyOTguNzEgMzM5LjI5IDM4MS45OSAzODIgMzM5LjI4IDI5OC43MSAyNTYgMzgyIDE3Mi43MiIgZmlsbD0iIzViNWI1ZiIvPjwvc3ZnPg==",alt:"delete tag",class:"icon delete",onClick:e.withModifiers((()=>l.addOrRemoveOption(l.$event,a)),["prevent","stop"])},null,8,["onClick"])]))])),_:1},8,["modelValue","collapse-tags","onClick"]),e.createVNode("span",{class:["icon arrow-downward",{active:l.isFocusing}],onClick:a[2]||(a[2]=(...e)=>l.toggle&&l.toggle(...e)),onMousedown:a[3]||(a[3]=e.withModifiers((()=>{}),["prevent","stop"]))},null,34)],64)):(e.openBlock(),e.createBlock(e.Fragment,{key:2},[l.searchable?(e.openBlock(),e.createBlock(r,{key:0,ref:"input",modelValue:l.searchingInputValue,"onUpdate:modelValue":a[4]||(a[4]=e=>l.searchingInputValue=e),disabled:l.disabled,placeholder:l.isFocusing?l.searchPlaceholder:l.innerPlaceholder,onInput:l.handleInputForInput,onChange:l.handleChangeForInput,onFocus:l.handleFocusForInput,onBlur:l.handleBlurForInput,onEscape:l.blur,autofocus:l.autofocus||l.taggable&&l.searchable,tabindex:l.tabindex},null,8,["modelValue","disabled","placeholder","onInput","onChange","onFocus","onBlur","onEscape","autofocus","tabindex"])):e.createCommentVNode("v-if",!0),e.withDirectives(e.createVNode("span",h,[m,g,f],512),[[e.vShow,l.loading]]),e.withDirectives(e.createVNode("span",{class:["icon arrow-downward",{active:l.isFocusing}],onClick:a[5]||(a[5]=(...e)=>l.toggle&&l.toggle(...e)),onMousedown:a[6]||(a[6]=e.withModifiers((()=>{}),["prevent","stop"]))},null,34),[[e.vShow,!1===l.loading]])],64))],512),l.multiple&&l.taggable&&l.searchable?e.withDirectives((e.openBlock(),e.createBlock(r,{key:0,ref:"input",modelValue:l.searchingInputValue,"onUpdate:modelValue":a[7]||(a[7]=e=>l.searchingInputValue=e),disabled:l.disabled,placeholder:l.searchPlaceholder,onInput:l.handleInputForInput,onChange:l.handleChangeForInput,onFocus:l.handleFocusForInput,onBlur:l.handleBlurForInput,onEscape:l.blur,tabindex:l.tabindex,autofocus:l.autofocus||l.taggable&&l.searchable},{append:e.withCtx((()=>[e.withDirectives(e.createVNode("span",y,[b,w,B],512),[[e.vShow,l.loading]])])),_:1},8,["modelValue","disabled","placeholder","onInput","onChange","onFocus","onBlur","onEscape","tabindex","autofocus"])),[[e.vShow,l.isFocusing]]):e.createCommentVNode("v-if",!0),e.withDirectives(e.createVNode(d,{modelValue:l.optionsWithInfo,"onUpdate:modelValue":a[8]||(a[8]=e=>l.optionsWithInfo=e),onClickItem:l.addOrRemoveOption,onMousemove:a[9]||(a[9]=(e,a)=>l.pointerSet(a.originalIndex)),"header-height":l.headerAndInputHeight},{default:e.withCtx((({option:a})=>[e.renderSlot(l.$slots,"dropdown-item",{option:a.originalOption},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1)]))])),_:1},8,["modelValue","onClickItem","header-height"]),[[e.vShow,l.isFocusing]])],16,["tabindex"])},s.__file="src/index.vue",s}(Vue);