Skip to content

Commit 8c666df

Browse files
anlyyaogithub-actions[bot]
anlyyao
and
github-actions[bot]
authored
feat(ConfigProvider): supports replacing all component class name prefix (#1596)
* feat(ConfigProvider): supports replacing all component class name prefix * docs: update docs * chore: update common --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 2e2f312 commit 8c666df

Some content is hidden

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

68 files changed

+592
-606
lines changed

‎src/_common

‎src/action-sheet/action-sheet-grid.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import { defineComponent, computed } from 'vue';
2-
import config from '../config';
32
import { Grid as TGrid, GridItem as TGridItem } from '../grid';
43
import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
54
import { ActionSheetItem } from './type';
6-
7-
const { prefix } = config;
8-
const name = `${prefix}-action-sheet`;
5+
import { usePrefixClass } from '../hooks/useClass';
96

107
export default defineComponent({
118
components: { TGrid, TGridItem, TSwiper, TSwiperItem },
@@ -25,8 +22,12 @@ export default defineComponent({
2522
},
2623
emits: ['selected'],
2724
setup(props, { emit }) {
25+
const actionSheetClass = usePrefixClass('action-sheet');
26+
2827
const gridColumn = computed(() => Math.ceil(props.count / 2));
28+
2929
const pageNum = computed(() => Math.ceil(props.items.length / props.count));
30+
3031
const actionItems = computed(() => {
3132
const res: ActionSheetItem[][] = [];
3233
for (let i = 0; i < pageNum.value; i++) {
@@ -35,15 +36,17 @@ export default defineComponent({
3536
}
3637
return res;
3738
});
39+
3840
const gridClasses = computed(() => ({
39-
[`${name}__grid`]: true,
40-
[`${name}__grid--swiper`]: pageNum.value > 1,
41-
[`${name}__dots`]: pageNum.value > 1,
41+
[`${actionSheetClass.value}__grid`]: true,
42+
[`${actionSheetClass.value}__grid--swiper`]: pageNum.value > 1,
43+
[`${actionSheetClass.value}__dots`]: pageNum.value > 1,
4244
}));
45+
4346
const handleSelected = (i: number) => {
4447
emit('selected', i);
45-
console.log('111', i);
4648
};
49+
4750
return () => {
4851
const swiper = () => {
4952
const swiperItems = actionItems.value.map((items, i) => {
@@ -72,7 +75,7 @@ export default defineComponent({
7275
pagination-position="bottom"
7376
navigation={{ type: 'dots', showControls: false }}
7477
loop={false}
75-
class={`${name}__swiper-wrap`}
78+
class={`${actionSheetClass.value}__swiper-wrap`}
7679
height={192}
7780
>
7881
{swiperItems}

‎src/action-sheet/action-sheet-list.tsx

+10-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
import { computed, defineComponent, PropType, toRefs } from 'vue';
22
import TButton from '../button';
33
import TBadge from '../badge';
4-
import config from '../config';
54
import { ActionSheetItem } from './type';
65
import { useTNodeDefault } from '../hooks/tnode';
7-
8-
const { prefix } = config;
9-
const name = `${prefix}-action-sheet`;
6+
import { usePrefixClass } from '../hooks/useClass';
107

118
export default defineComponent({
12-
name,
139
components: { TButton, TBadge },
1410
props: {
1511
items: {
@@ -23,15 +19,17 @@ export default defineComponent({
2319
},
2420
emits: ['selected'],
2521
setup(props, { emit }) {
22+
const actionSheetClass = usePrefixClass('action-sheet');
23+
2624
const renderTNodeJSX = useTNodeDefault();
2725

2826
const { align, items } = toRefs(props);
2927
const handleSelected = (index: number) => {
3028
emit('selected', index);
3129
};
3230
const itemClasses = computed(() => ({
33-
[`${name}__list-item`]: true,
34-
[`${name}__list-item--left`]: align.value === 'left',
31+
[`${actionSheetClass.value}__list-item`]: true,
32+
[`${actionSheetClass.value}__list-item--left`]: align.value === 'left',
3533
}));
3634

3735
return () => {
@@ -49,24 +47,24 @@ export default defineComponent({
4947
size={item.badge.size}
5048
offset={item.badge.offset || [-16, 20]}
5149
>
52-
<span class={`${name}__list-item-text`}> {item.label}</span>
50+
<span class={`${actionSheetClass.value}__list-item-text`}> {item.label}</span>
5351
</t-badge>
5452
);
5553
}
5654
return renderTNodeJSX('badge', {
57-
defaultNode: <span class={`${name}__list-item-text`}>{item.label}</span>,
55+
defaultNode: <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>,
5856
});
5957
};
6058
return content();
6159
}
62-
return <span class={`${name}__list-item-text`}>{item.label}</span>;
60+
return <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>;
6361
};
6462
const buttonList = items.value.map((item, index) => (
6563
<t-button
6664
key={index}
6765
variant={'text'}
6866
block
69-
class={[itemClasses.value, { [`${name}__list-item--disabled`]: item.disabled }]}
67+
class={[itemClasses.value, { [`${actionSheetClass.value}__list-item--disabled`]: item.disabled }]}
7068
disabled={item.disabled}
7169
icon={item.icon}
7270
style={{ color: item.color }}
@@ -78,7 +76,7 @@ export default defineComponent({
7876
return buttonList;
7977
};
8078

81-
return <div class={`${name}__list`}>{renderButtonNode()}</div>;
79+
return <div class={`${actionSheetClass.value}__list`}>{renderButtonNode()}</div>;
8280
};
8381
},
8482
});

‎src/action-sheet/action-sheet.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,12 @@ import TButton from '../button';
77
import config from '../config';
88
import { TdActionSheetProps, ActionSheetItem } from './type';
99
import props from './props';
10-
import { useConfig } from '../config-provider/useConfig';
10+
import { usePrefixClass, useConfig } from '../hooks/useClass';
1111

1212
const { prefix } = config;
13-
const name = `${prefix}-action-sheet`;
1413

1514
export default defineComponent({
16-
name,
15+
name: `${prefix}-action-sheet`,
1716
components: {
1817
TPopup,
1918
TButton,
@@ -23,6 +22,7 @@ export default defineComponent({
2322
props,
2423
emits: ['selected', 'update:modelValue', 'cancel', 'close', 'update:visible'],
2524
setup(props, context) {
25+
const actionSheetClass = usePrefixClass('action-sheet');
2626
const { globalConfig } = useConfig('actionSheet');
2727

2828
const actionItems = computed(() => {
@@ -42,12 +42,12 @@ export default defineComponent({
4242
'visible-change',
4343
);
4444
const rootClasses = computed(() => ({
45-
[`${name}__content`]: true,
45+
[`${actionSheetClass.value}__content`]: true,
4646
}));
4747
const descriptionClasses = computed(() => ({
48-
[`${name}__description`]: true,
49-
[`${name}__description--left`]: props.align === 'left',
50-
[`${name}__description--grid`]: props.theme === 'grid',
48+
[`${actionSheetClass.value}__description`]: true,
49+
[`${actionSheetClass.value}__description--left`]: props.align === 'left',
50+
[`${actionSheetClass.value}__description--grid`]: props.theme === 'grid',
5151
}));
5252
watch(
5353
() => currentVisible.value,
@@ -100,9 +100,9 @@ export default defineComponent({
100100
const cancel = () => {
101101
if (props.showCancel) {
102102
return (
103-
<div class={`${name}__footer`}>
104-
<div class={`${name}__gap-${props.theme}`}></div>
105-
<t-button class={`${name}__cancel`} variant="text" block onClick={handleCancel}>
103+
<div class={`${actionSheetClass.value}__footer`}>
104+
<div class={`${actionSheetClass.value}__gap-${props.theme}`}></div>
105+
<t-button class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
106106
{props.cancelText || globalConfig.value.cancel}
107107
</t-button>
108108
</div>
@@ -123,7 +123,7 @@ export default defineComponent({
123123
visible={currentVisible.value}
124124
placement="bottom"
125125
destroy-on-close={true}
126-
class={name}
126+
class={actionSheetClass.value}
127127
onClose={handleClose}
128128
>
129129
{root()}

‎src/avatar/avatar-group.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@ import { usePrefixClass } from '../hooks/useClass';
77
import { isValidSize } from '../_common/js/avatar/utils';
88

99
const { prefix } = config;
10-
const name = `${prefix}-avatar-group`;
1110

1211
export default defineComponent({
13-
name,
12+
name: `${prefix}-avatar-group`,
1413
props: AvatarGroupProps,
1514
setup(props) {
1615
const renderTNodeJSX = useTNodeJSX();

‎src/avatar/avatar.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { computed, defineComponent, inject, ref } from 'vue';
1+
import { computed, defineComponent, inject } from 'vue';
22
import TBadge from '../badge';
33
import TImage from '../image';
44
import config from '../config';
@@ -9,10 +9,9 @@ import { usePrefixClass } from '../hooks/useClass';
99
import { isValidSize } from '../_common/js/avatar/utils';
1010

1111
const { prefix } = config;
12-
const name = `${prefix}-avatar`;
1312

1413
export default defineComponent({
15-
name,
14+
name: `${prefix}-avatar`,
1615
props: AvatarProps,
1716
setup(props) {
1817
const renderTNodeJSX = useTNodeJSX();

‎src/badge/badge.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,17 @@ import { usePrefixClass } from '../hooks/useClass';
77
import { useContent, useTNodeJSX } from '../hooks/tnode';
88

99
const { prefix } = config;
10-
const name = `${prefix}-badge`;
1110

1211
export default defineComponent({
13-
name,
12+
name: `${prefix}-badge`,
1413
props: BadgeProps,
1514
setup(props) {
1615
const renderTNodeJSX = useTNodeJSX();
1716
const renderTNodeContent = useContent();
1817

1918
const badgeClass = usePrefixClass('badge');
19+
const classPrefix = usePrefixClass();
20+
2021
// 徽标外层样式类
2122
const badgeClasses = computed(() => ({
2223
[`${badgeClass.value}`]: true,
@@ -30,7 +31,7 @@ export default defineComponent({
3031
[`${badgeClass.value}--${props.size}`]: true,
3132
[`${badgeClass.value}--${props.shape}`]: true,
3233
[`${badgeClass.value}--count`]: !props.dot && props.count,
33-
[`${prefix}-has-count`]: true,
34+
[`${classPrefix.value}-has-count`]: true,
3435
}));
3536

3637
// 是否展示角标

‎src/calendar/calendar.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,30 @@ import config from '../config';
44
import calendarProps from './props';
55
import { useTNodeJSX } from '../hooks/tnode';
66
import calendarTemplate from './template';
7+
import { usePrefixClass } from '../hooks/useClass';
78

89
const { prefix } = config;
9-
const name = `${prefix}-calendar`;
1010

1111
export default defineComponent({
12-
name,
12+
name: `${prefix}-calendar`,
1313
components: {
1414
TPopup,
1515
calendarTemplate,
1616
},
1717
props: calendarProps,
1818
emits: ['update:visible'],
1919
setup(props, context) {
20+
const calendarClass = usePrefixClass('calendar');
21+
2022
const calendarTemplateRef = ref();
2123
const renderTNodeJSX = useTNodeJSX();
2224

2325
provide('templateProps', reactive(props));
2426
const selectedValueIntoView = () => {
2527
const type = props.type === 'range' ? 'start' : 'selected';
2628
const { templateRef } = calendarTemplateRef.value;
27-
const scrollContainer = templateRef.querySelector(`.${name}__months`);
28-
const selectedDate = templateRef.querySelector(`.${name}__dates-item--${type}`)?.parentNode
29+
const scrollContainer = templateRef.querySelector(`.${calendarClass.value}__months`);
30+
const selectedDate = templateRef.querySelector(`.${calendarClass.value}__dates-item--${type}`)?.parentNode
2931
?.previousElementSibling;
3032
if (selectedDate) {
3133
scrollContainer.scrollTop = selectedDate.offsetTop - scrollContainer.offsetTop;

‎src/calendar/template.tsx

+20-15
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import config from '../config';
55
import Props from './template-props';
66
import { useTNodeJSX } from '../hooks/tnode';
77
import { TdCalendarProps, TDate, TDateType } from './type';
8-
import { useConfig } from '../config-provider/useConfig';
8+
import { usePrefixClass, useConfig } from '../hooks/useClass';
99

1010
const { prefix } = config;
1111
const name = `${prefix}-calendar`;
@@ -20,6 +20,7 @@ export default defineComponent({
2020
setup(_props, context) {
2121
const renderTNodeJSX = useTNodeJSX();
2222
const { t, globalConfig } = useConfig('calendar');
23+
const calendarClass = usePrefixClass('calendar');
2324

2425
const props = inject('templateProps') as TdCalendarProps;
2526
// 获取时间年月日起
@@ -213,9 +214,9 @@ export default defineComponent({
213214
templateRef,
214215
});
215216
const getDateItemClass = (dateItem: TDate) => {
216-
let className = `${name}__dates-item`;
217+
let className = `${calendarClass.value}__dates-item`;
217218
if (dateItem.type) {
218-
className = `${className} ${name}__dates-item--${dateItem.type}`;
219+
className = `${className} ${calendarClass.value}__dates-item--${dateItem.type}`;
219220
}
220221
if (dateItem.className) {
221222
className = `${className} ${dateItem.className}`;
@@ -228,19 +229,21 @@ export default defineComponent({
228229
if (cell) {
229230
return cell;
230231
}
231-
let className = `${name}__dates-item-suffix`;
232+
let className = `${calendarClass.value}__dates-item-suffix`;
232233
if (dateItem.type) {
233-
className = `${className} ${name}__dates-item-suffix--${dateItem.type}`;
234+
className = `${className} ${calendarClass.value}__dates-item-suffix--${dateItem.type}`;
234235
}
235236
return (
236237
<>
237-
{dateItem.prefix && <div class={`${name}__dates-item-prefix`}>{dateItem.prefix}</div>}
238+
{dateItem.prefix && <div class={`${calendarClass.value}__dates-item-prefix`}>{dateItem.prefix}</div>}
238239
{dateItem.day}
239240
{dateItem.suffix && <div class={className}>{dateItem.suffix}</div>}
240241
</>
241242
);
242243
};
243-
const className = usePopup.value ? `${name} ${name}--popup` : `${name}`;
244+
const className = usePopup.value
245+
? `${calendarClass.value} ${calendarClass.value}--popup`
246+
: `${calendarClass.value}`;
244247

245248
const renderConfirmBtn = () => {
246249
if (confirmBtn.value && typeof confirmBtn.value !== 'object') {
@@ -256,22 +259,24 @@ export default defineComponent({
256259

257260
return (
258261
<div ref={templateRef} class={className}>
259-
<div class={`${name}__title`}>{_props.title || globalConfig.value.title}</div>
260-
{usePopup.value && <CloseIcon class={`${name}__close-btn`} size="24" onClick={handleClose}></CloseIcon>}
261-
<div class={`${name}__days`}>
262+
<div class={`${calendarClass.value}__title`}>{_props.title || globalConfig.value.title}</div>
263+
{usePopup.value && (
264+
<CloseIcon class={`${calendarClass.value}__close-btn`} size="24" onClick={handleClose}></CloseIcon>
265+
)}
266+
<div class={`${calendarClass.value}__days`}>
262267
{(days.value || []).map((item, index) => (
263-
<div key={index} class={`${name}__days-item`}>
268+
<div key={index} class={`${calendarClass.value}__days-item`}>
264269
{item}
265270
</div>
266271
))}
267272
</div>
268-
<div class={`${name}__months`} style="overflow: auto">
273+
<div class={`${calendarClass.value}__months`} style="overflow: auto">
269274
{months.value.map((item, index) => (
270275
<>
271-
<div class={`${name}__month`} key={index}>
276+
<div class={`${calendarClass.value}__month`} key={index}>
272277
{t(globalConfig.value.monthTitle, { year: item.year, month: globalConfig.value.months[item.month] })}
273278
</div>
274-
<div class={`${name}__dates`} key={index}>
279+
<div class={`${calendarClass.value}__dates`} key={index}>
275280
{new Array((item.weekdayOfFirstDay - firstDayOfWeek.value + 7) % 7)
276281
.fill(0)
277282
.map((emptyItem, index) => (
@@ -292,7 +297,7 @@ export default defineComponent({
292297
</>
293298
))}
294299
</div>
295-
{usePopup.value && <div class="t-calendar__footer">{renderConfirmBtn()}</div>}
300+
{usePopup.value && <div class={`${calendarClass.value}__footer`}>{renderConfirmBtn()}</div>}
296301
</div>
297302
);
298303
};

0 commit comments

Comments
 (0)