vexip-ui/lib/components/menu/menu-item.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../collapse-transition/index.cjs");require("../icon/index.cjs");require("../popper/index.cjs");require("../tooltip/index.cjs");require("../renderer/index.cjs");const h=require("@vexip-ui/config"),P=require("@vexip-ui/hooks"),K=require("@vexip-ui/utils"),se=require("./props.cjs"),q=require("./symbol.cjs"),ce=require("../renderer/renderer.cjs"),B=require("../icon/icon.cjs"),de=require("../tooltip/tooltip.cjs"),pe=require("../collapse/collapse-transition.cjs"),fe=require("../popper/popper.vue.cjs"),ve=x=>Object.freeze(Object.defineProperty({__proto__:null,default:x},Symbol.toStringTag,{value:"Module"})),be=e.defineAsyncComponent(()=>Promise.resolve().then(()=>ve(require("./menu-group.cjs")))),W=e.defineComponent({name:"MenuItem",props:se.menuItemProps,emits:[],setup(x,{slots:s,expose:I}){const n=h.useProps("menuItem",x,{label:{default:null,static:!0},icon:h.createIconProp(),iconProps:null,disabled:!1,transfer:null,trigger:null,transitionName:null,meta:null,children:{default:()=>[],static:!0},route:null,arrow:null,slots:()=>({})}),r=e.inject(q.MENU_STATE,null),o=e.inject(q.MENU_ITEM_STATE,null),V=e.inject(q.MENU_GROUP_STATE,null),a=h.useNameHelper("menu"),$=h.useIcons(),D=h.useHoverDelay(),{isRtl:k}=P.useRtl(),p=a.be("item"),R=e.ref(k.value?"left-start":"right-start"),t=e.ref(!1),m=e.ref(!1),g=e.ref(!1),f=e.ref(!1),C=e.computed(()=>((o==null?void 0:o.indent)??0)+1),G=e.computed(()=>n.transfer??(r==null?void 0:r.transfer)??!1),z=e.computed(()=>o?o.transfer:!1),J=e.computed(()=>!z.value&&G.value),Q=e.computed(()=>(r==null?void 0:r.markerType)||"right"),U=P.useClickOutside(ne),L=e.ref(),{reference:X,transferTo:O,updatePopper:Y}=P.usePopper({placement:R,transfer:J,wrapper:U,popper:e.computed(()=>{var l;return(l=L.value)==null?void 0:l.wrapper}),shift:{crossAxis:!0}}),c=e.computed(()=>{var l;return!!(s.group||(l=n.children)!=null&&l.length)}),v=e.computed(()=>c.value&&t.value),Z=e.computed(()=>({[p]:!0,[`${p}--disabled`]:n.disabled,[`${p}--group-visible`]:v.value,[`${p}--selected`]:m.value,[`${p}--no-icon`]:!n.icon,[`${p}--son-selected`]:g.value})),S=e.computed(()=>{if(r!=null&&r.horizontal||o!=null&&o.isUsePopper)return{};const l=a.gcv("indent-width"),i=C.value+(r!=null&&r.isReduced?0:(V==null?void 0:V.indent)??0)*.25;return{paddingInlineStart:o&&o.isUsePopper?void 0:`calc(${l} * ${i})`}}),d=e.computed(()=>r&&(r.horizontal||r.groupType==="dropdown")||c.value&&(r==null?void 0:r.isReduced)&&!o||!!(o!=null&&o.isUsePopper)),ee=e.computed(()=>c.value||!!(o!=null&&o.isUsePopper||r&&!r.isReduced)),re=e.computed(()=>!!(r!=null&&r.tooltipReverse)),E=e.computed(()=>(r==null?void 0:r.horizontal)&&!o),oe=e.computed(()=>n.transitionName??E.value?a.ns("drop"):a.ns("zoom")),T=e.computed(()=>n.trigger||(r==null?void 0:r.trigger)||"hover"),_=e.reactive({el:U,label:e.toRef(n,"label"),indent:C,groupExpanded:t,showGroup:v,isUsePopper:d,parentState:o,transfer:e.computed(()=>z.value||G.value),cachedExpanded:t.value,updateSonSelected:le,toggleGroupExpanded:j,handleMouseEnter:y,handleMouseLeave:M});e.provide(q.MENU_ITEM_STATE,_),e.watch(v,l=>{l&&d.value&&(f.value=!0,Y())},{immediate:!0}),e.watch(m,l=>{l&&h.emitEvent(n.onSelect),r==null||r.doForEachItem(i=>i.updateSonSelected(!1,!1)),l&&e.nextTick(()=>{o==null||o.updateSonSelected(l)})}),e.watch(t,l=>{typeof(r==null?void 0:r.handleExpand)=="function"&&r.handleExpand(n.label,l,n.meta||{})}),e.watch(E,l=>{R.value=l?"bottom":k.value?"left-start":"right-start"},{immediate:!0}),r&&(e.watch([()=>n.label,()=>r.currentActive],()=>{m.value=n.label===r.currentActive},{immediate:!0}),typeof r.increaseItem=="function"&&r.increaseItem(_)),e.onBeforeUnmount(()=>{typeof(r==null?void 0:r.decreaseItem)=="function"&&r.decreaseItem(_)}),I({groupExpanded:t,isGroup:c,showGroup:v,isUsePopper:d,handleSelect:w,handleMouseEnter:y,handleMouseLeave:M});function le(l,i=!0){g.value=l,i&&(o==null||o.updateSonSelected(l))}const{timer:b}=P.useSetTimeout();function w(){if(clearTimeout(b.hover),!n.disabled)if(c.value){if(d.value&&T.value!=="click")return;r==null||r.doForEachItem(l=>{r.accordion&&(l.groupExpanded=!1)}),t.value=!t.value}else d.value&&j(!1,!0),r&&r.handleSelect(n.label,n.meta||{},n.route),m.value=!0}function j(l,i=!1){clearTimeout(b.hover),r==null||r.doForEachItem(u=>{r.accordion&&(u.groupExpanded=!1)}),t.value=l,i&&typeof(o==null?void 0:o.toggleGroupExpanded)=="function"&&o.toggleGroupExpanded(l,i)}let N=!1,A=!1;function y(){if(clearTimeout(b.hover),!(N||!d.value||T.value!=="hover")){if(!t.value&&f.value){A=!0;return}typeof(o==null?void 0:o.handleMouseEnter)=="function"&&o.handleMouseEnter(),!(n.disabled||!c.value)&&(b.hover=setTimeout(()=>{t.value=!0},D.value))}}function M(){clearTimeout(b.hover),!(N||!f.value||!d.value||T.value!=="hover")&&(typeof(o==null?void 0:o.handleMouseLeave)=="function"&&o.handleMouseLeave(),!(n.disabled||!c.value)&&(b.hover=setTimeout(()=>{t.value=!1},D.value)))}function ne(){d.value&&T.value==="click"&&e.nextTick(()=>{t.value=!1})}function ue(){if(f.value=!1,t.value=!1,A){if(A=!1,typeof(o==null?void 0:o.handleMouseEnter)=="function"&&o.handleMouseEnter(),n.disabled||!c.value)return;t.value=!0}}function ae(l){const i=l.code||l.key;i==="Enter"||i==="NumpadEnter"?(l.stopPropagation(),w()):i==="Space"&&(l.stopPropagation(),l.preventDefault(),w())}function F(){var i;if(!((i=n.children)!=null&&i.length))return null;const l=u=>e.createVNode(W,{label:u.label,icon:u.icon,"icon-props":u.iconProps,disabled:u.disabled,children:u.children,route:u.route,meta:u.meta},{default:()=>[u.name?K.callIfFunc(u.name):u.label]});return n.children.map(u=>u.group?e.createVNode(be,{key:u.label,label:u.name?K.callIfFunc(u.name):u.label},{default:()=>{var H;return[(H=u.children)==null?void 0:H.map(l)]}}):l(u))}function te(){const l={groupExpanded:t.value,sonSelected:g.value},i=n.arrow||(r==null?void 0:r.arrow)||$.value.angleDown.icon,u=()=>e.createVNode(ce,{renderer:n.slots.arrow,data:l},{default:()=>[e.createVNode(B,e.mergeProps($.value.angleDown,{icon:i,class:{[a.be("arrow")]:!0,[a.bem("arrow","visible")]:t.value,[a.bem("arrow","son-selected")]:g.value}}),null)]});return r?r.renderItemArrow(l,u):u()}function ie(){return e.createVNode(de,{placement:k.value?"left":"right",reverse:re.value,shift:!0,transfer:!0,disabled:ee.value},{trigger:()=>e.createVNode("div",{ref:X,class:{[a.be("label")]:!0,[a.bem("label",`marker-${Q.value}`)]:!0,[a.bem("label","in-popper")]:o==null?void 0:o.isUsePopper},role:"menuitem",tabindex:0,"aria-disabled":n.disabled?"true":void 0,style:S.value,onClick:w,onKeydown:ae,onMouseenter:y,onMouseleave:M},[(s.icon||n.icon)&&e.createVNode("div",{class:a.be("icon")},[s.icon?e.renderSlot(s,"icon"):e.createVNode(B,e.mergeProps(n.iconProps,{icon:n.icon}),null)]),e.createVNode("span",{class:{[a.be("title")]:!0,[a.bem("title","in-group")]:!E.value&&c.value}},[s.default?e.renderSlot(s,"default"):n.label]),c.value&&e.renderSlot(s,"arrow",{groupExpanded:t.value,sonSelected:g.value},()=>[te()])]),default:()=>e.createVNode("span",{class:a.be("tooltip-title")},[s.default?e.renderSlot(s,"default"):n.label])})}return()=>e.createVNode("li",{ref:U,class:Z.value,role:"none"},[ie(),e.createVNode(pe,{appear:!0},{default:()=>[c.value&&!d.value&&e.withDirectives(e.createVNode("ul",{class:a.be("list")},[s.group?e.renderSlot(s,"group"):F()]),[[e.vShow,v.value]])]}),c.value&&d.value&&e.createVNode(fe,{ref:L,class:[a.be("popper"),a.bs("vars"),E.value&&a.bem("popper","drop")],visible:f.value&&v.value,alive:!O.value||f.value,to:O.value,transition:oe.value,onAfterLeave:ue,onMouseenter:()=>(N=!0,y()),onMouseleave:()=>(N=!1,M())},{default:()=>[e.createVNode("ul",{class:a.be("list")},[s.group?e.renderSlot(s,"group"):F()])]})])}});module.exports=W;
//# sourceMappingURL=menu-item.cjs.map