aed31a5a4e
* chore: demo of customizing form layout using tailwind * perf: default placeholder for input and select components * chore: update ts type * chore: extract public methods
138 lines
3.3 KiB
TypeScript
138 lines
3.3 KiB
TypeScript
import type {
|
||
BaseFormComponentType,
|
||
VbenFormSchema as FormSchema,
|
||
VbenFormProps,
|
||
} from '@vben/common-ui';
|
||
|
||
import { type Component, h, type SetupContext } from 'vue';
|
||
|
||
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
|
||
import { $t } from '@vben/locales';
|
||
|
||
import {
|
||
AutoComplete,
|
||
Button,
|
||
Checkbox,
|
||
CheckboxGroup,
|
||
DatePicker,
|
||
Divider,
|
||
Input,
|
||
InputNumber,
|
||
InputPassword,
|
||
Mentions,
|
||
Radio,
|
||
RadioGroup,
|
||
RangePicker,
|
||
Rate,
|
||
Select,
|
||
Space,
|
||
Switch,
|
||
Textarea,
|
||
TimePicker,
|
||
TreeSelect,
|
||
Upload,
|
||
} from 'ant-design-vue';
|
||
|
||
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
|
||
export type FormComponentType =
|
||
| 'AutoComplete'
|
||
| 'Checkbox'
|
||
| 'CheckboxGroup'
|
||
| 'DatePicker'
|
||
| 'Divider'
|
||
| 'Input'
|
||
| 'InputNumber'
|
||
| 'InputPassword'
|
||
| 'Mentions'
|
||
| 'Radio'
|
||
| 'RadioGroup'
|
||
| 'RangePicker'
|
||
| 'Rate'
|
||
| 'Select'
|
||
| 'Space'
|
||
| 'Switch'
|
||
| 'Textarea'
|
||
| 'TimePicker'
|
||
| 'TreeSelect'
|
||
| 'Upload'
|
||
| BaseFormComponentType;
|
||
|
||
const withDefaultPlaceholder = <T extends Component>(
|
||
component: T,
|
||
type: 'input' | 'select',
|
||
) => {
|
||
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
|
||
const placeholder = props?.placeholder || $t(`placeholder.${type}`);
|
||
return h(component, { ...props, attrs, placeholder }, slots);
|
||
};
|
||
};
|
||
|
||
// 初始化表单组件，并注册到form组件内部
|
||
setupVbenForm<FormComponentType>({
|
||
components: {
|
||
AutoComplete,
|
||
Checkbox,
|
||
CheckboxGroup,
|
||
DatePicker,
|
||
// 自定义默认的重置按钮
|
||
DefaultResetActionButton: (props, { attrs, slots }) => {
|
||
return h(Button, { ...props, attrs, type: 'default' }, slots);
|
||
},
|
||
// 自定义默认的提交按钮
|
||
DefaultSubmitActionButton: (props, { attrs, slots }) => {
|
||
return h(Button, { ...props, attrs, type: 'primary' }, slots);
|
||
},
|
||
Divider,
|
||
Input: withDefaultPlaceholder(Input, 'input'),
|
||
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
|
||
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
|
||
Mentions: withDefaultPlaceholder(Mentions, 'input'),
|
||
Radio,
|
||
RadioGroup,
|
||
RangePicker,
|
||
Rate,
|
||
Select: withDefaultPlaceholder(Select, 'select'),
|
||
Space,
|
||
Switch,
|
||
Textarea: withDefaultPlaceholder(Textarea, 'input'),
|
||
TimePicker,
|
||
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
|
||
Upload,
|
||
},
|
||
config: {
|
||
// ant design vue组件库默认都是 v-model:value
|
||
baseModelPropName: 'value',
|
||
|
||
// 一些组件是 v-model:checked 或者 v-model:fileList
|
||
modelPropNameMap: {
|
||
Checkbox: 'checked',
|
||
Radio: 'checked',
|
||
Switch: 'checked',
|
||
Upload: 'fileList',
|
||
},
|
||
},
|
||
defineRules: {
|
||
// 输入项目必填国际化适配
|
||
required: (value, _params, ctx) => {
|
||
if (value === undefined || value === null || value.length === 0) {
|
||
return $t('formRules.required', [ctx.label]);
|
||
}
|
||
return true;
|
||
},
|
||
// 选择项目必填国际化适配
|
||
selectRequired: (value, _params, ctx) => {
|
||
if (value === undefined || value === null) {
|
||
return $t('formRules.selectRequired', [ctx.label]);
|
||
}
|
||
return true;
|
||
},
|
||
},
|
||
});
|
||
|
||
const useVbenForm = useForm<FormComponentType>;
|
||
|
||
export { useVbenForm, z };
|
||
|
||
export type VbenFormSchema = FormSchema<FormComponentType>;
|
||
export type { VbenFormProps };
|