perf: move src/types to root

Vben

2021-02-26 fcee7d4eb71471dd40567c8d7c97302eeee80697

 src/components/Form/src/BasicForm.vue

@@ -1,7 +1,7 @@
<template>
  <Form v-bind="{ ...$attrs, ...$props }" ref="formElRef" :model="formModel">
    <Row :class="getProps.compact ? 'compact-form-row' : ''" :style="getRowWrapStyle">
      <slot name="formHeader" />
  <Form v-bind="{ ...$attrs, ...$props }" :class="getFormClass" ref="formElRef" :model="formModel">
    <Row :style="getRowWrapStyle">
      <slot name="formHeader"></slot>
      <template v-for="schema in getSchema" :key="schema.field">
        <FormItem
          :tableAction="tableAction"
@@ -13,50 +13,67 @@
          :setFormModel="setFormModel"
        >
          <template #[item]="data" v-for="item in Object.keys($slots)">
            <slot :name="item" v-bind="data" />
            <slot :name="item" v-bind="data"></slot>
          </template>
        </FormItem>
      </template>

      <!--  -->
      <FormAction
        v-bind="{ ...getProps, ...advanceState }"
        @toggle-advanced="handleToggleAdvanced"
      />
      <slot name="formFooter" />
      <FormAction v-bind="{ ...getProps, ...advanceState }" @toggle-advanced="handleToggleAdvanced">
        <template
          #[item]="data"
          v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']"
        >
          <slot :name="item" v-bind="data"></slot>
        </template>
      </FormAction>
      <slot name="formFooter"></slot>
    </Row>
  </Form>
</template>
<script lang="ts">
  import type { FormActionType, FormProps, FormSchema } from './types/form';
  import type { AdvanceState } from './types/hooks';
  import type { CSSProperties, Ref, WatchStopHandle } from 'vue';
  import type { CSSProperties, Ref } from 'vue';

  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
  import {
    defineComponent,
    reactive,
    ref,
    computed,
    unref,
    onMounted,
    watch,
    toRefs,
    nextTick,
  } from 'vue';
  import { Form, Row } from 'ant-design-vue';
  import FormItem from './components/FormItem';
  import FormAction from './components/FormAction.vue';

  import { dateItemType } from './helper';
  import moment from 'moment';
  import { cloneDeep } from 'lodash-es';
  import { dateUtil } from '/@/utils/dateUtil';

  // import { cloneDeep } from 'lodash-es';
  import { deepMerge } from '/@/utils';

  import { useFormValues } from './hooks/useFormValues';
  import useAdvanced from './hooks/useAdvanced';
  import { useFormEvents } from './hooks/useFormEvents';
  import { createFormContext } from './hooks/useFormContext';
  import { useAutoFocus } from './hooks/useAutoFocus';
  import { useModalContext } from '/@/components/Modal';

  import { basicProps } from './props';
  import { useDesign } from '/@/hooks/web/useDesign';

  export default defineComponent({
    name: 'BasicForm',
    components: { FormItem, Form, Row, FormAction },
    inheritAttrs: false,
    props: basicProps,
    emits: ['advanced-change', 'reset', 'submit', 'register'],
    setup(props, { emit }) {
      const formModel = reactive<Recordable>({});
      const modalFn = useModalContext();

      const advanceState = reactive<AdvanceState>({
        isAdvanced: true,
@@ -71,12 +88,23 @@
      const schemaRef = ref<Nullable<FormSchema[]>>(null);
      const formElRef = ref<Nullable<FormActionType>>(null);

      const { prefixCls } = useDesign('basic-form');

      // Get the basic configuration of the form
      const getProps = computed(
        (): FormProps => {
          return deepMerge(cloneDeep(props), unref(propsRef));
          return { ...props, ...unref(propsRef) } as FormProps;
        }
      );

      const getFormClass = computed(() => {
        return [
          prefixCls,
          {
            [`${prefixCls}--compact`]: unref(getProps).compact,
          },
        ];
      });

      // Get uniform row style
      const getRowWrapStyle = computed(
@@ -93,11 +121,11 @@
          // handle date type
          if (defaultValue && dateItemType.includes(component)) {
            if (!Array.isArray(defaultValue)) {
              schema.defaultValue = moment(defaultValue);
              schema.defaultValue = dateUtil(defaultValue);
            } else {
              const def: moment.Moment[] = [];
              defaultValue.forEach((item) => {
                def.push(moment(item));
                def.push(dateUtil(item));
              });
              schema.defaultValue = def;
            }
@@ -115,7 +143,7 @@
        defaultValueRef,
      });

      const { transformDateFunc, fieldMapToTime } = toRefs(props);
      const { transformDateFunc, fieldMapToTime, autoFocusFirstItem } = toRefs(props);

      const { handleFormValues, initDefault } = useFormValues({
        transformDateFuncRef: transformDateFunc,
@@ -123,6 +151,13 @@
        defaultValueRef,
        getSchema,
        formModel,
      });

      useAutoFocus({
        getSchema,
        autoFocusFirstItem,
        isInitedDefault: isInitedDefaultRef,
        formElRef: formElRef as Ref<FormActionType>,
      });

      const {
@@ -165,11 +200,15 @@
        }
      );

      const stopWatch: WatchStopHandle = watch(
      watch(
        () => getSchema.value,
        (schema) => {
          nextTick(() => {
            //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
            modalFn?.redoModalHeight?.();
          });
          if (unref(isInitedDefaultRef)) {
            return stopWatch();
            return;
          }
          if (schema?.length) {
            initDefault();
@@ -217,8 +256,50 @@
        getSchema,
        formActionType,
        setFormModel,
        prefixCls,
        getFormClass,
        ...formActionType,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-basic-form';

  .@{prefix-cls} {
    .ant-form-item {
      &-label label::after {
        margin: 0 6px 0 2px;
      }

      &-with-help {
        margin-bottom: 0;
      }

      &:not(.ant-form-item-with-help) {
        margin-bottom: 20px;
      }

      &.suffix-item {
        .ant-form-item-children {
          display: flex;
        }

        .suffix {
          display: inline-block;
          padding-left: 6px;
        }
      }
    }

    .ant-form-explain {
      font-size: 14px;
    }

    &--compact {
      .ant-form-item {
        margin-bottom: 8px !important;
      }
    }
  }
</style>