vue-devui 1.6.36-alpha.0 → 1.6.36-alpha.2

package/dropdown/index.es.js

@@ -367,6 +367,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -394,6 +398,7 @@ function useOverlay(props, emit) {
   const arrowRef = ref();
   const overlayWidth = ref(0);
   let originObserver;
+  let overlayObserver;
   const styles = computed(() => {
     if (fitOriginWidth.value) {
       return { width: overlayWidth.value + "px" };
@@ -464,6 +469,15 @@ function useOverlay(props, emit) {
     const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
     originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
   };
+  const observeOverlay = () => {
+    if (props.autoUpdatePosition && typeof window !== "undefined" && overlayRef.value) {
+      overlayObserver = new window.ResizeObserver(updatePosition);
+      overlayObserver.observe(overlayRef.value);
+    }
+  };
+  const unobserveOverlay = () => {
+    overlayRef.value && (overlayObserver == null ? void 0 : overlayObserver.unobserve(overlayRef.value));
+  };
   watch(
     () => props.modelValue,
     () => {
@@ -472,10 +486,12 @@ function useOverlay(props, emit) {
         window.addEventListener("scroll", scrollCallback, true);
         window.addEventListener("resize", updatePosition);
         observeOrigin();
+        nextTick(observeOverlay);
       } else {
         window.removeEventListener("scroll", scrollCallback, true);
         window.removeEventListener("resize", updatePosition);
         unobserveOrigin();
+        unobserveOverlay();
       }
     }
   );
@@ -483,6 +499,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }

package/dropdown/index.umd.js

@@ -1,5 +1,5 @@
-(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,B,_){"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"},appendToBody:{type:Boolean,default:!0}},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:c,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 p;(p=g.toggle)==null||p.call(g)},0)}),f(!1))};e.watch([c,n,r],([h,C,g],p,s)=>{const d=H(C),v=[];setTimeout(()=>{v.push(A(document,"click",m=>{m.stopPropagation();const w=[...x.values()];!o.value||y.value==="none"||(g==null?void 0:g.contains(m.target))&&y.value==="blank"||w.some(V=>{var O;return(O=V.toggleEl)==null?void 0:O.contains(m.target)})&&w.some(V=>{var O;return(O=V.menuEl)==null?void 0:O.contains(m.target)})||([...x.values()].reverse().forEach(V=>{setTimeout(()=>{var O,E;(O=V.toggleEl)!=null&&O.contains(m.target)||(E=V.toggle)==null||E.call(V)},0)}),i=!1)}))},0),h==="click"?v.push(A(d,"click",()=>f(!o.value)),A(g,"mouseleave",m=>{var w;T.value&&!((w=x.get(t).child)!=null&&w.contains(m.relatedTarget))&&b("dropdown",!0)})):h==="hover"&&v.push(A(d,"mouseenter",()=>{a=!0,f(!0)}),A(d,"mouseleave",()=>{a=!1,b("origin")}),A(g,"mouseenter",()=>{i=!0,o.value=!0}),A(g,"mouseleave",m=>{var w;i=!1,!(m.relatedTarget&&((d==null?void 0:d.contains(m.relatedTarget))||((w=x.get(t).child)==null?void 0:w.contains(m.relatedTarget))))&&b("dropdown",!0)})),s(()=>v.forEach(m=>m()))})};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 c;if(i){x.set(t,{...x.get(t),menuEl:a,toggle:()=>{n.value=!1,l("toggle",n.value)}});for(const y of x.values())(c=y.menuEl)!=null&&c.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),c=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:c,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 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,c)=>a&&c?N(n,a,c):""}}var re="";e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:W,emits:["update:modelValue","click"],setup(t,o){const{modelValue:n}=e.toRefs(t),r=k("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 c;const y=e.computed(()=>n.value?{width:a.value+"px"}:{}),T=(p,s,d,v)=>{const{x:m,y:w}=X(t.isArrowCenter,d,s,v.getBoundingClientRect()),V={top:"bottom",right:"left",bottom:"top",left:"right"}[s.split("-")[0]];Object.assign(p.style,{left:m?`${m}px`:"",top:w?`${w}px`:"",right:"",bottom:"",[V]:"-4px"})},f=async()=>{const p=t.origin,s=e.unref(l.value),d=e.unref(i.value),[v,...m]=r.value,w=[B.offset(t.offset)];w.push(m.length?B.flip({fallbackPlacements:m}):B.flip()),u.value&&w.push(B.arrow({element:i.value}));const{x:V,y:O,placement:E,middlewareData:ne}=await B.computePosition(p,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(d,E,ne.arrow,s)},b=p=>{var d,v;const s=p.target;s!=null&&s.contains((v=(d=t.origin)==null?void 0:d.$el)!=null?v:t.origin)&&f()},h=p=>{a.value=p.getBoundingClientRect().width,f()},C=()=>{var p,s;if(n.value&&typeof window!="undefined"){const d=(s=(p=t.origin)==null?void 0:p.$el)!=null?s:t.origin;d&&(c=new window.ResizeObserver(()=>h(d)),c.observe(d))}},g=()=>{var s,d;const p=(d=(s=t.origin)==null?void 0:s.$el)!=null?d:t.origin;p&&(c==null||c.unobserve(p))};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=k("flexible-overlay"),{clickEventBubble:i}=e.toRefs(t),{arrowRef:a,overlayRef:c,styles:y,updatePosition:T}=J(t,r);return u({updatePosition:T}),()=>{var f;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:c,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)])}}});/**
+(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 Q=t=>t!==null&&typeof t=="object",Z=k("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(c){l.value=c},updated(c){l.value=c},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:c,shiftOffset:y,showAnimation:T,teleport:f}=e.toRefs(t),b=e.ref(),h=e.ref(),C=e.ref(),g=`dropdown_${te++}`,p=e.ref(!1),s=e.ref("bottom"),d=k("dropdown");e.provide(S,b),q({id:g,isOpen:p,origin:b,dropdownRef:h,props:t,emit:r}),U(g,l,p,b,h,r);const{overlayModelValue:v,overlayShowValue:m,styles:w,classes:V,handlePositionChange:O}=I(t,s,p);return e.watch(m,E=>{e.nextTick(()=>{!c.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,disabled:!t.appendToBody},{default:()=>[e.createVNode(e.Transition,{name:T.value?d.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:d.e("menu-wrap")},n),[(E=o.menu)==null?void 0:E.call(o)])]}}),[[e.vShow,m.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:c,clickOutside:y,showAnimation:T,overlayClass:f}=e.toRefs(t),b=e.ref(null),h=k("dropdown");_.onClickOutside(b,s=>{var d,v;((d=y.value)==null?void 0:d.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"},p=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:c.value,onPositionChange:g,class:f.value,style:p.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"}})});
+**/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"}})});

package/editable-select/index.es.js

@@ -217,6 +217,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -244,6 +248,7 @@ function useOverlay(props, emit) {
   const arrowRef = ref();
   const overlayWidth = ref(0);
   let originObserver;
+  let overlayObserver;
   const styles = computed(() => {
     if (fitOriginWidth.value) {
       return { width: overlayWidth.value + "px" };
@@ -314,6 +319,15 @@ function useOverlay(props, emit) {
     const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
     originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
   };
+  const observeOverlay = () => {
+    if (props.autoUpdatePosition && typeof window !== "undefined" && overlayRef.value) {
+      overlayObserver = new window.ResizeObserver(updatePosition);
+      overlayObserver.observe(overlayRef.value);
+    }
+  };
+  const unobserveOverlay = () => {
+    overlayRef.value && (overlayObserver == null ? void 0 : overlayObserver.unobserve(overlayRef.value));
+  };
   watch(
     () => props.modelValue,
     () => {
@@ -322,10 +336,12 @@ function useOverlay(props, emit) {
         window.addEventListener("scroll", scrollCallback, true);
         window.addEventListener("resize", updatePosition);
         observeOrigin();
+        nextTick(observeOverlay);
       } else {
         window.removeEventListener("scroll", scrollCallback, true);
         window.removeEventListener("resize", updatePosition);
         unobserveOrigin();
+        unobserveOverlay();
       }
     }
   );
@@ -333,6 +349,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }