@tmagic/form 1.2.0-beta.2 → 1.2.0-beta.21

package/src/schema.ts

@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+export interface ValidateError {
+  message: string;
+  field: string;
+}
+
 /**
  * 整个表单的数据，会注入到各个组件中去
  */
@@ -167,7 +172,7 @@ type DefaultValueFunction = (mForm: FormState | undefined) => any;
 /**
  * 下拉选择器选项配置
  */
-export interface SelectOption {
+export interface SelectConfigOption {
   /** 选项的标签 */
   text: string | SelectOptionTextFunction;
   /** 选项的值 */
@@ -176,10 +181,19 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
+export interface SelectOption {
+  /** 选项的标签 */
+  text: string;
+  /** 选项的值 */
+  value: any;
+  /** 是否禁用该选项 */
+  disabled?: boolean;
+}
+
 /**
  * 下拉选择器分组选项配置
  */
-export interface SelectGroupOption {
+export interface SelectConfigGroupOption {
   /** 分组的组名 */
   label: string;
   /** 是否禁用该选项组 */
@@ -194,6 +208,22 @@ export interface SelectGroupOption {
   }[];
 }
 
+export interface SelectGroupOption {
+  /** 分组的组名 */
+  label: string;
+  /** 是否禁用该选项组 */
+  disabled: boolean;
+  options: {
+    /** 选项的标签 */
+    label?: string;
+    text?: string;
+    /** 选项的值 */
+    value: any;
+    /** 是否禁用该选项 */
+    disabled?: boolean;
+  }[];
+}
+
 type SelectOptionFunction = (
   mForm: FormState | undefined,
   data: {
@@ -226,11 +256,11 @@ type RemoteSelectOptionRequestFunction = (
   },
 ) => any;
 
-type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[];
+type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[] | SelectGroupOption[];
 type SelectOptionValueFunction = (item: Record<string, any>) => any;
 type SelectOptionTextFunction = (item: Record<string, any>) => string;
 
-interface CascaderOption {
+export interface CascaderOption {
   /** 指定选项的值为选项对象的某个属性值 */
   value: any;
   /** 指定选项标签为选项对象的某个属性值 */
@@ -302,7 +332,7 @@ export interface NumberConfig extends FormItem {
   min?: number;
   max?: number;
   step?: number;
-  placeholder?: number;
+  placeholder?: string;
 }
 
 /**
@@ -318,6 +348,7 @@ export interface HiddenConfig extends FormItem {
 export interface DateConfig extends FormItem, Input {
   type: 'date';
   format?: 'YYYY-MM-dd HH:mm:ss' | string;
+  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
 }
 
 /**
@@ -335,6 +366,8 @@ export interface DateTimeConfig extends FormItem, Input {
  */
 export interface TimeConfig extends FormItem, Input {
   type: 'time';
+  format?: 'HH:mm:ss' | string;
+  valueFormat?: 'HH:mm:ss' | string;
 }
 
 /**
@@ -361,7 +394,7 @@ export interface SwitchConfig extends FormItem {
 export interface RadioGroupConfig extends FormItem {
   type: 'radio-group';
   options: {
-    values: string | number | boolean;
+    value: string | number | boolean;
     text: string;
   }[];
 }
@@ -378,10 +411,13 @@ export interface ColorPickConfig extends FormItem {
  */
 export interface CheckboxGroupConfig extends FormItem {
   type: 'checkbox-group';
-  options: {
-    value: any;
-    text: string;
-  }[];
+  options:
+    | {
+        value: any;
+        text: string;
+        disabled?: boolean;
+      }[]
+    | Function;
 }
 
 /**
@@ -394,7 +430,7 @@ export interface SelectConfig extends FormItem, Input {
   valueKey?: string;
   allowCreate?: boolean;
   group?: boolean;
-  options: SelectOption[] | SelectGroupOption[] | SelectOptionFunction;
+  options: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
   remote: true;
   option: {
     url: string;
@@ -520,7 +556,7 @@ export interface TabPaneConfig {
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
   type: 'tab' | 'dynamic-tab';
-  tabType?: 'tab';
+  tabType?: string;
   editable?: boolean;
   dynamic?: boolean;
   tabPosition?: 'top' | 'right' | 'bottom' | 'left';
@@ -577,6 +613,7 @@ export interface TableConfig extends FormItem {
   border?: boolean;
   /** 显示行号 */
   showIndex?: boolean;
+  pagination?: boolean;
   enum?: any[];
   /** 是否显示添加按钮 */
   addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
@@ -596,6 +633,7 @@ export interface TableConfig extends FormItem {
   enableFullscreen?: boolean;
   fixed?: boolean;
   itemExtra?: string | FilterFunction;
+  rowKey: string;
 }
 
 export interface GroupListConfig extends FormItem {

package/src/theme/form.scss

@@ -30,7 +30,7 @@
   }
 
   .el-form-item.hidden {
-    .el-form-item__label {
+    > .el-form-item__label {
       display: none;
     }
   }

package/src/utils/form.ts

@@ -62,9 +62,9 @@ const initItemsValue = (
   { items, name, extensible }: any,
 ) => {
   if (Array.isArray(initValue[name])) {
-    value[name] = initValue[name].map((v: any, index: number) => init(mForm, items, v, value[name]?.[index]));
+    value[name] = initValue[name].map((v: any, index: number) => createValues(mForm, items, v, value[name]?.[index]));
   } else {
-    value[name] = init(mForm, items, initValue[name], value[name]);
+    value[name] = createValues(mForm, items, initValue[name], value[name]);
     if (extensible) {
       value[name] = Object.assign({}, initValue[name], value[name]);
     }
@@ -129,7 +129,7 @@ const initValueItem = function (
 
   if (!name) {
     // 没有配置name，直接跳过
-    return init(mForm, items, initValue, value);
+    return createValues(mForm, items, initValue, value);
   }
 
   setValue(mForm, value, initValue, item);
@@ -137,7 +137,7 @@ const initValueItem = function (
   return value;
 };
 
-const init = function (
+export const createValues = function (
   mForm: FormState | undefined,
   config: FormConfig | TabPaneConfig[] = [],
   initValue: FormValue = {},
@@ -197,6 +197,10 @@ export const filterFunction = (mForm: FormState | undefined, config: any, props:
 };
 
 export const display = function (mForm: FormState | undefined, config: any, props: any) {
+  if (config === 'expand') {
+    return config;
+  }
+
   if (typeof config === 'function') {
     return filterFunction(mForm, config, props);
   }
@@ -249,7 +253,7 @@ export const initValue = async (
 ) => {
   if (!Array.isArray(config)) throw new Error('config应该为数组');
 
-  let valuesTmp = init(mForm, config, toRaw(initValues), {});
+  let valuesTmp = createValues(mForm, config, toRaw(initValues), {});
 
   const [firstForm] = config as [ContainerCommonConfig];
   if (firstForm && typeof firstForm.onInitValue === 'function') {

package/types/Form.vue.d.ts

@@ -1,125 +1,225 @@
-import { PropType } from 'vue';
-import { FormConfig, FormState, FormValue } from './schema';
-declare const _default: import("vue").DefineComponent<{
-    initValues: {
-        type: ObjectConstructor;
-        required: true;
-        default: () => {};
-    };
-    parentValues: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    config: {
-        type: PropType<FormConfig>;
-        required: true;
-        default: () => never[];
-    };
-    labelWidth: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: () => boolean;
-    };
-    height: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    stepActive: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: () => number;
-    };
-    size: {
-        type: PropType<"small" | "default" | "large">;
-    };
-    inline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    keyProp: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-    };
+import type { FormConfig, FormState, FormValue } from './schema';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            config: FormConfig;
+            initValues: Object;
+            keyProp: string;
+            parentValues: Object;
+            labelWidth: string;
+            disabled: boolean;
+            stepActive: string | number;
+            height: string;
+            inline: boolean;
+            labelPosition: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            config: FormConfig;
+            initValues: Object;
+            parentValues?: Object | undefined;
+            labelWidth?: string | undefined;
+            disabled?: boolean | undefined;
+            height?: string | undefined;
+            stepActive?: string | number | undefined;
+            size?: "small" | "default" | "large" | undefined;
+            inline?: boolean | undefined;
+            labelPosition?: string | undefined;
+            keyProp?: string | undefined;
+            popperClass?: string | undefined;
+        }>, {
+            config: () => never[];
+            initValues: () => {};
+            parentValues: () => {};
+            labelWidth: string;
+            disabled: boolean;
+            height: string;
+            stepActive: number;
+            inline: boolean;
+            labelPosition: string;
+            keyProp: string;
+        }>>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+            "onField-input"?: ((...args: any[]) => any) | undefined;
+            "onField-change"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "config" | "initValues" | "keyProp" | "parentValues" | "labelWidth" | "disabled" | "stepActive" | "height" | "inline" | "labelPosition">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "change" | "field-input" | "field-change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            config: FormConfig;
+            initValues: Object;
+            parentValues?: Object | undefined;
+            labelWidth?: string | undefined;
+            disabled?: boolean | undefined;
+            height?: string | undefined;
+            stepActive?: string | number | undefined;
+            size?: "small" | "default" | "large" | undefined;
+            inline?: boolean | undefined;
+            labelPosition?: string | undefined;
+            keyProp?: string | undefined;
+            popperClass?: string | undefined;
+        }>, {
+            config: () => never[];
+            initValues: () => {};
+            parentValues: () => {};
+            labelWidth: string;
+            disabled: boolean;
+            height: string;
+            stepActive: number;
+            inline: boolean;
+            labelPosition: string;
+            keyProp: string;
+        }>>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+            "onField-input"?: ((...args: any[]) => any) | undefined;
+            "onField-change"?: ((...args: any[]) => any) | undefined;
+        }, {
+            values: import("vue").Ref<FormValue>;
+            formState: FormState;
+            initialized: import("vue").Ref<boolean>;
+            changeHandler: () => void;
+            resetForm: () => any;
+            submitForm: (native?: boolean) => Promise<any>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], string, {
+            config: FormConfig;
+            initValues: Object;
+            keyProp: string;
+            parentValues: Object;
+            labelWidth: string;
+            disabled: boolean;
+            stepActive: string | number;
+            height: string;
+            inline: boolean;
+            labelPosition: string;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+        config: FormConfig;
+        initValues: Object;
+        parentValues?: Object | undefined;
+        labelWidth?: string | undefined;
+        disabled?: boolean | undefined;
+        height?: string | undefined;
+        stepActive?: string | number | undefined;
+        size?: "small" | "default" | "large" | undefined;
+        inline?: boolean | undefined;
+        labelPosition?: string | undefined;
+        keyProp?: string | undefined;
+        popperClass?: string | undefined;
+    }>, {
+        config: () => never[];
+        initValues: () => {};
+        parentValues: () => {};
+        labelWidth: string;
+        disabled: boolean;
+        height: string;
+        stepActive: number;
+        inline: boolean;
+        labelPosition: string;
+        keyProp: string;
+    }>>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onField-input"?: ((...args: any[]) => any) | undefined;
+        "onField-change"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{
+        values: import("vue").Ref<FormValue>;
+        formState: FormState;
+        initialized: import("vue").Ref<boolean>;
+        changeHandler: () => void;
+        resetForm: () => any;
+        submitForm: (native?: boolean) => Promise<any>;
+    }> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: FormConfig;
+    initValues: Object;
+    parentValues?: Object | undefined;
+    labelWidth?: string | undefined;
+    disabled?: boolean | undefined;
+    height?: string | undefined;
+    stepActive?: string | number | undefined;
+    size?: "small" | "default" | "large" | undefined;
+    inline?: boolean | undefined;
+    labelPosition?: string | undefined;
+    keyProp?: string | undefined;
+    popperClass?: string | undefined;
+}>, {
+    config: () => never[];
+    initValues: () => {};
+    parentValues: () => {};
+    labelWidth: string;
+    disabled: boolean;
+    height: string;
+    stepActive: number;
+    inline: boolean;
+    labelPosition: string;
+    keyProp: string;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onField-input"?: ((...args: any[]) => any) | undefined;
+    "onField-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    initialized: import("vue").Ref<boolean>;
     values: import("vue").Ref<FormValue>;
-    elForm: import("vue").Ref<any>;
     formState: FormState;
+    initialized: import("vue").Ref<boolean>;
     changeHandler: () => void;
     resetForm: () => any;
     submitForm: (native?: boolean) => Promise<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], "change" | "field-input" | "field-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    initValues: {
-        type: ObjectConstructor;
-        required: true;
-        default: () => {};
-    };
-    parentValues: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    config: {
-        type: PropType<FormConfig>;
-        required: true;
-        default: () => never[];
-    };
-    labelWidth: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: () => boolean;
-    };
-    height: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    stepActive: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: () => number;
-    };
-    size: {
-        type: PropType<"small" | "default" | "large">;
-    };
-    inline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    keyProp: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-    };
-}>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onField-input"?: ((...args: any[]) => any) | undefined;
-    "onField-change"?: ((...args: any[]) => any) | undefined;
-}, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], "change" | "field-input" | "field-change", {
     config: FormConfig;
-    initValues: Record<string, any>;
+    initValues: Object;
     keyProp: string;
-    parentValues: Record<string, any>;
+    parentValues: Object;
     labelWidth: string;
     disabled: boolean;
-    height: string;
     stepActive: string | number;
+    height: string;
     inline: boolean;
     labelPosition: string;
-}>;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};