jiku-ui/lib/autocomplete.js

A Component Library for Vue.js.

module.exports=function(e){var t={};function i(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(n,o,function(t){return e[t]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=84)}({0:function(e,t,i){"use strict";function n(e,t,i,n,o,s,r,u){var l,a="function"==typeof e?e.options:e;if(t&&(a.render=t,a.staticRenderFns=i,a._compiled=!0),n&&(a.functional=!0),s&&(a._scopeId="data-v-"+s),r?(l=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__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},a._ssrRegister=l):o&&(l=u?function(){o.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(a.functional){a._injectStyles=l;var c=a.render;a.render=function(e,t){return l.call(t),c(e,t)}}else{var p=a.beforeCreate;a.beforeCreate=p?[].concat(p,l):[l]}return{exports:e,options:a}}i.d(t,"a",(function(){return n}))},10:function(e,t){e.exports=require("jiku-ui/lib/mixins/migrating")},11:function(e,t){e.exports=require("jiku-ui/lib/input")},12:function(e,t){e.exports=require("jiku-ui/lib/utils/clickoutside")},13:function(e,t){e.exports=require("jiku-ui/lib/scrollbar")},17:function(e,t){e.exports=require("throttle-debounce/debounce")},23:function(e,t){e.exports=require("jiku-ui/lib/mixins/focus")},3:function(e,t){e.exports=require("jiku-ui/lib/utils/util")},4:function(e,t){e.exports=require("jiku-ui/lib/mixins/emitter")},5:function(e,t){e.exports=require("jiku-ui/lib/utils/vue-popper")},84:function(e,t,i){"use strict";i.r(t);var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.close,expression:"close"}],staticClass:"hn-autocomplete",attrs:{"aria-haspopup":"listbox",role:"combobox","aria-expanded":e.suggestionVisible,"aria-owns":e.id}},[i("hn-input",e._b({ref:"input",on:{input:e.handleChange,focus:e.handleFocus,blur:e.handleBlur,clear:e.handleClear},nativeOn:{keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.highlight(e.highlightedIndex-1))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.highlight(e.highlightedIndex+1))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.handleKeyEnter(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"tab",9,t.key,"Tab")?null:e.close(t)}]}},"hn-input",[e.$props,e.$attrs],!1),[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e(),e.$slots.prefix?i("template",{slot:"prefix"},[e._t("prefix")],2):e._e(),e.$slots.suffix?i("template",{slot:"suffix"},[e._t("suffix")],2):e._e()],2),i("hn-autocomplete-suggestions",{ref:"suggestions",class:[e.popperClass?e.popperClass:""],attrs:{"visible-arrow":"","popper-options":e.popperOptions,"append-to-body":e.popperAppendToBody,placement:e.placement,id:e.id}},e._l(e.suggestions,(function(t,n){return i("li",{key:n,class:{highlighted:e.highlightedIndex===n},attrs:{id:e.id+"-item-"+n,role:"option","aria-selected":e.highlightedIndex===n},on:{click:function(i){return e.select(t)}}},[e._t("default",[e._v("\n        "+e._s(t[e.valueKey])+"\n      ")],{item:t})],2)})),0)],1)};n._withStripped=!0;var o=i(17),s=i.n(o),r=i(11),u=i.n(r),l=i(12),a=i.n(l),c=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"hn-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"hn-autocomplete-suggestion hn-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[i("hn-scrollbar",{attrs:{tag:"ul","wrap-class":"hn-autocomplete-suggestion__wrap","view-class":"hn-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?i("li",[i("i",{staticClass:"hn-icon-loading"})]):e._t("default")],2)],1)])};c._withStripped=!0;var p=i(5),h=i.n(p),d=i(4),g=i.n(d),f=i(13),m={components:{HnScrollbar:i.n(f).a},mixins:[h.a,g.a],componentName:"HnAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("HnAutocomplete","item-click",e)}},updated:function(){var e=this;this.$nextTick((function(t){e.popperJS&&e.updatePopper()}))},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".hn-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var e=this;this.$on("visible",(function(t,i){e.dropdownWidth=i+"px",e.showPopper=t}))}},b=i(0),v=Object(b.a)(m,c,[],!1,null,null,null);v.options.__file="packages/autocomplete/src/autocomplete-suggestions.vue";var x=v.exports,y=i(10),_=i.n(y),$=i(3),S=i(23),k=i.n(S),w={name:"HnAutocomplete",mixins:[g.a,k()("input"),_.a],inheritAttrs:!1,componentName:"HnAutocomplete",components:{HnInput:u.a,HnAutocompleteSuggestions:x},directives:{Clickoutside:a.a},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0},highlightFirstItem:{type:Boolean,default:!1}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&e.length>0||this.loading)&&this.activated},id:function(){return"hn-autocomplete-"+Object($.generateId)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("HnAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,(function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?(t.suggestions=e,t.highlightedIndex=t.highlightFirstItem?0:-1):console.error("[Heiner Error][Autocomplete]autocomplete suggestions must be an array"))})))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex<this.suggestions.length?(e.preventDefault(),this.select(this.suggestions[this.highlightedIndex])):this.selectWhenUnmatched&&(this.$emit("select",{value:this.value}),this.$nextTick((function(e){t.suggestions=[],t.highlightedIndex=-1})))},select:function(e){var t=this;this.$emit("input",e[this.valueKey]),this.$emit("select",e),this.$nextTick((function(e){t.suggestions=[],t.highlightedIndex=-1}))},highlight:function(e){if(this.suggestionVisible&&!this.loading)if(e<0)this.highlightedIndex=-1;else{e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".hn-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".hn-autocomplete-suggestion__list li")[e],n=t.scrollTop,o=i.offsetTop;o+i.scrollHeight>n+t.clientHeight&&(t.scrollTop+=i.scrollHeight),o<n&&(t.scrollTop-=i.scrollHeight),this.highlightedIndex=e,this.getInput().setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)}},getInput:function(){return this.$refs.input.getInput()}},mounted:function(){var e=this;this.debouncedGetData=s()(this.debounce,this.getData),this.$on("item-click",(function(t){e.select(t)}));var t=this.getInput();t.setAttribute("role","textbox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-controls","id"),t.setAttribute("aria-activedescendant",this.id+"-item-"+this.highlightedIndex)},beforeDestroy:function(){this.$refs.suggestions.$destroy()}},I=Object(b.a)(w,n,[],!1,null,null,null);I.options.__file="packages/autocomplete/src/autocomplete.vue";var A=I.exports;A.install=function(e){e.component(A.name,A)};t.default=A}}).default;