vue-devui/dropdown/index.umd.js

DevUI components based on Vite and Vue3

(function(C,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom","@vueuse/core"],e):(C=typeof globalThis!="undefined"?globalThis:C||self,e(C.index={},C.Vue,C.dom,C.core))})(this,function(C,e,A,U){"use strict";const H={visible:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},position:{type:Array,default:()=>["bottom","top","left","right"]},offset:{type:[Number,Object],default:4},shiftOffset:{type:Number},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""},destroyOnHide:{type:Boolean,default:!0},teleport:{type:[String,Object],default:"body"},appendToBody:{type:Boolean,default:!0}},D=Symbol("popper-trigger");function $(t){const o=Object.prototype.toString.call(t);return o.includes("object")&&o.includes("HTML")&&o.includes("Element")}function q(t){return t instanceof Element||$(t)?t:t&&typeof t=="object"&&(t.$el instanceof Element||$(t.$el))?t.$el:null}const x=new Map;function B(t,o,n){return t==null||t.addEventListener(o,n),()=>{t==null||t.removeEventListener(o,n)}}const I=({id:t,isOpen:o,origin:n,dropdownRef:i,props:u,emit:l})=>{let s=!1,a=!1;const{trigger:d,closeScope:p,closeOnMouseLeaveMenu:T}=e.toRefs(u),g=w=>{o.value=w,l("toggle",o.value)},m=async(w,P)=>{await new Promise(y=>setTimeout(y,50)),!(w==="origin"&&s||w==="dropdown"&&a)&&(P&&[...x.values()].reverse().forEach(y=>{setTimeout(()=>{var O;(O=y.toggle)==null||O.call(y)},0)}),g(!1))};e.watch([d,n,i],([w,P,y],O,E)=>{const V=q(P),c=[];setTimeout(()=>{c.push(B(document,"click",r=>{r.stopPropagation();const f=[...x.values()];!o.value||p.value==="none"||(y==null?void 0:y.contains(r.target))&&p.value==="blank"||f.some(h=>{var b;return(b=h.toggleEl)==null?void 0:b.contains(r.target)})&&f.some(h=>{var b;return(b=h.menuEl)==null?void 0:b.contains(r.target)})||([...x.values()].reverse().forEach(h=>{setTimeout(()=>{var b,v;(b=h.toggleEl)!=null&&b.contains(r.target)||(v=h.toggle)==null||v.call(h)},0)}),s=!1)}))},0),w==="click"?c.push(B(V,"click",()=>g(!o.value)),B(y,"mouseleave",r=>{var f;T.value&&!((f=x.get(t).child)!=null&&f.contains(r.relatedTarget))&&m("dropdown",!0)})):w==="hover"&&c.push(B(V,"mouseenter",()=>{a=!0,g(!0)}),B(V,"mouseleave",()=>{a=!1,m("origin")}),B(y,"mouseenter",()=>{s=!0,o.value=!0}),B(y,"mouseleave",r=>{var f;s=!1,!(r.relatedTarget&&((V==null?void 0:V.contains(r.relatedTarget))||((f=x.get(t).child)==null?void 0:f.contains(r.relatedTarget))))&&m("dropdown",!0)})),E(()=>c.forEach(r=>r()))})};function W(t,o,n,i,u,l){e.watch(o,(s,a)=>{a!==void 0&&(n.value=s,l("toggle",n.value))},{immediate:!0}),e.watch([n,u],([s,a])=>{var d;if(s){x.set(t,{...x.get(t),menuEl:a,toggle:()=>{n.value=!1,l("toggle",n.value)}});for(const p of x.values())(d=p.menuEl)!=null&&d.contains(i.value)&&(p.child=a)}}),e.onMounted(()=>{x.set(t,{toggleEl:i.value})}),e.onUnmounted(()=>{x.delete(t)})}function G(t,o,n){const{showAnimation:i,overlayClass:u,destroyOnHide:l}=e.toRefs(t),s=e.ref(!1),a=e.ref(!1),d=e.computed(()=>({transformOrigin:o.value==="top"?"0% 100%":"0% 0%",zIndex:"var(--devui-z-index-dropdown, 1052)"})),p=e.computed(()=>({"fade-in-bottom":i.value&&n.value&&o.value==="bottom","fade-in-top":i.value&&n.value&&o.value==="top",[`${u.value}`]:!0})),T=g=>{o.value=g.includes("top")||g.includes("right-end")||g.includes("left-end")?"top":"bottom"};return e.watch(n,g=>{s.value=l.value?g:!0,a.value=g}),{overlayModelValue:s,overlayShowValue:a,styles:d,classes:p,handlePositionChange:T}}const Y={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function K(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop,o=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${t}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{o?document.documentElement.setAttribute("style",o):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=t}}}function X(t,o){let n;const i=l=>{l.preventDefault(),o.emit("click",l),t.closeOnClickOverlay&&o.emit("update:modelValue",!1)},u=()=>{n==null||n()};return e.watch(()=>t.modelValue,l=>{l?t.lockScroll&&(n=K()):u()}),e.onUnmounted(u),{onClick:i}}function N(t,o,n){let i=t;return o&&(i+=`__${o}`),n&&(i+=`--${n}`),i}function k(t,o=!1){const n=o?`.devui-${t}`:`devui-${t}`;return{b:()=>N(n),e:a=>a?N(n,a):"",m:a=>a?N(n,"",a):"",em:(a,d)=>a&&d?N(n,a,d):""}}var ue="";e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:Y,emits:["update:modelValue","click"],setup(t,o){const{modelValue:n}=e.toRefs(t),i=k("fixed-overlay"),{onClick:u}=X(t,o);return()=>e.createVNode(e.Transition,{name:i.m("fade")},{default:()=>{var l,s;return[n.value&&e.createVNode("div",e.mergeProps({class:i.b()},o.attrs,{onClick:u}),[(s=(l=o.slots).default)==null?void 0:s.call(l)])]}})}});const J={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0},clickEventBubble:{type:Boolean,default:!1},fitOriginWidth:{type:Boolean,default:!1},autoUpdatePosition:{type:Boolean,default:!1}};function Q(t,o,n,i){let{x:u,y:l}=o;if(!t){const{width:s,height:a}=i;u&&n.includes("start")&&(u=12),u&&n.includes("end")&&(u=Math.round(s-24)),l&&n.includes("start")&&(l=10),l&&n.includes("end")&&(l=a-14)}return{x:u,y:l}}function Z(t,o){const{fitOriginWidth:n,position:i,showArrow:u}=e.toRefs(t),l=e.ref(),s=e.ref(),a=e.ref(0);let d,p;const T=e.computed(()=>n.value?{width:a.value+"px"}:{}),g=(c,r,f,h)=>{const{x:b,y:v}=Q(t.isArrowCenter,f,r,h.getBoundingClientRect()),S={top:"bottom",right:"left",bottom:"top",left:"right"}[r.split("-")[0]];Object.assign(c.style,{left:b?`${b}px`:"",top:v?`${v}px`:"",right:"",bottom:"",[S]:"-4px"})},m=async()=>{const c=t.origin,r=e.unref(l.value),f=e.unref(s.value),[h,...b]=i.value,v=[A.offset(t.offset)];v.push(b.length?A.flip({fallbackPlacements:b}):A.flip()),u.value&&v.push(A.arrow({element:s.value}));const{x:S,y:ae,placement:z,middlewareData:re}=await A.computePosition(c,r,{strategy:"fixed",placement:h,middleware:v});let ie=S,se=ae;o("positionChange",z),Object.assign(r.style,{top:`${se}px`,left:`${ie}px`}),t.showArrow&&g(f,z,re.arrow,r)},w=c=>{var f,h;const r=c.target;r!=null&&r.contains((h=(f=t.origin)==null?void 0:f.$el)!=null?h:t.origin)&&m()},P=c=>{a.value=c.getBoundingClientRect().width,m()},y=()=>{var c,r;if(n.value&&typeof window!="undefined"){const f=(r=(c=t.origin)==null?void 0:c.$el)!=null?r:t.origin;f&&(d=new window.ResizeObserver(()=>P(f)),d.observe(f))}},O=()=>{var r,f;const c=(f=(r=t.origin)==null?void 0:r.$el)!=null?f:t.origin;c&&(d==null||d.unobserve(c))},E=()=>{t.autoUpdatePosition&&typeof window!="undefined"&&l.value&&(p=new window.ResizeObserver(m),p.observe(l.value))},V=()=>{l.value&&(p==null||p.unobserve(l.value))};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(e.nextTick(m),window.addEventListener("scroll",w,!0),window.addEventListener("resize",m),y(),e.nextTick(E)):(window.removeEventListener("scroll",w,!0),window.removeEventListener("resize",m),O(),V())}),e.onUnmounted(()=>{window.removeEventListener("scroll",w,!0),window.removeEventListener("resize",m),O(),V()}),{arrowRef:s,overlayRef:l,styles:T,updatePosition:m}}var de="";const j=e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:J,emits:["update:modelValue","positionChange"],setup(t,{slots:o,attrs:n,emit:i,expose:u}){const l=k("flexible-overlay"),{clickEventBubble:s}=e.toRefs(t),{arrowRef:a,overlayRef:d,styles:p,updatePosition:T}=Z(t,i);return u({updatePosition:T}),()=>{var g;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:d,class:l.b(),style:p.value},n,{onClick:e.withModifiers(()=>({}),[s.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(g=o.default)==null?void 0:g.call(o),t.showArrow&&e.createVNode("div",{ref:a,class:l.e("arrow")},null)])}}});/**
* @vue/shared v3.5.22
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/const ee=t=>t!==null&&typeof t=="object",te=k("popper-trigger");function L(t){return e.h("span",{class:te.b()},t)}function F(t){for(const o of t){if(ee(o)){if(o.type===e.Comment)continue;return o.type==="svg"||o.type===e.Text?L(o):o.type===e.Fragment?F(o.children):o}return L(o)}return null}var oe=e.defineComponent({name:"DPopperTrigger",setup(t,o){const{slots:n,attrs:i}=o;return()=>{var a;const u=(a=n.default)==null?void 0:a.call(n,i),l=e.inject(D);if(!u)return null;const s=F(u);return s?e.withDirectives(e.cloneVNode(s,i),[[{mounted(d){l.value=d},updated(d){l.value=d},unmounted(){l.value=null}}]]):null}}}),ce="";let ne=1;var R=e.defineComponent({name:"DDropdown",inheritAttrs:!1,props:H,emits:["toggle"],setup(t,{slots:o,attrs:n,emit:i,expose:u}){const{visible:l,position:s,offset:a,destroyOnHide:d,shiftOffset:p,showAnimation:T,teleport:g}=e.toRefs(t),m=e.ref(),w=e.ref(),P=e.ref(),y=`dropdown_${ne++}`,O=e.ref(!1),E=e.ref("bottom"),V=k("dropdown");e.provide(D,m),I({id:y,isOpen:O,origin:m,dropdownRef:w,props:t,emit:i}),W(y,l,O,m,w,i);const{overlayModelValue:c,overlayShowValue:r,styles:f,classes:h,handlePositionChange:b}=G(t,E,O);return e.watch(r,v=>{e.nextTick(()=>{!d.value&&v&&P.value.updatePosition()})}),u({updatePosition:()=>P.value.updatePosition()}),()=>e.createVNode(e.Fragment,null,[e.createVNode(oe,null,{default:()=>{var v;return[(v=o.default)==null?void 0:v.call(o)]}}),e.createVNode(e.Teleport,{to:g.value,disabled:!t.appendToBody},{default:()=>[e.createVNode(e.Transition,{name:T.value?V.m(`fade-${E.value}`):""},{default:()=>[e.withDirectives(e.createVNode(j,{modelValue:c.value,"onUpdate:modelValue":v=>c.value=v,ref:P,origin:m.value,position:s.value,offset:a.value,shiftOffset:p==null?void 0:p.value,onPositionChange:b,"click-event-bubble":!0,class:h.value,style:f.value},{default:()=>{var v;return[e.createVNode("div",e.mergeProps({ref:w,class:V.e("menu-wrap")},n),[(v=o.menu)==null?void 0:v.call(o)])]}}),[[e.vShow,r.value]])]})]})])}});const _={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},align:{type:String,default:null},offset:{type:[Number,Object],default:4},clickOutside:{type:Function,default:()=>!0},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""}};var M=e.defineComponent({name:"DDropdownMenu",inheritAttrs:!1,props:_,emits:["update:modelValue"],setup(t,{slots:o,attrs:n,emit:i}){const{modelValue:u,origin:l,position:s,align:a,offset:d,clickOutside:p,showAnimation:T,overlayClass:g}=e.toRefs(t),m=e.ref(null),w=k("dropdown");U.onClickOutside(m,E=>{var V,c;((V=p.value)==null?void 0:V.call(p))&&!((c=l==null?void 0:l.value)!=null&&c.contains(E.target))&&i("update:modelValue",!1)});const P=e.ref("bottom"),y=E=>{P.value=E.split("-")[0]==="top"?"top":"bottom"},O=e.computed(()=>({transformOrigin:P.value==="top"?"0% 100%":"0% 0%"}));return()=>e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(e.Transition,{name:T.value?w.m(`fade-${P.value}`):""},{default:()=>[e.createVNode(j,{modelValue:u.value,"onUpdate:modelValue":E=>u.value=E,origin:l==null?void 0:l.value,position:s.value,align:a.value,offset:d.value,onPositionChange:y,class:g.value,style:O.value},{default:()=>{var E;return[e.createVNode("div",e.mergeProps({ref:m,class:w.e("menu-wrap")},n),[(E=o.default)==null?void 0:E.call(o)])]}})]})]})}}),le={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"50%",install(t){t.component(R.name,R),t.component(M.name,M)}};C.Dropdown=R,C.DropdownMenu=M,C.default=le,C.dropdownMenuProps=_,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});