vue-devui 1.0.0-beta.4 → 1.0.0-beta.8

package/modal/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, getCurrentInstance, nextTick, toRef, onBeforeUnmount, isRef, h, render, readonly, Fragment, mergeProps } from "vue";
+import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, toRef, isRef, h, render, readonly, mergeProps } from "vue";
 const modalProps = {
   width: {
     type: String,
@@ -129,7 +129,7 @@ const overlayProps = {
   backgroundStyle: {
     type: [String, Object]
   },
-  backdropClick: {
+  onBackdropClick: {
     type: Function
   },
   backdropClose: {
@@ -141,6 +141,7 @@ const overlayProps = {
     default: true
   }
 };
+const overlayEmits = ["onUpdate:visible", "backdropClick"];
 const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
   overlayStyle: {
     type: [String, Object],
@@ -176,7 +177,7 @@ function useOverlayLogic(props) {
   const handleBackdropClick = (event) => {
     var _a, _b;
     event.preventDefault();
-    (_a = props.backdropClick) == null ? void 0 : _a.call(props);
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
     if (props.backdropClose) {
       (_b = props["onUpdate:visible"]) == null ? void 0 : _b.call(props, false);
     }
@@ -215,6 +216,7 @@ function useOverlayLogic(props) {
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
+  emits: overlayEmits,
   setup(props, ctx) {
     const {
       backgroundClass,
@@ -250,61 +252,46 @@ function getElement(element) {
 const FlexibleOverlay = defineComponent({
   name: "DFlexibleOverlay",
   props: flexibleOverlayProps,
-  emits: ["onUpdate:visible"],
+  emits: overlayEmits,
   setup(props, ctx) {
     const overlayRef = ref(null);
     const positionedStyle = reactive({
       position: "absolute"
     });
-    const instance = getCurrentInstance();
     onMounted(async () => {
-      await nextTick();
-      const overlay2 = overlayRef.value;
-      if (!overlay2) {
-        return;
-      }
-      const origin = getOrigin(props.origin);
-      if (!origin) {
-        return;
-      }
-      const handleRectChange = (rect) => {
-        const point = calculatePosition(props.position, rect, origin);
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
         positionedStyle.left = `${point.x}px`;
         positionedStyle.top = `${point.y}px`;
       };
-      const handleChange = () => handleRectChange(overlay2.getBoundingClientRect());
+      const locationElements = computed(() => {
+        const overlay2 = overlayRef.value;
+        const origin = getOrigin(props.origin);
+        if (!overlay2 || !origin) {
+          return;
+        }
+        return {
+          origin,
+          overlay: overlay2
+        };
+      });
       const visibleRef = toRef(props, "visible");
       const positionRef = toRef(props, "position");
-      watch(visibleRef, (visible, ov, onInvalidate) => {
-        if (visible) {
-          subscribeLayoutEvent(handleChange);
-        } else {
-          unsbscribeLayoutEvent(handleChange);
+      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
+        if (!visible || !locationElements2) {
+          return;
         }
+        const {
+          origin,
+          overlay: overlay2
+        } = locationElements2;
+        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
+        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
         onInvalidate(() => {
-          unsbscribeLayoutEvent(handleChange);
+          unsubscriptions.forEach((fn) => fn());
         });
       });
-      watch([visibleRef, positionRef], () => {
-        handleChange();
-      });
-      const resizeObserver = new ResizeObserver((entries) => {
-        handleRectChange(entries[0].contentRect);
-      });
-      resizeObserver.observe(overlay2);
-      onBeforeUnmount(() => {
-        resizeObserver.disconnect();
-      }, instance);
-      if (origin instanceof Element) {
-        const observer = new MutationObserver(handleChange);
-        observer.observe(origin, {
-          attributeFilter: ["style"]
-        });
-        onBeforeUnmount(() => {
-          observer.disconnect();
-        }, instance);
-      }
-    }, instance);
+    });
     const {
       backgroundClass,
       overlayClass,
@@ -337,15 +324,9 @@ function getOrigin(origin) {
   }
   return origin;
 }
-function calculatePosition(position, panelOrRect, origin) {
+function calculatePosition(position, rect, origin) {
   const originRect = getOriginRect(origin);
   const originPoint = getOriginRelativePoint(originRect, position);
-  let rect;
-  if (panelOrRect instanceof HTMLElement) {
-    rect = panelOrRect.getBoundingClientRect();
-  } else {
-    rect = panelOrRect;
-  }
   return getOverlayPoint(originPoint, rect, position);
 }
 function getOriginRect(origin) {
@@ -409,11 +390,31 @@ function subscribeLayoutEvent(event) {
   window.addEventListener("scroll", event, true);
   window.addEventListener("resize", event);
   window.addEventListener("orientationchange", event);
+  return () => {
+    window.removeEventListener("scroll", event, true);
+    window.removeEventListener("resize", event);
+    window.removeEventListener("orientationchange", event);
+  };
+}
+function subscribeOverlayResize(overlay2, callback) {
+  if (overlay2 instanceof Element) {
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(overlay2);
+    return () => resizeObserver.disconnect();
+  }
+  return () => {
+  };
 }
-function unsbscribeLayoutEvent(event) {
-  window.removeEventListener("scroll", event, true);
-  window.removeEventListener("resize", event);
-  window.removeEventListener("orientationchange", event);
+function subscribeOriginResize(origin, callback) {
+  if (origin instanceof Element) {
+    const observer = new MutationObserver(callback);
+    observer.observe(origin, {
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }
+  return () => {
+  };
 }
 const inBrowser = typeof window !== "undefined";
 FlexibleOverlay.install = function(app) {
@@ -707,7 +708,7 @@ var Icon = defineComponent({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
@@ -719,7 +720,7 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
@@ -1009,7 +1010,7 @@ Modal.install = function(app) {
 var index = {
   title: "Modal \u5F39\u7A97",
   category: "\u53CD\u9988",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
     app.use(Modal);
     if (!inBrowser) {

package/modal/index.umd.js

@@ -1 +1 @@
-var be=Object.defineProperty,he=Object.defineProperties;var ge=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var K=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var I=(d,t,h)=>t in d?be(d,t,{enumerable:!0,configurable:!0,writable:!0,value:h}):d[t]=h,v=(d,t)=>{for(var h in t||(t={}))K.call(t,h)&&I(d,h,t[h]);if(R)for(var h of R(t))W.call(t,h)&&I(d,h,t[h]);return d},N=(d,t)=>he(d,ge(t));var L=(d,t)=>{var h={};for(var k in d)K.call(d,k)&&t.indexOf(k)<0&&(h[k]=d[k]);if(d!=null&&R)for(var k of R(d))t.indexOf(k)<0&&W.call(d,k)&&(h[k]=d[k]);return h};var D=(d,t,h)=>(I(d,typeof t!="symbol"?t+"":t,h),h);(function(d,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis!="undefined"?globalThis:d||self,t(d.index={},d.Vue))})(this,function(d,t){"use strict";const h={width:{type:String,default:"300px"},maxHeight:{type:String},zIndex:{type:Number,default:1050},backdropZIndex:{type:Number,default:1049},placement:{type:String,default:"center"},offsetX:{type:String,default:"0px"},offsetY:{type:String,default:"0px"},showAnimation:{type:Boolean,default:!0},backdropCloseable:{type:Boolean,default:!1},bodyScrollable:{type:Boolean,default:!0},escapeable:{type:Boolean,default:!0},onClose:{type:Function},beforeHidden:{type:[Object,Function]},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}};var k="";function G(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const F=t.defineComponent({setup(e,n){return()=>{let o;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},G(o=t.renderSlot(n.slots,"default"))?o:{default:()=>[o]})]})}}}),H={visible:{type:Boolean},"onUpdate:visible":{type:Function},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},backdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},J=N(v({},H),{overlayStyle:{type:[String,Object],default:void 0}}),Q=v({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},H);function U(e){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),o=t.computed(()=>"devui-overlay"),i=l=>{var s,r;l.preventDefault(),(s=e.backdropClick)==null||s.call(e),e.backdropClose&&((r=e["onUpdate:visible"])==null||r.call(e,!1))},a=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,s=l.style.overflow,r=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const c=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${c}px`):(l.style.overflowY=s,l.style.position=r,l.style.top="",window.scrollTo(0,-c))}}),t.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:n,overlayClass:o,handleBackdropClick:i,handleOverlayBubbleCancel:a}}const M=t.defineComponent({name:"DFixedOverlay",props:J,setup(e,n){const{backgroundClass:o,overlayClass:i,handleBackdropClick:a,handleOverlayBubbleCancel:l}=U(e);return()=>t.createVNode(F,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:o.value,style:e.backgroundStyle,onClick:a},[t.createVNode("div",{class:i.value,style:e.overlayStyle,onClick:l},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function ee(e){return!!(e==null?void 0:e.$el)}function z(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}const X=t.defineComponent({name:"DFlexibleOverlay",props:Q,emits:["onUpdate:visible"],setup(e,n){const o=t.ref(null),i=t.reactive({position:"absolute"}),a=t.getCurrentInstance();t.onMounted(async()=>{await t.nextTick();const m=o.value;if(!m)return;const c=te(e.origin);if(!c)return;const u=p=>{const S=ne(e.position,p,c);i.left=`${S.x}px`,i.top=`${S.y}px`},b=()=>u(m.getBoundingClientRect()),y=t.toRef(e,"visible"),g=t.toRef(e,"position");t.watch(y,(p,S,V)=>{p?ie(b):T(b),V(()=>{T(b)})}),t.watch([y,g],()=>{b()});const w=new ResizeObserver(p=>{u(p[0].contentRect)});if(w.observe(m),t.onBeforeUnmount(()=>{w.disconnect()},a),c instanceof Element){const p=new MutationObserver(b);p.observe(c,{attributeFilter:["style"]}),t.onBeforeUnmount(()=>{p.disconnect()},a)}},a);const{backgroundClass:l,overlayClass:s,handleBackdropClick:r,handleOverlayBubbleCancel:f}=U(e);return()=>t.createVNode(F,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:l.value,onClick:r},[t.createVNode("div",{ref:o,class:s.value,style:i,onClick:f},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function te(e){return e instanceof Element?e:t.isRef(e)?z(e.value):ee(e)?z(e):e}function ne(e,n,o){const i=oe(o),a=ae(i,e);let l;return n instanceof HTMLElement?l=n.getBoundingClientRect():l=n,le(a,l,e)}function oe(e){if(e instanceof Element)return e.getBoundingClientRect();const n=e.width||0,o=e.height||0;return{top:e.y,bottom:e.y+o,left:e.x,right:e.x+n,height:o,width:n}}function le(e,n,o){let i;const{width:a,height:l}=n;o.overlayX=="center"?i=e.x-a/2:i=o.overlayX=="left"?e.x:e.x-a;let s;return o.overlayY=="center"?s=e.y-l/2:s=o.overlayY=="top"?e.y:e.y-l,{x:i,y:s}}function ae(e,n){let o;if(n.originX=="center")o=e.left+e.width/2;else{const a=e.left,l=e.right;o=n.originX=="left"?a:l}let i;return n.originY=="center"?i=e.top+e.height/2:i=n.originY=="top"?e.top:e.bottom,{x:o,y:i}}function ie(e){window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e)}function T(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}const re=typeof window!="undefined";X.install=function(e){e.component(X.name,X)},M.install=function(e){e.component(M.name,M)};var pe="",B=t.defineComponent({name:"DModal",props:h,emits:["onUpdate:modelValue"],setup(e,n){const o=t.computed(()=>e.showAnimation?e.modelValue:!0),i=a=>{var s;const l=e["onUpdate:modelValue"];if(a)l==null||l(a);else{const r=e.beforeHidden,f=c=>{var u;c&&(l==null||l(!1),(u=e.onClose)==null||u.call(e))},m=(s=typeof r=="function"?r():r)!=null?s:!0;m instanceof Promise?m.then(f):f(m)}};return n.expose({onVisibleChange:i}),()=>t.createVNode(M,{visible:e.modelValue,"onUpdate:visible":i,backgroundClass:"devui-modal-wrapper",backgroundBlock:!e.bodyScrollable,backdropClose:e.backdropCloseable},{default:()=>[t.createVNode(t.Transition,{name:"devui-modal-wipe"},{default:()=>{var a,l;return[o.value?(l=(a=n.slots).default)==null?void 0:l.call(a):null]}})]})}});class P{constructor(n){this.anchorContainer=n}renderModal(n,o,i){const a=t.h(this.component(),o,i);return t.render(a,n),a}renderNull(n){setTimeout(()=>{t.render(null,n)},500)}}class Y extends P{component(){return B}open(n={}){const o=document.createElement("div");this.anchorContainer.appendChild(o);const f=n,{content:i}=f,a=L(f,["content"]),l=m=>{m||r()},s=(m,c=l)=>this.renderModal(o,N(v({},m),{modelValue:!0,"onUpdate:modelValue":c}),{default:i}),r=()=>{var c,u;(u=(c=s(a,b=>{b?s(a):(this.renderModal(o,N(v({},a),{modelValue:!1})),this.renderNull(o))}).component.exposed).onVisibleChange)==null||u.call(c,!1)};return this.renderModal(o,{modelValue:!1}),s(a),{hide:r}}}D(Y,"token","MODAL_SERVICE_TOKEN");const de={width:{type:String,default:"300px"},maxHeight:{type:String},zIndex:{type:Number,default:1050},backdropZIndex:{type:Number,default:1049},placement:{type:String,default:"center"},offsetX:{type:String,default:"0px"},offsetY:{type:String,default:"0px"},title:{type:String},showAnimation:{type:Boolean,default:!0},backdropCloseable:{type:Boolean,default:!1},bodyScrollable:{type:Boolean,default:!0},escapeable:{type:Boolean,default:!0},onClose:{type:Function},beforeHidden:{type:[Promise,Function]},buttons:{type:Array,default:[]},dialogType:{type:String,default:"standard"},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}},se=(e=!0)=>{const n=t.ref(0),o=t.ref(0),i=()=>{n.value=0,o.value=0},a=t.ref(),l=t.ref(),s=t.isRef(e)?e:t.ref(e);return t.watch([l,a],([r,f],m,c)=>{if(!(f instanceof HTMLElement&&r instanceof HTMLElement))return;f.style.cursor="all-scroll";let u=0,b=0,y=0,g=0,w=r.getBoundingClientRect(),p=document.body.getBoundingClientRect(),S=!1;const V=C=>{if(C.preventDefault(),!s.value)return;u=C.clientX,b=C.clientY;const x=f.getBoundingClientRect();(f===C.target||f.contains(C.target))&&x.x<u&&x.y<b&&x.width+x.x>=u&&x.height+x.y>=b&&(S=!0,y=n.value,g=o.value,p=document.body.getBoundingClientRect(),w=r.getBoundingClientRect())},_=C=>{if(C.preventDefault(),!S)return;const x=y+C.clientX-u,me=g+C.clientY-b,Z=w.x-y,q=w.y-g;n.value=j(x,-Z,p.width-w.width-Z),o.value=j(me,-q,p.height-w.height-q)},A=C=>{C.preventDefault(),!!S&&(S=!1)};window.addEventListener("mousedown",V),window.addEventListener("mousemove",_),window.addEventListener("mouseup",A),c(()=>{window.removeEventListener("mousedown",V),window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",A)})}),{movingX:t.readonly(n),movingY:t.readonly(o),handleRef:a,moveElRef:l,reset:i}},j=(e,n,o)=>e<n?n:e>o?o:e;var O=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return v({},e)},render(){const{name:e,size:n,color:o,classPrefix:i}=this;return t.createVNode(t.Fragment,null,[/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:n}},null):t.createVNode("i",{class:`${i} ${i}-${e}`,style:{fontSize:n,color:o}},null)])}});O.install=function(e){e.component(O.name,O)};const ce={type:{type:String,default:"button"},btnStyle:{type:String,default:"primary"},size:{type:String,default:"md"},position:{type:String,default:"default"},bordered:{type:Boolean,default:!1},icon:{type:String,default:""},showLoading:{type:Boolean,default:!1},width:{type:String},disabled:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},onClick:{type:Function}};var we="",E=t.defineComponent({name:"DButton",props:ce,setup(e,n){const o=t.ref(null),i=r=>{var f;e.showLoading||(f=e.onClick)==null||f.call(e,r)},a=t.computed(()=>n.slots.default),l=t.computed(()=>{const{btnStyle:r,size:f,position:m,bordered:c,icon:u}=e,b=`devui-btn devui-btn-${r} devui-btn-${f} devui-btn-${m}`,y=c?"bordered":"",g=!!u&&!a.value&&r!=="primary"?"d-btn-icon":"";return`${b} ${y} ${g} ${u?"d-btn-icon-wrap":""}`}),s=t.computed(()=>{if(!e.icon)return;const r="devui-icon-fix icon";return a.value?`${r} clear-right-5`:r});return()=>{var b,y;const{icon:r,type:f,disabled:m,showLoading:c,width:u}=e;return t.createVNode("div",t.mergeProps({class:"devui-btn-host"},n.attrs),[t.createVNode("button",{class:l.value,type:f,disabled:m,style:{width:u},onClick:i},[r?t.createVNode(O,{name:e.icon,class:s.value},null):null,t.createVNode("span",{class:"button-content",ref:o},[(y=(b=n.slots).default)==null?void 0:y.call(b)])])])}}});E.install=function(e){e.component(E.name,E)};function ue(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}var fe=t.defineComponent({name:"DModal",inheritAttrs:!1,props:de,emits:["onUpdate:modelValue"],setup(e,n){const{movingX:o,movingY:i,handleRef:a,moveElRef:l,reset:s}=se();t.watch(()=>e.modelValue,y=>{y&&s()});const r=t.computed(()=>({position:"relative",left:`${o.value}px`,top:`${i.value}px`})),f=t.computed(()=>({width:e.width,maxHeight:e.maxHeight,transform:`translate(${e.offsetX}, ${e.offsetY})`,zIndex:e.zIndex})),m=t.computed(()=>{switch(e.dialogType){case"standard":return"";case"info":return"icon-info-o";case"success":return"icon-right-o";case"warning":return"icon-warning-o";case"failed":return"icon-error-o";default:return""}}),c=t.computed(()=>e.buttons.map((y,g)=>{const{btnStyle:w,disabled:p,handler:S,text:V}=y;return t.createVNode(E,{key:g,style:{display:"inline-block",margin:"0 5px"},btnStyle:w,disabled:p,onClick:S},ue(V)?V:{default:()=>[V]})})),u=t.ref(),b=()=>{var y,g;(g=(y=u.value)==null?void 0:y.onVisibleChange)==null||g.call(y,!1)};return n.expose({closeModal:b}),()=>t.createVNode(B,{ref:u,width:e.width,maxHeight:e.maxHeight,offsetX:e.offsetX,offsetY:e.offsetY,zIndex:e.zIndex,backdropZIndex:e.backdropZIndex,backdropCloseable:e.backdropCloseable,bodyScrollable:e.bodyScrollable,placement:e.placement,onClose:e.onClose,beforeHidden:e.beforeHidden,modelValue:e.modelValue,"onUpdate:modelValue":e["onUpdate:modelValue"]},{default:()=>{var y,g;return[t.createVNode("div",{class:"devui-modal-content",style:[f.value,r.value],ref:l},[t.createVNode("div",{class:"devui-modal-header",ref:a},[m.value?t.createVNode(O,{name:m.value,size:"24px",class:"header-alert-icon"},null):null,t.createVNode("span",null,[e.title]),t.createVNode(E,{class:"btn-close",icon:"close",btnStyle:"text-dark",onClick:b},null)]),t.createVNode("div",{class:"devui-modal-body"},[(g=(y=n.slots).default)==null?void 0:g.call(y)]),t.createVNode("div",{class:"devui-modal-footer"},[c.value])])]}})}});class $ extends P{component(){return fe}open(n={}){const o=document.createElement("div");this.anchorContainer.appendChild(o);const m=n,{content:i}=m,a=L(m,["content"]),l=c=>{c||r()},s=(c,u=l)=>this.renderModal(o,N(v({},c),{modelValue:!0,"onUpdate:modelValue":u}),{default:i}),r=()=>{var u,b;(b=(u=s(a,y=>{y?s(a):(this.renderModal(o,N(v({},a),{modelValue:!1})),this.renderNull(o))}).component.exposed).closeModal)==null||b.call(u)},f=c=>{const g=a,{buttons:u}=g,b=L(g,["buttons"]),y=u.map((w,p)=>v(v({},w),c[p]));s(N(v({},b),{buttons:y}))};return this.renderModal(o,{modelValue:!1}),s(a),{hide:r,updateButtonOptions:f}}}D($,"token","DIALOG_SERVICE_TOKEN"),B.install=function(e){e.component(B.name,B)};var ye={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"\u5DF2\u5B8C\u6210",install(e){if(e.use(B),!re)return;let n=document.getElementById("d-modal-anchors-container");n||(n=document.createElement("div"),n.setAttribute("id","d-modal-anchors-container"),document.body.appendChild(n)),e.provide(Y.token,new Y(n)),e.provide($.token,new $(n))}};d.Modal=B,d.default=ye,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+var pe=Object.defineProperty,ge=Object.defineProperties;var ve=Object.getOwnPropertyDescriptors;var Y=Object.getOwnPropertySymbols;var K=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var D=(s,t,p)=>t in s?pe(s,t,{enumerable:!0,configurable:!0,writable:!0,value:p}):s[t]=p,k=(s,t)=>{for(var p in t||(t={}))K.call(t,p)&&D(s,p,t[p]);if(Y)for(var p of Y(t))W.call(t,p)&&D(s,p,t[p]);return s},O=(s,t)=>ge(s,ve(t));var $=(s,t)=>{var p={};for(var S in s)K.call(s,S)&&t.indexOf(S)<0&&(p[S]=s[S]);if(s!=null&&Y)for(var S of Y(s))t.indexOf(S)<0&&W.call(s,S)&&(p[S]=s[S]);return p};var H=(s,t,p)=>(D(s,typeof t!="symbol"?t+"":t,p),p);(function(s,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis!="undefined"?globalThis:s||self,t(s.index={},s.Vue))})(this,function(s,t){"use strict";const p={width:{type:String,default:"300px"},maxHeight:{type:String},zIndex:{type:Number,default:1050},backdropZIndex:{type:Number,default:1049},placement:{type:String,default:"center"},offsetX:{type:String,default:"0px"},offsetY:{type:String,default:"0px"},showAnimation:{type:Boolean,default:!0},backdropCloseable:{type:Boolean,default:!1},bodyScrollable:{type:Boolean,default:!0},escapeable:{type:Boolean,default:!0},onClose:{type:Function},beforeHidden:{type:[Object,Function]},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}};var S="";function G(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const F=t.defineComponent({setup(e,n){return()=>{let o;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},G(o=t.renderSlot(n.slots,"default"))?o:{default:()=>[o]})]})}}}),P={visible:{type:Boolean},"onUpdate:visible":{type:Function},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},U=["onUpdate:visible","backdropClick"],J=O(k({},P),{overlayStyle:{type:[String,Object],default:void 0}}),Q=k({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},P);function j(e){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),o=t.computed(()=>"devui-overlay"),i=l=>{var u,r;l.preventDefault(),(u=e.onBackdropClick)==null||u.call(e),e.backdropClose&&((r=e["onUpdate:visible"])==null||r.call(e,!1))},a=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,u=l.style.overflow,r=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([c,b])=>{if(b){const m=l.getBoundingClientRect().y;c?(l.style.overflowY="scroll",l.style.position=c?"fixed":"",l.style.top=`${m}px`):(l.style.overflowY=u,l.style.position=r,l.style.top="",window.scrollTo(0,-m))}}),t.onUnmounted(()=>{document.body.style.overflow=u})}),{backgroundClass:n,overlayClass:o,handleBackdropClick:i,handleOverlayBubbleCancel:a}}const R=t.defineComponent({name:"DFixedOverlay",props:J,emits:U,setup(e,n){const{backgroundClass:o,overlayClass:i,handleBackdropClick:a,handleOverlayBubbleCancel:l}=j(e);return()=>t.createVNode(F,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:o.value,style:e.backgroundStyle,onClick:a},[t.createVNode("div",{class:i.value,style:e.overlayStyle,onClick:l},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function ee(e){return!!(e==null?void 0:e.$el)}function T(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}const L=t.defineComponent({name:"DFlexibleOverlay",props:Q,emits:U,setup(e,n){const o=t.ref(null),i=t.reactive({position:"absolute"});t.onMounted(async()=>{const c=(y,d,h)=>{const g=ne(y,d,h);i.left=`${g.x}px`,i.top=`${g.y}px`},b=t.computed(()=>{const y=o.value,d=te(e.origin);if(!(!y||!d))return{origin:d,overlay:y}}),m=t.toRef(e,"visible"),f=t.toRef(e,"position");t.watch([b,m,f],async([y,d,h],g,V)=>{if(!d||!y)return;const{origin:v,overlay:C}=y;c(h,C.getBoundingClientRect(),v);const X=[ie(()=>c(h,C.getBoundingClientRect(),v)),re(C,N=>c(h,N[0].contentRect,v)),de(v,()=>c(h,C.getBoundingClientRect(),v))];V(()=>{X.forEach(N=>N())})})});const{backgroundClass:a,overlayClass:l,handleBackdropClick:u,handleOverlayBubbleCancel:r}=j(e);return()=>t.createVNode(F,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:a.value,onClick:u},[t.createVNode("div",{ref:o,class:l.value,style:i,onClick:r},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function te(e){return e instanceof Element?e:t.isRef(e)?T(e.value):ee(e)?T(e):e}function ne(e,n,o){const i=oe(o),a=ae(i,e);return le(a,n,e)}function oe(e){if(e instanceof Element)return e.getBoundingClientRect();const n=e.width||0,o=e.height||0;return{top:e.y,bottom:e.y+o,left:e.x,right:e.x+n,height:o,width:n}}function le(e,n,o){let i;const{width:a,height:l}=n;o.overlayX=="center"?i=e.x-a/2:i=o.overlayX=="left"?e.x:e.x-a;let u;return o.overlayY=="center"?u=e.y-l/2:u=o.overlayY=="top"?e.y:e.y-l,{x:i,y:u}}function ae(e,n){let o;if(n.originX=="center")o=e.left+e.width/2;else{const a=e.left,l=e.right;o=n.originX=="left"?a:l}let i;return n.originY=="center"?i=e.top+e.height/2:i=n.originY=="top"?e.top:e.bottom,{x:o,y:i}}function ie(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function re(e,n){if(e instanceof Element){const o=new ResizeObserver(n);return o.observe(e),()=>o.disconnect()}return()=>{}}function de(e,n){if(e instanceof Element){const o=new MutationObserver(n);return o.observe(e,{attributeFilter:["style"]}),()=>o.disconnect()}return()=>{}}const ce=typeof window!="undefined";L.install=function(e){e.component(L.name,L)},R.install=function(e){e.component(R.name,R)};var Ce="",B=t.defineComponent({name:"DModal",props:p,emits:["onUpdate:modelValue"],setup(e,n){const o=t.computed(()=>e.showAnimation?e.modelValue:!0),i=a=>{var u;const l=e["onUpdate:modelValue"];if(a)l==null||l(a);else{const r=e.beforeHidden,c=m=>{var f;m&&(l==null||l(!1),(f=e.onClose)==null||f.call(e))},b=(u=typeof r=="function"?r():r)!=null?u:!0;b instanceof Promise?b.then(c):c(b)}};return n.expose({onVisibleChange:i}),()=>t.createVNode(R,{visible:e.modelValue,"onUpdate:visible":i,backgroundClass:"devui-modal-wrapper",backgroundBlock:!e.bodyScrollable,backdropClose:e.backdropCloseable},{default:()=>[t.createVNode(t.Transition,{name:"devui-modal-wipe"},{default:()=>{var a,l;return[o.value?(l=(a=n.slots).default)==null?void 0:l.call(a):null]}})]})}});class _{constructor(n){this.anchorContainer=n}renderModal(n,o,i){const a=t.h(this.component(),o,i);return t.render(a,n),a}renderNull(n){setTimeout(()=>{t.render(null,n)},500)}}class I extends _{component(){return B}open(n={}){const o=document.createElement("div");this.anchorContainer.appendChild(o);const c=n,{content:i}=c,a=$(c,["content"]),l=b=>{b||r()},u=(b,m=l)=>this.renderModal(o,O(k({},b),{modelValue:!0,"onUpdate:modelValue":m}),{default:i}),r=()=>{var m,f;(f=(m=u(a,y=>{y?u(a):(this.renderModal(o,O(k({},a),{modelValue:!1})),this.renderNull(o))}).component.exposed).onVisibleChange)==null||f.call(m,!1)};return this.renderModal(o,{modelValue:!1}),u(a),{hide:r}}}H(I,"token","MODAL_SERVICE_TOKEN");const se={width:{type:String,default:"300px"},maxHeight:{type:String},zIndex:{type:Number,default:1050},backdropZIndex:{type:Number,default:1049},placement:{type:String,default:"center"},offsetX:{type:String,default:"0px"},offsetY:{type:String,default:"0px"},title:{type:String},showAnimation:{type:Boolean,default:!0},backdropCloseable:{type:Boolean,default:!1},bodyScrollable:{type:Boolean,default:!0},escapeable:{type:Boolean,default:!0},onClose:{type:Function},beforeHidden:{type:[Promise,Function]},buttons:{type:Array,default:[]},dialogType:{type:String,default:"standard"},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}},ue=(e=!0)=>{const n=t.ref(0),o=t.ref(0),i=()=>{n.value=0,o.value=0},a=t.ref(),l=t.ref(),u=t.isRef(e)?e:t.ref(e);return t.watch([l,a],([r,c],b,m)=>{if(!(c instanceof HTMLElement&&r instanceof HTMLElement))return;c.style.cursor="all-scroll";let f=0,y=0,d=0,h=0,g=r.getBoundingClientRect(),V=document.body.getBoundingClientRect(),v=!1;const C=w=>{if(w.preventDefault(),!u.value)return;f=w.clientX,y=w.clientY;const x=c.getBoundingClientRect();(c===w.target||c.contains(w.target))&&x.x<f&&x.y<y&&x.width+x.x>=f&&x.height+x.y>=y&&(v=!0,d=n.value,h=o.value,V=document.body.getBoundingClientRect(),g=r.getBoundingClientRect())},X=w=>{if(w.preventDefault(),!v)return;const x=d+w.clientX-f,he=h+w.clientY-y,Z=g.x-d,q=g.y-h;n.value=A(x,-Z,V.width-g.width-Z),o.value=A(he,-q,V.height-g.height-q)},N=w=>{w.preventDefault(),!!v&&(v=!1)};window.addEventListener("mousedown",C),window.addEventListener("mousemove",X),window.addEventListener("mouseup",N),m(()=>{window.removeEventListener("mousedown",C),window.removeEventListener("mousemove",X),window.removeEventListener("mouseup",N)})}),{movingX:t.readonly(n),movingY:t.readonly(o),handleRef:a,moveElRef:l,reset:i}},A=(e,n,o)=>e<n?n:e>o?o:e;var E=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return k({},e)},render(){const{name:e,size:n,color:o,classPrefix:i}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:n}},null):t.createVNode("i",{class:`${i} ${i}-${e}`,style:{fontSize:n,color:o}},null)}});E.install=function(e){e.component(E.name,E)};const fe={type:{type:String,default:"button"},btnStyle:{type:String,default:"primary"},size:{type:String,default:"md"},position:{type:String,default:"default"},bordered:{type:Boolean,default:!1},icon:{type:String,default:""},showLoading:{type:Boolean,default:!1},width:{type:String},disabled:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},onClick:{type:Function}};var we="",M=t.defineComponent({name:"DButton",props:fe,setup(e,n){const o=t.ref(null),i=r=>{var c;e.showLoading||(c=e.onClick)==null||c.call(e,r)},a=t.computed(()=>n.slots.default),l=t.computed(()=>{const{btnStyle:r,size:c,position:b,bordered:m,icon:f}=e,y=`devui-btn devui-btn-${r} devui-btn-${c} devui-btn-${b}`,d=m?"bordered":"",h=!!f&&!a.value&&r!=="primary"?"d-btn-icon":"";return`${y} ${d} ${h} ${f?"d-btn-icon-wrap":""}`}),u=t.computed(()=>{if(!e.icon)return;const r="devui-icon-fix icon";return a.value?`${r} clear-right-5`:r});return()=>{var y,d;const{icon:r,type:c,disabled:b,showLoading:m,width:f}=e;return t.createVNode("div",t.mergeProps({class:"devui-btn-host"},n.attrs),[t.createVNode("button",{class:l.value,type:c,disabled:b,style:{width:f},onClick:i},[r?t.createVNode(E,{name:e.icon,class:u.value},null):null,t.createVNode("span",{class:"button-content",ref:o},[(d=(y=n.slots).default)==null?void 0:d.call(y)])])])}}});M.install=function(e){e.component(M.name,M)};function ye(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}var me=t.defineComponent({name:"DModal",inheritAttrs:!1,props:se,emits:["onUpdate:modelValue"],setup(e,n){const{movingX:o,movingY:i,handleRef:a,moveElRef:l,reset:u}=ue();t.watch(()=>e.modelValue,d=>{d&&u()});const r=t.computed(()=>({position:"relative",left:`${o.value}px`,top:`${i.value}px`})),c=t.computed(()=>({width:e.width,maxHeight:e.maxHeight,transform:`translate(${e.offsetX}, ${e.offsetY})`,zIndex:e.zIndex})),b=t.computed(()=>{switch(e.dialogType){case"standard":return"";case"info":return"icon-info-o";case"success":return"icon-right-o";case"warning":return"icon-warning-o";case"failed":return"icon-error-o";default:return""}}),m=t.computed(()=>e.buttons.map((d,h)=>{const{btnStyle:g,disabled:V,handler:v,text:C}=d;return t.createVNode(M,{key:h,style:{display:"inline-block",margin:"0 5px"},btnStyle:g,disabled:V,onClick:v},ye(C)?C:{default:()=>[C]})})),f=t.ref(),y=()=>{var d,h;(h=(d=f.value)==null?void 0:d.onVisibleChange)==null||h.call(d,!1)};return n.expose({closeModal:y}),()=>t.createVNode(B,{ref:f,width:e.width,maxHeight:e.maxHeight,offsetX:e.offsetX,offsetY:e.offsetY,zIndex:e.zIndex,backdropZIndex:e.backdropZIndex,backdropCloseable:e.backdropCloseable,bodyScrollable:e.bodyScrollable,placement:e.placement,onClose:e.onClose,beforeHidden:e.beforeHidden,modelValue:e.modelValue,"onUpdate:modelValue":e["onUpdate:modelValue"]},{default:()=>{var d,h;return[t.createVNode("div",{class:"devui-modal-content",style:[c.value,r.value],ref:l},[t.createVNode("div",{class:"devui-modal-header",ref:a},[b.value?t.createVNode(E,{name:b.value,size:"24px",class:"header-alert-icon"},null):null,t.createVNode("span",null,[e.title]),t.createVNode(M,{class:"btn-close",icon:"close",btnStyle:"text-dark",onClick:y},null)]),t.createVNode("div",{class:"devui-modal-body"},[(h=(d=n.slots).default)==null?void 0:h.call(d)]),t.createVNode("div",{class:"devui-modal-footer"},[m.value])])]}})}});class z extends _{component(){return me}open(n={}){const o=document.createElement("div");this.anchorContainer.appendChild(o);const b=n,{content:i}=b,a=$(b,["content"]),l=m=>{m||r()},u=(m,f=l)=>this.renderModal(o,O(k({},m),{modelValue:!0,"onUpdate:modelValue":f}),{default:i}),r=()=>{var f,y;(y=(f=u(a,d=>{d?u(a):(this.renderModal(o,O(k({},a),{modelValue:!1})),this.renderNull(o))}).component.exposed).closeModal)==null||y.call(f)},c=m=>{const h=a,{buttons:f}=h,y=$(h,["buttons"]),d=f.map((g,V)=>k(k({},g),m[V]));u(O(k({},y),{buttons:d}))};return this.renderModal(o,{modelValue:!1}),u(a),{hide:r,updateButtonOptions:c}}}H(z,"token","DIALOG_SERVICE_TOKEN"),B.install=function(e){e.component(B.name,B)};var be={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(e){if(e.use(B),!ce)return;let n=document.getElementById("d-modal-anchors-container");n||(n=document.createElement("div"),n.setAttribute("id","d-modal-anchors-container"),document.body.appendChild(n)),e.provide(I.token,new I(n)),e.provide(z.token,new z(n))}};s.Modal=B,s.default=be,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/nav-sprite/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/overlay/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/overlay/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, getCurrentInstance, nextTick, toRef, onBeforeUnmount, isRef } from "vue";
+import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, toRef, isRef } from "vue";
 var overlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -56,7 +56,7 @@ const overlayProps = {
   backgroundStyle: {
     type: [String, Object]
   },
-  backdropClick: {
+  onBackdropClick: {
     type: Function
   },
   backdropClose: {
@@ -68,6 +68,7 @@ const overlayProps = {
     default: true
   }
 };
+const overlayEmits = ["onUpdate:visible", "backdropClick"];
 const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
   overlayStyle: {
     type: [String, Object],
@@ -103,7 +104,7 @@ function useOverlayLogic(props) {
   const handleBackdropClick = (event) => {
     var _a, _b;
     event.preventDefault();
-    (_a = props.backdropClick) == null ? void 0 : _a.call(props);
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
     if (props.backdropClose) {
       (_b = props["onUpdate:visible"]) == null ? void 0 : _b.call(props, false);
     }
@@ -142,6 +143,7 @@ function useOverlayLogic(props) {
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
+  emits: overlayEmits,
   setup(props, ctx) {
     const {
       backgroundClass,
@@ -177,61 +179,46 @@ function getElement(element) {
 const FlexibleOverlay = defineComponent({
   name: "DFlexibleOverlay",
   props: flexibleOverlayProps,
-  emits: ["onUpdate:visible"],
+  emits: overlayEmits,
   setup(props, ctx) {
     const overlayRef = ref(null);
     const positionedStyle = reactive({
       position: "absolute"
     });
-    const instance = getCurrentInstance();
     onMounted(async () => {
-      await nextTick();
-      const overlay2 = overlayRef.value;
-      if (!overlay2) {
-        return;
-      }
-      const origin = getOrigin(props.origin);
-      if (!origin) {
-        return;
-      }
-      const handleRectChange = (rect) => {
-        const point = calculatePosition(props.position, rect, origin);
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
         positionedStyle.left = `${point.x}px`;
         positionedStyle.top = `${point.y}px`;
       };
-      const handleChange = () => handleRectChange(overlay2.getBoundingClientRect());
+      const locationElements = computed(() => {
+        const overlay2 = overlayRef.value;
+        const origin = getOrigin(props.origin);
+        if (!overlay2 || !origin) {
+          return;
+        }
+        return {
+          origin,
+          overlay: overlay2
+        };
+      });
       const visibleRef = toRef(props, "visible");
       const positionRef = toRef(props, "position");
-      watch(visibleRef, (visible, ov, onInvalidate) => {
-        if (visible) {
-          subscribeLayoutEvent(handleChange);
-        } else {
-          unsbscribeLayoutEvent(handleChange);
+      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
+        if (!visible || !locationElements2) {
+          return;
         }
+        const {
+          origin,
+          overlay: overlay2
+        } = locationElements2;
+        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
+        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
         onInvalidate(() => {
-          unsbscribeLayoutEvent(handleChange);
+          unsubscriptions.forEach((fn) => fn());
         });
       });
-      watch([visibleRef, positionRef], () => {
-        handleChange();
-      });
-      const resizeObserver = new ResizeObserver((entries) => {
-        handleRectChange(entries[0].contentRect);
-      });
-      resizeObserver.observe(overlay2);
-      onBeforeUnmount(() => {
-        resizeObserver.disconnect();
-      }, instance);
-      if (origin instanceof Element) {
-        const observer = new MutationObserver(handleChange);
-        observer.observe(origin, {
-          attributeFilter: ["style"]
-        });
-        onBeforeUnmount(() => {
-          observer.disconnect();
-        }, instance);
-      }
-    }, instance);
+    });
     const {
       backgroundClass,
       overlayClass,
@@ -264,15 +251,9 @@ function getOrigin(origin) {
   }
   return origin;
 }
-function calculatePosition(position, panelOrRect, origin) {
+function calculatePosition(position, rect, origin) {
   const originRect = getOriginRect(origin);
   const originPoint = getOriginRelativePoint(originRect, position);
-  let rect;
-  if (panelOrRect instanceof HTMLElement) {
-    rect = panelOrRect.getBoundingClientRect();
-  } else {
-    rect = panelOrRect;
-  }
   return getOverlayPoint(originPoint, rect, position);
 }
 function getOriginRect(origin) {
@@ -336,11 +317,31 @@ function subscribeLayoutEvent(event) {
   window.addEventListener("scroll", event, true);
   window.addEventListener("resize", event);
   window.addEventListener("orientationchange", event);
+  return () => {
+    window.removeEventListener("scroll", event, true);
+    window.removeEventListener("resize", event);
+    window.removeEventListener("orientationchange", event);
+  };
+}
+function subscribeOverlayResize(overlay2, callback) {
+  if (overlay2 instanceof Element) {
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(overlay2);
+    return () => resizeObserver.disconnect();
+  }
+  return () => {
+  };
 }
-function unsbscribeLayoutEvent(event) {
-  window.removeEventListener("scroll", event, true);
-  window.removeEventListener("resize", event);
-  window.removeEventListener("orientationchange", event);
+function subscribeOriginResize(origin, callback) {
+  if (origin instanceof Element) {
+    const observer = new MutationObserver(callback);
+    observer.observe(origin, {
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }
+  return () => {
+  };
 }
 const inBrowser = typeof window !== "undefined";
 FlexibleOverlay.install = function(app) {
@@ -352,7 +353,7 @@ FixedOverlay.install = function(app) {
 var index = {
   title: "Overlay \u906E\u7F69\u5C42",
   category: "\u901A\u7528",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
     app.use(FixedOverlay);
     app.use(FlexibleOverlay);

package/overlay/index.umd.js

@@ -1 +1 @@
-var I=Object.defineProperty,q=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var F=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable;var j=(i,t,c)=>t in i?I(i,t,{enumerable:!0,configurable:!0,writable:!0,value:c}):i[t]=c,w=(i,t)=>{for(var c in t||(t={}))G.call(t,c)&&j(i,c,t[c]);if(F)for(var c of F(t))J.call(t,c)&&j(i,c,t[c]);return i},L=(i,t)=>q(i,H(t));(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,t){"use strict";var c="";function V(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const k=t.defineComponent({setup(e,n){return()=>{let l;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},V(l=t.renderSlot(n.slots,"default"))?l:{default:()=>[l]})]})}}}),g={visible:{type:Boolean},"onUpdate:visible":{type:Function},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},backdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},N=L(w({},g),{overlayStyle:{type:[String,Object],default:void 0}}),T=w({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},g);function O(e){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),l=t.computed(()=>"devui-overlay"),r=o=>{var s,f;o.preventDefault(),(s=e.backdropClick)==null||s.call(e),e.backdropClose&&((f=e["onUpdate:visible"])==null||f.call(e,!1))},a=o=>o.cancelBubble=!0;return t.onMounted(()=>{const o=document.body,s=o.style.overflow,f=o.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([C,v])=>{if(v){const u=o.getBoundingClientRect().y;C?(o.style.overflowY="scroll",o.style.position=C?"fixed":"",o.style.top=`${u}px`):(o.style.overflowY=s,o.style.position=f,o.style.top="",window.scrollTo(0,-u))}}),t.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:n,overlayClass:l,handleBackdropClick:r,handleOverlayBubbleCancel:a}}const y=t.defineComponent({name:"DFixedOverlay",props:N,setup(e,n){const{backgroundClass:l,overlayClass:r,handleBackdropClick:a,handleOverlayBubbleCancel:o}=O(e);return()=>t.createVNode(k,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:l.value,style:e.backgroundStyle,onClick:a},[t.createVNode("div",{class:r.value,style:e.overlayStyle,onClick:o},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function X(e){return!!(e==null?void 0:e.$el)}function p(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}const b=t.defineComponent({name:"DFlexibleOverlay",props:T,emits:["onUpdate:visible"],setup(e,n){const l=t.ref(null),r=t.reactive({position:"absolute"}),a=t.getCurrentInstance();t.onMounted(async()=>{await t.nextTick();const v=l.value;if(!v)return;const u=Y(e.origin);if(!u)return;const B=d=>{const m=_(e.position,d,u);r.left=`${m.x}px`,r.top=`${m.y}px`},h=()=>B(v.getBoundingClientRect()),E=t.toRef(e,"visible"),P=t.toRef(e,"position");t.watch(E,(d,m,A)=>{d?U(h):x(h),A(()=>{x(h)})}),t.watch([E,P],()=>{h()});const S=new ResizeObserver(d=>{B(d[0].contentRect)});if(S.observe(v),t.onBeforeUnmount(()=>{S.disconnect()},a),u instanceof Element){const d=new MutationObserver(h);d.observe(u,{attributeFilter:["style"]}),t.onBeforeUnmount(()=>{d.disconnect()},a)}},a);const{backgroundClass:o,overlayClass:s,handleBackdropClick:f,handleOverlayBubbleCancel:C}=O(e);return()=>t.createVNode(k,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:o.value,onClick:f},[t.createVNode("div",{ref:l,class:s.value,style:r,onClick:C},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function Y(e){return e instanceof Element?e:t.isRef(e)?p(e.value):X(e)?p(e):e}function _(e,n,l){const r=R(l),a=M(r,e);let o;return n instanceof HTMLElement?o=n.getBoundingClientRect():o=n,D(a,o,e)}function R(e){if(e instanceof Element)return e.getBoundingClientRect();const n=e.width||0,l=e.height||0;return{top:e.y,bottom:e.y+l,left:e.x,right:e.x+n,height:l,width:n}}function D(e,n,l){let r;const{width:a,height:o}=n;l.overlayX=="center"?r=e.x-a/2:r=l.overlayX=="left"?e.x:e.x-a;let s;return l.overlayY=="center"?s=e.y-o/2:s=l.overlayY=="top"?e.y:e.y-o,{x:r,y:s}}function M(e,n){let l;if(n.originX=="center")l=e.left+e.width/2;else{const a=e.left,o=e.right;l=n.originX=="left"?a:o}let r;return n.originY=="center"?r=e.top+e.height/2:r=n.originY=="top"?e.top:e.bottom,{x:l,y:r}}function U(e){window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e)}function x(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}const $=typeof window!="undefined";b.install=function(e){e.component(b.name,b)},y.install=function(e){e.component(y.name,y)};var z={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"\u5DF2\u5B8C\u6210",install(e){if(e.use(y),e.use(b),$&&!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)}}};i.FixedOverlay=y,i.FlexibleOverlay=b,i.default=z,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+var J=Object.defineProperty,K=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable;var F=(r,t,a)=>t in r?J(r,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):r[t]=a,p=(r,t)=>{for(var a in t||(t={}))W.call(t,a)&&F(r,a,t[a]);if(j)for(var a of j(t))Z.call(t,a)&&F(r,a,t[a]);return r},V=(r,t)=>K(r,Q(t));(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.index={},r.Vue))})(this,function(r,t){"use strict";var a="";function N(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const B=t.defineComponent({setup(e,n){return()=>{let o;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},N(o=t.renderSlot(n.slots,"default"))?o:{default:()=>[o]})]})}}}),x={visible:{type:Boolean},"onUpdate:visible":{type:Function},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},E=["onUpdate:visible","backdropClick"],L=V(p({},x),{overlayStyle:{type:[String,Object],default:void 0}}),X=p({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},x);function S(e){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),o=t.computed(()=>"devui-overlay"),i=l=>{var s,f;l.preventDefault(),(s=e.onBackdropClick)==null||s.call(e),e.backdropClose&&((f=e["onUpdate:visible"])==null||f.call(e,!1))},c=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,s=l.style.overflow,f=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([d,w])=>{if(w){const C=l.getBoundingClientRect().y;d?(l.style.overflowY="scroll",l.style.position=d?"fixed":"",l.style.top=`${C}px`):(l.style.overflowY=s,l.style.position=f,l.style.top="",window.scrollTo(0,-C))}}),t.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:n,overlayClass:o,handleBackdropClick:i,handleOverlayBubbleCancel:c}}const v=t.defineComponent({name:"DFixedOverlay",props:L,emits:E,setup(e,n){const{backgroundClass:o,overlayClass:i,handleBackdropClick:c,handleOverlayBubbleCancel:l}=S(e);return()=>t.createVNode(B,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:o.value,style:e.backgroundStyle,onClick:c},[t.createVNode("div",{class:i.value,style:e.overlayStyle,onClick:l},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function Y(e){return!!(e==null?void 0:e.$el)}function R(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}const h=t.defineComponent({name:"DFlexibleOverlay",props:X,emits:E,setup(e,n){const o=t.ref(null),i=t.reactive({position:"absolute"});t.onMounted(async()=>{const d=(u,y,b)=>{const g=z(u,y,b);i.left=`${g.x}px`,i.top=`${g.y}px`},w=t.computed(()=>{const u=o.value,y=_(e.origin);if(!(!u||!y))return{origin:y,overlay:u}}),C=t.toRef(e,"visible"),I=t.toRef(e,"position");t.watch([w,C,I],async([u,y,b],g,G)=>{if(!y||!u)return;const{origin:m,overlay:k}=u;d(b,k.getBoundingClientRect(),m);const H=[M(()=>d(b,k.getBoundingClientRect(),m)),P(k,O=>d(b,O[0].contentRect,m)),U(m,()=>d(b,k.getBoundingClientRect(),m))];G(()=>{H.forEach(O=>O())})})});const{backgroundClass:c,overlayClass:l,handleBackdropClick:s,handleOverlayBubbleCancel:f}=S(e);return()=>t.createVNode(B,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:c.value,onClick:s},[t.createVNode("div",{ref:o,class:l.value,style:i,onClick:f},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function _(e){return e instanceof Element?e:t.isRef(e)?R(e.value):Y(e)?R(e):e}function z(e,n,o){const i=T(o),c=D(i,e);return $(c,n,e)}function T(e){if(e instanceof Element)return e.getBoundingClientRect();const n=e.width||0,o=e.height||0;return{top:e.y,bottom:e.y+o,left:e.x,right:e.x+n,height:o,width:n}}function $(e,n,o){let i;const{width:c,height:l}=n;o.overlayX=="center"?i=e.x-c/2:i=o.overlayX=="left"?e.x:e.x-c;let s;return o.overlayY=="center"?s=e.y-l/2:s=o.overlayY=="top"?e.y:e.y-l,{x:i,y:s}}function D(e,n){let o;if(n.originX=="center")o=e.left+e.width/2;else{const c=e.left,l=e.right;o=n.originX=="left"?c:l}let i;return n.originY=="center"?i=e.top+e.height/2:i=n.originY=="top"?e.top:e.bottom,{x:o,y:i}}function M(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function P(e,n){if(e instanceof Element){const o=new ResizeObserver(n);return o.observe(e),()=>o.disconnect()}return()=>{}}function U(e,n){if(e instanceof Element){const o=new MutationObserver(n);return o.observe(e,{attributeFilter:["style"]}),()=>o.disconnect()}return()=>{}}const A=typeof window!="undefined";h.install=function(e){e.component(h.name,h)},v.install=function(e){e.component(v.name,v)};var q={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.use(v),e.use(h),A&&!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)}}};r.FixedOverlay=v,r.FlexibleOverlay=h,r.default=q,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.8",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [
@@ -18,29 +18,6 @@
   "main": "vue-devui.umd.js",
   "module": "vue-devui.es.js",
   "style": "style.css",
-  "bin": {
-    "devui-cli": "./devui-cli/index.js"
-  },
-  "scripts": {
-    "dev": "yarn generate:theme && vitepress dev docs",
-    "build": "yarn generate:theme && vitepress build docs && cp public/* docs/.vitepress/dist/assets",
-    "serve": "vitepress serve docs",
-    "app:dev": "vite",
-    "app:build": "vite build",
-    "build:lib": "yarn predev && yarn build:components && yarn generate:theme && yarn copy",
-    "test": "jest --config jest.config.js",
-    "ls-lint": "ls-lint",
-    "lint": "eslint \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
-    "lint:fix": "eslint --fix \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
-    "stylelint": "stylelint --fix \"{devui,src}/**/*.{scss,css}\"",
-    "build:components": "node ./devui-cli/index.js build",
-    "generate:theme": "node ./devui-cli/index.js generate:theme",
-    "copy": "cp package.json build && cp README.md build && cp devui/theme/theme.scss build/theme",
-    "clean:cli": "npm uninstall -g devui-cli & npm uninstall -g vue-devui",
-    "cli:create": "node ./devui-cli/index.js create -t component",
-    "predev": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error",
-    "prebuild": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error"
-  },
   "dependencies": {
     "@devui-design/icons": "^1.3.0",
     "@types/lodash-es": "^4.17.4",
@@ -78,7 +55,7 @@
     "eslint": "^7.28.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-vue": "^7.11.1",
-    "husky": "^4.3.7",
+    "husky": "^7.0.4",
     "inquirer": "^8.1.2",
     "jest": "^27.0.4",
     "lint-staged": "^11.0.0",
@@ -99,12 +76,6 @@
     "vue-tsc": "^0.2.2",
     "yarn": "^1.22.11"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "ls-lint && lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "lint-staged": {
     "{src,devui}/**/*.{js,ts,jsx,tsx,vue}": "eslint --fix",
     "{src,devui}/**/*.{scss,css}": "stylelint --fix"

package/pagination/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/pagination/index.es.js

@@ -323,8 +323,8 @@ var JumpPage = defineComponent({
       createVNode(resolveComponent("d-input"), {
         "class": ["devui-pagination-input", size ? "devui-pagination-input-" + size : ""],
         "size": size,
-        "value": String(inputNum),
-        "onUpdate:value": jumpPageChange,
+        "modelValue": String(inputNum),
+        "onUpdate:modelValue": jumpPageChange,
         "onKeydown": jump
       }, null),
       goToText === "\u8DF3\u81F3" && "\u9875",
@@ -634,7 +634,7 @@ Pagination.install = (app) => {
 var index = {
   title: "Pagination \u5206\u9875",
   category: "\u5BFC\u822A",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
     app.use(Pagination);
   }