jiku-ui/lib/menu.js

A Component Library for Vue.js.

module.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=88)}({0:function(e,t,n){"use strict";function i(e,t,n,i,o,s,r,u){var a,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),r?(a=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)},c._ssrRegister=a):o&&(a=u?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),a)if(c.functional){c._injectStyles=a;var l=c.render;c.render=function(e,t){return a.call(t),l(e,t)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:e,options:c}}n.d(t,"a",(function(){return i}))},10:function(e,t){e.exports=require("jiku-ui/lib/mixins/migrating")},2:function(e,t){e.exports=require("jiku-ui/lib/utils/dom")},4:function(e,t){e.exports=require("jiku-ui/lib/mixins/emitter")},88:function(e,t,n){"use strict";n.r(t);var i=n(4),o=n.n(i),s=n(10),r=n.n(s),u=u||{};u.Utils=u.Utils||{},u.Utils.focusFirstDescendant=function(e){for(var t=0;t<e.childNodes.length;t++){var n=e.childNodes[t];if(u.Utils.attemptFocus(n)||u.Utils.focusFirstDescendant(n))return!0}return!1},u.Utils.focusLastDescendant=function(e){for(var t=e.childNodes.length-1;t>=0;t--){var n=e.childNodes[t];if(u.Utils.attemptFocus(n)||u.Utils.focusLastDescendant(n))return!0}return!1},u.Utils.attemptFocus=function(e){if(!u.Utils.isFocusable(e))return!1;u.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return u.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},u.Utils.isFocusable=function(e){if(e.tabIndex>0||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},u.Utils.triggerEvent=function(e,t){var n=void 0;n=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var i=document.createEvent(n),o=arguments.length,s=Array(o>2?o-2:0),r=2;r<o;r++)s[r-2]=arguments[r];return i.initEvent.apply(i,[t].concat(s)),e.dispatchEvent?e.dispatchEvent(i):e.fireEvent("on"+t,i),e},u.Utils.keys={tab:9,enter:13,space:32,left:37,up:38,right:39,down:40,esc:27};var a=u.Utils,c=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};c.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},c.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},c.prototype.addListeners=function(){var e=this,t=a.keys,n=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,(function(i){i.addEventListener("keydown",(function(i){var o=!1;switch(i.keyCode){case t.down:e.gotoSubIndex(e.subIndex+1),o=!0;break;case t.up:e.gotoSubIndex(e.subIndex-1),o=!0;break;case t.tab:a.triggerEvent(n,"mouseleave");break;case t.enter:case t.space:o=!0,i.currentTarget.click()}return o&&(i.preventDefault(),i.stopPropagation()),!1}))}))};var l=c,d=function(e){this.domNode=e,this.submenu=null,this.init()};d.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".hn-menu");e&&(this.submenu=new l(this,e)),this.addListeners()},d.prototype.addListeners=function(){var e=this,t=a.keys;this.domNode.addEventListener("keydown",(function(n){var i=!1;switch(n.keyCode){case t.down:a.triggerEvent(n.currentTarget,"mouseenter"),e.submenu&&e.submenu.gotoSubIndex(0),i=!0;break;case t.up:a.triggerEvent(n.currentTarget,"mouseenter"),e.submenu&&e.submenu.gotoSubIndex(e.submenu.subMenuItems.length-1),i=!0;break;case t.tab:a.triggerEvent(n.currentTarget,"mouseleave");break;case t.enter:case t.space:i=!0,n.currentTarget.click()}i&&n.preventDefault()}))};var h=d,f=function(e){this.domNode=e,this.init()};f.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,(function(e){return 1===e.nodeType})).forEach((function(e){new h(e)}))};var p=f,m=n(2),v={name:"HnMenu",render:function(e){var t=e("ul",{attrs:{role:"menubar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor||""},class:{"hn-menu--horizontal":"horizontal"===this.mode,"hn-menu--collapse":this.collapse,"hn-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("hn-menu-collapse-transition",[t]):t},componentName:"HnMenu",mixins:[o.a,r.a],provide:function(){return{rootMenu:this}},components:{"hn-menu-collapse-transition":{functional:!0,render:function(e,t){return e("transition",{props:{mode:"out-in"},on:{beforeEnter:function(e){e.style.opacity=.2},enter:function(e){Object(m.addClass)(e,"hn-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(m.removeClass)(e,"hn-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(m.hasClass)(e,"hn-menu--collapse")?(Object(m.removeClass)(e,"hn-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(m.addClass)(e,"hn-menu--collapse")):(Object(m.addClass)(e,"hn-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(m.removeClass)(e,"hn-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(m.addClass)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"},collapse:Boolean,backgroundColor:String,textColor:String,activeTextColor:String,collapseTransition:{type:Boolean,default:!0}},data:function(){return{activeIndex:this.defaultActive,openedMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},computed:{hoverBackground:function(){return this.backgroundColor?this.mixColor(this.backgroundColor,.2):""},isMenuPopup:function(){return"horizontal"===this.mode||"vertical"===this.mode&&this.collapse}},watch:{defaultActive:function(e){this.items[e]||(this.activeIndex=null),this.updateActiveIndex(e)},defaultOpeneds:function(e){this.collapse||(this.openedMenus=e)},collapse:function(e){e&&(this.openedMenus=[]),this.broadcast("HnSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.items[e]||this.items[this.activeIndex]||this.items[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedMenu()):this.activeIndex=null},getMigratingConfig:function(){return{props:{theme:"theme is removed."}}},getColorChannels:function(e){if(e=e.replace("#",""),/^[0-9a-fA-F]{3}$/.test(e)){e=e.split("");for(var t=2;t>=0;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var n=this.getColorChannels(e),i=n.red,o=n.green,s=n.blue;return t>0?(i*=1-t,o*=1-t,s*=1-t):(i+=(255-i)*t,o+=(255-o)*t,s+=(255-s)*t),"rgb("+Math.round(i)+", "+Math.round(o)+", "+Math.round(s)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var n=this.openedMenus;-1===n.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=n.filter((function(e){return-1!==t.indexOf(e)}))),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,n=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,n)):(this.openMenu(t,n),this.$emit("open",t,n))},handleItemClick:function(e){var t=this,n=e.index,i=e.indexPath,o=this.activeIndex,s=null!==e.index;s&&(this.activeIndex=e.index),this.$emit("select",n,i,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&s&&this.routeToItem(e,(function(e){t.activeIndex=o,e&&console.error(e)}))},initOpenedMenu:function(){var e=this,t=this.activeIndex,n=this.items[t];n&&"horizontal"!==this.mode&&!this.collapse&&n.indexPath.forEach((function(t){var n=e.submenus[t];n&&e.openMenu(t,n.indexPath)}))},routeToItem:function(e,t){var n=e.route||e.index;try{this.$router.push(n,(function(){}),t)}catch(e){console.error(e)}},open:function(e){var t=this,n=this.submenus[e.toString()].indexPath;n.forEach((function(e){return t.openMenu(e,n)}))},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new p(this.$el),this.$watch("items",this.updateActiveIndex)}},b=n(0),g=Object(b.a)(v,void 0,void 0,!1,null,null,null);g.options.__file="packages/menu/src/menu.vue";var x=g.exports;x.install=function(e){e.component(x.name,x)};t.default=x}}).default;