@tmagic/form 1.0.0-beta.1 → 1.0.0-beta.12

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

@@ -63,7 +63,7 @@ declare const _default: DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     size: string;
-    expandMore: boolean;
     prop: string;
+    expandMore: boolean;
 }>;
 export default _default;

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

@@ -48,9 +48,9 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    config: FieldsetConfig;
     model: Record<string, any>;
     rules: Record<string, any>;
-    config: FieldsetConfig;
     prop: string;
 }>;
 export default _default;

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

@@ -48,9 +48,9 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
     name: string;
     config: GroupListConfig;
+    model: Record<string, any>;
     prop: string;
 }>;
 export default _default;

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

@@ -64,8 +64,8 @@ declare const _default: DefineComponent<{
     "onSwap-item"?: ((...args: any[]) => any) | undefined;
     "onRemove-item"?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
     config: GroupListConfig;
+    model: Record<string, any>;
     index: string | number | symbol;
     groupModel: unknown[];
 }>;

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

@@ -35,7 +35,7 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
     config: PanelConfig;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -35,8 +35,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    config: RowConfig;
     model: Record<string, any>;
     expandMore: boolean;
-    config: RowConfig;
 }>;
 export default _default;

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

@@ -38,8 +38,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
     config: StepConfig;
     stepActive: number;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -18,7 +18,7 @@ declare const Tab: DefineComponent<{
     activeTabName: any;
     tabs: ComputedRef<any>;
     filter: (config: any) => any;
-    tabItems: (tab: TabPaneConfig) => TabPaneConfig[] | FormConfig;
+    tabItems: (tab: TabPaneConfig) => FormConfig | TabPaneConfig[];
     tabClickHandler: (tab: any) => void;
     onTabAdd: () => void;
     onTabRemove: (tabName: string) => void;
@@ -38,8 +38,8 @@ declare const Tab: DefineComponent<{
     prop: StringConstructor;
     size: StringConstructor;
 }>>, {
+    config: TabConfig;
     model: Record<string, any>;
     expandMore: boolean;
-    config: TabConfig;
 }>;
 export default Tab;

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

@@ -52,8 +52,8 @@ declare const _default: DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -49,8 +49,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -51,8 +51,8 @@ declare const _default: DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -50,8 +50,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -50,8 +50,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -69,8 +69,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -52,8 +52,8 @@ declare const _default: DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -48,8 +48,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -52,8 +52,8 @@ declare const _default: DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -54,8 +54,8 @@ declare const _default: DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
 }, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -49,8 +49,8 @@ declare const _default: DefineComponent<{
     initValues: ObjectConstructor;
     values: ObjectConstructor;
 }>>, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 export default _default;

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

@@ -47,8 +47,8 @@ declare const _default: DefineComponent<{
     initValues: ObjectConstructor;
     values: ObjectConstructor;
 }>>, {
-    model: Record<string, any>;
-    disabled: boolean;
     name: string;
+    disabled: boolean;
+    model: Record<string, any>;
 }>;
 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;
@@ -137,6 +138,7 @@ export interface SelectGroupOption {
 }
 declare type SelectOptionFunction = (mForm: FormState | undefined, data: {
     model: any;
+    prop?: string;
     formValues: any;
     formValue: any;
 }) => SelectOption[] | SelectGroupOption[];

package/package.json

@@ -1,14 +1,15 @@
 {
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.12",
   "name": "@tmagic/form",
-  "main": "dist/magic-form.umd.js",
-  "module": "dist/magic-form.es.js",
+  "sideEffects": false,
+  "main": "dist/tmagic-form.umd.js",
+  "module": "dist/tmagic-form.es.js",
   "style": "dist/style.css",
   "types": "dist/types/src/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/magic-form.es.js",
-      "require": "./dist/magic-form.umd.js"
+      "import": "./dist/tmagic-form.es.js",
+      "require": "./dist/tmagic-form.umd.js"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",
@@ -27,8 +28,8 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "^1.0.0-beta.1",
-    "element-plus": "^2.0.2",
+    "@tmagic/utils": "^1.0.0-beta.12",
+    "element-plus": "^2.1.7",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",
     "sortablejs": "^1.14.0",
@@ -47,5 +48,6 @@
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
-  }
+  },
+  "gitHead": "ae00dd242d593ac8f57ffcd34e10e99399c7d00b"
 }

package/src/Form.vue

@@ -1,6 +1,5 @@
 <template>
-  <ElForm
-    v-if="initialized && Array.isArray(config)"
+  <el-form
     class="m-form"
     ref="elForm"
     :model="values"
@@ -10,25 +9,26 @@
     :inline="inline"
     :label-position="labelPosition"
   >
-    <MContainer
-      v-for="(item, index) in config"
-      :key="item[keyProp] ?? index"
-      :config="item"
-      :model="values"
-      :label-width="item.labelWidth || labelWidth"
-      :step-active="stepActive"
-      :size="size"
-      @change="changeHandler"
-    ></MContainer>
-  </ElForm>
+    <template v-if="initialized && Array.isArray(config)">
+      <m-form-container
+        v-for="(item, index) in config"
+        :key="item[keyProp] ?? index"
+        :config="item"
+        :model="values"
+        :label-width="item.labelWidth || labelWidth"
+        :step-active="stepActive"
+        :size="size"
+        @change="changeHandler"
+      ></m-form-container>
+    </template>
+  </el-form>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, provide, reactive, ref, watchEffect } from 'vue';
+import { defineComponent, PropType, provide, reactive, ref, toRaw, watch } from 'vue';
 import { ElForm } from 'element-plus';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isEqual } from 'lodash-es';
 
-import MContainer from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import { FormConfig, FormState, FormValue } from './schema';
@@ -45,8 +45,6 @@ export interface FieldErrorList {
 export default defineComponent({
   name: 'm-form',
 
-  components: { ElForm, MContainer },
-
   props: {
     // 表单初始化值
     initValues: {
@@ -88,8 +86,7 @@ export default defineComponent({
     },
 
     size: {
-      type: String,
-      default: 'small',
+      type: String as PropType<'small' | 'default' | 'large'>,
     },
 
     inline: {
@@ -106,6 +103,10 @@ export default defineComponent({
       type: String,
       default: '__key',
     },
+
+    popperClass: {
+      type: String,
+    },
   },
 
   emits: ['change', 'field-input', 'field-change'],
@@ -120,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,
@@ -141,16 +143,23 @@ export default defineComponent({
 
     provide('mForm', formState);
 
-    watchEffect(() => {
-      initialized.value = false;
-      initValue(formState, {
-        initValues: props.initValues,
-        config: props.config,
-      }).then((value) => {
-        values.value = value;
-        initialized.value = true;
-      });
-    });
+    watch(
+      [() => props.config, () => props.initValues],
+      ([config], [preConfig]) => {
+        if (!isEqual(toRaw(config), toRaw(preConfig))) {
+          initialized.value = false;
+        }
+
+        initValue(formState, {
+          initValues: props.initValues,
+          config: props.config,
+        }).then((value) => {
+          values.value = value;
+          initialized.value = true;
+        });
+      },
+      { immediate: true },
+    );
 
     return {
       initialized,

package/src/FormDialog.vue

@@ -15,6 +15,7 @@
         <m-form
           v-model="stepActive"
           ref="form"
+          :size="size"
           :config="config"
           :init-values="values"
           :label-width="labelWidth"
@@ -77,6 +78,8 @@ export default defineComponent({
 
     labelWidth: [Number, String],
 
+    size: String as PropType<'small' | 'default' | 'large'>,
+
     confirmText: {
       type: String,
       default: '确定',

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"
@@ -65,8 +70,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="top">
+        <el-icon style="line-height: 40px; margin-left: 5px"><warning-filled /></el-icon>
         <template #content>
           <div v-html="config.tip"></div>
         </template>
@@ -98,6 +103,7 @@
 
 <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 +111,8 @@ import { display as displayFunction, filterFunction, getRules } from '../utils/f
 export default defineComponent({
   name: 'm-form-container',
 
+  components: { WarningFilled },
+
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -224,10 +232,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)) {

package/src/containers/Table.vue

@@ -21,7 +21,7 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="操作" width="50" :fixed="config.fixed === false ? undefined : 'left'">
+          <el-table-column label="操作" width="60" :fixed="config.fixed === false ? undefined : 'left'">
             <template v-slot="scope">
               <el-button
                 v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
@@ -33,7 +33,7 @@
             </template>
           </el-table-column>
 
-          <el-table-column v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="70">
+          <el-table-column v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
             <template v-slot="scope">
               <el-tooltip
                 content="点击上移，双击置顶"
@@ -74,7 +74,7 @@
             width="45"
           ></el-table-column>
 
-          <el-table-column width="50" label="序号">
+          <el-table-column width="60" label="序号">
             <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
           </el-table-column>
 
@@ -107,10 +107,10 @@
       </el-tooltip>
       <slot></slot>
       <el-button v-if="addable" size="small" type="primary" plain @click="newHandler()">添加</el-button> &nbsp;
-      <el-button icon="el-icon-s-grid" size="small" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
+      <el-button :icon="Grid" size="small" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
         >展开配置</el-button
       >
-      <el-button icon="el-icon-s-grid" size="small" @click="toggleFullscreen" v-if="config.enableFullscreen !== false">
+      <el-button :icon="FullScreen" size="small" @click="toggleFullscreen" v-if="config.enableFullscreen !== false">
         {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
       </el-button>
       <el-upload
@@ -145,7 +145,7 @@
 <script lang="ts">
 /* eslint-disable no-param-reassign */
 import { computed, defineComponent, inject, onMounted, PropType, ref, toRefs } from 'vue';
-import { ArrowDown, ArrowUp, Delete } from '@element-plus/icons';
+import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons';
 import { ElMessage, ElTable, ElUpload } from 'element-plus';
 import { cloneDeep } from 'lodash-es';
 import Sortable, { SortableEvent } from 'sortablejs';
@@ -396,6 +396,8 @@ export default defineComponent({
       ArrowDown,
       ArrowUp,
       Delete,
+      FullScreen,
+      Grid,
 
       data: computed(() =>
         props.model[modelName.value].filter(

package/src/containers/Tabs.vue

@@ -54,6 +54,10 @@ const getActive = (mForm: FormState | undefined, props: any, activeTabName: stri
 
 const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) => {
   const { config, model, prop } = props;
+
+  // 兼容vue2的element-ui
+  tab.name = tab.paneName;
+
   if (typeof config.onTabClick === 'function') {
     config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
   }

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,7 +15,7 @@
     :value-key="config.valueKey || 'value'"
     :allow-create="config.allowCreate"
     :disabled="disabled"
-    :remote-method="remoteMethod"
+    :remote-method="config.remote && remoteMethod"
     @change="changeHandler"
     @visible-change="visibleHandler"
   >
@@ -288,6 +289,7 @@ export default defineComponent({
             Promise.resolve(
               props.config.options(mForm, {
                 model: props.model,
+                prop: props.prop,
                 formValues: mForm?.values,
                 formValue: mForm?.values,
               }),
@@ -346,13 +348,12 @@ export default defineComponent({
       remote,
       options,
       moreLoadingVisible,
+      popperClass: mForm?.popperClass,
 
       getRequestFuc() {
         return getConfig('request');
       },
 
-      async getInitOption() {},
-
       changeHandler(value: any) {
         emit('change', value);
       },

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/schema.ts

@@ -21,6 +21,7 @@
  */
 export type FormState = {
   config: FormConfig;
+  popperClass?: string;
   initValues: FormValue;
   values: FormValue;
   $emit: (event: string, ...args: any[]) => void;
@@ -187,6 +188,7 @@ type SelectOptionFunction = (
   mForm: FormState | undefined,
   data: {
     model: any;
+    prop?: string;
     formValues: any;
     formValue: any;
   },

package/src/theme/table.scss

@@ -35,7 +35,6 @@
   }
 
   .el-table {
-    td,
     th {
       padding: 0 !important;
     }