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

package/dist/types/src/containers/Col.vue.d.ts

@@ -0,0 +1,42 @@
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { ChildConfig, FormState } from '../schema';
+declare const _default: DefineComponent<{
+    labelWidth: StringConstructor;
+    expandMore: BooleanConstructor;
+    span: NumberConstructor;
+    model: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    config: {
+        type: PropType<ChildConfig>;
+        default: () => {};
+    };
+    prop: StringConstructor;
+    size: StringConstructor;
+}, {
+    mForm: FormState | undefined;
+    display: ComputedRef<any>;
+    changeHandler: () => void;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "change"[], "change", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    labelWidth: StringConstructor;
+    expandMore: BooleanConstructor;
+    span: NumberConstructor;
+    model: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    config: {
+        type: PropType<ChildConfig>;
+        default: () => {};
+    };
+    prop: StringConstructor;
+    size: StringConstructor;
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    config: ChildConfig;
+    model: Record<string, any>;
+    expandMore: boolean;
+}>;
+export default _default;

package/dist/types/src/containers/Container.vue.d.ts

@@ -30,6 +30,7 @@ declare const _default: DefineComponent<{
     itemProp: ComputedRef<string>;
     items: ComputedRef<FormConfig>;
     display: ComputedRef<boolean>;
+    itemLabelWidth: ComputedRef<string | undefined>;
     tagName: ComputedRef<ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions> | "m-fields-text">;
     rule: ComputedRef<Rule[]>;
     tooltip: ComputedRef<any>;

package/dist/types/src/containers/Row.vue.d.ts

@@ -16,7 +16,6 @@ declare const _default: DefineComponent<{
     size: StringConstructor;
 }, {
     mForm: FormState | undefined;
-    display(config: any): any;
     changeHandler: () => void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "change"[], "change", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     labelWidth: StringConstructor;

package/dist/types/src/fields/Checkbox.vue.d.ts

@@ -23,8 +23,8 @@ declare const _default: DefineComponent<{
     initValues: ObjectConstructor;
     values: ObjectConstructor;
 }, {
-    activeValue: ComputedRef<string | number | boolean>;
-    inactiveValue: ComputedRef<string | number | boolean>;
+    activeValue: ComputedRef<string | number | boolean | undefined>;
+    inactiveValue: ComputedRef<string | number | boolean | undefined>;
     changeHandler(value: number | boolean): void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "input")[], "change" | "input", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     config: {

package/dist/types/src/fields/DynamicField.vue.d.ts

@@ -34,10 +34,10 @@ declare const _default: DefineComponent<{
 }, {
     request: Function;
     fieldMap: {
-        [x: string]: any;
+        [key: string]: any;
     };
     fieldLabelMap: {
-        [x: string]: any;
+        [key: string]: any;
     };
     unwatch: WatchStopHandle;
     changeFieldMap: () => Promise<void>;

package/dist/types/src/index.d.ts

@@ -31,6 +31,6 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 declare const _default: {
-    install: (app: App<any>, opt: any) => void;
+    install: (app: App, opt: any) => void;
 };
 export default _default;

package/dist/types/src/schema.d.ts

@@ -3,6 +3,7 @@
  */
 export declare type FormState = {
     config: FormConfig;
+    popperClass?: string;
     initValues: FormValue;
     values: FormValue;
     $emit: (event: string, ...args: any[]) => void;
@@ -91,6 +92,7 @@ export interface Rule {
         /** 整个表单的值 */
         formValue: FormValue;
         prop: string;
+        config: any;
     }, mForm: FormState | undefined) => void;
 }
 export interface Input {
@@ -106,12 +108,14 @@ declare type FilterFunction = (mForm: FormState | undefined, data: {
     parent?: Record<any, any>;
     formValue: Record<any, any>;
     prop: string;
+    config: any;
 }) => boolean;
 declare type OnChangeHandler = (mForm: FormState | undefined, value: any, data: {
     model: Record<any, any>;
     values: Record<any, any>;
     parent?: Record<any, any>;
     formValue: Record<any, any>;
+    config: any;
 }) => any;
 declare type DefaultValueFunction = (mForm: FormState | undefined) => any;
 /**
@@ -137,18 +141,22 @@ export interface SelectGroupOption {
 }
 declare type SelectOptionFunction = (mForm: FormState | undefined, data: {
     model: any;
+    prop?: string;
     formValues: any;
     formValue: any;
+    config: any;
 }) => SelectOption[] | SelectGroupOption[];
 declare type RemoteSelectOptionBodyFunction = (mForm: FormState | undefined, data: {
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
 }) => Record<string, any>;
 declare type RemoteSelectOptionRequestFunction = (mForm: FormState | undefined, res: any, data: {
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
 }) => any;
 declare type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[];
 declare type SelectOptionValueFunction = (item: Record<string, any>) => any;
@@ -394,6 +402,7 @@ export interface TabPaneConfig {
     lazy?: boolean;
     labelWidth?: string;
     items: FormConfig;
+    [key: string]: any;
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
     type: 'tab' | 'dynamic-tab';
@@ -431,6 +440,7 @@ export interface ColumnConfig extends FormItem, ContainerCommonConfig {
     label: string;
     width: string | number;
     sortable: boolean;
+    [key: string]: any;
 }
 /**
  * 表格容器

package/package.json

@@ -1,7 +1,10 @@
 {
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-rc.10",
   "name": "@tmagic/form",
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/*",
+    "src/theme/*"
+  ],
   "main": "dist/tmagic-form.umd.js",
   "module": "dist/tmagic-form.es.js",
   "style": "dist/style.css",
@@ -14,8 +17,10 @@
     "./dist/style.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
-    }
+    },
+    "./*": "./*"
   },
+  "license": "Apache-2.0",
   "scripts": {
     "build": "vite build"
   },
@@ -28,21 +33,26 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "^1.0.0-beta.6",
-    "element-plus": "^2.0.2",
+    "@tmagic/utils": "1.0.0-rc.10",
+    "element-plus": "^2.2.0",
     "lodash-es": "^4.17.21",
-    "moment": "^2.29.1",
+    "moment": "^2.29.2",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.0"
   },
+  "peerDependencies": {
+    "element-plus": "^2.2.0",
+    "vue": "^3.2.0"
+  },
   "devDependencies": {
+    "@babel/core": "^7.18.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.12",
+    "@vue/test-utils": "^2.0.0",
     "sass": "^1.35.1",
     "typescript": "^4.3.4",
     "vite": "^2.3.7",

package/src/Form.vue

@@ -86,7 +86,7 @@ export default defineComponent({
     },
 
     size: {
-      type: String,
+      type: String as PropType<'small' | 'default' | 'large'>,
     },
 
     inline: {
@@ -103,6 +103,10 @@ export default defineComponent({
       type: String,
       default: '__key',
     },
+
+    popperClass: {
+      type: String,
+    },
   },
 
   emits: ['change', 'field-input', 'field-change'],
@@ -117,6 +121,7 @@ export default defineComponent({
 
     const formState: FormState = reactive<FormState>({
       keyProp: props.keyProp,
+      popperClass: props.popperClass,
       config: props.config,
       initValues: props.initValues,
       parentValues: props.parentValues,
@@ -172,7 +177,7 @@ export default defineComponent({
       submitForm: async (native?: boolean): Promise<any> => {
         try {
           await elForm.value?.validate();
-          return native ? values.value : cloneDeep(values.value);
+          return native ? values.value : cloneDeep(toRaw(values.value));
         } catch (invalidFields: any) {
           const error: string[] = [];
 

package/src/FormDialog.vue

@@ -78,7 +78,7 @@ export default defineComponent({
 
     labelWidth: [Number, String],
 
-    size: String as PropType<'mini' | 'small' | 'medium'>,
+    size: String as PropType<'small' | 'default' | 'large'>,
 
     confirmText: {
       type: String,

package/src/containers/Col.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-col v-show="display && config.type !== 'hidden'" :span="span">
+    <m-form-container
+      :model="model"
+      :config="config"
+      :prop="prop"
+      :label-width="config.labelWidth || labelWidth"
+      :expand-more="expandMore"
+      :size="size"
+      @change="changeHandler"
+    ></m-form-container>
+  </el-col>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType } from 'vue';
+
+import { ChildConfig, FormState } from '../schema';
+import { display as displayFunction } from '../utils/form';
+
+export default defineComponent({
+  props: {
+    labelWidth: String,
+    expandMore: Boolean,
+    span: Number,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<ChildConfig>,
+      default: () => ({}),
+    },
+
+    prop: String,
+
+    size: String,
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+
+    const changeHandler = () => emit('change', props.model);
+
+    return {
+      mForm,
+      display: computed(() => displayFunction(mForm, props.config.display, props)),
+      changeHandler,
+    };
+  },
+});
+</script>

package/src/containers/Container.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="config" :style="config.tip ? 'display: flex' : ''" :class="config.className" class="m-form-container">
+  <div
+    v-if="config"
+    :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
+    :class="config.className"
+    class="m-form-container"
+  >
     <m-fields-hidden
       v-if="type === 'hidden'"
       :model="model"
@@ -20,15 +25,16 @@
       :prop="itemProp"
       :step-active="stepActive"
       :expand-more="expand"
-      :label-width="config.labelWidth || labelWidth"
+      :label-width="itemLabelWidth"
       @change="onChangeHandler"
     ></component>
 
     <template v-else-if="type && display">
       <el-form-item
         :style="config.tip ? 'flex: 1' : ''"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
         :prop="itemProp"
-        :label-width="config.text ? config.labelWidth || labelWidth : '0'"
+        :label-width="itemLabelWidth"
         :rules="rule"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
@@ -65,8 +71,8 @@
         <div v-if="extra" v-html="extra" class="m-form-tip"></div>
       </el-form-item>
 
-      <el-tooltip v-if="config.tip" placement="top" style="line-height: 40px; margin-left: 5px">
-        <i class="el-icon-warning"></i>
+      <el-tooltip v-if="config.tip" placement="left">
+        <el-icon style="line-height: 40px; margin-left: 5px"><warning-filled /></el-icon>
         <template #content>
           <div v-html="config.tip"></div>
         </template>
@@ -83,7 +89,7 @@
           :size="size"
           :step-active="stepActive"
           :expand-more="expand"
-          :label-width="config.labelWidth || labelWidth"
+          :label-width="itemLabelWidth"
           :prop="itemProp"
           @change="onChangeHandler"
         ></m-form-container>
@@ -91,13 +97,14 @@
     </template>
 
     <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
-      <el-button type="text" @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</el-button>
+      <el-button text @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</el-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, ref, resolveComponent, watchEffect } from 'vue';
+import { WarningFilled } from '@element-plus/icons';
 
 import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
@@ -105,6 +112,8 @@ import { display as displayFunction, filterFunction, getRules } from '../utils/f
 export default defineComponent({
   name: 'm-form-container',
 
+  components: { WarningFilled },
+
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -145,7 +154,18 @@ export default defineComponent({
 
     const items = computed(() => (props.config as ContainerCommonConfig).items);
 
-    const itemProp = computed(() => (name.value ? `${props.prop}${props.prop ? '.' : ''}${name.value}` : props.prop));
+    const itemProp = computed(() => {
+      let n: string | number = '';
+      const { names } = props.config as any;
+      if (names?.[0]) {
+        [n] = names;
+      } else if (name.value) {
+        n = name.value;
+      } else {
+        return props.prop;
+      }
+      return `${props.prop}${props.prop ? '.' : ''}${n}`;
+    });
 
     const tagName = computed(() => {
       const component = resolveComponent(`m-${items.value ? 'form' : 'fields'}-${type.value}`);
@@ -180,6 +200,8 @@ export default defineComponent({
       return displayFunction(mForm, props.config.display, props);
     });
 
+    const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
+
     watchEffect(() => {
       expand.value = props.expandMore;
     });
@@ -195,6 +217,7 @@ export default defineComponent({
           values: mForm?.initValues,
           formValue: mForm?.values,
           prop: itemProp.value,
+          config: props.config,
         });
       }
 
@@ -212,6 +235,7 @@ export default defineComponent({
           values: mForm?.initValues,
           formValue: mForm?.values,
           prop: itemProp.value,
+          config: props.config,
         });
       }
     };
@@ -224,10 +248,15 @@ export default defineComponent({
 
     const onChangeHandler = async function (v: FormValue, key?: string) {
       const { filter, onChange, trim, name, dynamicKey } = props.config as any;
-      let value: FormValue | number | string = filterHandler(filter, v);
-
-      value = (await changeHandler(onChange, value)) ?? value;
-      value = trimHandler(trim, value) ?? value;
+      let value: FormValue | number | string = v;
+
+      try {
+        value = filterHandler(filter, v);
+        value = (await changeHandler(onChange, value)) ?? value;
+        value = trimHandler(trim, value) ?? value;
+      } catch (e) {
+        console.error(e);
+      }
 
       // field内容下包含field-link时，model===value, 这里避免循环引用
       if ((name || name === 0) && props.model !== value && (v !== value || props.model[name] !== value)) {
@@ -250,6 +279,7 @@ export default defineComponent({
       itemProp,
       items,
       display,
+      itemLabelWidth,
       tagName,
       rule,
       tooltip,

package/src/containers/GroupListItem.vue

@@ -5,21 +5,21 @@
         ><caret-bottom v-if="expand" /><caret-right v-else
       /></el-icon>
 
-      <el-button type="text" @click="expandHandler">{{ title }}</el-button>
+      <el-button text @click="expandHandler">{{ title }}</el-button>
 
       <el-button
         v-show="showDelete(parseInt(String(index)))"
-        type="text"
+        text
         :icon="Delete"
         style="color: #f56c6c"
         @click="removeHandler"
       ></el-button>
 
       <template v-if="movable()">
-        <el-button v-show="index !== 0" type="text" size="small" @click="changeOrder(-1)"
+        <el-button v-show="index !== 0" text size="small" @click="changeOrder(-1)"
           >上移<el-icon><CaretRight /></el-icon
         ></el-button>
-        <el-button v-show="index !== length - 1" type="text" size="small" @click="changeOrder(1)"
+        <el-button v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
           >下移<el-icon><CaretBottom /></el-icon
         ></el-button>
       </template>

package/src/containers/Row.vue

@@ -1,21 +1,17 @@
 <template>
   <el-row :gutter="10">
-    <el-col
+    <Col
       v-for="(col, index) in config.items"
-      :style="!display(col) || col.type === 'hidden' ? 'display: none' : ''"
       :key="col[mForm?.keyProp || '__key'] ?? index"
       :span="col.span || config.span || 24 / config.items.length"
-    >
-      <m-form-container
-        :model="name ? model[name] : model"
-        :config="col"
-        :prop="prop"
-        :label-width="config.labelWidth || labelWidth"
-        :expand-more="expandMore"
-        :size="size"
-        @change="changeHandler"
-      ></m-form-container>
-    </el-col>
+      :config="col"
+      :labelWidth="config.labelWidth || labelWidth"
+      :expandMore="expandMore"
+      :model="name ? model[name] : model"
+      :prop="prop"
+      :size="size"
+      @change="changeHandler"
+    />
   </el-row>
 </template>
 
@@ -23,11 +19,14 @@
 import { defineComponent, inject, PropType } from 'vue';
 
 import { FormState, RowConfig } from '../schema';
-import { display as displayFunction } from '../utils/form';
+
+import Col from './Col.vue';
 
 export default defineComponent({
   name: 'm-form-row',
 
+  components: { Col },
+
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -58,9 +57,6 @@ export default defineComponent({
 
     return {
       mForm,
-      display(config: any) {
-        return displayFunction(mForm, config.display, props);
-      },
       changeHandler,
     };
   },

package/src/containers/Table.vue

@@ -25,8 +25,8 @@
             <template v-slot="scope">
               <el-button
                 v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-                style="color: #f56c6c"
-                type="text"
+                type="danger"
+                text
                 :icon="Delete"
                 @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
               ></el-button>
@@ -43,8 +43,9 @@
                 <el-button
                   plain
                   size="small"
+                  type="primary"
                   :icon="ArrowUp"
-                  type="text"
+                  text
                   @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                 ></el-button>
@@ -57,8 +58,9 @@
                 <el-button
                   plain
                   size="small"
+                  type="primary"
                   :icon="ArrowDown"
-                  type="text"
+                  text
                   @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                 ></el-button>
@@ -107,10 +109,16 @@
       </el-tooltip>
       <slot></slot>
       <el-button v-if="addable" size="small" type="primary" plain @click="newHandler()">添加</el-button> &nbsp;
-      <el-button :icon="Grid" size="small" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
+      <el-button :icon="Grid" size="small" type="primary" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
         >展开配置</el-button
       >
-      <el-button :icon="FullScreen" size="small" @click="toggleFullscreen" v-if="config.enableFullscreen !== false">
+      <el-button
+        :icon="FullScreen"
+        size="small"
+        type="primary"
+        @click="toggleFullscreen"
+        v-if="config.enableFullscreen !== false"
+      >
         {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
       </el-button>
       <el-upload
@@ -468,7 +476,7 @@ export default defineComponent({
         }
         emit('select', selection, row);
         if (typeof props.config.onSelect === 'function') {
-          props.config.onSelect(mForm, { selection, row });
+          props.config.onSelect(mForm, { selection, row, config: props.config });
         }
       },
 

package/src/containers/Tabs.vue

@@ -59,12 +59,12 @@ const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) =>
   tab.name = tab.paneName;
 
   if (typeof config.onTabClick === 'function') {
-    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
   }
 
   const tabConfig = config.items.find((item: TabPaneConfig) => tab.name === item.status);
   if (tabConfig && typeof tabConfig.onTabClick === 'function') {
-    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
   }
 };
 
@@ -136,7 +136,11 @@ const Tab = defineComponent({
         if (!props.config.name) throw new Error('dynamic tab 必须配置name');
 
         if (typeof props.config.onTabAdd === 'function') {
-          props.config.onTabAdd(mForm, { model: props.model });
+          props.config.onTabAdd(mForm, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config,
+          });
         } else if (tabs.value.length > 0) {
           const newObj = cloneDeep(tabs.value[0]);
           newObj.title = `标签${tabs.value.length + 1}`;
@@ -150,7 +154,11 @@ const Tab = defineComponent({
         if (!props.config.name) throw new Error('dynamic tab 必须配置name');
 
         if (typeof props.config.onTabRemove === 'function') {
-          props.config.onTabRemove(mForm, tabName, { model: props.model });
+          props.config.onTabRemove(mForm, tabName, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config,
+          });
         } else {
           props.model[props.config.name].splice(+tabName, 1);
 
@@ -169,7 +177,7 @@ const Tab = defineComponent({
       changeHandler: () => {
         emit('change', props.model);
         if (typeof props.config.onChange === 'function') {
-          props.config.onChange(mForm, { model: props.model });
+          props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
         }
       },
     };