vue-custom-select
Version:
simple, minimalistic autocomplete select dropdown component for Vue apps for you!
2 lines (1 loc) • 5.43 kB
JavaScript
var CustomSelect=function(e){"use strict";function t(e,t,n,a,i,o,s,r,l,d){"boolean"!=typeof s&&(l=r,r=s,s=!1);var u="function"==typeof n?n.options:n;e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,i&&(u.functional=!0)),a&&(u._scopeId=a);var c;if(o?(c=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,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=c):t&&(c=s?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),c)if(u.functional){var p=u.render;u.render=function(e,t){return c.call(t),p(e,t)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return n}function n(e){return function(e,t){return a(e,t)}}function a(e,t){var n=r?t.media||"default":e,a=d[n]||(d[n]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",t.media&&a.element.setAttribute("media",t.media),l.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(i),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{var o=a.ids.size-1,s=document.createTextNode(i),u=a.element.childNodes;u[o]&&a.element.removeChild(u[o]),u.length?a.element.insertBefore(s,u[o]):a.element.appendChild(s)}}}function i(e){i.installed||(i.installed=!0,e.component("CustomSelect",u))}var o={props:{dataArray:{type:Array,default:[]},width:{type:Number,default:300},height:{type:Number,default:60},placeholder:{type:String,default:"Choose an option"}},data:function(){return{inputValue:"",selectValue:null,focused:!1}},computed:{filteredOptions:function(){var e=this;return this.dataArray.filter(function(t){if(t.text.toLowerCase().includes(e.inputValue.toLowerCase()))return t})}},watch:{inputValue:function(e){e||(this.selectValue=null)}},mounted:function(){document.documentElement.addEventListener("click",this.outsideClick,!1)},beforeDestroy:function(){document.documentElement.removeEventListener("click",this.outsideClick,!1)},methods:{showOptions:function(){this.inputValue="",this.focused=!0},hideOptions:function(){var e=this;this.$nextTick(function(){e.focused=!1})},selectOption:function(e){this.selectValue=e,this.inputValue=e.text,this.hideOptions()},outsideClick:function(e){this.$el.contains(e.target)||this.hideOptions()}}},s=t,r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),l=document.head||document.getElementsByTagName("head")[0],d={},u=s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"custom-select",style:{width:e.width+"px",height:e.height+"px"}},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.inputValue,expression:"inputValue"}],class:[{"is-options-open":e.focused},"select-input"],attrs:{type:"text"},domProps:{value:e.inputValue},on:{focus:e.showOptions,input:function(t){t.target.composing||(e.inputValue=t.target.value)}}}),e._v(" "),n("span",{class:[{"is-focus":e.inputValue},"placeholder"]},[e._v(e._s(e.placeholder))]),e._v(" "),n("transition",{attrs:{name:"fade",mode:"in-out"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.focused,expression:"focused"}],staticClass:"options"},e._l(e.filteredOptions,function(t,a){return n("div",{key:a,staticClass:"select-item",on:{click:function(n){return e.selectOption(t)}}},[e._v(e._s(t.text))])}),0)])],1)},staticRenderFns:[]},function(e){e&&e("data-v-1b38217a_0",{source:".custom-select[data-v-1b38217a]{position:relative;display:flex;align-items:center}.select-input[data-v-1b38217a]{border:1px solid rgba(0,0,0,.2);outline:0;padding:20px 15px 4px;border-radius:4px;transition:all .3s ease;z-index:1;width:100%;height:100%}.select-input[data-v-1b38217a]:focus,.select-input[data-v-1b38217a]:valid{outline:0}.select-input[data-v-1b38217a]:focus{border-color:#a4d8c2}.select-input:focus+.placeholder[data-v-1b38217a]{top:8px;font-size:12px;margin-top:0}.select-input.is-options-open[data-v-1b38217a]{border-radius:4px 4px 0 0;border-bottom-color:rgba(0,0,0,.2)}.placeholder[data-v-1b38217a]{position:absolute;left:15px;font-size:14px;color:#9299a2;top:50%;color:rgba(51,51,51,.54);pointer-events:none;transition:all .3s ease;margin-top:-12px;z-index:2}.placeholder.is-focus[data-v-1b38217a]{top:8px;font-size:12px;margin-top:0}.options[data-v-1b38217a]{width:100%;position:absolute;top:97%;background:#fff;border:1px solid rgba(0,0,0,.2);border-radius:0 0 4px 4px;max-height:50vh;overflow:auto;transition:all .3s ease}.select-item[data-v-1b38217a]{height:40px;line-height:40px;cursor:pointer;transition:all .3s ease;padding:0 15px}.select-item[data-v-1b38217a]:hover{background:#f4fbf8}.fade-enter-active[data-v-1b38217a],.fade-leave-active[data-v-1b38217a]{transition:all .4s ease}.fade-enter[data-v-1b38217a],.fade-leave-active[data-v-1b38217a]{opacity:0;will-change:opacity;transform:translateY(-30px)}",map:void 0,media:void 0})},o,"data-v-1b38217a",!1,void 0,n,void 0),c={install:i},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.vue),p&&p.use(c),u.install=i,e.default=u,e}({});