vexip-ui/lib/components/dropdown/dropdown.vue2.cjs

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

"use strict";const e=require("vue");require("../popper/index.cjs");const c=require("@vexip-ui/hooks"),l=require("@vexip-ui/config"),H=require("./dropdown-drop.cjs"),W=require("./props.cjs"),B=require("./hooks.cjs"),C=require("./symbol.cjs"),j=require("../popper/popper.vue.cjs"),S=["onKeydown"],F=e.defineComponent({name:"Dropdown",__name:"dropdown",props:W.dropdownProps,emits:["update:visible"],setup(N,{expose:_,emit:D}){const n=l.useNameHelper("dropdown"),q=N,t=l.useProps("dropdown",q,{visible:{default:!1,static:!0},placement:{default:"bottom",validator:r=>c.placementWhileList.includes(r)},outsideClose:!0,trigger:{default:"hover",validator:r=>["hover","click","custom"].includes(r)},label:{default:null,static:!0},transitionName:()=>n.ns("drop"),transfer:!1,dropClass:null,appear:!1,meta:null,alive:!1,custom:!1,shift:!0}),L=D,o=e.inject(C.DROPDOWN_STATE,null),{isRtl:O}=c.useRtl(),k=l.useHoverDelay(),u=!!o,P=e.toRef(t,"label"),m=e.ref(t.placement),s=e.ref(t.visible),h=e.ref(!1),A=u?e.ref(!1):e.toRef(t,"transfer"),E=e.computed(()=>!!(o!=null&&o.shift||t.shift)),g=c.useClickOutside(V),b=e.ref(),{reference:w,transferTo:M,updatePopper:R}=c.usePopper({placement:m,shift:E,transfer:A,wrapper:g,popper:e.computed(()=>{var r;return(r=b.value)==null?void 0:r.wrapper}),isDrop:!0,offset:u?[-5,0]:void 0}),$=B.useLabel(P,w),x=e.computed(()=>({[n.b()]:!0,[n.bs("vars")]:!0,[n.bm("inherit")]:t.inherit,[n.bm("visible")]:s.value})),T=e.computed(()=>(o==null?void 0:o.alive)||t.alive);e.provide(C.SELECT_HANDLER,null),!t.custom&&e.provide(C.DROPDOWN_STATE,e.reactive({alive:T,shift:E,handleSelect:K,handleTriggerEnter:p,handleTriggerLeave:d})),e.watch(()=>t.visible,r=>{s.value=r}),e.watch(()=>t.placement,r=>{y(r)}),e.watch(s,r=>{r&&R()}),e.onMounted(()=>{e.nextTick(()=>{y(t.placement)})}),_({isNested:u,currentVisible:s,isAlive:T,wrapper:g,reference:w,popper:b,handleTriggerEnter:p,handleTriggerLeave:d,handleTriggerClick:v});function a(r){s.value!==r&&(s.value=r,L("update:visible",r),l.emitEvent(t.onToggle,r))}function V(){l.emitEvent(t.onClickOutside),t.outsideClose&&t.trigger!=="custom"&&s.value&&(a(!1),l.emitEvent(t.onOutsideClose))}function K(r,i){t.trigger!=="custom"&&(a(!1),l.emitEvent(t.onSelect,r,i)),typeof(o==null?void 0:o.handleSelect)=="function"&&o.handleSelect([$.value,...r],[t.meta||{},...i])}function y(r){const[i]=r.split("-");u&&i!=="right"&&i!=="left"?m.value=O.value?"left-start":"right-start":m.value=r}const{timer:f}=c.useSetTimeout();function p(){t.trigger==="hover"&&(clearTimeout(f.hover),typeof(o==null?void 0:o.handleTriggerEnter)=="function"&&o.handleTriggerEnter(),f.hover=setTimeout(()=>{a(!0)},k.value))}function d(){t.trigger==="hover"&&(clearTimeout(f.hover),typeof(o==null?void 0:o.handleTriggerLeave)=="function"&&o.handleTriggerLeave(),f.hover=setTimeout(()=>{a(!1)},k.value))}function v(){t.trigger==="click"&&a(!s.value)}return(r,i)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:g,class:e.normalizeClass(x.value),onMouseenter:p,onMouseleave:d},[e.createElementVNode("div",{ref_key:"reference",ref:w,class:e.normalizeClass([e.unref(n).be("trigger"),s.value?e.unref(n).bem("trigger","active"):""]),onClick:v,onKeydown:[e.withKeys(e.withModifiers(v,["prevent"]),["enter"]),e.withKeys(e.withModifiers(v,["prevent"]),["space"])]},[e.renderSlot(r.$slots,"default")],42,S),e.createVNode(e.unref(H),null,{default:e.withCtx(()=>[e.createVNode(e.unref(j),{ref_key:"popper",ref:b,class:e.normalizeClass([e.unref(n).be("popper"),e.unref(n).bs("vars"),u?e.unref(n).bem("popper","nested"):null,e.unref(t).dropClass]),visible:s.value,alive:T.value||h.value,to:e.unref(M),transition:e.unref(t).transitionName,appear:e.unref(t).appear,onMouseenter:p,onMouseleave:d,onAfterEnter:i[0]||(i[0]=z=>h.value=!0),onAfterLeave:i[1]||(i[1]=z=>h.value=!1)},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"drop")]),_:3},8,["class","visible","alive","to","transition","appear"])]),_:3})],34))}});module.exports=F;
//# sourceMappingURL=dropdown.vue2.cjs.map