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

package/src/Form.vue

@@ -1,17 +1,17 @@
 <template>
-  <el-form
+  <TMagicForm
     class="m-form"
-    ref="elForm"
+    ref="tMagicForm"
     :model="values"
     :label-width="labelWidth"
-    :disabled="disabled"
     :style="`height: ${height}`"
     :inline="inline"
     :label-position="labelPosition"
   >
     <template v-if="initialized && Array.isArray(config)">
-      <m-form-container
+      <Container
         v-for="(item, index) in config"
+        :disabled="disabled"
         :key="item[keyProp] ?? index"
         :config="item"
         :model="values"
@@ -19,175 +19,140 @@
         :step-active="stepActive"
         :size="size"
         @change="changeHandler"
-      ></m-form-container>
+      ></Container>
     </template>
-  </el-form>
+  </TMagicForm>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, provide, reactive, ref, toRaw, watch } from 'vue';
-import { cloneDeep, isEqual } from 'lodash-es';
+<script setup lang="ts" name="MForm">
+import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
+import cloneDeep from 'lodash-es/cloneDeep';
+import isEqual from 'lodash-es/isEqual';
 
+import { TMagicForm } from '@tmagic/design';
+
+import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
-import { FormConfig, FormState, FormValue } from './schema';
-
-interface ValidateError {
-  message: string;
-  field: string;
-}
-
-export default defineComponent({
-  name: 'm-form',
-
-  props: {
-    // 表单初始化值
-    initValues: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-
-    parentValues: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    // 表单配置
-    config: {
-      type: Array as PropType<FormConfig>,
-      required: true,
-      default: () => [],
-    },
-
-    labelWidth: {
-      type: String,
-      default: () => '200px',
-    },
-
-    disabled: {
-      type: Boolean,
-      default: () => false,
-    },
-
-    height: {
-      type: String,
-      default: () => 'auto',
-    },
-
-    stepActive: {
-      type: [String, Number],
-      default: () => 1,
-    },
-
-    size: {
-      type: String as PropType<'small' | 'default' | 'large'>,
-    },
-
-    inline: {
-      type: Boolean,
-      default: false,
-    },
-
-    labelPosition: {
-      type: String,
-      default: 'right',
-    },
-
-    keyProp: {
-      type: String,
-      default: '__key',
-    },
-
-    popperClass: {
-      type: String,
-    },
+import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
+
+const props = withDefaults(
+  defineProps<{
+    config: FormConfig;
+    initValues: Object;
+    parentValues?: Object;
+    labelWidth?: string;
+    disabled?: boolean;
+    height?: string;
+    stepActive?: string | number;
+    size?: 'small' | 'default' | 'large';
+    inline?: boolean;
+    labelPosition?: string;
+    keyProp?: string;
+    popperClass?: string;
+  }>(),
+  {
+    config: () => [],
+    initValues: () => ({}),
+    parentValues: () => ({}),
+    labelWidth: '200px',
+    disabled: false,
+    height: 'auto',
+    stepActive: 1,
+    inline: false,
+    labelPosition: 'right',
+    keyProp: '__key',
+  },
+);
+
+const emit = defineEmits(['change', 'field-input', 'field-change']);
+
+const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
+const initialized = ref(false);
+const values = ref<FormValue>({});
+const fields = new Map<string, any>();
+
+const requestFuc = getConfig('request') as Function;
+
+const formState: FormState = reactive<FormState>({
+  keyProp: props.keyProp,
+  popperClass: props.popperClass,
+  config: props.config,
+  initValues: props.initValues,
+  parentValues: props.parentValues,
+  values,
+  $emit: emit as (event: string, ...args: any[]) => void,
+  fields,
+  setField: (prop: string, field: any) => fields.set(prop, field),
+  getField: (prop: string) => fields.get(prop),
+  deleteField: (prop: string) => fields.delete(prop),
+  post: (options: any) => {
+    if (requestFuc) {
+      return requestFuc({
+        ...options,
+        method: 'POST',
+      });
+    }
   },
+});
 
-  emits: ['change', 'field-input', 'field-change'],
+watchEffect(() => {
+  formState.initValues = props.initValues;
+  formState.config = props.config;
+  formState.keyProp = props.keyProp;
+  formState.popperClass = props.popperClass;
+  formState.parentValues = props.parentValues;
+});
 
-  setup(props, { emit }) {
-    // InstanceType<typeof ElForm>，构建types的时候会出错
-    const elForm = ref<any>();
-    const initialized = ref(false);
-    const values = ref<FormValue>({});
-    const fields = new Map<string, any>();
+provide('mForm', formState);
 
-    const requestFuc = getConfig('request') as Function;
+watch(
+  [() => props.config, () => props.initValues],
+  ([config], [preConfig]) => {
+    if (!isEqual(toRaw(config), toRaw(preConfig))) {
+      initialized.value = false;
+    }
 
-    const formState: FormState = reactive<FormState>({
-      keyProp: props.keyProp,
-      popperClass: props.popperClass,
-      config: props.config,
+    initValue(formState, {
       initValues: props.initValues,
-      parentValues: props.parentValues,
-      values,
-      $emit: emit as (event: string, ...args: any[]) => void,
-      fields,
-      setField: (prop: string, field: any) => fields.set(prop, field),
-      getField: (prop: string) => fields.get(prop),
-      deleteField: (prop: string) => fields.delete(prop),
-      post: (options: any) => {
-        if (requestFuc) {
-          return requestFuc({
-            ...options,
-            method: 'POST',
-          });
-        }
-      },
+      config: props.config,
+    }).then((value) => {
+      values.value = value;
+      initialized.value = true;
     });
-
-    provide('mForm', formState);
-
-    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 },
+);
+
+const changeHandler = () => {
+  emit('change', values.value);
+};
+
+defineExpose({
+  values,
+  formState,
+  initialized,
+
+  changeHandler,
+
+  resetForm: () => tMagicForm.value?.resetFields(),
+
+  submitForm: async (native?: boolean): Promise<any> => {
+    try {
+      await tMagicForm.value?.validate();
+      return native ? values.value : cloneDeep(toRaw(values.value));
+    } catch (invalidFields: any) {
+      const error: string[] = [];
+
+      Object.entries(invalidFields).forEach(([, ValidateError]) => {
+        (ValidateError as ValidateError[]).forEach(({ field, message }) => {
+          if (field && message) error.push(`${field} -> ${message}`);
+          if (field && !message) error.push(`${field} -> 出现错误`);
+          if (!field && message) error.push(`${message}`);
         });
-      },
-      { immediate: true },
-    );
-
-    return {
-      initialized,
-      values,
-      elForm,
-
-      formState,
-
-      changeHandler: () => {
-        emit('change', values.value);
-      },
-
-      resetForm: () => elForm.value?.resetFields(),
-
-      submitForm: async (native?: boolean): Promise<any> => {
-        try {
-          await elForm.value?.validate();
-          return native ? values.value : cloneDeep(toRaw(values.value));
-        } catch (invalidFields: any) {
-          const error: string[] = [];
-
-          Object.entries(invalidFields).forEach(([, ValidateError]) => {
-            (ValidateError as ValidateError[]).forEach(({ field, message }) => {
-              if (field && message) error.push(`${field} -> ${message}`);
-              if (field && !message) error.push(`${field} -> 出现错误`);
-              if (!field && message) error.push(`${message}`);
-            });
-          });
-          throw new Error(error.join('<br>'));
-        }
-      },
-    };
+      });
+      throw new Error(error.join('<br>'));
+    }
   },
 });
 </script>

package/src/FormDialog.vue

@@ -1,11 +1,12 @@
 <template>
-  <el-dialog
+  <TMagicDialog
     v-model="dialogVisible"
     class="m-form-dialog"
     top="20px"
     append-to-body
     :title="title"
     :width="width"
+    :zIndex="zIndex"
     :fullscreen="fullscreen"
     :close-on-click-modal="false"
     @close="closeHandler"
@@ -15,159 +16,140 @@
       class="m-dialog-body"
       :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
     >
-      <m-form
+      <Form
         v-model="stepActive"
         ref="form"
         :size="size"
+        :disabled="disabled"
         :config="config"
         :init-values="values"
         :parent-values="parentValues"
         :label-width="labelWidth"
         @change="changeHandler"
-      ></m-form>
+      ></Form>
       <slot></slot>
     </div>
 
     <template #footer>
-      <el-row class="dialog-footer">
-        <el-col :span="12" style="text-align: left">
+      <TMagicRow class="dialog-footer">
+        <TMagicCol :span="12" style="text-align: left">
           <div style="min-height: 1px">
             <slot name="left"></slot>
           </div>
-        </el-col>
-        <el-col :span="12">
+        </TMagicCol>
+        <TMagicCol :span="12">
           <slot name="footer">
-            <el-button @click="cancel" size="small">取 消</el-button>
-            <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
-            <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
-              >下一步</el-button
+            <TMagicButton @click="cancel" size="small">取 消</TMagicButton>
+            <TMagicButton v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep"
+              >上一步</TMagicButton
             >
-            <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
+            <TMagicButton v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
+              >下一步</TMagicButton
+            >
+            <TMagicButton v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
               confirmText
-            }}</el-button>
+            }}</TMagicButton>
           </slot>
-        </el-col>
-      </el-row>
+        </TMagicCol>
+      </TMagicRow>
     </template>
-  </el-dialog>
+  </TMagicDialog>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue';
+<script setup lang="ts" name="MFormDialog">
+import { computed, ref } from 'vue';
+
+import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
 import { FormConfig, StepConfig } from './schema';
 
-export default defineComponent({
-  name: 'm-form-dialog',
-
-  props: {
-    values: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    parentValues: {
-      type: Object,
-    },
-
-    width: [Number, String],
-
-    fullscreen: Boolean,
-
-    title: String,
-
-    config: {
-      type: Array as PropType<FormConfig>,
-      required: true,
-      default: () => [],
-    },
-
-    labelWidth: [Number, String],
+const props = withDefaults(
+  defineProps<{
+    config?: FormConfig;
+    values?: Object;
+    parentValues?: Object;
+    width?: string | number;
+    labelWidth?: string;
+    fullscreen?: boolean;
+    disabled?: boolean;
+    title?: string;
+    zIndex?: number;
+    size?: 'small' | 'default' | 'large';
+    confirmText?: string;
+  }>(),
+  {
+    config: () => [],
+    values: () => ({}),
+    confirmText: '确定',
+  },
+);
+
+const emit = defineEmits(['close', 'submit', 'error', 'change']);
+
+const form = ref<InstanceType<typeof Form>>();
+const dialogVisible = ref(false);
+const saveFetch = ref(false);
+const stepActive = ref(1);
+const bodyHeight = ref(`${document.body.clientHeight - 194}px`);
+
+const stepCount = computed(() => {
+  const { length } = props.config;
+  for (let index = 0; index < length; index++) {
+    if (props.config[index].type === 'step') {
+      return (props.config[index] as StepConfig).items.length;
+    }
+  }
+  return 0;
+});
 
-    size: String as PropType<'small' | 'default' | 'large'>,
+const hasStep = computed(() => {
+  const { length } = props.config;
+  for (let index = 0; index < length; index++) {
+    if (props.config[index].type === 'step') {
+      return true;
+    }
+  }
 
-    confirmText: {
-      type: String,
-      default: '确定',
-    },
-  },
+  return false;
+});
 
-  emits: ['close', 'submit', 'error', 'change'],
-
-  setup(props, { emit }) {
-    const form = ref<InstanceType<typeof Form>>();
-    const dialogVisible = ref(false);
-    const saveFetch = ref(false);
-    const stepActive = ref(1);
-    const bodyHeight = ref(`${document.body.clientHeight - 194}px`);
-
-    const stepCount = computed(() => {
-      const { length } = props.config;
-      for (let index = 0; index < length; index++) {
-        if (props.config[index].type === 'step') {
-          return (props.config[index] as StepConfig).items.length;
-        }
-      }
-      return 0;
-    });
-
-    const hasStep = computed(() => {
-      const { length } = props.config;
-      for (let index = 0; index < length; index++) {
-        if (props.config[index].type === 'step') {
-          return true;
-        }
-      }
-
-      return false;
-    });
-
-    const cancel = () => {
-      dialogVisible.value = false;
-    };
-
-    const closeHandler = () => {
-      stepActive.value = 1;
-      emit('close');
-    };
-
-    const save = async () => {
-      try {
-        const values = await form.value?.submitForm();
-        emit('submit', values);
-      } catch (e) {
-        emit('error', e);
-      }
-    };
-
-    const preStep = () => {
-      stepActive.value -= 1;
-    };
-
-    const nextStep = () => {
-      stepActive.value += 1;
-    };
-
-    const changeHandler = (value: any) => {
-      emit('change', value);
-    };
-
-    return {
-      form,
-      saveFetch,
-      stepActive,
-      dialogVisible,
-      bodyHeight,
-      stepCount,
-      hasStep,
-      cancel,
-      closeHandler,
-      save,
-      preStep,
-      nextStep,
-      changeHandler,
-    };
-  },
+const cancel = () => {
+  dialogVisible.value = false;
+};
+
+const closeHandler = () => {
+  stepActive.value = 1;
+  emit('close');
+};
+
+const save = async () => {
+  try {
+    const values = await form.value?.submitForm();
+    emit('submit', values);
+  } catch (e) {
+    emit('error', e);
+  }
+};
+
+const preStep = () => {
+  stepActive.value -= 1;
+};
+
+const nextStep = () => {
+  stepActive.value += 1;
+};
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+
+defineExpose({
+  form,
+  saveFetch,
+  dialogVisible,
+
+  cancel,
+  save,
 });
 </script>

package/src/containers/Col.vue

@@ -1,56 +1,42 @@
 <template>
-  <el-col v-show="display && config.type !== 'hidden'" :span="span">
-    <m-form-container
+  <TMagicCol v-show="display && config.type !== 'hidden'" :span="span">
+    <Container
       :model="model"
       :config="config"
       :prop="prop"
       :label-width="config.labelWidth || labelWidth"
       :expand-more="expandMore"
       :size="size"
+      :disabled="disabled"
       @change="changeHandler"
-    ></m-form-container>
-  </el-col>
+    ></Container>
+  </TMagicCol>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+<script setup lang="ts" name="MFormCol">
+import { computed, inject } from 'vue';
+
+import { TMagicCol } from '@tmagic/design';
 
 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'],
+import Container from './Container.vue';
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
+const props = defineProps<{
+  model: any;
+  config: ChildConfig;
+  labelWidth?: string;
+  expandMore?: boolean;
+  span?: number;
+  size?: string;
+  prop?: string;
+  disabled?: boolean;
+}>();
 
-    const changeHandler = () => emit('change', props.model);
+const emit = defineEmits(['change']);
 
-    return {
-      mForm,
-      display: computed(() => displayFunction(mForm, props.config.display, props)),
-      changeHandler,
-    };
-  },
-});
+const mForm = inject<FormState | undefined>('mForm');
+const display = computed(() => displayFunction(mForm, props.config.display, props));
+const changeHandler = () => emit('change', props.model);
 </script>