@dt-frames/ui 2.0.10 → 2.0.12

package/es/components/modal/index.js

@@ -1,14 +1,13 @@
-import { useApp, isFunction, isObject, error, useTimeoutFn, useSlots, useI18n, off, on, windowResizeFn, dispatchResize, isArray, deepMerge } from "@dt-frames/core";
-import { reactive, ref, getCurrentInstance, watchEffect, unref, nextTick, onUnmounted, toRaw, toRefs, useAttrs, createVNode, isVNode, defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, createBlock, withCtx, createElementVNode, createCommentVNode, inject, h, provide, onMounted, onBeforeUnmount, 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 { useApp, isFunction, isObject, error, useTimeoutFn, useSlots, getPopupContainer, useI18n, windowResizeFn, dispatchResize, isArray, deepMerge } from "@dt-frames/core";
+import { reactive, ref, getCurrentInstance, watchEffect, unref, nextTick, onUnmounted, toRaw, toRefs, useAttrs, createVNode, isVNode, defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, createBlock, withCtx, createElementVNode, createCommentVNode, onMounted, watch, normalizeStyle, renderSlot, mergeProps, createSlots, createTextVNode, toDisplayString, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { Tooltip, 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/modal/style";
 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";
+import { DtScrollContainer } from "../container";
+import { DtFormButtons } from "../form";
 const orgDialogProp = reactive({});
 const cbTransfer = reactive({});
 const dataTransfer = reactive({});
@@ -99,7 +98,7 @@ function useModal(props, setModalData) {
     if (!setModalData || !isFunction(setModalData))
       return;
     nextTick(() => {
-      setModalData(data);
+      setModalData(data ?? {});
       if (!data)
         return;
       if (props?.title && isFunction(props?.title)) {
@@ -282,7 +281,7 @@ function useDragMove(context) {
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const _sfc_main$8 = {
+const _sfc_main$4 = {
   name: "Modal",
   inheritAttrs: false,
   props: basicProps,
@@ -312,7 +311,8 @@ const _sfc_main$8 = {
         ...unref(attrs),
         ...props,
         destroyOnClose: true,
-        onCancel
+        onCancel,
+        getContainer: getPopupContainer()
       };
       if (!propsData?.visible)
         return null;
@@ -322,7 +322,7 @@ const _sfc_main$8 = {
     };
   }
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "CloseIcon",
   props: {
     canFullscreen: { type: Boolean, default: true },
@@ -389,291 +389,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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();
-    const thumb = ref();
-    const wrap = inject("scroll-bar-wrap", {});
-    const bar = computed(() => {
-      return BAR_MAP[props.vertical ? "vertical" : "horizontal"];
-    });
-    const barStore = ref({});
-    const cursorDown = ref();
-    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(
-      "div",
-      {
-        class: ["scrollbar__bar", "is-" + bar.value.key],
-        onMousedown: clickTrackHandler
-      },
-      h("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("0");
-    const sizeHeight = ref("0");
-    const moveX = ref(0);
-    const moveY = ref(0);
-    const wrap = ref();
-    const resize = ref();
-    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(() => {
-      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({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "ModalWrap",
   props: {
     useWrapper: { type: Boolean, default: true },
@@ -779,179 +495,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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
-    },
-    colspan: {
-      type: Object
-    }
-  },
-  emits: ["handle-method"],
-  setup(__props, { emit: emits }) {
-    const props = __props;
-    const { t } = useI18n();
-    const advancedRef = ref(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 };
-      } else if (props.mode === null) {
-        Object.assign(style, {
-          display: "flex",
-          justifyContent: "center",
-          marginBottom: "20px"
-        });
-        return {
-          style,
-          span: 24
-        };
-      }
-      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 || props.mode !== "search") {
-        requestAnimationFrame(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, {
-                    class: normalizeClass(["items-center", button.class]),
-                    type: button.type,
-                    loading: button.loading,
-                    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.label)) + " ", 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: {
@@ -994,7 +537,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         renderSlot(_ctx.$slots, "appendFooter"),
-        createVNode(_sfc_main$2, {
+        createVNode(unref(DtFormButtons), {
           mode: "dialog",
           buttonList: unref(buttonList),
           onHandleMethod: _cache[0] || (_cache[0] = ($event) => handleMethod($event))
@@ -1024,13 +567,17 @@ function useFullScreen(wrapClassName) {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: basicProps,
-  emits: ["visible-change", "height-change", "cancel", "save", "register", "update:visible"],
+  emits: ["visible-change", "height-change", "cancel", "save", "register", "toggle-fullscreen", "update:visible"],
   setup(__props, { emit: emits }) {
     const props = __props;
     const visibleRef = ref(false);
     const propsRef = ref();
     const modalWrapperRef = ref(null);
     const { getWrapClassName, toggleFullScreen, fullScreenRef } = useFullScreen(computed(() => unref(propsRef)?.wrapClassName));
+    function handleFullscreen(e) {
+      toggleFullScreen(e);
+      emits("toggle-fullscreen", unref(fullScreenRef));
+    }
     const getMergeProps = computed(() => {
       return {
         ...props,
@@ -1121,14 +668,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_ASpin = Spin;
-      return openBlock(), createBlock(_sfc_main$8, mergeProps(unref(getBindValue), { onCancel: handleCancel }), createSlots({
+      return openBlock(), createBlock(_sfc_main$4, 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({
+              createVNode(_sfc_main$2, mergeProps({
                 useWrapper: unref(getBindValue).useWrapper,
                 fullScreen: unref(fullScreenRef),
                 ref_key: "modalWrapperRef",
@@ -1152,12 +699,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         !_ctx.$slots.closeIcon ? {
           name: "closeIcon",
           fn: withCtx(() => [
-            createVNode(_sfc_main$7, {
+            createVNode(_sfc_main$3, {
               canFullscreen: unref(getBindValue).canFullscreen,
               fullScreen: unref(fullScreenRef),
               onCancel: handleCancel,
-              onFullscreen: unref(toggleFullScreen)
-            }, null, 8, ["canFullscreen", "fullScreen", "onFullscreen"])
+              onFullscreen: handleFullscreen
+            }, null, 8, ["canFullscreen", "fullScreen"])
           ]),
           key: "0"
         } : void 0,
@@ -1206,6 +753,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 export {
   _sfc_main as DtModal,
+  basicProps,
   useModal,
   useModalOut
 };

package/es/components/modal/src/components/Modal.d.ts

@@ -91,7 +91,7 @@ declare const _sfc_main: {
         };
         maskStyle: import("vue").PropType<import("vue").CSSProperties>;
         footer: {
-            type: import("vue").PropType<import("../../../form/src/types/form.type").ButtonProps[]>;
+            type: import("vue").PropType<import("../../../form").ButtonProps[]>;
         };
         bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
         wrapperProps: ObjectConstructor;