UNPKG

vexip-ui

Version:

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

3 lines (2 loc) 2.57 kB
"use strict";const e=require("vue");require("../icon/index.cjs");require("../menu-item/index.cjs");require("../popper/index.cjs");const v=require("@vexip-ui/config"),h=require("@vexip-ui/hooks"),A=require("@vexip-ui/utils"),k=require("./symbol.cjs"),H=require("./menu-item.cjs"),L=require("../icon/icon.cjs"),U=require("../popper/popper.vue.cjs"),_=e.defineComponent({name:"MenuRest",props:{menus:{type:Array,default:()=>[]}},setup(m){const u=e.inject(k.MENU_STATE,null),l=v.useNameHelper("menu"),E=v.useIcons(),b=v.useHoverDelay(),r=e.ref(!1),T=e.ref(!1),t=e.ref(!1),M=e.computed(()=>(u==null?void 0:u.transfer)??!1),a=e.computed(()=>(u==null?void 0:u.trigger)||"hover"),i=h.useClickOutside(x),q=e.ref(),{reference:N,transferTo:g,updatePopper:y}=h.usePopper({placement:e.ref("bottom"),transfer:M,wrapper:i,popper:e.computed(()=>{var o;return(o=q.value)==null?void 0:o.wrapper})}),I=e.reactive({el:i,label:"",indent:1,groupExpanded:r,showGroup:r,isUsePopper:!0,parentState:null,transfer:M,cachedExpanded:!1,updateSonSelected:S,toggleGroupExpanded:V,handleMouseEnter:d,handleMouseLeave:f});e.provide(k.MENU_ITEM_STATE,I),e.watch(r,o=>{o&&(t.value=!0,y())});function S(o){T.value=o}function V(o){r.value=o}const{timer:s}=h.useSetTimeout();let c=!1,p=!1;function d(){if(clearTimeout(s.hover),!(c||a.value!=="hover")){if(!r.value&&t.value){p=!0;return}s.hover=setTimeout(()=>{r.value=!0},b.value)}}function f(){clearTimeout(s.hover),!(c||!t.value||a.value!=="hover")&&(s.hover=setTimeout(()=>{r.value=!1},b.value))}function w(){a.value==="click"&&(r.value=!0)}function x(){a.value==="click"&&e.nextTick(()=>{r.value=!1})}function C(){t.value=!1,r.value=!1,p&&(p=!1,r.value=!0)}function P(){var o;return(o=m.menus)!=null&&o.length?m.menus.map(n=>e.createVNode(H,{key:n.label,label:n.label,icon:n.icon,"icon-props":n.iconProps,disabled:n.disabled,children:n.children,route:n.route,meta:n.meta},{default:()=>[n.name?A.callIfFunc(n.name):n.label]})):null}return()=>e.createVNode("div",{ref:i,class:l.be("rest"),onMouseenter:d,onMouseleave:f},[e.createVNode("div",{ref:N,class:[l.be("rest-handler"),T.value&&l.bem("rest-handler","selected")],onClick:w},[e.createVNode(L,E.value.ellipsis,null)]),e.createVNode(U,{ref:q,class:[l.be("popper"),l.bs("vars"),l.bem("popper","drop")],visible:t.value&&r.value,alive:!g.value||t.value,to:g.value,transition:l.ns("drop"),onAfterLeave:C,onMouseenter:()=>(c=!0,d()),onMouseleave:()=>(c=!1,f())},{default:()=>[e.createVNode("ul",{class:[l.be("list"),l.bem("list","theme")]},[P()])]})])}});module.exports=_; //# sourceMappingURL=menu-rest.cjs.map