jiku-ui/lib/dropdown.js

A Component Library for Vue.js.

module.exports=function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=154)}({0:function(t,e,i){"use strict";function n(t,e,i,n,r,s,o,u){var l,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=i,d._compiled=!0),n&&(d.functional=!0),s&&(d._scopeId="data-v-"+s),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=l):r&&(l=u?function(){r.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(d.functional){d._injectStyles=l;var a=d.render;d.render=function(t,e){return l.call(e),a(t,e)}}else{var c=d.beforeCreate;d.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:d}}i.d(e,"a",(function(){return n}))},10:function(t,e){t.exports=require("jiku-ui/lib/mixins/migrating")},12:function(t,e){t.exports=require("jiku-ui/lib/utils/clickoutside")},154:function(t,e,i){"use strict";i.r(e);var n=i(12),r=i.n(n),s=i(4),o=i.n(s),u=i(10),l=i.n(u),d=i(19),a=i.n(d),c=i(50),h=i.n(c),m=i(3),f={name:"HnDropdown",componentName:"HnDropdown",mixins:[o.a,l.a],directives:{Clickoutside:r.a},components:{HnButton:a.a,HnButtonGroup:h.a},provide:function(){return{dropdown:this}},props:{trigger:{type:String,default:"hover"},type:String,size:{type:String,default:""},splitButton:Boolean,hideOnClick:{type:Boolean,default:!0},placement:{type:String,default:"bottom-end"},visibleArrow:{default:!0},showTimeout:{type:Number,default:250},hideTimeout:{type:Number,default:150},tabindex:{type:Number,default:0}},data:function(){return{timeout:null,visible:!1,triggerElm:null,menuItems:null,menuItemsArray:null,dropdownElm:null,focusing:!1,listId:"dropdown-menu-"+Object(m.generateId)()}},computed:{dropdownSize:function(){return this.size||(this.$HEINER||{}).size}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick)},watch:{visible:function(t){this.broadcast("HnDropdownMenu","visible",t),this.$emit("visible-change",t)},focusing:function(t){var e=this.$el.querySelector(".hn-dropdown-selfdefine");e&&(t?e.className+=" focusing":e.className=e.className.replace("focusing",""))}},methods:{getMigratingConfig:function(){return{props:{"menu-align":"menu-align is renamed to placement."}}},show:function(){var t=this;this.triggerElm.disabled||(clearTimeout(this.timeout),this.timeout=setTimeout((function(){t.visible=!0}),"click"===this.trigger?0:this.showTimeout))},hide:function(){var t=this;this.triggerElm.disabled||(this.removeTabindex(),this.tabindex>=0&&this.resetTabindex(this.triggerElm),clearTimeout(this.timeout),this.timeout=setTimeout((function(){t.visible=!1}),"click"===this.trigger?0:this.hideTimeout))},handleClick:function(){this.triggerElm.disabled||(this.visible?this.hide():this.show())},handleTriggerKeyDown:function(t){var e=t.keyCode;[38,40].indexOf(e)>-1?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),t.preventDefault(),t.stopPropagation()):13===e?this.handleClick():[9,27].indexOf(e)>-1&&this.hide()},handleItemKeyDown:function(t){var e=t.keyCode,i=t.target,n=this.menuItemsArray.indexOf(i),r=this.menuItemsArray.length-1,s=void 0;[38,40].indexOf(e)>-1?(s=38===e?0!==n?n-1:0:n<r?n+1:r,this.removeTabindex(),this.resetTabindex(this.menuItems[s]),this.menuItems[s].focus(),t.preventDefault(),t.stopPropagation()):13===e?(this.triggerElmFocus(),i.click(),this.hideOnClick&&(this.visible=!1)):[9,27].indexOf(e)>-1&&(this.hide(),this.triggerElmFocus())},resetTabindex:function(t){this.removeTabindex(),t.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach((function(t){t.setAttribute("tabindex","-1")}))},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex",this.tabindex),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" hn-dropdown-selfdefine"))},initEvent:function(){var t=this,e=this.trigger,i=this.show,n=this.hide,r=this.handleClick,s=this.splitButton,o=this.handleTriggerKeyDown,u=this.handleItemKeyDown;this.triggerElm=s?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm;this.triggerElm.addEventListener("keydown",o),l.addEventListener("keydown",u,!0),s||(this.triggerElm.addEventListener("focus",(function(){t.focusing=!0})),this.triggerElm.addEventListener("blur",(function(){t.focusing=!1})),this.triggerElm.addEventListener("click",(function(){t.focusing=!1}))),"hover"===e?(this.triggerElm.addEventListener("mouseenter",i),this.triggerElm.addEventListener("mouseleave",n),l.addEventListener("mouseenter",i),l.addEventListener("mouseleave",n)):"click"===e&&this.triggerElm.addEventListener("click",r)},handleMenuItemClick:function(t,e){this.hideOnClick&&(this.visible=!1),this.$emit("command",t,e)},triggerElmFocus:function(){this.triggerElm.focus&&this.triggerElm.focus()},initDomOperation:function(){this.dropdownElm=this.popperElm,this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=[].slice.call(this.menuItems),this.initEvent(),this.initAria()}},render:function(t){var e=this,i=this.hide,n=this.splitButton,r=this.type,s=this.dropdownSize,o=n?t("hn-button-group",[t("hn-button",{attrs:{type:r,size:s},nativeOn:{click:function(t){e.$emit("click",t),i()}}},[this.$slots.default]),t("hn-button",{ref:"trigger",attrs:{type:r,size:s},class:"hn-dropdown__caret-button"},[t("i",{class:"hn-dropdown__icon hn-icon-arrow-down"})])]):this.$slots.default;return t("div",{class:"hn-dropdown",directives:[{name:"clickoutside",value:i}]},[o,this.$slots.dropdown])}},g=i(0),p=Object(g.a)(f,void 0,void 0,!1,null,null,null);p.options.__file="packages/dropdown/src/dropdown.vue";var b=p.exports;b.install=function(t){t.component(b.name,b)};e.default=b},19:function(t,e){t.exports=require("jiku-ui/lib/button")},3:function(t,e){t.exports=require("jiku-ui/lib/utils/util")},4:function(t,e){t.exports=require("jiku-ui/lib/mixins/emitter")},50:function(t,e){t.exports=require("jiku-ui/lib/button-group")}}).default;