vft 0.0.144 → 0.0.145

package/es/components/super-form/super-form.vue2.js

@@ -1,5 +1,4 @@
-import { defineComponent as et, useAttrs as st, reactive as ut, ref as n, computed as y, unref as o, watch as h, nextTick as ft, onMounted as ct, resolveComponent as dt, openBlock as l, createBlock as c, mergeProps as v, withKeys as Bt, withCtx as g, normalizeProps as d, renderSlot as _, createElementBlock as yt, Fragment as ht, renderList as Y, createSlots as vt, guardReactiveProps as Z, createVNode as gt, createCommentVNode as F } from "vue";
-import { cloneDeep as Ft, pick as bt, deepMerge as Ct } from "@vft/utils";
+import { defineComponent as et, useAttrs as st, reactive as ut, ref as n, computed as h, unref as o, watch as y, nextTick as ft, onMounted as ct, resolveComponent as dt, openBlock as l, createBlock as c, mergeProps as v, withKeys as Bt, withCtx as g, normalizeProps as d, renderSlot as O, createElementBlock as ht, Fragment as yt, renderList as Y, createSlots as vt, guardReactiveProps as Z, createVNode as gt, createCommentVNode as F } from "vue";
 import "../alert/index.js";
 import "../avatar/index.js";
 import "../backtop/index.js";
@@ -14,6 +13,7 @@ import "../collapse-transition/index.js";
 import "../color-picker/index.js";
 import "../config-provider/index.js";
 import "../container/index.js";
+import { cloneDeep as Ft, pick as bt, deepMerge as St } from "@vft/utils";
 import "../context-menu/context-menu.vue2.js";
 import "../date-picker/index.js";
 import "../date-time-select/index.js";
@@ -25,7 +25,7 @@ import "../dropdown/index.js";
 import "../empty/index.js";
 import "../exception/index.js";
 import "../footer-layout/index.js";
-import { VftForm as St } from "../form/index.js";
+import { VftForm as Ct } from "../form/index.js";
 import "../full-screen/index.js";
 import "../header-layout/index.js";
 import "../horizontal-menu/index.js";
@@ -93,20 +93,19 @@ import "../../hooks/use-z-index/index.js";
 import "../message/index.js";
 import "../infinite-scroll/index.js";
 import "../progress-i/index.js";
-import { FormCompEnum as Vt } from "./component-map.js";
 import tt from "./super-form-action.vue2.js";
 import _t from "./super-form-item.vue2.js";
-import { useAutoFocus as Et } from "./use/use-auto-focus.js";
-import { createFormContext as Ot } from "./use/use-form-context.js";
+import { useAutoFocus as Ot } from "./use/use-auto-focus.js";
+import { createFormContext as Vt } from "./use/use-form-context.js";
 import { useFormEvents as Mt } from "./use/use-form-events.js";
-import { useFormValues as Dt } from "./use/use-form-values.js";
+import { useFormValues as Et } from "./use/use-form-values.js";
 const At = (
   /* hoist-static*/
   Rt("super-form")
-), It = et({
+), Dt = et({
   name: "vft-super-form"
 }), Oo = /* @__PURE__ */ et({
-  ...It,
+  ...Dt,
   props: {
     rowProps: {
       default: {
@@ -225,165 +224,165 @@ const At = (
   emits: ["register", "reset", "submit", "field-value-change"],
   setup(ot, {
     expose: rt,
-    emit: E
+    emit: V
   }) {
-    const O = ot, it = st(), a = ut({}), b = n({}), B = n(!1), C = n({}), M = n(), S = n(null), D = n(), e = y(() => ({
-      ...O,
-      ...o(C)
-    })), p = y(() => ({
+    const M = ot, it = st(), m = ut({}), b = n({}), B = n(!1), S = n({}), E = n(), C = n(null), A = n(), e = h(() => ({
+      ...M,
+      ...o(S)
+    })), p = h(() => ({
       ...it,
-      ...O,
+      ...M,
       ...o(e)
-    })), i = y(() => {
-      const t = o(M);
-      return Ft(t == null ? void 0 : t.filter((r) => r.type !== Vt.DIVIDER));
+    })), r = h(() => {
+      const t = o(E);
+      return Ft(t);
     }), {
-      handleFormValues: mt,
-      initDefault: A
-    } = Dt({
+      handleFormValues: at,
+      initDefault: D
+    } = Et({
       getProps: e,
       defaultValueRef: b,
-      getSchema: i,
-      formModel: a
+      getSchema: r,
+      formModel: m
     });
-    Et({
-      getSchema: i,
+    Ot({
+      getSchema: r,
       getProps: e,
       isInitedDefault: B,
-      formElRef: S
+      formElRef: C
     });
     const {
       handleSubmit: s,
       setFieldsValue: w,
-      clearValidate: I,
-      validate: T,
+      clearValidate: T,
+      validate: I,
       validateField: N,
       getFieldsValue: k,
       updateSchema: P,
       resetSchema: R,
       appendSchemaByField: $,
       removeSchemaByField: q,
-      resetFields: V,
-      scrollToField: at,
+      resetFields: _,
+      scrollToField: mt,
       getFieldValue: x
     } = Mt({
-      emit: E,
+      emit: V,
       getProps: e,
-      formModel: a,
-      getSchema: i,
+      formModel: m,
+      getSchema: r,
       defaultValueRef: b,
-      formElRef: S,
-      schemaRef: M,
-      handleFormValues: mt,
-      initValues: D
+      formElRef: C,
+      schemaRef: E,
+      handleFormValues: at,
+      initValues: A
     });
-    Ot({
-      resetAction: V,
+    Vt({
+      resetAction: _,
       submitAction: s
-    }), h(() => o(e).model, () => {
+    }), y(() => o(e).model, () => {
       const {
         model: t
       } = o(e);
       t && w(t);
     }, {
       immediate: !0
-    }), h(() => o(e).schemas, (t) => {
+    }), y(() => o(e).schemas, (t) => {
       R(t ?? []);
-    }), h(() => i.value, (t) => {
-      var r;
+    }), y(() => r.value, (t) => {
+      var a;
       ft(() => {
-      }), !o(B) && t != null && t.length && (A(), B.value = !0, (r = e.value) != null && r.watchDataIsChange && kt(() => {
-        D.value = k();
+      }), !o(B) && t != null && t.length && (D(), B.value = !0, (a = e.value) != null && a.watchDataIsChange && kt(() => {
+        A.value = k();
       }, 40));
-    }), h(() => a, Pt(() => {
+    }), y(() => m, Pt(() => {
       o(e).submitOnChange && s();
     }, 300), {
       deep: !0
     });
     async function G(t) {
-      C.value = Ct(o(C) || {}, t);
+      S.value = St(o(S) || {}, t);
     }
-    function nt(t, r, m) {
-      a[t] = r, m && m.itemProps;
+    function nt(t, a, i) {
+      m[t] = a, i && i.itemProps;
     }
     function lt(t) {
       const {
-        autoSubmitOnEnter: r
+        autoSubmitOnEnter: a
       } = o(e);
-      if (r && t.key === "Enter" && t.target && t.target instanceof HTMLElement) {
-        const m = t.target;
-        m && m.tagName && m.tagName.toUpperCase() === "INPUT" && s();
+      if (a && t.key === "Enter" && t.target && t.target instanceof HTMLElement) {
+        const i = t.target;
+        i && i.tagName && i.tagName.toUpperCase() === "INPUT" && s();
       }
     }
     const H = {
       getFieldsValue: k,
       getFieldValue: x,
       setFieldsValue: w,
-      resetFields: V,
+      resetFields: _,
       updateSchema: P,
       resetSchema: R,
       setProps: G,
       removeSchemaByField: q,
       appendSchemaByField: $,
-      clearValidate: I,
+      clearValidate: T,
       validateField: N,
-      validate: T,
+      validate: I,
       submit: s,
-      scrollToField: at
+      scrollToField: mt
     };
     ct(() => {
-      A(), E("register", H);
+      D(), V("register", H);
     });
-    const K = y(() => bt(e.value, ["showResetButton", "showCommonButton", "showSubmitButton", "resetButtonOptions", "submitButtonOptions", "commonButtonOptions", "actionColOptions", "actionSpan"]));
+    const K = h(() => bt(e.value, ["showResetButton", "showCommonButton", "showSubmitButton", "resetButtonOptions", "submitButtonOptions", "commonButtonOptions", "actionColOptions", "actionSpan"]));
     return rt({
       getFieldsValue: k,
       getFieldValue: x,
       setFieldsValue: w,
-      resetFields: V,
+      resetFields: _,
       updateSchema: P,
       resetSchema: R,
       setProps: G,
       removeSchemaByField: q,
       appendSchemaByField: $,
-      clearValidate: I,
+      clearValidate: T,
       validateField: N,
-      validate: T,
+      validate: I,
       submit: s,
-      getSchema: i
-    }), (t, r) => {
+      getSchema: r
+    }), (t, a) => {
       var L;
-      const m = dt("vft-col");
-      return B.value && ((L = i.value) != null && L.length) ? (l(), c(o(St), v({
+      const i = dt("vft-col");
+      return B.value && ((L = r.value) != null && L.length) ? (l(), c(o(Ct), v({
         key: 0
       }, p.value, {
         ref_key: "formElRef",
-        ref: S,
+        ref: C,
         class: o(At).b(),
-        model: a,
+        model: m,
         onKeypress: Bt(lt, ["enter"])
       }), {
         default: g(() => {
           var z, U, W, j;
-          return [(z = i.value) != null && z.length ? (l(), c(o(wt), d(v({
+          return [(z = r.value) != null && z.length ? (l(), c(o(wt), d(v({
             key: 0
           }, (U = p.value) == null ? void 0 : U.rowProps)), {
             default: g(() => {
               var J, Q, X;
-              return [_(t.$slots, "formHeader"), (l(!0), yt(ht, null, Y(i.value, (u) => (l(), c(_t, {
+              return [O(t.$slots, "formHeader"), (l(!0), ht(yt, null, Y(r.value, (u) => (l(), c(_t, {
                 key: u.field,
                 formActionType: H,
                 schema: u,
                 formProps: e.value,
                 allDefaultValues: b.value,
-                formModel: a,
+                formModel: m,
                 setFormModel: nt,
                 updateSchema: o(P)
               }, vt({
                 _: 2
               }, [Y(Object.keys(t.$slots), (f) => ({
                 name: f,
-                fn: g((pt) => [_(t.$slots, f, d(Z(pt || {})))])
-              }))]), 1032, ["schema", "formProps", "allDefaultValues", "formModel", "updateSchema"]))), 128)), gt(m, d(Z((J = p.value) != null && J.quickColSpan ? {
+                fn: g((pt) => [O(t.$slots, f, d(Z(pt || {})))])
+              }))]), 1032, ["schema", "formProps", "allDefaultValues", "formModel", "updateSchema"]))), 128)), gt(i, d(Z((J = p.value) != null && J.quickColSpan ? {
                 span: Math.ceil(24 / ((Q = p.value) == null ? void 0 : Q.quickColSpan)),
                 ...(X = p.value) == null ? void 0 : X.baseColProps
               } : {})), {
@@ -399,7 +398,7 @@ const At = (
             _: 3
           }, 16)) : F("", !0), (W = e.value) != null && W.showActionButtonGroup && !((j = e.value) != null && j.actionInline) ? (l(), c(tt, d(v({
             key: 1
-          }, K.value)), null, 16)) : F("", !0), _(t.$slots, "formFooter")];
+          }, K.value)), null, 16)) : F("", !0), O(t.$slots, "formFooter")];
         }),
         _: 3
       }, 16, ["class", "model", "onKeypress"])) : F("", !0);

package/es/components/super-form/types.d.ts

@@ -0,0 +1,176 @@
+import type { ButtonProps, ColProps, RowProps } from 'vft/es/components';
+import type { FormItemProp, FormItemProps, FormProps } from 'vft/es/components/form';
+import type { InternalRuleItem, RuleItem } from 'async-validator';
+import type { StyleValue, VNode } from 'vue';
+import { FormCompEnum } from './component-map';
+import type { Arrayable, Recordable } from '../types';
+export type ButtonOptions = Partial<ButtonProps> & {
+    btnText?: string;
+};
+export type InternalNamePath = (string | number)[];
+export type NamePath = string | number | InternalNamePath;
+export type FieldMapToTime = [
+    string,
+    [
+        string,
+        string
+    ],
+    (string | [string, string])?
+][];
+export type Rule = {
+    trigger?: 'blur' | 'change' | ['change', 'blur'];
+};
+type FormItemRule = Omit<RuleItem, 'validator'> & Rule & {
+    validator?: (rule: InternalRuleItem, value: any, callback?: (error?: string | Error) => void) => Promise<any>;
+} & {
+    isNumber?: boolean;
+};
+export interface RenderCallbackParams {
+    schema: FormSchema;
+    values: Recordable;
+    model: Recordable;
+    field: string;
+}
+export interface FormActionType {
+    submit: () => Promise<void>;
+    setFieldsValue: (values: Recordable) => Promise<void>;
+    resetFields: (props?: FormItemProp | FormItemProp[]) => Promise<void>;
+    getFieldsValue: () => Recordable;
+    getFieldValue: (field: string) => string | number | Recordable;
+    clearValidate: (name?: string | string[]) => Promise<void>;
+    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+    resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+    setProps: (formProps: Partial<SuperFormProps>) => Promise<void>;
+    removeSchemaByField: (field: string | string[]) => Promise<void>;
+    setSubmitLoading: (loading?: boolean) => Promise<void>;
+    appendSchemaByField: (schema: FormSchema | FormSchema[], prefixField: string | undefined, first?: boolean | undefined) => Promise<void>;
+    validateField: (nameList?: NamePath[]) => Promise<any>;
+    validate: (nameList?: NamePath[]) => Promise<any>;
+    scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
+    setFormItemError: (field: string, errMess: string) => Promise<void>;
+}
+export interface SuperFormActionProps {
+    showResetButton?: boolean;
+    showSubmitButton?: boolean;
+    showCommonButton?: boolean;
+    resetButtonOptions?: ButtonOptions;
+    submitButtonOptions?: ButtonOptions;
+    commonButtonOptions?: ButtonOptions;
+    actionRowOptions?: Partial<RowProps>;
+}
+type FormInnerProps = FormProps & SuperFormActionProps;
+export interface SuperFormProps extends FormInnerProps {
+    /** 配置表单的 RowProps */
+    rowProps?: RowProps;
+    /** 配置所有选子项的 ColProps */
+    baseColProps?: Partial<ColProps>;
+    /** 根据 1/2/3...快速分列 */
+    quickColSpan?: number;
+    /** 自动设置占位符 */
+    autoSetPlaceHolder?: boolean;
+    /** 表单配置 */
+    schemas?: FormSchema[];
+    /** 是否聚焦第一个输入框，只在第一个表单项为 input 的时候作用 */
+    autoFocusFirstItem?: boolean;
+    /** 重置时是否提交表单 */
+    submitOnReset?: boolean;
+    /** 额外传递到子组件的参数 values */
+    mergeDynamicData?: Recordable;
+    /** 将表单内时间区域的值映射成 2 个字段 */
+    fieldMapToTime?: FieldMapToTime;
+    /** 在input中输入时按回车自动提交 */
+    autoSubmitOnEnter?: boolean;
+    /** 如果表单项有校验，会自动生成校验信息，该参数控制是否将字段中文名字拼接到自动生成的信息后方 */
+    rulesMessageJoinLabel?: boolean;
+    /** 表单改变时触发提交 */
+    submitOnChange?: boolean;
+    /** 是否显示操作按钮(重置/提交) */
+    showActionButtonGroup?: boolean;
+    /** 自动清除报错信息 */
+    autoCleanErrorMessage?: boolean;
+    /** 提交前置事件 */
+    beforeSubmitFunc?: () => Promise<void>;
+    /** 提交 */
+    submitFunc?: () => Promise<void>;
+    /** 监听数据是否发生改变 */
+    watchDataIsChange?: boolean;
+    /** Form 下组件宽度是否撑满 */
+    compFullWidth?: boolean;
+    /** 操作栏是否为行内 */
+    actionInline?: boolean;
+    /** 自定义 reset 事件 */
+    resetFunc?: () => Promise<void>;
+}
+export interface FormSchema {
+    /** 字段 key */
+    field: string;
+    /** 名称 label title 都可以 */
+    label?: string | VNode;
+    title?: string | VNode;
+    /** 值改变的触发事件 */
+    changeEvent?: string;
+    /** v-model 绑定的 value 值 */
+    valueField?: string;
+    /** 子 label */
+    subLabel?: string;
+    /** 是否显示 label */
+    showLabel?: boolean;
+    /** 标签宽度，如果通过，则 itemProps 配置的 labelCol 和 WrapperCol 将无效 */
+    labelWidth?: string | number;
+    /** 渲染组件 */
+    type?: FormCompEnum;
+    /** 组件内置参数 */
+    componentProps?: ((opt: {
+        schema: FormSchema;
+        formActionType: FormActionType;
+        formModel: Recordable;
+    }) => Recordable) | object;
+    /** 是否为必填项 */
+    required?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+    /** 组件后自定义内容 */
+    suffix?: string | number | ((values: RenderCallbackParams) => string | number) | VNode | JSX.Element | (() => JSX.Element);
+    /** 组件前自定义内容 */
+    prefix?: string | number | ((values: RenderCallbackParams) => string | number) | VNode | JSX.Element | (() => JSX.Element);
+    /** 前置内容父级样式 */
+    prefixParentStyle?: StyleValue;
+    /** 自定义规则 */
+    rules?: FormItemRule[] | FormItemRule;
+    /** 自定义报错规则是否添加自动添加 label */
+    rulesMessageJoinLabel?: boolean;
+    /** 自动生成 placeholder */
+    placeholderJoinLabel?: boolean;
+    /** form-item 参数 */
+    itemProps?: Partial<FormItemProps & {
+        title: string;
+    }>;
+    /** col 参数 */
+    colProps?: Partial<ColProps>;
+    /** 根据 1/2/3...快速分列 */
+    quickColSpan?: number;
+    /** 默认值 */
+    defaultValue?: any;
+    /** 是否自动处理与时间相关组件的默认值 */
+    isHandleDateDefaultValue?: boolean;
+    /** 栅格占据的列数 */
+    span?: number;
+    /** 动态判断当前组件是否显示，js 控制，会删除 dom */
+    ifShow?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+    /** 动态判断当前组件是否显示，css 控制，不会删除 dom */
+    show?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+    /** 自定义渲染组件*/
+    render?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
+    /** 自定义渲染组件（需要自行包含 formItem）*/
+    renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
+    /** 自定义渲染组内部的 slot */
+    renderComponentContent?: ((renderCallbackParams: RenderCallbackParams) => any) | VNode | VNode[] | string;
+    /** 自定义 slot，渲染组件 */
+    slot?: string;
+    /** 自定义 slot，渲染组件 （需要自行包含 formItem）*/
+    colSlot?: string;
+    /** 动态判断当前组件是否禁用 */
+    dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+    /** 动态判返当前组件你校验规则 */
+    dynamicRule?: (renderCallbackParams: RenderCallbackParams) => Arrayable<FormItemRule>;
+    dynamicRuleAdd?: boolean;
+}
+export {};

package/es/components/super-form/use/use-form-events.d.ts

@@ -0,0 +1,30 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { Fn, Recordable } from '../../types';
+import type { FormActionType, FormSchema, SuperFormProps } from '../types';
+interface UseFormActionContext {
+    emit: any;
+    getProps: ComputedRef<SuperFormProps>;
+    getSchema: ComputedRef<FormSchema[]>;
+    formModel: Recordable;
+    defaultValueRef: Ref<Recordable>;
+    formElRef: Ref<FormActionType>;
+    schemaRef: Ref<FormSchema[]>;
+    handleFormValues: Fn;
+    initValues: Ref<Recordable>;
+}
+export declare function useFormEvents({ emit, getProps, formModel, getSchema, defaultValueRef, formElRef, schemaRef, handleFormValues, initValues, }: UseFormActionContext): {
+    handleSubmit: (e?: Event) => Promise<void>;
+    clearValidate: (name?: string | string[]) => Promise<void>;
+    validate: (nameList?: any[] | undefined) => Promise<any>;
+    validateField: (nameList?: any[] | undefined) => Promise<any>;
+    getFieldsValue: () => Recordable;
+    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+    resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+    appendSchemaByField: (schema: FormSchema | FormSchema[], prefixField?: string, first?: boolean) => Promise<void>;
+    removeSchemaByField: (fields: string | string[]) => Promise<void>;
+    resetFields: (props: any) => Promise<void>;
+    setFieldsValue: (values: Recordable) => Promise<void>;
+    scrollToField: (name: any, options?: ScrollOptions | undefined) => Promise<void>;
+    getFieldValue: (field: string) => string | number | Recordable;
+};
+export {};