vue-devui 1.6.14 → 1.6.15

package/modal/index.es.js

@@ -34,7 +34,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, onUnmounted, Transition, ref, unref, nextTick, withModifiers, onMounted, watchEffect, onBeforeUnmount, Teleport, h, render } from "vue";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 const modalProps = {
   modelValue: {
     type: Boolean,
@@ -415,16 +415,6 @@ const flexibleOverlayProps = {
     default: false
   }
 };
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style = window.getComputedStyle(parent);
-    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   let { x, y } = point;
   if (!isArrowCenter) {
@@ -445,9 +435,9 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
+  const { position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
-  let originParent = null;
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -468,51 +458,42 @@ function useOverlay(props, emit) {
     const hostEl = props.origin;
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    if (!overlayEl) {
-      return;
+    const [mainPosition, ...fallbackPosition] = position.value;
+    const middleware = [offset(props.offset)];
+    middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip());
+    if (showArrow.value) {
+      middleware.push(arrow({ element: arrowRef.value }));
     }
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
+      placement: mainPosition,
       middleware
     });
     let applyX = x;
     let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
     emit("positionChange", placement);
     Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
+  const scrollCallback = (e) => {
+    var _a, _b;
+    const scrollElement = e.target;
+    if (scrollElement == null ? void 0 : scrollElement.contains((_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin)) {
+      updatePosition();
+    }
+  };
   watch(() => props.modelValue, () => {
     if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
     } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
     }
   });
   onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
   });
   return { arrowRef, overlayRef, updatePosition };

package/modal/index.umd.js

@@ -1,7 +1,7 @@
-var ge=Object.defineProperty,ve=Object.defineProperties;var be=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var T=(c,e,u)=>e in c?ge(c,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):c[e]=u,$=(c,e)=>{for(var u in e||(e={}))_.call(e,u)&&T(c,u,e[u]);if(P)for(var u of P(e))q.call(e,u)&&T(c,u,e[u]);return c},I=(c,e)=>ve(c,be(e));var W=(c,e)=>{var u={};for(var b in c)_.call(c,b)&&e.indexOf(b)<0&&(u[b]=c[b]);if(c!=null&&P)for(var b of P(c))e.indexOf(b)<0&&q.call(c,b)&&(u[b]=c[b]);return u};var G=(c,e,u)=>(T(c,typeof e!="symbol"?e+"":e,u),u);(function(c,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):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.index={},c.Vue,c.dom))})(this,function(c,e,u){"use strict";const b={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}},K={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]}},Z={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function M(t,o,n){let l=t;return o&&(l+=`__${o}`),n&&(l+=`--${n}`),l}function V(t,o=!1){const n=o?`.devui-${t}`:`devui-${t}`;return{b:()=>M(n),e:r=>r?M(n,r):"",m:r=>r?M(n,"",r):"",em:(r,d)=>r&&d?M(n,r,d):""}}var Ce="",J=e.defineComponent({name:"DSvgIcon",props:Z,setup(t){const{name:o,color:n,size:l}=e.toRefs(t),a=V("svg-icon"),i=e.computed(()=>`#icon-${o.value}`),s=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),r={width:s.value,height:s.value};return()=>e.createVNode("svg",{class:a.b(),style:r},[e.createVNode("use",{"xlink:href":i.value,fill:n.value},null)])}});function Q(t){return/^((http|https):)?\/\//.test(t)}function ee(t,o){const{component:n,name:l,size:a,color:i,classPrefix:s,rotate:r}=e.toRefs(t),d=V("icon"),f=e.computed(()=>typeof a.value=="number"?`${a.value}px`:a.value),m=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(J),p=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(r==null?void 0:r.value)==="infinite"&&d.m("spin")],style:{width:f.value||"",transform:`rotate(${r==null?void 0:r.value}deg)`,verticalAlign:"middle"}},o.attrs),null),h=()=>e.createVNode(m,e.mergeProps({name:l.value,color:i.value,size:f.value,class:[(r==null?void 0:r.value)==="infinite"&&d.m("spin")],style:{transform:`rotate(${r==null?void 0:r.value}deg)`}},o.attrs),null),w=()=>{const v=/^icon-/.test(l.value)?l.value:`${s.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[s.value,v,(r==null?void 0:r.value)==="infinite"&&d.m("spin")],style:{fontSize:f.value,color:i.value,transform:`rotate(${r==null?void 0:r.value}deg)`}},o.attrs),null)};return{iconDom:()=>n.value?h():Q(l.value)?p():w()}}var R=e.defineComponent({name:"DIcon",props:K,emits:["click"],setup(t,o){const{disabled:n,operable:l}=e.toRefs(t),{iconDom:a}=ee(t,o),i=V("icon"),s=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})),r=d=>{n.value||o.emit("click",d)};return()=>{var d,f,m,p;return e.createVNode("div",{class:s.value,onClick:r},[(f=(d=o.slots).prefix)==null?void 0:f.call(d),a(),(p=(m=o.slots).suffix)==null?void 0:p.call(m)])}}}),Ee="";e.defineComponent({name:"DIconGroup",setup(t,o){const n=V("icon-group");return()=>{var l,a;return e.createVNode("div",{class:n.b()},[(a=(l=o.slots).default)==null?void 0:a.call(l)])}}});const te={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function z(){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 oe(t,o){let n;const l=i=>{i.preventDefault(),o.emit("click",i),t.closeOnClickOverlay&&o.emit("update:modelValue",!1)},a=()=>{n==null||n()};return e.watch(()=>t.modelValue,i=>{i?t.lockScroll&&(n=z()):a()}),e.onUnmounted(a),{onClick:l}}var Ne="";const ne=e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:te,emits:["update:modelValue","click"],setup(t,o){const{modelValue:n}=e.toRefs(t),l=V("fixed-overlay"),{onClick:a}=oe(t,o);return()=>e.createVNode(e.Transition,{name:l.m("fade")},{default:()=>{var i,s;return[n.value&&e.createVNode("div",e.mergeProps({class:l.b()},o.attrs,{onClick:a}),[(s=(i=o.slots).default)==null?void 0:s.call(i)])]}})}}),le={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}};function ae(t){const o=/(auto|scroll|hidden)/;for(let n=t;n=n.parentElement;n.parentElement!==document.body){const l=window.getComputedStyle(n);if(o.test(l.overflow+l.overflowX+l.overflowY))return n}return window}function re(t,o,n,l){let{x:a,y:i}=o;if(!t){const{width:s,height:r}=l;a&&n.includes("start")&&(a=12),a&&n.includes("end")&&(a=Math.round(s-24)),i&&n.includes("start")&&(i=10),i&&n.includes("end")&&(i=r-14)}return{x:a,y:i}}function ie(t,o){const n=e.ref(),l=e.ref();let a=null;const i=(r,d,f,m)=>{const{x:p,y:h}=re(t.isArrowCenter,f,d,m.getBoundingClientRect()),w={top:"bottom",right:"left",bottom:"top",left:"right"}[d.split("-")[0]];Object.assign(r.style,{left:p?`${p}px`:"",top:h?`${h}px`:"",right:"",bottom:"",[w]:"-4px"})},s=async()=>{const r=t.origin,d=e.unref(n.value),f=e.unref(l.value),m=[u.offset(t.offset),u.autoPlacement({alignment:t.align,allowedPlacements:t.position})];if(t.showArrow&&m.push(u.arrow({element:f})),t.shiftOffset!==void 0&&m.push(u.shift()),!d)return;const{x:p,y:h,placement:w,middlewareData:g}=await u.computePosition(r,d,{strategy:"fixed",middleware:m});let v=p,C=h;if(t.shiftOffset!==void 0){const{x:N,y:x}=g.shift;N<0&&(v-=t.shiftOffset),N>0&&(v+=t.shiftOffset),x<0&&(C-=t.shiftOffset),x>0&&(C+=t.shiftOffset)}o("positionChange",w),Object.assign(d.style,{top:`${C}px`,left:`${v}px`}),t.showArrow&&i(f,w,g.arrow,d)};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(a=ae(t.origin),e.nextTick(s),a==null||a.addEventListener("scroll",s),a!==window&&window.addEventListener("scroll",s),window.addEventListener("resize",s)):(a==null||a.removeEventListener("scroll",s),a!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s))}),e.onUnmounted(()=>{a==null||a.removeEventListener("scroll",s),a!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s)}),{arrowRef:l,overlayRef:n,updatePosition:s}}var xe="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:le,emits:["update:modelValue","positionChange"],setup(t,{slots:o,attrs:n,emit:l,expose:a}){const i=V("flexible-overlay"),{clickEventBubble:s}=e.toRefs(t),{arrowRef:r,overlayRef:d,updatePosition:f}=ie(t,l);return a({updatePosition:f}),()=>{var m;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:d,class:i.b()},n,{onClick:e.withModifiers(()=>({}),[s.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(m=o.default)==null?void 0:m.call(o),t.showArrow&&e.createVNode("div",{ref:r,class:i.e("arrow")},null)])}}});const se=typeof window!="undefined";function ce(t,o){function n(){o("update:modelValue",!1),o("close")}function l(){t.beforeClose?t.beforeClose(n):n()}function a(i){i.code==="Escape"&&l()}return e.onMounted(()=>{t.escapable&&window.addEventListener("keydown",a)}),e.onUnmounted(()=>{t.escapable&&window.addEventListener("keydown",a)}),{execClose:l}}function de(t){let o;const n=()=>{o==null||o()};e.watch(()=>t.modelValue,l=>{l?t.lockScroll&&(o=z()):n()},{immediate:!0}),e.onUnmounted(n)}function F(t,o="px"){return t?typeof t=="string"?t:typeof t=="number"?`${t}${o}`:"":""}const ue=(t,o,n)=>{const l=e.ref("translate(-50%, -50%)");let a={offsetX:0,offsetY:0};const i=f=>{const m=f.clientX,p=f.clientY,{offsetX:h,offsetY:w}=a,g=t.value.getBoundingClientRect(),v=g.left,C=g.top,N=g.width,x=g.height,E=document.documentElement.clientWidth,y=document.documentElement.clientHeight,A=-v+h,ye=-C+w,he=E-v-N+h,we=y-C-x+w,X=U=>{const H=Math.min(Math.max(h+U.clientX-m,A),he),j=Math.min(Math.max(w+U.clientY-p,ye),we);a={offsetX:H,offsetY:j},l.value=`translate(calc(-50% + ${F(H)}), calc(-50% + ${F(j)}))`},Y=()=>{document.removeEventListener("mousemove",X),document.removeEventListener("mouseup",Y)};document.addEventListener("mousemove",X),document.addEventListener("mouseup",Y)},s=()=>{o.value&&t.value&&o.value.addEventListener("mousedown",i)},r=()=>{o.value&&t.value&&o.value.removeEventListener("mousedown",i)};return e.onMounted(()=>{e.watchEffect(()=>{n.value?s():r()})}),e.onBeforeUnmount(()=>{r()}),{clearPosition:()=>{a={offsetX:0,offsetY:0},l.value="translate(-50%, -50%)"},modalPosition:l}};var O=e.defineComponent({name:"DModalHeader",setup(t,{slots:o}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("header")},[(l=o.default)==null?void 0:l.call(o)])}}}),B=e.defineComponent({name:"DModalBody",setup(t,{slots:o}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("body")},[(l=o.default)==null?void 0:l.call(o)])}}});function fe(){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 
+var ge=Object.defineProperty,ve=Object.defineProperties;var we=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var $=(s,e,f)=>e in s?ge(s,e,{enumerable:!0,configurable:!0,writable:!0,value:f}):s[e]=f,T=(s,e)=>{for(var f in e||(e={}))_.call(e,f)&&$(s,f,e[f]);if(O)for(var f of O(e))q.call(e,f)&&$(s,f,e[f]);return s},I=(s,e)=>ve(s,we(e));var W=(s,e)=>{var f={};for(var b in s)_.call(s,b)&&e.indexOf(b)<0&&(f[b]=s[b]);if(s!=null&&O)for(var b of O(s))e.indexOf(b)<0&&q.call(s,b)&&(f[b]=s[b]);return f};var G=(s,e,f)=>($(s,typeof e!="symbol"?e+"":e,f),f);(function(s,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):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue,s.dom))})(this,function(s,e,f){"use strict";const b={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}},K={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]}},Z={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function M(o,t,n){let l=o;return t&&(l+=`__${t}`),n&&(l+=`--${n}`),l}function V(o,t=!1){const n=t?`.devui-${o}`:`devui-${o}`;return{b:()=>M(n),e:a=>a?M(n,a):"",m:a=>a?M(n,"",a):"",em:(a,u)=>a&&u?M(n,a,u):""}}var Ve="",J=e.defineComponent({name:"DSvgIcon",props:Z,setup(o){const{name:t,color:n,size:l}=e.toRefs(o),r=V("svg-icon"),i=e.computed(()=>`#icon-${t.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(o){return/^((http|https):)?\/\//.test(o)}function ee(o,t){const{component:n,name:l,size:r,color:i,classPrefix:c,rotate:a}=e.toRefs(o),u=V("icon"),m=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),d=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(J),p=()=>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"&&u.m("spin")],style:{width:m.value||"",transform:`rotate(${a==null?void 0:a.value}deg)`,verticalAlign:"middle"}},t.attrs),null),h=()=>e.createVNode(d,e.mergeProps({name:l.value,color:i.value,size:m.value,class:[(a==null?void 0:a.value)==="infinite"&&u.m("spin")],style:{transform:`rotate(${a==null?void 0:a.value}deg)`}},t.attrs),null),g=()=>{const w=/^icon-/.test(l.value)?l.value:`${c.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[c.value,w,(a==null?void 0:a.value)==="infinite"&&u.m("spin")],style:{fontSize:m.value,color:i.value,transform:`rotate(${a==null?void 0:a.value}deg)`}},t.attrs),null)};return{iconDom:()=>n.value?h():Q(l.value)?p():g()}}var R=e.defineComponent({name:"DIcon",props:K,emits:["click"],setup(o,t){const{disabled:n,operable:l}=e.toRefs(o),{iconDom:r}=ee(o,t),i=V("icon"),c=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=u=>{n.value||t.emit("click",u)};return()=>{var u,m,d,p;return e.createVNode("div",{class:c.value,onClick:a},[(m=(u=t.slots).prefix)==null?void 0:m.call(u),r(),(p=(d=t.slots).suffix)==null?void 0:p.call(d)])}}}),Ce="";e.defineComponent({name:"DIconGroup",setup(o,t){const n=V("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 te={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function z(){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 oe(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=z()):r()}),e.onUnmounted(r),{onClick:l}}var Ne="";const ne=e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:te,emits:["update:modelValue","click"],setup(o,t){const{modelValue:n}=e.toRefs(o),l=V("fixed-overlay"),{onClick:r}=oe(o,t);return()=>e.createVNode(e.Transition,{name:l.m("fade")},{default:()=>{var i,c;return[n.value&&e.createVNode("div",e.mergeProps({class:l.b()},t.attrs,{onClick:r}),[(c=(i=t.slots).default)==null?void 0:c.call(i)])]}})}}),le={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}};function ae(o,t,n,l){let{x:r,y:i}=t;if(!o){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 re(o,t){const{position:n,showArrow:l}=e.toRefs(o),r=e.ref(),i=e.ref(),c=(m,d,p,h)=>{const{x:g,y:v}=ae(o.isArrowCenter,p,d,h.getBoundingClientRect()),w={top:"bottom",right:"left",bottom:"top",left:"right"}[d.split("-")[0]];Object.assign(m.style,{left:g?`${g}px`:"",top:v?`${v}px`:"",right:"",bottom:"",[w]:"-4px"})},a=async()=>{const m=o.origin,d=e.unref(r.value),p=e.unref(i.value),[h,...g]=n.value,v=[f.offset(o.offset)];v.push(g.length?f.flip({fallbackPlacements:g}):f.flip()),l.value&&v.push(f.arrow({element:i.value}));const{x:w,y:N,placement:E,middlewareData:k}=await f.computePosition(m,d,{strategy:"fixed",placement:h,middleware:v});let C=w,y=N;t("positionChange",E),Object.assign(d.style,{top:`${y}px`,left:`${C}px`}),o.showArrow&&c(p,E,k.arrow,d)},u=m=>{var p,h;const d=m.target;(d==null?void 0:d.contains((h=(p=o.origin)==null?void 0:p.$el)!=null?h:o.origin))&&a()};return e.watch(()=>o.modelValue,()=>{o.modelValue&&o.origin?(e.nextTick(a),window.addEventListener("scroll",u,!0),window.addEventListener("resize",a)):(window.removeEventListener("scroll",u,!0),window.removeEventListener("resize",a))}),e.onUnmounted(()=>{window.removeEventListener("scroll",u,!0),window.removeEventListener("resize",a)}),{arrowRef:i,overlayRef:r,updatePosition:a}}var Ee="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:le,emits:["update:modelValue","positionChange"],setup(o,{slots:t,attrs:n,emit:l,expose:r}){const i=V("flexible-overlay"),{clickEventBubble:c}=e.toRefs(o),{arrowRef:a,overlayRef:u,updatePosition:m}=re(o,l);return r({updatePosition:m}),()=>{var d;return o.modelValue&&e.createVNode("div",e.mergeProps({ref:u,class:i.b()},n,{onClick:e.withModifiers(()=>({}),[c.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(d=t.default)==null?void 0:d.call(t),o.showArrow&&e.createVNode("div",{ref:a,class:i.e("arrow")},null)])}}});const ie=typeof window!="undefined";function se(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 ce(o){let t;const n=()=>{t==null||t()};e.watch(()=>o.modelValue,l=>{l?o.lockScroll&&(t=z()):n()},{immediate:!0}),e.onUnmounted(n)}function F(o,t="px"){return o?typeof o=="string"?o:typeof o=="number"?`${o}${t}`:"":""}const de=(o,t,n)=>{const l=e.ref("translate(-50%, -50%)");let r={offsetX:0,offsetY:0};const i=m=>{const d=m.clientX,p=m.clientY,{offsetX:h,offsetY:g}=r,v=o.value.getBoundingClientRect(),w=v.left,N=v.top,E=v.width,k=v.height,C=document.documentElement.clientWidth,y=document.documentElement.clientHeight,S=-w+h,pe=-N+g,ye=C-w-E+h,he=y-N-k+g,U=H=>{const Y=Math.min(Math.max(h+H.clientX-d,S),ye),j=Math.min(Math.max(g+H.clientY-p,pe),he);r={offsetX:Y,offsetY:j},l.value=`translate(calc(-50% + ${F(Y)}), calc(-50% + ${F(j)}))`},X=()=>{document.removeEventListener("mousemove",U),document.removeEventListener("mouseup",X)};document.addEventListener("mousemove",U),document.addEventListener("mouseup",X)},c=()=>{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?c():a()})}),e.onBeforeUnmount(()=>{a()}),{clearPosition:()=>{r={offsetX:0,offsetY:0},l.value="translate(-50%, -50%)"},modalPosition:l}};var x=e.defineComponent({name:"DModalHeader",setup(o,{slots:t}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("header")},[(l=t.default)==null?void 0:l.call(t)])}}}),B=e.defineComponent({name:"DModalBody",setup(o,{slots:t}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("body")},[(l=t.default)==null?void 0:l.call(t)])}}});function ue(){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 Oe="",L=e.defineComponent({name:"DModal",inheritAttrs:!1,props:b,emits:["update:modelValue","close"],setup(t,{slots:o,attrs:n,emit:l}){const a=V("modal"),{modelValue:i,title:s,showClose:r,showOverlay:d,appendToBody:f,closeOnClickOverlay:m,keepLast:p}=e.toRefs(t),{execClose:h}=ce(t,l);de(t);const w=e.ref(),g=e.ref(),v=e.computed(()=>t.draggable),{clearPosition:C,modalPosition:N}=ue(w,g,v);e.watch(i,E=>{E&&!p.value&&(C(),e.nextTick(()=>{const y=document==null?void 0:document.querySelector("[autofocus]");y&&y.focus()}))});const x=()=>{const y=[{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(A=>A.type===t.type);return e.createVNode("div",{style:{cursor:t.draggable?"move":"default"},ref:g},[e.createVNode(O,null,{default:()=>[e.createVNode("div",{class:"type-content"},[e.createVNode("div",{class:"type-content-icon"},[e.createVNode(R,{name:y==null?void 0:y.icon,color:y==null?void 0:y.color},null)]),e.createVNode("div",{class:"type-content-text"},[y==null?void 0:y.text])])]})])};return()=>e.createVNode(e.Teleport,{to:"body",disabled:!f.value},{default:()=>[d.value&&e.createVNode(ne,e.mergeProps({modelValue:i.value},{"onUpdate:modelValue":h},{class:a.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:t.showAnimation?a.m("wipe"):""},{default:()=>{var E;return[i.value&&e.createVNode("div",e.mergeProps({ref:w,class:a.b()},n,{onClick:y=>y.stopPropagation(),style:{transform:N.value}}),[r.value&&e.createVNode("div",{onClick:h,class:"btn-close"},[e.createVNode(R,{operable:!0,component:fe()},null)]),t.type?x():e.createVNode("div",{style:{cursor:t.draggable?"move":"default"},ref:g},[o.header?o.header():s.value&&e.createVNode(O,null,{default:()=>[s.value]})]),e.createVNode(B,null,{default:()=>{var y;return[(y=o.default)==null?void 0:y.call(o)]}}),(E=o.footer)==null?void 0:E.call(o)])]}})]})}}),D=e.defineComponent({name:"DModalFooter",setup(t,{slots:o}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("footer")},[(l=o.default)==null?void 0:l.call(o)])}}});class me{constructor(o){this.anchorContainer=o}renderModal(o,n,l){const a=e.h(this.component(),n,l);return e.render(a,o),a}renderNull(o){setTimeout(()=>{e.render(null,o)},500)}}let k;class S extends me{component(){return L}open(o={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const m=o,{header:l,content:a,footer:i}=m,s=W(m,["header","content","footer"]),r=(p,h)=>this.renderModal(n,I($({},p),{modelValue:!0,"onUpdate:modelValue":h}),{header:l,default:a,footer:i}),d=()=>{var h,w,g;const p=v=>{v||d()};r(s,v=>{v?r(s,p):(this.renderModal(n,I($({},s),{modelValue:!1})),this.renderNull(n))}),(g=(w=(h=k==null?void 0:k.component)==null?void 0:h.exposed)==null?void 0:w.handleVisibleChange)==null||g.call(w,!1)},f=p=>{p||d()};return this.renderModal(n,{modelValue:!1}),k=r(s,f),{hide:d}}}G(S,"token","MODAL_SERVICE_TOKEN");var pe={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(t){if(t.component(L.name,L),t.component(O.name,O),t.component(B.name,B),t.component(D.name,D),!se)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(S.token,new S(o))}};c.Modal=L,c.ModalBody=B,c.ModalFooter=D,c.ModalHeader=O,c.default=pe,c.modalProps=b,Object.defineProperty(c,"__esModule",{value:!0}),c[Symbol.toStringTag]="Module"});
+						L9.64644661,-0.353553391 Z`},null)])])])}var xe="",P=e.defineComponent({name:"DModal",inheritAttrs:!1,props:b,emits:["update:modelValue","close"],setup(o,{slots:t,attrs:n,emit:l}){const r=V("modal"),{modelValue:i,title:c,showClose:a,showOverlay:u,appendToBody:m,closeOnClickOverlay:d,keepLast:p}=e.toRefs(o),{execClose:h}=se(o,l);ce(o);const g=e.ref(),v=e.ref(),w=e.computed(()=>o.draggable),{clearPosition:N,modalPosition:E}=de(g,v,w);e.watch(i,C=>{C&&!p.value&&(N(),e.nextTick(()=>{const y=document==null?void 0:document.querySelector("[autofocus]");y&&y.focus()}))});const k=()=>{const y=[{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(S=>S.type===o.type);return e.createVNode("div",{style:{cursor:o.draggable?"move":"default"},ref:v},[e.createVNode(x,null,{default:()=>[e.createVNode("div",{class:"type-content"},[e.createVNode("div",{class:"type-content-icon"},[e.createVNode(R,{name:y==null?void 0:y.icon,color:y==null?void 0:y.color},null)]),e.createVNode("div",{class:"type-content-text"},[y==null?void 0:y.text])])]})])};return()=>e.createVNode(e.Teleport,{to:"body",disabled:!m.value},{default:()=>[u.value&&e.createVNode(ne,e.mergeProps({modelValue:i.value},{"onUpdate:modelValue":h},{class:r.e("overlay"),"lock-scroll":!1,"close-on-click-overlay":d.value,style:{zIndex:"calc(var(--devui-z-index-modal, 1050) - 1)"}}),null),e.createVNode(e.Transition,{name:o.showAnimation?r.m("wipe"):""},{default:()=>{var C;return[i.value&&e.createVNode("div",e.mergeProps({ref:g,class:r.b()},n,{onClick:y=>y.stopPropagation(),style:{transform:E.value}}),[a.value&&e.createVNode("div",{onClick:h,class:"btn-close"},[e.createVNode(R,{operable:!0,component:ue()},null)]),o.type?k():e.createVNode("div",{style:{cursor:o.draggable?"move":"default"},ref:v},[t.header?t.header():c.value&&e.createVNode(x,null,{default:()=>[c.value]})]),e.createVNode(B,null,{default:()=>{var y;return[(y=t.default)==null?void 0:y.call(t)]}}),(C=t.footer)==null?void 0:C.call(t)])]}})]})}}),D=e.defineComponent({name:"DModalFooter",setup(o,{slots:t}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("footer")},[(l=t.default)==null?void 0:l.call(t)])}}});class fe{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 A extends fe{component(){return P}open(t={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const d=t,{header:l,content:r,footer:i}=d,c=W(d,["header","content","footer"]),a=(p,h)=>this.renderModal(n,I(T({},p),{modelValue:!0,"onUpdate:modelValue":h}),{header:l,default:r,footer:i}),u=()=>{var h,g,v;const p=w=>{w||u()};a(c,w=>{w?a(c,p):(this.renderModal(n,I(T({},c),{modelValue:!1})),this.renderNull(n))}),(v=(g=(h=L==null?void 0:L.component)==null?void 0:h.exposed)==null?void 0:g.handleVisibleChange)==null||v.call(g,!1)},m=p=>{p||u()};return this.renderModal(n,{modelValue:!1}),L=a(c,m),{hide:u}}}G(A,"token","MODAL_SERVICE_TOKEN");var me={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(o){if(o.component(P.name,P),o.component(x.name,x),o.component(B.name,B),o.component(D.name,D),!ie)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(A.token,new A(t))}};s.Modal=P,s.ModalBody=B,s.ModalFooter=D,s.ModalHeader=x,s.default=me,s.modalProps=b,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/overlay/index.es.js

@@ -1,5 +1,5 @@
 import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers } from "vue";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 const fixedOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -143,16 +143,6 @@ const flexibleOverlayProps = {
     default: false
   }
 };
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style = window.getComputedStyle(parent);
-    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   let { x, y } = point;
   if (!isArrowCenter) {
@@ -173,9 +163,9 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
+  const { position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
-  let originParent = null;
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -196,51 +186,42 @@ function useOverlay(props, emit) {
     const hostEl = props.origin;
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    if (!overlayEl) {
-      return;
+    const [mainPosition, ...fallbackPosition] = position.value;
+    const middleware = [offset(props.offset)];
+    middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip());
+    if (showArrow.value) {
+      middleware.push(arrow({ element: arrowRef.value }));
     }
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
+      placement: mainPosition,
       middleware
     });
     let applyX = x;
     let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
     emit("positionChange", placement);
     Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
+  const scrollCallback = (e) => {
+    var _a, _b;
+    const scrollElement = e.target;
+    if (scrollElement == null ? void 0 : scrollElement.contains((_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin)) {
+      updatePosition();
+    }
+  };
   watch(() => props.modelValue, () => {
     if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
     } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
     }
   });
   onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
   });
   return { arrowRef, overlayRef, updatePosition };

package/overlay/index.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.6.14",
+  "version": "1.6.15",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [
@@ -29,7 +29,7 @@
   "dependencies": {
     "@babel/helper-hoist-variables": "^7.22.5",
     "@devui-design/icons": "^1.3.0",
-    "@floating-ui/dom": "^0.4.4",
+    "@floating-ui/dom": "1.2.5",
     "@iktakahiro/markdown-it-katex": "^4.0.1",
     "@types/codemirror": "0.0.97",
     "@types/lodash-es": "^4.17.4",

package/pagination/index.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance, render, resolveDirective } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import "clipboard";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 function className(classStr, classOpt) {
   let classname = classStr;
   if (typeof classOpt === "object") {
@@ -3916,7 +3916,7 @@ var lodash = { exports: {} };
       var delay = baseRest(function(func, wait, args) {
         return baseDelay(func, toNumber(wait) || 0, args);
       });
-      function flip(func) {
+      function flip2(func) {
         return createWrap(func, WRAP_FLIP_FLAG);
       }
       function memoize(func, resolver) {
@@ -5040,7 +5040,7 @@ var lodash = { exports: {} };
       lodash2.flatten = flatten;
       lodash2.flattenDeep = flattenDeep;
       lodash2.flattenDepth = flattenDepth;
-      lodash2.flip = flip;
+      lodash2.flip = flip2;
       lodash2.flow = flow;
       lodash2.flowRight = flowRight;
       lodash2.fromPairs = fromPairs;
@@ -5845,16 +5845,6 @@ const flexibleOverlayProps = {
     default: false
   }
 };
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style = window.getComputedStyle(parent);
-    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   let { x, y } = point;
   if (!isArrowCenter) {
@@ -5875,9 +5865,9 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
+  const { position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
-  let originParent = null;
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -5898,51 +5888,42 @@ function useOverlay(props, emit) {
     const hostEl = props.origin;
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    if (!overlayEl) {
-      return;
+    const [mainPosition, ...fallbackPosition] = position.value;
+    const middleware = [offset(props.offset)];
+    middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip());
+    if (showArrow.value) {
+      middleware.push(arrow({ element: arrowRef.value }));
     }
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
+      placement: mainPosition,
       middleware
     });
     let applyX = x;
     let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
     emit("positionChange", placement);
     Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
+  const scrollCallback = (e) => {
+    var _a, _b;
+    const scrollElement = e.target;
+    if (scrollElement == null ? void 0 : scrollElement.contains((_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin)) {
+      updatePosition();
+    }
+  };
   watch(() => props.modelValue, () => {
     if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
     } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
     }
   });
   onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
   });
   return { arrowRef, overlayRef, updatePosition };