UNPKG

ss-select

Version:

Stylable searchable vue select component

2 lines 14.8 kB
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["ss-select"]=t(require("vue")):e["ss-select"]=t(e["Vue"])})("undefined"!==typeof self?self:this,function(e){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"02f9":function(e,t,n){"use strict";n.r(t);var i=n("48d9"),r=n.n(i);for(var s in i)"default"!==s&&function(e){n.d(t,e,function(){return i[e]})}(s);t["default"]=r.a},"090a":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=r(n("bf09"));function r(e){return e&&e.__esModule?e:{default:e}}var s={name:"ss-select-toggle",mixins:[i.default],mounted:function(){var e=this;this.$el.addEventListener("click",function(){return e.busEmit("toggleOpen")})},inject:["eventBusId"]};t.default=s},"0a2a":function(e,t,n){"use strict";var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],attrs:{type:"text",autofocus:"",autocomplete:"off"},domProps:{value:e.query},on:{input:[function(t){t.target.composing||(e.query=t.target.value)},e.onInput]}})},r=[];n.d(t,"a",function(){return i}),n.d(t,"b",function(){return r})},"0f1a":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i={methods:{nextAvailableOptionIndex:function(e,t){var n=this,i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(e.every(function(e){return n.disabled(e)}))return null;var r=this.nextIndex(e,t,i);return this.disabled(e[r])?this.nextAvailableOptionIndex(e,r,i):r},nextIndex:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return n&&0==t?this.lastIndex(e):n?--t:t==this.lastIndex(e)?0:t+1},lastIndex:function(e){return e.length-1}}},r=i;t.default=r},"1eb2":function(e,t,n){"use strict";var i;"undefined"!==typeof window&&(n("f6fd"),(i=window.document.currentScript)&&(i=i.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=i[1]))},2877:function(e,t,n){"use strict";function i(e,t,n,i,r,s,u,o){var l,c="function"===typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),u?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(u)},c._ssrRegister=l):r&&(l=o?function(){r.call(this,this.$root.$options.shadowRoot)}:r),l)if(c.functional){c._injectStyles=l;var d=c.render;c.render=function(e,t){return l.call(t),d(e,t)}}else{var a=c.beforeCreate;c.beforeCreate=a?[].concat(a,l):[l]}return{exports:e,options:c}}n.d(t,"a",function(){return i})},"2af9":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"SsSelect",{enumerable:!0,get:function(){return i.default}}),Object.defineProperty(t,"SsSelectOption",{enumerable:!0,get:function(){return r.default}}),Object.defineProperty(t,"SsSelectToggle",{enumerable:!0,get:function(){return s.default}}),Object.defineProperty(t,"SsSelectSearchInput",{enumerable:!0,get:function(){return u.default}}),t.SsSelectComponents=t.default=void 0;var i=o(n("524c")),r=o(n("a85f")),s=o(n("b358")),u=o(n("80db"));function o(e){return e&&e.__esModule?e:{default:e}}var l={SsSelect:i.default,SsSelectOption:r.default,SsSelectToggle:s.default,SsSelectSearchInput:u.default};t.SsSelectComponents=l;var c={install:function(e){Object.keys(l).forEach(function(t){e.component(t,l[t])})}},d=c;t.default=d},"30ab":function(e,t,n){"use strict";var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._t("default")],2)},r=[];n.d(t,"a",function(){return i}),n.d(t,"b",function(){return r})},"3ea9":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i={methods:{get:function(e,t){return e instanceof Object?t.split(".").reduce(function(e,t){return void 0===e?null:e[t]},e):null},contains:function(e,t,n){var i=this;return e.findIndex(function(e){return i.get(e,n)==i.get(t,n)})>-1}}},r=i;t.default=r},"48d9":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=u(n("bf09")),r=u(n("3ea9")),s=u(n("0f1a"));function u(e){return e&&e.__esModule?e:{default:e}}var o=27,l=13,c=38,d=40,a={name:"ss-select",mixins:[i.default,r.default,s.default],props:{options:{type:Array,required:!0},value:{required:!1,default:null},trackBy:{type:String,required:!0},searchBy:{type:String,required:!1,default:null},disableBy:{type:String,required:!1,default:"disabled"},multiple:{default:!1},hideSelected:{type:Boolean,default:!1},disableSelected:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},max:{type:Number,default:null}},data:function(){return{isOpen:!1,selectedOption:this.multiple?[]:null,optionsMatchingSearch:this.options,eventBusId:Math.random().toString(36).substring(7),pointerIndex:null}},created:function(){var e=this;this.value&&(this.selectedOption=this.value),this.$watch("value",function(){return e.selectedOption=e.value}),this.setPointerIndexToOrNextEnabled(0),this.$watch("options",function(){return e.optionsMatchingSearch=e.options}),this.$watch("filteredOptions",function(){return e.setPointerIndexToOrNextEnabled(0)}),this.$watch("isOpen",function(){e.$emit(e.isOpen?"open":"close"),e.busEmit(e.isOpen?"open":"close")})},mounted:function(){this.$el.style.outline="none",this.applyListeners(),this.busEmit("selectMounted")},provide:function(){return{selectedOption:this.selectedOption,eventBusId:this.eventBusId,multiple:this.multiple,selected:this.selected,disabled:this.disabled}},render:function(){return this.$scopedSlots.default({options:this.options,filteredOptions:this.filteredOptions,isOpen:this.isOpen,selectedOption:this.selectedOption,selectedOptions:this.selectedOption,pointerIndex:this.pointerIndex,$get:this.get,$selected:this.selected,$disabled:this.disabled,$unselect:this.deselect,$deselect:this.deselect,$reset:this.reset,$open:this.open})},computed:{filteredOptions:function(){var e=this;if(this.hideSelected&&this.multiple){var t=this.selectedOption.map(function(t){return t[e.trackBy]});return this.optionsMatchingSearch.filter(function(n){return!t.includes(n[e.trackBy])})}return this.optionsMatchingSearch}},methods:{open:function(){this.isOpen||(this.isOpen=!0)},selected:function(e){return this.multiple?this.contains(this.selectedOption,e,this.trackBy):this.get(this.selectedOption,this.trackBy)==this.get(e,this.trackBy)},disabled:function(e){return!!this.get(e,this.disableBy)||this.disableSelected&&this.selected(e)},deselect:function(e){var t=this;if(0!=this.multiple){var n=this.selectedOption.findIndex(function(n){return t.get(n,t.trackBy)==t.get(e,t.trackBy)});this.selectedOption.splice(n,1),this.$emit("input",this.selectedOption),this.$emit("change",this.selectedOption)}},reset:function(){this.selectedOption=this.multiple?[]:null,this.$emit("input",this.selectedOption),this.$emit("change",this.selectedOption)},applyListeners:function(){this.keyControl().clickOutside().toggleOpen().selectOptions().deselectOptions().hoverOverOptions().filterOptions()},keyControl:function(){var e=this;return this.$el.tabIndex=0,this.$el.addEventListener("keydown",function(t){var n=t.keyCode;[o,l,c,d].includes(n)&&(t.preventDefault(),e.onEscape(n).onEnter(n).onUpAndDown(n))},!1),this},clickOutside:function(){return document.addEventListener("click",this.closeOnClickOutside),this},closeOnClickOutside:function(e){this.$el.contains(e.target)||this.$el===e.target||(this.isOpen=!1)},toggleOpen:function(){var e=this;return this.busListen("toggleOpen",function(){return e.isOpen=!e.isOpen}),this},selectOptions:function(){var e=this;return this.busListen("optionSelected",function(t){if(e.multiple){if(null!==e.max&&e.selectedOption.length>=e.max)return;e.selectedOption.push(t)}else e.selectedOption=t;e.$emit("input",e.selectedOption),e.$emit("change",e.selectedOption),e.isOpen=!e.closeOnSelect}),this},deselectOptions:function(){var e=this;return this.busListen("optionDeselected",function(t){return e.deselect(t)}),this},hoverOverOptions:function(){var e=this;return this.busListen("optionHover",function(t){e.disabled(e.filteredOptions[t])||(e.pointerIndex=t,e.busEmit("pointerIndexChange",e.pointerIndex))}),this},filterOptions:function(){var e=this;return this.busListen("searchInput",function(t){if(null==e.searchBy)return e;e.optionsMatchingSearch=e.options.filter(function(n){return e.get(n,e.searchBy).toLowerCase().includes(t.toLowerCase())})}),this},onEscape:function(e){return e===o&&(this.isOpen=!1),this},onEnter:function(e){return e===l&&(this.disabled(this.filteredOptions[this.pointerIndex])||this.busEmit("optionSelected",this.filteredOptions[this.pointerIndex])),this},onUpAndDown:function(e){if(e===d&&(this.pointerIndex=this.nextAvailableOptionIndex(this.filteredOptions,this.pointerIndex)),e===c){var t=!0;this.pointerIndex=this.nextAvailableOptionIndex(this.filteredOptions,this.pointerIndex,t)}return this.busEmit("pointerIndexChange",this.pointerIndex),this},setPointerIndexToOrNextEnabled:function(e){this.disabled(this.filteredOptions[e])?this.pointerIndex=this.nextAvailableOptionIndex(this.filteredOptions,e):this.pointerIndex=e,this.busEmit("pointerIndexChange",this.pointerIndex)}},destroyed:function(){document.removeEventListener("click",this.closeOnClickOutside)}};t.default=a},"524c":function(e,t,n){"use strict";n.r(t);var i=n("02f9");for(var r in i)"default"!==r&&function(e){n.d(t,e,function(){return i[e]})}(r);var s,u,o=n("2877"),l=Object(o["a"])(i["default"],s,u,!1,null,null,null);t["default"]=l.exports},"80db":function(e,t,n){"use strict";n.r(t);var i=n("0a2a"),r=n("9483");for(var s in r)"default"!==s&&function(e){n.d(t,e,function(){return r[e]})}(s);var u=n("2877"),o=Object(u["a"])(r["default"],i["a"],i["b"],!1,null,null,null);t["default"]=o.exports},"8bbf":function(t,n){t.exports=e},"8d20":function(e,t,n){"use strict";n.r(t);var i=n("090a"),r=n.n(i);for(var s in i)"default"!==s&&function(e){n.d(t,e,function(){return i[e]})}(s);t["default"]=r.a},9483:function(e,t,n){"use strict";n.r(t);var i=n("eead"),r=n.n(i);for(var s in i)"default"!==s&&function(e){n.d(t,e,function(){return i[e]})}(s);t["default"]=r.a},a85f:function(e,t,n){"use strict";n.r(t);var i=n("30ab"),r=n("eeca");for(var s in r)"default"!==s&&function(e){n.d(t,e,function(){return r[e]})}(s);var u=n("2877"),o=Object(u["a"])(r["default"],i["a"],i["b"],!1,null,null,null);t["default"]=o.exports},b358:function(e,t,n){"use strict";n.r(t);var i=n("c6a4"),r=n("8d20");for(var s in r)"default"!==s&&function(e){n.d(t,e,function(){return r[e]})}(s);var u=n("2877"),o=Object(u["a"])(r["default"],i["a"],i["b"],!1,null,null,null);t["default"]=o.exports},bf09:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=r(n("8bbf"));function r(e){return e&&e.__esModule?e:{default:e}}var s=new i.default,u={methods:{busEmit:function(e,t){return s.$emit("".concat(e,"-").concat(this.eventBusId),t)},busListen:function(e,t){return s.$on("".concat(e,"-").concat(this.eventBusId),t)}}},o=u;t.default=o},c6a4:function(e,t,n){"use strict";var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._t("default")],2)},r=[];n.d(t,"a",function(){return i}),n.d(t,"b",function(){return r})},e9c6:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=s(n("bf09")),r=s(n("3ea9"));function s(e){return e&&e.__esModule?e:{default:e}}var u={name:"ss-select-option",mixins:[i.default,r.default],inject:["eventBusId","selectedOption","multiple","selected","disabled"],props:{value:{required:!0},index:{type:Number,required:!0}},mounted:function(){this.selectable().mouseOver().scrollIntoView()},methods:{selectable:function(){var e=this;return this.$el.addEventListener("click",function(){if(!e.disabled(e.value))return e.multiple&&e.selected(e.value)?e.busEmit("optionDeselected",e.value):void e.busEmit("optionSelected",e.value)}),this},mouseOver:function(){var e=this;return this.$el.addEventListener("mouseover",function(){return e.busEmit("optionHover",e.index)}),this},scrollIntoView:function(){var e=this;return this.busListen("pointerIndexChange",function(t){e.index===t&&e.$el.scrollIntoView({block:"nearest"})}),this}}};t.default=u},eead:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=r(n("bf09"));function r(e){return e&&e.__esModule?e:{default:e}}var s={name:"ss-select-search-input",mixins:[i.default],props:{value:{default:null},clearOnClose:{type:Boolean,default:!0}},data:function(){return{query:this.value||""}},mounted:function(){var e=this;this.busListen("selectMounted",function(){e.query.length&&e.onInput()}),this.busListen("open",function(){e.$nextTick(function(){return e.$el.focus()})}),this.busListen("close",function(){e.clearOnClose&&(e.query="",e.onInput())})},methods:{onInput:function(){this.$emit("input",this.query),this.busEmit("searchInput",this.query)}},inject:["eventBusId"]};t.default=s},eeca:function(e,t,n){"use strict";n.r(t);var i=n("e9c6"),r=n.n(i);for(var s in i)"default"!==s&&function(e){n.d(t,e,function(){return i[e]})}(s);t["default"]=r.a},f6fd:function(e,t){(function(e){var t="currentScript",n=e.getElementsByTagName("script");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(i){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(i.stack)||[!1])[1];for(e in n)if(n[e].src==t||"interactive"==n[e].readyState)return n[e];return null}}})})(document)},fb15:function(e,t,n){"use strict";n.r(t);n("1eb2");var i=n("2af9"),r=n.n(i);for(var s in i)"default"!==s&&function(e){n.d(t,e,function(){return i[e]})}(s);t["default"]=r.a}})}); //# sourceMappingURL=ss-select.umd.min.js.map