vue-choice/dist/vue-choice.umd.js

a vue select/choice component that strives for native-select compatibility

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VueChoice=t()}(this,(function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}function n(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,n){if(e){if("string"==typeof e)return t(e,n);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?t(e,n):void 0}}(e))){var n=0,i=function(){};return{s:i,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,o,s=!0,c=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return s=e.done,e},e:function(e){c=!0,o=e},f:function(){try{s||null==r.return||r.return()}finally{if(c)throw o}}}}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var i,r=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e,t){!function(e){var t=[],n=void 0;function i(e,t,n){return e.addEventListener(t,n,!1),{destroy:function(){return e.removeEventListener(t,n,!1)}}}function r(e,r){var s=r.value,c=r.modifiers;o(e),n||(n=i(document.documentElement,"click",(function(e){t.forEach((function(t){return t.check(e)}))}))),setTimeout((function(){t.push(c.static?function(e,t){return{el:e,check:function(n){e.contains(n.target)||t(n)},destroy:function(){}}}(e,s):function(e,t){var n=!1,r=i(e,"mouseenter",(function(){n=!0})),o=i(e,"mouseleave",(function(){n=!1}));return{el:e,check:function(e){n||t(e)},destroy:function(){r.destroy(),o.destroy()}}}(e,s))}),0)}function o(e){for(var i=t.length-1;i>=0;)t[i].el===e&&(t[i].destroy(),t.splice(i,1)),i-=1;0===t.length&&n&&(n.destroy(),n=null)}var s={bind:r,unbind:o,update:function(e,t){t.value!==t.oldValue&&r(e,t)}},c={directives:{"on-click-outside":s}};e.directive=s,e.mixin=c,Object.defineProperty(e,"__esModule",{value:!0})}(t)})),o=(i=r)&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i,s=function(e,t){var n,i,r,o,s=0;return function(){n=this,i=arguments;var e=new Date-s;return o||(e>=t?c():o=setTimeout(c,t-e)),r};function c(){o=0,s=+new Date,r=e.apply(n,i),n=null,i=null}};var c=0;function u(e){return"function"==typeof e}function a(t){return"boolean"==typeof t||"object"===e(t)&&null!==t&&"boolean"==typeof t.valueOf()}function l(e,t){return("string"==typeof(n=e)||n instanceof String)&&-1!==e.toLowerCase().indexOf(t);var n}var d=function(e,t){return!e||l(t.label,e)||l(t.value,e)||l(t.text,e)},h=function(e,t){return 0===t.label.toLowerCase().indexOf(e)||0===t.text.toLowerCase().indexOf(e)};return function(e,t,n,i,r,o,s,c,u,a){"boolean"!=typeof s&&(u=c,c=s,s=!1);const l="function"==typeof n?n.options:n;let d;if(e&&e.render&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,r&&(l.functional=!0)),i&&(l._scopeId=i),o?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,u(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},l._ssrRegister=d):t&&(d=s?function(e){t.call(this,a(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,c(e))}),d)if(l.functional){const e=l.render;l.render=function(t,n){return d.call(n),e(t,n)}}else{const e=l.beforeCreate;l.beforeCreate=e?[].concat(e,d):[d]}return n}({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"on-click-outside",rawName:"v-on-click-outside",value:e.dismissSelect,expression:"dismissSelect"}],staticClass:"sg-choice",class:e.selectClasses,attrs:{id:e.componentId.wrapper},on:{keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.closeFinder(t)}}},[n("div",{ref:"current",staticClass:"sg-choice-current",attrs:{tabindex:"0"},on:{click:function(t){return t.preventDefault(),e.toggleFinder()},keydown:e.typeSelect}},[e._t("current-choice",[e.currentChoice?n(e.renderer,{tag:"component",attrs:{choice:e.currentChoice}}):e._e()],{choice:e.currentChoice}),e._v(" "),e._t("no-result",[e.currentChoice?e._e():n("div",{staticClass:"sg-choice-default"},[e._v("\n        "+e._s(e.texts.noSelection)+"\n      ")])]),e._v(" "),e.isDismissable?n("div",{staticClass:"sg-choice-decorator sg-choice-dismiss",style:e.decoratorStyle,on:{click:function(t){return t.preventDefault(),t.stopPropagation(),e.dismissChoice(t)}}},[n("i",[e._v("×")])]):n("div",{staticClass:"sg-choice-decorator sg-choice-caret",style:e.decoratorStyle},[n("i",[e._v("▼")])])],2),e._v(" "),n("transition",{attrs:{name:e.finderBelow?"fade-down":"fade-up"},on:{"after-enter":e.updateFinderPosition}},[n("div",{directives:[{name:"show",rawName:"v-show",value:null===e.showFinder||e.showFinder,expression:"showFinder === null ? true : showFinder"}],ref:"finder",staticClass:"sg-choice-finder",style:{"max-height":e.maxFinderSize+"px"}},[e.filter&&e.choices.length>e.searchThreshold?n("div",{staticClass:"sg-choice-search"},[n("label",{staticClass:"sr-only",attrs:{for:e.componentId.search}},[e._v(e._s(e.texts.searchLabel))]),e._v(" "),n("input",{directives:[{name:"model",rawName:"v-model",value:e.currentSearch,expression:"currentSearch"}],ref:"search",staticClass:"sg-choice-search-input",attrs:{id:e.componentId.search,type:"search",placeholder:e.texts.searchPlaceholder},domProps:{value:e.currentSearch},on:{keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.focusChoices(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.preventDefault(),e.maybeSelect(t))}],input:function(t){t.target.composing||(e.currentSearch=t.target.value)}}}),e._v(" "),n("span",{staticClass:"sg-choice-search-count"},[e._v(e._s(e.availableChoices.length))])]):e._e(),e._v(" "),e.availableChoices.length>0?n("ol",{ref:"choices",staticClass:"sg-choice-choices",on:{keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.prevChoice(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.nextChoice(t))}]}},e._l(e.availableChoices,(function(t,i){return n("li",{key:i,attrs:{"data-value":t.value,tabindex:"0"},on:{click:function(n){return e.select(t)},keydown:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"enter",13,n.key,"Enter")?null:e.select(t)}}},[e._t("choice",[n(e.renderer,{tag:"component",attrs:{choice:t,index:i}})],{choice:t})],2)})),0):n("p",{staticClass:"sg-choice-no-results"},[e._v("\n        "+e._s(e.texts.noResult)+"\n      ")])])])],1)},staticRenderFns:[]},void 0,{name:"SgChoice",mixins:[o.mixin],props:{id:{type:String,default:function(){return"sg-choice-".concat(c++)}},texts:{type:Object,default:function(){return{searchPlaceholder:"Suche nach Einträgen",searchLabel:"Suche",noResult:"Keine Ergebnisse gefunden 😔",noSelection:"Keine Auswahl"}}},renderer:{type:[Object,String],default:null},defaultValue:[String,Number],defaultChoice:Object,value:{type:[Number,String],default:null},choices:{type:Array,required:!0},filter:{type:[Boolean,Function],default:function(){return d}},searchThreshold:{type:Number,default:5}},data:function(){return{currentValue:null,showFinder:null,currentSearch:"",typedSearch:"",typedTimer:null,size:0,finderSize:0,maxFinderSize:null,resizeListener:null,scrollListener:null,finderBelow:!0}},computed:{selectClasses:function(){return{"sg-choice-open":this.showFinder,"sg-choice-bottom":this.finderBelow,"sg-choice-top":!this.finderBelow}},availableChoices:function(){var e=this.currentSearch.toLowerCase(),t=!1===this.filter||u(this.filter)?this.filter:d;return u(t)?this.choices.filter((function(n){return t(e,n,d)})):this.choices},componentId:function(){return{wrapper:"".concat(this.id,"-wrapper"),search:"".concat(this.id,"-search")}},currentChoice:function(){var e=this;return function(e,t){var i,r=n(e);try{for(r.s();!(i=r.n()).done;){var o=i.value;if(t(o))return o}}catch(e){r.e(e)}finally{r.f()}}(this.choices,(function(t){return t.value===e.currentValue}))||this.defaultChoice},currentChoiceIndex:function(){var e=this;return function(e,t){var i,r=0,o=n(e);try{for(o.s();!(i=o.n()).done;){if(t(i.value))return r;r++}}catch(e){o.e(e)}finally{o.f()}return-1}(this.choices,(function(t){return t.value===e.currentValue}))},isDismissable:function(){return this.currentChoice&&null!==this.defaultValue&&this.currentChoice!==this.defaultChoice},decoratorStyle:function(){return{minHeight:"calc(".concat(this.size,"px - 1rem)")}}},watch:{currentValue:function(e){var t=this;setTimeout((function(){t.$emit("input",e),t.$emit("choice",t.currentChoice),t.updateSize()}),0)}},created:function(){this.currentValue=this.value||null,this.resizeListener=s(this.updateSize,250),this.scrollListener=s(this.updateFinderPosition,250)},mounted:function(){this.updateSize(),this.updateFinderPosition(),window.addEventListener("resize",this.resizeListener),window.addEventListener("scroll",this.scrollListener)},beforeDestroy:function(){window.removeEventListener("resize",this.resizeListener),window.removeEventListener("scroll",this.scrollListener)},methods:{toggleFinder:function(){var e=this,t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.showFinder,r=null===n?!this.showFinder:n;i!==r&&(this.showFinder=r,this.currentSearch="",t&&r&&this.$refs.search?setTimeout((function(){return e.$refs.search.focus()}),0):t&&r&&this.$refs.choices.firstChild?setTimeout((function(){return e.$refs.choices.firstChild.focus()}),0):t&&!r&&this.$refs.current&&setTimeout((function(){return e.$refs.current.focus()}),0))},openFinder:function(e){this.toggleFinder(!a(e)||e,!0)},closeFinder:function(e){this.toggleFinder(!a(e)||e,!1)},maybeSelect:function(){1===this.availableChoices.length&&(this.currentValue=this.availableChoices[0].value,this.closeFinder())},typeSelect:function(e){var t=this;if(!this.showFinder){var n=this.currentChoiceIndex;switch(clearTimeout(this.typedTimer),this.typedTimer=setTimeout((function(){t.typedSearch=""}),500),e.keyCode){case 13:return void this.toggleFinder();case 27:return void this.dismissChoice();case 38:return e.preventDefault(),void(n>0&&(this.currentValue=this.choices[n-1].value));case 40:return e.preventDefault(),void(n<this.choices.length-1&&(this.currentValue=this.choices[n+1].value))}if(e.key&&1===e.key.length){this.typedSearch+=e.key;var i=this.typedSearch.toLowerCase(),r=this.choices.filter(h.bind(null,i))[0];r&&(this.currentValue=r.value)}}},select:function(e){e&&(this.currentValue=e.value),this.closeFinder()},focusChoices:function(){this.$refs.choices.firstChild.focus()},nextChoice:function(e){(e.target.nextElementSibling||e.target.parentNode.firstChild).focus()},prevChoice:function(e){(e.target.previousElementSibling||e.target.parentNode.lastChild).focus()},dismissChoice:function(){this.currentValue=this.defaultValue},dismissSelect:function(){this.closeFinder(!1)},updateSize:function(){this.size=this.$refs.current.clientHeight},updateFinderPosition:function(){var e=this.$refs,t=e.current,n=e.finder;if(n&&t){n.offsetHeight>0&&(this.finderSize=n.offsetHeight);var i=this.finderSize||500,r=t.getBoundingClientRect(),o=r.top,s=window.innerHeight-r.bottom,c=i+30;this.finderBelow=s>c||!(o>c)&&s>o,this.maxFinderSize=Math.max(s,o)-30,null===this.showFinder&&(this.showFinder=!1)}}}},void 0,!1,void 0,!1,void 0,void 0,void 0)}));
//# sourceMappingURL=vue-choice.umd.js.map