diff --git a/apps/web-antd/src/adapter/form-schema.ts b/apps/web-antd/src/adapter/form-schema.ts new file mode 100644 index 000000000..2eef37e99 --- /dev/null +++ b/apps/web-antd/src/adapter/form-schema.ts @@ -0,0 +1,96 @@ +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, + IconPickerProps, +} from '@vben/common-ui'; + +import type { ComponentType } from './component'; + +/** + * 对象形式:使用适配器里为各 `component` 声明的 Props 类型 `P`; + * 与 `Record` 相交是为了满足核心库 `MaybeComponentProps` 的索引签名。 + * 函数形式:通过联合 `CoreFormSchema['componentProps']`,与表单核心对动态 `componentProps` 的约定保持一致。 + */ +type SchemaComponentProps

= + | CoreFormSchema['componentProps'] + | (P & Record); + +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +interface FormSchemaComponentPropsMap { + 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 FormSchemaComponentPropsMap; + +type DiscriminatedFormSchema = { + [K in RegisteredName]: BaseSchema & { + component: K; + componentProps?: SchemaComponentProps; + }; +}[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 983a7f516..943916b8d 100644 --- a/apps/web-antd/src/adapter/form.ts +++ b/apps/web-antd/src/adapter/form.ts @@ -1,9 +1,7 @@ -import type { - VbenFormSchema as FormSchema, - VbenFormProps, -} from '@vben/common-ui'; +import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; import type { ComponentType } from './component'; +import type { VbenFormSchema } from './form-schema'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -41,9 +39,14 @@ async function initSetupVbenForm() { }); } -const useVbenForm = useForm; +type VbenFormProps = Omit, 'schema'> & { + schema?: VbenFormSchema[]; +}; + +function useVbenForm(options: VbenFormProps) { + return useForm(options as CoreFormProps); +} export { initSetupVbenForm, useVbenForm, z }; -export type VbenFormSchema = FormSchema; -export type { VbenFormProps }; +export type { VbenFormProps, VbenFormSchema }; diff --git a/apps/web-antdv-next/src/adapter/form-schema.ts b/apps/web-antdv-next/src/adapter/form-schema.ts new file mode 100644 index 000000000..bbae3d18c --- /dev/null +++ b/apps/web-antdv-next/src/adapter/form-schema.ts @@ -0,0 +1,96 @@ +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, + IconPickerProps, +} from '@vben/common-ui'; + +import type { ComponentType } from './component'; + +/** + * 对象形式:使用适配器里为各 `component` 声明的 Props 类型 `P`; + * 与 `Record` 相交是为了满足核心库 `MaybeComponentProps` 的索引签名。 + * 函数形式:通过联合 `CoreFormSchema['componentProps']`,与表单核心对动态 `componentProps` 的约定保持一致。 + */ +type SchemaComponentProps

= + | CoreFormSchema['componentProps'] + | (P & Record); + +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +interface FormSchemaComponentPropsMap { + 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 FormSchemaComponentPropsMap; + +type DiscriminatedFormSchema = { + [K in RegisteredName]: BaseSchema & { + component: K; + componentProps?: SchemaComponentProps; + }; +}[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 983a7f516..943916b8d 100644 --- a/apps/web-antdv-next/src/adapter/form.ts +++ b/apps/web-antdv-next/src/adapter/form.ts @@ -1,9 +1,7 @@ -import type { - VbenFormSchema as FormSchema, - VbenFormProps, -} from '@vben/common-ui'; +import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; import type { ComponentType } from './component'; +import type { VbenFormSchema } from './form-schema'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -41,9 +39,14 @@ async function initSetupVbenForm() { }); } -const useVbenForm = useForm; +type VbenFormProps = Omit, 'schema'> & { + schema?: VbenFormSchema[]; +}; + +function useVbenForm(options: VbenFormProps) { + return useForm(options as CoreFormProps); +} export { initSetupVbenForm, useVbenForm, z }; -export type VbenFormSchema = FormSchema; -export type { VbenFormProps }; +export type { VbenFormProps, VbenFormSchema }; diff --git a/apps/web-ele/src/adapter/form-schema.ts b/apps/web-ele/src/adapter/form-schema.ts new file mode 100644 index 000000000..740ad34d0 --- /dev/null +++ b/apps/web-ele/src/adapter/form-schema.ts @@ -0,0 +1,80 @@ +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, + IconPickerProps, +} from '@vben/common-ui'; + +import type { ComponentType } from './component'; + +type ElTreeSelectSchemaProps = InstanceType['$props']; +type ElTimePickerSchemaProps = InstanceType['$props']; + +/** + * 对象形式:使用适配器里为各 `component` 声明的 Props 类型 `P`; + * 与 `Record` 相交是为了满足核心库 `MaybeComponentProps` 的索引签名。 + * 函数形式:通过联合 `CoreFormSchema['componentProps']`,与表单核心对动态 `componentProps` 的约定保持一致。 + */ +type SchemaComponentProps

= + | CoreFormSchema['componentProps'] + | (P & Record); + +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +interface FormSchemaComponentPropsMap { + 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 FormSchemaComponentPropsMap; + +type DiscriminatedFormSchema = { + [K in RegisteredName]: BaseSchema & { + component: K; + componentProps?: SchemaComponentProps; + }; +}[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 936c3fe4c..aadd570d0 100644 --- a/apps/web-ele/src/adapter/form.ts +++ b/apps/web-ele/src/adapter/form.ts @@ -1,9 +1,7 @@ -import type { - VbenFormSchema as FormSchema, - VbenFormProps, -} from '@vben/common-ui'; +import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; import type { ComponentType } from './component'; +import type { VbenFormSchema } from './form-schema'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -33,9 +31,14 @@ async function initSetupVbenForm() { }); } -const useVbenForm = useForm; +type VbenFormProps = Omit, 'schema'> & { + schema?: VbenFormSchema[]; +}; + +function useVbenForm(options: VbenFormProps) { + return useForm(options as CoreFormProps); +} export { initSetupVbenForm, useVbenForm, z }; -export type VbenFormSchema = FormSchema; -export type { VbenFormProps }; +export type { VbenFormProps, VbenFormSchema }; diff --git a/apps/web-naive/src/adapter/form-schema.ts b/apps/web-naive/src/adapter/form-schema.ts new file mode 100644 index 000000000..0172358ef --- /dev/null +++ b/apps/web-naive/src/adapter/form-schema.ts @@ -0,0 +1,77 @@ +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, + IconPickerProps, +} from '@vben/common-ui'; + +import type { ComponentType } from './component'; + +/** + * 对象形式:使用适配器里为各 `component` 声明的 Props 类型 `P`; + * 与 `Record` 相交是为了满足核心库 `MaybeComponentProps` 的索引签名。 + * 函数形式:通过联合 `CoreFormSchema['componentProps']`,与表单核心对动态 `componentProps` 的约定保持一致。 + */ +type SchemaComponentProps

= + | CoreFormSchema['componentProps'] + | (P & Record); + +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +interface FormSchemaComponentPropsMap { + 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 FormSchemaComponentPropsMap; + +type DiscriminatedFormSchema = { + [K in RegisteredName]: BaseSchema & { + component: K; + componentProps?: SchemaComponentProps; + }; +}[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 9de44a01d..629584118 100644 --- a/apps/web-naive/src/adapter/form.ts +++ b/apps/web-naive/src/adapter/form.ts @@ -1,9 +1,7 @@ -import type { - VbenFormSchema as FormSchema, - VbenFormProps, -} from '@vben/common-ui'; +import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; import type { ComponentType } from './component'; +import type { VbenFormSchema } from './form-schema'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -37,9 +35,14 @@ async function initSetupVbenForm() { }); } -const useVbenForm = useForm; +type VbenFormProps = Omit, 'schema'> & { + schema?: VbenFormSchema[]; +}; + +function useVbenForm(options: VbenFormProps) { + return useForm(options as CoreFormProps); +} export { initSetupVbenForm, useVbenForm, z }; -export type VbenFormSchema = FormSchema; -export type { VbenFormProps }; +export type { VbenFormProps, VbenFormSchema }; diff --git a/apps/web-tdesign/src/adapter/form-schema.ts b/apps/web-tdesign/src/adapter/form-schema.ts new file mode 100644 index 000000000..1211af135 --- /dev/null +++ b/apps/web-tdesign/src/adapter/form-schema.ts @@ -0,0 +1,90 @@ +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, + IconPickerProps, +} from '@vben/common-ui'; + +import type { ComponentType } from './component'; + +/** + * 对象形式:使用适配器里为各 `component` 声明的 Props 类型 `P`; + * 与 `Record` 相交是为了满足核心库 `MaybeComponentProps` 的索引签名。 + * 函数形式:通过联合 `CoreFormSchema['componentProps']`,与表单核心对动态 `componentProps` 的约定保持一致。 + */ +type SchemaComponentProps

= + | CoreFormSchema['componentProps'] + | (P & Record); + +/** + * 与 {@link ComponentType} 中注册的组件名一一对应,便于 Schema 上 `component` + `componentProps` 联动提示 + */ +interface FormSchemaComponentPropsMap { + 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 FormSchemaComponentPropsMap; + +type DiscriminatedFormSchema = { + [K in RegisteredName]: BaseSchema & { + component: K; + componentProps?: SchemaComponentProps; + }; +}[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 ed0945142..d618012a8 100644 --- a/apps/web-tdesign/src/adapter/form.ts +++ b/apps/web-tdesign/src/adapter/form.ts @@ -1,9 +1,7 @@ -import type { - VbenFormSchema as FormSchema, - VbenFormProps, -} from '@vben/common-ui'; +import type { VbenFormProps as CoreFormProps } from '@vben/common-ui'; import type { ComponentType } from './component'; +import type { VbenFormSchema } from './form-schema'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -41,9 +39,14 @@ async function initSetupVbenForm() { }); } -const useVbenForm = useForm; +type VbenFormProps = Omit, 'schema'> & { + schema?: VbenFormSchema[]; +}; + +function useVbenForm(options: VbenFormProps) { + return useForm(options as CoreFormProps); +} export { initSetupVbenForm, useVbenForm, z }; -export type VbenFormSchema = FormSchema; -export type { VbenFormProps }; +export type { VbenFormProps, VbenFormSchema }; diff --git a/packages/effects/common-ui/src/components/api-component/api-component.vue b/packages/effects/common-ui/src/components/api-component/api-component.vue index 682cd16b8..45ec260f4 100644 --- a/packages/effects/common-ui/src/components/api-component/api-component.vue +++ b/packages/effects/common-ui/src/components/api-component/api-component.vue @@ -1,7 +1,8 @@