feat(ConfigProvider): supports replacing all component class name pre…

…fix (#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>
Tencent · Sep 23, 2024 · 8c666df · 8c666df
1 parent 2e2f312
commit 8c666df
Show file tree

Hide file tree

Showing 68 changed files with 592 additions and 606 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/action-sheet/action-sheet-grid.tsx b/src/action-sheet/action-sheet-grid.tsx
@@ -1,11 +1,8 @@
 import { defineComponent, computed } from 'vue';
-import config from '../config';
 import { Grid as TGrid, GridItem as TGridItem } from '../grid';
 import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
 import { ActionSheetItem } from './type';
-
-const { prefix } = config;
-const name = `${prefix}-action-sheet`;
+import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
   components: { TGrid, TGridItem, TSwiper, TSwiperItem },
@@ -25,8 +22,12 @@ export default defineComponent({
   },
   emits: ['selected'],
   setup(props, { emit }) {
+    const actionSheetClass = usePrefixClass('action-sheet');
+
     const gridColumn = computed(() => Math.ceil(props.count / 2));
+
     const pageNum = computed(() => Math.ceil(props.items.length / props.count));
+
     const actionItems = computed(() => {
       const res: ActionSheetItem[][] = [];
       for (let i = 0; i < pageNum.value; i++) {
@@ -35,15 +36,17 @@ export default defineComponent({
       }
       return res;
     });
+
     const gridClasses = computed(() => ({
-      [`${name}__grid`]: true,
-      [`${name}__grid--swiper`]: pageNum.value > 1,
-      [`${name}__dots`]: pageNum.value > 1,
+      [`${actionSheetClass.value}__grid`]: true,
+      [`${actionSheetClass.value}__grid--swiper`]: pageNum.value > 1,
+      [`${actionSheetClass.value}__dots`]: pageNum.value > 1,
     }));
+
     const handleSelected = (i: number) => {
       emit('selected', i);
-      console.log('111', i);
     };
+
     return () => {
       const swiper = () => {
         const swiperItems = actionItems.value.map((items, i) => {
@@ -72,7 +75,7 @@ export default defineComponent({
               pagination-position="bottom"
               navigation={{ type: 'dots', showControls: false }}
               loop={false}
-              class={`${name}__swiper-wrap`}
+              class={`${actionSheetClass.value}__swiper-wrap`}
               height={192}
             >
               {swiperItems}

diff --git a/src/action-sheet/action-sheet-list.tsx b/src/action-sheet/action-sheet-list.tsx
@@ -1,15 +1,11 @@
 import { computed, defineComponent, PropType, toRefs } from 'vue';
 import TButton from '../button';
 import TBadge from '../badge';
-import config from '../config';
 import { ActionSheetItem } from './type';
 import { useTNodeDefault } from '../hooks/tnode';
-
-const { prefix } = config;
-const name = `${prefix}-action-sheet`;
+import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  name,
   components: { TButton, TBadge },
   props: {
     items: {
@@ -23,15 +19,17 @@ export default defineComponent({
   },
   emits: ['selected'],
   setup(props, { emit }) {
+    const actionSheetClass = usePrefixClass('action-sheet');
+
     const renderTNodeJSX = useTNodeDefault();
 
     const { align, items } = toRefs(props);
     const handleSelected = (index: number) => {
       emit('selected', index);
     };
     const itemClasses = computed(() => ({
-      [`${name}__list-item`]: true,
-      [`${name}__list-item--left`]: align.value === 'left',
+      [`${actionSheetClass.value}__list-item`]: true,
+      [`${actionSheetClass.value}__list-item--left`]: align.value === 'left',
     }));
 
     return () => {
@@ -49,24 +47,24 @@ export default defineComponent({
                     size={item.badge.size}
                     offset={item.badge.offset || [-16, 20]}
                   >
-                    <span class={`${name}__list-item-text`}> {item.label}</span>
+                    <span class={`${actionSheetClass.value}__list-item-text`}> {item.label}</span>
                   </t-badge>
                 );
               }
               return renderTNodeJSX('badge', {
-                defaultNode: <span class={`${name}__list-item-text`}>{item.label}</span>,
+                defaultNode: <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>,
               });
             };
             return content();
           }
-          return <span class={`${name}__list-item-text`}>{item.label}</span>;
+          return <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>;
         };
         const buttonList = items.value.map((item, index) => (
           <t-button
             key={index}
             variant={'text'}
             block
-            class={[itemClasses.value, { [`${name}__list-item--disabled`]: item.disabled }]}
+            class={[itemClasses.value, { [`${actionSheetClass.value}__list-item--disabled`]: item.disabled }]}
             disabled={item.disabled}
             icon={item.icon}
             style={{ color: item.color }}
@@ -78,7 +76,7 @@ export default defineComponent({
         return buttonList;
       };
 
-      return <div class={`${name}__list`}>{renderButtonNode()}</div>;
+      return <div class={`${actionSheetClass.value}__list`}>{renderButtonNode()}</div>;
     };
   },
 });
diff --git a/src/action-sheet/action-sheet.tsx b/src/action-sheet/action-sheet.tsx
@@ -7,13 +7,12 @@ import TButton from '../button';
 import config from '../config';
 import { TdActionSheetProps, ActionSheetItem } from './type';
 import props from './props';
-import { useConfig } from '../config-provider/useConfig';
+import { usePrefixClass, useConfig } from '../hooks/useClass';
 
 const { prefix } = config;
-const name = `${prefix}-action-sheet`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-action-sheet`,
   components: {
     TPopup,
     TButton,
@@ -23,6 +22,7 @@ export default defineComponent({
   props,
   emits: ['selected', 'update:modelValue', 'cancel', 'close', 'update:visible'],
   setup(props, context) {
+    const actionSheetClass = usePrefixClass('action-sheet');
     const { globalConfig } = useConfig('actionSheet');
 
     const actionItems = computed(() => {
@@ -42,12 +42,12 @@ export default defineComponent({
       'visible-change',
     );
     const rootClasses = computed(() => ({
-      [`${name}__content`]: true,
+      [`${actionSheetClass.value}__content`]: true,
     }));
     const descriptionClasses = computed(() => ({
-      [`${name}__description`]: true,
-      [`${name}__description--left`]: props.align === 'left',
-      [`${name}__description--grid`]: props.theme === 'grid',
+      [`${actionSheetClass.value}__description`]: true,
+      [`${actionSheetClass.value}__description--left`]: props.align === 'left',
+      [`${actionSheetClass.value}__description--grid`]: props.theme === 'grid',
     }));
     watch(
       () => currentVisible.value,
@@ -100,9 +100,9 @@ export default defineComponent({
         const cancel = () => {
           if (props.showCancel) {
             return (
-              <div class={`${name}__footer`}>
-                <div class={`${name}__gap-${props.theme}`}></div>
-                <t-button class={`${name}__cancel`} variant="text" block onClick={handleCancel}>
+              <div class={`${actionSheetClass.value}__footer`}>
+                <div class={`${actionSheetClass.value}__gap-${props.theme}`}></div>
+                <t-button class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
                   {props.cancelText || globalConfig.value.cancel}
                 </t-button>
               </div>
@@ -123,7 +123,7 @@ export default defineComponent({
           visible={currentVisible.value}
           placement="bottom"
           destroy-on-close={true}
-          class={name}
+          class={actionSheetClass.value}
           onClose={handleClose}
         >
           {root()}

diff --git a/src/avatar/avatar-group.tsx b/src/avatar/avatar-group.tsx
@@ -7,10 +7,9 @@ import { usePrefixClass } from '../hooks/useClass';
 import { isValidSize } from '../_common/js/avatar/utils';
 
 const { prefix } = config;
-const name = `${prefix}-avatar-group`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-avatar-group`,
   props: AvatarGroupProps,
   setup(props) {
     const renderTNodeJSX = useTNodeJSX();

diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject } from 'vue';
 import TBadge from '../badge';
 import TImage from '../image';
 import config from '../config';
@@ -9,10 +9,9 @@ import { usePrefixClass } from '../hooks/useClass';
 import { isValidSize } from '../_common/js/avatar/utils';
 
 const { prefix } = config;
-const name = `${prefix}-avatar`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-avatar`,
   props: AvatarProps,
   setup(props) {
     const renderTNodeJSX = useTNodeJSX();

diff --git a/src/badge/badge.tsx b/src/badge/badge.tsx
@@ -7,16 +7,17 @@ import { usePrefixClass } from '../hooks/useClass';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
-const name = `${prefix}-badge`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-badge`,
   props: BadgeProps,
   setup(props) {
     const renderTNodeJSX = useTNodeJSX();
     const renderTNodeContent = useContent();
 
     const badgeClass = usePrefixClass('badge');
+    const classPrefix = usePrefixClass();
+
     // 徽标外层样式类
     const badgeClasses = computed(() => ({
       [`${badgeClass.value}`]: true,
@@ -30,7 +31,7 @@ export default defineComponent({
       [`${badgeClass.value}--${props.size}`]: true,
       [`${badgeClass.value}--${props.shape}`]: true,
       [`${badgeClass.value}--count`]: !props.dot && props.count,
-      [`${prefix}-has-count`]: true,
+      [`${classPrefix.value}-has-count`]: true,
     }));
 
     // 是否展示角标

diff --git a/src/calendar/calendar.tsx b/src/calendar/calendar.tsx
@@ -4,28 +4,30 @@ import config from '../config';
 import calendarProps from './props';
 import { useTNodeJSX } from '../hooks/tnode';
 import calendarTemplate from './template';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
-const name = `${prefix}-calendar`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-calendar`,
   components: {
     TPopup,
     calendarTemplate,
   },
   props: calendarProps,
   emits: ['update:visible'],
   setup(props, context) {
+    const calendarClass = usePrefixClass('calendar');
+
     const calendarTemplateRef = ref();
     const renderTNodeJSX = useTNodeJSX();
 
     provide('templateProps', reactive(props));
     const selectedValueIntoView = () => {
       const type = props.type === 'range' ? 'start' : 'selected';
       const { templateRef } = calendarTemplateRef.value;
-      const scrollContainer = templateRef.querySelector(`.${name}__months`);
-      const selectedDate = templateRef.querySelector(`.${name}__dates-item--${type}`)?.parentNode
+      const scrollContainer = templateRef.querySelector(`.${calendarClass.value}__months`);
+      const selectedDate = templateRef.querySelector(`.${calendarClass.value}__dates-item--${type}`)?.parentNode
         ?.previousElementSibling;
       if (selectedDate) {
         scrollContainer.scrollTop = selectedDate.offsetTop - scrollContainer.offsetTop;

diff --git a/src/calendar/template.tsx b/src/calendar/template.tsx
@@ -5,7 +5,7 @@ import config from '../config';
 import Props from './template-props';
 import { useTNodeJSX } from '../hooks/tnode';
 import { TdCalendarProps, TDate, TDateType } from './type';
-import { useConfig } from '../config-provider/useConfig';
+import { usePrefixClass, useConfig } from '../hooks/useClass';
 
 const { prefix } = config;
 const name = `${prefix}-calendar`;
@@ -20,6 +20,7 @@ export default defineComponent({
   setup(_props, context) {
     const renderTNodeJSX = useTNodeJSX();
     const { t, globalConfig } = useConfig('calendar');
+    const calendarClass = usePrefixClass('calendar');
 
     const props = inject('templateProps') as TdCalendarProps;
     // 获取时间年月日起
@@ -213,9 +214,9 @@ export default defineComponent({
       templateRef,
     });
     const getDateItemClass = (dateItem: TDate) => {
-      let className = `${name}__dates-item`;
+      let className = `${calendarClass.value}__dates-item`;
       if (dateItem.type) {
-        className = `${className} ${name}__dates-item--${dateItem.type}`;
+        className = `${className} ${calendarClass.value}__dates-item--${dateItem.type}`;
       }
       if (dateItem.className) {
         className = `${className} ${dateItem.className}`;
@@ -228,19 +229,21 @@ export default defineComponent({
         if (cell) {
           return cell;
         }
-        let className = `${name}__dates-item-suffix`;
+        let className = `${calendarClass.value}__dates-item-suffix`;
         if (dateItem.type) {
-          className = `${className} ${name}__dates-item-suffix--${dateItem.type}`;
+          className = `${className} ${calendarClass.value}__dates-item-suffix--${dateItem.type}`;
         }
         return (
           <>
-            {dateItem.prefix && <div class={`${name}__dates-item-prefix`}>{dateItem.prefix}</div>}
+            {dateItem.prefix && <div class={`${calendarClass.value}__dates-item-prefix`}>{dateItem.prefix}</div>}
             {dateItem.day}
             {dateItem.suffix && <div class={className}>{dateItem.suffix}</div>}
           </>
         );
       };
-      const className = usePopup.value ? `${name} ${name}--popup` : `${name}`;
+      const className = usePopup.value
+        ? `${calendarClass.value} ${calendarClass.value}--popup`
+        : `${calendarClass.value}`;
 
       const renderConfirmBtn = () => {
         if (confirmBtn.value && typeof confirmBtn.value !== 'object') {
@@ -256,22 +259,24 @@ export default defineComponent({
 
       return (
         <div ref={templateRef} class={className}>
-          <div class={`${name}__title`}>{_props.title || globalConfig.value.title}</div>
-          {usePopup.value && <CloseIcon class={`${name}__close-btn`} size="24" onClick={handleClose}></CloseIcon>}
-          <div class={`${name}__days`}>
+          <div class={`${calendarClass.value}__title`}>{_props.title || globalConfig.value.title}</div>
+          {usePopup.value && (
+            <CloseIcon class={`${calendarClass.value}__close-btn`} size="24" onClick={handleClose}></CloseIcon>
+          )}
+          <div class={`${calendarClass.value}__days`}>
             {(days.value || []).map((item, index) => (
-              <div key={index} class={`${name}__days-item`}>
+              <div key={index} class={`${calendarClass.value}__days-item`}>
                 {item}
               </div>
             ))}
           </div>
-          <div class={`${name}__months`} style="overflow: auto">
+          <div class={`${calendarClass.value}__months`} style="overflow: auto">
             {months.value.map((item, index) => (
               <>
-                <div class={`${name}__month`} key={index}>
+                <div class={`${calendarClass.value}__month`} key={index}>
                   {t(globalConfig.value.monthTitle, { year: item.year, month: globalConfig.value.months[item.month] })}
                 </div>
-                <div class={`${name}__dates`} key={index}>
+                <div class={`${calendarClass.value}__dates`} key={index}>
                   {new Array((item.weekdayOfFirstDay - firstDayOfWeek.value + 7) % 7)
                     .fill(0)
                     .map((emptyItem, index) => (
@@ -292,7 +297,7 @@ export default defineComponent({
               </>
             ))}
           </div>
-          {usePopup.value && <div class="t-calendar__footer">{renderConfirmBtn()}</div>}
+          {usePopup.value && <div class={`${calendarClass.value}__footer`}>{renderConfirmBtn()}</div>}
         </div>
       );
     };
+2 −2		.vscode/settings.json
+12 −0		docs/mobile/api/drawer.md
+1 −1		docs/mobile/api/indexes.en-US.md
+28 −0		docs/mobile/api/switch.en-US.md
+7 −3		docs/mobile/api/switch.md
+25 −0		docs/mobile/api/tree-select.en-US.md
+25 −0		docs/mobile/api/tree-select.md
+37 −0		docs/mobile/api_v2/config-provider.en-US.md
+92 −0		docs/mobile/api_v2/config-provider.md
+12 −0		docs/mobile/api_v2/drawer.en-US.md
+12 −0		docs/mobile/api_v2/drawer.md
+1 −1		docs/mobile/api_v2/indexes.en-US.md
+1 −1		docs/web/api/popup.md
+4 −4		js/color-picker/color.ts
+3 −3		js/date-picker/utils.ts
+6 −0		style/web/components/dialog/_index.less
+1 −1		style/web/components/switch/_index.less
+20 −0		test/unit/date-picker/utils.test.js