vue-sug
Version:
handle your input , handle your suggests
17 lines • 6.72 kB
JavaScript
;Object.defineProperty(exports,'__esModule',{value:!0});var script={data:function data(){return{search:''}},props:{suggests:{type:Array,"default":function _default(){return[{sugTitle:'FirstItem',sugDesc:'description 1',sugStatus:'status1'},{sugTitle:'SecondItem',sugDesc:'description 2',sugStatus:'status2'},{sugTitle:'ThirdItem',sugDesc:'description 2',sugStatus:'status3'}]}},color:{type:String,"default":'gray'},bgColor:{type:String,"default":'silver'},startAt:{type:Number,"default":3},placeHolder:{type:String,"default":'Enter what you want'},iconClass:{type:String,"default":'fa fa-search'},block:{type:Boolean,"default":!0}},methods:{onClick:function onClick(event){this.$emit("click",event)},atInput:function atInput(event){this.search=event.target.value;this.$emit("input",event.target.value)},itemClick:function itemClick(index){this.$emit("itemClick",index)}}};function normalizeComponent(template,style,script,scopeId,isFunctionalTemplate,moduleIdentifier,shadowMode,createInjector,createInjectorSSR,createInjectorShadow){if(typeof shadowMode!=='boolean'){createInjectorSSR=createInjector;createInjector=shadowMode;shadowMode=!1}
var options=typeof script==='function'?script.options:script;if(template&&template.render){options.render=template.render;options.staticRenderFns=template.staticRenderFns;options._compiled=!0;if(isFunctionalTemplate){options.functional=!0}}
if(scopeId){options._scopeId=scopeId}
var hook;if(moduleIdentifier){hook=function hook(context){context=context||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext;if(!context&&typeof __VUE_SSR_CONTEXT__!=='undefined'){context=__VUE_SSR_CONTEXT__}
if(style){style.call(this,createInjectorSSR(context))}
if(context&&context._registeredComponents){context._registeredComponents.add(moduleIdentifier)}};options._ssrRegister=hook}else if(style){hook=shadowMode?function(context){style.call(this,createInjectorShadow(context,this.$root.$options.shadowRoot))}:function(context){style.call(this,createInjector(context))}}
if(hook){if(options.functional){var originalRender=options.render;options.render=function renderWithStyleInjection(h,context){hook.call(context);return originalRender(h,context)}}else{var existing=options.beforeCreate;options.beforeCreate=existing?[].concat(existing,hook):[hook]}}
return script}
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;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){code+='\n/*# sourceURL='+css.map.sources[0]+' */';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);if(HEAD===undefined){HEAD=document.head||document.getElementsByTagName('head')[0]}
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 __vue_script__=script;var __vue_render__=function __vue_render__(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{},[_c('div',{staticClass:"input-group"},[_c('div',{staticClass:"input-group-prepend",staticStyle:{"cursor":"pointer"},on:{"click":_vm.onClick}},[_c('i',{staticClass:" pr-3 pl-3 input-group-text p-1","class":_vm.iconClass,style:{'color':_vm.color,'background':_vm.bgColor}})]),_vm._v(" "),_c('input',{staticClass:"form-control",style:{'color':_vm.color,'background':_vm.bgColor},attrs:{"type":"text","placeholder":_vm.placeHolder,"name":"","id":""},on:{"input":_vm.atInput}}),_vm._v(" "),_vm.search.length>_vm.startAt?_c('div',{staticClass:" sug bg-light animated fadeIn",staticStyle:{"min-height":"100px"}},[_c('div',{staticClass:"mt-3",staticStyle:{"padding":"10px"}},[Array.isArray(_vm.suggests)&&_vm.suggests.length!=0?_c('div',_vm._l(_vm.suggests,function(s,index){return _c('div',{key:s+index,staticStyle:{"cursor":"pointer"},on:{"click":function click($event){return _vm.itemClick(index)}}},[_vm._v("\r\n "+_vm._s(s.sugTitle)+"\r\n "),_c('small',{staticClass:"mt-2",staticStyle:{"float":"right","color":"gray"}},[_vm._v(_vm._s(s.sugStatus)+" ")]),_vm._v(" "),_c('p',[_c('small',{staticStyle:{"color":"gray"}},[_vm._v("/ "+_vm._s(s.sugDesc)+" ")])]),_vm._v(" "),_c('hr')])}),0):_c('div',[_vm.status=='waiting'?_c('i',{staticClass:"fa fa-circle-o-notch fa-spin",staticStyle:{"position":"absolute","right":"45%","top":"35%"}}):_c('div',{staticStyle:{"text-align":"center"}},[_c('p',[_vm._v(_vm._s(_vm.notFound))])])])])]):_vm._e()])])};var __vue_staticRenderFns__=[];var __vue_inject_styles__=function __vue_inject_styles__(inject){if(!inject)return;inject("data-v-175dc528_0",{source:"@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);@import url(https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css);@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css);.sug[data-v-175dc528]{position:absolute;margin-top:45px;width:100%;background:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border:1px #fff solid;z-index:500}",map:undefined,media:undefined})};var __vue_scope_id__="data-v-175dc528";var __vue_module_identifier__=undefined;var __vue_is_functional_template__=!1;var __vue_component__=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,createInjector,undefined,undefined);function install(Vue){if(install.installed)return;install.installed=!0;Vue.component("vue-sug",__vue_component__)}
var vueSug=install;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)}
var vueSuggestion=__vue_component__;exports.default=vueSug;exports.install=install;exports.vueSuggestion=vueSuggestion