@dt-frames/ui 2.0.1 → 2.0.3

package/es/components/modal/index.js

@@ -0,0 +1,1193 @@
+import { useApp, isFunction, isObject, error, useTimeoutFn, useSlots, useI18n, off, on, windowResizeFn, dispatchResize, isArray, deepMerge } from "@dt-frames/core";
+import { reactive, ref as ref$1, watchEffect, unref, nextTick, onUnmounted, toRefs, useAttrs, createVNode, isVNode, defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, createBlock, withCtx, createElementVNode, createCommentVNode, getCurrentInstance as getCurrentInstance$1, inject, h as h$1, provide, onMounted as onMounted$1, normalizeStyle, resolveDynamicComponent, renderSlot, mergeProps, watch, resolveDirective, normalizeProps, renderList, withDirectives, createTextVNode, toDisplayString, createSlots, guardReactiveProps } from "vue";
+import { Tooltip, Button, FormItem, Col, Spin } from "ant-design-vue/es";
+import "ant-design-vue/es/spin/style";
+import { omit } from "lodash-es";
+import { Modal } from "ant-design-vue";
+import "ant-design-vue/es/tooltip/style";
+import "ant-design-vue/es/col/style";
+import "ant-design-vue/es/form/style";
+import "ant-design-vue/es/button/style";
+const orgDialogProp = reactive({});
+const cbTransfer = reactive({});
+const dataTransfer = reactive({});
+function useModalOut() {
+  const modal = ref$1(null);
+  const loaded = ref$1(true);
+  const uid = ref$1(null);
+  const { isProd } = useApp();
+  function register(modalMethod, uuid) {
+    if (!getCurrentInstance()) {
+      throw new Error("useModal\u53EA\u80FD\u5728setup()\u6216\u8005\u51FD\u6570\u4E2D\u4F7F\u7528");
+    }
+    uid.value = uuid;
+    onUnmounted(() => {
+      if (unref(isProd)) {
+        modal.value = null;
+        loaded.value = false;
+        dataTransfer[unref(uid)] = null;
+        orgDialogProp[unref(uid)] = null;
+        cbTransfer[unref(uid)] = (res) => {
+        };
+      }
+    });
+    if (unref(loaded) && modalMethod === unref(modal))
+      return;
+    modal.value = modalMethod;
+    loaded.value = true;
+  }
+  const getInstance = () => {
+    const instance = unref(modal);
+    if (!instance) {
+      error("useModalOut \u5B9E\u4F8B\u672A\u5B9A\u4E49");
+    }
+    return instance;
+  };
+  const methods = {
+    setModalProps: (props) => {
+      getInstance()?.setModalProps(props);
+    },
+    redoModalHeight: () => {
+      getInstance()?.redoModalHeight?.();
+    },
+    openModal: (params, afterClose) => {
+      const id = unref(uid);
+      dataTransfer[id] = isObject(params) ? { ...toRaw(params) } : params;
+      getInstance()?.setModalProps({
+        footer: [],
+        defaultFullscreen: false,
+        ...orgDialogProp[id],
+        visible: true
+      });
+      cbTransfer[id] = (res) => {
+        if (afterClose && isFunction(afterClose)) {
+          afterClose(res);
+        }
+      };
+    },
+    closeModal: () => {
+      getInstance()?.setModalProps({ visible: false });
+    }
+  };
+  return [register, methods];
+}
+function useModal(props, setModalData) {
+  const modalInstanceRef = ref$1(null);
+  const currentInstance = getCurrentInstance();
+  const uidRef = ref$1(null);
+  const { isProd } = useApp();
+  const getInstance = () => {
+    const instance = unref(modalInstanceRef);
+    if (!instance) {
+      error("useModal \u5B9E\u4F8B\u672A\u5B9A\u4E49");
+    }
+    return instance;
+  };
+  const register = (modalInstance, uuid) => {
+    if (unref(isProd)) {
+      modalInstanceRef.value = null;
+    }
+    uidRef.value = uuid;
+    modalInstanceRef.value = modalInstance;
+    currentInstance?.emit("register", modalInstance, uuid);
+    orgDialogProp[uuid] = toRaw(props);
+    modalInstance.setModalProps(props);
+  };
+  watchEffect(() => {
+    const data = dataTransfer[unref(uidRef)];
+    if (!data)
+      return;
+    if (!setModalData || !isFunction(setModalData))
+      return;
+    nextTick(() => {
+      setModalData(data);
+    });
+  });
+  const methods = {
+    setLoading: (loading = true) => {
+      getInstance()?.setModalProps({ loading });
+    },
+    closeModal: (rsp) => {
+      if (cbTransfer[unref(uidRef)])
+        cbTransfer[unref(uidRef)](rsp);
+      getInstance()?.setModalProps({ visible: false });
+    },
+    setModalProps: (props2) => {
+      getInstance()?.setModalProps(props2);
+    },
+    redoModalHeight: () => {
+      const callRedo = getInstance()?.redoModalHeight;
+      callRedo && callRedo();
+    }
+  };
+  return [register, methods];
+}
+const basicProps = {
+  t: {
+    type: String
+  },
+  visible: {
+    type: Boolean
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  destroyOnClose: {
+    type: Boolean
+  },
+  scrollTop: {
+    type: Boolean,
+    default: true
+  },
+  height: { type: Number },
+  minHeight: { type: Number },
+  width: { type: [String, Number] },
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  defaultFullscreen: {
+    type: Boolean
+  },
+  canFullscreen: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String
+  },
+  loading: { type: Boolean, default: false },
+  loadingTip: { type: String, default: "\u52A0\u8F7D\u4E2D..." },
+  useWrapper: {
+    type: Boolean,
+    default: true
+  },
+  wrapClassName: { type: String },
+  zIndex: { type: Number },
+  centered: { type: Boolean },
+  showOkBtn: {
+    type: Boolean,
+    default: true
+  },
+  showCancelBtn: {
+    type: Boolean,
+    default: true
+  },
+  okText: {
+    type: String
+  },
+  cancelText: {
+    type: String
+  },
+  mask: { type: Boolean, default: true },
+  maskClosable: { type: Boolean, default: true },
+  keyboard: { type: Boolean, default: true },
+  maskStyle: Object,
+  footer: {
+    type: Object
+  },
+  bodyStyle: Object,
+  wrapperProps: Object,
+  getContainer: Function,
+  closeFunc: Function,
+  afterClose: Function
+};
+function useDragMove(context) {
+  const getStyle = (dom, attr) => {
+    return getComputedStyle(dom)[attr];
+  };
+  const drag = (wrap) => {
+    if (!wrap)
+      return;
+    wrap.setAttribute("data-drag", unref(context.draggable));
+    const dialogHeaderEl = wrap.querySelector(".ant-modal-header");
+    const dragDom = wrap.querySelector(".ant-modal");
+    if (!dialogHeaderEl || !dragDom || !unref(context.draggable))
+      return;
+    dialogHeaderEl.style.cursor = "move";
+    dialogHeaderEl.onmousedown = (e) => {
+      if (!e)
+        return;
+      const disX = e.clientX;
+      const disY = e.clientY;
+      const screenWidth = document.body.clientWidth;
+      const screenHeight = document.documentElement.clientHeight;
+      const dragDomWidth = dragDom.offsetWidth;
+      const dragDomheight = dragDom.offsetHeight;
+      console.log(dragDomWidth, dragDomheight, screenHeight, screenWidth);
+      const minDragDomLeft = dragDom.offsetLeft;
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+      const minDragDomTop = dragDom.offsetTop;
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+      const domLeft = getStyle(dragDom, "left");
+      const domTop = getStyle(dragDom, "top");
+      let styL = +domLeft;
+      let styT = +domTop;
+      if (domLeft.includes("%")) {
+        styL = +document.body.clientWidth * (+domLeft.replace(/%/g, "") / 100);
+        styT = +document.body.clientHeight * (+domTop.replace(/%/g, "") / 100);
+      } else {
+        styL = +domLeft.replace(/px/g, "");
+        styT = +domTop.replace(/px/g, "");
+      }
+      document.onmousemove = function(e2) {
+        let left = e2.clientX - disX;
+        let top = e2.clientY - disY;
+        if (-left > minDragDomLeft) {
+          left = -minDragDomLeft;
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft;
+        }
+        if (-top > minDragDomTop) {
+          top = -minDragDomTop;
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop;
+        }
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+      };
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  };
+  const handleDrag = () => {
+    const dragWraps = document.querySelectorAll(".ant-modal-wrap");
+    for (const wrap of Array.from(dragWraps)) {
+      if (!wrap)
+        continue;
+      const display = getStyle(wrap, "display");
+      const draggable = wrap.getAttribute("data-drag");
+      if (display !== "none") {
+        if (draggable === null || unref(context.destroyOnClose)) {
+          drag(wrap);
+        }
+      }
+    }
+  };
+  watchEffect(() => {
+    if (!unref(context.visible) || !unref(context.draggable)) {
+      return;
+    }
+    useTimeoutFn(() => {
+      handleDrag();
+    }, 30);
+  });
+}
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main$8 = {
+  name: "Modal",
+  inheritAttrs: false,
+  props: basicProps,
+  emits: ["cancel"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      visible,
+      draggable,
+      destroyOnClose
+    } = toRefs(props);
+    const attrs = useAttrs();
+    useDragMove({
+      visible,
+      destroyOnClose,
+      draggable
+    });
+    const {
+      extendSlots
+    } = useSlots();
+    const onCancel = (e) => emit("cancel", e);
+    return () => {
+      let _slot;
+      const propsData = {
+        ...unref(attrs),
+        ...props,
+        destroyOnClose: true,
+        onCancel
+      };
+      if (!propsData?.visible)
+        return null;
+      return createVNode(Modal, propsData, _isSlot(_slot = extendSlots(slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "CloseIcon",
+  props: {
+    canFullscreen: { type: Boolean, default: true },
+    fullScreen: { type: Boolean }
+  },
+  emits: ["cancel", "fullscreen"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t } = useI18n("UI");
+    const getClass = computed(() => {
+      return [
+        "dt-basic-modal-close",
+        `dt-basic-modal-close--custom`,
+        {
+          [`dt-basic-modal-close--can-full`]: props.canFullscreen
+        }
+      ];
+    });
+    function handleCancel(e) {
+      emit("cancel", e);
+    }
+    function handleFullScreen(e) {
+      e?.stopPropagation();
+      e?.preventDefault();
+      emit("fullscreen");
+    }
+    return (_ctx, _cache) => {
+      const _component_ATooltip = Tooltip;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["flex h-14 items-center justify-center", unref(getClass)])
+      }, [
+        __props.canFullscreen ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          __props.fullScreen ? (openBlock(), createBlock(_component_ATooltip, {
+            key: 0,
+            title: unref(t)("EXIT_FULLSCREEN"),
+            placement: "bottom"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("i", {
+                class: "i ic:baseline-fullscreen-exit hover:font-bold inline-block w-10 h-14 pr-4",
+                onClick: handleFullScreen
+              })
+            ]),
+            _: 1
+          }, 8, ["title"])) : (openBlock(), createBlock(_component_ATooltip, {
+            key: 1,
+            title: unref(t)("FULLSCREEN"),
+            placement: "bottom"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("i", {
+                class: "i ic:baseline-fullscreen hover:font-bold inline-block h-14 w-10 pr-4",
+                onClick: handleFullScreen
+              })
+            ]),
+            _: 1
+          }, 8, ["title"]))
+        ], 64)) : createCommentVNode("", true),
+        createElementVNode("i", {
+          class: "i mdi:close h-14 w-10 pr-4",
+          onClick: handleCancel
+        })
+      ], 2);
+    };
+  }
+});
+const isServer = typeof window === "undefined";
+const BAR_MAP = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+};
+function renderThumbStyle({ move, size, bar }) {
+  const style = {};
+  const translate = `translate${bar.axis}(${move}%)`;
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+  return style;
+}
+function resizeHandler(entries) {
+  for (const entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || [];
+    if (listeners.length) {
+      listeners.forEach((fn) => {
+        fn();
+      });
+    }
+  }
+}
+function addResizeListener(element, fn) {
+  if (isServer)
+    return;
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = [];
+    element.__ro__ = new ResizeObserver(resizeHandler);
+    element.__ro__.observe(element);
+  }
+  element.__resizeListeners__.push(fn);
+}
+function removeResizeListener(element, fn) {
+  if (!element || !element.__resizeListeners__)
+    return;
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect();
+  }
+}
+const Bar = defineComponent({
+  name: "Bar",
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+  setup(props) {
+    const instance = getCurrentInstance$1();
+    const thumb = ref$1();
+    const wrap = inject("scroll-bar-wrap", {});
+    const bar = computed(() => {
+      return BAR_MAP[props.vertical ? "vertical" : "horizontal"];
+    });
+    const barStore = ref$1({});
+    const cursorDown = ref$1();
+    const clickThumbHandler = (e) => {
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      window.getSelection()?.removeAllRanges();
+      startDrag(e);
+      barStore.value[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      const offset = Math.abs(
+        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+      );
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 / instance?.vnode.el?.[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown.value = true;
+      on(document, "mousemove", mouseMoveDocumentHandler);
+      on(document, "mouseup", mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (cursorDown.value === false)
+        return;
+      const prevPage = barStore.value[bar.value.axis];
+      if (!prevPage)
+        return;
+      const offset = (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / instance?.vnode.el?.[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    function mouseUpDocumentHandler() {
+      cursorDown.value = false;
+      barStore.value[bar.value.axis] = 0;
+      off(document, "mousemove", mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    }
+    onUnmounted(() => {
+      off(document, "mouseup", mouseUpDocumentHandler);
+    });
+    return () => h$1(
+      "div",
+      {
+        class: ["scrollbar__bar", "is-" + bar.value.key],
+        onMousedown: clickTrackHandler
+      },
+      h$1("div", {
+        ref: thumb,
+        class: "scrollbar__thumb",
+        onMousedown: clickThumbHandler,
+        style: renderThumbStyle({
+          size: props.size,
+          move: props.move,
+          bar: bar.value
+        })
+      })
+    );
+  }
+});
+const _hoisted_1$1 = { class: "scrollbar relative h-full overflow-hidden" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "scroll-bar",
+  props: {
+    wrapClass: {
+      type: [String, Array],
+      default: ""
+    },
+    wrapStyle: Array,
+    viewClass: {
+      type: [String, Array],
+      default: ""
+    },
+    viewStyle: {
+      type: [String, Array],
+      default: ""
+    },
+    noresize: Boolean,
+    tag: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const sizeWidth = ref$1("0");
+    const sizeHeight = ref$1("0");
+    const moveX = ref$1(0);
+    const moveY = ref$1(0);
+    const wrap = ref$1();
+    const resize = ref$1();
+    provide("scroll-bar-wrap", wrap);
+    const style = computed(() => {
+      let rsStyle = {};
+      if (Array.isArray(props.wrapStyle)) {
+        props.wrapStyle.forEach((it) => {
+          if (it)
+            rsStyle = Object.assign({}, rsStyle, it);
+        });
+      }
+      return rsStyle;
+    });
+    const handleScroll = () => {
+      moveY.value = unref(wrap).scrollTop * 100 / unref(wrap).clientHeight;
+      moveX.value = unref(wrap).scrollLeft * 100 / unref(wrap).clientWidth;
+    };
+    const update = () => {
+      if (!unref(wrap))
+        return;
+      const heightPercentage = unref(wrap).clientHeight * 100 / unref(wrap).scrollHeight;
+      const widthPercentage = unref(wrap).clientWidth * 100 / unref(wrap).scrollWidth;
+      sizeHeight.value = heightPercentage < 100 ? heightPercentage + "%" : "";
+      sizeWidth.value = widthPercentage < 100 ? widthPercentage + "%" : "";
+    };
+    onMounted$1(() => {
+      nextTick(update);
+      if (!props.noresize) {
+        addResizeListener(unref(resize), update);
+        addResizeListener(unref(wrap), update);
+        addEventListener("resize", update);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (!props.noresize) {
+        removeResizeListener(unref(resize), update);
+        removeResizeListener(unref(wrap), update);
+        removeEventListener("resize", update);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", {
+          ref_key: "wrap",
+          ref: wrap,
+          class: normalizeClass([[__props.wrapClass, "scrollbar__wrap--hidden-default"], "h-full overflow-auto"]),
+          style: normalizeStyle(unref(style)),
+          onScroll: handleScroll
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+            class: normalizeClass(["box-border", __props.viewClass]),
+            ref_key: "resize",
+            ref: resize,
+            style: normalizeStyle(__props.viewStyle)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class", "style"]))
+        ], 38),
+        createVNode(unref(Bar), {
+          move: moveX.value,
+          size: sizeWidth.value
+        }, null, 8, ["move", "size"]),
+        createVNode(unref(Bar), {
+          vertical: "",
+          move: moveY.value,
+          size: sizeHeight.value
+        }, null, 8, ["move", "size"])
+      ]);
+    };
+  }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "scroll-container",
+  setup(__props) {
+    const scrollbarRef = ref(null);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$6, mergeProps({
+        ref_key: "scrollbarRef",
+        ref: scrollbarRef
+      }, _ctx.$attrs, { class: "w-full h-full" }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "slot-container",
+  props: {
+    template: {
+      type: Function
+    },
+    data: {
+      type: Object
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const Container = h("div", [props.template(props.data)]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Container));
+    };
+  }
+});
+const withInstall = (comp) => {
+  comp.install = (app) => {
+    app.component(comp.name, comp);
+  };
+  return comp;
+};
+const DtScrollContainer = withInstall(_sfc_main$5);
+withInstall(_sfc_main$4);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "ModalWrap",
+  props: {
+    useWrapper: { type: Boolean, default: true },
+    modalHeaderHeight: { type: Number, default: 55 },
+    modalFooterHeight: { type: Number, default: 58 },
+    minHeight: { type: Number, default: 200 },
+    height: { type: Number },
+    visible: { type: Boolean },
+    fullScreen: { type: Boolean }
+  },
+  emits: ["ext-height", "height-change"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const wrapperRef = ref$1(null);
+    const wrapRef = ref$1(null);
+    const realHeightRef = ref$1(0);
+    const minRealHeightRef = ref$1(0);
+    let realHeight = 0;
+    const wrapStyle = computed(() => {
+      return {
+        minHeight: `${props.minHeight}px`,
+        [props.fullScreen ? "height" : "maxHeight"]: `${unref(realHeightRef)}px`
+      };
+    });
+    onMounted(() => {
+      const { modalHeaderHeight, modalFooterHeight } = props;
+      emits("ext-height", modalHeaderHeight + modalFooterHeight);
+    });
+    async function getModalDom() {
+      const wrapperRefDom = unref(wrapperRef);
+      if (!wrapperRefDom)
+        return;
+      const bodyDom = wrapperRefDom.$el.parentElement;
+      if (!bodyDom)
+        return;
+      bodyDom.style.padding = "0";
+      await nextTick();
+      const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+      return modalDom;
+    }
+    async function setModalHeight() {
+      if (!props.visible)
+        return;
+      try {
+        const modalDom = await getModalDom();
+        if (!modalDom)
+          return;
+        const modalRect = getComputedStyle(modalDom).top;
+        const modalTop = Number.parseInt(modalRect);
+        let maxHeight = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 100;
+        if (modalTop < 40) {
+          maxHeight -= 26;
+        }
+        await nextTick();
+        const warpEl = unref(wrapRef);
+        if (!warpEl)
+          return;
+        await nextTick();
+        realHeight = warpEl.scrollHeight;
+        if (props.fullScreen) {
+          realHeightRef.value = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
+        } else {
+          realHeightRef.value = props.height ? props.height : realHeight > maxHeight ? maxHeight : realHeight;
+        }
+        emits("height-change", unref(realHeightRef));
+        const _modalDom = await getModalDom();
+        _modalDom.style.top = (window.innerHeight - _modalDom.offsetHeight) / 2 + "px";
+      } catch (error2) {
+        console.log(error2);
+      }
+    }
+    windowResizeFn(setModalHeight.bind(null, false));
+    watchEffect(() => {
+      props.useWrapper && setModalHeight();
+    });
+    watch(
+      () => props.fullScreen,
+      (v) => {
+        setModalHeight();
+        if (!v) {
+          realHeightRef.value = minRealHeightRef.value;
+        } else {
+          minRealHeightRef.value = realHeightRef.value;
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(DtScrollContainer), {
+        ref_key: "wrapperRef",
+        ref: wrapperRef
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "wrapRef",
+            ref: wrapRef,
+            style: normalizeStyle(unref(wrapStyle))
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 4)
+        ]),
+        _: 3
+      }, 512);
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  className: "preIcon pr-1"
+};
+const _hoisted_2 = {
+  key: 0,
+  className: "preIcon pl-1"
+};
+const _hoisted_3 = { class: "text" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "text-2xl i ic:baseline-arrow-drop-down" }, null, -1);
+const _hoisted_5 = [
+  _hoisted_4
+];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "FormButtons",
+  props: {
+    mode: {
+      type: String,
+      default: "search"
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    showAdvancedButton: {
+      type: Boolean,
+      default: true
+    },
+    minShowColumn: {
+      type: Number,
+      default: 2
+    },
+    buttonList: {
+      type: [Array],
+      default: []
+    },
+    isAdvanced: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["handle-method"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const { t } = useI18n();
+    const advancedRef = ref$1(props.isAdvanced);
+    let key = 0;
+    const showAdvanceRef = computed(() => {
+      return props.mode === "search" ? props.showAdvancedButton : false;
+    });
+    const colOpt = computed(() => {
+      let style = {
+        textAlign: "right"
+      };
+      if (props.mode === "dialog") {
+        Object.assign(style, {
+          display: "inline-block"
+        });
+      }
+      return { style };
+    });
+    const getAdvanceClass = computed(() => {
+      return [
+        "basic-arrow",
+        { "basic-arrow--active": !advancedRef.value }
+      ];
+    });
+    const toggleAdvanced = () => {
+      advancedRef.value = !advancedRef.value;
+      dispatchResize();
+      emits("handle-method", advancedRef.value);
+    };
+    function handleBtnClick(button) {
+      if (button.onClick && isFunction(button.onClick)) {
+        button.onClick();
+      } else {
+        emits("handle-method", button);
+      }
+    }
+    watch(() => props.isAdvanced, (v) => {
+      if (v) {
+        nextTick(() => toggleAdvanced());
+      }
+    }, {
+      immediate: true
+    });
+    watch(
+      () => props.buttonList,
+      (v) => key = new Date().getTime(),
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_AButton = Button;
+      const _component_AFormItem = FormItem;
+      const _component_ACol = Col;
+      const _directive_icon = resolveDirective("icon");
+      const _directive_auth = resolveDirective("auth");
+      return __props.show ? (openBlock(), createBlock(_component_ACol, normalizeProps(mergeProps({ key: 0 }, unref(colOpt))), {
+        default: withCtx(() => [
+          createVNode(_component_AFormItem, {
+            class: "dt-form-btns",
+            style: normalizeStyle({
+              "margin-bottom": __props.mode === "search" ? "16px" : "0px"
+            })
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttonList, (button) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  (button.show === void 0 ? true : button.show) ? withDirectives((openBlock(), createBlock(_component_AButton, {
+                    type: button.type,
+                    class: normalizeClass(button.class),
+                    loading: button.loading?.value,
+                    disabled: button.disabled,
+                    key: unref(key),
+                    onClick: ($event) => handleBtnClick(button)
+                  }, {
+                    icon: withCtx(() => [
+                      button.preIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1, null, 512)), [
+                        [_directive_icon, button.preIcon]
+                      ]) : createCommentVNode("", true)
+                    ]),
+                    default: withCtx(() => [
+                      createTextVNode(" " + toDisplayString(unref(t)(button.name)) + " ", 1),
+                      button.postIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2, null, 512)), [
+                        [_directive_icon, button.postIcon]
+                      ]) : createCommentVNode("", true)
+                    ]),
+                    _: 2
+                  }, 1032, ["type", "class", "loading", "disabled", "onClick"])), [
+                    [_directive_auth, button.auth]
+                  ]) : createCommentVNode("", true)
+                ], 64);
+              }), 256)),
+              unref(showAdvanceRef) ? (openBlock(), createBlock(_component_AButton, {
+                key: 0,
+                type: "link",
+                class: "advanced",
+                onClick: toggleAdvanced
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("span", _hoisted_3, toDisplayString(advancedRef.value ? unref(t)("UI.ADVANCED") : unref(t)("UI.EXPAND")), 1),
+                  createElementVNode("span", {
+                    class: normalizeClass(unref(getAdvanceClass))
+                  }, _hoisted_5, 2)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["style"])
+        ]),
+        _: 1
+      }, 16)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ModalFooter",
+  props: {
+    buttons: Object,
+    showSave: { type: Boolean, default: true },
+    showCancel: { type: Boolean, default: true },
+    okText: { type: String },
+    cancelText: { type: String }
+  },
+  emits: [
+    "handleSave",
+    "handleCancel"
+  ],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const { t } = useI18n("UI");
+    const buttonList = computed(() => {
+      if (props.buttons && props.buttons.length)
+        return props.buttons;
+      let buttonActions = [
+        { t: "\u4FDD\u5B58", name: props.okText || t("SAVE"), preIcon: "mdi:content-save", type: "primary", flag: "OK" },
+        { t: "\u5173\u95ED", name: props.cancelText || t("CLOSE"), preIcon: "mdi:close", flag: "CANCEL" }
+      ];
+      if (!props.showSave)
+        buttonActions = buttonActions.filter((btn) => btn.flag !== "OK");
+      if (!props.showCancel)
+        buttonActions = buttonActions.filter((btn) => btn.flag !== "CANCEL");
+      return buttonActions;
+    });
+    function handleMethod(item) {
+      switch (item.flag) {
+        case "OK":
+          emits("handleSave");
+          break;
+        case "CANCEL":
+          emits("handleCancel");
+          break;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "appendFooter"),
+        createVNode(_sfc_main$2, {
+          mode: "dialog",
+          buttonList: unref(buttonList),
+          onHandleMethod: _cache[0] || (_cache[0] = ($event) => handleMethod($event))
+        }, null, 8, ["buttonList"])
+      ], 64);
+    };
+  }
+});
+function useFullScreen(wrapClassName) {
+  const fullScreenRef = ref$1(false);
+  const getWrapClassName = computed(() => {
+    const clsName = unref(wrapClassName) || "";
+    const cls = unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName);
+    return `dt-modal ${cls}`;
+  });
+  function toggleFullScreen(e) {
+    e && e.stopPropagation();
+    fullScreenRef.value = !unref(fullScreenRef);
+    dispatchResize();
+  }
+  return {
+    fullScreenRef,
+    getWrapClassName,
+    toggleFullScreen
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: basicProps,
+  emits: ["visible-change", "height-change", "cancel", "save", "register", "update:visible"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const visibleRef = ref$1(false);
+    const propsRef = ref$1();
+    const modalWrapperRef = ref$1(null);
+    const { getWrapClassName, toggleFullScreen, fullScreenRef } = useFullScreen(computed(() => unref(propsRef)?.wrapClassName));
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...unref(propsRef)
+      };
+    });
+    const getBindValue = computed(() => {
+      const bindValue = {
+        ...unref(getMergeProps),
+        ...unref(propsRef),
+        visible: unref(visibleRef),
+        wrapClassName: unref(getWrapClassName)
+      };
+      let omitArr = unref(fullScreenRef) ? ["height", "title"] : ["title"];
+      if (isArray(unref(propsRef)?.footer)) {
+        omitArr.push("footer");
+      }
+      return omit(bindValue, omitArr);
+    });
+    const getWrapperHeight = computed(() => {
+      if (unref(fullScreenRef))
+        return void 0;
+      return unref(getBindValue).height;
+    });
+    const modalFooterHeight = computed(() => {
+      if (isArray(props.footer)) {
+        return (unref(propsRef)?.footer).length ? 0 : void 0;
+      }
+      return props?.footer !== void 0 && !props.footer ? 0 : void 0;
+    });
+    const modalMethods = {
+      setModalProps,
+      redoModalHeight: () => {
+        nextTick(() => {
+          if (unref(modalWrapperRef)) {
+            unref(modalWrapperRef).setModalHeight();
+          }
+        });
+      }
+    };
+    const instance = getCurrentInstance();
+    if (instance) {
+      emits("register", modalMethods, instance.uid);
+    }
+    function handleHeightChange(height) {
+      emits("height-change", height);
+    }
+    function setModalProps(props2) {
+      propsRef.value = deepMerge(unref(propsRef) || {}, props2);
+      if (Reflect.has(props2, "visible")) {
+        visibleRef.value = !!props2.visible;
+      }
+      if (Reflect.has(props2, "defaultFullscreen")) {
+        fullScreenRef.value = !!props2.defaultFullscreen;
+      }
+    }
+    function handleSave() {
+      emits("save");
+    }
+    async function handleCancel(e = null) {
+      if (e) {
+        e?.stopPropagation();
+        if (e.target?.classList?.contains("dt-basic-modal-close--custom"))
+          return;
+        if (props.closeFunc && isFunction(props.closeFunc)) {
+          const isClose = await props.closeFunc();
+          visibleRef.value = !isClose;
+          return;
+        }
+      }
+      const { afterClose } = unref(getBindValue);
+      if (afterClose && isFunction(afterClose)) {
+        afterClose();
+      }
+      visibleRef.value = false;
+      emits("cancel", e);
+    }
+    watch(() => unref(visibleRef), (v) => {
+      emits("visible-change", v);
+      emits("update:visible", v);
+      nextTick(() => {
+        if (props.scrollTop && v && unref(modalWrapperRef)) {
+          unref(modalWrapperRef).$el.scrollTop = 0;
+        }
+      });
+    }, {
+      immediate: false
+    });
+    return (_ctx, _cache) => {
+      const _component_ASpin = Spin;
+      return openBlock(), createBlock(_sfc_main$8, mergeProps(unref(getBindValue), { onCancel: handleCancel }), createSlots({
+        default: withCtx(() => [
+          createVNode(_component_ASpin, {
+            spinning: unref(getBindValue).loading,
+            tip: unref(getBindValue).loadingTip
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$3, mergeProps({
+                useWrapper: unref(getBindValue).useWrapper,
+                fullScreen: unref(fullScreenRef),
+                ref_key: "modalWrapperRef",
+                ref: modalWrapperRef,
+                minHeight: unref(getBindValue).minHeight,
+                height: unref(getWrapperHeight),
+                visible: visibleRef.value,
+                modalFooterHeight: unref(modalFooterHeight)
+              }, unref(omit)(unref(getBindValue).wrapperProps, "visible", "height", "modalFooterHeight"), { onHeightChange: handleHeightChange }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              }, 16, ["useWrapper", "fullScreen", "minHeight", "height", "visible", "modalFooterHeight"])
+            ]),
+            _: 3
+          }, 8, ["spinning", "tip"])
+        ]),
+        _: 2
+      }, [
+        !_ctx.$slots.closeIcon ? {
+          name: "closeIcon",
+          fn: withCtx(() => [
+            createVNode(_sfc_main$7, {
+              canFullscreen: unref(getBindValue).canFullscreen,
+              fullScreen: unref(fullScreenRef),
+              onCancel: handleCancel,
+              onFullscreen: unref(toggleFullScreen)
+            }, null, 8, ["canFullscreen", "fullScreen", "onFullscreen"])
+          ]),
+          key: "0"
+        } : void 0,
+        !_ctx.$slots.title ? {
+          name: "title",
+          fn: withCtx(() => [
+            createTextVNode(toDisplayString(unref(getMergeProps).title), 1)
+          ]),
+          key: "1"
+        } : void 0,
+        !_ctx.$slots.footer ? {
+          name: "footer",
+          fn: withCtx(() => [
+            createVNode(_sfc_main$1, {
+              buttons: propsRef.value?.footer,
+              showSave: unref(getBindValue).showOkBtn,
+              showCancel: unref(getBindValue).showCancelBtn,
+              okText: unref(getBindValue).okText,
+              cancelText: unref(getBindValue).cancelText,
+              onHandleSave: handleSave,
+              onHandleCancel: handleCancel
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots), (item) => {
+                return {
+                  name: item,
+                  fn: withCtx((data) => [
+                    renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["buttons", "showSave", "showCancel", "okText", "cancelText"])
+          ]),
+          key: "2"
+        } : void 0,
+        renderList(Object.keys(unref(omit)(_ctx.$slots, "default")), (item) => {
+          return {
+            name: item,
+            fn: withCtx((data) => [
+              renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
+            ])
+          };
+        })
+      ]), 1040);
+    };
+  }
+});
+export {
+  _sfc_main as DtModal,
+  useModal,
+  useModalOut
+};