perf: format code with better style (#5283)

packages/@core/ui-kit/form-ui/src/config.ts

@@ -1,10 +1,11 @@
+import type { Component } from 'vue';
+
 import type {
   BaseFormComponentType,
   FormCommonConfig,
   VbenFormAdapterOptions,
 } from './types';
 
-import type { Component } from 'vue';
 import { h } from 'vue';
 
 import {

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -1,4 +1,3 @@
-import type { Recordable } from '@vben-core/typings';
 import type {
   FormState,
   GenericObject,
@@ -6,6 +5,8 @@ import type {
   ValidationOptions,
 } from 'vee-validate';
 
+import type { Recordable } from '@vben-core/typings';
+
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
 import { toRaw } from 'vue';
@@ -45,20 +46,20 @@ function getDefaultState(): VbenFormProps {
 }
 
 export class FormApi {
-  // 最后一次点击提交时的表单值
-  private latestSubmissionValues: null | Recordable<any> = null;
-  private prevState: null | VbenFormProps = null;
-
   // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
   public form = {} as FormActions;
   isMounted = false;
 
   public state: null | VbenFormProps = null;
-
   stateHandler: StateHandler;
 
   public store: Store<VbenFormProps>;
 
+  // 最后一次点击提交时的表单值
+  private latestSubmissionValues: null | Recordable<any> = null;
+
+  private prevState: null | VbenFormProps = null;
+
   constructor(options: VbenFormProps = {}) {
     const { ...storeState } = options;
 
@@ -83,40 +84,6 @@ export class FormApi {
     bindMethods(this);
   }
 
-  private async getForm() {
-    if (!this.isMounted) {
-      // 等待form挂载
-      await this.stateHandler.waitForCondition();
-    }
-    if (!this.form?.meta) {
-      throw new Error('<VbenForm /> is not mounted');
-    }
-    return this.form;
-  }
-
-  private updateState() {
-    const currentSchema = this.state?.schema ?? [];
-    const prevSchema = this.prevState?.schema ?? [];
-    // 进行了删除schema操作
-    if (currentSchema.length < prevSchema.length) {
-      const currentFields = new Set(
-        currentSchema.map((item) => item.fieldName),
-      );
-      const deletedSchema = prevSchema.filter(
-        (item) => !currentFields.has(item.fieldName),
-      );
-
-      for (const schema of deletedSchema) {
-        this.form?.setFieldValue(schema.fieldName, undefined);
-      }
-    }
-  }
-
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   getLatestSubmissionValues() {
     return this.latestSubmissionValues || {};
   }
@@ -363,4 +330,33 @@ export class FormApi {
     }
     return validateResult;
   }
+
+  private async getForm() {
+    if (!this.isMounted) {
+      // 等待form挂载
+      await this.stateHandler.waitForCondition();
+    }
+    if (!this.form?.meta) {
+      throw new Error('<VbenForm /> is not mounted');
+    }
+    return this.form;
+  }
+
+  private updateState() {
+    const currentSchema = this.state?.schema ?? [];
+    const prevSchema = this.prevState?.schema ?? [];
+    // 进行了删除schema操作
+    if (currentSchema.length < prevSchema.length) {
+      const currentFields = new Set(
+        currentSchema.map((item) => item.fieldName),
+      );
+      const deletedSchema = prevSchema.filter(
+        (item) => !currentFields.has(item.fieldName),
+      );
+
+      for (const schema of deletedSchema) {
+        this.form?.setFieldValue(schema.fieldName, undefined);
+      }
+    }
+  }
 }

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -44,9 +44,9 @@ const {
   renderComponentContent,
   rules,
 } = defineProps<
-  {
+  Props & {
     commonComponentProps: MaybeComponentProps;
-  } & Props
+  }
 >();
 
 const { componentBindEventMap, componentMap, isVertical } = useFormContext();

packages/@core/ui-kit/form-ui/src/form-render/form.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { GenericObject } from 'vee-validate';
 import type { ZodTypeAny } from 'zod';
 
 import type {
@@ -13,8 +14,6 @@ import { computed } from 'vue';
 import { Form } from '@vben-core/shadcn-ui';
 import { cn, isString, mergeWithArrayOverride } from '@vben-core/shared/utils';
 
-import { type GenericObject } from 'vee-validate';
-
 import { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
 import FormField from './form-field.vue';
@@ -23,7 +22,7 @@ import { getBaseRules, getDefaultValueInZodStack } from './helper';
 interface Props extends FormRenderProps {}
 
 const props = withDefaults(
-  defineProps<{ globalCommonConfig?: FormCommonConfig } & Props>(),
+  defineProps<Props & { globalCommonConfig?: FormCommonConfig }>(),
   {
     collapsedRows: 1,
     commonConfig: () => ({}),
@@ -81,10 +80,10 @@ const formCollapsed = computed(() => {
 });
 
 const computedSchema = computed(
-  (): ({
+  (): (Omit<FormSchema, 'formFieldProps'> & {
     commonComponentProps: Record<string, any>;
     formFieldProps: Record<string, any>;
-  } & Omit<FormSchema, 'formFieldProps'>)[] => {
+  })[] => {
     const {
       colon = false,
       componentProps = {},

packages/@core/ui-kit/form-ui/src/form-render/index.ts

@@ -1,3 +1,3 @@
-export { default as Form } from './form.vue';
 export { default as FormField } from './form-field.vue';
 export { default as FormLabel } from './form-label.vue';
+export { default as Form } from './form.vue';

packages/@core/ui-kit/form-ui/src/index.ts

@@ -3,8 +3,8 @@ export { setupVbenForm } from './config';
 export type {
   BaseFormComponentType,
   ExtendedFormApi,
-  FormSchema as VbenFormSchema,
   VbenFormProps,
+  FormSchema as VbenFormSchema,
 } from './types';
 
 export * from './use-vben-form';

packages/@core/ui-kit/form-ui/src/types.ts

@@ -1,12 +1,13 @@
-import type { VbenButtonProps } from '@vben-core/shadcn-ui';
-import type { ClassType } from '@vben-core/typings';
 import type { FieldOptions, FormContext, GenericObject } from 'vee-validate';
 import type { ZodTypeAny } from 'zod';
 
-import type { FormApi } from './form-api';
-
 import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
 
+import type { VbenButtonProps } from '@vben-core/shadcn-ui';
+import type { ClassType } from '@vben-core/typings';
+
+import type { FormApi } from './form-api';
+
 export type FormLayout = 'horizontal' | 'vertical';
 
 export type BaseFormComponentType =
@@ -19,7 +20,7 @@ export type BaseFormComponentType =
   | 'VbenSelect'
   | (Record<never, never> & string);
 
-type Breakpoints = '' | '2xl:' | '3xl:' | 'lg:' | 'md:' | 'sm:' | 'xl:';
+type Breakpoints = '2xl:' | '3xl:' | '' | 'lg:' | 'md:' | 'sm:' | 'xl:';
 
 type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
 
@@ -35,12 +36,12 @@ export type FormItemClassType =
   | WrapperClassType;
 
 export type FormFieldOptions = Partial<
-  {
+  FieldOptions & {
     validateOnBlur?: boolean;
     validateOnChange?: boolean;
     validateOnInput?: boolean;
     validateOnModelUpdate?: boolean;
-  } & FieldOptions
+  }
 >;
 
 export interface FormShape {
@@ -372,11 +373,11 @@ export interface VbenFormProps<
   submitOnEnter?: boolean;
 }
 
-export type ExtendedFormApi = {
+export type ExtendedFormApi = FormApi & {
   useStore: <T = NoInfer<VbenFormProps>>(
     selector?: (state: NoInfer<VbenFormProps>) => T,
   ) => Readonly<Ref<T>>;
-} & FormApi;
+};
 
 export interface VbenFormAdapterOptions<
   T extends BaseFormComponentType = BaseFormComponentType,

packages/@core/ui-kit/form-ui/src/use-form-context.ts

@@ -1,12 +1,16 @@
+import type { ZodRawShape } from 'zod';
+
+import type { ComputedRef } from 'vue';
+
 import type { FormActions, VbenFormProps } from './types';
 
-import { computed, type ComputedRef, unref, useSlots } from 'vue';
+import { computed, unref, useSlots } from 'vue';
 
 import { createContext } from '@vben-core/shadcn-ui';
 import { isString } from '@vben-core/shared/utils';
 
 import { useForm } from 'vee-validate';
-import { object, type ZodRawShape } from 'zod';
+import { object } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';
 
 export const [injectFormProps, provideFormProps] =

packages/@core/ui-kit/form-ui/src/vben-use-form.vue

@@ -2,12 +2,10 @@
 import type { ExtendedFormApi, VbenFormProps } from './types';
 
 // import { toRaw, watch } from 'vue';
-
-import { useForwardPriorityValues } from '@vben-core/composables';
+import { nextTick, onMounted, watch } from 'vue';
 // import { isFunction } from '@vben-core/shared/utils';
 
-import { nextTick, onMounted, watch } from 'vue';
-
+import { useForwardPriorityValues } from '@vben-core/composables';
 import { cloneDeep } from '@vben-core/shared/utils';
 
 import { useDebounceFn } from '@vueuse/core';