vue-devui 1.0.0-alpha.4 → 1.0.0-beta.10

package/modal/index.es.js

@@ -1 +1,1027 @@
-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 v,renderSlot as y,isVNode as b,computed as m,watch as g,onUnmounted as h,withDirectives as w,vShow as C,ref as x,reactive as k,getCurrentInstance as S,onMounted 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(v,{name:"devui-overlay-fade"},(n=e=y(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")),o=document.body,l=o.style.overflow,a=o.style.position;return g([()=>e.visible,()=>e.backgroundBlock],(([e,t])=>{if(t){const t=o.getBoundingClientRect().y;e?(o.style.overflowY="scroll",o.style.position=e?"fixed":"",o.style.top=`${t}px`):(o.style.overflowY=l,o.style.position=a,o.style.top="",window.scrollTo(0,-t))}})),h((()=>{o.style.overflow=l})),{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:()=>[w(p("div",{class:n.value,style:e.backgroundStyle,onClick:l},[p("div",{class:o.value,style:e.overlayStyle,onClick:a},[y(t.slots,"default")])]),[[C,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=x(null),o=k({position:"absolute"}),l=S();B((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());g(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)}))})),g(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:()=>[w(p("div",{class:a.value,onClick:r},[p("div",{ref:n,class:i.value,style:o,onClick:d},[y(t.slots,"default")])]),[[C,e.visible]])]})}});function U(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}D.install=function(e){e.component(D.name,D)},H.install=function(e){e.component(H.name,H)};var F=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(v,{name:"devui-modal-wipe"},{default:()=>{var e,o;return[n.value?null==(o=(e=t.slots).default)?void 0:o.call(e):null]}})]})}});class N{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 P extends N{component(){return F}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(P,"token","MODAL_SERVICE_TOKEN");const T={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}},A=(e,t,n)=>e<t?t:e>n?n:e;var _=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)}});_.install=function(e){e.component(_.name,_)};var q=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=x(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(_,{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)])])])}}});q.install=function(e){e.component(q.name,q)};var Z=c({name:"DModal",inheritAttrs:!1,props:T,emits:["onUpdate:modelValue"],setup(e,t){const{movingX:n,movingY:o,handleRef:l,moveElRef:a,reset:i}=((e=!0)=>{const t=x(0),n=x(0),o=x(),l=x(),a=L(e)?e:x(e);return g([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 v=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())},y=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=A(o,-a,p.width-c.width-a),n.value=A(l,-i,p.height-c.height-i)},b=e=>{e.preventDefault(),f&&(f=!1)};window.addEventListener("mousedown",v),window.addEventListener("mousemove",y),window.addEventListener("mouseup",b),i((()=>{window.removeEventListener("mousedown",v),window.removeEventListener("mousemove",y),window.removeEventListener("mouseup",b)}))})),{movingX:M(t),movingY:M(n),handleRef:o,moveElRef:l,reset:()=>{t.value=0,n.value=0}}})();g((()=>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(q,{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=x(),f=()=>{var e,t;null==(t=null==(e=c.value)?void 0:e.onVisibleChange)||t.call(e,!1)};return t.expose({closeModal:f}),()=>p(F,{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(_,{name:s.value,size:"24px",class:"header-alert-icon"},null):null,p("span",null,[e.title]),p(q,{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 K extends N{component(){return Z}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(K,"token","DIALOG_SERVICE_TOKEN"),F.install=function(e){e.component(F.name,F)};var G={title:"Modal 弹窗",category:"反馈",status:void 0,install(e){e.use(F);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(P.token,new P(t)),e.provide(K.token,new K(t))}};export{F as Modal,G 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);
+    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]]);
+    };
+  }
+});
+Button.install = function(app) {
+  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 };