easybill-ui 1.4.0 → 1.4.2

package/dist/components/FormDialog/src/FormDialog.vue.d.ts

@@ -0,0 +1,247 @@
+import { CurdGroupFormSchema } from '../../../index.ts';
+import { Component, PropType, Ref } from 'vue';
+import { Fields, FormSchema } from '../../CurdForm';
+import { FormDialogHandleOk } from './types';
+declare const _default: import('vue').DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    remove: {
+        type: PropType<() => void>;
+        default: null;
+    };
+    formSchema: {
+        type: PropType<FormSchema>;
+        default: () => null;
+    };
+    groupSchema: {
+        type: PropType<CurdGroupFormSchema>;
+        default: () => null;
+    };
+    fields: {
+        type: PropType<Fields>;
+        default: () => {};
+    };
+    setForm: {
+        type: PropType<(form: Ref<Fields>) => void>;
+        default: null;
+    };
+    handleOk: {
+        type: PropType<FormDialogHandleOk>;
+        default: null;
+    };
+    handleClose: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    stepProps: {
+        type: PropType<Fields>;
+        default: () => {};
+    };
+    extendContext: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    confirmBtnText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    cancelBtnText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    mode: {
+        type: PropType<"dialog" | "drawer">;
+        default: string;
+    };
+    stepComponent: {
+        type: PropType<Component>;
+        default: null;
+    };
+    footerComponent: {
+        type: PropType<Component>;
+        default: null;
+    };
+}, {
+    onOk: () => void;
+    onCancel: () => void;
+    onBeforeClose: () => void;
+    curdFormRef: Ref<any>;
+    stepList: import('vue').ComputedRef<import('./hooks').StepItem[]>;
+    form: Ref<Fields>;
+    prev: () => void;
+    next: (onValidateFail?: () => void) => boolean;
+    t: import('../../../index.ts').Translator;
+    extendContexts: {
+        loadOptions: (prop: string, config?: unknown) => void;
+    };
+    confirmBtnTextLabel: import('vue').ComputedRef<string>;
+    cancelBtnTextLabel: import('vue').ComputedRef<string>;
+    componentName: import('vue').ComputedRef<"el-drawer" | "el-dialog">;
+    containerProps: import('vue').ComputedRef<{
+        size: {};
+        direction: {};
+        modelValue: boolean;
+        title: string;
+        "close-on-click-modal": boolean;
+        "before-close": () => void;
+    } | {
+        width: {};
+        modelValue: boolean;
+        title: string;
+        "close-on-click-modal": boolean;
+        "before-close": () => void;
+    }>;
+    isGroupMode: import('vue').ComputedRef<boolean>;
+    isFormMode: import('vue').ComputedRef<boolean>;
+    hasMultipleSteps: import('vue').ComputedRef<boolean>;
+    activeStep: Ref<number>;
+    groupFormRef: Ref<Record<number, import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: PropType<Record<string, unknown>>;
+            default: () => {};
+        };
+        schema: {
+            type: PropType<CurdGroupFormSchema>;
+            default: () => {};
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onLoadOptions?: ((...args: any[]) => any) | undefined;
+    }, {
+        loadOptions: (prop: string, config?: unknown) => void;
+        validate: (callback: (valid: boolean) => void) => void;
+    }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        change: (...args: any[]) => void;
+        "update:modelValue": (...args: any[]) => void;
+        loadOptions: (...args: any[]) => void;
+    }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: PropType<Record<string, unknown>>;
+            default: () => {};
+        };
+        schema: {
+            type: PropType<CurdGroupFormSchema>;
+            default: () => {};
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onLoadOptions?: ((...args: any[]) => any) | undefined;
+    }, {
+        modelValue: Record<string, unknown>;
+        schema: CurdGroupFormSchema;
+    }, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: PropType<Record<string, unknown>>;
+            default: () => {};
+        };
+        schema: {
+            type: PropType<CurdGroupFormSchema>;
+            default: () => {};
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onLoadOptions?: ((...args: any[]) => any) | undefined;
+    }, {
+        loadOptions: (prop: string, config?: unknown) => void;
+        validate: (callback: (valid: boolean) => void) => void;
+    }, {}, {}, {}, {
+        modelValue: Record<string, unknown>;
+        schema: CurdGroupFormSchema;
+    }>>>;
+    canPrev: import('vue').ComputedRef<boolean>;
+    canNext: import('vue').ComputedRef<boolean>;
+    isLastStep: import('vue').ComputedRef<boolean>;
+    validateCurrentStep: (callback: (valid: boolean) => void) => void;
+    visible: Ref<boolean>;
+    confirmLoading: Ref<boolean>;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    remove: {
+        type: PropType<() => void>;
+        default: null;
+    };
+    formSchema: {
+        type: PropType<FormSchema>;
+        default: () => null;
+    };
+    groupSchema: {
+        type: PropType<CurdGroupFormSchema>;
+        default: () => null;
+    };
+    fields: {
+        type: PropType<Fields>;
+        default: () => {};
+    };
+    setForm: {
+        type: PropType<(form: Ref<Fields>) => void>;
+        default: null;
+    };
+    handleOk: {
+        type: PropType<FormDialogHandleOk>;
+        default: null;
+    };
+    handleClose: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    stepProps: {
+        type: PropType<Fields>;
+        default: () => {};
+    };
+    extendContext: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    confirmBtnText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    cancelBtnText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    mode: {
+        type: PropType<"dialog" | "drawer">;
+        default: string;
+    };
+    stepComponent: {
+        type: PropType<Component>;
+        default: null;
+    };
+    footerComponent: {
+        type: PropType<Component>;
+        default: null;
+    };
+}>>, {
+    title: string;
+    fields: Fields;
+    remove: () => void;
+    formSchema: FormSchema;
+    extendContext: Record<string, any>;
+    mode: "dialog" | "drawer";
+    groupSchema: CurdGroupFormSchema;
+    setForm: (form: Ref<Fields>) => void;
+    handleOk: FormDialogHandleOk;
+    handleClose: Function;
+    stepProps: Fields;
+    confirmBtnText: string;
+    cancelBtnText: string;
+    stepComponent: Component;
+    footerComponent: Component;
+}, {}>;
+export default _default;

package/dist/components/FormDialog/src/FormDialog.vue.js

@@ -0,0 +1,117 @@
+import M from "./FormDialog.vue2.js";
+import { resolveComponent as a, resolveDirective as V, createBlock as t, openBlock as o, resolveDynamicComponent as g, normalizeProps as B, guardReactiveProps as $, withCtx as s, createCommentVNode as l, withDirectives as k, mergeProps as h, createElementBlock as d, Fragment as y, renderList as v, createVNode as D, vShow as P, createTextVNode as u, toDisplayString as f } from "vue";
+import F from "../../../_virtual/_plugin-vue_export-helper.js";
+const G = { class: "form-dialog-content" }, N = {
+  key: 1,
+  class: "dialog-footer"
+};
+function T(e, n, w, R, z, O) {
+  const b = a("el-step"), C = a("el-steps"), L = a("curd-form"), S = a("curd-group-form"), p = a("el-button"), c = V("loading");
+  return o(), t(g(e.componentName), B($(e.containerProps)), {
+    footer: s(() => [
+      e.footerComponent ? (o(), t(g(e.footerComponent), { key: 0 })) : e.handleOk ? (o(), d("span", N, [
+        e.cancelBtnTextLabel ? (o(), t(p, {
+          key: 0,
+          disabled: e.confirmLoading,
+          type: "default",
+          onClick: n[2] || (n[2] = (r) => e.onCancel())
+        }, {
+          default: s(() => [
+            u(f(e.cancelBtnTextLabel), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : l("", !0),
+        e.isGroupMode && e.hasMultipleSteps && e.canPrev ? (o(), t(p, {
+          key: 1,
+          disabled: e.confirmLoading,
+          type: "primary",
+          plain: "",
+          onClick: n[3] || (n[3] = (r) => e.prev())
+        }, {
+          default: s(() => [
+            u(f(e.t("el.formDialog.preStep")), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : l("", !0),
+        e.isGroupMode && e.hasMultipleSteps && e.canNext ? (o(), t(p, {
+          key: 2,
+          disabled: e.confirmLoading,
+          type: "primary",
+          plain: "",
+          onClick: n[4] || (n[4] = (r) => e.next())
+        }, {
+          default: s(() => [
+            u(f(e.t("el.formDialog.nextStep")), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : l("", !0),
+        (!e.isGroupMode || e.isLastStep) && e.confirmBtnTextLabel ? (o(), t(p, {
+          key: 3,
+          disabled: e.confirmLoading,
+          type: "primary",
+          loading: e.confirmLoading,
+          onClick: e.onOk
+        }, {
+          default: s(() => [
+            u(f(e.confirmBtnTextLabel), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled", "loading", "onClick"])) : l("", !0)
+      ])) : l("", !0)
+    ]),
+    default: s(() => [
+      e.isGroupMode && e.hasMultipleSteps && !e.stepComponent ? (o(), t(C, h({
+        key: 0,
+        active: e.activeStep,
+        "align-center": "",
+        style: { "margin-bottom": "20px", position: "sticky", top: "0", "z-index": "2000", background: "var(--el-bg-color)" }
+      }, e.stepProps), {
+        default: s(() => [
+          (o(!0), d(y, null, v(e.stepList, (r, i) => (o(), t(b, {
+            key: i,
+            title: r.name
+          }, null, 8, ["title"]))), 128))
+        ]),
+        _: 1
+      }, 16, ["active"])) : l("", !0),
+      e.stepComponent ? (o(), t(g(e.stepComponent), {
+        key: 1,
+        step: e.activeStep,
+        steps: e.stepList
+      }, null, 8, ["step", "steps"])) : l("", !0),
+      k((o(), d("div", G, [
+        e.isFormMode ? (o(), t(L, {
+          key: 0,
+          ref: "curdFormRef",
+          modelValue: e.form,
+          "onUpdate:modelValue": n[0] || (n[0] = (r) => e.form = r),
+          fields: e.fields,
+          "form-schema": e.formSchema,
+          "extend-context": e.extendContexts
+        }, null, 8, ["modelValue", "fields", "form-schema", "extend-context"])) : e.isGroupMode ? (o(!0), d(y, { key: 1 }, v(e.stepList, (r, i) => k((o(), d("div", {
+          key: i,
+          class: "form-dialog-step"
+        }, [
+          D(S, {
+            ref_for: !0,
+            ref: (m) => m && (e.groupFormRef[i] = m),
+            modelValue: e.form,
+            "onUpdate:modelValue": n[1] || (n[1] = (m) => e.form = m),
+            schema: r.schema,
+            fields: e.fields,
+            "extend-context": e.extendContexts
+          }, null, 8, ["modelValue", "schema", "fields", "extend-context"])
+        ])), [
+          [P, e.activeStep === i]
+        ])), 128)) : l("", !0)
+      ])), [
+        [c, e.confirmLoading]
+      ])
+    ]),
+    _: 1
+  }, 16);
+}
+const q = /* @__PURE__ */ F(M, [["render", T]]);
+export {
+  q as default
+};

package/dist/components/FormDialog/src/FormDialog.vue2.js

@@ -0,0 +1,191 @@
+import { CurdForm as R } from "../../CurdForm/index.js";
+import { useLocale as V } from "../../../utils/hooks/useLocal.js";
+import { defineComponent as z, useAttrs as G, ref as w, reactive as B, computed as i, provide as A, toRefs as E } from "vue";
+import { useStepList as $ } from "./hooks/useStepList.js";
+import { useStepNavigation as q } from "./hooks/useStepNavigation.js";
+import H from "../../CurdGroupForm/src/CurdGroupForm.vue.js";
+const X = z({
+  name: "FormDialog",
+  components: {
+    CurdForm: R,
+    CurdGroupForm: H
+  },
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    remove: {
+      // 移除模态框
+      type: Function,
+      default: null
+    },
+    formSchema: {
+      // 表单项
+      type: Object,
+      default: () => null
+    },
+    groupSchema: {
+      // 分组表单项
+      type: Object,
+      default: () => null
+    },
+    fields: {
+      // 默认值，一般编辑时传入
+      type: Object,
+      default: () => ({})
+    },
+    setForm: {
+      type: Function,
+      default: null
+    },
+    // 点击确定
+    handleOk: {
+      type: Function,
+      default: null
+    },
+    // 关闭的回调,通过类型判断是点取消按钮还是右上角关闭按钮
+    handleClose: {
+      type: Function,
+      default: null
+    },
+    stepProps: {
+      type: Object,
+      default: () => ({})
+    },
+    extendContext: {
+      type: Object,
+      default: () => ({})
+    },
+    confirmBtnText: {
+      type: String,
+      default: void 0
+    },
+    cancelBtnText: {
+      type: String,
+      default: void 0
+    },
+    mode: {
+      // 容器组件类型: 'dialog' | 'drawer'
+      type: String,
+      default: "dialog"
+    },
+    stepComponent: {
+      type: Object,
+      default: null
+    },
+    footerComponent: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(e) {
+    const c = G(), d = w(), r = w({}), t = B({
+      visible: !0,
+      confirmLoading: !1
+    }), { t: m } = V(), s = i(() => !!e.groupSchema), u = i(() => !!e.formSchema && !s.value), { stepList: h, stepCount: C, hasMultipleSteps: k } = $(i(() => e.groupSchema)), { activeStep: v, groupFormRef: y, canPrev: b, canNext: x, isLastStep: O, prev: S, next: F, validateCurrentStep: f } = q(C), L = () => {
+      t.confirmLoading = !0, (() => {
+        var n;
+        return u.value ? ((n = d.value) == null ? void 0 : n.validate().then(() => !0).catch(() => !1)) ?? Promise.resolve(!0) : new Promise((a) => {
+          f((l) => a(l));
+        });
+      })().then(async (n) => {
+        var l;
+        if (!n) {
+          t.confirmLoading = !1;
+          return;
+        }
+        const a = await Promise.resolve((l = e.handleOk) == null ? void 0 : l.call(e, r.value, t)).finally(() => t.confirmLoading = !1);
+        (typeof a > "u" || a) && (t.visible = !1, P());
+      }).catch(() => {
+        t.confirmLoading = !1;
+      });
+    }, P = () => {
+      t.visible = !1, e.handleClose && e.handleClose("cancel"), setTimeout(() => {
+        e.remove && e.remove();
+      }, 300);
+    }, g = () => {
+      t.visible = !1, e.handleClose && e.handleClose("close"), setTimeout(() => {
+        e.remove && e.remove();
+      }, 300);
+    }, T = (o, n) => {
+      var a;
+      u.value ? (a = d.value) == null || a.loadOptions(o, n) : s.value && Object.values(y.value).forEach((l) => {
+        l == null || l.loadOptions(o, n);
+      });
+    }, D = {
+      loadOptions: T,
+      ...e.extendContext
+    };
+    e.setForm && e.setForm(r);
+    const j = i(() => e.confirmBtnText ?? m("el.formDialog.confirm")), p = i(() => e.cancelBtnText ?? m("el.formDialog.cancel")), _ = i(() => e.mode === "drawer" ? "el-drawer" : "el-dialog"), M = i(() => {
+      const o = {
+        modelValue: t.visible,
+        title: e.title,
+        "close-on-click-modal": !1,
+        "before-close": g,
+        ...c
+      };
+      return e.mode === "drawer" ? {
+        ...o,
+        size: c.size || c.width || "60%",
+        direction: c.direction || "rtl"
+      } : {
+        ...o,
+        width: c.width || "60%"
+      };
+    }), N = B({
+      form: r,
+      state: t,
+      stepList: h,
+      activeStep: v,
+      loadOptions: T,
+      prev: S,
+      next: F,
+      goTo: (o) => {
+        o >= 0 && o < C.value && f((n) => {
+          n && (v.value = o);
+        });
+      },
+      close: g,
+      handleOk: L,
+      validateCurrentStep: f,
+      canPrev: b,
+      canNext: x,
+      isLastStep: O,
+      isGroupMode: s,
+      isFormMode: u,
+      confirmBtnTextLabel: j,
+      cancelBtnTextLabel: p
+    });
+    return A("formDialogContext", N), {
+      ...E(t),
+      onOk: L,
+      onCancel: P,
+      onBeforeClose: g,
+      curdFormRef: d,
+      stepList: h,
+      form: r,
+      prev: S,
+      next: F,
+      t: m,
+      extendContexts: D,
+      confirmBtnTextLabel: j,
+      cancelBtnTextLabel: p,
+      componentName: _,
+      containerProps: M,
+      isGroupMode: s,
+      isFormMode: u,
+      hasMultipleSteps: k,
+      activeStep: v,
+      groupFormRef: y,
+      canPrev: b,
+      canNext: x,
+      isLastStep: O,
+      validateCurrentStep: f
+    };
+  }
+});
+export {
+  X as default
+};

package/dist/components/FormDialog/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useStepList, type StepItem } from './useStepList';
+export { useStepNavigation } from './useStepNavigation';

package/dist/components/FormDialog/src/hooks/useStepList.d.ts

@@ -0,0 +1,14 @@
+import { ComputedRef } from 'vue';
+import { CurdGroupFormSchema } from '../../../CurdGroupForm/types';
+export interface StepItem {
+    name: string;
+    stepIndex?: number;
+    schema: {
+        items: CurdGroupFormSchema["items"];
+    };
+}
+export declare function useStepList(groupSchema: ComputedRef<CurdGroupFormSchema | null>): {
+    stepList: ComputedRef<StepItem[]>;
+    stepCount: ComputedRef<number>;
+    hasMultipleSteps: ComputedRef<boolean>;
+};

package/dist/components/FormDialog/src/hooks/useStepList.js

@@ -0,0 +1,27 @@
+import { computed as o } from "vue";
+function m(p) {
+  const n = o(() => {
+    var r;
+    if (!((r = p.value) != null && r.items)) return [];
+    const s = /* @__PURE__ */ new Map();
+    return p.value.items.forEach((t) => {
+      const e = t.step || "其他";
+      s.has(e) || s.set(e, {
+        name: e,
+        stepIndex: t.stepIndex,
+        schema: { items: [] }
+      }), s.get(e).schema.items.push(t);
+    }), Array.from(s.values()).sort((t, e) => {
+      const a = t.stepIndex ?? 1 / 0, c = e.stepIndex ?? 1 / 0;
+      return a - c;
+    });
+  }), i = o(() => n.value.length), u = o(() => n.value.length > 1);
+  return {
+    stepList: n,
+    stepCount: i,
+    hasMultipleSteps: u
+  };
+}
+export {
+  m as useStepList
+};

package/dist/components/FormDialog/src/hooks/useStepNavigation.d.ts

@@ -0,0 +1,75 @@
+import { Ref } from 'vue';
+export declare function useStepNavigation(stepCount: Ref<number>, onStepChange?: (step: number) => void): {
+    activeStep: Ref<number>;
+    groupFormRef: Ref<Record<number, import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+            default: () => {};
+        };
+        schema: {
+            type: import('vue').PropType<import('../../../CurdGroupForm').CurdGroupFormSchema>;
+            default: () => {};
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onLoadOptions?: ((...args: any[]) => any) | undefined;
+    }, {
+        loadOptions: (prop: string, config?: unknown) => void;
+        validate: (callback: (valid: boolean) => void) => void;
+    }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        change: (...args: any[]) => void;
+        "update:modelValue": (...args: any[]) => void;
+        loadOptions: (...args: any[]) => void;
+    }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+            default: () => {};
+        };
+        schema: {
+            type: import('vue').PropType<import('../../../CurdGroupForm').CurdGroupFormSchema>;
+            default: () => {};
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onLoadOptions?: ((...args: any[]) => any) | undefined;
+    }, {
+        modelValue: Record<string, unknown>;
+        schema: import('../../../CurdGroupForm').CurdGroupFormSchema;
+    }, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+            default: () => {};
+        };
+        schema: {
+            type: import('vue').PropType<import('../../../CurdGroupForm').CurdGroupFormSchema>;
+            default: () => {};
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onLoadOptions?: ((...args: any[]) => any) | undefined;
+    }, {
+        loadOptions: (prop: string, config?: unknown) => void;
+        validate: (callback: (valid: boolean) => void) => void;
+    }, {}, {}, {}, {
+        modelValue: Record<string, unknown>;
+        schema: import('../../../CurdGroupForm').CurdGroupFormSchema;
+    }>>>;
+    canPrev: import('vue').ComputedRef<boolean>;
+    canNext: import('vue').ComputedRef<boolean>;
+    isLastStep: import('vue').ComputedRef<boolean>;
+    setStep: (newStep: number) => void;
+    prev: () => void;
+    next: (onValidateFail?: () => void) => boolean;
+    validateCurrentStep: (callback: (valid: boolean) => void) => void;
+    validateCurrentStepAsync: () => Promise<boolean>;
+};