@tmagic/form 1.1.6 → 1.2.0-beta.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.2.0-beta.10",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
@@ -35,14 +35,13 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/utils": "1.1.6",
-    "element-plus": "^2.2.17",
+    "@tmagic/design": "1.2.0-beta.10",
+    "@tmagic/utils": "1.2.0-beta.10",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "element-plus": "^2.2.17",
     "vue": "^3.2.37"
   },
   "devDependencies": {
@@ -57,6 +56,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
-    "vue-tsc": "^0.39.4"
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.0.8"
   }
 }

package/src/Form.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-form
+  <TMagicForm
     class="m-form"
-    ref="elForm"
+    ref="tMagicForm"
     :model="values"
     :label-width="labelWidth"
     :disabled="disabled"
@@ -10,7 +10,7 @@
     :label-position="labelPosition"
   >
     <template v-if="initialized && Array.isArray(config)">
-      <m-form-container
+      <Container
         v-for="(item, index) in config"
         :key="item[keyProp] ?? index"
         :config="item"
@@ -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,171 +1,153 @@
 <template>
-  <teleport to="body">
-    <div class="m-form-dialog" v-show="dialogVisible">
-      <el-dialog
-        v-model="dialogVisible"
-        top="20px"
-        :title="title"
-        :width="width"
-        :fullscreen="fullscreen"
-        :close-on-click-modal="false"
-        @close="closeHandler"
-      >
-        <div class="m-dialog-body" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`">
-          <m-form
-            v-model="stepActive"
-            ref="form"
-            :size="size"
-            :config="config"
-            :init-values="values"
-            :parent-values="parentValues"
-            :label-width="labelWidth"
-            @change="changeHandler"
-          ></m-form>
-          <slot></slot>
-        </div>
-
-        <template #footer>
-          <el-row class="dialog-footer">
-            <el-col :span="12" style="text-align: left">
-              <div style="min-height: 1px">
-                <slot name="left"></slot>
-              </div>
-            </el-col>
-            <el-col :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
-                >
-                <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
-                  confirmText
-                }}</el-button>
-              </slot>
-            </el-col>
-          </el-row>
-        </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"
+  >
+    <div
+      v-if="dialogVisible"
+      class="m-dialog-body"
+      :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
+    >
+      <Form
+        v-model="stepActive"
+        ref="form"
+        :size="size"
+        :config="config"
+        :init-values="values"
+        :parent-values="parentValues"
+        :label-width="labelWidth"
+        @change="changeHandler"
+      ></Form>
+      <slot></slot>
     </div>
-  </teleport>
+
+    <template #footer>
+      <TMagicRow class="dialog-footer">
+        <TMagicCol :span="12" style="text-align: left">
+          <div style="min-height: 1px">
+            <slot name="left"></slot>
+          </div>
+        </TMagicCol>
+        <TMagicCol :span="12">
+          <slot name="footer">
+            <TMagicButton @click="cancel" size="small">取 消</TMagicButton>
+            <TMagicButton v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep"
+              >上一步</TMagicButton
+            >
+            <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
+            }}</TMagicButton>
+          </slot>
+        </TMagicCol>
+      </TMagicRow>
+    </template>
+  </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;
+    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>