@dt-frames/ui 2.0.24 → 3.0.1

package/es/components/drawer/index.js

@@ -1,161 +1,163 @@
-import { Drawer } from "ant-design-vue/es";
-import "ant-design-vue/es/drawer/style";
-import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, renderSlot, computed, createVNode, unref, useAttrs, ref, toRaw, getCurrentInstance, watch, createBlock, mergeProps, createSlots, withCtx, renderList, normalizeProps, guardReactiveProps, reactive, watchEffect, nextTick, onUnmounted } from "vue";
-import { useI18n, DtCache, CacheKey, deepMerge, isUnDef, isFunction, useApp, isObject, error } from "@dt-frames/core";
-import { DtFormButtons } from "../form";
-const _hoisted_1$1 = { class: "flex h-full items-center" };
-const _hoisted_2 = { class: "pr-12" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "DrawerHeader",
-  props: {
-    title: {
-      type: String
+import { isProd, isObject, isFunction, error, isUnDef } from "@dt-frames/core";
+import { reactive, ref, getCurrentInstance, unref, onUnmounted, watch, toRaw, defineComponent, computed, openBlock, createBlock, mergeProps, isRef, createSlots, withCtx, createElementBlock, createElementVNode, toDisplayString, renderSlot, createCommentVNode, createVNode, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { Spin, Drawer } from "ant-design-vue/es";
+import { omit } from "lodash-es";
+import { ModalFooter } from "../modal";
+const orgDialogProp = reactive({});
+const cbTransfer = {};
+const cbFun = {};
+function useDrawerOut() {
+  const drawer = ref(null);
+  const loaded = ref(false);
+  const uid = ref("");
+  const open = ref(false);
+  function register(drawerMethods, uuid, isOpen) {
+    if (!getCurrentInstance()) {
+      throw new Error("useDrawer\u53EA\u80FD\u5728setup()\u6216\u8005\u51FD\u6570\u4E2D\u4F7F\u7528");
     }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        createElementVNode("span", null, toDisplayString(__props.title), 1),
-        createElementVNode("span", _hoisted_2, [
-          renderSlot(_ctx.$slots, "titleToolbar")
-        ])
-      ]);
-    };
-  }
-});
-const _hoisted_1 = {
-  class: "flex items-center",
-  style: { gap: "10px" }
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "DrawerFooter",
-  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: "\u5173\u95ED", label: props.cancelText || t("CLOSE"), preIcon: "mdi:close", flag: "CANCEL" },
-        { t: "\u4FDD\u5B58", label: props.okText || t("SAVE"), preIcon: "mdi:content-save", type: "primary", flag: "OK" }
-      ];
-      if (!props.showSave)
-        buttonActions = buttonActions.filter((btn) => btn.flag !== "OK");
-      if (!props.showCancel)
-        buttonActions = buttonActions.filter((btn) => btn.flag !== "CANCEL");
-      return buttonActions;
+    uid.value = uuid;
+    if (unref(loaded) && drawerMethods === unref(drawer))
+      return;
+    drawer.value = drawerMethods;
+    loaded.value = true;
+    onUnmounted(() => {
+      if (isProd()) {
+        drawer.value = null;
+        loaded.value = false;
+        delete orgDialogProp[unref(uid)];
+        delete cbTransfer[unref(uid)];
+      }
     });
-    function handleMethod(item) {
-      switch (item.flag) {
-        case "OK":
-          emits("handleSave");
-          break;
-        case "CANCEL":
-          emits("handleCancel");
-          break;
+    watch(
+      () => unref(isOpen),
+      (v) => {
+        if (v === false) {
+          setTimeout(() => {
+            open.value = v;
+          }, 250);
+        } else {
+          open.value = v;
+        }
       }
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        renderSlot(_ctx.$slots, "appendFooter"),
-        createVNode(unref(DtFormButtons), {
-          mode: "dialog",
-          buttonList: unref(buttonList),
-          onHandleMethod: _cache[0] || (_cache[0] = ($event) => handleMethod($event))
-        }, null, 8, ["buttonList"])
-      ]);
-    };
+    );
   }
-});
-const basicProps = {
-  t: {
-    type: String
-  },
-  title: {
-    type: String
-  },
-  visible: { type: Boolean },
-  loading: { type: Boolean },
-  loadingTip: { type: String, default: "\u52A0\u8F7D\u4E2D..." },
-  mask: { type: Boolean, default: true },
-  maskClosable: { type: Boolean, default: true },
-  keyboard: { type: Boolean, default: true },
-  maskStyle: Object,
-  closeFunc: {
-    type: [Function, Object],
-    default: null
-  },
-  destroyOnClose: { type: Boolean },
-  getContainer: {
-    type: [Object, String]
-  },
-  width: { type: [String, Number] },
-  showOkBtn: {
-    type: Boolean,
-    default: true
-  },
-  showCancelBtn: {
-    type: Boolean,
-    default: true
-  },
-  okText: {
-    type: String
-  },
-  cancelText: {
-    type: String
-  },
-  footer: {
-    type: Array
-  },
-  afterClose: Function
+  const getInstance = () => {
+    const instance = unref(drawer);
+    if (!instance) {
+      error("useDrawerOut \u5B9E\u4F8B\u672A\u5B9A\u4E49");
+    }
+    return instance;
+  };
+  const methods = {
+    setDrawerProps: (props) => {
+      getInstance()?.setDrawerProps(props);
+    },
+    openDrawer: (params = null, afterClose) => {
+      open.value = true;
+      let uidWatch = watch(
+        () => unref(uid),
+        (v) => {
+          if (v) {
+            const id = unref(uid);
+            cbFun[id]?.(isObject(params) ? { ...toRaw(params) } : params);
+            getInstance()?.setDrawerProps({
+              defaultFullscreen: false,
+              ...orgDialogProp[id],
+              open: true
+            });
+            cbTransfer[id] = (res) => {
+              if (afterClose && isFunction(afterClose)) {
+                afterClose(res);
+              }
+            };
+            uidWatch();
+          }
+        }
+      );
+    },
+    closeDrawer: () => {
+      getInstance()?.setDrawerProps({ open: false });
+    }
+  };
+  return [register, methods, open];
+}
+function useDrawer(props, setDrawerData) {
+  const drawerInstanceRef = ref(null);
+  const uidRef = ref("");
+  const getInstance = () => {
+    const instance = unref(drawerInstanceRef);
+    if (!instance) {
+      error("useDrawer \u5B9E\u4F8B\u672A\u5B9A\u4E49");
+    }
+    return instance;
+  };
+  const register = (drawerInstance, uuid) => {
+    uidRef.value = uuid;
+    drawerInstanceRef.value = drawerInstance;
+    cbFun[uuid] = setDrawerData;
+    orgDialogProp[uuid] = toRaw(props);
+    drawerInstance.setDrawerProps(props);
+  };
+  const methods = {
+    setLoading: (loading = true) => {
+      getInstance()?.setDrawerProps({ loading });
+    },
+    getDrawerProps: () => {
+      return getInstance()?.getDrawerProps();
+    },
+    closeDrawer: (rsp) => {
+      if (cbTransfer[unref(uidRef)])
+        cbTransfer[unref(uidRef)](rsp);
+      getInstance()?.setDrawerProps({ open: false });
+    },
+    setDrawerProps: (props2) => {
+      getInstance()?.setDrawerProps(props2);
+    }
+  };
+  return [register, methods];
+}
+const defaultProps = {
+  loadingTip: "\u52A0\u8F7D\u4E2D...",
+  mask: true,
+  maskClosable: true,
+  keyboard: true,
+  showOkBtn: true,
+  showCancelBtn: true,
+  placement: "right",
+  okText: "\u4FDD\u5B58",
+  cancelText: "\u5173\u95ED"
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "flex h-full items-center"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "pr-12 flex items-start"
 };
+const _hoisted_3 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
-  props: basicProps,
   emits: ["cancel", "save", "register", "visible-change"],
   setup(__props, { emit: emits }) {
-    const props = __props;
-    const attrs = useAttrs();
-    const propsRef = ref(null);
-    const auths = DtCache.getLocal(CacheKey.AUTHS);
     const visibleRef = ref(false);
+    const propsRef = ref({});
     const getMergeProps = computed(() => {
-      return deepMerge(toRaw(props), unref(propsRef));
-    });
-    const getshowFooter = computed(() => {
-      const { footer } = unref(getProps);
-      if (isUnDef(footer))
-        return true;
-      const filterFooterLen = footer.filter((it) => {
-        if (it.auth && auths.indexOf(it.auth) !== -1 || !it.auth)
-          return true;
-        return false;
-      }).length;
-      return !!filterFooterLen;
+      return {
+        ...defaultProps,
+        ...unref(propsRef) || {}
+      };
     });
     const getProps = computed(() => {
       let opt = {
-        placement: "right",
-        ...unref(attrs),
-        ...unref(getMergeProps),
-        visible: unref(visibleRef),
+        ...defaultProps,
         bodyStyle: {
           padding: 0
         },
         style: {
           position: "absolute"
-        }
+        },
+        ...unref(getMergeProps)
       };
       const { getContainer, width } = opt;
       if (isUnDef(getContainer)) {
@@ -165,17 +167,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           width: width || "100%"
         };
       } else {
-        opt.width = width || "30%";
+        opt.width = width || "500px";
       }
       return opt;
     });
-    function handleSave() {
-      emits("save");
+    const loading = ref(false);
+    function setDrawerProps(props) {
+      propsRef.value = {
+        ...unref(propsRef),
+        ...props
+      };
     }
     async function handleCancel(e = null) {
-      const { closeFunc } = unref(getProps);
-      if (closeFunc && isFunction(closeFunc)) {
-        const isClose = await closeFunc();
+      const { beforeClose } = unref(getProps);
+      if (beforeClose && isFunction(beforeClose)) {
+        const isClose = await beforeClose();
         visibleRef.value = !isClose;
         return;
       }
@@ -183,66 +189,86 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (afterClose && isFunction(afterClose)) {
         afterClose();
       }
+      loading.value = false;
       visibleRef.value = false;
-      propsRef.value.visible = false;
       emits("cancel", e);
     }
-    function setDrawerProps(props2) {
-      propsRef.value = deepMerge(unref(propsRef) || {}, props2);
+    function getDrawerProps() {
+      return unref(getProps);
+    }
+    function handleSave() {
+      emits("save");
     }
     const drawerMethods = {
-      setDrawerProps
+      setDrawerProps,
+      getDrawerProps
     };
     const instance = getCurrentInstance();
-    instance && emits("register", drawerMethods, instance.uid);
+    if (instance) {
+      emits("register", drawerMethods, instance.uid, visibleRef);
+    }
     watch(
-      () => unref(propsRef).visible,
+      () => unref(propsRef).open,
       (v) => {
         emits("visible-change", v);
         visibleRef.value = v;
       },
       { immediate: false }
     );
+    watch(
+      () => unref(propsRef).loading,
+      (v) => {
+        loading.value = v;
+      },
+      { immediate: false }
+    );
     return (_ctx, _cache) => {
+      const _component_ASpin = Spin;
       const _component_ADrawer = Drawer;
       return openBlock(), createBlock(_component_ADrawer, mergeProps({
         class: "dt-drawer",
         onClose: handleCancel
-      }, unref(getProps), {
-        footerStyle: {
-          padding: unref(getshowFooter) ? "10px 16px" : "0"
-        }
+      }, unref(omit)(unref(getProps), ["title", "footer"]), {
+        open: unref(visibleRef),
+        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => isRef(visibleRef) ? visibleRef.value = $event : null)
       }), createSlots({
+        title: withCtx(() => [
+          !_ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("span", null, toDisplayString(unref(getProps).title), 1),
+            _ctx.$slots.titleExtra ? (openBlock(), createElementBlock("span", _hoisted_2, [
+              renderSlot(_ctx.$slots, "titleExtra")
+            ])) : createCommentVNode("", true)
+          ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "title")
+          ]))
+        ]),
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
+          createVNode(_component_ASpin, {
+            spinning: unref(loading),
+            tip: unref(getProps).loadingTip
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["spinning", "tip"])
         ]),
         _: 2
       }, [
-        !_ctx.$slots.title ? {
-          name: "title",
-          fn: withCtx(() => [
-            createVNode(_sfc_main$2, {
-              title: unref(getProps).title
-            }, {
-              titleToolbar: withCtx(() => [
-                renderSlot(_ctx.$slots, "titleToolbar")
-              ]),
-              _: 3
-            }, 8, ["title"])
-          ]),
-          key: "0"
-        } : {
-          name: "title",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "title")
-          ]),
-          key: "1"
-        },
-        unref(getshowFooter) ? {
+        renderList(Object.keys(unref(omit)(_ctx.$slots, "default")), (item) => {
+          return {
+            name: item,
+            fn: withCtx((data) => [
+              renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
+            ])
+          };
+        }),
+        !_ctx.$slots.footer ? {
           name: "footer",
           fn: withCtx(() => [
-            createVNode(_sfc_main$1, {
-              buttons: propsRef.value?.footer,
+            createVNode(unref(ModalFooter), {
+              authPrefix: unref(getProps).authPrefix,
+              buttons: unref(propsRef).footer,
               showSave: unref(getProps).showOkBtn,
               showCancel: unref(getProps).showCancelBtn,
               okText: unref(getProps).okText,
@@ -258,140 +284,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])
                 };
               })
-            ]), 1032, ["buttons", "showSave", "showCancel", "okText", "cancelText"])
+            ]), 1032, ["authPrefix", "buttons", "showSave", "showCancel", "okText", "cancelText"])
           ]),
-          key: "2"
+          key: "0"
         } : void 0
-      ]), 1040, ["footerStyle"]);
+      ]), 1040, ["open"]);
     };
   }
 });
-const orgDialogProp = reactive({});
-const cbTransfer = reactive({});
-const dataTransfer = reactive({});
-function useDrawerOut() {
-  const drawer = ref(null);
-  const loaded = ref(false);
-  const uid = ref("");
-  const { isProd } = useApp();
-  function register(drawerMethods, uuid) {
-    if (!getCurrentInstance()) {
-      throw new Error("useDrawer\u53EA\u80FD\u5728setup()\u6216\u8005\u51FD\u6570\u4E2D\u4F7F\u7528");
-    }
-    uid.value = uuid;
-    onUnmounted(() => {
-      if (unref(isProd)) {
-        drawer.value = null;
-        loaded.value = false;
-        dataTransfer[unref(uid)] = null;
-        orgDialogProp[unref(uid)] = null;
-        cbTransfer[unref(uid)] = (res) => {
-        };
-      }
-    });
-    if (unref(loaded) && drawerMethods === unref(drawer))
-      return;
-    drawer.value = drawerMethods;
-    loaded.value = true;
-  }
-  const getInstance = () => {
-    const instance = unref(drawer);
-    if (!instance) {
-      error("useDrawerOut \u5B9E\u4F8B\u672A\u5B9A\u4E49");
-    }
-    return instance;
-  };
-  const methods = {
-    setDrawerProps: (props) => {
-      getInstance()?.setDrawerProps(props);
-    },
-    openDrawer: (params = null, afterClose) => {
-      const id = unref(uid);
-      dataTransfer[id] = isObject(params) ? { ...toRaw(params) } : params;
-      getInstance()?.setDrawerProps({
-        defaultFullscreen: false,
-        ...orgDialogProp[id],
-        visible: true
-      });
-      cbTransfer[id] = (res) => {
-        if (afterClose && isFunction(afterClose)) {
-          afterClose(res);
-        }
-      };
-    },
-    closeDrawer: () => {
-      getInstance()?.setDrawerProps({ visible: false });
-    }
-  };
-  return [register, methods];
-}
-function useDrawer(props, setModalData) {
-  const drawerInstanceRef = ref(null);
-  const currentInstance = getCurrentInstance();
-  const uidRef = ref("");
-  const isFirstRegister = ref(true);
-  const { isProd } = useApp();
-  const getInstance = () => {
-    const instance = unref(drawerInstanceRef);
-    if (!instance) {
-      error("useDrawer \u5B9E\u4F8B\u672A\u5B9A\u4E49");
-    }
-    return instance;
-  };
-  function register(drawerInstance, uuid) {
-    if (unref(isProd)) {
-      drawerInstanceRef.value = null;
-    }
-    uidRef.value = uuid;
-    drawerInstanceRef.value = drawerInstance;
-    currentInstance?.emit("register", drawerInstance, uuid);
-    orgDialogProp[uuid] = toRaw(props);
-    drawerInstance.setDrawerProps(props);
-  }
-  watchEffect(() => {
-    if (!unref(uidRef))
-      return;
-    const data = dataTransfer[unref(uidRef)];
-    if (!setModalData || !isFunction(setModalData))
-      return;
-    nextTick(() => {
-      if (unref(isFirstRegister)) {
-        isFirstRegister.value = false;
-        return;
-      }
-      setModalData(data ?? {});
-      if (!data)
-        return;
-      if (props?.title && isFunction(props?.title)) {
-        let title = props.title(data);
-        methods.setDrawerProps({ title });
-      }
-    });
-  });
-  const methods = {
-    changeLoading: (loading = true) => {
-      getInstance()?.setDrawerProps({ loading });
-    },
-    closeDrawer: (rsp) => {
-      if (cbTransfer[unref(uidRef)])
-        cbTransfer[unref(uidRef)](rsp);
-      getInstance()?.setDrawerProps({ visible: false });
-    },
-    setDrawerProps: (props2) => {
-      getInstance()?.setDrawerProps(props2);
-    }
-  };
-  return [register, methods];
-}
-const withInstall = (comp) => {
-  comp.install = (app) => {
-    app.component(comp.name, comp);
-  };
-  return comp;
-};
-const DtDrawer = withInstall(_sfc_main);
 export {
-  DtDrawer,
+  _sfc_main as DtDrawer,
   useDrawer,
   useDrawerOut
 };

package/es/components/drawer/src/components/DrawerFooter.d.ts

@@ -1,7 +1,9 @@
-import { ButtonProps } from '../../../form/src/types/form.type';
-import { PropType } from 'vue';
-declare const _sfc_main: import("vue").DefineComponent<{
-    buttons: PropType<ButtonProps[]>;
+import { ButtonProps } from '../../../form';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    authPrefix: {
+        type: StringConstructor;
+    };
+    buttons: globalThis.PropType<ButtonProps[]>;
     showSave: {
         type: BooleanConstructor;
         default: boolean;
@@ -16,22 +18,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     cancelText: {
         type: StringConstructor;
     };
-}, {
-    t: {
-        (key: string): string;
-        (key: string, locale: string): string;
-        (key: string, locale: string, list: unknown[]): string;
-        (key: string, locale: string, named: Record<string, unknown>): string;
-        (key: string, list: unknown[]): string;
-        (key: string, named: Record<string, unknown>): string;
-    };
-    emits: (event: "handleSave" | "handleCancel", ...args: any[]) => void;
-    props: any;
-    buttonList: import("vue").ComputedRef<ButtonProps[]>;
-    handleMethod: (item: ButtonProps) => void;
-    readonly DtFormButtons: 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<import("vue").ExtractPropTypes<{}>>, {}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("handleSave" | "handleCancel")[], "handleSave" | "handleCancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    buttons: PropType<ButtonProps[]>;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("handleSave" | "handleCancel")[], "handleSave" | "handleCancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    authPrefix: {
+        type: StringConstructor;
+    };
+    buttons: globalThis.PropType<ButtonProps[]>;
     showSave: {
         type: BooleanConstructor;
         default: boolean;
@@ -52,5 +43,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     showSave: boolean;
     showCancel: boolean;
+}, {}>, {
+    appendFooter?(_: {}): any;
 }>;
-export default _sfc_main;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/drawer/src/hooks/useDrawer.d.ts

@@ -1,3 +1,3 @@
-import { DrawerProps, UseDrawerInnerReturnType, UseDrawerReturnType } from "../types/index.type";
+import { DrawerProps, UseDrawerInnerReturnType, UseDrawerReturnType } from '../type/drawer.type';
 export declare function useDrawerOut(): UseDrawerReturnType;
-export declare function useDrawer(props: DrawerProps, setModalData?: (params: any) => void): UseDrawerInnerReturnType;
+export declare function useDrawer(props: DrawerProps, setDrawerData?: (params: any) => void): UseDrawerInnerReturnType;