@dt-frames/ui 2.0.23 → 3.0.1

package/es/components/curd/index.js

@@ -1,143 +1,39 @@
-import { defineComponent, toRaw, openBlock, createBlock, unref, withCtx, renderSlot, ref, useSlots, h, createVNode, mergeProps, isVNode } from "vue";
-import { useForm, DtForm } from "../form";
-import { useModal, DtModal as DtModal$1, useModalOut } from "../modal";
-import { omit } from "lodash-es";
-import { useMessage, useI18n, isFunction, error } from "@dt-frames/core";
-const basicProps = {
-  t: {
-    type: String
-  },
-  title: {
-    type: Object
-  },
-  width: {
-    type: [String, Number],
-    default: "50%"
-  },
-  schemas: {
-    type: Array,
-    default: () => []
-  },
-  footer: {
-    type: Array,
-    default: void 0
-  },
-  authPrefix: {
-    type: String
-  },
-  showFullscreen: {
-    type: Boolean,
-    default: true
-  },
-  showClosable: {
-    type: Boolean,
-    default: true
-  },
-  formProps: {
-    type: Object,
-    default: () => ({})
-  },
-  primaryKey: {
-    type: String,
-    default: "id"
-  },
-  afterOpened: {
-    type: Function,
-    default: (modalMethods) => ({})
-  },
-  onSave: {
-    type: Function,
-    default: () => ({})
-  },
-  onDeletes: {
-    type: Function,
-    default: (keys) => ({})
-  },
-  onQueryById: {
-    type: Function,
-    default: (id) => ({})
-  },
-  onRegister: {
-    type: Function
-  },
-  registerInstance: {
-    type: Function
-  }
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Curd",
-  props: basicProps,
-  setup(__props) {
-    const props = __props;
-    const [registerDialog, modalMethods] = useModal({
-      ...omit(toRaw(props), [
-        "curd",
-        "formProps",
-        "schemas"
-      ]),
-      wrapClassName: "dt-curd-modal__wrap",
-      destroyOnClose: true,
-      maskClosable: false
-    }, () => {
-      props.afterOpened(modalMethods);
-    });
-    function handleSave() {
-      props?.onSave();
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DtModal$1), {
-        onRegister: unref(registerDialog),
-        onSave: _cache[0] || (_cache[0] = ($event) => handleSave())
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["onRegister"]);
-    };
-  }
-});
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const DtModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "D:/dt/dt-frame-front/dt-frames/frames/packages/ui/src/components/curd/src/components/Curd.vue"]]);
+import { ref, useSlots, unref, h, createVNode, mergeProps, isVNode } from "vue";
+import { useI18n, isFunction, message, confirm, error } from "@dt-frames/core";
+import { useModalOut, DtModal } from "../modal";
+import { DtForm } from "../form";
+import { useForm } from "@dt-frames/ui";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-function useCurd(curdOpt) {
+function useCurd(opt) {
   const [register, {
     openModal,
     closeModal,
     setModalProps
-  }] = useModalOut();
-  const {
-    confirm,
-    message
-  } = useMessage();
+  }, visiabled] = useModalOut();
   const {
     t
   } = useI18n("UI");
   const {
     formProps,
-    schemas
-  } = curdOpt;
-  const oriTitle = isFunction(curdOpt.title) ? curdOpt.title() : unref(curdOpt.title);
-  const title = ref(oriTitle);
+    schemas,
+    title: _title,
+    titlePrefix = true
+  } = opt;
   const [registerForm, curdFormMethods] = useForm({
     ...formProps || {},
     schemas,
     mode: "dialog"
   });
+  const oriTitle = isFunction(_title) ? _title() : _title;
+  const title = ref(oriTitle);
   const DtCurdModal = () => {
     const slots = useSlots();
-    return h(createVNode("div", {
+    return unref(visiabled) ? h(createVNode("div", {
       "class": "dt-curd-modal"
-    }, [createVNode(DtModal, mergeProps(curdOpt, {
-      "title": title,
+    }, [createVNode(DtModal, mergeProps(opt, {
+      "title": unref(title),
       "onRegister": register
     }), {
       default: () => [createVNode(DtForm, {
@@ -145,31 +41,61 @@ function useCurd(curdOpt) {
       }, _isSlot(slots) ? slots : {
         default: () => [slots]
       })]
-    })]));
+    })])) : "";
   };
   function openAddDialog() {
-    title.value = t("ADD") + " - " + oriTitle;
-    openModal();
+    const {
+      afterClose
+    } = opt;
+    title.value = (titlePrefix ? t("ADD") + " - " : "") + unref(oriTitle);
+    openModal({}, (data) => {
+      afterClose && afterClose({
+        data,
+        type: "ADD"
+      });
+    });
   }
   function del(row) {
     const {
       primaryKey = "id",
       onDeletes
-    } = curdOpt;
+    } = opt;
     if (onDeletes && isFunction(onDeletes)) {
       onDeletes([row[primaryKey]]);
     }
   }
-  function openUpdateDialog(row) {
+  function openEditDialog(row) {
     const {
       primaryKey = "id",
-      onQueryById
-    } = curdOpt;
-    title.value = t("EDIT") + " - " + oriTitle;
-    openModal();
+      onQueryById,
+      afterClose,
+      defaultFormValue = {},
+      formProps: formProps2 = {}
+    } = opt;
+    title.value = (titlePrefix ? t("EDIT") + " - " : "") + oriTitle;
+    openModal({
+      ...opt,
+      title
+    }, (data) => {
+      afterClose && afterClose({
+        data,
+        type: "EDIT"
+      });
+    });
+    const model = {
+      ...defaultFormValue,
+      ...formProps2.model ?? {}
+    };
     if (onQueryById && isFunction(onQueryById)) {
       onQueryById(row[primaryKey]).then((rsp) => {
-        curdFormMethods.setFormValues(rsp);
+        curdFormMethods.setFormValues({
+          ...rsp,
+          ...model
+        });
+      });
+    } else {
+      curdFormMethods.setFormValues({
+        ...model
       });
     }
   }
@@ -179,9 +105,9 @@ function useCurd(curdOpt) {
       return;
     }
     const {
-      curd
-    } = curdOpt;
-    if (curd && curd.onDeletes && isFunction(curd.onDeletes)) {
+      onDeletes
+    } = opt;
+    if (onDeletes && isFunction(onDeletes)) {
       confirm({
         title: t("MULTIFY_DELETE_CONFIRM"),
         content: t("CONFIRM_MULTIFY_DELETE", {
@@ -189,7 +115,7 @@ function useCurd(curdOpt) {
         }),
         iconType: "warning",
         onOk() {
-          curd.onDeletes(ids);
+          onDeletes(ids);
         }
       });
     } else {
@@ -199,17 +125,16 @@ function useCurd(curdOpt) {
   const instance = {
     openAddDialog,
     del,
-    openUpdateDialog,
+    openEditDialog,
     dels,
     closeModal,
     setModalProps,
-    curdFormMethods
-  };
-  curdOpt.registerInstance && curdOpt.registerInstance(instance);
-  return {
-    DtCurdModal,
-    ...instance
+    beforeSave: opt.beforeSave,
+    afterClose: opt.afterClose,
+    ...curdFormMethods
   };
+  opt.registerInstance && opt.registerInstance(instance);
+  return [DtCurdModal, instance];
 }
 export {
   useCurd

package/es/components/curd/src/components/props.d.ts

@@ -0,0 +1,53 @@
+import { ButtonProps, FormSchema } from '../../../form';
+import { Key } from 'ant-design-vue/es/table/interface';
+import { CurdActionType } from './types/curd.type';
+export declare const basicProps: {
+    t: {
+        type: StringConstructor;
+    };
+    title: {
+        type: globalThis.PropType<String | globalThis.ComputedRef<String> | globalThis.Ref<String> | ((data: Recordable) => String)>;
+    };
+    width: {
+        type: globalThis.PropType<String | Number>;
+        default: string;
+    };
+    schemas: {
+        type: globalThis.PropType<FormSchema[]>;
+        default: () => any[];
+    };
+    footer: {
+        type: globalThis.PropType<ButtonProps[]>;
+        default: any;
+    };
+    authPrefix: {
+        type: StringConstructor;
+    };
+    showFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    primaryKey: {
+        type: globalThis.PropType<String | Number>;
+        default: string;
+    };
+    onSave: {
+        type: globalThis.PropType<() => void>;
+        default: () => {};
+    };
+    onDeletes: {
+        type: globalThis.PropType<(keys: Key[]) => void>;
+        default: (keys: Key[]) => {};
+    };
+    onQueryById: {
+        type: globalThis.PropType<(id: Key) => Promise<any>>;
+        default: (id: Key) => {};
+    };
+    registerInstance: {
+        type: globalThis.PropType<(instance: CurdActionType) => void>;
+    };
+};

package/es/components/curd/src/components/types/curd.type.d.ts

@@ -0,0 +1,13 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { Recordable } from '@dt-frames/core';
+import { basicProps } from '../props';
+import { FormActionType } from '../../../../form';
+export type CurdActionType = {
+    openAddDialog: () => void;
+    del: (row: Recordable) => void;
+    dels: (ids: PropType<String | Number>[]) => void;
+    openUpdateDialog: (row: Recordable) => void;
+    closeModal: () => void;
+    setModalProps: (props: Partial<ExtractPropTypes<typeof basicProps>>) => void;
+    curdFormMethods: FormActionType;
+};

package/es/components/curd/src/hooks/useCurd.d.ts

@@ -1,110 +1,3 @@
-import { Recordable } from "@dt-frames/core";
-import { ExtractPropTypes, PropType, FunctionalComponent } from "vue";
-import { basicProps } from "../props";
-export declare function useCurd(curdOpt: Partial<ExtractPropTypes<typeof basicProps>>): {
-    openAddDialog: () => void;
-    del: (row: Recordable) => void;
-    openUpdateDialog: (row: Recordable) => void;
-    dels: (ids?: PropType<String | Number>[]) => void;
-    closeModal: () => void;
-    setModalProps: (props: Partial<ExtractPropTypes<{
-        t: {
-            type: StringConstructor;
-        };
-        visible: {
-            type: BooleanConstructor;
-        };
-        closable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        destroyOnClose: {
-            type: BooleanConstructor;
-        };
-        scrollTop: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        height: {
-            type: NumberConstructor;
-        };
-        minHeight: {
-            type: NumberConstructor;
-        };
-        width: {
-            type: PropType<String | Number>;
-        };
-        draggable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        defaultFullscreen: {
-            type: BooleanConstructor;
-        };
-        canFullscreen: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        title: {
-            type: PropType<String | import("vue").ComputedRef<String> | ((data: Recordable<any>) => String)>;
-        };
-        loading: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        loadingTip: {
-            type: StringConstructor;
-            default: string;
-        };
-        useWrapper: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        wrapClassName: {
-            type: StringConstructor;
-        };
-        zIndex: {
-            type: NumberConstructor;
-        };
-        centered: {
-            type: BooleanConstructor;
-        };
-        showOkBtn: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showCancelBtn: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        okText: {
-            type: StringConstructor;
-        };
-        cancelText: {
-            type: StringConstructor;
-        };
-        mask: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        maskClosable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        keyboard: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        maskStyle: PropType<import("vue").CSSProperties>;
-        footer: {
-            type: PropType<import('../../../form').ButtonProps[]>;
-        };
-        bodyStyle: PropType<import("vue").CSSProperties>;
-        wrapperProps: ObjectConstructor;
-        getContainer: PropType<() => any>;
-        closeFunc: PropType<() => Promise<boolean>>;
-        afterClose: FunctionConstructor;
-    }>>) => void;
-    curdFormMethods: import('../../../form').FormActionType;
-    DtCurdModal: FunctionalComponent<{}, {}>;
-};
+import { FunctionalComponent } from 'vue';
+import { CurdActionType, CurdType } from '../types/curd.type';
+export declare function useCurd(opt: CurdType): (CurdActionType | FunctionalComponent<{}, {}, any>)[];