vue-devui 1.0.0-rc.0 → 1.0.0-rc.3

package/loading/index.es.js

@@ -115,8 +115,8 @@ var Loading = defineComponent({
   }
 });
 const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
-function createComponent(Component, props, children = null) {
-  const vnode = h(Component, __spreadValues({}, props), children);
+function createComponent(component, props, children = null) {
+  const vnode = h(component, __spreadValues({}, props), children);
   const container = document.createElement("div");
   vnode[COMPONENT_CONTAINER_SYMBOL] = container;
   render(vnode, container);
@@ -196,13 +196,14 @@ const removeAttribute = (el) => {
   el.removeAttribute("loadingtemplateref");
 };
 const handleProps = (el, vprops) => {
+  var _a;
   const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
   const loadingTemplateRef = props.loadingTemplateRef;
   const loadingInstance = createComponent(loadingConstructor$1, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
   el.style.position = props.positionType;
   el.options = props;
   el.instance = loadingInstance;
-  el.mask = loadingInstance.proxy.$el;
+  el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
 };
 const loadingDirective = {
   mounted: function(el, binding, vnode) {
@@ -222,25 +223,32 @@ const loadingConstructor = defineComponent(Loading);
 const cacheTarget = /* @__PURE__ */ new WeakMap();
 const loading = {
   open(options = {}) {
+    var _a, _b, _c;
     const parent = options.target || document.body;
     if (cacheTarget.has(parent)) {
       return cacheTarget.get(parent);
     }
-    parent.style.position = options.positionType;
+    if (parent.style) {
+      parent.style.position = options.positionType;
+    }
     const isFull = document.body === parent;
     options = __spreadValues(__spreadValues({}, new LoadingProps()), options);
     const instance = createComponent(loadingConstructor, __spreadProps(__spreadValues({}, options), {
       isFull
     }), options.loadingTemplateRef ? () => options.loadingTemplateRef : null);
     cacheTarget.set(parent, instance);
-    instance.proxy.open();
-    parent.appendChild(instance.proxy.$el);
-    const close = instance.proxy.close;
-    instance.loadingInstance = instance.proxy;
-    instance.loadingInstance.close = (...args) => {
-      cacheTarget.delete(parent);
-      close(...args);
-    };
+    (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.open();
+    parent.appendChild((_b = instance == null ? void 0 : instance.proxy) == null ? void 0 : _b.$el);
+    const close = (_c = instance == null ? void 0 : instance.proxy) == null ? void 0 : _c.close;
+    if (instance) {
+      instance.loadingInstance = instance == null ? void 0 : instance.proxy;
+      if (instance.loadingInstance) {
+        instance.loadingInstance.close = (...args) => {
+          cacheTarget.delete(parent);
+          close == null ? void 0 : close(...args);
+        };
+      }
+    }
     return instance;
   }
 };

package/loading/index.umd.js

@@ -1 +1 @@
-var M=Object.defineProperty,R=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var k=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var g=(r,t,s)=>t in r?M(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,c=(r,t)=>{for(var s in t||(t={}))D.call(t,s)&&g(r,s,t[s]);if(k)for(var s of k(t))I.call(t,s)&&g(r,s,t[s]);return r},P=(r,t)=>R(r,_(t));var d=(r,t,s)=>(g(r,typeof t!="symbol"?t+"":t,s),s);(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";class s{constructor(){d(this,"top","50%");d(this,"left","50%")}}const L={message:String,backdrop:Boolean,view:{type:Object,default:()=>new s},zIndex:Number,isFull:{type:Boolean,default:!1}};class m{constructor(){d(this,"target");d(this,"message");d(this,"loadingTemplateRef");d(this,"backdrop",!0);d(this,"positionType","relative");d(this,"view",new s);d(this,"zIndex")}}var B="",y=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:L,setup(e){const n={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(n.background="none");const o=t.ref(!1);return{style:n,isShow:o,open:()=>{o.value=!0},close:()=>{o.value=!1}}},render(){var V;const{isShow:e,isFull:n,backdrop:o,style:i,message:a,$slots:u}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",n?"devui-loading--full":""]},[((V=u.default)==null?void 0:V.call(u))||t.createVNode("div",{class:"devui-loading-wrapper"},[o?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:i,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),a?t.createVNode("span",{class:"devui-loading-text"},[a]):null])])])}});const v=Symbol("dev_component_container");function b(e,n,o=null){const i=t.h(e,c({},n),o),a=document.createElement("div");return i[v]=a,t.render(i,a),i.component}function C(e){t.render(null,e==null?void 0:e.vnode[v])}const O=t.defineComponent(y),l=new WeakSet,f=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},h=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),j=e=>{switch(h(e)){case"promise":return[e];case"array":return e.some(o=>h(o)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},w=e=>{l.delete(e),e.instance.proxy.close(),C(e.instance)},T=(e,n)=>{if(n.value){const o=j(n.value);if(o==="error")return;e.instance.proxy.open(),e.appendChild(e.mask),l.add(e),o&&Promise.all(o).catch(i=>{console.error(new Error("Promise handling errors"),i)}).finally(()=>{w(e)})}else w(e)},N=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},x=(e,n)=>{const o=c(c({},new m),n),i=o.loadingTemplateRef,a=b(O,c({},o),i?()=>i:null);e.style.position=o.positionType,e.options=o,e.instance=a,e.mask=a.proxy.$el},A={mounted:function(e,n,o){x(e,o.props),N(e),!f(n.value)&&T(e,n)},updated:function(e,n,o){!f(n.value)&&l.has(e)||f(n.value)&&!l.has(e)||(!l.has(e)&&x(e,o.props),N(e),T(e,n))}},z=t.defineComponent(y),p=new WeakMap,S={open(e={}){const n=e.target||document.body;if(p.has(n))return p.get(n);n.style.position=e.positionType;const o=document.body===n;e=c(c({},new m),e);const i=b(z,P(c({},e),{isFull:o}),e.loadingTemplateRef?()=>e.loadingTemplateRef:null);p.set(n,i),i.proxy.open(),n.appendChild(i.proxy.$el);const a=i.proxy.close;return i.loadingInstance=i.proxy,i.loadingInstance.close=(...u)=>{p.delete(n),a(...u)},i}};var E={title:"Loading \u52A0\u8F7D\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(e){e.directive("dLoading",A),e.config.globalProperties.$loadingService=S}};r.Loading=A,r.LoadingService=S,r.default=E,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+var _=Object.defineProperty,D=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var m=(i,t,s)=>t in i?_(i,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[t]=s,c=(i,t)=>{for(var s in t||(t={}))F.call(t,s)&&m(i,s,t[s]);if(P)for(var s of P(t))I.call(t,s)&&m(i,s,t[s]);return i},L=(i,t)=>D(i,B(t));var d=(i,t,s)=>(m(i,typeof t!="symbol"?t+"":t,s),s);(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";class s{constructor(){d(this,"top","50%");d(this,"left","50%")}}const C={message:String,backdrop:Boolean,view:{type:Object,default:()=>new s},zIndex:Number,isFull:{type:Boolean,default:!1}};class y{constructor(){d(this,"target");d(this,"message");d(this,"loadingTemplateRef");d(this,"backdrop",!0);d(this,"positionType","relative");d(this,"view",new s);d(this,"zIndex")}}var $="",v=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:C,setup(e){const n={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(n.background="none");const r=t.ref(!1);return{style:n,isShow:r,open:()=>{r.value=!0},close:()=>{r.value=!1}}},render(){var p;const{isShow:e,isFull:n,backdrop:r,style:o,message:a,$slots:l}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",n?"devui-loading--full":""]},[((p=l.default)==null?void 0:p.call(l))||t.createVNode("div",{class:"devui-loading-wrapper"},[r?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:o,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),a?t.createVNode("span",{class:"devui-loading-text"},[a]):null])])])}});const b=Symbol("dev_component_container");function h(e,n,r=null){const o=t.h(e,c({},n),r),a=document.createElement("div");return o[b]=a,t.render(o,a),o.component}function O(e){t.render(null,e==null?void 0:e.vnode[b])}const j=t.defineComponent(v),u=new WeakSet,g=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},w=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),z=e=>{switch(w(e)){case"promise":return[e];case"array":return e.some(r=>w(r)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},T=e=>{u.delete(e),e.instance.proxy.close(),O(e.instance)},N=(e,n)=>{if(n.value){const r=z(n.value);if(r==="error")return;e.instance.proxy.open(),e.appendChild(e.mask),u.add(e),r&&Promise.all(r).catch(o=>{console.error(new Error("Promise handling errors"),o)}).finally(()=>{T(e)})}else T(e)},x=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},A=(e,n)=>{var l;const r=c(c({},new y),n),o=r.loadingTemplateRef,a=h(j,c({},r),o?()=>o:null);e.style.position=r.positionType,e.options=r,e.instance=a,e.mask=(l=a==null?void 0:a.proxy)==null?void 0:l.$el},S={mounted:function(e,n,r){A(e,r.props),x(e),!g(n.value)&&N(e,n)},updated:function(e,n,r){!g(n.value)&&u.has(e)||g(n.value)&&!u.has(e)||(!u.has(e)&&A(e,r.props),x(e),N(e,n))}},E=t.defineComponent(v),f=new WeakMap,V={open(e={}){var l,p,k;const n=e.target||document.body;if(f.has(n))return f.get(n);n.style&&(n.style.position=e.positionType);const r=document.body===n;e=c(c({},new y),e);const o=h(E,L(c({},e),{isFull:r}),e.loadingTemplateRef?()=>e.loadingTemplateRef:null);f.set(n,o),(l=o==null?void 0:o.proxy)==null||l.open(),n.appendChild((p=o==null?void 0:o.proxy)==null?void 0:p.$el);const a=(k=o==null?void 0:o.proxy)==null?void 0:k.close;return o&&(o.loadingInstance=o==null?void 0:o.proxy,o.loadingInstance&&(o.loadingInstance.close=(...R)=>{f.delete(n),a==null||a(...R)})),o}};var M={title:"Loading \u52A0\u8F7D\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(e){e.directive("dLoading",S),e.config.globalProperties.$loadingService=V}};i.Loading=S,i.LoadingService=V,i.default=M,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/modal/index.es.js

@@ -33,8 +33,8 @@ 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, ref, nextTick, unref, mergeProps, toRefs, h, render } from "vue";
-import { offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
+import { defineComponent, toRefs, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, h, render } from "vue";
+import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
 const modalProps = {
   modelValue: {
     type: Boolean,
@@ -56,56 +56,54 @@ const modalProps = {
     type: Function
   }
 };
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
 var Icon = defineComponent({
   name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
-  },
+  props: iconProps,
   setup(props) {
-    return __spreadValues({}, props);
-  },
-  render() {
     const {
       name,
       size,
       color,
       classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size,
-        verticalAlign: "text-bottom"
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color
-      }
-    }, null);
+    } = toRefs(props);
+    return () => {
+      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: size.value,
+          verticalAlign: "text-bottom"
+        }
+      }, null) : createVNode("i", {
+        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+        "style": {
+          fontSize: size.value,
+          color: color.value
+        }
+      }, null);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
-var overlay = "";
+var baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -152,43 +150,13 @@ const overlayProps = {
     default: true
   }
 };
-const overlayEmits = ["update:visible", "backdropClick"];
 const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
   overlayStyle: {
     type: [String, Object],
     default: void 0
   }
 });
-const flexibleOverlayProps = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  origin: {
-    type: Object,
-    require: true
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  offset: {
-    type: [Number, Object],
-    default: 8
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  showArrow: {
-    type: Boolean,
-    default: false
-  },
-  isArrowCenter: {
-    type: Boolean,
-    default: true
-  }
-};
+const overlayEmits = ["update:visible", "backdropClick"];
 function useOverlayLogic(props, ctx) {
   const backgroundClass = computed(() => {
     return [
@@ -239,6 +207,7 @@ function useOverlayLogic(props, ctx) {
     handleOverlayBubbleCancel
   };
 }
+var fixedOverlay = "";
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
@@ -263,6 +232,36 @@ const FixedOverlay = defineComponent({
     });
   }
 });
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  }
+};
 function getScrollParent(element) {
   const overflowRegex = /(auto|scroll|hidden)/;
   for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
@@ -295,6 +294,7 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
 function useOverlay(props, emit) {
   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 = {
@@ -316,6 +316,7 @@ function useOverlay(props, emit) {
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
     const middleware = [
+      shift(),
       offset(props.offset),
       autoPlacement({
         alignment: props.align,
@@ -332,25 +333,24 @@ function useOverlay(props, emit) {
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
   watch(() => props.modelValue, () => {
-    const originParent = getScrollParent(props.origin);
     if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent.addEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
       originParent !== window && window.addEventListener("scroll", updatePosition);
       window.addEventListener("resize", updatePosition);
     } else {
-      originParent.removeEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
       originParent !== window && window.removeEventListener("scroll", updatePosition);
       window.removeEventListener("resize", updatePosition);
     }
   });
   onUnmounted(() => {
-    const originParent = getScrollParent(props.origin);
-    originParent.removeEventListener("scroll", updatePosition);
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
     originParent !== window && window.removeEventListener("scroll", updatePosition);
     window.removeEventListener("resize", updatePosition);
   });
-  return { arrowRef, overlayRef };
+  return { arrowRef, overlayRef, updatePosition };
 }
 var flexibleOverlay = "";
 defineComponent({
@@ -361,12 +361,17 @@ defineComponent({
   setup(props, {
     slots,
     attrs,
-    emit
+    emit,
+    expose
   }) {
     const {
       arrowRef,
-      overlayRef
+      overlayRef,
+      updatePosition
     } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
     return () => {
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
@@ -441,36 +446,39 @@ var Modal = defineComponent({
     expose({
       handleVisibleChange
     });
-    return () => createVNode(FixedOverlay, {
-      "visible": modelValue.value,
-      "onUpdate:visible": handleVisibleChange,
-      "background-class": "devui-modal-mask",
-      "background-block": lockScroll.value,
-      "backdrop-close": closeOnClickOverlay.value
-    }, {
-      default: () => [createVNode(Transition, {
-        "name": "devui-modal-wipe"
-      }, {
-        default: () => {
-          var _a;
-          return [createVNode("div", mergeProps({
-            "class": "devui-modal"
-          }, attrs), [createVNode(Icon, {
-            "name": "close",
-            "class": "btn-close",
-            "size": "var(--devui-font-size-md,12px)",
-            "onClick": () => handleVisibleChange(false)
-          }, null), slots.header ? slots.header() : title.value && createVNode(Header, null, {
-            default: () => [title.value]
-          }), createVNode(Body, null, {
-            default: () => {
-              var _a2;
-              return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
-            }
-          }), (_a = slots.footer) == null ? void 0 : _a.call(slots)])];
-        }
-      })]
-    });
+    return () => {
+      const fixedOverlayProps2 = {
+        visible: modelValue.value,
+        "onUpdate:visible": handleVisibleChange,
+        "background-class": "devui-modal-mask",
+        "background-block": lockScroll.value,
+        "backdrop-close": closeOnClickOverlay.value
+      };
+      return createVNode(FixedOverlay, fixedOverlayProps2, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-modal-wipe"
+        }, {
+          default: () => {
+            var _a;
+            return [createVNode("div", mergeProps({
+              "class": "devui-modal"
+            }, attrs), [createVNode(Icon, {
+              "name": "close",
+              "class": "btn-close",
+              "size": "var(--devui-font-size-md,12px)",
+              "onClick": () => handleVisibleChange(false)
+            }, null), slots.header ? slots.header() : title.value && createVNode(Header, null, {
+              default: () => [title.value]
+            }), createVNode(Body, null, {
+              default: () => {
+                var _a2;
+                return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
+              }
+            }), (_a = slots.footer) == null ? void 0 : _a.call(slots)])];
+          }
+        })]
+      });
+    };
   }
 });
 var Footer = defineComponent({
@@ -510,31 +518,36 @@ class ModalService extends CommonModalService {
     const anchor = document.createElement("div");
     this.anchorContainer.appendChild(anchor);
     const _a = props, { header, content, footer } = _a, resProps = __objRest(_a, ["header", "content", "footer"]);
-    const needHideOrNot = (value) => {
-      if (!value) {
-        hide();
-      }
-    };
-    const renderOrigin = (props2, onUpdateModelValue = needHideOrNot) => {
-      return this.renderModal(anchor, __spreadProps(__spreadValues({}, props2), {
+    const renderOrigin = (propsValue, onUpdateModelValue) => {
+      return this.renderModal(anchor, __spreadProps(__spreadValues({}, propsValue), {
         modelValue: true,
         "onUpdate:modelValue": onUpdateModelValue
       }), { header, default: content, footer });
     };
     const hide = () => {
-      var _a2, _b;
+      var _a2, _b, _c;
+      const innerNeedHideOrNot = (value) => {
+        if (!value) {
+          hide();
+        }
+      };
       renderOrigin(resProps, (value) => {
         if (!value) {
           this.renderModal(anchor, __spreadProps(__spreadValues({}, resProps), { modelValue: false }));
           this.renderNull(anchor);
         } else {
-          renderOrigin(resProps);
+          renderOrigin(resProps, innerNeedHideOrNot);
         }
       });
-      (_b = (_a2 = vm.component.exposed).handleVisibleChange) == null ? void 0 : _b.call(_a2, false);
+      (_c = (_b = (_a2 = vm == null ? void 0 : vm.component) == null ? void 0 : _a2.exposed) == null ? void 0 : _b.handleVisibleChange) == null ? void 0 : _c.call(_b, false);
+    };
+    const needHideOrNot = (value) => {
+      if (!value) {
+        hide();
+      }
     };
     this.renderModal(anchor, { modelValue: false });
-    vm = renderOrigin(resProps);
+    vm = renderOrigin(resProps, needHideOrNot);
     return { hide };
   }
 }

package/modal/index.umd.js

@@ -1 +1 @@
-var X=Object.defineProperty,G=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var B=(r,e,d)=>e in r?X(r,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):r[e]=d,g=(r,e)=>{for(var d in e||(e={}))P.call(e,d)&&B(r,d,e[d]);if(h)for(var d of h(e))M.call(e,d)&&B(r,d,e[d]);return r},C=(r,e)=>G(r,J(e));var A=(r,e)=>{var d={};for(var p in r)P.call(r,p)&&e.indexOf(p)<0&&(d[p]=r[p]);if(r!=null&&h)for(var p of h(r))e.indexOf(p)<0&&M.call(r,p)&&(d[p]=r[p]);return d};var j=(r,e,d)=>(B(r,typeof e!="symbol"?e+"":e,d),d);(function(r,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):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue,r.dom))})(this,function(r,e,d){"use strict";const p={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function}};var v=e.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(t){return g({},t)},render(){const{name:t,size:o,color:n,classPrefix:i}=this;return/^((https?):)?\/\//.test(t)?e.createVNode("img",{src:t,alt:t.split("/")[t.split("/").length-1],style:{width:o,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${i} ${i}-${t}`,style:{fontSize:o,color:n}},null)}});v.install=function(t){t.component(v.name,v)};var Q="";function D(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const L=e.defineComponent({setup(t,o){return()=>{let n;return e.createVNode(e.Teleport,{to:"#d-overlay-anchor"},{default:()=>[e.createVNode(e.Transition,{name:"devui-overlay-fade"},D(n=e.renderSlot(o.slots,"default"))?n:{default:()=>[n]})]})}}}),T={visible:{type:Boolean},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}},_=["update:visible","backdropClick"],R=C(g({},T),{overlayStyle:{type:[String,Object],default:void 0}}),z={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0}};function F(t,o){const n=e.computed(()=>["devui-overlay-background",t.backgroundClass,t.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),i=e.computed(()=>"devui-overlay"),c=l=>{var s;l.preventDefault(),(s=t.onBackdropClick)==null||s.call(t),t.backdropClose&&o.emit("update:visible",!1)},a=l=>l.cancelBubble=!0;return e.onMounted(()=>{const l=document.body,s=l.style.overflow,m=l.style.position;e.watch([()=>t.visible,()=>t.backgroundBlock],([f,y])=>{if(y){const u=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${u}px`):(l.style.overflowY=s,l.style.position=m,l.style.top="",window.scrollTo(0,-u))}}),e.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:n,overlayClass:i,handleBackdropClick:c,handleOverlayBubbleCancel:a}}const $=e.defineComponent({name:"DFixedOverlay",props:R,emits:_,setup(t,o){const{backgroundClass:n,overlayClass:i,handleBackdropClick:c,handleOverlayBubbleCancel:a}=F(t,o);return()=>e.createVNode(L,null,{default:()=>[t.visible&&e.createVNode("div",{class:n.value,style:t.backgroundStyle,onClick:c},[e.createVNode("div",{class:i.value,style:t.overlayStyle,onClick:a},[e.renderSlot(o.slots,"default")])])]})}});function S(t){const o=/(auto|scroll|hidden)/;for(let n=t;n=n.parentElement;n.parentElement!==document.body){const i=window.getComputedStyle(n);if(o.test(i.overflow+i.overflowX+i.overflowY))return n}return window}function q(t,o,n,i){let{x:c,y:a}=o;if(!t){const{width:l,height:s}=i;c&&n.includes("start")&&(c=12),c&&n.includes("end")&&(c=Math.round(l-24)),a&&n.includes("start")&&(a=10),a&&n.includes("end")&&(a=s-14)}return{x:c,y:a}}function I(t,o){const n=e.ref(),i=e.ref(),c=(l,s,m,f)=>{const{x:y,y:u}=q(t.isArrowCenter,m,s,f.getBoundingClientRect()),b={top:"bottom",right:"left",bottom:"top",left:"right"}[s.split("-")[0]];Object.assign(l.style,{left:y?`${y}px`:"",top:u?`${u}px`:"",right:"",bottom:"",[b]:"-4px"})},a=async()=>{const l=t.origin,s=e.unref(n.value),m=e.unref(i.value),f=[d.offset(t.offset),d.autoPlacement({alignment:t.align,allowedPlacements:t.position})];t.showArrow&&f.push(d.arrow({element:m}));const{x:y,y:u,placement:b,middlewareData:x}=await d.computePosition(l,s,{strategy:"fixed",middleware:f});o("positionChange",b),Object.assign(s.style,{top:`${u}px`,left:`${y}px`}),t.showArrow&&c(m,b,x.arrow,s)};return e.watch(()=>t.modelValue,()=>{const l=S(t.origin);t.modelValue&&t.origin?(e.nextTick(a),l.addEventListener("scroll",a),l!==window&&window.addEventListener("scroll",a),window.addEventListener("resize",a)):(l.removeEventListener("scroll",a),l!==window&&window.removeEventListener("scroll",a),window.removeEventListener("resize",a))}),e.onUnmounted(()=>{const l=S(t.origin);l.removeEventListener("scroll",a),l!==window&&window.removeEventListener("scroll",a),window.removeEventListener("resize",a)}),{arrowRef:i,overlayRef:n}}var W="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:z,emits:["update:modelValue","positionChange"],setup(t,{slots:o,attrs:n,emit:i}){const{arrowRef:c,overlayRef:a}=I(t,i);return()=>{var l;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:a,class:"devui-flexible-overlay"},n),[(l=o.default)==null?void 0:l.call(o),t.showArrow&&e.createVNode("div",{ref:c,class:"devui-flexible-overlay-arrow"},null)])}}});const U=typeof window!="undefined";function H(t,o){function n(){o("update:modelValue",!1)}function i(c){c||(t.beforeClose?t.beforeClose(n):n())}return{handleVisibleChange:i}}var k=e.defineComponent({name:"DModalHeader",setup(t,{slots:o}){return()=>{var n;return e.createVNode("div",{class:"devui-modal-header"},[(n=o.default)==null?void 0:n.call(o)])}}}),V=e.defineComponent({name:"DModalBody",setup(t,{slots:o}){return()=>{var n;return e.createVNode("div",{class:"devui-modal-body"},[(n=o.default)==null?void 0:n.call(o)])}}}),Z="",w=e.defineComponent({name:"DModal",inheritAttrs:!1,props:p,emits:["update:modelValue"],setup(t,{slots:o,attrs:n,emit:i,expose:c}){const{modelValue:a,lockScroll:l,closeOnClickOverlay:s,title:m}=e.toRefs(t),{handleVisibleChange:f}=H(t,i);return c({handleVisibleChange:f}),()=>e.createVNode($,{visible:a.value,"onUpdate:visible":f,"background-class":"devui-modal-mask","background-block":l.value,"backdrop-close":s.value},{default:()=>[e.createVNode(e.Transition,{name:"devui-modal-wipe"},{default:()=>{var y;return[e.createVNode("div",e.mergeProps({class:"devui-modal"},n),[e.createVNode(v,{name:"close",class:"btn-close",size:"var(--devui-font-size-md,12px)",onClick:()=>f(!1)},null),o.header?o.header():m.value&&e.createVNode(k,null,{default:()=>[m.value]}),e.createVNode(V,null,{default:()=>{var u;return[(u=o.default)==null?void 0:u.call(o)]}}),(y=o.footer)==null?void 0:y.call(o)])]}})]})}}),N=e.defineComponent({name:"DModalFooter",setup(t,{slots:o}){return()=>{var n;return e.createVNode("div",{class:"devui-modal-footer"},[(n=o.default)==null?void 0:n.call(o)])}}});class Y{constructor(o){this.anchorContainer=o}renderModal(o,n,i){const c=e.h(this.component(),n,i);return e.render(c,o),c}renderNull(o){setTimeout(()=>{e.render(null,o)},500)}}let E;class O extends Y{component(){return w}open(o={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const y=o,{header:i,content:c,footer:a}=y,l=A(y,["header","content","footer"]),s=u=>{u||f()},m=(u,b=s)=>this.renderModal(n,C(g({},u),{modelValue:!0,"onUpdate:modelValue":b}),{header:i,default:c,footer:a}),f=()=>{var u,b;m(l,x=>{x?m(l):(this.renderModal(n,C(g({},l),{modelValue:!1})),this.renderNull(n))}),(b=(u=E.component.exposed).handleVisibleChange)==null||b.call(u,!1)};return this.renderModal(n,{modelValue:!1}),E=m(l),{hide:f}}}j(O,"token","MODAL_SERVICE_TOKEN");var K={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(t){if(t.component(w.name,w),t.component(k.name,k),t.component(V.name,V),t.component(N.name,N),!U)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(O.token,new O(o))}};r.Modal=w,r.default=K,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+var J=Object.defineProperty,Q=Object.defineProperties;var W=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var N=(a,e,d)=>e in a?J(a,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[e]=d,k=(a,e)=>{for(var d in e||(e={}))M.call(e,d)&&N(a,d,e[d]);if(C)for(var d of C(e))P.call(e,d)&&N(a,d,e[d]);return a},V=(a,e)=>Q(a,W(e));var A=(a,e)=>{var d={};for(var p in a)M.call(a,p)&&e.indexOf(p)<0&&(d[p]=a[p]);if(a!=null&&C)for(var p of C(a))e.indexOf(p)<0&&P.call(a,p)&&(d[p]=a[p]);return d};var j=(a,e,d)=>(N(a,typeof e!="symbol"?e+"":e,d),d);(function(a,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):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue,a.dom))})(this,function(a,e,d){"use strict";const p={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function}},D={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var L=e.defineComponent({name:"DIcon",props:D,setup(o){const{name:t,size:n,color:i,classPrefix:l}=e.toRefs(o);return()=>/^((https?):)?\/\//.test(t.value)?e.createVNode("img",{src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:n.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${l.value} ${l.value}-${t.value}`,style:{fontSize:n.value,color:i.value}},null)}}),Z="";function R(o){return typeof o=="function"||Object.prototype.toString.call(o)==="[object Object]"&&!e.isVNode(o)}const T=e.defineComponent({setup(o,t){return()=>{let n;return e.createVNode(e.Teleport,{to:"#d-overlay-anchor"},{default:()=>[e.createVNode(e.Transition,{name:"devui-overlay-fade"},R(n=e.renderSlot(t.slots,"default"))?n:{default:()=>[n]})]})}}}),_=V(k({},{visible:{type:Boolean},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}}),{overlayStyle:{type:[String,Object],default:void 0}}),z=["update:visible","backdropClick"];function F(o,t){const n=e.computed(()=>["devui-overlay-background",o.backgroundClass,o.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),i=e.computed(()=>"devui-overlay"),l=r=>{var c;r.preventDefault(),(c=o.onBackdropClick)==null||c.call(o),o.backdropClose&&t.emit("update:visible",!1)},u=r=>r.cancelBubble=!0;return e.onMounted(()=>{const r=document.body,c=r.style.overflow,s=r.style.position;e.watch([()=>o.visible,()=>o.backgroundBlock],([m,v])=>{if(v){const f=r.getBoundingClientRect().y;m?(r.style.overflowY="scroll",r.style.position=m?"fixed":"",r.style.top=`${f}px`):(r.style.overflowY=c,r.style.position=s,r.style.top="",window.scrollTo(0,-f))}}),e.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:n,overlayClass:i,handleBackdropClick:l,handleOverlayBubbleCancel:u}}var te="";const $=e.defineComponent({name:"DFixedOverlay",props:_,emits:z,setup(o,t){const{backgroundClass:n,overlayClass:i,handleBackdropClick:l,handleOverlayBubbleCancel:u}=F(o,t);return()=>e.createVNode(T,null,{default:()=>[o.visible&&e.createVNode("div",{class:n.value,style:o.backgroundStyle,onClick:l},[e.createVNode("div",{class:i.value,style:o.overlayStyle,onClick:u},[e.renderSlot(t.slots,"default")])])]})}}),q={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0}};function H(o){const t=/(auto|scroll|hidden)/;for(let n=o;n=n.parentElement;n.parentElement!==document.body){const i=window.getComputedStyle(n);if(t.test(i.overflow+i.overflowX+i.overflowY))return n}return window}function I(o,t,n,i){let{x:l,y:u}=t;if(!o){const{width:r,height:c}=i;l&&n.includes("start")&&(l=12),l&&n.includes("end")&&(l=Math.round(r-24)),u&&n.includes("start")&&(u=10),u&&n.includes("end")&&(u=c-14)}return{x:l,y:u}}function U(o,t){const n=e.ref(),i=e.ref();let l=null;const u=(c,s,m,v)=>{const{x:f,y}=I(o.isArrowCenter,m,s,v.getBoundingClientRect()),b={top:"bottom",right:"left",bottom:"top",left:"right"}[s.split("-")[0]];Object.assign(c.style,{left:f?`${f}px`:"",top:y?`${y}px`:"",right:"",bottom:"",[b]:"-4px"})},r=async()=>{const c=o.origin,s=e.unref(n.value),m=e.unref(i.value),v=[d.shift(),d.offset(o.offset),d.autoPlacement({alignment:o.align,allowedPlacements:o.position})];o.showArrow&&v.push(d.arrow({element:m}));const{x:f,y,placement:b,middlewareData:g}=await d.computePosition(c,s,{strategy:"fixed",middleware:v});t("positionChange",b),Object.assign(s.style,{top:`${y}px`,left:`${f}px`}),o.showArrow&&u(m,b,g.arrow,s)};return e.watch(()=>o.modelValue,()=>{o.modelValue&&o.origin?(l=H(o.origin),e.nextTick(r),l==null||l.addEventListener("scroll",r),l!==window&&window.addEventListener("scroll",r),window.addEventListener("resize",r)):(l==null||l.removeEventListener("scroll",r),l!==window&&window.removeEventListener("scroll",r),window.removeEventListener("resize",r))}),e.onUnmounted(()=>{l==null||l.removeEventListener("scroll",r),l!==window&&window.removeEventListener("scroll",r),window.removeEventListener("resize",r)}),{arrowRef:i,overlayRef:n,updatePosition:r}}var oe="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:q,emits:["update:modelValue","positionChange"],setup(o,{slots:t,attrs:n,emit:i,expose:l}){const{arrowRef:u,overlayRef:r,updatePosition:c}=U(o,i);return l({updatePosition:c}),()=>{var s;return o.modelValue&&e.createVNode("div",e.mergeProps({ref:r,class:"devui-flexible-overlay"},n),[(s=t.default)==null?void 0:s.call(t),o.showArrow&&e.createVNode("div",{ref:u,class:"devui-flexible-overlay-arrow"},null)])}}});const Y=typeof window!="undefined";function K(o,t){function n(){t("update:modelValue",!1)}function i(l){l||(o.beforeClose?o.beforeClose(n):n())}return{handleVisibleChange:i}}var O=e.defineComponent({name:"DModalHeader",setup(o,{slots:t}){return()=>{var n;return e.createVNode("div",{class:"devui-modal-header"},[(n=t.default)==null?void 0:n.call(t)])}}}),x=e.defineComponent({name:"DModalBody",setup(o,{slots:t}){return()=>{var n;return e.createVNode("div",{class:"devui-modal-body"},[(n=t.default)==null?void 0:n.call(t)])}}}),ne="",w=e.defineComponent({name:"DModal",inheritAttrs:!1,props:p,emits:["update:modelValue"],setup(o,{slots:t,attrs:n,emit:i,expose:l}){const{modelValue:u,lockScroll:r,closeOnClickOverlay:c,title:s}=e.toRefs(o),{handleVisibleChange:m}=K(o,i);return l({handleVisibleChange:m}),()=>{const v={visible:u.value,"onUpdate:visible":m,"background-class":"devui-modal-mask","background-block":r.value,"backdrop-close":c.value};return e.createVNode($,v,{default:()=>[e.createVNode(e.Transition,{name:"devui-modal-wipe"},{default:()=>{var f;return[e.createVNode("div",e.mergeProps({class:"devui-modal"},n),[e.createVNode(L,{name:"close",class:"btn-close",size:"var(--devui-font-size-md,12px)",onClick:()=>m(!1)},null),t.header?t.header():s.value&&e.createVNode(O,null,{default:()=>[s.value]}),e.createVNode(x,null,{default:()=>{var y;return[(y=t.default)==null?void 0:y.call(t)]}}),(f=t.footer)==null?void 0:f.call(t)])]}})]})}}}),E=e.defineComponent({name:"DModalFooter",setup(o,{slots:t}){return()=>{var n;return e.createVNode("div",{class:"devui-modal-footer"},[(n=t.default)==null?void 0:n.call(t)])}}});class X{constructor(t){this.anchorContainer=t}renderModal(t,n,i){const l=e.h(this.component(),n,i);return e.render(l,t),l}renderNull(t){setTimeout(()=>{e.render(null,t)},500)}}let h;class B extends X{component(){return w}open(t={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const v=t,{header:i,content:l,footer:u}=v,r=A(v,["header","content","footer"]),c=(f,y)=>this.renderModal(n,V(k({},f),{modelValue:!0,"onUpdate:modelValue":y}),{header:i,default:l,footer:u}),s=()=>{var y,b,g;const f=S=>{S||s()};c(r,S=>{S?c(r,f):(this.renderModal(n,V(k({},r),{modelValue:!1})),this.renderNull(n))}),(g=(b=(y=h==null?void 0:h.component)==null?void 0:y.exposed)==null?void 0:b.handleVisibleChange)==null||g.call(b,!1)},m=f=>{f||s()};return this.renderModal(n,{modelValue:!1}),h=c(r,m),{hide:s}}}j(B,"token","MODAL_SERVICE_TOKEN");var G={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(o){if(o.component(w.name,w),o.component(O.name,O),o.component(x.name,x),o.component(E.name,E),!Y)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(B.token,new B(t))}};a.Modal=w,a.default=G,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/modal/style.css

@@ -1 +1 @@
-.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(0, 0, 0, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-modal-mask{justify-content:center;align-items:center;background-color:var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-modal{position:relative;width:300px;background-color:var(--devui-global-bg-normal, #ffffff)}.devui-modal .btn-close{position:absolute;right:20px;top:20px;width:20px;height:20px;line-height:20px;text-align:center;color:#000;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.devui-modal .btn-close:hover{color:var(--devui-icon-fill-active-hover, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-modal-content{background:var(--devui-fullscreen-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.devui-modal-header{width:100%;height:56px;padding:32px 32px 0;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;box-sizing:border-box;border:none;user-select:none}.devui-modal-header .header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;line-height:16px;text-align:center}.devui-modal-body{padding:20px 32px;font-size:var(--devui-font-size, 12px);color:var(--devui-text-weak, #575d6c);box-sizing:border-box}.devui-modal-footer{width:100%;border-top:none;text-align:center;padding:0 32px 24px;box-sizing:border-box}.devui-modal-footer>*{margin:0 4px}@keyframes wipe-in-out{0%{opacity:.2;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}.devui-modal-wipe-enter-from{opacity:.2}.devui-modal-wipe-enter-active{animation-name:wipe-in-out;animation-duration:.3s}.devui-modal-wipe-leave-to{opacity:1}.devui-modal-wipe-leave-active{animation-name:wipe-in-out;animation-duration:.3s;animation-direction:reverse}
+@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(0, 0, 0, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-modal-mask{justify-content:center;align-items:center;background-color:var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-modal{position:relative;width:300px;background-color:var(--devui-global-bg-normal, #ffffff)}.devui-modal .btn-close{position:absolute;right:20px;top:20px;width:20px;height:20px;line-height:20px;text-align:center;color:#000;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.devui-modal .btn-close:hover{color:var(--devui-icon-fill-active-hover, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-modal-content{background:var(--devui-fullscreen-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.devui-modal-header{width:100%;height:56px;padding:32px 32px 0;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;box-sizing:border-box;border:none;user-select:none}.devui-modal-header .header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;line-height:16px;text-align:center}.devui-modal-body{padding:20px 32px;font-size:var(--devui-font-size, 12px);color:var(--devui-text-weak, #575d6c);box-sizing:border-box}.devui-modal-footer{width:100%;border-top:none;text-align:center;padding:0 32px 24px;box-sizing:border-box}.devui-modal-footer>*{margin:0 4px}@keyframes wipe-in-out{0%{opacity:.2;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}.devui-modal-wipe-enter-from{opacity:.2}.devui-modal-wipe-enter-active{animation-name:wipe-in-out;animation-duration:.3s}.devui-modal-wipe-leave-to{opacity:1}.devui-modal-wipe-leave-active{animation-name:wipe-in-out;animation-duration:.3s;animation-direction:reverse}