@dt-frames/ui 2.0.15 → 2.0.16

package/es/components/modal/index.js

@@ -1,12 +1,11 @@
-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 { useApp, isFunction, isObject, error, useTimeoutFn, useSlots, getPopupContainer, useI18n, 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, renderSlot, watch, 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 { DtScrollContainer } from "../container";
 import { DtFormButtons } from "../form";
 const orgDialogProp = reactive({});
 const cbTransfer = reactive({});
@@ -288,7 +287,7 @@ function useDragMove(context) {
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const _sfc_main$4 = {
+const _sfc_main$3 = {
   name: "Modal",
   inheritAttrs: false,
   props: basicProps,
@@ -329,7 +328,7 @@ const _sfc_main$4 = {
     };
   }
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "CloseIcon",
   props: {
     canFullscreen: { type: Boolean, default: true },
@@ -396,112 +395,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__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(null);
-    const wrapRef = ref(null);
-    const realHeightRef = ref(0);
-    const minRealHeightRef = ref(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.parentElement.parentElement;
-      if (!bodyDom)
-        return;
-      bodyDom.style.padding = props.useWrapper ? "24px" : "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 _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "ModalFooter",
   props: {
@@ -576,7 +469,7 @@ function useFullScreen(wrapClassName) {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: basicProps,
-  emits: ["visible-change", "height-change", "cancel", "save", "register", "toggle-fullscreen", "update:visible"],
+  emits: ["visible-change", "cancel", "save", "register", "toggle-fullscreen", "update:visible"],
   setup(__props, { emit: emits }) {
     const props = __props;
     const visibleRef = ref(false);
@@ -606,17 +499,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       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: () => {
@@ -631,9 +513,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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")) {
@@ -677,28 +556,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_ASpin = Spin;
-      return openBlock(), createBlock(_sfc_main$4, mergeProps(unref(getBindValue), { onCancel: handleCancel }), createSlots({
+      return openBlock(), createBlock(_sfc_main$3, mergeProps(unref(getBindValue), { onCancel: handleCancel }), createSlots({
         default: withCtx(() => [
           createVNode(_component_ASpin, {
             spinning: unref(getBindValue).loading,
             tip: unref(getBindValue).loadingTip
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$2, 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"])
+              renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
           }, 8, ["spinning", "tip"])
@@ -708,7 +573,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         !_ctx.$slots.closeIcon ? {
           name: "closeIcon",
           fn: withCtx(() => [
-            createVNode(_sfc_main$3, {
+            createVNode(_sfc_main$2, {
               canFullscreen: unref(getBindValue).canFullscreen,
               fullScreen: unref(fullScreenRef),
               onCancel: handleCancel,

package/es/components/modal/index.less

@@ -31,6 +31,29 @@
 	.ant-modal {
 		padding: 0;
 	}
+
+    .ant-modal-content{
+        width: 100%;
+    }
+
+    &:not(.fullscreen-modal) {
+        .ant-modal {
+            padding: 0;
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            .ant-modal-body{
+                max-height: calc(100vh - 160px );
+                min-height: 200px;
+                overflow-y: auto;
+            }
+        }
+    }
 }
 
 .dt-basic-modal-close{

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

@@ -100,7 +100,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     afterClose: FunctionConstructor;
 }, {
     props: any;
-    emits: (event: "visible-change" | "height-change" | "cancel" | "save" | "register" | "toggle-fullscreen" | "update:visible", ...args: any[]) => void;
+    emits: (event: "visible-change" | "cancel" | "save" | "register" | "toggle-fullscreen" | "update:visible", ...args: any[]) => void;
     visibleRef: import("vue").Ref<boolean>;
     propsRef: import("vue").Ref<Partial<ExtractPropTypes<{
         t: {
@@ -207,11 +207,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     handleFullscreen: (e: Event) => void;
     getMergeProps: import("vue").ComputedRef<any>;
     getBindValue: import("vue").ComputedRef<any>;
-    getWrapperHeight: import("vue").ComputedRef<any>;
-    modalFooterHeight: import("vue").ComputedRef<number>;
     modalMethods: ModalMethods;
     instance: import("vue").ComponentInternalInstance;
-    handleHeightChange: (height: string) => void;
     setModalProps: (props: Partial<ExtractPropTypes<typeof basicProps>>) => void;
     handleSave: () => void;
     handleCancel: (e?: Event) => Promise<void>;
@@ -362,84 +359,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
         canFullscreen: boolean;
         fullScreen: boolean;
     }>;
-    ModalWrapper: import("vue").DefineComponent<{
-        useWrapper: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        modalHeaderHeight: {
-            type: NumberConstructor;
-            default: number;
-        };
-        modalFooterHeight: {
-            type: NumberConstructor;
-            default: number;
-        };
-        minHeight: {
-            type: NumberConstructor;
-            default: number;
-        };
-        height: {
-            type: NumberConstructor;
-        };
-        visible: {
-            type: BooleanConstructor;
-        };
-        fullScreen: {
-            type: BooleanConstructor;
-        };
-    }, {
-        wrapperRef: any;
-        wrapRef: any;
-        realHeightRef: import("vue").Ref<number>;
-        minRealHeightRef: import("vue").Ref<number>;
-        realHeight: number;
-        props: any;
-        emits: (event: "height-change" | "ext-height", ...args: any[]) => void;
-        wrapStyle: import("vue").ComputedRef<{
-            [x: string]: string;
-            minHeight: string;
-        }>;
-        getModalDom: () => Promise<any>;
-        setModalHeight: () => Promise<void>;
-        readonly DtScrollContainer: import("../../../utils/withInstall").SFCWithInstall<import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>>;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("height-change" | "ext-height")[], "height-change" | "ext-height", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
-        useWrapper: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        modalHeaderHeight: {
-            type: NumberConstructor;
-            default: number;
-        };
-        modalFooterHeight: {
-            type: NumberConstructor;
-            default: number;
-        };
-        minHeight: {
-            type: NumberConstructor;
-            default: number;
-        };
-        height: {
-            type: NumberConstructor;
-        };
-        visible: {
-            type: BooleanConstructor;
-        };
-        fullScreen: {
-            type: BooleanConstructor;
-        };
-    }>> & {
-        "onHeight-change"?: (...args: any[]) => any;
-        "onExt-height"?: (...args: any[]) => any;
-    }, {
-        visible: boolean;
-        minHeight: number;
-        useWrapper: boolean;
-        fullScreen: boolean;
-        modalHeaderHeight: number;
-        modalFooterHeight: number;
-    }>;
     ModalFooter: import("vue").DefineComponent<{
         authPrefix: {
             type: StringConstructor;
@@ -499,7 +418,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         showSave: boolean;
         showCancel: boolean;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("visible-change" | "height-change" | "cancel" | "save" | "register" | "toggle-fullscreen" | "update:visible")[], "visible-change" | "height-change" | "cancel" | "save" | "register" | "toggle-fullscreen" | "update:visible", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("visible-change" | "cancel" | "save" | "register" | "toggle-fullscreen" | "update:visible")[], "visible-change" | "cancel" | "save" | "register" | "toggle-fullscreen" | "update:visible", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     t: {
         type: StringConstructor;
     };
@@ -598,7 +517,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
     afterClose: FunctionConstructor;
 }>> & {
     "onVisible-change"?: (...args: any[]) => any;
-    "onHeight-change"?: (...args: any[]) => any;
     onCancel?: (...args: any[]) => any;
     onSave?: (...args: any[]) => any;
     onRegister?: (...args: any[]) => any;

package/es/components/table/index.js

@@ -7,7 +7,7 @@ import { omit, cloneDeep, isEqual } from "lodash-es";
 import "ant-design-vue/es/tooltip/style";
 import "ant-design-vue/es/dropdown/style";
 import "ant-design-vue/es/menu/style";
-import { useDebounceFn, useFullscreen, isFunction as isFunction$1, tryOnMounted } from "@vueuse/core";
+import { useDebounceFn, useFullscreen, tryOnMounted } from "@vueuse/core";
 import { Input, InputNumber, Select, TreeSelect, Switch, Checkbox, DatePicker, TimePicker, Popover } from "ant-design-vue";
 import { DtFormButtons } from "../form";
 import { useModal, DtModal, useModalOut } from "../modal";
@@ -1404,7 +1404,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       state.checkedList = checkList;
     }
     function getPopupContainer$1() {
-      return isFunction$1(attrs.getPopupContainer) ? attrs.getPopupContainer() : document.getElementById("dt-layout-content") || getPopupContainer();
+      return isFunction(attrs.getPopupContainer) ? attrs.getPopupContainer() : document.getElementById("dt-layout-content") || getPopupContainer();
     }
     return (_ctx, _cache) => {
       const _component_ACheckbox = Checkbox$1;