-
Notifications
You must be signed in to change notification settings - Fork 6.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add VbenForm component (#4352)
* feat: add form component * fix: build error * feat: add form adapter * feat: add some component * feat: add some component * feat: add example * feat: suppoer custom action button * chore: update * feat: add example * feat: add formModel,formDrawer demo * fix: build error * fix: typo * fix: ci error --------- Co-authored-by: jinmao <jinmao88@qq.com> Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>
- Loading branch information
3 people
authored
Sep 10, 2024
1 parent
86ed732
commit 524b9ba
Showing
271 changed files
with
5,974 additions
and
1,247 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import type { | ||
| BaseFormComponentType, | ||
| VbenFormSchema as FormSchema, | ||
| VbenFormProps, | ||
| } from '@vben/common-ui'; | ||
|
|
||
| import { h } 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, | ||
| 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' | ||
| | 'TimePicker' | ||
| | 'TreeSelect' | ||
| | 'Upload' | ||
| | BaseFormComponentType; | ||
|
|
||
| // 初始化表单组件，并注册到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, | ||
| InputNumber, | ||
| InputPassword, | ||
| Mentions, | ||
| Radio, | ||
| RadioGroup, | ||
| RangePicker, | ||
| Rate, | ||
| Select, | ||
| Space, | ||
| Switch, | ||
| TimePicker, | ||
| TreeSelect, | ||
| Upload, | ||
| }, | ||
| config: { | ||
| baseModelPropName: 'value', | ||
| modelPropNameMap: { | ||
| Checkbox: 'checked', | ||
| Radio: 'checked', | ||
| Switch: 'checked', | ||
| Upload: 'fileList', | ||
| }, | ||
| }, | ||
| defineRules: { | ||
| required: (value, _params, ctx) => { | ||
| if ((!value && value !== 0) || value.length === 0) { | ||
| return $t('formRules.required', [ctx.label]); | ||
| } | ||
| return true; | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const useVbenForm = useForm<FormComponentType>; | ||
|
|
||
| export { useVbenForm, z }; | ||
|
|
||
| export type VbenFormSchema = FormSchema<FormComponentType>; | ||
| export type { VbenFormProps }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './form'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,91 @@ | ||
| <script lang="ts" setup> | ||
| import { AuthenticationLogin } from '@vben/common-ui'; | ||
| import type { VbenFormSchema } from '@vben/common-ui'; | ||
| import type { BasicOption } from '@vben/types'; | ||
| import { computed } from 'vue'; | ||
| import { AuthenticationLogin, z } from '@vben/common-ui'; | ||
| import { $t } from '@vben/locales'; | ||
| import { useAuthStore } from '#/store'; | ||
| defineOptions({ name: 'Login' }); | ||
| const authStore = useAuthStore(); | ||
| const MOCK_USER_OPTIONS: BasicOption[] = [ | ||
| { | ||
| label: '超级管理员', | ||
| value: 'vben', | ||
| }, | ||
| { | ||
| label: '管理员', | ||
| value: 'admin', | ||
| }, | ||
| { | ||
| label: '用户', | ||
| value: 'jack', | ||
| }, | ||
| ]; | ||
| const formSchema = computed((): VbenFormSchema[] => { | ||
| return [ | ||
| { | ||
| component: 'VbenSelect', | ||
| componentProps: { | ||
| options: MOCK_USER_OPTIONS, | ||
| placeholder: $t('authentication.selectAccount'), | ||
| }, | ||
| fieldName: 'selectAccount', | ||
| label: $t('authentication.selectAccount'), | ||
| rules: z | ||
| .string() | ||
| .min(1, { message: $t('authentication.selectAccount') }) | ||
| .optional() | ||
| .default('vben'), | ||
| }, | ||
| { | ||
| component: 'VbenInput', | ||
| componentProps: { | ||
| placeholder: $t('authentication.usernameTip'), | ||
| }, | ||
| dependencies: { | ||
| trigger(values, form) { | ||
| if (values.selectAccount) { | ||
| const findUser = MOCK_USER_OPTIONS.find( | ||
| (item) => item.value === values.selectAccount, | ||
| ); | ||
| if (findUser) { | ||
| form.setValues({ | ||
| password: '123456', | ||
| username: findUser.value, | ||
| }); | ||
| } | ||
| } | ||
| }, | ||
| triggerFields: ['selectAccount'], | ||
| }, | ||
| fieldName: 'username', | ||
| label: $t('authentication.username'), | ||
| rules: z.string().min(1, { message: $t('authentication.usernameTip') }), | ||
| }, | ||
| { | ||
| component: 'VbenInputPassword', | ||
| componentProps: { | ||
| placeholder: $t('authentication.password'), | ||
| }, | ||
| fieldName: 'password', | ||
| label: $t('authentication.password'), | ||
| rules: z.string().min(1, { message: $t('authentication.passwordTip') }), | ||
| }, | ||
| ]; | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <AuthenticationLogin | ||
| :form-schema="formSchema" | ||
| :loading="authStore.loginLoading" | ||
| password-placeholder="123456" | ||
| username-placeholder="vben" | ||
| @submit="authStore.authLogin" | ||
| /> | ||
| </template> |
Oops, something went wrong.