feat(config-provider): support classprefix replace for all components

.vscode/settings.json

@@ -20,5 +20,6 @@
   "[javascript]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  }
+  },
+  "cSpell.words": ["tdesign", "popconfirm", "swiper", "cascader"]
 }

src/affix/affix.tsx

@@ -1,11 +1,12 @@
 import Vue, { VueConstructor } from 'vue';
 import isFunction from 'lodash/isFunction';
-import { prefix } from '../config';
 import { on, off, getScrollContainer } from '../utils/dom';
 import affixProps from './props';
 import { ScrollContainerElement } from '../common';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+import mixins from '../utils/mixins';
 
-const name = `${prefix}-affix`;
+const classMixins = getClassPrefixMixins('affix');
 export interface Affix extends Vue {
   scrollContainer: ScrollContainerElement;
   ticking: boolean;
@@ -16,11 +17,12 @@ export interface Affix extends Vue {
   };
 }
 
-export default (Vue as VueConstructor<Affix>).extend({
+export default mixins(Vue as VueConstructor<Affix>, classMixins).extend({
   name: 'TAffix',
   props: {
     ...affixProps,
   },
+
   watch: {
     offsetTop() {
       this.handleScroll();
@@ -71,7 +73,7 @@ export default (Vue as VueConstructor<Affix>).extend({
             const placeholderStatus = affixWrapRef.contains(this.placeholderEL);
 
             if (affixed) {
-              affixRef.className = name;
+              affixRef.className = this.componentName;
               affixRef.style.top = `${fixedTop}px`;
               affixRef.style.width = `${wrapWidth}px`;
               affixRef.style.height = `${wrapHeight}px`;

src/alert/alert.tsx

@@ -4,15 +4,12 @@ import {
   InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseIcon,
 } from 'tdesign-icons-vue';
 
-import { prefix } from '../config';
 import { on, off, addClass } from '../utils/dom';
 import props from './props';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { AlertConfig } from '../config-provider/config-receiver';
 
-const name = `${prefix}-alert`;
-
 export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert')).extend({
   name: 'TAlert',
   data() {
@@ -26,10 +23,10 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert')).extend
   props: { ...props },
   render(): VNode {
     const compClass = [
-      name,
-      `${name}--${this.theme}`,
+      this.componentName,
+      `${this.componentName}--${this.theme}`,
       {
-        [`${prefix}-is-hidden`]: !this.visible,
+        [`${this.classPrefix}-is-hidden`]: !this.visible,
       },
     ];
     return (
@@ -62,7 +59,7 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert')).extend
         }[this.theme];
         iconContent = <component></component>;
       }
-      return iconContent ? <div class={`${name}__icon`}>{iconContent}</div> : null;
+      return iconContent ? <div class={`${this.componentName}__icon`}>{iconContent}</div> : null;
     },
 
     renderClose(): VNode {
@@ -78,15 +75,15 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert')).extend
       }
 
       return closeContent ? (
-        <div class={`${name}__close`} onClick={this.handleClose}>
+        <div class={`${this.componentName}__close`} onClick={this.handleClose}>
           {closeContent}
         </div>
       ) : null;
     },
 
     renderContent(): VNode {
       return (
-        <div class={`${name}__content`}>
+        <div class={`${this.componentName}__content`}>
           {this.renderTitle()}
           {this.renderMessage()}
         </div>
@@ -95,15 +92,15 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert')).extend
 
     renderTitle(): VNode {
       const titleContent: ScopedSlotReturnValue = renderTNodeJSX(this, 'title');
-      return titleContent ? <div class={`${name}__title`}> {titleContent}</div> : null;
+      return titleContent ? <div class={`${this.componentName}__title`}> {titleContent}</div> : null;
     },
 
     renderMessage(): VNode {
       const operationContent: ScopedSlotReturnValue = renderTNodeJSX(this, 'operation');
       return (
-        <div class={`${name}__message`}>
+        <div class={`${this.componentName}__message`}>
           {this.renderDescription()}
-          {operationContent ? <div class={`${name}__operation`}>{operationContent}</div> : null}
+          {operationContent ? <div class={`${this.componentName}__operation`}>{operationContent}</div> : null}
         </div>
       );
     },
@@ -126,13 +123,13 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert')).extend
 
       // 如果需要折叠，则元素之间补<br/>；否则不补
       return (
-        <div class={`${name}__description`}>
+        <div class={`${this.componentName}__description`}>
           {hasCollapse
             ? (messageContent as Array<string | VNode>).map((content) => <div>{content}</div>)
             : messageContent}
           {hasCollapse ? (
             <div
-              class={`${name}__collapse`}
+              class={`${this.componentName}__collapse`}
               onClick={() => {
                 this.collapsed = !this.collapsed;
               }}
@@ -149,7 +146,7 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert')).extend
       if (this.onClose) {
         this.onClose({ e });
       }
-      addClass(this.$el, `${name}--closing`);
+      addClass(this.$el, `${this.componentName}--closing`);
     },
 
     handleCloseEnd(e: TransitionEvent) {

src/anchor/anchor-item.tsx

@@ -1,24 +1,24 @@
 import Vue, { VueConstructor } from 'vue';
 import { ScopedSlotReturnValue } from 'vue/types/vnode';
-import CLASSNAMES from '../utils/classnames';
 import { ANCHOR_SHARP_REGEXP } from './utils';
 import props from './anchor-item-props';
-import { COMPONENT_NAME } from './constant';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+import mixins from '../utils/mixins';
+
+const classPrefixMixins = getClassPrefixMixins('anchor');
 
-const CLASSNAME_PREFIX = `${COMPONENT_NAME}__item`;
 export interface Anchor extends Vue {
   tAnchor: {
     active: string;
     handleScrollTo(target: string): void;
     registerLink(href: string): void;
     unregisterLink(href: string): void;
-    handleLinkClick(link: { href: string; title: string; e: MouseEvent}): void;
+    handleLinkClick(link: { href: string; title: string; e: MouseEvent }): void;
   };
 }
 
-export default (Vue as VueConstructor<Anchor>).extend({
+export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
   name: 'TAnchorItem',
-
   props: {
     ...props,
     href: {
@@ -92,11 +92,11 @@ export default (Vue as VueConstructor<Anchor>).extend({
     const titleAttr = typeof title === 'string' ? title : null;
     const isActive = tAnchor.active === href;
     const wrapperClass = {
-      [CLASSNAME_PREFIX]: true,
-      [CLASSNAMES.STATUS.active]: isActive,
+      [`${this.componentName}__item`]: true,
+      [this.commonStatusClassName.active]: isActive,
     };
     const titleClass = {
-      [`${CLASSNAME_PREFIX}-link`]: true,
+      [`${this.componentName}__item-link`]: true,
     };
     return (
       <div class={wrapperClass}>

src/anchor/anchor-target.tsx

@@ -4,7 +4,6 @@ import copyText from '../utils/clipboard';
 import Message from '../message/plugin';
 import props from './anchor-target-props';
 import TPopup from '../popup';
-import { COMPONENT_NAME } from './constant';
 import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { AnchorConfig } from '../config-provider/config-receiver';
 
@@ -37,8 +36,8 @@ export default mixins(getConfigReceiverMixins<Vue, AnchorConfig>('anchor')).exte
       $scopedSlots: { default: children },
       id,
     } = this;
-    const className = [`${COMPONENT_NAME}__target`];
-    const iconClassName = `${COMPONENT_NAME}__copy`;
+    const className = [`${this.componentName}__target`];
+    const iconClassName = `${this.componentName}__copy`;
     return (
       <Tag id={id} class={className}>
         {children && children(null)}

src/anchor/anchor.tsx

@@ -1,25 +1,24 @@
 import Vue, { VueConstructor } from 'vue';
 import { ScopedSlotReturnValue } from 'vue/types/vnode';
-import CLASSNAMES from '../utils/classnames';
 import { ANCHOR_SHARP_REGEXP, ANCHOR_CONTAINER, getOffsetTop } from './utils';
 import {
   on, off, getScroll, scrollTo, getScrollContainer,
 } from '../utils/dom';
 import props from './props';
 import { renderTNodeJSX } from '../utils/render-tnode';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+import mixins from '../utils/mixins';
 
 import Affix from '../affix';
-import { COMPONENT_NAME } from './constant';
 
-const ANCHOR_LINE_CLASSNAME = `${COMPONENT_NAME}__line` as const;
-const ANCHOR_LINE_CURSOR_CLASSNAME = `${COMPONENT_NAME}__line-cursor` as const;
+const classPrefixMixins = getClassPrefixMixins('anchor');
 
 export interface Anchor extends Vue {
   scrollContainer: ANCHOR_CONTAINER;
   // 执行scrollTo设置的flag, 用来禁止执行handleScroll
   handleScrollLock: boolean;
 }
-export default (Vue as VueConstructor<Anchor>).extend({
+export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
   name: 'TAnchor',
 
   props: {
@@ -34,7 +33,7 @@ export default (Vue as VueConstructor<Anchor>).extend({
     return {
       links: [] as string[],
       active: '',
-      activeLineStyle: false as boolean | { top: string; height: string; opacity: number; },
+      activeLineStyle: false as boolean | { top: string; height: string; opacity: number },
     };
   },
   watch: {
@@ -114,7 +113,7 @@ export default (Vue as VueConstructor<Anchor>).extend({
      * 当前active-item的top + height, 以及ANCHOR_ITEM_PADDING修正
      */
     updateActiveLine(): void {
-      const ele = this.$el.querySelector(`.${CLASSNAMES.STATUS.active}>a`) as HTMLAnchorElement;
+      const ele = this.$el.querySelector(`.${this.commonStatusClassName.active}>a`) as HTMLAnchorElement;
       if (!ele) {
         this.activeLineStyle = false;
         return;
@@ -198,7 +197,7 @@ export default (Vue as VueConstructor<Anchor>).extend({
     },
     renderCursor() {
       const titleContent: ScopedSlotReturnValue = renderTNodeJSX(this, 'cursor');
-      return titleContent || <div class={ANCHOR_LINE_CURSOR_CLASSNAME}></div>;
+      return titleContent || <div class={`${this.componentName}__line-cursor`}></div>;
     },
   },
 
@@ -223,11 +222,11 @@ export default (Vue as VueConstructor<Anchor>).extend({
       affixProps,
       activeLineStyle,
     } = this;
-    const className = [COMPONENT_NAME, CLASSNAMES.SIZE[size]];
+    const className = [this.componentName, this.commonSizeClassName[size]];
     const content = (
       <div class={className}>
-        <div class={ANCHOR_LINE_CLASSNAME}>
-          <div class={`${ANCHOR_LINE_CURSOR_CLASSNAME}-wrapper`} style={activeLineStyle}>
+        <div class={`${this.componentName}__line`}>
+          <div class={`${this.componentName}__line-cursor-wrapper`} style={activeLineStyle}>
             {this.renderCursor()}
           </div>
         </div>

src/avatar/avatar.tsx

@@ -1,24 +1,23 @@
 import Vue, { VueConstructor } from 'vue';
-import { prefix } from '../config';
-import CLASSNAMES from '../utils/classnames';
 import props from './props';
 import { renderContent, renderTNodeJSX } from '../utils/render-tnode';
 import { AvatarGroupInstance } from './instance';
 import { Styles } from '../common';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+import mixins from '../utils/mixins';
 
-const name = `${prefix}-avatar`;
+const classPrefixMixins = getClassPrefixMixins('avatar');
 
 export interface AvatarInstance extends Vue {
   avatarGroup: AvatarGroupInstance;
 }
 
-export default (Vue as VueConstructor<AvatarInstance>).extend({
+export default mixins(Vue as VueConstructor<AvatarInstance>, classPrefixMixins).extend({
   name: 'TAvatar',
 
   props: {
     ...props,
   },
-
   data() {
     return {
       isImgExist: true,
@@ -50,7 +49,7 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
         }
         : {};
     },
-    customCharaSize(): Styles {
+    customCharacterSize(): Styles {
       return {
         transform: this.scale,
       };
@@ -84,7 +83,7 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
       }
     },
     isCustomSize() {
-      return this.sizeValue && !CLASSNAMES.SIZE[this.sizeValue];
+      return this.sizeValue && !this.commonSizeClassName[this.sizeValue];
     },
   },
   updated() {
@@ -98,16 +97,16 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
     const isIconOnly = icon && !content;
     const { shape, image, alt } = this.$props;
     const avatarClass = [
-      `${name}`,
-      CLASSNAMES.SIZE[this.sizeValue],
+      this.componentName,
+      this.commonSizeClassName[this.sizeValue],
       {
-        [`${name}--circle`]: shape === 'circle',
-        [`${name}--round`]: shape === 'round',
-        [`${name}__icon`]: !!isIconOnly,
+        [`${this.componentName}--circle`]: shape === 'circle',
+        [`${this.componentName}--round`]: shape === 'round',
+        [`${this.componentName}__icon`]: !!isIconOnly,
       },
     ];
     content = (
-      <span ref="avatarChild" style={{ ...this.customCharaSize }}>
+      <span ref="avatarChild" style={{ ...this.customCharacterSize }}>
         {content}
       </span>
     );

src/avatar/group.tsx

@@ -1,13 +1,14 @@
 import Vue from 'vue';
-import { prefix } from '../config';
 import props from './avatar-group-props';
 import { TNodeReturnValue } from '../common';
 import Avatar from './avatar';
 import { renderContent, renderTNodeJSX } from '../utils/render-tnode';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+import mixins from '../utils/mixins';
 
-const name = `${prefix}-avatar-group`;
+const classPrefixMixins = getClassPrefixMixins('avatar');
 
-export default Vue.extend({
+export default mixins(classPrefixMixins).extend({
   name: 'TAvatarGroup',
   components: {
     Avatar,
@@ -16,7 +17,6 @@ export default Vue.extend({
   props: {
     ...props,
   },
-
   provide(): Record<string, any> {
     return {
       avatarGroup: this,
@@ -65,10 +65,10 @@ export default Vue.extend({
     const children: TNodeReturnValue = $scopedSlots.default && $scopedSlots.default(null);
     const { cascading, max } = this.$props;
     const groupClass = [
-      `${name}`,
+      `${this.componentName}-group`,
       {
-        [`${prefix}-avatar--offset-right`]: cascading === 'right-up',
-        [`${prefix}-avatar--offset-left`]: cascading === 'left-up',
+        [`${this.componentName}--offset-right`]: cascading === 'right-up',
+        [`${this.componentName}--offset-left`]: cascading === 'left-up',
       },
     ];
     let content = [children];