diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts index 61760514a..a70337f2a 100644 --- a/apps/web-antd/src/adapter/component/index.ts +++ b/apps/web-antd/src/adapter/component/index.ts @@ -6,14 +6,38 @@ /* eslint-disable vue/one-component-per-file */ import type { + AutoCompleteProps, + ButtonProps, + CascaderProps, + CheckboxGroupProps, + CheckboxProps, + DatePickerProps, + DividerProps, + InputNumberProps, + InputProps, + MentionsProps, + RadioGroupProps, + RadioProps, + RateProps, + SelectProps, + SpaceProps, + SwitchProps, + TextAreaProps, + TimePickerProps, + TreeSelectProps, UploadChangeParam, UploadFile, UploadProps, } from 'ant-design-vue'; +import type { RangePickerProps } from 'ant-design-vue/es/date-picker'; import type { Component, Ref } from 'vue'; -import type { BaseFormComponentType } from '@vben/common-ui'; +import type { + ApiComponentSharedProps, + BaseFormComponentType, + IconPickerProps, +} from '@vben/common-ui'; import type { Sortable } from '@vben/hooks'; import type { Recordable } from '@vben/types'; @@ -592,6 +616,39 @@ export type ComponentType = | 'Upload' | BaseFormComponentType; +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +export interface ComponentPropsMap { + ApiCascader: ApiComponentSharedProps & CascaderProps; + ApiSelect: ApiComponentSharedProps & SelectProps; + ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; + AutoComplete: AutoCompleteProps; + Cascader: CascaderProps; + Checkbox: CheckboxProps; + CheckboxGroup: CheckboxGroupProps; + DatePicker: DatePickerProps; + DefaultButton: ButtonProps; + Divider: DividerProps; + IconPicker: IconPickerProps; + Input: InputProps; + InputNumber: InputNumberProps; + InputPassword: InputProps; + Mentions: MentionsProps; + PrimaryButton: ButtonProps; + Radio: RadioProps; + RadioGroup: RadioGroupProps; + RangePicker: RangePickerProps; + Rate: RateProps; + Select: SelectProps; + Space: SpaceProps; + Switch: SwitchProps; + Textarea: TextAreaProps; + TimePicker: TimePickerProps; + TreeSelect: TreeSelectProps; + Upload: UploadProps; +} + async function initComponentAdapter() { const components: Partial> = { // 如果你的组件体积比较大,可以使用异步加载 diff --git a/apps/web-antd/src/adapter/form-schema.ts b/apps/web-antd/src/adapter/form-schema.ts deleted file mode 100644 index 329525648..000000000 --- a/apps/web-antd/src/adapter/form-schema.ts +++ /dev/null @@ -1,95 +0,0 @@ -import type { - AutoCompleteProps, - ButtonProps, - CascaderProps, - CheckboxGroupProps, - CheckboxProps, - DatePickerProps, - DividerProps, - InputNumberProps, - InputProps, - MentionsProps, - RadioGroupProps, - RadioProps, - RateProps, - SelectProps, - SpaceProps, - SwitchProps, - TextAreaProps, - TimePickerProps, - TreeSelectProps, - UploadProps, -} from 'ant-design-vue'; -import type { RangePickerProps } from 'ant-design-vue/es/date-picker'; - -import type { Component } from 'vue'; - -import type { - ApiComponentSharedProps, - VbenFormSchema as CoreFormSchema, - FormActions, - IconPickerProps, -} from '@vben/common-ui'; - -import type { ComponentType } from './component'; - -type ComponentProps

= - | (( - value: Partial>, - actions: FormActions, - ) => P & Record) - | (P & Record); - -/** - * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 - */ -interface ComponentPropsMap { - ApiCascader: ApiComponentSharedProps & CascaderProps; - ApiSelect: ApiComponentSharedProps & SelectProps; - ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; - AutoComplete: AutoCompleteProps; - Cascader: CascaderProps; - Checkbox: CheckboxProps; - CheckboxGroup: CheckboxGroupProps; - DatePicker: DatePickerProps; - DefaultButton: ButtonProps; - Divider: DividerProps; - IconPicker: IconPickerProps; - Input: InputProps; - InputNumber: InputNumberProps; - InputPassword: InputProps; - Mentions: MentionsProps; - PrimaryButton: ButtonProps; - Radio: RadioProps; - RadioGroup: RadioGroupProps; - RangePicker: RangePickerProps; - Rate: RateProps; - Select: SelectProps; - Space: SpaceProps; - Switch: SwitchProps; - Textarea: TextAreaProps; - TimePicker: TimePickerProps; - TreeSelect: TreeSelectProps; - Upload: UploadProps; -} - -type BaseSchema = Omit< - CoreFormSchema, - 'component' | 'componentProps' ->; - -type RegisteredName = keyof ComponentPropsMap; - -type DiscriminatedFormSchema = { - [K in RegisteredName]: BaseSchema & { - component: K; - componentProps?: ComponentProps; - }; -}[RegisteredName]; - -type FallbackFormSchema = BaseSchema & { - component: Component | Exclude; - componentProps?: CoreFormSchema['componentProps']; -}; - -export type VbenFormSchema = DiscriminatedFormSchema | FallbackFormSchema; diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts index 943916b8d..b14015a5d 100644 --- a/apps/web-antd/src/adapter/form.ts +++ b/apps/web-antd/src/adapter/form.ts @@ -1,7 +1,9 @@ -import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; +import type { + VbenFormProps as FormProps, + VbenFormSchema as FormSchema, +} from '@vben/common-ui'; -import type { ComponentType } from './component'; -import type { VbenFormSchema } from './form-schema'; +import type { ComponentPropsMap, ComponentType } from './component'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -39,14 +41,9 @@ async function initSetupVbenForm() { }); } -type VbenFormProps = Omit, 'schema'> & { - schema?: VbenFormSchema[]; -}; - -function useVbenForm(options: VbenFormProps) { - return useForm(options as CoreFormProps); -} +const useVbenForm = useForm; export { initSetupVbenForm, useVbenForm, z }; -export type { VbenFormProps, VbenFormSchema }; +export type VbenFormSchema = FormSchema; +export type VbenFormProps = FormProps; diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index b0a1f0093..2cae4261b 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -1,8 +1,14 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; +import type { ComponentPropsMap, ComponentType } from './component'; + import { h } from 'vue'; -import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'; +import { useVbenForm as useForm } from '@vben/common-ui'; +import { + setupVbenVxeTable, + useVbenVxeGrid as useGrid, +} from '@vben/plugins/vxe-table'; import { Button, Image } from 'ant-design-vue'; @@ -62,9 +68,11 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化 // vxeUI.formats.add }, - useVbenForm, + useVbenForm: useVbenForm as typeof useForm, }); -export { useVbenVxeGrid }; +export const useVbenVxeGrid = >( + ...rest: Parameters> +) => useGrid(...rest); export type * from '@vben/plugins/vxe-table'; diff --git a/apps/web-antdv-next/src/adapter/component/index.ts b/apps/web-antdv-next/src/adapter/component/index.ts index 4ce4f57ad..ebe4c7b68 100644 --- a/apps/web-antdv-next/src/adapter/component/index.ts +++ b/apps/web-antdv-next/src/adapter/component/index.ts @@ -5,11 +5,39 @@ /* eslint-disable vue/one-component-per-file */ -import type { UploadChangeParam, UploadFile, UploadProps } from 'antdv-next'; +import type { + AutoCompleteProps, + ButtonProps, + CascaderProps, + CheckboxGroupProps, + CheckboxProps, + DatePickerProps, + DividerProps, + InputNumberProps, + InputProps, + MentionsProps, + RadioGroupProps, + RadioProps, + RangePickerProps, + RateProps, + SelectProps, + SpaceProps, + SwitchProps, + TextAreaProps, + TimePickerProps, + TreeSelectProps, + UploadChangeParam, + UploadFile, + UploadProps, +} from 'antdv-next'; import type { Component, Ref } from 'vue'; -import type { BaseFormComponentType } from '@vben/common-ui'; +import type { + ApiComponentSharedProps, + BaseFormComponentType, + IconPickerProps, +} from '@vben/common-ui'; import type { Recordable } from '@vben/types'; import { @@ -521,6 +549,39 @@ export type ComponentType = | 'Upload' | BaseFormComponentType; +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +export interface ComponentPropsMap { + ApiCascader: ApiComponentSharedProps & CascaderProps; + ApiSelect: ApiComponentSharedProps & SelectProps; + ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; + AutoComplete: AutoCompleteProps; + Cascader: CascaderProps; + Checkbox: CheckboxProps; + CheckboxGroup: CheckboxGroupProps; + DatePicker: DatePickerProps; + DefaultButton: ButtonProps; + Divider: DividerProps; + IconPicker: IconPickerProps; + Input: InputProps; + InputNumber: InputNumberProps; + InputPassword: InputProps; + Mentions: MentionsProps; + PrimaryButton: ButtonProps; + Radio: RadioProps; + RadioGroup: RadioGroupProps; + RangePicker: RangePickerProps; + Rate: RateProps; + Select: SelectProps; + Space: SpaceProps; + Switch: SwitchProps; + Textarea: TextAreaProps; + TimePicker: TimePickerProps; + TreeSelect: TreeSelectProps; + Upload: UploadProps; +} + async function initComponentAdapter() { const components: Partial> = { // 如果你的组件体积比较大,可以使用异步加载 diff --git a/apps/web-antdv-next/src/adapter/form-schema.ts b/apps/web-antdv-next/src/adapter/form-schema.ts deleted file mode 100644 index de850d1fb..000000000 --- a/apps/web-antdv-next/src/adapter/form-schema.ts +++ /dev/null @@ -1,95 +0,0 @@ -import type { - AutoCompleteProps, - ButtonProps, - CascaderProps, - CheckboxGroupProps, - CheckboxProps, - DatePickerProps, - DividerProps, - InputNumberProps, - InputProps, - MentionsProps, - RadioGroupProps, - RadioProps, - RangePickerProps, - RateProps, - SelectProps, - SpaceProps, - SwitchProps, - TextAreaProps, - TimePickerProps, - TreeSelectProps, - UploadProps, -} from 'antdv-next'; - -import type { Component } from 'vue'; - -import type { - ApiComponentSharedProps, - VbenFormSchema as CoreFormSchema, - FormActions, - IconPickerProps, -} from '@vben/common-ui'; - -import type { ComponentType } from './component'; - -type ComponentProps

= - | (( - value: Partial>, - actions: FormActions, - ) => P & Record) - | (P & Record); - -/** - * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 - */ -interface ComponentPropsMap { - ApiCascader: ApiComponentSharedProps & CascaderProps; - ApiSelect: ApiComponentSharedProps & SelectProps; - ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; - AutoComplete: AutoCompleteProps; - Cascader: CascaderProps; - Checkbox: CheckboxProps; - CheckboxGroup: CheckboxGroupProps; - DatePicker: DatePickerProps; - DefaultButton: ButtonProps; - Divider: DividerProps; - IconPicker: IconPickerProps; - Input: InputProps; - InputNumber: InputNumberProps; - InputPassword: InputProps; - Mentions: MentionsProps; - PrimaryButton: ButtonProps; - Radio: RadioProps; - RadioGroup: RadioGroupProps; - RangePicker: RangePickerProps; - Rate: RateProps; - Select: SelectProps; - Space: SpaceProps; - Switch: SwitchProps; - Textarea: TextAreaProps; - TimePicker: TimePickerProps; - TreeSelect: TreeSelectProps; - Upload: UploadProps; -} - -type BaseSchema = Omit< - CoreFormSchema, - 'component' | 'componentProps' ->; - -type RegisteredName = keyof ComponentPropsMap; - -type DiscriminatedFormSchema = { - [K in RegisteredName]: BaseSchema & { - component: K; - componentProps?: ComponentProps; - }; -}[RegisteredName]; - -type FallbackFormSchema = BaseSchema & { - component: Component | Exclude; - componentProps?: CoreFormSchema['componentProps']; -}; - -export type VbenFormSchema = DiscriminatedFormSchema | FallbackFormSchema; diff --git a/apps/web-antdv-next/src/adapter/form.ts b/apps/web-antdv-next/src/adapter/form.ts index 943916b8d..3d0629416 100644 --- a/apps/web-antdv-next/src/adapter/form.ts +++ b/apps/web-antdv-next/src/adapter/form.ts @@ -1,7 +1,9 @@ -import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; +import type { + VbenFormProps as FormProps, + VbenFormSchema as FormSchema, +} from '@vben/common-ui'; -import type { ComponentType } from './component'; -import type { VbenFormSchema } from './form-schema'; +import type { ComponentPropsMap, ComponentType } from './component'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -38,15 +40,9 @@ async function initSetupVbenForm() { }, }); } - -type VbenFormProps = Omit, 'schema'> & { - schema?: VbenFormSchema[]; -}; - -function useVbenForm(options: VbenFormProps) { - return useForm(options as CoreFormProps); -} +const useVbenForm = useForm; export { initSetupVbenForm, useVbenForm, z }; -export type { VbenFormProps, VbenFormSchema }; +export type VbenFormSchema = FormSchema; +export type VbenFormProps = FormProps; diff --git a/apps/web-antdv-next/src/adapter/vxe-table.ts b/apps/web-antdv-next/src/adapter/vxe-table.ts index 3b5d83b33..721e1c5d2 100644 --- a/apps/web-antdv-next/src/adapter/vxe-table.ts +++ b/apps/web-antdv-next/src/adapter/vxe-table.ts @@ -1,8 +1,14 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; +import type { ComponentPropsMap, ComponentType } from './component'; + import { h } from 'vue'; -import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'; +import { useVbenForm as useForm } from '@vben/common-ui'; +import { + setupVbenVxeTable, + useVbenVxeGrid as useGrid, +} from '@vben/plugins/vxe-table'; import { Button, Image } from 'antdv-next'; @@ -62,9 +68,11 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化 // vxeUI.formats.add }, - useVbenForm, + useVbenForm: useVbenForm as typeof useForm, }); -export { useVbenVxeGrid }; +export const useVbenVxeGrid = >( + ...rest: Parameters> +) => useGrid(...rest); export type * from '@vben/plugins/vxe-table'; diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts index 79a463602..b27ca9afa 100644 --- a/apps/web-ele/src/adapter/component/index.ts +++ b/apps/web-ele/src/adapter/component/index.ts @@ -3,9 +3,29 @@ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用, */ +import type { + CheckboxGroupProps, + CheckboxProps, + DatePickerProps, + DividerProps, + ElTimePicker as ElTimePickerType, + ElTreeSelect as ElTreeSelectType, + InputNumberProps, + InputProps, + RadioGroupProps, + SelectV2Props, + SpaceProps, + SwitchProps, + UploadProps, +} from 'element-plus'; + import type { Component } from 'vue'; -import type { BaseFormComponentType } from '@vben/common-ui'; +import type { + ApiComponentSharedProps, + BaseFormComponentType, + IconPickerProps, +} from '@vben/common-ui'; import type { Recordable } from '@vben/types'; import { defineAsyncComponent, defineComponent, h, ref } from 'vue'; @@ -15,6 +35,9 @@ import { $t } from '@vben/locales'; import { ElNotification } from 'element-plus'; +type ElTreeSelectSchemaProps = InstanceType['$props']; +type ElTimePickerSchemaProps = InstanceType['$props']; + const ElButton = defineAsyncComponent(() => Promise.all([ import('element-plus/es/components/button/index'), @@ -172,6 +195,28 @@ export type ComponentType = | 'Upload' | BaseFormComponentType; +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +export interface ComponentPropsMap { + ApiSelect: ApiComponentSharedProps & SelectV2Props; + ApiTreeSelect: ApiComponentSharedProps & ElTreeSelectSchemaProps; + Checkbox: CheckboxProps; + CheckboxGroup: CheckboxGroupProps; + DatePicker: DatePickerProps; + Divider: DividerProps; + IconPicker: IconPickerProps; + Input: InputProps; + InputNumber: InputNumberProps; + RadioGroup: RadioGroupProps; + Select: SelectV2Props; + Space: SpaceProps; + Switch: SwitchProps; + TimePicker: ElTimePickerSchemaProps; + TreeSelect: ElTreeSelectSchemaProps; + Upload: UploadProps; +} + async function initComponentAdapter() { const components: Partial> = { // 如果你的组件体积比较大,可以使用异步加载 diff --git a/apps/web-ele/src/adapter/form-schema.ts b/apps/web-ele/src/adapter/form-schema.ts deleted file mode 100644 index 5c68a64ed..000000000 --- a/apps/web-ele/src/adapter/form-schema.ts +++ /dev/null @@ -1,79 +0,0 @@ -import type { - CheckboxGroupProps, - CheckboxProps, - DatePickerProps, - DividerProps, - ElTimePicker, - ElTreeSelect, - InputNumberProps, - InputProps, - RadioGroupProps, - SelectV2Props, - SpaceProps, - SwitchProps, - UploadProps, -} from 'element-plus'; - -import type { Component } from 'vue'; - -import type { - ApiComponentSharedProps, - VbenFormSchema as CoreFormSchema, - FormActions, - IconPickerProps, -} from '@vben/common-ui'; - -import type { ComponentType } from './component'; - -type ElTreeSelectSchemaProps = InstanceType['$props']; -type ElTimePickerSchemaProps = InstanceType['$props']; - -type ComponentProps

= - | (( - value: Partial>, - actions: FormActions, - ) => P & Record) - | (P & Record); - -/** - * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 - */ -interface ComponentPropsMap { - ApiSelect: ApiComponentSharedProps & SelectV2Props; - ApiTreeSelect: ApiComponentSharedProps & ElTreeSelectSchemaProps; - Checkbox: CheckboxProps; - CheckboxGroup: CheckboxGroupProps; - DatePicker: DatePickerProps; - Divider: DividerProps; - IconPicker: IconPickerProps; - Input: InputProps; - InputNumber: InputNumberProps; - RadioGroup: RadioGroupProps; - Select: SelectV2Props; - Space: SpaceProps; - Switch: SwitchProps; - TimePicker: ElTimePickerSchemaProps; - TreeSelect: ElTreeSelectSchemaProps; - Upload: UploadProps; -} - -type BaseSchema = Omit< - CoreFormSchema, - 'component' | 'componentProps' ->; - -type RegisteredName = keyof ComponentPropsMap; - -type DiscriminatedFormSchema = { - [K in RegisteredName]: BaseSchema & { - component: K; - componentProps?: ComponentProps; - }; -}[RegisteredName]; - -type FallbackFormSchema = BaseSchema & { - component: Component | Exclude; - componentProps?: CoreFormSchema['componentProps']; -}; - -export type VbenFormSchema = DiscriminatedFormSchema | FallbackFormSchema; diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts index aadd570d0..0da7d0675 100644 --- a/apps/web-ele/src/adapter/form.ts +++ b/apps/web-ele/src/adapter/form.ts @@ -1,7 +1,9 @@ -import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; +import type { + VbenFormProps as FormProps, + VbenFormSchema as FormSchema, +} from '@vben/common-ui'; -import type { ComponentType } from './component'; -import type { VbenFormSchema } from './form-schema'; +import type { ComponentPropsMap, ComponentType } from './component'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -31,14 +33,9 @@ async function initSetupVbenForm() { }); } -type VbenFormProps = Omit, 'schema'> & { - schema?: VbenFormSchema[]; -}; - -function useVbenForm(options: VbenFormProps) { - return useForm(options as CoreFormProps); -} +const useVbenForm = useForm; export { initSetupVbenForm, useVbenForm, z }; -export type { VbenFormProps, VbenFormSchema }; +export type VbenFormSchema = FormSchema; +export type VbenFormProps = FormProps; diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts index 81d1cdd24..0967c29cd 100644 --- a/apps/web-ele/src/adapter/vxe-table.ts +++ b/apps/web-ele/src/adapter/vxe-table.ts @@ -1,8 +1,14 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; +import type { ComponentPropsMap, ComponentType } from './component'; + import { h } from 'vue'; -import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'; +import { useVbenForm as useForm } from '@vben/common-ui'; +import { + setupVbenVxeTable, + useVbenVxeGrid as useGrid, +} from '@vben/plugins/vxe-table'; import { ElButton, ElImage } from 'element-plus'; @@ -63,9 +69,11 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化 // vxeUI.formats.add }, - useVbenForm, + useVbenForm: useVbenForm as typeof useForm, }); -export { useVbenVxeGrid }; +export const useVbenVxeGrid = >( + ...rest: Parameters> +) => useGrid(...rest); export type * from '@vben/plugins/vxe-table'; diff --git a/apps/web-naive/src/adapter/component/index.ts b/apps/web-naive/src/adapter/component/index.ts index f9df20273..81fc97027 100644 --- a/apps/web-naive/src/adapter/component/index.ts +++ b/apps/web-naive/src/adapter/component/index.ts @@ -3,9 +3,29 @@ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用, */ +import type { + CheckboxGroupProps, + CheckboxProps, + DatePickerProps, + DividerProps, + InputNumberProps, + InputProps, + RadioGroupProps, + SelectProps, + SpaceProps, + SwitchProps, + TimePickerProps, + TreeSelectProps, + UploadProps, +} from 'naive-ui'; + import type { Component } from 'vue'; -import type { BaseFormComponentType } from '@vben/common-ui'; +import type { + ApiComponentSharedProps, + BaseFormComponentType, + IconPickerProps, +} from '@vben/common-ui'; import type { Recordable } from '@vben/types'; import { defineAsyncComponent, defineComponent, h, ref } from 'vue'; @@ -118,6 +138,28 @@ export type ComponentType = | 'Upload' | BaseFormComponentType; +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +export interface ComponentPropsMap { + ApiSelect: ApiComponentSharedProps & SelectProps; + ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; + Checkbox: CheckboxProps; + CheckboxGroup: CheckboxGroupProps; + DatePicker: DatePickerProps; + Divider: DividerProps; + IconPicker: IconPickerProps; + Input: InputProps; + InputNumber: InputNumberProps; + RadioGroup: RadioGroupProps; + Select: SelectProps; + Space: SpaceProps; + Switch: SwitchProps; + TimePicker: TimePickerProps; + TreeSelect: TreeSelectProps; + Upload: UploadProps; +} + async function initComponentAdapter() { const components: Partial> = { // 如果你的组件体积比较大,可以使用异步加载 diff --git a/apps/web-naive/src/adapter/form-schema.ts b/apps/web-naive/src/adapter/form-schema.ts deleted file mode 100644 index 4e107d253..000000000 --- a/apps/web-naive/src/adapter/form-schema.ts +++ /dev/null @@ -1,76 +0,0 @@ -import type { - CheckboxGroupProps, - CheckboxProps, - DatePickerProps, - DividerProps, - InputNumberProps, - InputProps, - RadioGroupProps, - SelectProps, - SpaceProps, - SwitchProps, - TimePickerProps, - TreeSelectProps, - UploadProps, -} from 'naive-ui'; - -import type { Component } from 'vue'; - -import type { - ApiComponentSharedProps, - VbenFormSchema as CoreFormSchema, - FormActions, - IconPickerProps, -} from '@vben/common-ui'; - -import type { ComponentType } from './component'; - -type ComponentProps

= - | (( - value: Partial>, - actions: FormActions, - ) => P & Record) - | (P & Record); - -/** - * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 - */ -interface ComponentPropsMap { - ApiSelect: ApiComponentSharedProps & SelectProps; - ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; - Checkbox: CheckboxProps; - CheckboxGroup: CheckboxGroupProps; - DatePicker: DatePickerProps; - Divider: DividerProps; - IconPicker: IconPickerProps; - Input: InputProps; - InputNumber: InputNumberProps; - RadioGroup: RadioGroupProps; - Select: SelectProps; - Space: SpaceProps; - Switch: SwitchProps; - TimePicker: TimePickerProps; - TreeSelect: TreeSelectProps; - Upload: UploadProps; -} - -type BaseSchema = Omit< - CoreFormSchema, - 'component' | 'componentProps' ->; - -type RegisteredName = keyof ComponentPropsMap; - -type DiscriminatedFormSchema = { - [K in RegisteredName]: BaseSchema & { - component: K; - componentProps?: ComponentProps; - }; -}[RegisteredName]; - -type FallbackFormSchema = BaseSchema & { - component: Component | Exclude; - componentProps?: CoreFormSchema['componentProps']; -}; - -export type VbenFormSchema = DiscriminatedFormSchema | FallbackFormSchema; diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts index 629584118..1e58a1af7 100644 --- a/apps/web-naive/src/adapter/form.ts +++ b/apps/web-naive/src/adapter/form.ts @@ -1,7 +1,9 @@ -import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; +import type { + VbenFormProps as FormProps, + VbenFormSchema as FormSchema, +} from '@vben/common-ui'; -import type { ComponentType } from './component'; -import type { VbenFormSchema } from './form-schema'; +import type { ComponentPropsMap, ComponentType } from './component'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -35,14 +37,9 @@ async function initSetupVbenForm() { }); } -type VbenFormProps = Omit, 'schema'> & { - schema?: VbenFormSchema[]; -}; - -function useVbenForm(options: VbenFormProps) { - return useForm(options as CoreFormProps); -} +const useVbenForm = useForm; export { initSetupVbenForm, useVbenForm, z }; -export type { VbenFormProps, VbenFormSchema }; +export type VbenFormSchema = FormSchema; +export type VbenFormProps = FormProps; diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts index 1c3600003..997e45e89 100644 --- a/apps/web-naive/src/adapter/vxe-table.ts +++ b/apps/web-naive/src/adapter/vxe-table.ts @@ -1,8 +1,14 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; +import type { ComponentPropsMap, ComponentType } from './component'; + import { h } from 'vue'; -import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'; +import { useVbenForm as useForm } from '@vben/common-ui'; +import { + setupVbenVxeTable, + useVbenVxeGrid as useGrid, +} from '@vben/plugins/vxe-table'; import { NButton, NImage } from 'naive-ui'; @@ -62,9 +68,11 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化 // vxeUI.formats.add }, - useVbenForm, + useVbenForm: useVbenForm as typeof useForm, }); -export { useVbenVxeGrid }; +export const useVbenVxeGrid = >( + ...rest: Parameters> +) => useGrid(...rest); export type * from '@vben/plugins/vxe-table'; diff --git a/apps/web-tdesign/src/adapter/component/index.ts b/apps/web-tdesign/src/adapter/component/index.ts index 59d021f2b..54617f84c 100644 --- a/apps/web-tdesign/src/adapter/component/index.ts +++ b/apps/web-tdesign/src/adapter/component/index.ts @@ -1,6 +1,32 @@ +import type { + AutoCompleteProps, + ButtonProps, + CheckboxGroupProps, + CheckboxProps, + DatePickerProps, + DateRangePickerProps, + DividerProps, + InputNumberProps, + InputProps, + RadioGroupProps, + RadioProps, + SelectProps, + SpaceProps, + SwitchProps, + TextareaProps, + TimePickerProps, + TreeSelectProps, +} from 'tdesign-vue-next'; +import type { TdRateProps } from 'tdesign-vue-next/es/rate/type'; +import type { UploadProps } from 'tdesign-vue-next/es/upload/types'; + import type { Component } from 'vue'; -import type { BaseFormComponentType } from '@vben/common-ui'; +import type { + ApiComponentSharedProps, + BaseFormComponentType, + IconPickerProps, +} from '@vben/common-ui'; import type { Recordable } from '@vben/types'; import { defineAsyncComponent, defineComponent, h, ref } from 'vue'; @@ -126,6 +152,35 @@ export type ComponentType = | 'Upload' | BaseFormComponentType; +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +export interface ComponentPropsMap { + ApiSelect: ApiComponentSharedProps & SelectProps; + ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; + AutoComplete: AutoCompleteProps; + Checkbox: CheckboxProps; + CheckboxGroup: CheckboxGroupProps; + DatePicker: DatePickerProps; + DefaultButton: ButtonProps; + Divider: DividerProps; + IconPicker: IconPickerProps; + Input: InputProps; + InputNumber: InputNumberProps; + PrimaryButton: ButtonProps; + Radio: RadioProps; + RadioGroup: RadioGroupProps; + RangePicker: DateRangePickerProps; + Rate: TdRateProps; + Select: SelectProps; + Space: SpaceProps; + Switch: SwitchProps; + Textarea: TextareaProps; + TimePicker: TimePickerProps; + TreeSelect: TreeSelectProps; + Upload: UploadProps; +} + async function initComponentAdapter() { const components: Partial> = { // 如果你的组件体积比较大,可以使用异步加载 diff --git a/apps/web-tdesign/src/adapter/form-schema.ts b/apps/web-tdesign/src/adapter/form-schema.ts deleted file mode 100644 index 7063b6054..000000000 --- a/apps/web-tdesign/src/adapter/form-schema.ts +++ /dev/null @@ -1,89 +0,0 @@ -import type { - AutoCompleteProps, - ButtonProps, - CheckboxGroupProps, - CheckboxProps, - DatePickerProps, - DateRangePickerProps, - DividerProps, - InputNumberProps, - InputProps, - RadioGroupProps, - RadioProps, - SelectProps, - SpaceProps, - SwitchProps, - TextareaProps, - TimePickerProps, - TreeSelectProps, -} from 'tdesign-vue-next'; -import type { TdRateProps } from 'tdesign-vue-next/es/rate/type'; -import type { UploadProps } from 'tdesign-vue-next/es/upload/types'; - -import type { Component } from 'vue'; - -import type { - ApiComponentSharedProps, - VbenFormSchema as CoreFormSchema, - FormActions, - IconPickerProps, -} from '@vben/common-ui'; - -import type { ComponentType } from './component'; - -type ComponentProps

= - | (( - value: Partial>, - actions: FormActions, - ) => P & Record) - | (P & Record); - -/** - * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 - */ -interface ComponentPropsMap { - ApiSelect: ApiComponentSharedProps & SelectProps; - ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; - AutoComplete: AutoCompleteProps; - Checkbox: CheckboxProps; - CheckboxGroup: CheckboxGroupProps; - DatePicker: DatePickerProps; - DefaultButton: ButtonProps; - Divider: DividerProps; - IconPicker: IconPickerProps; - Input: InputProps; - InputNumber: InputNumberProps; - PrimaryButton: ButtonProps; - Radio: RadioProps; - RadioGroup: RadioGroupProps; - RangePicker: DateRangePickerProps; - Rate: TdRateProps; - Select: SelectProps; - Space: SpaceProps; - Switch: SwitchProps; - Textarea: TextareaProps; - TimePicker: TimePickerProps; - TreeSelect: TreeSelectProps; - Upload: UploadProps; -} - -type BaseSchema = Omit< - CoreFormSchema, - 'component' | 'componentProps' ->; - -type RegisteredName = keyof ComponentPropsMap; - -type DiscriminatedFormSchema = { - [K in RegisteredName]: BaseSchema & { - component: K; - componentProps?: ComponentProps; - }; -}[RegisteredName]; - -type FallbackFormSchema = BaseSchema & { - component: Component | Exclude; - componentProps?: CoreFormSchema['componentProps']; -}; - -export type VbenFormSchema = DiscriminatedFormSchema | FallbackFormSchema; diff --git a/apps/web-tdesign/src/adapter/form.ts b/apps/web-tdesign/src/adapter/form.ts index d618012a8..5c1e2087b 100644 --- a/apps/web-tdesign/src/adapter/form.ts +++ b/apps/web-tdesign/src/adapter/form.ts @@ -1,7 +1,9 @@ -import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; +import type { + VbenFormProps as FormProps, + VbenFormSchema as FormSchema, +} from '@vben/common-ui'; -import type { ComponentType } from './component'; -import type { VbenFormSchema } from './form-schema'; +import type { ComponentPropsMap, ComponentType } from './component'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -39,14 +41,9 @@ async function initSetupVbenForm() { }); } -type VbenFormProps = Omit, 'schema'> & { - schema?: VbenFormSchema[]; -}; - -function useVbenForm(options: VbenFormProps) { - return useForm(options as CoreFormProps); -} +const useVbenForm = useForm; export { initSetupVbenForm, useVbenForm, z }; -export type { VbenFormProps, VbenFormSchema }; +export type VbenFormSchema = FormSchema; +export type VbenFormProps = FormProps; diff --git a/apps/web-tdesign/src/adapter/vxe-table.ts b/apps/web-tdesign/src/adapter/vxe-table.ts index e406242f5..68e0635dc 100644 --- a/apps/web-tdesign/src/adapter/vxe-table.ts +++ b/apps/web-tdesign/src/adapter/vxe-table.ts @@ -1,8 +1,14 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; +import type { ComponentPropsMap, ComponentType } from './component'; + import { h } from 'vue'; -import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'; +import { useVbenForm as useForm } from '@vben/common-ui'; +import { + setupVbenVxeTable, + useVbenVxeGrid as useGrid, +} from '@vben/plugins/vxe-table'; import { Button, Image } from 'tdesign-vue-next'; @@ -62,9 +68,11 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化 // vxeUI.formats.add }, - useVbenForm, + useVbenForm: useVbenForm as typeof useForm, }); -export { useVbenVxeGrid }; +export const useVbenVxeGrid = >( + ...rest: Parameters> +) => useGrid(...rest); export type * from '@vben/plugins/vxe-table'; diff --git a/packages/@core/ui-kit/form-ui/src/index.ts b/packages/@core/ui-kit/form-ui/src/index.ts index d3e88ad10..16b8b2319 100644 --- a/packages/@core/ui-kit/form-ui/src/index.ts +++ b/packages/@core/ui-kit/form-ui/src/index.ts @@ -3,7 +3,6 @@ export { setupVbenForm } from './config'; export type { BaseFormComponentType, ExtendedFormApi, - FormActions, VbenFormProps, FormSchema as VbenFormSchema, } from './types'; diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 2238abd1c..e0277ff64 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -221,6 +221,70 @@ type RenderComponentContentType = ( api: FormActions, ) => Record; +type MappedComponentProps

= + | (( + value: Partial>, + actions: FormActions, + ) => P & Record) + | (P & Record); + +interface FormSchemaBody extends FormCommonConfig { + /** 默认值 */ + defaultValue?: any; + /** 依赖 */ + dependencies?: FormItemDependencies; + /** 描述 */ + description?: CustomRenderType; + /** 字段名 */ + fieldName: string; + /** 帮助信息 */ + help?: CustomParamsRenderType; + /** 是否隐藏表单项 */ + hide?: boolean; + /** 表单项 */ + label?: CustomRenderType; + // 自定义组件内部渲染 + renderComponentContent?: RenderComponentContentType; + /** 字段规则 */ + rules?: FormSchemaRuleType; + /** 后缀 */ + suffix?: CustomRenderType; +} + +type FormSchemaDiscriminated< + T extends BaseFormComponentType, + P extends Record, +> = { + [K in Extract]: { + /** 组件 */ + component: K; + /** 组件参数 */ + componentProps?: MappedComponentProps; + } & FormSchemaBody; +}[Extract]; + +type FormSchemaFallback< + T extends BaseFormComponentType, + P extends Record, +> = { + /** 组件 */ + component: Component | Exclude>; + /** 组件参数 */ + componentProps?: ComponentProps; +} & FormSchemaBody; + +export type FormSchema< + T extends BaseFormComponentType = BaseFormComponentType, + P extends Record = Record, +> = [keyof P] extends [never] + ? { + /** 组件 */ + component: Component | T; + /** 组件参数 */ + componentProps?: ComponentProps; + } & FormSchemaBody + : FormSchemaDiscriminated | FormSchemaFallback; + export type HandleSubmitFn = ( values: Record, ) => Promise | void; @@ -246,41 +310,13 @@ export type ArrayToStringFields = Array< | string[] // 简单数组格式,最后一个元素可以是分隔符 >; -export interface FormSchema< - T extends BaseFormComponentType = BaseFormComponentType, -> extends FormCommonConfig { - /** 组件 */ - component: Component | T; - /** 组件参数 */ - componentProps?: ComponentProps; - /** 默认值 */ - defaultValue?: any; - /** 依赖 */ - dependencies?: FormItemDependencies; - /** 描述 */ - description?: CustomRenderType; - /** 字段名 */ - fieldName: string; - /** 帮助信息 */ - help?: CustomParamsRenderType; - /** 是否隐藏表单项 */ - hide?: boolean; - /** 表单项 */ - label?: CustomRenderType; - // 自定义组件内部渲染 - renderComponentContent?: RenderComponentContentType; - /** 字段规则 */ - rules?: FormSchemaRuleType; - /** 后缀 */ - suffix?: CustomRenderType; -} - export interface FormFieldProps extends FormSchema { required?: boolean; } export interface FormRenderProps< T extends BaseFormComponentType = BaseFormComponentType, + P extends Record = Record, > { /** * 表单字段数组映射字符串配置 默认使用"," @@ -332,7 +368,7 @@ export interface FormRenderProps< /** * 表单定义 */ - schema?: FormSchema[]; + schema?: FormSchema[]; /** * 是否显示展开/折叠 @@ -357,8 +393,9 @@ export interface ActionButtonOptions extends VbenButtonProps { export interface VbenFormProps< T extends BaseFormComponentType = BaseFormComponentType, + P extends Record = Record, > extends Omit< - FormRenderProps, + FormRenderProps, 'componentBindEventMap' | 'componentMap' | 'form' > { /** diff --git a/packages/@core/ui-kit/form-ui/src/use-vben-form.ts b/packages/@core/ui-kit/form-ui/src/use-vben-form.ts index 73f1eb0b0..00c60d05b 100644 --- a/packages/@core/ui-kit/form-ui/src/use-vben-form.ts +++ b/packages/@core/ui-kit/form-ui/src/use-vben-form.ts @@ -13,9 +13,10 @@ import VbenUseForm from './vben-use-form.vue'; export function useVbenForm< T extends BaseFormComponentType = BaseFormComponentType, ->(options: VbenFormProps) { + P extends Record = Record, +>(options: VbenFormProps) { const IS_REACTIVE = isReactive(options); - const api = new FormApi(options); + const api = new FormApi(options as unknown as VbenFormProps); const extendedApi: ExtendedFormApi = api as never; extendedApi.useStore = (selector) => { return useStore(api.store, selector); diff --git a/packages/effects/plugins/src/vxe-table/types.ts b/packages/effects/plugins/src/vxe-table/types.ts index 4582c8221..a2b8d511d 100644 --- a/packages/effects/plugins/src/vxe-table/types.ts +++ b/packages/effects/plugins/src/vxe-table/types.ts @@ -41,6 +41,7 @@ export interface SeparatorOptions { export interface VxeGridProps< T extends Record = any, D extends BaseFormComponentType = BaseFormComponentType, + P extends Record = Record, > { /** * 数据 @@ -73,7 +74,7 @@ export interface VxeGridProps< /** * 表单配置 */ - formOptions?: VbenFormProps; + formOptions?: VbenFormProps; /** * 显示搜索表单 */ @@ -87,10 +88,11 @@ export interface VxeGridProps< export type ExtendedVxeGridApi< D extends Record = any, F extends BaseFormComponentType = BaseFormComponentType, + P extends Record = Record, > = VxeGridApi & { - useStore: >>( - selector?: (state: NoInfer>) => T, - ) => Readonly>; + useStore: >>( + selector?: (state: NoInfer>) => S, + ) => Readonly>; }; export interface SetupVxeTable { diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts index 6ab876934..4e5826c7d 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts +++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts @@ -22,10 +22,15 @@ type FilteredSlots = { export function useVbenVxeGrid< T extends Record = any, D extends BaseFormComponentType = BaseFormComponentType, ->(options: VxeGridProps) { + P extends Record = Record, +>(options: VxeGridProps) { // const IS_REACTIVE = isReactive(options); - const api = new VxeGridApi(options); - const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi; + const api = new VxeGridApi(options as VxeGridProps); + const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi< + T, + D, + P + >; extendedApi.useStore = (selector) => { return useStore(api.store, selector); }; diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts index 1f5e73567..df6b0cf3f 100644 --- a/playground/src/adapter/component/index.ts +++ b/playground/src/adapter/component/index.ts @@ -6,14 +6,38 @@ /* eslint-disable vue/one-component-per-file */ import type { + AutoCompleteProps, + ButtonProps, + CascaderProps, + CheckboxGroupProps, + CheckboxProps, + DatePickerProps, + DividerProps, + InputNumberProps, + InputProps, + MentionsProps, + RadioGroupProps, + RadioProps, + RateProps, + SelectProps, + SpaceProps, + SwitchProps, + TextAreaProps, + TimePickerProps, + TreeSelectProps, UploadChangeParam, UploadFile, UploadProps, } from 'ant-design-vue'; +import type { RangePickerProps } from 'ant-design-vue/es/date-picker'; import type { Component, Ref } from 'vue'; -import type { BaseFormComponentType } from '@vben/common-ui'; +import type { + ApiComponentSharedProps, + BaseFormComponentType, + IconPickerProps, +} from '@vben/common-ui'; import type { Sortable } from '@vben/hooks'; import type { Recordable } from '@vben/types'; @@ -594,6 +618,39 @@ export type ComponentType = | 'Upload' | BaseFormComponentType; +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +export interface ComponentPropsMap { + ApiCascader: ApiComponentSharedProps & CascaderProps; + ApiSelect: ApiComponentSharedProps & SelectProps; + ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; + AutoComplete: AutoCompleteProps; + Cascader: CascaderProps; + Checkbox: CheckboxProps; + CheckboxGroup: CheckboxGroupProps; + DatePicker: DatePickerProps; + DefaultButton: ButtonProps; + Divider: DividerProps; + IconPicker: IconPickerProps; + Input: InputProps; + InputNumber: InputNumberProps; + InputPassword: InputProps; + Mentions: MentionsProps; + PrimaryButton: ButtonProps; + Radio: RadioProps; + RadioGroup: RadioGroupProps; + RangePicker: RangePickerProps; + Rate: RateProps; + Select: SelectProps; + Space: SpaceProps; + Switch: SwitchProps; + Textarea: TextAreaProps; + TimePicker: TimePickerProps; + TreeSelect: TreeSelectProps; + Upload: UploadProps; +} + async function initComponentAdapter() { const components: Partial> = { // 如果你的组件体积比较大,可以使用异步加载 diff --git a/playground/src/adapter/form-schema.ts b/playground/src/adapter/form-schema.ts deleted file mode 100644 index 329525648..000000000 --- a/playground/src/adapter/form-schema.ts +++ /dev/null @@ -1,95 +0,0 @@ -import type { - AutoCompleteProps, - ButtonProps, - CascaderProps, - CheckboxGroupProps, - CheckboxProps, - DatePickerProps, - DividerProps, - InputNumberProps, - InputProps, - MentionsProps, - RadioGroupProps, - RadioProps, - RateProps, - SelectProps, - SpaceProps, - SwitchProps, - TextAreaProps, - TimePickerProps, - TreeSelectProps, - UploadProps, -} from 'ant-design-vue'; -import type { RangePickerProps } from 'ant-design-vue/es/date-picker'; - -import type { Component } from 'vue'; - -import type { - ApiComponentSharedProps, - VbenFormSchema as CoreFormSchema, - FormActions, - IconPickerProps, -} from '@vben/common-ui'; - -import type { ComponentType } from './component'; - -type ComponentProps

= - | (( - value: Partial>, - actions: FormActions, - ) => P & Record) - | (P & Record); - -/** - * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 - */ -interface ComponentPropsMap { - ApiCascader: ApiComponentSharedProps & CascaderProps; - ApiSelect: ApiComponentSharedProps & SelectProps; - ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps; - AutoComplete: AutoCompleteProps; - Cascader: CascaderProps; - Checkbox: CheckboxProps; - CheckboxGroup: CheckboxGroupProps; - DatePicker: DatePickerProps; - DefaultButton: ButtonProps; - Divider: DividerProps; - IconPicker: IconPickerProps; - Input: InputProps; - InputNumber: InputNumberProps; - InputPassword: InputProps; - Mentions: MentionsProps; - PrimaryButton: ButtonProps; - Radio: RadioProps; - RadioGroup: RadioGroupProps; - RangePicker: RangePickerProps; - Rate: RateProps; - Select: SelectProps; - Space: SpaceProps; - Switch: SwitchProps; - Textarea: TextAreaProps; - TimePicker: TimePickerProps; - TreeSelect: TreeSelectProps; - Upload: UploadProps; -} - -type BaseSchema = Omit< - CoreFormSchema, - 'component' | 'componentProps' ->; - -type RegisteredName = keyof ComponentPropsMap; - -type DiscriminatedFormSchema = { - [K in RegisteredName]: BaseSchema & { - component: K; - componentProps?: ComponentProps; - }; -}[RegisteredName]; - -type FallbackFormSchema = BaseSchema & { - component: Component | Exclude; - componentProps?: CoreFormSchema['componentProps']; -}; - -export type VbenFormSchema = DiscriminatedFormSchema | FallbackFormSchema; diff --git a/playground/src/adapter/form.ts b/playground/src/adapter/form.ts index 913c33b79..809edbede 100644 --- a/playground/src/adapter/form.ts +++ b/playground/src/adapter/form.ts @@ -1,7 +1,9 @@ -import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; +import type { + VbenFormProps as FormProps, + VbenFormSchema as FormSchema, +} from '@vben/common-ui'; -import type { ComponentType } from './component'; -import type { VbenFormSchema } from './form-schema'; +import type { ComponentPropsMap, ComponentType } from './component'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -38,13 +40,9 @@ async function initSetupVbenForm() { }); } -type VbenFormProps = Omit, 'schema'> & { - schema?: VbenFormSchema[]; -}; - -function useVbenForm(options: VbenFormProps) { - return useForm(options as CoreFormProps); -} +const useVbenForm = useForm; export { initSetupVbenForm, useVbenForm, z }; -export type { VbenFormProps, VbenFormSchema }; + +export type VbenFormSchema = FormSchema; +export type VbenFormProps = FormProps; diff --git a/playground/src/adapter/vxe-table.ts b/playground/src/adapter/vxe-table.ts index 07e9a8d1c..10763dee9 100644 --- a/playground/src/adapter/vxe-table.ts +++ b/playground/src/adapter/vxe-table.ts @@ -1,7 +1,7 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; import type { Recordable } from '@vben/types'; -import type { ComponentType } from './component'; +import type { ComponentPropsMap, ComponentType } from './component'; import { h } from 'vue'; @@ -282,8 +282,8 @@ setupVbenVxeTable({ }); export const useVbenVxeGrid = >( - ...rest: Parameters> -) => useGrid(...rest); + ...rest: Parameters> +) => useGrid(...rest); export type OnActionClickParams> = { code: string;