vue-devui 1.0.0-alpha.6 → 1.0.0-beta.12

package/modal/index.es.js

@@ -1 +1,1225 @@
-var e=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,i=(t,n,o)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,r=(e,t)=>{for(var n in t||(t={}))l.call(t,n)&&i(e,n,t[n]);if(o)for(var n of o(t))a.call(t,n)&&i(e,n,t[n]);return e},d=(e,o)=>t(e,n(o)),s=("undefined"!=typeof require&&require,(e,t)=>{var n={};for(var i in e)l.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&o)for(var i of o(e))t.indexOf(i)<0&&a.call(e,i)&&(n[i]=e[i]);return n}),u=(e,t,n)=>(i(e,"symbol"!=typeof t?t+"":t,n),n);import{defineComponent as c,createVNode as p,Teleport as f,Transition as y,renderSlot as v,isVNode as b,computed as m,onMounted as g,watch as h,onUnmounted as w,withDirectives as C,vShow as x,ref as k,reactive as S,getCurrentInstance as B,nextTick as E,toRef as O,onBeforeUnmount as V,isRef as L,h as $,render as j,readonly as M,mergeProps as R}from"vue";const Y={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}};const I=c({setup:(e,t)=>()=>{let e;return p(f,{to:"#d-overlay-anchor"},{default:()=>{return[p(y,{name:"devui-overlay-fade"},(n=e=v(t.slots,"default"),"function"==typeof n||"[object Object]"===Object.prototype.toString.call(n)&&!b(n)?e:{default:()=>[e]}))];var n}})}}),z={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}};function X(e){const t=m((()=>["devui-overlay-background","devui-overlay-background__color",e.backgroundClass])),n=m((()=>"devui-overlay"));return g((()=>{const t=document.body,n=t.style.overflow,o=t.style.position;h([()=>e.visible,()=>e.backgroundBlock],(([e,l])=>{if(l){const l=t.getBoundingClientRect().y;e?(t.style.overflowY="scroll",t.style.position=e?"fixed":"",t.style.top=`${l}px`):(t.style.overflowY=n,t.style.position=o,t.style.top="",window.scrollTo(0,-l))}})),w((()=>{document.body.style.overflow=n}))})),{backgroundClass:t,overlayClass:n,handleBackdropClick:t=>{var n,o;t.preventDefault(),null==(n=e.backdropClick)||n.call(e),e.backdropClose&&(null==(o=e["onUpdate:visible"])||o.call(e,!1))},handleOverlayBubbleCancel:e=>e.cancelBubble=!0}}const H=c({name:"DFixedOverlay",props:d(r({},z),{overlayStyle:{type:Object,default:void 0}}),setup(e,t){const{backgroundClass:n,overlayClass:o,handleBackdropClick:l,handleOverlayBubbleCancel:a}=X(e);return()=>p(I,null,{default:()=>[C(p("div",{class:n.value,style:e.backgroundStyle,onClick:l},[p("div",{class:o.value,style:e.overlayStyle,onClick:a},[v(t.slots,"default")])]),[[x,e.visible]])]})}}),D=c({name:"DFlexibleOverlay",props:r({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},z),emits:["onUpdate:visible"],setup(e,t){const n=k(null),o=S({position:"absolute"}),l=B();g((async()=>{await E();const t=n.value;if(!t)return;const a=function(e){if(e instanceof Element)return e;if(L(e))return function(e){if(e instanceof Element)return e;if(e&&"object"==typeof e&&e.$el instanceof Element)return e.$el;return null}(e.value);return e}(e.origin);if(!a)return;const i=t=>{const n=function(e,t,n){const o=function(e,t){let n,o;if("center"==t.originX)n=e.left+e.width/2;else{const o=e.left,l=e.right;n="left"==t.originX?o:l}o="center"==t.originY?e.top+e.height/2:"top"==t.originY?e.top:e.bottom;return{x:n,y:o}}(function(e){if(e instanceof Element)return e.getBoundingClientRect();const t=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+t,height:n,width:t}}(n),e);let l;l=t instanceof HTMLElement?t.getBoundingClientRect():t;return function(e,t,n){let o;const{width:l,height:a}=t;o="center"==n.overlayX?e.x-l/2:"left"==n.overlayX?e.x:e.x-l;let i;i="center"==n.overlayY?e.y-a/2:"top"==n.overlayY?e.y:e.y-a;return{x:o,y:i}}(o,l,e)}(e.position,t,a);o.left=`${n.x}px`,o.top=`${n.y}px`},r=()=>i(t.getBoundingClientRect());h(O(e,"visible"),((e,t,n)=>{var o;e?(o=r,window.addEventListener("scroll",o,!0),window.addEventListener("resize",o),window.addEventListener("orientationchange",o)):U(r),n((()=>{U(r)}))})),h(O(e,"position"),(()=>{r()}));const d=new ResizeObserver((e=>{i(e[0].contentRect)}));if(d.observe(t),V((()=>{d.disconnect()}),l),a instanceof Element){const e=new MutationObserver(r);e.observe(a,{attributeFilter:["style"]}),V((()=>{e.disconnect()}),l)}}),l);const{backgroundClass:a,overlayClass:i,handleBackdropClick:r,handleOverlayBubbleCancel:d}=X(e);return()=>p(I,null,{default:()=>[C(p("div",{class:a.value,onClick:r},[p("div",{ref:n,class:i.value,style:o,onClick:d},[v(t.slots,"default")])]),[[x,e.visible]])]})}});function U(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}const F="undefined"!=typeof window;D.install=function(e){e.component(D.name,D)},H.install=function(e){e.component(H.name,H)};var N=c({name:"DModal",props:Y,emits:["onUpdate:modelValue"],setup(e,t){const n=m((()=>!e.showAnimation||e.modelValue)),o=t=>{var n;const o=e["onUpdate:modelValue"];if(t)null==o||o(t);else{const t=e.beforeHidden,l=t=>{var n;t&&(null==o||o(!1),null==(n=e.onClose)||n.call(e))},a=null==(n="function"==typeof t?t():t)||n;a instanceof Promise?a.then(l):l(a)}};return t.expose({onVisibleChange:o}),()=>p(H,{visible:e.modelValue,"onUpdate:visible":o,backgroundClass:"devui-modal-wrapper",backgroundBlock:!e.bodyScrollable,backdropClose:e.backdropCloseable},{default:()=>[p(y,{name:"devui-modal-wipe"},{default:()=>{var e,o;return[n.value?null==(o=(e=t.slots).default)?void 0:o.call(e):null]}})]})}});class P{constructor(e){this.anchorContainer=e}renderModal(e,t,n){const o=$(this.component(),t,n);return j(o,e),o}renderNull(e){setTimeout((()=>{j(null,e)}),500)}}class T extends P{component(){return N}open(e={}){const t=document.createElement("div");this.anchorContainer.appendChild(t);const n=e,{content:o}=n,l=s(n,["content"]),a=e=>{e||u()},i=(e,n=a)=>this.renderModal(t,d(r({},e),{modelValue:!0,"onUpdate:modelValue":n}),{default:o}),u=()=>{var e,n;null==(n=(e=i(l,(e=>{e?i(l):(this.renderModal(t,d(r({},l),{modelValue:!1})),this.renderNull(t))})).component.exposed).onVisibleChange)||n.call(e,!1)};return this.renderModal(t,{modelValue:!1}),i(l),{hide:u}}}u(T,"token","MODAL_SERVICE_TOKEN");const A={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}},_=(e,t,n)=>e<t?t:e>n?n:e;var q=c({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=>r({},e),render(){const{name:e,size:t,color:n,classPrefix:o}=this;return p("i",{class:`${o} ${o}-${e}`,style:{fontSize:t,color:n}},null)}});q.install=function(e){e.component(q.name,q)};var Z=c({name:"DButton",props:{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}},setup(e,t){const n=k(null),o=t=>{var n;e.showLoading||null==(n=e.onClick)||n.call(e,t)},l=m((()=>t.slots.default)),a=m((()=>{const{btnStyle:t,size:n,position:o,bordered:a,icon:i}=e;return`${`devui-btn devui-btn-${t} devui-btn-${n} devui-btn-${o}`} ${a?"bordered":""} ${i&&!l.value&&"primary"!==t?"d-btn-icon":""} ${i?"d-btn-icon-wrap":""}`})),i=m((()=>{if(!e.icon)return;const t="devui-icon-fix icon";return l.value?`${t} clear-right-5`:t}));return()=>{var l,r;const{icon:d,type:s,disabled:u,showLoading:c,width:f}=e;return p("div",R({class:"devui-btn-host"},t.attrs),[p("button",{class:a.value,type:s,disabled:u,style:{width:f},onClick:o},[d?p(q,{name:e.icon,class:i.value},null):null,p("span",{class:"button-content",ref:n},[null==(r=(l=t.slots).default)?void 0:r.call(l)])])])}}});Z.install=function(e){e.component(Z.name,Z)};var K=c({name:"DModal",inheritAttrs:!1,props:A,emits:["onUpdate:modelValue"],setup(e,t){const{movingX:n,movingY:o,handleRef:l,moveElRef:a,reset:i}=((e=!0)=>{const t=k(0),n=k(0),o=k(),l=k(),a=L(e)?e:k(e);return h([l,o],(([e,o],l,i)=>{if(!(o instanceof HTMLElement&&e instanceof HTMLElement))return;o.style.cursor="all-scroll";let r=0,d=0,s=0,u=0,c=e.getBoundingClientRect(),p=document.body.getBoundingClientRect(),f=!1;const y=l=>{if(l.preventDefault(),!a.value)return;r=l.clientX,d=l.clientY;const i=o.getBoundingClientRect();(o===l.target||o.contains(l.target))&&i.x<r&&i.y<d&&i.width+i.x>=r&&i.height+i.y>=d&&(f=!0,s=t.value,u=n.value,p=document.body.getBoundingClientRect(),c=e.getBoundingClientRect())},v=e=>{if(e.preventDefault(),!f)return;const o=s+e.clientX-r,l=u+e.clientY-d,a=c.x-s,i=c.y-u;t.value=_(o,-a,p.width-c.width-a),n.value=_(l,-i,p.height-c.height-i)},b=e=>{e.preventDefault(),f&&(f=!1)};window.addEventListener("mousedown",y),window.addEventListener("mousemove",v),window.addEventListener("mouseup",b),i((()=>{window.removeEventListener("mousedown",y),window.removeEventListener("mousemove",v),window.removeEventListener("mouseup",b)}))})),{movingX:M(t),movingY:M(n),handleRef:o,moveElRef:l,reset:()=>{t.value=0,n.value=0}}})();h((()=>e.modelValue),(e=>{e&&i()}));const r=m((()=>({position:"relative",left:`${n.value}px`,top:`${o.value}px`}))),d=m((()=>({width:e.width,maxHeight:e.maxHeight,transform:`translate(${e.offsetX}, ${e.offsetY})`,zIndex:e.zIndex}))),s=m((()=>{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""}})),u=m((()=>e.buttons.map(((e,t)=>{const{btnStyle:n,disabled:o,handler:l,text:a}=e;return p(Z,{key:t,style:{display:"inline-block",margin:"0 5px"},btnStyle:n,disabled:o,onClick:l},"function"==typeof(i=a)||"[object Object]"===Object.prototype.toString.call(i)&&!b(i)?a:{default:()=>[a]});var i})))),c=k(),f=()=>{var e,t;null==(t=null==(e=c.value)?void 0:e.onVisibleChange)||t.call(e,!1)};return t.expose({closeModal:f}),()=>p(N,{ref:c,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 n,o;return[p("div",{class:"devui-modal-content",style:[d.value,r.value],ref:a},[p("div",{class:"devui-modal-header",ref:l},[s.value?p(q,{name:s.value,size:"24px",class:"header-alert-icon"},null):null,p("span",null,[e.title]),p(Z,{class:"btn-close",icon:"close",btnStyle:"text-dark",onClick:f},null)]),p("div",{class:"devui-modal-body"},[null==(o=(n=t.slots).default)?void 0:o.call(n)]),p("div",{class:"devui-modal-footer"},[u.value])])]}})}});class G extends P{component(){return K}open(e={}){const t=document.createElement("div");this.anchorContainer.appendChild(t);const n=e,{content:o}=n,l=s(n,["content"]),a=e=>{e||u()},i=(e,n=a)=>this.renderModal(t,d(r({},e),{modelValue:!0,"onUpdate:modelValue":n}),{default:o}),u=()=>{var e,n;null==(n=(e=i(l,(e=>{e?i(l):(this.renderModal(t,d(r({},l),{modelValue:!1})),this.renderNull(t))})).component.exposed).closeModal)||n.call(e)};return this.renderModal(t,{modelValue:!1}),i(l),{hide:u,updateButtonOptions:e=>{const t=l,{buttons:n}=t,o=s(t,["buttons"]),a=n.map(((t,n)=>r(r({},t),e[n])));i(d(r({},o),{buttons:a}))}}}}u(G,"token","DIALOG_SERVICE_TOKEN"),N.install=function(e){e.component(N.name,N)};var J={title:"Modal 弹窗",category:"反馈",status:"已完成",install(e){if(e.use(N),!F)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)),e.provide(T.token,new T(t)),e.provide(G.token,new G(t))}};export{N as Modal,J as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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, toRef, isRef, h, render, readonly, mergeProps, resolveDirective } from "vue";
+const modalProps = {
+  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: true
+  },
+  backdropCloseable: {
+    type: Boolean,
+    default: false
+  },
+  bodyScrollable: {
+    type: Boolean,
+    default: true
+  },
+  escapeable: {
+    type: Boolean,
+    default: true
+  },
+  onClose: {
+    type: Function
+  },
+  beforeHidden: {
+    type: [Object, Function]
+  },
+  modelValue: {
+    type: Boolean
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  }
+};
+var overlay = "";
+function _isSlot$1(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent({
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-fade"
+        }, _isSlot$1(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  }
+};
+const overlayEmits = ["update:visible", "backdropClick"];
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const flexibleOverlayProps = __spreadValues({
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Object,
+    default: () => ({
+      originX: "left",
+      originY: "top",
+      overlayX: "left",
+      overlayY: "top"
+    })
+  }
+}, overlayProps);
+function useOverlayLogic(props, ctx) {
+  const backgroundClass = computed(() => {
+    return [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
+  });
+  const overlayClass = computed(() => {
+    return "devui-overlay";
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body = document.body;
+    const originOverflow = body.style.overflow;
+    const originPosition = body.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body.getBoundingClientRect().y;
+        if (visible) {
+          body.style.overflowY = "scroll";
+          body.style.position = visible ? "fixed" : "";
+          body.style.top = `${top}px`;
+        } else {
+          body.style.overflowY = originOverflow;
+          body.style.position = originPosition;
+          body.style.top = "";
+          window.scrollTo(0, -top);
+        }
+      }
+    });
+    onUnmounted(() => {
+      document.body.style.overflow = originOverflow;
+    });
+  });
+  return {
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
+  };
+}
+const FixedOverlay = defineComponent({
+  name: "DFixedOverlay",
+  props: fixedOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": backgroundClass.value,
+        "style": props.backgroundStyle,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "class": overlayClass.value,
+        "style": props.overlayStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+    });
+  }
+});
+function isComponent(target) {
+  return !!(target == null ? void 0 : target.$el);
+}
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  props: flexibleOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const overlayRef = ref(null);
+    const positionedStyle = reactive({
+      position: "absolute"
+    });
+    onMounted(async () => {
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
+        positionedStyle.left = `${point.x}px`;
+        positionedStyle.top = `${point.y}px`;
+      };
+      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([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(() => {
+          unsubscriptions.forEach((fn) => fn());
+        });
+      });
+    });
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [withDirectives(createVNode("div", {
+        "style": props.backgroundStyle,
+        "class": backgroundClass.value,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "ref": overlayRef,
+        "class": overlayClass.value,
+        "style": positionedStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+    });
+  }
+});
+function getOrigin(origin) {
+  if (origin instanceof Element) {
+    return origin;
+  }
+  if (isRef(origin)) {
+    return getElement(origin.value);
+  }
+  if (isComponent(origin)) {
+    return getElement(origin);
+  }
+  return origin;
+}
+function calculatePosition(position, rect, origin) {
+  const originRect = getOriginRect(origin);
+  const originPoint = getOriginRelativePoint(originRect, position);
+  return getOverlayPoint(originPoint, rect, position);
+}
+function getOriginRect(origin) {
+  if (origin instanceof Element) {
+    return origin.getBoundingClientRect();
+  }
+  const width = origin.width || 0;
+  const height = origin.height || 0;
+  return {
+    top: origin.y,
+    bottom: origin.y + height,
+    left: origin.x,
+    right: origin.x + width,
+    height,
+    width
+  };
+}
+function getOverlayPoint(originPoint, rect, position) {
+  let x;
+  const {
+    width,
+    height
+  } = rect;
+  if (position.overlayX == "center") {
+    x = originPoint.x - width / 2;
+  } else {
+    x = position.overlayX == "left" ? originPoint.x : originPoint.x - width;
+  }
+  let y;
+  if (position.overlayY == "center") {
+    y = originPoint.y - height / 2;
+  } else {
+    y = position.overlayY == "top" ? originPoint.y : originPoint.y - height;
+  }
+  return {
+    x,
+    y
+  };
+}
+function getOriginRelativePoint(originRect, position) {
+  let x;
+  if (position.originX == "center") {
+    x = originRect.left + originRect.width / 2;
+  } else {
+    const startX = originRect.left;
+    const endX = originRect.right;
+    x = position.originX == "left" ? startX : endX;
+  }
+  let y;
+  if (position.originY == "center") {
+    y = originRect.top + originRect.height / 2;
+  } else {
+    y = position.originY == "top" ? originRect.top : originRect.bottom;
+  }
+  return {
+    x,
+    y
+  };
+}
+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 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) {
+  app.component(FlexibleOverlay.name, FlexibleOverlay);
+};
+FixedOverlay.install = function(app) {
+  app.component(FixedOverlay.name, FixedOverlay);
+};
+var modal = "";
+var Modal = defineComponent({
+  name: "DModal",
+  props: modalProps,
+  emits: ["onUpdate:modelValue"],
+  setup(props, ctx) {
+    const animatedVisible = computed(() => {
+      return props.showAnimation ? props.modelValue : true;
+    });
+    const onVisibleChange = (value) => {
+      var _a;
+      const update = props["onUpdate:modelValue"];
+      if (value) {
+        update == null ? void 0 : update(value);
+      } else {
+        const beforeHidden = props.beforeHidden;
+        const close = (enabledClose) => {
+          var _a2;
+          if (enabledClose) {
+            update == null ? void 0 : update(false);
+            (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
+          }
+        };
+        const result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : true;
+        if (result instanceof Promise) {
+          result.then(close);
+        } else {
+          close(result);
+        }
+      }
+    };
+    ctx.expose({
+      onVisibleChange
+    });
+    return () => createVNode(FixedOverlay, {
+      "visible": props.modelValue,
+      "onUpdate:visible": onVisibleChange,
+      "backgroundClass": "devui-modal-wrapper",
+      "backgroundBlock": !props.bodyScrollable,
+      "backdropClose": props.backdropCloseable
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": "devui-modal-wipe"
+      }, {
+        default: () => {
+          var _a, _b;
+          return [animatedVisible.value ? (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a) : null];
+        }
+      })]
+    });
+  }
+});
+class CommonModalService {
+  constructor(anchorContainer) {
+    this.anchorContainer = anchorContainer;
+  }
+  renderModal(anchor, props, children) {
+    const vnode = h(this.component(), props, children);
+    render(vnode, anchor);
+    return vnode;
+  }
+  renderNull(anchor) {
+    setTimeout(() => {
+      render(null, anchor);
+    }, 500);
+  }
+}
+class ModalService extends CommonModalService {
+  component() {
+    return Modal;
+  }
+  open(props = {}) {
+    const anchor = document.createElement("div");
+    this.anchorContainer.appendChild(anchor);
+    const _a = props, { content } = _a, resProps = __objRest(_a, ["content"]);
+    const needHideOrNot = (value) => {
+      if (!value) {
+        hide();
+      }
+    };
+    const renderOrigin = (props2, onUpdateModelValue = needHideOrNot) => {
+      return this.renderModal(anchor, __spreadProps(__spreadValues({}, props2), {
+        modelValue: true,
+        "onUpdate:modelValue": onUpdateModelValue
+      }), { default: content });
+    };
+    const hide = () => {
+      var _a2, _b;
+      const vnode = renderOrigin(resProps, (value) => {
+        if (!value) {
+          this.renderModal(anchor, __spreadProps(__spreadValues({}, resProps), { modelValue: false }));
+          this.renderNull(anchor);
+        } else {
+          renderOrigin(resProps);
+        }
+      });
+      (_b = (_a2 = vnode.component.exposed).onVisibleChange) == null ? void 0 : _b.call(_a2, false);
+    };
+    this.renderModal(anchor, { modelValue: false });
+    renderOrigin(resProps);
+    return { hide };
+  }
+}
+__publicField(ModalService, "token", "MODAL_SERVICE_TOKEN");
+const dialogProps = {
+  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: true
+  },
+  backdropCloseable: {
+    type: Boolean,
+    default: false
+  },
+  bodyScrollable: {
+    type: Boolean,
+    default: true
+  },
+  escapeable: {
+    type: Boolean,
+    default: true
+  },
+  onClose: {
+    type: Function
+  },
+  beforeHidden: {
+    type: [Promise, Function]
+  },
+  buttons: {
+    type: Array,
+    default: []
+  },
+  dialogType: {
+    type: String,
+    default: "standard"
+  },
+  modelValue: {
+    type: Boolean
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  }
+};
+const useMoveable = (moveable = true) => {
+  const movingX = ref(0);
+  const movingY = ref(0);
+  const reset = () => {
+    movingX.value = 0;
+    movingY.value = 0;
+  };
+  const handleRef = ref();
+  const moveElRef = ref();
+  const enabledMoving = isRef(moveable) ? moveable : ref(moveable);
+  watch([moveElRef, handleRef], ([container, target], ov, onInvalidate) => {
+    if (!(target instanceof HTMLElement && container instanceof HTMLElement)) {
+      return;
+    }
+    target.style.cursor = "all-scroll";
+    let startX = 0;
+    let startY = 0;
+    let prevMovingX = 0;
+    let prevMovingY = 0;
+    let containerRect = container.getBoundingClientRect();
+    let bodyRect = document.body.getBoundingClientRect();
+    let isDown = false;
+    const handleMouseDown = (event) => {
+      event.preventDefault();
+      if (!enabledMoving.value) {
+        return;
+      }
+      startX = event.clientX;
+      startY = event.clientY;
+      const targetRect = target.getBoundingClientRect();
+      if ((target === event.target || target.contains(event.target)) && targetRect.x < startX && targetRect.y < startY && targetRect.width + targetRect.x >= startX && targetRect.height + targetRect.y >= startY) {
+        isDown = true;
+        prevMovingX = movingX.value;
+        prevMovingY = movingY.value;
+        bodyRect = document.body.getBoundingClientRect();
+        containerRect = container.getBoundingClientRect();
+      }
+    };
+    const handleMouseMove = (event) => {
+      event.preventDefault();
+      if (!isDown) {
+        return;
+      }
+      const currentX = prevMovingX + event.clientX - startX;
+      const currentY = prevMovingY + event.clientY - startY;
+      const containerOriginX = containerRect.x - prevMovingX;
+      const containerOriginY = containerRect.y - prevMovingY;
+      movingX.value = getRangeValueOf(currentX, -containerOriginX, bodyRect.width - containerRect.width - containerOriginX);
+      movingY.value = getRangeValueOf(currentY, -containerOriginY, bodyRect.height - containerRect.height - containerOriginY);
+    };
+    const handleMouseUp = (event) => {
+      event.preventDefault();
+      if (!isDown) {
+        return;
+      }
+      isDown = false;
+    };
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    onInvalidate(() => {
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    });
+  });
+  return {
+    movingX: readonly(movingX),
+    movingY: readonly(movingY),
+    handleRef,
+    moveElRef,
+    reset
+  };
+};
+const getRangeValueOf = (value, min, max) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+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"
+    }
+  },
+  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);
+  }
+});
+Icon.install = function(app) {
+  app.component(Icon.name, Icon);
+};
+const buttonProps = {
+  type: {
+    type: String,
+    default: "button"
+  },
+  btnStyle: {
+    type: String,
+    default: "primary"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  position: {
+    type: String,
+    default: "default"
+  },
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  showLoading: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  onClick: {
+    type: Function
+  }
+};
+var button = "";
+var Button = defineComponent({
+  name: "DButton",
+  props: buttonProps,
+  setup(props, ctx) {
+    const buttonContent = ref(null);
+    const onClick = (e) => {
+      var _a;
+      if (props.showLoading) {
+        return;
+      }
+      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+    };
+    const hasContent = computed(() => ctx.slots.default);
+    const btnClass = computed(() => {
+      const {
+        btnStyle,
+        size,
+        position,
+        bordered,
+        icon
+      } = props;
+      const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
+      const borderedClass = bordered ? "bordered" : "";
+      const btnIcon = !!icon && !hasContent.value && btnStyle !== "primary" ? "d-btn-icon" : "";
+      const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
+      return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
+    });
+    const iconClass = computed(() => {
+      if (!props.icon) {
+        return;
+      }
+      const origin = "devui-icon-fix icon";
+      if (hasContent.value) {
+        return `${origin} clear-right-5`;
+      } else {
+        return origin;
+      }
+    });
+    return () => {
+      var _a, _b;
+      const {
+        icon,
+        type,
+        disabled,
+        showLoading,
+        width
+      } = props;
+      return withDirectives(createVNode("div", mergeProps({
+        "class": "devui-btn-host"
+      }, ctx.attrs), [createVNode("button", {
+        "class": btnClass.value,
+        "type": type,
+        "disabled": disabled,
+        "style": {
+          width
+        },
+        "onClick": onClick
+      }, [!!icon ? createVNode(Icon, {
+        "name": icon,
+        "class": iconClass.value
+      }, null) : null, createVNode("span", {
+        "class": "button-content",
+        "ref": buttonContent
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]), [[resolveDirective("dLoading"), showLoading]]);
+    };
+  }
+});
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const componentProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
+  },
+  zIndex: Number,
+  isFull: {
+    type: Boolean,
+    default: false
+  }
+};
+class LoadingProps {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+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);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = new WeakSet();
+const isEmpty = (val) => {
+  if (!val)
+    return true;
+  if (Array.isArray(val))
+    return val.length === 0;
+  if (val instanceof Set || val instanceof Map)
+    return val.size === 0;
+  if (val instanceof Promise)
+    return false;
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type = getType(value);
+  switch (type) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
+  }
+};
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error")
+      return;
+    el.instance.proxy.open();
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
+  }
+};
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = loadingInstance.proxy.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
+  },
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
+      return;
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
+defineComponent(Loading);
+Button.install = function(app) {
+  app.directive("dLoading", loadingDirective);
+  app.component(Button.name, Button);
+};
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Dialog = defineComponent({
+  name: "DModal",
+  inheritAttrs: false,
+  props: dialogProps,
+  emits: ["onUpdate:modelValue"],
+  setup(props, ctx) {
+    const {
+      movingX,
+      movingY,
+      handleRef,
+      moveElRef,
+      reset
+    } = useMoveable();
+    watch(() => props.modelValue, (value) => {
+      if (value) {
+        reset();
+      }
+    });
+    const movingStyle = computed(() => ({
+      position: "relative",
+      left: `${movingX.value}px`,
+      top: `${movingY.value}px`
+    }));
+    const containerStyle = computed(() => ({
+      width: props.width,
+      maxHeight: props.maxHeight,
+      transform: `translate(${props.offsetX}, ${props.offsetY})`,
+      zIndex: props.zIndex
+    }));
+    const iconName = computed(() => {
+      switch (props.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 "";
+      }
+    });
+    const buttonsRef = computed(() => {
+      return props.buttons.map((buttonProps2, index2) => {
+        const {
+          btnStyle,
+          disabled,
+          handler,
+          text
+        } = buttonProps2;
+        return createVNode(Button, {
+          "key": index2,
+          "style": {
+            display: "inline-block",
+            margin: "0 5px"
+          },
+          "btnStyle": btnStyle,
+          "disabled": disabled,
+          "onClick": handler
+        }, _isSlot(text) ? text : {
+          default: () => [text]
+        });
+      });
+    });
+    const modalRef = ref();
+    const closeModal = () => {
+      var _a, _b;
+      (_b = (_a = modalRef.value) == null ? void 0 : _a.onVisibleChange) == null ? void 0 : _b.call(_a, false);
+    };
+    ctx.expose({
+      closeModal
+    });
+    return () => createVNode(Modal, {
+      "ref": modalRef,
+      "width": props.width,
+      "maxHeight": props.maxHeight,
+      "offsetX": props.offsetX,
+      "offsetY": props.offsetY,
+      "zIndex": props.zIndex,
+      "backdropZIndex": props.backdropZIndex,
+      "backdropCloseable": props.backdropCloseable,
+      "bodyScrollable": props.bodyScrollable,
+      "placement": props.placement,
+      "onClose": props.onClose,
+      "beforeHidden": props.beforeHidden,
+      "modelValue": props.modelValue,
+      "onUpdate:modelValue": props["onUpdate:modelValue"]
+    }, {
+      default: () => {
+        var _a, _b;
+        return [createVNode("div", {
+          "class": "devui-modal-content",
+          "style": [containerStyle.value, movingStyle.value],
+          "ref": moveElRef
+        }, [createVNode("div", {
+          "class": "devui-modal-header",
+          "ref": handleRef
+        }, [!!iconName.value ? createVNode(Icon, {
+          "name": iconName.value,
+          "size": "24px",
+          "class": "header-alert-icon"
+        }, null) : null, createVNode("span", null, [props.title]), createVNode(Button, {
+          "class": "btn-close",
+          "icon": "close",
+          "btnStyle": "text-dark",
+          "onClick": closeModal
+        }, null)]), createVNode("div", {
+          "class": "devui-modal-body"
+        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createVNode("div", {
+          "class": "devui-modal-footer"
+        }, [buttonsRef.value])])];
+      }
+    });
+  }
+});
+class DialogService extends CommonModalService {
+  component() {
+    return Dialog;
+  }
+  open(props = {}) {
+    const anchor = document.createElement("div");
+    this.anchorContainer.appendChild(anchor);
+    const _a = props, { content } = _a, resProps = __objRest(_a, ["content"]);
+    const needHideOrNot = (value) => {
+      if (!value) {
+        hide();
+      }
+    };
+    const renderOrigin = (props2, onUpdateModelValue = needHideOrNot) => {
+      return this.renderModal(anchor, __spreadProps(__spreadValues({}, props2), {
+        modelValue: true,
+        "onUpdate:modelValue": onUpdateModelValue
+      }), { default: content });
+    };
+    const hide = () => {
+      var _a2, _b;
+      const vnode = renderOrigin(resProps, (value) => {
+        if (!value) {
+          this.renderModal(anchor, __spreadProps(__spreadValues({}, resProps), { modelValue: false }));
+          this.renderNull(anchor);
+        } else {
+          renderOrigin(resProps);
+        }
+      });
+      (_b = (_a2 = vnode.component.exposed).closeModal) == null ? void 0 : _b.call(_a2);
+    };
+    const updateButtonOptions = (buttonOptions) => {
+      const _a2 = resProps, { buttons } = _a2, innerResProps = __objRest(_a2, ["buttons"]);
+      const newButtonOptions = buttons.map((option, index2) => __spreadValues(__spreadValues({}, option), buttonOptions[index2]));
+      renderOrigin(__spreadProps(__spreadValues({}, innerResProps), { buttons: newButtonOptions }));
+    };
+    this.renderModal(anchor, { modelValue: false });
+    renderOrigin(resProps);
+    return { hide, updateButtonOptions };
+  }
+}
+__publicField(DialogService, "token", "DIALOG_SERVICE_TOKEN");
+Modal.install = function(app) {
+  app.component(Modal.name, Modal);
+};
+var index = {
+  title: "Modal \u5F39\u7A97",
+  category: "\u53CD\u9988",
+  status: "100%",
+  install(app) {
+    app.use(Modal);
+    if (!inBrowser) {
+      return;
+    }
+    let anchorsContainer = document.getElementById("d-modal-anchors-container");
+    if (!anchorsContainer) {
+      anchorsContainer = document.createElement("div");
+      anchorsContainer.setAttribute("id", "d-modal-anchors-container");
+      document.body.appendChild(anchorsContainer);
+    }
+    app.provide(ModalService.token, new ModalService(anchorsContainer));
+    app.provide(DialogService.token, new DialogService(anchorsContainer));
+  }
+};
+export { Modal, index as default };