feat(configprovider): support classprefix replace for all components

Tencent · Aug 14, 2022 · a46ee27 · a46ee27
1 parent 36ce41f
commit a46ee27
Show file tree

Hide file tree

Showing 19 changed files with 230 additions and 207 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,12 @@
 {
   "eslint.format.enable": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue"
+  ],
   "[vue]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
@@ -20,5 +26,8 @@
   "[javascript]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  }
-}
+  },
+  "cSpell.words": [
+    "tdesign"
+  ]
+}
diff --git a/src/affix/affix.tsx b/src/affix/affix.tsx
@@ -1,11 +1,11 @@
 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';
 
-const name = `${prefix}-affix`;
+const classMixins = getClassPrefixMixins('affix');
 export interface Affix extends Vue {
   scrollContainer: ScrollContainerElement;
   ticking: boolean;
@@ -20,7 +20,11 @@ export default (Vue as VueConstructor<Affix>).extend({
   name: 'TAffix',
   props: {
     ...affixProps,
+    classPrefix: String,
+    componentName: String,
   },
+  mixins: [classMixins],
+
   watch: {
     offsetTop() {
       this.handleScroll();
@@ -71,7 +75,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`;

diff --git a/src/alert/alert.tsx b/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) {

diff --git a/src/anchor/anchor-item.tsx b/src/anchor/anchor-item.tsx
@@ -3,22 +3,23 @@ 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';
+
+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({
   name: 'TAnchorItem',
-
+  mixins: [classPrefixMixins],
   props: {
     ...props,
     href: {
@@ -28,6 +29,7 @@ export default (Vue as VueConstructor<Anchor>).extend({
         return ANCHOR_SHARP_REGEXP.test(v);
       },
     },
+    componentName: String,
   },
 
   inject: {
@@ -92,11 +94,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,
+      [`${this.componentName}__item`]: true,
       [CLASSNAMES.STATUS.active]: isActive,
     };
     const titleClass = {
-      [`${CLASSNAME_PREFIX}-link`]: true,
+      [`${this.componentName}__item-link`]: true,
     };
     return (
       <div class={wrapperClass}>

diff --git a/src/anchor/anchor-target.tsx b/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)}

diff --git a/src/anchor/anchor.tsx b/src/anchor/anchor.tsx
@@ -7,12 +7,11 @@ import {
 } from '../utils/dom';
 import props from './props';
 import { renderTNodeJSX } from '../utils/render-tnode';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
 
 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;
@@ -24,7 +23,10 @@ export default (Vue as VueConstructor<Anchor>).extend({
 
   props: {
     ...props,
+    classPrefix: String,
+    componentName: String,
   },
+  mixins: [classPrefixMixins],
   provide(): any {
     return {
       tAnchor: this,
@@ -34,7 +36,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: {
@@ -198,7 +200,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 +225,11 @@ export default (Vue as VueConstructor<Anchor>).extend({
       affixProps,
       activeLineStyle,
     } = this;
-    const className = [COMPONENT_NAME, CLASSNAMES.SIZE[size]];
+    const className = [this.componentName, CLASSNAMES.SIZE[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>

diff --git a/src/anchor/constant.ts b/src/anchor/constant.ts
diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx
@@ -1,12 +1,12 @@
 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';
 
-const name = `${prefix}-avatar`;
+const classPrefixMixins = getClassPrefixMixins('avatar');
 
 export interface AvatarInstance extends Vue {
   avatarGroup: AvatarGroupInstance;
@@ -17,8 +17,9 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
 
   props: {
     ...props,
+    componentName: String,
   },
-
+  mixins: [classPrefixMixins],
   data() {
     return {
       isImgExist: true,
@@ -50,7 +51,7 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
         }
         : {};
     },
-    customCharaSize(): Styles {
+    customCharacterSize(): Styles {
       return {
         transform: this.scale,
       };
@@ -98,16 +99,16 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
     const isIconOnly = icon && !content;
     const { shape, image, alt } = this.$props;
     const avatarClass = [
-      `${name}`,
+      this.componentName,
       CLASSNAMES.SIZE[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>
     );

diff --git a/src/avatar/group.tsx b/src/avatar/group.tsx
@@ -1,11 +1,11 @@
 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';
 
-const name = `${prefix}-avatar-group`;
+const classPrefixMixins = getClassPrefixMixins('avatar');
 
 export default Vue.extend({
   name: 'TAvatarGroup',
@@ -15,8 +15,9 @@ export default Vue.extend({
 
   props: {
     ...props,
+    componentName: String,
   },
-
+  mixins: [classPrefixMixins],
   provide(): Record<string, any> {
     return {
       avatarGroup: this,
@@ -65,10 +66,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];