From f837fe651613a82bebfced0855c82aeb97a9ebeb Mon Sep 17 00:00:00 2001 From: tofulm Date: Fri, 19 Mar 2021 10:35:09 +0100 Subject: [PATCH] maj de vue-nex-select pour avoir la selection avec le clavier, encore des bug --- css/gamutable.css | 5 + css/gamutable.css.map | 2 +- css/gamutable.scss | 6 + css/vue-next-select.css | 9 +- js/gamutable.es6.js | 9 +- js/gamutable.js | 11 +- js/vue-next-select.js | 877 +++++++++++++++++++++++++++++++++++++++- 7 files changed, 909 insertions(+), 10 deletions(-) diff --git a/css/gamutable.css b/css/gamutable.css index 42a4cd8..b66d180 100644 --- a/css/gamutable.css +++ b/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; } diff --git a/css/gamutable.css.map b/css/gamutable.css.map index a90f913..82f55a1 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;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"]} \ 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;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 diff --git a/css/gamutable.scss b/css/gamutable.scss index f4f8b05..6083426 100644 --- a/css/gamutable.scss +++ b/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 { diff --git a/css/vue-next-select.css b/css/vue-next-select.css index bebae3a..614c960 100644 --- a/css/vue-next-select.css +++ b/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; } + diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js index 24ba2c5..2dc8e3e 100644 --- a/js/gamutable.es6.js +++ b/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,10 +434,13 @@ 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 (Tval.indexOf(valCol) === -1) { - Tval.push(valCol); + if (valCol) { + if (Tval.indexOf(valCol) === -1) { + Tval.push(valCol); + } } }); this.filtreCol.push(col); diff --git a/js/gamutable.js b/js/gamutable.js index 9027738..52106f5 100644 --- a/js/gamutable.js +++ b/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,13 +500,15 @@ 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 (Tval.indexOf(valCol) === -1) { - Tval.push(valCol); + if (valCol) { + if (Tval.indexOf(valCol) === -1) { + Tval.push(valCol); + } } }); diff --git a/js/vue-next-select.js b/js/vue-next-select.js index c48b61c..e59ee1d 100644 --- a/js/vue-next-select.js +++ b/js/vue-next-select.js @@ -1 +1,876 @@ -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"],setup:(l,a)=>({dataAttrs:e.inject("dataAttrs"),handleClick:(e,l)=>{a.emit("click",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.handleClick(e,a),class:["vue-dropdown-item",{selected:a.selected}]},[e.renderSlot(l.$slots,"default",{option:a},(()=>[e.createVNode("span",null,e.toDisplayString(a.label),1)]))],10,["onClick"])):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)),d=(e,l,{max:a,valueBy:t})=>u(e,l,{valueBy:t})||e.length>=a?e:e.concat(l),r=(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}))),s=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 c={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]},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,min:c,max:p,options:v}=(l=>({trackBy:s(e.toRef(l,"trackBy")),labelBy:s(e.toRef(l,"labelBy")),valueBy:s(e.toRef(l,"valueBy")),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),h=e.ref(),m=e.ref(),g=e.ref(!1);e.watch((()=>g.value),(()=>{g.value?(a.emit("opened"),l.searchable?(m.value&&m.value._.refs.input!==document.activeElement&&m.value._.refs.input.focus(),a.emit("search:focus")):h.value.focus()):(l.searchable?(m.value&&m.value._.refs.input===document.activeElement&&m.value._.refs.input.blur(),l.clearOnClose&&F(),a.emit("search:blur")):h.value.blur(),a.emit("closed"))}));const f=()=>{l.disabled||(g.value=!0)},y=()=>{g.value=!1};e.watch((()=>l.disabled),(()=>y()));const b=e.ref(),B=(V=b,I=()=>l.modelValue,w=e.ref("0"),k=function(){e.nextTick((function(){V.value&&(w.value=window.getComputedStyle(V.value).height)}))},e.watch(I,k),e.onMounted(k),w);var V,I,w,k;const M=e.computed((()=>l.searchable&&l.multiple&&l.taggable?"22px":"0px")),N=e.computed((()=>parseFloat(B.value)+parseFloat(M.value)+"px")),C=e.ref(""),S=e.ref([]),x=()=>{if(l.multiple){if(!1===Array.isArray(l.modelValue))return!1;if(S.value.length!==l.modelValue.length)return!1;if(Object.keys(S.value).some((e=>S.value[e]!==i(v.value,l.modelValue[e],{valueBy:n.value}))))return!1}else{if(0===S.value.length&&l.modelValue!==l.emptyModelValue)return!1;if(1===S.value.length&&l.modelValue===l.emptyModelValue)return!1;if(S.value[0]!==i(v.value,l.modelValue,{valueBy:n.value}))return!1}return!0},D=()=>{if(x())return;S.value=[];const e=l.multiple?l.modelValue:l.modelValue===l.emptyModelValue?[]:[l.modelValue];for(const l of e){const e=i(v.value,l,{valueBy:n.value});!1!==u(v.value,e,{valueBy:n.value})&&(S.value=d(S.value,e,{max:1/0,valueBy:n.value}))}};D(),e.watch((()=>l.modelValue),(()=>D()),{deep:!0});e.watch((()=>S),(()=>(()=>{if(x())return;const e=S.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((()=>v.value),(()=>{const e=new Set(S.value.map((e=>n.value(e))));S.value=v.value.filter((l=>e.has(n.value(l))))}),{deep:!0});const F=()=>{m.value._.refs.input.value="",m.value._.refs.input.dispatchEvent(new Event("input")),m.value._.refs.input.dispatchEvent(new Event("change"))},O=e.computed((()=>{const e=new Set(S.value.map((e=>n.value(e)))),a=null!==l.visibleOptions?new Set(l.visibleOptions.map((e=>n.value(e)))):new Set(v.value.map((e=>n.value(e))));return v.value.map((u=>({key:t.value(u),label:o.value(u),selected:e.has(n.value(u)),visible:a.has(n.value(u)),hidden:!!l.hideSelected&&e.has(n.value(u)),originalOption:u})))})),A=e.computed((()=>({"data-is-focusing":g.value,"data-visible-length":O.value.filter((e=>e.visible&&!1===e.hidden)).length,"data-not-selected-length":v.value.length-O.value.filter((e=>e.selected)).length,"data-selected-length":O.value.filter((e=>e.selected)).length,"data-addable":O.value.filter((e=>e.selected)).lengthe.selected)).length>c.value,"data-total-length":v.value.length,"data-multiple":l.multiple})));e.provide("dataAttrs",A);const T=e.computed((()=>{const e=O.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:g,wrapper:h,input:m,focus:f,blur:y,toggle:()=>{g.value?y():f()},header:b,headerAndInputHeight:N,searchingInputValue:C,handleInputForInput:e=>{a.emit("search:input",e)},handleChangeForInput:e=>{a.emit("search:change",e)},handleFocusForInput:e=>{f()},handleBlurForInput:e=>{y()},optionsWithInfo:O,addOrRemoveOption:(e,t)=>{if(!l.disabled){if(t=t.originalOption,u(S.value,t,{valueBy:n.value}))S.value=r(S.value,t,{min:c.value,valueBy:n.value}),a.emit("removed",t);else{if(!l.multiple){const e=S.value[0];S.value=r(S.value,S.value[0],{min:0,valueBy:n.value}),a.emit("removed",e)}S.value=d(S.value,t,{max:p.value,valueBy:n.value}),a.emit("selected",t)}!0===l.closeOnSelect&&(g.value=!1),!0===l.clearOnSelect&&C.value&&F()}},dataAttrs:A,innerPlaceholder:T}},components:{VInput:l,VTags:t,VDropdown:o},__VERSION__:"1.2.1"};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),B=e.createVNode("div",null,null,-1),V=e.createVNode("div",null,null,-1);return c.render=function(l,a,t,o,n,u){const i=e.resolveComponent("v-tags"),d=e.resolveComponent("v-input"),r=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[9]||(a[9]=(...e)=>l.focus&&l.focus(...e)),onBlur:a[10]||(a[10]=()=>!l.searchable&&l.blur())},l.dataAttrs),[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(d,{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(d,{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,B,V],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(r,{modelValue:l.optionsWithInfo,"onUpdate:modelValue":a[8]||(a[8]=e=>l.optionsWithInfo=e),onClick:l.addOrRemoveOption,"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","onClick","header-height"]),[[e.vShow,l.isFocusing]])],16,["tabindex"])},c.__file="src/index.vue",c}(Vue); +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));