jiku-ui/lib/side-nav.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=72)}({0:function(e,t,n){"use strict";function i(e,t,n,i,o,s,r,u){var d,a="function"==typeof e?e.options:e;if(t&&(a.render=t,a.staticRenderFns=n,a._compiled=!0),i&&(a.functional=!0),s&&(a._scopeId="data-v-"+s),r?(d=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=d):o&&(d=u?function(){o.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:o),d)if(a.functional){a._injectStyles=d;var l=a.render;a.render=function(e,t){return d.call(t),l(e,t)}}else{var c=a.beforeCreate;a.beforeCreate=c?[].concat(c,d):[d]}return{exports:e,options:a}}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")},21:function(e,t){e.exports=require("jiku-ui/lib/transitions/collapse-transition")},24:function(e,t){e.exports=require("jiku-ui/lib/tooltip")},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")},72:function(e,t,n){"use strict";n.r(t);var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("hn-side-menu",e._g(e._b({ref:"sideMenu",style:{width:e.$attrs.collapse?null:e.width,boxShadow:"none"===e.boxShadow?null:e.boxShadow}},"hn-side-menu",e.$attrs,!1),e.$listeners),[n("div",{staticClass:"hn-side-menu__header"},[e._t("header")],2),n("hn-side-menu-tree",{attrs:{menu:e.menu,"text-key":e.textKey,"submenu-key":e.submenuKey}})],1)};i._withStripped=!0;var o=n(4),s=n.n(o),r=n(10),u=n.n(r),d=n(2),a={name:"HnSideMenu",componentName:"HnSideMenu",render:function(e){var t=e("ul",{attrs:{role:"sideMenuBar"},key:+this.collapse,style:{backgroundColor:this.backgroundColor},class:{"hn-side-menu--collapse":this.collapse,"hn-side-menu":!0}},[this.$slots.default]);return this.collapseTransition?e("hn-side-menu-collapse-transition",[t]):t},mixins:[s.a,u.a],provide:function(){return{rootSideMenu:this}},components:{"hn-side-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(d.addClass)(e,"hn-opacity-transition"),e.style.opacity=1},afterEnter:function(e){Object(d.removeClass)(e,"hn-opacity-transition"),e.style.opacity=""},beforeLeave:function(e){e.dataset||(e.dataset={}),Object(d.hasClass)(e,"hn-side-menu--collapse")?(Object(d.removeClass)(e,"hn-side-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(d.addClass)(e,"hn-side-menu--collapse")):(Object(d.addClass)(e,"hn-side-menu--collapse"),e.dataset.oldOverflow=e.style.overflow,e.dataset.scrollWidth=e.clientWidth,Object(d.removeClass)(e,"hn-side-menu--collapse")),e.style.width=e.scrollWidth+"px",e.style.overflow="hidden"},leave:function(e){Object(d.addClass)(e,"horizontal-collapse-transition"),e.style.width=e.dataset.scrollWidth+"px"}}},t.children)}}},props:{defaultActive:{type:String,default:""},defaultOpeneds:Array,uniqueOpened:Boolean,router:Boolean,collapse:Boolean,collapseTransition:{type:Boolean,default:!0},backgroundColor:{type:String,default:"#25262A"},textColor:{type:String,default:"#909399"},activeTextColor:{type:String,default:"#409EFF"},hoverTextColor:{type:String,default:"#fff"},openedTextColor:{type:String,default:function(){return this.hoverTextColor}},activeMarkColor:{type:String,default:function(){return this.activeTextColor}},openedBackground:{type:String,default:"#16181c"},activeBackground:{type:String,default:"#030304"},hoverBackground:{type:String,default:function(){return this.activeBackground}}},data:function(){return{activeIndex:this.defaultActive,openedSideMenus:this.defaultOpeneds&&!this.collapse?this.defaultOpeneds.slice(0):[],sideItems:{},sideSubmenus:{}}},computed:{isSideMenuPopup:function(){return this.collapse}},watch:{defaultActive:function(e){this.sideItems[e]||(this.activeIndex=null),this.updateActiveIndex(e)},defaultOpeneds:function(e){this.collapse||(this.openedSideMenus=e)},collapse:function(e){e&&(this.openedSideMenus=[]),this.broadcast("HnSideSubmenu","toggle-collapse",e)}},methods:{updateActiveIndex:function(e){var t=this.sideItems[e]||this.sideItems[this.activeIndex]||this.sideItems[this.defaultActive];t?(this.activeIndex=t.index,this.initOpenedSideMenu()):this.activeIndex=null},addSideItem:function(e){this.$set(this.sideItems,e.index,e)},removeSideItem:function(e){delete this.sideItems[e.index]},addSideSubmenu:function(e){this.$set(this.sideSubmenus,e.index,e)},removeSideSubmenu:function(e){delete this.sideSubmenus[e.index]},openSideMenu:function(e,t){var n=this.openedSideMenus;-1===n.indexOf(e)&&(this.uniqueOpened&&(this.openedSideMenus=n.filter((function(e){return-1!==t.indexOf(e)}))),this.openedSideMenus.push(e))},closeSideMenu:function(e){var t=this.openedSideMenus.indexOf(e);-1!==t&&this.openedSideMenus.splice(t,1)},handleSideSubmenuClick:function(e){var t=e.index,n=e.indexPath;-1!==this.openedSideMenus.indexOf(t)?(this.closeSideMenu(t),this.$emit("close",t,n)):(this.openSideMenu(t,n),this.$emit("open",t,n))},handleSideItemClick: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),this.collapse&&(this.openedSideMenus=[]),this.router&&s&&this.routeToItem(e,(function(e){t.activeIndex=o,e&&console.error(e)}))},initOpenedSideMenu:function(){var e=this,t=this.activeIndex,n=this.sideItems[t];n&&!this.collapse&&n.indexPath.forEach((function(t){var n=e.sideSubmenus[t];n&&e.openSideMenu(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.sideSubmenus[e.toString()].indexPath;n.forEach((function(e){return t.openSideMenu(e,n)}))},close:function(e){this.closeSideMenu(e)}},mounted:function(){this.initOpenedSideMenu(),this.$on("side-item-click",this.handleSideItemClick),this.$on("side-submenu-click",this.handleSideSubmenuClick),this.$watch("sideItems",this.updateActiveIndex)}},l=n(0),c=Object(l.a)(a,void 0,void 0,!1,null,null,null);c.options.__file="packages/side-nav/src/side-menu.vue";var h=c.exports,p=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{class:{"hn-side-menu__tree--root":e.isRoot,"hn-side-menu__tree--node":!e.isRoot&&!e.isLeaf,"hn-side-menu__tree--leaf":!e.isRoot&&e.isLeaf}},[e._l(e.menu,(function(t,i){var o=t.icon,s=t[""+e.textKey],r=t.disabled,u=t[""+e.submenuKey];return[u?n("hn-side-submenu",{key:i,attrs:{disabled:r,index:e.prefix+"/"+i}},[n("template",{slot:"title"},[o?n("i",{staticClass:"hn-side-submenu__title-icon",class:o}):e._e(),s?n("span",{staticClass:"hn-side-submenu__title-text"},[e._v("\n          "+e._s(s)+"\n        ")]):e._e()]),n("hn-side-menu-tree",{attrs:{"is-root":!1,menu:u,"text-key":e.textKey,"submenu-key":e.submenuKey,prefix:e.prefix+"/"+i}})],2):n("hn-side-menu-item",{key:i,attrs:{disabled:r,index:e.prefix+"/"+i}},[o?n("i",{staticClass:"hn-side-menu-item__title-icon",class:o}):e._e(),n("template",{slot:"title"},[s?n("span",{staticClass:"hn-side-menu-item__title-text"},[e._v("\n          "+e._s(s)+"\n        ")]):e._e()])],2)]}))],2)};p._withStripped=!0;var m=n(21),f=n.n(m),S={inject:["rootSideMenu"],computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"HnSideMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},parentSideMenu:function(){for(var e=this.$parent;e&&-1===["HnSideMenu","HnSideSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){var e=20,t=this.$parent,n=0;if(this.rootSideMenu.collapse)e=20;else for(;t&&"HnSideMenu"!==t.$options.componentName;)"HnSideSubmenu"===t.$options.componentName&&(e+=1===++n?28:14),t=t.$parent;return{paddingLeft:e+"px"}}}},v=n(5),b=n.n(v),x={props:{transformOrigin:{type:[Boolean,String],default:!1},offset:b.a.props.offset,boundariesPadding:b.a.props.boundariesPadding,popperOptions:b.a.props.popperOptions},data:b.a.data,methods:b.a.methods,beforeDestroy:b.a.beforeDestroy,deactivated:b.a.deactivated},M={name:"HnSideSubmenu",componentName:"HnSideSubmenu",mixins:[S,s.a,x],components:{HnCollapseTransition:f.a},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},sideSubmenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isSideMenuPopup&&this.$nextTick((function(e){t.updatePopper()}))}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootSideMenu.collapse?"hn-zoom-in-left":"hn-zoom-in-top"},opened:function(){return this.rootSideMenu.openedSideMenus.indexOf(this.index)>-1},active:function(){var e=!1,t=this.sideSubmenus,n=this.items;return Object.keys(n).forEach((function(t){n[t].active&&(e=!0)})),Object.keys(t).forEach((function(n){t[n].active&&(e=!0)})),e},hoverBackground:function(){return this.rootSideMenu.hoverBackground},backgroundColor:function(){return this.isFirstLevel?this.rootSideMenu.backgroundColor:this.rootSideMenu.openedBackground},openedTextColor:function(){return this.rootSideMenu.openedTextColor},textColor:function(){return this.rootSideMenu.textColor},hoverTextColor:function(){return this.rootSideMenu.hoverTextColor},isSideMenuPopup:function(){return this.rootSideMenu.isSideMenuPopup},titleStyle:function(){return{color:this.opened||this.active?this.openedTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootSideMenu;){if(["HnSideSubmenu"].indexOf(t.$options.componentName)>-1){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},addSideItem:function(e){this.$set(this.items,e.index,e)},removeSideItem:function(e){delete this.items[e.index]},addSideSubmenu:function(e){this.$set(this.sideSubmenus,e.index,e)},removeSideSubmenu:function(e){delete this.sideSubmenus[e.index]},handleClick:function(){var e=this.rootSideMenu,t=this.disabled;e.collapse||t||this.dispatch("HnSideMenu","side-submenu-click",this)},handleMouseenter:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.showTimeout;if("ActiveXObject"in window||"focus"!==e.type||e.relatedTarget){var i=this.rootSideMenu,o=this.disabled;i.collapse&&!o&&(this.dispatch("HnSideSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout((function(){t.rootSideMenu.openSideMenu(t.index,t.indexPath)}),n),this.appendToBody&&this.$parent.$el.dispatchEvent(new MouseEvent("mouseenter")))}},handleMouseleave:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=this.rootSideMenu;n.collapse&&(this.dispatch("HnSideSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout((function(){!e.mouseInChild&&e.rootSideMenu.closeSideMenu(e.index)}),this.hideTimeout),this.appendToBody&&t&&"HnSideSubmenu"===this.$parent.$options.name&&this.$parent.handleMouseleave(!0))},handleTitleMouseenter:function(){var e=this.$refs["side-submenu-title"];e&&(e.style.backgroundColor=this.hoverBackground,e.style.color=this.hoverTextColor)},handleTitleMouseleave:function(){var e=this.$refs["side-submenu-title"];e&&(e.style.backgroundColor=this.backgroundColor,e.style.color=this.titleStyle.color)},updatePlacement:function(){this.currentPlacement="right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.sideMenu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",(function(){e.mouseInChild=!0,clearTimeout(e.timeout)})),this.$on("mouse-leave-child",(function(){e.mouseInChild=!1,clearTimeout(e.timeout)}))},mounted:function(){this.parentSideMenu.addSideSubmenu(this),this.rootSideMenu.addSideSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentSideMenu.removeSideSubmenu(this),this.rootSideMenu.removeSideSubmenu(this)},render:function(e){var t=this,n=this.active,i=this.opened,o=this.paddingStyle,s=this.titleStyle,r=this.rootSideMenu,u=this.backgroundColor,d=this.currentPlacement,a=this.menuTransitionName,l=this.disabled,c=this.popperClass,h=this.$slots,p=e("transition",{attrs:{name:a}},[e("div",{ref:"sideMenu",directives:[{name:"show",value:i}],class:["hn-side-menu--vertical",c],on:{mouseenter:function(e){return t.handleMouseenter(e,100)},mouseleave:function(){return t.handleMouseleave(!0)},focus:function(e){return t.handleMouseenter(e,100)}}},[e("ul",{attrs:{role:"sideMenu"},class:["hn-side-menu hn-side-menu--popup","hn-side-menu--popup-"+d],style:{backgroundColor:r.openedBackground}},[h.default])])]),m=e("hn-collapse-transition",[e("ul",{attrs:{role:"sideMenu"},class:"hn-side-menu hn-side-menu--inline",directives:[{name:"show",value:i}],style:{backgroundColor:r.openedBackground}},[h.default])]),f=r.collapse?"hn-icon-arrow-right":"hn-icon-arrow-down";return e("li",{class:{"hn-side-submenu":!0,"is-active":n,"is-opened":i,"is-disabled":l},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":i},on:{mouseenter:this.handleMouseenter,mouseleave:function(){return t.handleMouseleave(!1)},focus:this.handleMouseenter}},[e("div",{class:"hn-side-submenu__title",ref:"side-submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[o,s,{backgroundColor:u}]},[h.title,e("i",{class:["hn-side-submenu__icon-arrow",f]})]),this.isSideMenuPopup?p:m])}},y=Object(l.a)(M,void 0,void 0,!1,null,null,null);y.options.__file="packages/side-nav/src/side-submenu.vue";var g=y.exports,C=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("li",{staticClass:"hn-side-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"sideMenuItem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["HnSideMenu"===e.parentSideMenu.$options.componentName&&e.rootSideMenu.collapse&&e.$slots.title?[this.active?n("i",{staticClass:"hn-side-menu-item__mark",style:{backgroundColor:e.activeMarkColor}}):e._e(),n("hn-tooltip",{attrs:{effect:"dark",placement:"right"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),n("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)])]:[this.active?n("i",{staticClass:"hn-side-menu-item__mark",style:{backgroundColor:e.activeMarkColor}}):e._e(),e._t("default"),e._t("title")]],2)};C._withStripped=!0;var _=n(24),k=n.n(_),$={name:"HnSideMenuItem",componentName:"HnSideMenuItem",mixins:[S,s.a],components:{HnTooltip:k.a},props:{index:{default:null,validator:function(e){return"string"==typeof e||null===e}},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootSideMenu.activeIndex},hoverBackground:function(){return this.active?this.rootSideMenu.activeBackground:this.rootSideMenu.hoverBackground},backgroundColor:function(){return this.active?this.rootSideMenu.activeBackground:"HnSideMenu"===this.parentSideMenu.$options.componentName?this.rootSideMenu.backgroundColor:this.rootSideMenu.openedBackground},activeMarkColor:function(){return this.rootSideMenu.activeMarkColor},activeTextColor:function(){return this.rootSideMenu.activeTextColor},textColor:function(){return this.rootSideMenu.textColor},hoverTextColor:function(){return this.active?this.activeTextColor:this.rootSideMenu.hoverTextColor},itemStyle:function(){return{color:this.active?this.activeTextColor:this.textColor}}},methods:{onMouseEnter:function(){this.$el.style.backgroundColor=this.hoverBackground,this.$el.style.color=this.hoverTextColor},onMouseLeave:function(){this.$el.style.backgroundColor=this.backgroundColor,this.$el.style.color=this.itemStyle.color},handleClick:function(){this.disabled||(this.dispatch("HnSideMenu","side-item-click",this),this.$emit("click",this))}},mounted:function(){this.parentSideMenu.addSideItem(this),this.rootSideMenu.addSideItem(this)},beforeDestroy:function(){this.parentSideMenu.removeSideItem(this),this.rootSideMenu.removeSideItem(this)}},T=Object(l.a)($,C,[],!1,null,null,null);T.options.__file="packages/side-nav/src/side-menu-item.vue";var O=T.exports,I={name:"HnSideMenuTree",inheritAttrs:!1,props:{isRoot:{type:Boolean,default:!0},menu:{type:Object,default:null},prefix:{type:String,default:""},textKey:{type:String,require:!0},submenuKey:{type:String,require:!0}},components:{HnSideMenuTree:B,HnSideSubmenu:g,HnSideMenuItem:O},computed:{isLeaf:function(){var e=this;return Object.keys(this.menu).every((function(t){return!e.menu[t].submenu}))}}},w=Object(l.a)(I,p,[],!1,null,null,null);w.options.__file="packages/side-nav/src/side-menu-tree.vue";var B=w.exports,j={name:"HnSideNav",inheritAttrs:!1,props:{menu:{type:Object,default:null},width:{type:String,default:"180px"},boxShadow:{type:String,default:"2px 0px 4px rgba(0,0,0,0.12)"},textKey:{type:String,default:"text"},submenuKey:{type:String,default:"submenu"}},components:{HnSideMenu:h,HnSideMenuTree:B},methods:{open:function(){var e;(e=this.$refs.sideMenu).open.apply(e,arguments)},close:function(){var e;(e=this.$refs.sideMenu).close.apply(e,arguments)}}},H=Object(l.a)(j,i,[],!1,null,null,null);H.options.__file="packages/side-nav/src/main.vue";var P=H.exports;P.install=function(e){e.component(P.name,P)};t.default=P}}).default;