vue-custom-select
Version:
simple, minimalistic autocomplete select dropdown component for Vue apps for you!
292 lines (244 loc) • 10.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.CustomSelect = {}));
}(this, (function (exports) { 'use strict';
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
props: {
dataArray: {
type: Array,
'default': []
},
width: {
type: Number,
'default': 300
},
height: {
type: Number,
'default': 60
},
placeholder: {
type: String,
'default': 'Choose an option'
}
},
data: function data () {
return {
inputValue: '',
selectValue: null,
focused: false
}
},
computed: {
filteredOptions: function filteredOptions () {
var this$1 = this;
return this.dataArray.filter(function (option) {
if (option.text.toLowerCase().includes(this$1.inputValue.toLowerCase())) {
return option
}
})
}
},
watch: {
inputValue: function inputValue (value) {
if (!value) {
this.selectValue = null;
}
}
},
mounted: function mounted () {
document.documentElement.addEventListener('click', this.outsideClick, false);
},
beforeDestroy: function beforeDestroy () {
document.documentElement.removeEventListener('click', this.outsideClick, false);
},
methods: {
showOptions: function showOptions () {
this.inputValue = '';
this.focused = true;
},
hideOptions: function hideOptions () {
var this$1 = this;
this.$nextTick(function () {
this$1.focused = false;
});
},
selectOption: function selectOption (option) {
this.selectValue = option;
this.inputValue = option.text;
this.hideOptions();
},
outsideClick: function outsideClick (e) {
if (!this.$el.contains(e.target)) {
this.hideOptions();
}
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) {
return addStyle(id, style);
};
}
var HEAD = document.head || document.getElementsByTagName('head')[0];
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = {
ids: new Set(),
styles: []
});
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media) { style.element.setAttribute('media', css.media); }
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
} else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index]) { style.element.removeChild(nodes[index]); }
if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); }
}
}
}
var browser = createInjector;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"custom-select",style:({'width': (_vm.width + "px"), 'height': (_vm.height + "px")})},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],class:[{'is-options-open': _vm.focused}, 'select-input'],attrs:{"type":"text"},domProps:{"value":(_vm.inputValue)},on:{"focus":_vm.showOptions,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}}),_vm._v(" "),_c('span',{class:[{'is-focus': _vm.inputValue}, 'placeholder']},[_vm._v(_vm._s(_vm.placeholder))]),_vm._v(" "),_c('transition',{attrs:{"name":"fade","mode":"in-out"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.focused),expression:"focused"}],staticClass:"options"},_vm._l((_vm.filteredOptions),function(option,i){return _c('div',{key:i,staticClass:"select-item",on:{"click":function($event){return _vm.selectOption(option)}}},[_vm._v(_vm._s(option.text))])}),0)])],1)};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("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: undefined, media: undefined });
};
/* scoped */
var __vue_scope_id__ = "data-v-1b38217a";
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject SSR */
var component = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
browser,
undefined
);
function install(Vue) {
if (install.installed) { return; }
install.installed = true;
Vue.component("CustomSelect", component);
}
var plugin = {
install: install
};
var GlobalVue = null;
if (typeof window !== "undefined") {
GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
GlobalVue = global.vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
component.install = install;
exports.default = component;
Object.defineProperty(exports, '__esModule', { value: true });
})));