vue-devui 1.0.0-beta.16 → 1.0.0-beta.19

package/modal/index.es.js

@@ -33,66 +33,78 @@ 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";
+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 = {
-  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: {
+  modelValue: {
     type: Boolean,
-    default: true
+    default: false
   },
-  backdropCloseable: {
-    type: Boolean,
-    default: true
+  title: {
+    type: String,
+    default: ""
   },
-  bodyScrollable: {
+  lockScroll: {
     type: Boolean,
     default: true
   },
-  escapeable: {
+  closeOnClickOverlay: {
     type: Boolean,
     default: true
   },
-  onClose: {
+  beforeClose: {
     type: Function
+  }
+};
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
   },
-  beforeHidden: {
-    type: [Object, Function]
+  size: {
+    type: String,
+    default: "inherit"
   },
-  modelValue: {
-    type: Boolean
+  color: {
+    type: String,
+    default: "inherit"
   },
-  "onUpdate:modelValue": {
-    type: Function
+  classPrefix: {
+    type: String,
+    default: "icon"
   }
 };
-var overlay = "";
-function _isSlot$1(s) {
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  setup(props) {
+    const {
+      name,
+      size,
+      color,
+      classPrefix
+    } = 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);
+    };
+  }
+});
+var baseOverlay = "";
+function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const CommonOverlay = defineComponent({
@@ -104,7 +116,7 @@ const CommonOverlay = defineComponent({
       }, {
         default: () => [createVNode(Transition, {
           "name": "devui-overlay-fade"
-        }, _isSlot$1(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+        }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
           default: () => [_slot]
         })]
       });
@@ -138,28 +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 = __spreadValues({
-  origin: {
-    type: Object,
-    require: true
-  },
-  position: {
-    type: Object,
-    default: () => ({
-      originX: "left",
-      originY: "top",
-      overlayX: "left",
-      overlayY: "top"
-    })
-  }
-}, overlayProps);
+const overlayEmits = ["update:visible", "backdropClick"];
 function useOverlayLogic(props, ctx) {
   const backgroundClass = computed(() => {
     return [
@@ -210,6 +207,7 @@ function useOverlayLogic(props, ctx) {
     handleOverlayBubbleCancel
   };
 }
+var fixedOverlay = "";
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
@@ -222,7 +220,7 @@ const FixedOverlay = defineComponent({
       handleOverlayBubbleCancel
     } = useOverlayLogic(props, ctx);
     return () => createVNode(CommonOverlay, null, {
-      default: () => [withDirectives(createVNode("div", {
+      default: () => [props.visible && createVNode("div", {
         "class": backgroundClass.value,
         "style": props.backgroundStyle,
         "onClick": handleBackdropClick
@@ -230,248 +228,269 @@ const FixedOverlay = defineComponent({
         "class": overlayClass.value,
         "style": props.overlayStyle,
         "onClick": handleOverlayBubbleCancel
-      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+      }, [renderSlot(ctx.slots, "default")])])]
     });
   }
 });
-function isComponent(target) {
-  return !!(target == null ? void 0 : target.$el);
-}
-function getElement(element) {
-  if (element instanceof Element) {
-    return element;
+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
   }
-  if (element && typeof element === "object" && element.$el instanceof Element) {
-    return element.$el;
+};
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
   }
-  return null;
+  return window;
 }
-const FlexibleOverlay = defineComponent({
-  name: "DFlexibleOverlay",
-  props: flexibleOverlayProps,
-  emits: overlayEmits,
-  setup(props, ctx) {
-    const overlayRef = ref(null);
-    const positionedStyle = reactive({
-      position: "absolute"
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
     });
-    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 updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      shift(),
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
     });
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    const originParent = getScrollParent(props.origin);
+    if (props.modelValue && props.origin) {
+      nextTick(updatePosition);
+      originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      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 !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef, updatePosition };
+}
+var flexibleOverlay = "";
+defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
     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]])]
+      arrowRef,
+      overlayRef,
+      updatePosition
+    } = useOverlay(props, emit);
+    expose({
+      updatePosition
     });
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
+        "class": "devui-flexible-overlay"
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": "devui-flexible-overlay-arrow"
+      }, null)]);
+    };
   }
 });
-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;
+const inBrowser = typeof window !== "undefined";
+function useModal(props, emit) {
+  function close() {
+    emit("update:modelValue", false);
   }
-  let y;
-  if (position.originY == "center") {
-    y = originRect.top + originRect.height / 2;
-  } else {
-    y = position.originY == "top" ? originRect.top : originRect.bottom;
+  function handleVisibleChange(val) {
+    if (!val) {
+      props.beforeClose ? props.beforeClose(close) : close();
+    }
   }
-  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);
-  };
+  return { handleVisibleChange };
 }
-function subscribeOverlayResize(overlay2, callback) {
-  if (overlay2 instanceof Element) {
-    const resizeObserver = new ResizeObserver(callback);
-    resizeObserver.observe(overlay2);
-    return () => resizeObserver.disconnect();
+var Header = defineComponent({
+  name: "DModalHeader",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-modal-header"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
   }
-  return () => {
-  };
-}
-function subscribeOriginResize(origin, callback) {
-  if (origin instanceof Element) {
-    const observer = new MutationObserver(callback);
-    observer.observe(origin, {
-      attributeFilter: ["style"]
-    });
-    return () => observer.disconnect();
+});
+var Body = defineComponent({
+  name: "DModalBody",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-modal-body"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
   }
-  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",
+  inheritAttrs: false,
   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
+  emits: ["update:modelValue"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const {
+      modelValue,
+      lockScroll,
+      closeOnClickOverlay,
+      title
+    } = toRefs(props);
+    const {
+      handleVisibleChange
+    } = useModal(props, emit);
+    expose({
+      handleVisibleChange
     });
     return () => createVNode(FixedOverlay, {
-      "visible": props.modelValue,
-      "onUpdate:visible": onVisibleChange,
-      "backgroundClass": "devui-modal-wrapper",
-      "backgroundBlock": !props.bodyScrollable,
-      "backdropClose": props.backdropCloseable
+      "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, _b;
-          return [animatedVisible.value ? (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a) : null];
+          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({
+  name: "DModalFooter",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-modal-footer"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
 class CommonModalService {
   constructor(anchorContainer) {
     this.anchorContainer = anchorContainer;
@@ -487,6 +506,7 @@ class CommonModalService {
     }, 500);
   }
 }
+let vm;
 class ModalService extends CommonModalService {
   component() {
     return Modal;
@@ -494,7 +514,7 @@ class ModalService extends CommonModalService {
   open(props = {}) {
     const anchor = document.createElement("div");
     this.anchorContainer.appendChild(anchor);
-    const _a = props, { content } = _a, resProps = __objRest(_a, ["content"]);
+    const _a = props, { header, content, footer } = _a, resProps = __objRest(_a, ["header", "content", "footer"]);
     const needHideOrNot = (value) => {
       if (!value) {
         hide();
@@ -504,11 +524,11 @@ class ModalService extends CommonModalService {
       return this.renderModal(anchor, __spreadProps(__spreadValues({}, props2), {
         modelValue: true,
         "onUpdate:modelValue": onUpdateModelValue
-      }), { default: content });
+      }), { header, default: content, footer });
     };
     const hide = () => {
       var _a2, _b;
-      const vnode = renderOrigin(resProps, (value) => {
+      renderOrigin(resProps, (value) => {
         if (!value) {
           this.renderModal(anchor, __spreadProps(__spreadValues({}, resProps), { modelValue: false }));
           this.renderNull(anchor);
@@ -516,702 +536,23 @@ class ModalService extends CommonModalService {
           renderOrigin(resProps);
         }
       });
-      (_b = (_a2 = vnode.component.exposed).onVisibleChange) == null ? void 0 : _b.call(_a2, false);
+      (_b = (_a2 = vm.component.exposed).handleVisibleChange) == null ? void 0 : _b.call(_a2, false);
     };
     this.renderModal(anchor, { modelValue: false });
-    renderOrigin(resProps);
+    vm = 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: true
-  },
-  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);
-};
-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);
-  }
-};
-const buttonProps = {
-  type: {
-    type: String,
-    default: "button"
-  },
-  variant: {
-    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",
-  directives: {
-    devLoading: loadingDirective
-  },
-  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 {
-        variant,
-        size,
-        position,
-        bordered,
-        icon
-      } = props;
-      const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
-      const borderedClass = bordered ? "bordered" : "";
-      const btnIcon = !!icon && !hasContent.value && variant !== "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 createVNode("div", mergeProps({
-        "class": "devui-btn-host"
-      }, ctx.attrs), [withDirectives(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("devLoading"), showLoading]])]);
-    };
-  }
-});
-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 {
-          variant,
-          disabled,
-          handler,
-          text
-        } = buttonProps2;
-        return createVNode(Button, {
-          "key": index2,
-          "style": {
-            display: "inline-block",
-            margin: "0 5px"
-          },
-          "variant": variant,
-          "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",
-          "variant": "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);
+    app.component(Modal.name, Modal);
+    app.component(Header.name, Header);
+    app.component(Body.name, Body);
+    app.component(Footer.name, Footer);
     if (!inBrowser) {
       return;
     }
@@ -1222,7 +563,6 @@ var index = {
       document.body.appendChild(anchorsContainer);
     }
     app.provide(ModalService.token, new ModalService(anchorsContainer));
-    app.provide(DialogService.token, new DialogService(anchorsContainer));
   }
 };
 export { Modal, index as default };