Skip to content

Commit 24d14c2

Browse files
anncwbanncwb
authored
refactor(adapter): separate form and component adapters so that components adapt to components other than the form (vbenjs#4628)
* refactor: global components can be customized * refactor: remove use Toast and reconstruct the form adapter
1 parent 8b961a9 commit 24d14c2

File tree

63 files changed

+1757
-2095
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1757
-2095
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ If you think this project is helpful to you, you can help the author buy a cup o
134134

135135
![donate](https://unpkg.com/@vbenjs/[email protected]/source/sponsor.png)
136136

137-
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
137+
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
138138

139139
## Contributor
140140

‎apps/web-antd/src/adapter/component/index.ts‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/**
2+
* 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
3+
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
4+
*/
5+
6+
import type { BaseFormComponentType } from '@vben/common-ui';
7+
8+
import type { Component, SetupContext } from 'vue';
9+
import { h } from 'vue';
10+
11+
import { globalShareState } from '@vben/common-ui';
12+
import { $t } from '@vben/locales';
13+
14+
import {
15+
AutoComplete,
16+
Button,
17+
Checkbox,
18+
CheckboxGroup,
19+
DatePicker,
20+
Divider,
21+
Input,
22+
InputNumber,
23+
InputPassword,
24+
Mentions,
25+
notification,
26+
Radio,
27+
RadioGroup,
28+
RangePicker,
29+
Rate,
30+
Select,
31+
Space,
32+
Switch,
33+
Textarea,
34+
TimePicker,
35+
TreeSelect,
36+
Upload,
37+
} from 'ant-design-vue';
38+
39+
const withDefaultPlaceholder = <T extends Component>(
40+
component: T,
41+
type: 'input' | 'select',
42+
) => {
43+
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
44+
const placeholder = props?.placeholder || $t(`placeholder.${type}`);
45+
return h(component, { ...props, ...attrs, placeholder }, slots);
46+
};
47+
};
48+
49+
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
50+
export type ComponentType =
51+
| 'AutoComplete'
52+
| 'Checkbox'
53+
| 'CheckboxGroup'
54+
| 'DatePicker'
55+
| 'DefaultButton'
56+
| 'Divider'
57+
| 'Input'
58+
| 'InputNumber'
59+
| 'InputPassword'
60+
| 'Mentions'
61+
| 'PrimaryButton'
62+
| 'Radio'
63+
| 'RadioGroup'
64+
| 'RangePicker'
65+
| 'Rate'
66+
| 'Select'
67+
| 'Space'
68+
| 'Switch'
69+
| 'Textarea'
70+
| 'TimePicker'
71+
| 'TreeSelect'
72+
| 'Upload'
73+
| BaseFormComponentType;
74+
75+
async function initComponentAdapter() {
76+
const components: Partial<Record<ComponentType, Component>> = {
77+
// 如果你的组件体积比较大，可以使用异步加载
78+
// Button: () =>
79+
// import('xxx').then((res) => res.Button),
80+
81+
AutoComplete,
82+
Checkbox,
83+
CheckboxGroup,
84+
DatePicker,
85+
// 自定义默认按钮
86+
DefaultButton: (props, { attrs, slots }) => {
87+
return h(Button, { ...props, attrs, type: 'default' }, slots);
88+
},
89+
Divider,
90+
Input: withDefaultPlaceholder(Input, 'input'),
91+
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
92+
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
93+
Mentions: withDefaultPlaceholder(Mentions, 'input'),
94+
// 自定义主要按钮
95+
PrimaryButton: (props, { attrs, slots }) => {
96+
return h(Button, { ...props, attrs, type: 'primary' }, slots);
97+
},
98+
Radio,
99+
RadioGroup,
100+
RangePicker,
101+
Rate,
102+
Select: withDefaultPlaceholder(Select, 'select'),
103+
Space,
104+
Switch,
105+
Textarea: withDefaultPlaceholder(Textarea, 'input'),
106+
TimePicker,
107+
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
108+
Upload,
109+
};
110+
111+
// 将组件注册到全局共享状态中
112+
globalShareState.setComponents(components);
113+
114+
// 定义全局共享状态中的消息提示
115+
globalShareState.defineMessage({
116+
// 复制成功消息提示
117+
copyPreferencesSuccess: (title, content) => {
118+
notification.success({
119+
description: content,
120+
message: title,
121+
placement: 'bottomRight',
122+
});
123+
},
124+
});
125+
}
126+
127+
export { initComponentAdapter };

‎apps/web-antd/src/adapter/form.ts‎

Lines changed: 4 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,14 @@
11
import type {
2-
BaseFormComponentType,
32
VbenFormSchema as FormSchema,
43
VbenFormProps,
54
} from '@vben/common-ui';
65

7-
import type { Component, SetupContext } from 'vue';
8-
import { h } from 'vue';
6+
import type { ComponentType } from './component';
97

108
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
119
import { $t } from '@vben/locales';
1210

13-
import {
14-
AutoComplete,
15-
Button,
16-
Checkbox,
17-
CheckboxGroup,
18-
DatePicker,
19-
Divider,
20-
Input,
21-
InputNumber,
22-
InputPassword,
23-
Mentions,
24-
Radio,
25-
RadioGroup,
26-
RangePicker,
27-
Rate,
28-
Select,
29-
Space,
30-
Switch,
31-
Textarea,
32-
TimePicker,
33-
TreeSelect,
34-
Upload,
35-
} from 'ant-design-vue';
36-
37-
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
38-
export type FormComponentType =
39-
| 'AutoComplete'
40-
| 'Checkbox'
41-
| 'CheckboxGroup'
42-
| 'DatePicker'
43-
| 'Divider'
44-
| 'Input'
45-
| 'InputNumber'
46-
| 'InputPassword'
47-
| 'Mentions'
48-
| 'Radio'
49-
| 'RadioGroup'
50-
| 'RangePicker'
51-
| 'Rate'
52-
| 'Select'
53-
| 'Space'
54-
| 'Switch'
55-
| 'Textarea'
56-
| 'TimePicker'
57-
| 'TreeSelect'
58-
| 'Upload'
59-
| BaseFormComponentType;
60-
61-
const withDefaultPlaceholder = <T extends Component>(
62-
component: T,
63-
type: 'input' | 'select',
64-
) => {
65-
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
66-
const placeholder = props?.placeholder || $t(`placeholder.${type}`);
67-
return h(component, { ...props, ...attrs, placeholder }, slots);
68-
};
69-
};
70-
71-
// 初始化表单组件，并注册到form组件内部
72-
setupVbenForm<FormComponentType>({
73-
components: {
74-
AutoComplete,
75-
Checkbox,
76-
CheckboxGroup,
77-
DatePicker,
78-
// 自定义默认的重置按钮
79-
DefaultResetActionButton: (props, { attrs, slots }) => {
80-
return h(Button, { ...props, attrs, type: 'default' }, slots);
81-
},
82-
// 自定义默认的提交按钮
83-
DefaultSubmitActionButton: (props, { attrs, slots }) => {
84-
return h(Button, { ...props, attrs, type: 'primary' }, slots);
85-
},
86-
Divider,
87-
Input: withDefaultPlaceholder(Input, 'input'),
88-
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
89-
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
90-
Mentions: withDefaultPlaceholder(Mentions, 'input'),
91-
Radio,
92-
RadioGroup,
93-
RangePicker,
94-
Rate,
95-
Select: withDefaultPlaceholder(Select, 'select'),
96-
Space,
97-
Switch,
98-
Textarea: withDefaultPlaceholder(Textarea, 'input'),
99-
TimePicker,
100-
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
101-
Upload,
102-
},
11+
setupVbenForm<ComponentType>({
10312
config: {
10413
// ant design vue组件库默认都是 v-model:value
10514
baseModelPropName: 'value',
@@ -130,9 +39,9 @@ setupVbenForm<FormComponentType>({
13039
},
13140
});
13241

133-
const useVbenForm = useForm<FormComponentType>;
42+
const useVbenForm = useForm<ComponentType>;
13443

13544
export { useVbenForm, z };
13645

137-
export type VbenFormSchema = FormSchema<FormComponentType>;
46+
export type VbenFormSchema = FormSchema<ComponentType>;
13847
export type { VbenFormProps };

‎apps/web-antd/src/bootstrap.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@ import '@vben/styles/antd';
77

88
import { setupI18n } from '#/locales';
99

10+
import { initComponentAdapter } from './adapter/component';
1011
import App from './app.vue';
1112
import { router } from './router';
1213

1314
async function bootstrap(namespace: string) {
15+
// 初始化组件适配器
16+
await initComponentAdapter();
17+
1418
const app = createApp(App);
1519

1620
// 国际化 i18n 配置

‎apps/web-antd/src/router/routes/core.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const coreRoutes: RouteRecordRaw[] = [
3232
{
3333
component: AuthPageLayout,
3434
meta: {
35+
hideInTab: true,
3536
title: 'Authentication',
3637
},
3738
name: 'Authentication',

‎apps/web-ele/src/adapter/component/index.ts‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/**
2+
* 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
3+
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
4+
*/
5+
6+
import type { BaseFormComponentType } from '@vben/common-ui';
7+
8+
import type { Component, SetupContext } from 'vue';
9+
import { h } from 'vue';
10+
11+
import { globalShareState } from '@vben/common-ui';
12+
import { $t } from '@vben/locales';
13+
14+
import {
15+
ElButton,
16+
ElCheckbox,
17+
ElCheckboxGroup,
18+
ElDivider,
19+
ElInput,
20+
ElInputNumber,
21+
ElNotification,
22+
ElRadioGroup,
23+
ElSelect,
24+
ElSpace,
25+
ElSwitch,
26+
ElTimePicker,
27+
ElTreeSelect,
28+
ElUpload,
29+
} from 'element-plus';
30+
31+
const withDefaultPlaceholder = <T extends Component>(
32+
component: T,
33+
type: 'input' | 'select',
34+
) => {
35+
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
36+
const placeholder = props?.placeholder || $t(`placeholder.${type}`);
37+
return h(component, { ...props, ...attrs, placeholder }, slots);
38+
};
39+
};
40+
41+
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
42+
export type ComponentType =
43+
| 'Checkbox'
44+
| 'CheckboxGroup'
45+
| 'DatePicker'
46+
| 'Divider'
47+
| 'Input'
48+
| 'InputNumber'
49+
| 'RadioGroup'
50+
| 'Select'
51+
| 'Space'
52+
| 'Switch'
53+
| 'TimePicker'
54+
| 'TreeSelect'
55+
| 'Upload'
56+
| BaseFormComponentType;
57+
58+
async function initComponentAdapter() {
59+
const components: Partial<Record<ComponentType, Component>> = {
60+
// 如果你的组件体积比较大，可以使用异步加载
61+
// Button: () =>
62+
// import('xxx').then((res) => res.Button),
63+
64+
Checkbox: ElCheckbox,
65+
CheckboxGroup: ElCheckboxGroup,
66+
// 自定义默认按钮
67+
DefaulButton: (props, { attrs, slots }) => {
68+
return h(ElButton, { ...props, attrs, type: 'info' }, slots);
69+
},
70+
// 自定义主要按钮
71+
PrimaryButton: (props, { attrs, slots }) => {
72+
return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
73+
},
74+
Divider: ElDivider,
75+
Input: withDefaultPlaceholder(ElInput, 'input'),
76+
InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
77+
RadioGroup: ElRadioGroup,
78+
Select: withDefaultPlaceholder(ElSelect, 'select'),
79+
Space: ElSpace,
80+
Switch: ElSwitch,
81+
TimePicker: ElTimePicker,
82+
TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
83+
Upload: ElUpload,
84+
};
85+
86+
// 将组件注册到全局共享状态中
87+
globalShareState.setComponents(components);
88+
89+
// 定义全局共享状态中的消息提示
90+
globalShareState.defineMessage({
91+
// 复制成功消息提示
92+
copyPreferencesSuccess: (title, content) => {
93+
ElNotification({
94+
title,
95+
message: content,
96+
position: 'bottom-right',
97+
duration: 0,
98+
type: 'success',
99+
});
100+
},
101+
});
102+
}
103+
104+
export { initComponentAdapter };

0 commit comments

Comments
 (0)