@tmagic/form 1.0.0-beta.6 → 1.0.0-rc.10

package/src/fields/Checkbox.vue

@@ -43,7 +43,7 @@ export default defineComponent({
           return props.config.activeValue;
         }
 
-        return 'true';
+        return undefined;
       }),
 
       inactiveValue: computed(() => {
@@ -55,7 +55,7 @@ export default defineComponent({
           return props.config.inactiveValue;
         }
 
-        return 'false';
+        return undefined;
       }),
 
       changeHandler(value: number | boolean) {

package/src/fields/Daterange.vue

@@ -60,6 +60,14 @@ export default defineComponent({
         });
       } else if (props.model && props.name && v instanceof Date) {
         props.model[props.name] = datetimeFormatter(v.toString(), '');
+      } else if (names?.length) {
+        names.forEach((item) => {
+          if (props.model) {
+            props.model[item] = undefined;
+          }
+        });
+      } else if (props.name) {
+        props.model[props.name] = undefined;
       }
     };
 

package/src/fields/Link.vue

@@ -2,7 +2,7 @@
   <a v-if="config.href && !disabled" target="_blank" :href="href" :style="config.css || {}">{{ displayText }}</a>
   <span v-else-if="config.href && disabled" :style="config.disabledCss || {}">{{ displayText }}</span>
   <div v-else class="m-fields-link">
-    <el-button type="text" @click="editHandler">点击编辑</el-button>
+    <el-button text type="primary" @click="editHandler">点击编辑</el-button>
     <m-form-dialog
       ref="editor"
       :title="config.formTitle || '编辑扩展配置'"

package/src/fields/Select.vue

@@ -7,6 +7,7 @@
     ref="select"
     clearable
     filterable
+    :popper-class="`m-select-popper ${popperClass}`"
     :size="size"
     :remote="remote"
     :placeholder="config.placeholder"
@@ -14,20 +15,15 @@
     :value-key="config.valueKey || 'value'"
     :allow-create="config.allowCreate"
     :disabled="disabled"
-    :remote-method="remoteMethod"
+    :remote-method="config.remote && remoteMethod"
     @change="changeHandler"
     @visible-change="visibleHandler"
   >
     <template v-if="config.group">
-      <el-option-group
-        v-for="(group, index) in options"
-        :key="group.label + index"
-        :label="group.label"
-        :disabled="group.disabled"
-      >
+      <el-option-group v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
         <el-option
           v-for="(item, index) in group.options"
-          :key="item.label + index"
+          :key="index"
           :label="item.label"
           :value="item.value"
           :disabled="item.disabled"
@@ -138,6 +134,7 @@ export default defineComponent({
             model: props.model,
             formValue: mForm?.values,
             formValues: mForm?.values,
+            config: props.config,
           }) as Record<string, any>;
         }
 
@@ -167,6 +164,7 @@ export default defineComponent({
           model: props.model,
           formValue: mForm?.values,
           formValues: mForm?.values,
+          config: props.config,
         });
       }
 
@@ -288,8 +286,10 @@ export default defineComponent({
             Promise.resolve(
               props.config.options(mForm, {
                 model: props.model,
+                prop: props.prop,
                 formValues: mForm?.values,
                 formValue: mForm?.values,
+                config: props.config,
               }),
             ).then((data) => {
               options.value = data;
@@ -346,13 +346,14 @@ export default defineComponent({
       remote,
       options,
       moreLoadingVisible,
+      popperClass: mForm?.popperClass,
+
+      getOptions,
 
       getRequestFuc() {
         return getConfig('request');
       },
 
-      async getInitOption() {},
-
       changeHandler(value: any) {
         emit('change', value);
       },
@@ -370,11 +371,6 @@ export default defineComponent({
         }
       },
 
-      async editAfterAction() {
-        pgIndex.value = 0;
-        options.value = await getOptions();
-      },
-
       async remoteMethod(q: string) {
         if (!localOptions.value.length) {
           query.value = q;

package/src/fields/Text.vue

@@ -14,7 +14,8 @@
       <el-button
         v-if="typeof config.append === 'object' && config.append.type === 'button'"
         style="color: #409eff"
-        @click="buttonClickHandler"
+        :size="size"
+        @click.prevent="buttonClickHandler"
       >
         {{ config.append.text }}
       </el-button>
@@ -43,6 +44,8 @@ export default defineComponent({
   emits: ['change', 'input'],
 
   setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+
     useAddField(props.prop);
 
     const modelName = computed(() => props.name || props.config.name || '');
@@ -54,14 +57,11 @@ export default defineComponent({
       },
 
       inputHandler(v: string | number) {
-        const mForm = inject<FormState | undefined>('mForm');
         emit('input', v);
         mForm?.$emit('field-input', props.prop, v);
       },
 
       buttonClickHandler() {
-        const mForm = inject<FormState | undefined>('mForm');
-
         if (typeof props.config.append === 'string') return;
 
         if (props.config.append?.handler) {

package/src/fields/Textarea.vue

@@ -1,17 +1,15 @@
 <template>
-  <div v-if="model">
-    <el-input
-      v-model="model[name]"
-      type="textarea"
-      :size="size"
-      clearable
-      :placeholder="config.placeholder"
-      :disabled="disabled"
-      @change="changeHandler"
-      @input="inputHandler"
-    >
-    </el-input>
-  </div>
+  <el-input
+    v-model="model[name]"
+    type="textarea"
+    :size="size"
+    clearable
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    @change="changeHandler"
+    @input="inputHandler"
+  >
+  </el-input>
 </template>
 
 <script lang="ts">

package/src/schema.ts

@@ -21,6 +21,7 @@
  */
 export type FormState = {
   config: FormConfig;
+  popperClass?: string;
   initValues: FormValue;
   values: FormValue;
   $emit: (event: string, ...args: any[]) => void;
@@ -119,6 +120,7 @@ export interface Rule {
       /** 整个表单的值 */
       formValue: FormValue;
       prop: string;
+      config: any;
     },
     mForm: FormState | undefined,
   ) => void;
@@ -144,6 +146,7 @@ type FilterFunction = (
     parent?: Record<any, any>;
     formValue: Record<any, any>;
     prop: string;
+    config: any;
   },
 ) => boolean;
 
@@ -155,6 +158,7 @@ type OnChangeHandler = (
     values: Record<any, any>;
     parent?: Record<any, any>;
     formValue: Record<any, any>;
+    config: any;
   },
 ) => any;
 
@@ -187,8 +191,10 @@ type SelectOptionFunction = (
   mForm: FormState | undefined,
   data: {
     model: any;
+    prop?: string;
     formValues: any;
     formValue: any;
+    config: any;
   },
 ) => SelectOption[] | SelectGroupOption[];
 
@@ -198,6 +204,7 @@ type RemoteSelectOptionBodyFunction = (
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
   },
 ) => Record<string, any>;
 
@@ -208,6 +215,7 @@ type RemoteSelectOptionRequestFunction = (
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
   },
 ) => any;
 
@@ -498,6 +506,7 @@ export interface TabPaneConfig {
   lazy?: boolean;
   labelWidth?: string;
   items: FormConfig;
+  [key: string]: any;
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
   type: 'tab' | 'dynamic-tab';
@@ -538,6 +547,7 @@ export interface ColumnConfig extends FormItem, ContainerCommonConfig {
   label: string;
   width: string | number;
   sortable: boolean;
+  [key: string]: any;
 }
 
 /**

package/src/theme/form.scss

@@ -2,29 +2,36 @@
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-.m-form,
-.m-form-panel.el-card .el-card__body {
-  color: #333;
-  background-color: #fff;
-}
+.m-form {
+  .m-form-tip {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
 
-.m-form .m-form-tip {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 12px;
-  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
+  .m-form-schematic {
+    max-width: 50%;
+    height: 100%;
+  }
 
-.m-form .m-form-schematic {
-  max-width: 50%;
-  height: 100%;
-}
+  .el-table {
+    .cell > div.m-form-container {
+      display: block;
+    }
+  }
+
+  .el-tabs {
+    margin-bottom: 10px;
+  }
 
-.el-table {
-  .cell > div.m-form-container {
-    display: block;
+  .el-form-item.hidden {
+    .el-form-item__label {
+      display: none;
+    }
   }
 }

package/src/utils/form.ts

@@ -122,7 +122,11 @@ const initValueItem = function (
   // 这种情况比较多，提前结束
   if (name && !items && typeof initValue[name] !== 'undefined') {
     if (typeof value[name] === 'undefined') {
-      value[name] = typeof initValue[name] === 'object' ? cloneDeep(initValue[name]) : initValue[name];
+      if (type === 'number') {
+        value[name] = Number(initValue[name]);
+      } else {
+        value[name] = typeof initValue[name] === 'object' ? cloneDeep(initValue[name]) : initValue[name];
+      }
     }
 
     return value;
@@ -197,6 +201,7 @@ export const filterFunction = (mForm: FormState | undefined, config: any, props:
     parent: mForm?.parentValues || {},
     formValue: mForm?.values || props.model,
     prop: props.prop,
+    config: props.config,
   });
 };
 
@@ -238,6 +243,7 @@ export const getRules = function (mForm: FormState | undefined, rules: Rule[] |
             parent: mForm?.parentValues || {},
             formValue: mForm?.values || props.model,
             prop: props.prop,
+            config: props.config,
           },
           mForm,
         );

package/dist/types/src/Form.vue.d.ts

@@ -1,301 +0,0 @@
-import type { ValidateFieldCallback } from 'element-plus';
-import type { Callback } from 'element-plus/es/components/form/src/form.vue';
-import type { FormItemRule } from 'element-plus/es/components/form/src/form.type';
-import type { DefineComponent, Ref, ComponentInternalInstance, ExtractPropTypes, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComputedRef, ComponentOptionsMixin, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, PropType } from 'vue';
-import { FormConfig, FormState } from './schema';
-export interface ValidateError {
-    message: string;
-    field: string;
-}
-export interface FieldErrorList {
-    [field: string]: ValidateError[];
-}
-declare const _default: 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: (StringConstructor | NumberConstructor)[];
-        default: () => number;
-    };
-    size: {
-        type: StringConstructor;
-    };
-    inline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    keyProp: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    initialized: Ref<boolean>;
-    values: Ref<{
-        [x: string]: any;
-        [x: number]: any;
-    }>;
-    elForm: Ref<({
-        $: ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            disabled: boolean;
-            inline: boolean;
-            labelWidth: string | number;
-            labelSuffix: string;
-            inlineMessage: boolean;
-            statusIcon: boolean;
-            showMessage: boolean;
-            validateOnRuleChange: boolean;
-            hideRequiredAsterisk: boolean;
-            scrollToError: boolean;
-        }> & Omit<Readonly<ExtractPropTypes<{
-            model: ObjectConstructor;
-            rules: PropType<Partial<Record<string, FormItemRule | FormItemRule[]>>>;
-            labelPosition: StringConstructor;
-            labelWidth: {
-                type: (StringConstructor | NumberConstructor)[];
-                default: string;
-            };
-            labelSuffix: {
-                type: StringConstructor;
-                default: string;
-            };
-            inline: BooleanConstructor;
-            inlineMessage: BooleanConstructor;
-            statusIcon: BooleanConstructor;
-            showMessage: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            size: PropType<"small" | "default" | "large">;
-            disabled: BooleanConstructor;
-            validateOnRuleChange: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            hideRequiredAsterisk: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            scrollToError: BooleanConstructor;
-        }>> & {
-            onValidate?: ((...args: any[]) => any) | undefined;
-        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "labelWidth" | "disabled" | "inline" | "labelSuffix" | "inlineMessage" | "statusIcon" | "showMessage" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: Slot | undefined;
-        }>;
-        $root: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "validate", ...args: any[]) => void;
-        $el: any;
-        $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
-            model: ObjectConstructor;
-            rules: PropType<Partial<Record<string, FormItemRule | FormItemRule[]>>>;
-            labelPosition: StringConstructor;
-            labelWidth: {
-                type: (StringConstructor | NumberConstructor)[];
-                default: string;
-            };
-            labelSuffix: {
-                type: StringConstructor;
-                default: string;
-            };
-            inline: BooleanConstructor;
-            inlineMessage: BooleanConstructor;
-            statusIcon: BooleanConstructor;
-            showMessage: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            size: PropType<"small" | "default" | "large">;
-            disabled: BooleanConstructor;
-            validateOnRuleChange: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            hideRequiredAsterisk: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            scrollToError: BooleanConstructor;
-        }>> & {
-            onValidate?: ((...args: any[]) => any) | undefined;
-        }, {
-            formKls: ComputedRef<string[]>;
-            validate: (callback?: Callback | undefined) => Promise<boolean> | undefined;
-            resetFields: () => void;
-            clearValidate: (props?: string | string[] | undefined) => void;
-            validateField: (props: string | string[], cb: ValidateFieldCallback) => void;
-            scrollToField: (prop: string) => void;
-        }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "validate"[], string, {
-            disabled: boolean;
-            inline: boolean;
-            labelWidth: string | number;
-            labelSuffix: string;
-            inlineMessage: boolean;
-            statusIcon: boolean;
-            showMessage: boolean;
-            validateOnRuleChange: boolean;
-            hideRequiredAsterisk: boolean;
-            scrollToError: boolean;
-        }> & {
-            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: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof nextTick;
-        $watch(source: string | Function, cb: Function, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
-    } & Readonly<ExtractPropTypes<{
-        model: ObjectConstructor;
-        rules: PropType<Partial<Record<string, FormItemRule | FormItemRule[]>>>;
-        labelPosition: StringConstructor;
-        labelWidth: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: string;
-        };
-        labelSuffix: {
-            type: StringConstructor;
-            default: string;
-        };
-        inline: BooleanConstructor;
-        inlineMessage: BooleanConstructor;
-        statusIcon: BooleanConstructor;
-        showMessage: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: PropType<"small" | "default" | "large">;
-        disabled: BooleanConstructor;
-        validateOnRuleChange: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        hideRequiredAsterisk: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        scrollToError: BooleanConstructor;
-    }>> & {
-        onValidate?: ((...args: any[]) => any) | undefined;
-    } & ShallowUnwrapRef<{
-        formKls: ComputedRef<string[]>;
-        validate: (callback?: Callback | undefined) => Promise<boolean> | undefined;
-        resetFields: () => void;
-        clearValidate: (props?: string | string[] | undefined) => void;
-        validateField: (props: string | string[], cb: ValidateFieldCallback) => void;
-        scrollToField: (prop: string) => void;
-    }> & {} & {} & ComponentCustomProperties) | undefined>;
-    formState: FormState;
-    changeHandler: () => void;
-    resetForm: () => void | undefined;
-    submitForm: (native?: boolean | undefined) => Promise<any>;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], "change" | "field-input" | "field-change", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<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: (StringConstructor | NumberConstructor)[];
-        default: () => number;
-    };
-    size: {
-        type: StringConstructor;
-    };
-    inline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    keyProp: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onField-input"?: ((...args: any[]) => any) | undefined;
-    "onField-change"?: ((...args: any[]) => any) | undefined;
-}, {
-    initValues: Record<string, any>;
-    parentValues: Record<string, any>;
-    config: FormConfig;
-    labelWidth: string;
-    disabled: boolean;
-    height: string;
-    stepActive: string | number;
-    inline: boolean;
-    labelPosition: string;
-    keyProp: string;
-}>;
-export default _default;