vue-devui/dropdown/index.umd.js

DevUI components based on Vite and Vue3

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