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

package/modal/index.es.js

@@ -385,6 +385,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -412,6 +416,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" };
@@ -482,6 +487,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,
     () => {
@@ -490,10 +504,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();
       }
     }
   );
@@ -501,6 +517,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }

package/modal/index.umd.js

@@ -1,7 +1,7 @@
-(function(b,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],e):(b=typeof globalThis!="undefined"?globalThis:b||self,e(b.index={},b.Vue,b.dom))})(this,function(b,e,x){"use strict";const z={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},lockScroll:{type:Boolean,default:!0},draggable:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function},escapable:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},showAnimation:{type:Boolean,default:!0},showOverlay:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!0},type:{type:String,default:""},keepLast:{type:Boolean,default:!1}},j={name:{type:String,default:""},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},_={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function B(o,t,n){let l=o;return t&&(l+=`__${t}`),n&&(l+=`--${n}`),l}function C(o,t=!1){const n=t?`.devui-${o}`:`devui-${o}`;return{b:()=>B(n),e:a=>a?B(n,a):"",m:a=>a?B(n,"",a):"",em:(a,c)=>a&&c?B(n,a,c):""}}var de="",W=e.defineComponent({name:"DSvgIcon",props:_,setup(o){const{name:t,color:n,size:l}=e.toRefs(o),r=C("svg-icon"),i=e.computed(()=>`#icon-${t.value}`),s=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),a={width:s.value,height:s.value};return()=>e.createVNode("svg",{class:r.b(),style:a},[e.createVNode("use",{"xlink:href":i.value,fill:n.value},null)])}});function q(o){return/^((http|https):)?\/\//.test(o)}function G(o,t){const{component:n,name:l,size:r,color:i,classPrefix:s,rotate:a}=e.toRefs(o),c=C("icon"),y=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),m=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(W),u=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(a==null?void 0:a.value)==="infinite"&&c.m("spin")],style:{width:y.value||"",transform:`rotate(${a==null?void 0:a.value}deg)`,verticalAlign:"middle"}},t.attrs),null),g=()=>e.createVNode(m,e.mergeProps({name:l.value,color:i.value,size:y.value,class:[(a==null?void 0:a.value)==="infinite"&&c.m("spin")],style:{transform:`rotate(${a==null?void 0:a.value}deg)`}},t.attrs),null),V=()=>{const E=/^icon-/.test(l.value)?l.value:`${s.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[s.value,E,(a==null?void 0:a.value)==="infinite"&&c.m("spin")],style:{fontSize:y.value,color:i.value,transform:`rotate(${a==null?void 0:a.value}deg)`}},t.attrs),null)};return{iconDom:()=>n.value?g():q(l.value)?u():V()}}var F=e.defineComponent({name:"DIcon",props:j,emits:["click"],setup(o,t){const{disabled:n,operable:l}=e.toRefs(o),{iconDom:r}=G(o,t),i=C("icon"),s=e.computed(()=>({[i.e("container")]:!0,[i.m("disabled")]:n.value,[i.m("operable")]:l.value,[i.m("no-slots")]:!Object.keys(t.slots).length})),a=c=>{n.value||t.emit("click",c)};return()=>{var c,y,m,u;return e.createVNode("div",{class:s.value,onClick:a},[(y=(c=t.slots).prefix)==null?void 0:y.call(c),r(),(u=(m=t.slots).suffix)==null?void 0:u.call(m)])}}}),ue="";e.defineComponent({name:"DIconGroup",setup(o,t){const n=C("icon-group");return()=>{var l,r;return e.createVNode("div",{class:n.b()},[(r=(l=t.slots).default)==null?void 0:r.call(l)])}}});const K={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function U(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const o=document.documentElement.scrollTop,t=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${o}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{t?document.documentElement.setAttribute("style",t):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=o}}}function Z(o,t){let n;const l=i=>{i.preventDefault(),t.emit("click",i),o.closeOnClickOverlay&&t.emit("update:modelValue",!1)},r=()=>{n==null||n()};return e.watch(()=>o.modelValue,i=>{i?o.lockScroll&&(n=U()):r()}),e.onUnmounted(r),{onClick:l}}var fe="";const J=e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:K,emits:["update:modelValue","click"],setup(o,t){const{modelValue:n}=e.toRefs(o),l=C("fixed-overlay"),{onClick:r}=Z(o,t);return()=>e.createVNode(e.Transition,{name:l.m("fade")},{default:()=>{var i,s;return[n.value&&e.createVNode("div",e.mergeProps({class:l.b()},t.attrs,{onClick:r}),[(s=(i=t.slots).default)==null?void 0:s.call(i)])]}})}}),Q={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 ee(o,t,n,l){let{x:r,y:i}=t;if(!o){const{width:s,height:a}=l;r&&n.includes("start")&&(r=12),r&&n.includes("end")&&(r=Math.round(s-24)),i&&n.includes("start")&&(i=10),i&&n.includes("end")&&(i=a-14)}return{x:r,y:i}}function te(o,t){const{fitOriginWidth:n,position:l,showArrow:r}=e.toRefs(o),i=e.ref(),s=e.ref(),a=e.ref(0);let c;const y=e.computed(()=>n.value?{width:a.value+"px"}:{}),m=(p,f,h,w)=>{const{x:d,y:N}=ee(o.isArrowCenter,h,f,w.getBoundingClientRect()),k={top:"bottom",right:"left",bottom:"top",left:"right"}[f.split("-")[0]];Object.assign(p.style,{left:d?`${d}px`:"",top:N?`${N}px`:"",right:"",bottom:"",[k]:"-4px"})},u=async()=>{const p=o.origin,f=e.unref(i.value),h=e.unref(s.value),[w,...d]=l.value,N=[x.offset(o.offset)];N.push(d.length?x.flip({fallbackPlacements:d}):x.flip()),r.value&&N.push(x.arrow({element:s.value}));const{x:k,y:R,placement:D,middlewareData:A}=await x.computePosition(p,f,{strategy:"fixed",placement:w,middleware:N});let S=k,$=R;t("positionChange",D),Object.assign(f.style,{top:`${$}px`,left:`${S}px`}),o.showArrow&&m(h,D,A.arrow,f)},g=p=>{var h,w;const f=p.target;f!=null&&f.contains((w=(h=o.origin)==null?void 0:h.$el)!=null?w:o.origin)&&u()},V=p=>{a.value=p.getBoundingClientRect().width,u()},v=()=>{var p,f;if(n.value&&typeof window!="undefined"){const h=(f=(p=o.origin)==null?void 0:p.$el)!=null?f:o.origin;h&&(c=new window.ResizeObserver(()=>V(h)),c.observe(h))}},E=()=>{var f,h;const p=(h=(f=o.origin)==null?void 0:f.$el)!=null?h:o.origin;p&&(c==null||c.unobserve(p))};return e.watch(()=>o.modelValue,()=>{o.modelValue&&o.origin?(e.nextTick(u),window.addEventListener("scroll",g,!0),window.addEventListener("resize",u),v()):(window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",u),E())}),e.onUnmounted(()=>{window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",u),E()}),{arrowRef:s,overlayRef:i,styles:y,updatePosition:u}}var me="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:Q,emits:["update:modelValue","positionChange"],setup(o,{slots:t,attrs:n,emit:l,expose:r}){const i=C("flexible-overlay"),{clickEventBubble:s}=e.toRefs(o),{arrowRef:a,overlayRef:c,styles:y,updatePosition:m}=te(o,l);return r({updatePosition:m}),()=>{var u;return o.modelValue&&e.createVNode("div",e.mergeProps({ref:c,class:i.b(),style:y.value},n,{onClick:e.withModifiers(()=>({}),[s.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(u=t.default)==null?void 0:u.call(t),o.showArrow&&e.createVNode("div",{ref:a,class:i.e("arrow")},null)])}}});const oe=typeof window!="undefined";function ne(o,t){function n(){t("update:modelValue",!1),t("close")}function l(){o.beforeClose?o.beforeClose(n):n()}function r(i){i.code==="Escape"&&l()}return e.onMounted(()=>{o.escapable&&window.addEventListener("keydown",r)}),e.onUnmounted(()=>{o.escapable&&window.addEventListener("keydown",r)}),{execClose:l}}function le(o){let t;const n=()=>{t==null||t()};e.watch(()=>o.modelValue,l=>{l?o.lockScroll&&(t=U()):n()},{immediate:!0}),e.onUnmounted(n)}function X(o,t="px"){return o?typeof o=="string"?o:typeof o=="number"?`${o}${t}`:"":""}const ae=(o,t,n)=>{const l=e.ref("translate(-50%, -50%)");let r={offsetX:0,offsetY:0};const i=y=>{const m=y.clientX,u=y.clientY,{offsetX:g,offsetY:V}=r,v=o.value.getBoundingClientRect(),E=v.left,p=v.top,f=v.width,h=v.height,w=document.documentElement.clientWidth,d=document.documentElement.clientHeight,N=-E+g,k=-p+V,R=w-E-f+g,D=d-p-h+V,A=$=>{const H=Math.min(Math.max(g+$.clientX-m,N),R),Y=Math.min(Math.max(V+$.clientY-u,k),D);r={offsetX:H,offsetY:Y},l.value=`translate(calc(-50% + ${X(H)}), calc(-50% + ${X(Y)}))`},S=()=>{document.removeEventListener("mousemove",A),document.removeEventListener("mouseup",S)};document.addEventListener("mousemove",A),document.addEventListener("mouseup",S)},s=()=>{t.value&&o.value&&t.value.addEventListener("mousedown",i)},a=()=>{t.value&&o.value&&t.value.removeEventListener("mousedown",i)};return e.onMounted(()=>{e.watchEffect(()=>{n.value?s():a()})}),e.onBeforeUnmount(()=>{a()}),{clearPosition:()=>{r={offsetX:0,offsetY:0},l.value="translate(-50%, -50%)"},modalPosition:l}};var M=e.defineComponent({name:"DModalHeader",setup(o,{slots:t}){const n=C("modal");return()=>{var l;return e.createVNode("div",{class:n.e("header")},[(l=t.default)==null?void 0:l.call(t)])}}}),O=e.defineComponent({name:"DModalBody",setup(o,{slots:t}){const n=C("modal");return()=>{var l;return e.createVNode("div",{class:n.e("body")},[(l=t.default)==null?void 0:l.call(t)])}}});function re(){return e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{id:"modal-close",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{transform:"translate(3.000000, 3.000000)",fill:"#71757F","fill-rule":"nonzero",id:"modal-close-road"},[e.createVNode("path",{d:`M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 
+(function(w,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],e):(w=typeof globalThis!="undefined"?globalThis:w||self,e(w.index={},w.Vue,w.dom))})(this,function(w,e,M){"use strict";const U={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},lockScroll:{type:Boolean,default:!0},draggable:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function},escapable:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},showAnimation:{type:Boolean,default:!0},showOverlay:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!0},type:{type:String,default:""},keepLast:{type:Boolean,default:!1}},j={name:{type:String,default:""},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},_={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function D(t,o,n){let l=t;return o&&(l+=`__${o}`),n&&(l+=`--${n}`),l}function b(t,o=!1){const n=o?`.devui-${t}`:`devui-${t}`;return{b:()=>D(n),e:a=>a?D(n,a):"",m:a=>a?D(n,"",a):"",em:(a,d)=>a&&d?D(n,a,d):""}}var ue="",W=e.defineComponent({name:"DSvgIcon",props:_,setup(t){const{name:o,color:n,size:l}=e.toRefs(t),r=b("svg-icon"),i=e.computed(()=>`#icon-${o.value}`),c=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),a={width:c.value,height:c.value};return()=>e.createVNode("svg",{class:r.b(),style:a},[e.createVNode("use",{"xlink:href":i.value,fill:n.value},null)])}});function q(t){return/^((http|https):)?\/\//.test(t)}function G(t,o){const{component:n,name:l,size:r,color:i,classPrefix:c,rotate:a}=e.toRefs(t),d=b("icon"),f=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),p=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(W),y=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(a==null?void 0:a.value)==="infinite"&&d.m("spin")],style:{width:f.value||"",transform:`rotate(${a==null?void 0:a.value}deg)`,verticalAlign:"middle"}},o.attrs),null),u=()=>e.createVNode(p,e.mergeProps({name:l.value,color:i.value,size:f.value,class:[(a==null?void 0:a.value)==="infinite"&&d.m("spin")],style:{transform:`rotate(${a==null?void 0:a.value}deg)`}},o.attrs),null),h=()=>{const V=/^icon-/.test(l.value)?l.value:`${c.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[c.value,V,(a==null?void 0:a.value)==="infinite"&&d.m("spin")],style:{fontSize:f.value,color:i.value,transform:`rotate(${a==null?void 0:a.value}deg)`}},o.attrs),null)};return{iconDom:()=>n.value?u():q(l.value)?y():h()}}var X=e.defineComponent({name:"DIcon",props:j,emits:["click"],setup(t,o){const{disabled:n,operable:l}=e.toRefs(t),{iconDom:r}=G(t,o),i=b("icon"),c=e.computed(()=>({[i.e("container")]:!0,[i.m("disabled")]:n.value,[i.m("operable")]:l.value,[i.m("no-slots")]:!Object.keys(o.slots).length})),a=d=>{n.value||o.emit("click",d)};return()=>{var d,f,p,y;return e.createVNode("div",{class:c.value,onClick:a},[(f=(d=o.slots).prefix)==null?void 0:f.call(d),r(),(y=(p=o.slots).suffix)==null?void 0:y.call(p)])}}}),fe="";e.defineComponent({name:"DIconGroup",setup(t,o){const n=b("icon-group");return()=>{var l,r;return e.createVNode("div",{class:n.b()},[(r=(l=o.slots).default)==null?void 0:r.call(l)])}}});const K={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function H(){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 Z(t,o){let n;const l=i=>{i.preventDefault(),o.emit("click",i),t.closeOnClickOverlay&&o.emit("update:modelValue",!1)},r=()=>{n==null||n()};return e.watch(()=>t.modelValue,i=>{i?t.lockScroll&&(n=H()):r()}),e.onUnmounted(r),{onClick:l}}var me="";const J=e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:K,emits:["update:modelValue","click"],setup(t,o){const{modelValue:n}=e.toRefs(t),l=b("fixed-overlay"),{onClick:r}=Z(t,o);return()=>e.createVNode(e.Transition,{name:l.m("fade")},{default:()=>{var i,c;return[n.value&&e.createVNode("div",e.mergeProps({class:l.b()},o.attrs,{onClick:r}),[(c=(i=o.slots).default)==null?void 0:c.call(i)])]}})}}),Q={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 ee(t,o,n,l){let{x:r,y:i}=o;if(!t){const{width:c,height:a}=l;r&&n.includes("start")&&(r=12),r&&n.includes("end")&&(r=Math.round(c-24)),i&&n.includes("start")&&(i=10),i&&n.includes("end")&&(i=a-14)}return{x:r,y:i}}function te(t,o){const{fitOriginWidth:n,position:l,showArrow:r}=e.toRefs(t),i=e.ref(),c=e.ref(),a=e.ref(0);let d,f;const p=e.computed(()=>n.value?{width:a.value+"px"}:{}),y=(m,s,g,C)=>{const{x,y:N}=ee(t.isArrowCenter,g,s,C.getBoundingClientRect()),B={top:"bottom",right:"left",bottom:"top",left:"right"}[s.split("-")[0]];Object.assign(m.style,{left:x?`${x}px`:"",top:N?`${N}px`:"",right:"",bottom:"",[B]:"-4px"})},u=async()=>{const m=t.origin,s=e.unref(i.value),g=e.unref(c.value),[C,...x]=l.value,N=[M.offset(t.offset)];N.push(x.length?M.flip({fallbackPlacements:x}):M.flip()),r.value&&N.push(M.arrow({element:c.value}));const{x:B,y:T,placement:L,middlewareData:I}=await M.computePosition(m,s,{strategy:"fixed",placement:C,middleware:N});let R=B,ce=T;o("positionChange",L),Object.assign(s.style,{top:`${ce}px`,left:`${R}px`}),t.showArrow&&y(g,L,I.arrow,s)},h=m=>{var g,C;const s=m.target;s!=null&&s.contains((C=(g=t.origin)==null?void 0:g.$el)!=null?C:t.origin)&&u()},v=m=>{a.value=m.getBoundingClientRect().width,u()},V=()=>{var m,s;if(n.value&&typeof window!="undefined"){const g=(s=(m=t.origin)==null?void 0:m.$el)!=null?s:t.origin;g&&(d=new window.ResizeObserver(()=>v(g)),d.observe(g))}},E=()=>{var s,g;const m=(g=(s=t.origin)==null?void 0:s.$el)!=null?g:t.origin;m&&(d==null||d.unobserve(m))},P=()=>{t.autoUpdatePosition&&typeof window!="undefined"&&i.value&&(f=new window.ResizeObserver(u),f.observe(i.value))},k=()=>{i.value&&(f==null||f.unobserve(i.value))};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(e.nextTick(u),window.addEventListener("scroll",h,!0),window.addEventListener("resize",u),V(),e.nextTick(P)):(window.removeEventListener("scroll",h,!0),window.removeEventListener("resize",u),E(),k())}),e.onUnmounted(()=>{window.removeEventListener("scroll",h,!0),window.removeEventListener("resize",u),E(),k()}),{arrowRef:c,overlayRef:i,styles:p,updatePosition:u}}var pe="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:Q,emits:["update:modelValue","positionChange"],setup(t,{slots:o,attrs:n,emit:l,expose:r}){const i=b("flexible-overlay"),{clickEventBubble:c}=e.toRefs(t),{arrowRef:a,overlayRef:d,styles:f,updatePosition:p}=te(t,l);return r({updatePosition:p}),()=>{var y;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:d,class:i.b(),style:f.value},n,{onClick:e.withModifiers(()=>({}),[c.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(y=o.default)==null?void 0:y.call(o),t.showArrow&&e.createVNode("div",{ref:a,class:i.e("arrow")},null)])}}});const oe=typeof window!="undefined";function ne(t,o){function n(){o("update:modelValue",!1),o("close")}function l(){t.beforeClose?t.beforeClose(n):n()}function r(i){i.code==="Escape"&&l()}return e.onMounted(()=>{t.escapable&&window.addEventListener("keydown",r)}),e.onUnmounted(()=>{t.escapable&&window.addEventListener("keydown",r)}),{execClose:l}}function le(t){let o;const n=()=>{o==null||o()};e.watch(()=>t.modelValue,l=>{l?t.lockScroll&&(o=H()):n()},{immediate:!0}),e.onUnmounted(n)}function Y(t,o="px"){return t?typeof t=="string"?t:typeof t=="number"?`${t}${o}`:"":""}const ae=(t,o,n)=>{const l=e.ref("translate(-50%, -50%)");let r={offsetX:0,offsetY:0};const i=f=>{const p=f.clientX,y=f.clientY,{offsetX:u,offsetY:h}=r,v=t.value.getBoundingClientRect(),V=v.left,E=v.top,P=v.width,k=v.height,m=document.documentElement.clientWidth,s=document.documentElement.clientHeight,g=-V+u,C=-E+h,x=m-V-P+u,N=s-E-k+h,B=L=>{const I=Math.min(Math.max(u+L.clientX-p,g),x),R=Math.min(Math.max(h+L.clientY-y,C),N);r={offsetX:I,offsetY:R},l.value=`translate(calc(-50% + ${Y(I)}), calc(-50% + ${Y(R)}))`},T=()=>{document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",T)};document.addEventListener("mousemove",B),document.addEventListener("mouseup",T)},c=()=>{o.value&&t.value&&o.value.addEventListener("mousedown",i)},a=()=>{o.value&&t.value&&o.value.removeEventListener("mousedown",i)};return e.onMounted(()=>{e.watchEffect(()=>{n.value?c():a()})}),e.onBeforeUnmount(()=>{a()}),{clearPosition:()=>{r={offsetX:0,offsetY:0},l.value="translate(-50%, -50%)"},modalPosition:l}};var O=e.defineComponent({name:"DModalHeader",setup(t,{slots:o}){const n=b("modal");return()=>{var l;return e.createVNode("div",{class:n.e("header")},[(l=o.default)==null?void 0:l.call(o)])}}}),A=e.defineComponent({name:"DModalBody",setup(t,{slots:o}){const n=b("modal");return()=>{var l;return e.createVNode("div",{class:n.e("body")},[(l=o.default)==null?void 0:l.call(o)])}}});function ie(){return e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{id:"modal-close",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{transform:"translate(3.000000, 3.000000)",fill:"#71757F","fill-rule":"nonzero",id:"modal-close-road"},[e.createVNode("path",{d:`M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 
 						L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.5464049 
 						9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245 
 						-0.353553391,-0.353553391 Z`},null),e.createVNode("path",{d:`M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039 
 						10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155 
 						-0.158291245,10.5488155 -0.353553391,10.3535534 C-0.527119742,10.179987 -0.546404893,9.91056264 -0.411408841,9.7156945 L-0.353553391,9.64644661 
-						L9.64644661,-0.353553391 Z`},null)])])])}var pe="",P=e.defineComponent({name:"DModal",inheritAttrs:!1,props:z,emits:["update:modelValue","close"],setup(o,{slots:t,attrs:n,emit:l}){const r=C("modal"),{modelValue:i,title:s,showClose:a,showOverlay:c,appendToBody:y,closeOnClickOverlay:m,keepLast:u}=e.toRefs(o),{execClose:g}=ne(o,l);le(o);const V=e.ref(),v=e.ref(),E=e.computed(()=>o.draggable),{clearPosition:p,modalPosition:f}=ae(V,v,E);e.watch(i,w=>{w&&!u.value&&(p(),e.nextTick(()=>{const d=document==null?void 0:document.querySelector("[autofocus]");d&&d.focus()}))});const h=()=>{const d=[{type:"success",text:"\u6210\u529F",icon:"right-o",color:"var(--devui-success)"},{type:"failed",text:"\u9519\u8BEF",icon:"error-o",color:"var(--devui-danger)"},{type:"warning",text:"\u8B66\u544A",icon:"warning-o",color:"var(--devui-warning)"},{type:"info",text:"\u4FE1\u606F",icon:"info-o",color:"var(--devui-info)"}].find(N=>N.type===o.type);return e.createVNode("div",{style:{cursor:o.draggable?"move":"default"},ref:v},[e.createVNode(M,null,{default:()=>[e.createVNode("div",{class:"type-content"},[e.createVNode("div",{class:"type-content-icon"},[e.createVNode(F,{name:d==null?void 0:d.icon,color:d==null?void 0:d.color},null)]),e.createVNode("div",{class:"type-content-text"},[d==null?void 0:d.text])])]})])};return()=>e.createVNode(e.Teleport,{to:"body",disabled:!y.value},{default:()=>[c.value&&e.createVNode(J,e.mergeProps({modelValue:i.value},{"onUpdate:modelValue":g},{class:r.e("overlay"),"lock-scroll":!1,"close-on-click-overlay":m.value,style:{zIndex:"calc(var(--devui-z-index-modal, 1050) - 1)"}}),null),e.createVNode(e.Transition,{name:o.showAnimation?r.m("wipe"):""},{default:()=>{var w;return[i.value&&e.createVNode("div",e.mergeProps({ref:V,class:r.b()},n,{onClick:d=>d.stopPropagation(),style:{transform:f.value}}),[a.value&&e.createVNode("div",{onClick:g,class:"btn-close"},[e.createVNode(F,{operable:!0,component:re()},null)]),o.type?h():e.createVNode("div",{style:{cursor:o.draggable?"move":"default"},ref:v},[t.header?t.header():s.value&&e.createVNode(M,null,{default:()=>[s.value]})]),e.createVNode(O,null,{default:()=>{var d;return[(d=t.default)==null?void 0:d.call(t)]}}),(w=t.footer)==null?void 0:w.call(t)])]}})]})}}),T=e.defineComponent({name:"DModalFooter",setup(o,{slots:t}){const n=C("modal");return()=>{var l;return e.createVNode("div",{class:n.e("footer")},[(l=t.default)==null?void 0:l.call(t)])}}});class ie{constructor(t){this.anchorContainer=t}renderModal(t,n,l){const r=e.h(this.component(),n,l);return e.render(r,t),r}renderNull(t){setTimeout(()=>{e.render(null,t)},500)}}let L;class I extends ie{component(){return P}open(t={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const{header:l,content:r,footer:i,...s}=t,a=(m,u)=>this.renderModal(n,{...m,modelValue:!0,"onUpdate:modelValue":u},{header:l,default:r,footer:i}),c=()=>{var u,g,V;const m=v=>{v||c()};a(s,v=>{v?a(s,m):(this.renderModal(n,{...s,modelValue:!1}),this.renderNull(n))}),(V=(g=(u=L==null?void 0:L.component)==null?void 0:u.exposed)==null?void 0:g.handleVisibleChange)==null||V.call(g,!1)},y=m=>{m||c()};return this.renderModal(n,{modelValue:!1}),L=a(s,y),{hide:c}}}I.token="MODAL_SERVICE_TOKEN";var se={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(o){if(o.component(P.name,P),o.component(M.name,M),o.component(O.name,O),o.component(T.name,T),!oe)return;let t=document.getElementById("d-modal-anchors-container");t||(t=document.createElement("div"),t.setAttribute("id","d-modal-anchors-container"),document.body.appendChild(t)),o.provide(I.token,new I(t))}};b.Modal=P,b.ModalBody=O,b.ModalFooter=T,b.ModalHeader=M,b.default=se,b.modalProps=z,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+						L9.64644661,-0.353553391 Z`},null)])])])}var ye="",S=e.defineComponent({name:"DModal",inheritAttrs:!1,props:U,emits:["update:modelValue","close"],setup(t,{slots:o,attrs:n,emit:l}){const r=b("modal"),{modelValue:i,title:c,showClose:a,showOverlay:d,appendToBody:f,closeOnClickOverlay:p,keepLast:y}=e.toRefs(t),{execClose:u}=ne(t,l);le(t);const h=e.ref(),v=e.ref(),V=e.computed(()=>t.draggable),{clearPosition:E,modalPosition:P}=ae(h,v,V);e.watch(i,m=>{m&&!y.value&&(E(),e.nextTick(()=>{const s=document==null?void 0:document.querySelector("[autofocus]");s&&s.focus()}))});const k=()=>{const s=[{type:"success",text:"\u6210\u529F",icon:"right-o",color:"var(--devui-success)"},{type:"failed",text:"\u9519\u8BEF",icon:"error-o",color:"var(--devui-danger)"},{type:"warning",text:"\u8B66\u544A",icon:"warning-o",color:"var(--devui-warning)"},{type:"info",text:"\u4FE1\u606F",icon:"info-o",color:"var(--devui-info)"}].find(g=>g.type===t.type);return e.createVNode("div",{style:{cursor:t.draggable?"move":"default"},ref:v},[e.createVNode(O,null,{default:()=>[e.createVNode("div",{class:"type-content"},[e.createVNode("div",{class:"type-content-icon"},[e.createVNode(X,{name:s==null?void 0:s.icon,color:s==null?void 0:s.color},null)]),e.createVNode("div",{class:"type-content-text"},[s==null?void 0:s.text])])]})])};return()=>e.createVNode(e.Teleport,{to:"body",disabled:!f.value},{default:()=>[d.value&&e.createVNode(J,e.mergeProps({modelValue:i.value},{"onUpdate:modelValue":u},{class:r.e("overlay"),"lock-scroll":!1,"close-on-click-overlay":p.value,style:{zIndex:"calc(var(--devui-z-index-modal, 1050) - 1)"}}),null),e.createVNode(e.Transition,{name:t.showAnimation?r.m("wipe"):""},{default:()=>{var m;return[i.value&&e.createVNode("div",e.mergeProps({ref:h,class:r.b()},n,{onClick:s=>s.stopPropagation(),style:{transform:P.value}}),[a.value&&e.createVNode("div",{onClick:u,class:"btn-close"},[e.createVNode(X,{operable:!0,component:ie()},null)]),t.type?k():e.createVNode("div",{style:{cursor:t.draggable?"move":"default"},ref:v},[o.header?o.header():c.value&&e.createVNode(O,null,{default:()=>[c.value]})]),e.createVNode(A,null,{default:()=>{var s;return[(s=o.default)==null?void 0:s.call(o)]}}),(m=o.footer)==null?void 0:m.call(o)])]}})]})}}),z=e.defineComponent({name:"DModalFooter",setup(t,{slots:o}){const n=b("modal");return()=>{var l;return e.createVNode("div",{class:n.e("footer")},[(l=o.default)==null?void 0:l.call(o)])}}});class re{constructor(o){this.anchorContainer=o}renderModal(o,n,l){const r=e.h(this.component(),n,l);return e.render(r,o),r}renderNull(o){setTimeout(()=>{e.render(null,o)},500)}}let $;class F extends re{component(){return S}open(o={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const{header:l,content:r,footer:i,...c}=o,a=(p,y)=>this.renderModal(n,{...p,modelValue:!0,"onUpdate:modelValue":y},{header:l,default:r,footer:i}),d=()=>{var y,u,h;const p=v=>{v||d()};a(c,v=>{v?a(c,p):(this.renderModal(n,{...c,modelValue:!1}),this.renderNull(n))}),(h=(u=(y=$==null?void 0:$.component)==null?void 0:y.exposed)==null?void 0:u.handleVisibleChange)==null||h.call(u,!1)},f=p=>{p||d()};return this.renderModal(n,{modelValue:!1}),$=a(c,f),{hide:d}}}F.token="MODAL_SERVICE_TOKEN";var se={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(t){if(t.component(S.name,S),t.component(O.name,O),t.component(A.name,A),t.component(z.name,z),!oe)return;let o=document.getElementById("d-modal-anchors-container");o||(o=document.createElement("div"),o.setAttribute("id","d-modal-anchors-container"),document.body.appendChild(o)),t.provide(F.token,new F(o))}};w.Modal=S,w.ModalBody=A,w.ModalFooter=z,w.ModalHeader=O,w.default=se,w.modalProps=U,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/overlay/index.es.js

@@ -148,6 +148,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -175,6 +179,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" };
@@ -245,6 +250,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,
     () => {
@@ -253,10 +267,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();
       }
     }
   );
@@ -264,6 +280,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }

package/overlay/index.umd.js

@@ -1 +1 @@
-(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue,u.dom))})(this,function(u,t,h){"use strict";const C={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function R(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const e=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${e}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=e}}}function F(e,n){let o;const r=l=>{l.preventDefault(),n.emit("click",l),e.closeOnClickOverlay&&n.emit("update:modelValue",!1)},s=()=>{o==null||o()};return t.watch(()=>e.modelValue,l=>{l?e.lockScroll&&(o=R()):s()}),t.onUnmounted(s),{onClick:r}}function p(e,n,o){let r=e;return n&&(r+=`__${n}`),o&&(r+=`--${o}`),r}function P(e,n=!1){const o=n?`.devui-${e}`:`devui-${e}`;return{b:()=>p(o),e:a=>a?p(o,a):"",m:a=>a?p(o,"",a):"",em:(a,m)=>a&&m?p(o,a,m):""}}var q="";const b=t.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:C,emits:["update:modelValue","click"],setup(e,n){const{modelValue:o}=t.toRefs(e),r=P("fixed-overlay"),{onClick:s}=F(e,n);return()=>t.createVNode(t.Transition,{name:r.m("fade")},{default:()=>{var l,f;return[o.value&&t.createVNode("div",t.mergeProps({class:r.b()},n.attrs,{onClick:s}),[(f=(l=n.slots).default)==null?void 0:f.call(l)])]}})}}),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 T(e,n,o,r){let{x:s,y:l}=n;if(!e){const{width:f,height:a}=r;s&&o.includes("start")&&(s=12),s&&o.includes("end")&&(s=Math.round(f-24)),l&&o.includes("start")&&(l=10),l&&o.includes("end")&&(l=a-14)}return{x:s,y:l}}function j(e,n){const{fitOriginWidth:o,position:r,showArrow:s}=t.toRefs(e),l=t.ref(),f=t.ref(),a=t.ref(0);let m;const x=t.computed(()=>o.value?{width:a.value+"px"}:{}),E=(d,i,c,w)=>{const{x:g,y:v}=T(e.isArrowCenter,c,i,w.getBoundingClientRect()),B={top:"bottom",right:"left",bottom:"top",left:"right"}[i.split("-")[0]];Object.assign(d.style,{left:g?`${g}px`:"",top:v?`${v}px`:"",right:"",bottom:"",[B]:"-4px"})},y=async()=>{const d=e.origin,i=t.unref(l.value),c=t.unref(f.value),[w,...g]=r.value,v=[h.offset(e.offset)];v.push(g.length?h.flip({fallbackPlacements:g}):h.flip()),s.value&&v.push(h.arrow({element:f.value}));const{x:B,y:M,placement:$,middlewareData:D}=await h.computePosition(d,i,{strategy:"fixed",placement:w,middleware:v});let W=B,_=M;n("positionChange",$),Object.assign(i.style,{top:`${_}px`,left:`${W}px`}),e.showArrow&&E(c,$,D.arrow,i)},A=d=>{var c,w;const i=d.target;i!=null&&i.contains((w=(c=e.origin)==null?void 0:c.$el)!=null?w:e.origin)&&y()},S=d=>{a.value=d.getBoundingClientRect().width,y()},z=()=>{var d,i;if(o.value&&typeof window!="undefined"){const c=(i=(d=e.origin)==null?void 0:d.$el)!=null?i:e.origin;c&&(m=new window.ResizeObserver(()=>S(c)),m.observe(c))}},V=()=>{var i,c;const d=(c=(i=e.origin)==null?void 0:i.$el)!=null?c:e.origin;d&&(m==null||m.unobserve(d))};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(t.nextTick(y),window.addEventListener("scroll",A,!0),window.addEventListener("resize",y),z()):(window.removeEventListener("scroll",A,!0),window.removeEventListener("resize",y),V())}),t.onUnmounted(()=>{window.removeEventListener("scroll",A,!0),window.removeEventListener("resize",y),V()}),{arrowRef:f,overlayRef:l,styles:x,updatePosition:y}}var H="";const O=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:k,emits:["update:modelValue","positionChange"],setup(e,{slots:n,attrs:o,emit:r,expose:s}){const l=P("flexible-overlay"),{clickEventBubble:f}=t.toRefs(e),{arrowRef:a,overlayRef:m,styles:x,updatePosition:E}=j(e,r);return s({updatePosition:E}),()=>{var y;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:m,class:l.b(),style:x.value},o,{onClick:t.withModifiers(()=>({}),[f.value?"":"stop"]),onPointerup:t.withModifiers(()=>({}),["stop"])}),[(y=n.default)==null?void 0:y.call(n),e.showArrow&&t.createVNode("div",{ref:a,class:l.e("arrow")},null)])}}}),N=typeof window!="undefined";var L={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(b.name,b),e.component(O.name,O),N&&!document.getElementById("d-overlay-anchor")){const n=document.createElement("div");n.setAttribute("id","d-overlay-anchor"),n.style.position="fixed",n.style.left="0",n.style.top="0",n.style.zIndex="1000",document.body.appendChild(n)}}};u.FixedOverlay=b,u.FlexibleOverlay=O,u.default=L,u.fixedOverlayProps=C,u.flexibleOverlayProps=k,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue,u.dom))})(this,function(u,t,h){"use strict";const k={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function F(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const e=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${e}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=e}}}function j(e,n){let o;const r=l=>{l.preventDefault(),n.emit("click",l),e.closeOnClickOverlay&&n.emit("update:modelValue",!1)},s=()=>{o==null||o()};return t.watch(()=>e.modelValue,l=>{l?e.lockScroll&&(o=F()):s()}),t.onUnmounted(s),{onClick:r}}function g(e,n,o){let r=e;return n&&(r+=`__${n}`),o&&(r+=`--${o}`),r}function C(e,n=!1){const o=n?`.devui-${e}`:`devui-${e}`;return{b:()=>g(o),e:a=>a?g(o,a):"",m:a=>a?g(o,"",a):"",em:(a,m)=>a&&m?g(o,a,m):""}}var I="";const x=t.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:k,emits:["update:modelValue","click"],setup(e,n){const{modelValue:o}=t.toRefs(e),r=C("fixed-overlay"),{onClick:s}=j(e,n);return()=>t.createVNode(t.Transition,{name:r.m("fade")},{default:()=>{var l,f;return[o.value&&t.createVNode("div",t.mergeProps({class:r.b()},n.attrs,{onClick:s}),[(f=(l=n.slots).default)==null?void 0:f.call(l)])]}})}}),V={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 N(e,n,o,r){let{x:s,y:l}=n;if(!e){const{width:f,height:a}=r;s&&o.includes("start")&&(s=12),s&&o.includes("end")&&(s=Math.round(f-24)),l&&o.includes("start")&&(l=10),l&&o.includes("end")&&(l=a-14)}return{x:s,y:l}}function z(e,n){const{fitOriginWidth:o,position:r,showArrow:s}=t.toRefs(e),l=t.ref(),f=t.ref(),a=t.ref(0);let m,w;const A=t.computed(()=>o.value?{width:a.value+"px"}:{}),O=(d,i,c,v)=>{const{x:b,y:p}=N(e.isArrowCenter,c,i,v.getBoundingClientRect()),B={top:"bottom",right:"left",bottom:"top",left:"right"}[i.split("-")[0]];Object.assign(d.style,{left:b?`${b}px`:"",top:p?`${p}px`:"",right:"",bottom:"",[B]:"-4px"})},y=async()=>{const d=e.origin,i=t.unref(l.value),c=t.unref(f.value),[v,...b]=r.value,p=[h.offset(e.offset)];p.push(b.length?h.flip({fallbackPlacements:b}):h.flip()),s.value&&p.push(h.arrow({element:f.value}));const{x:B,y:W,placement:T,middlewareData:_}=await h.computePosition(d,i,{strategy:"fixed",placement:v,middleware:p});let q=B,H=W;n("positionChange",T),Object.assign(i.style,{top:`${H}px`,left:`${q}px`}),e.showArrow&&O(c,T,_.arrow,i)},P=d=>{var c,v;const i=d.target;i!=null&&i.contains((v=(c=e.origin)==null?void 0:c.$el)!=null?v:e.origin)&&y()},M=d=>{a.value=d.getBoundingClientRect().width,y()},D=()=>{var d,i;if(o.value&&typeof window!="undefined"){const c=(i=(d=e.origin)==null?void 0:d.$el)!=null?i:e.origin;c&&(m=new window.ResizeObserver(()=>M(c)),m.observe(c))}},$=()=>{var i,c;const d=(c=(i=e.origin)==null?void 0:i.$el)!=null?c:e.origin;d&&(m==null||m.unobserve(d))},U=()=>{e.autoUpdatePosition&&typeof window!="undefined"&&l.value&&(w=new window.ResizeObserver(y),w.observe(l.value))},R=()=>{l.value&&(w==null||w.unobserve(l.value))};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(t.nextTick(y),window.addEventListener("scroll",P,!0),window.addEventListener("resize",y),D(),t.nextTick(U)):(window.removeEventListener("scroll",P,!0),window.removeEventListener("resize",y),$(),R())}),t.onUnmounted(()=>{window.removeEventListener("scroll",P,!0),window.removeEventListener("resize",y),$(),R()}),{arrowRef:f,overlayRef:l,styles:A,updatePosition:y}}var Y="";const E=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:V,emits:["update:modelValue","positionChange"],setup(e,{slots:n,attrs:o,emit:r,expose:s}){const l=C("flexible-overlay"),{clickEventBubble:f}=t.toRefs(e),{arrowRef:a,overlayRef:m,styles:w,updatePosition:A}=z(e,r);return s({updatePosition:A}),()=>{var O;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:m,class:l.b(),style:w.value},o,{onClick:t.withModifiers(()=>({}),[f.value?"":"stop"]),onPointerup:t.withModifiers(()=>({}),["stop"])}),[(O=n.default)==null?void 0:O.call(n),e.showArrow&&t.createVNode("div",{ref:a,class:l.e("arrow")},null)])}}}),L=typeof window!="undefined";var S={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(x.name,x),e.component(E.name,E),L&&!document.getElementById("d-overlay-anchor")){const n=document.createElement("div");n.setAttribute("id","d-overlay-anchor"),n.style.position="fixed",n.style.left="0",n.style.top="0",n.style.zIndex="1000",document.body.appendChild(n)}}};u.FixedOverlay=x,u.FlexibleOverlay=E,u.default=S,u.fixedOverlayProps=k,u.flexibleOverlayProps=V,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.6.36-alpha.0",
+  "version": "1.6.36-alpha.2",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [

package/pagination/index.es.js

@@ -5854,6 +5854,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -5881,6 +5885,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" };
@@ -5951,6 +5956,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,
     () => {
@@ -5959,10 +5973,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();
       }
     }
   );
@@ -5970,6 +5986,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }
@@ -9067,7 +9084,6 @@ var Tag = defineComponent({
     } = toRefs(props);
     const tagClass = useClass(props);
     const themeColor = useColor(props);
-    const tagTitle = titleContent.value || "";
     const isDefaultTag = () => !type4.value && !color.value;
     const handleClick = (e) => {
       emit("click", e);
@@ -9106,7 +9122,7 @@ var Tag = defineComponent({
           color: contentColor.value,
           backgroundColor: checked.value ? themeColor.value : !color.value ? "" : "var(--devui-base-bg, #ffffff)"
         },
-        "title": tagTitle
+        "title": titleContent.value || ""
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]);
     };
   }