From d19bc4b8423f815016db742cb6e9d645e06d3e6e Mon Sep 17 00:00:00 2001 From: Uyarn Date: Mon, 15 Aug 2022 01:36:08 +0800 Subject: [PATCH] feat(configprovider): support classprefix replace for all components --- .vscode/settings.json | 14 ++------ src/breadcrumb/breadcrumb-item.tsx | 2 +- src/calendar/calendar-cell.tsx | 24 +++++++------ src/calendar/calendar.tsx | 42 +++++++++++------------ src/calendar/const.ts | 5 --- src/checkbox/checkbox.tsx | 18 +++++----- src/checkbox/group.tsx | 13 +++---- src/comment/comment.tsx | 37 +++++++++++--------- src/dialog/dialog.tsx | 54 ++++++++++++++---------------- src/divider/divider.tsx | 21 ++++++------ src/drawer/drawer.tsx | 43 ++++++++++++------------ src/dropdown/dropdown-item.tsx | 17 +++++----- src/dropdown/dropdown-menu.tsx | 19 +++++++---- src/dropdown/dropdown.tsx | 13 ++++--- src/form/form-item.tsx | 11 +++--- src/form/form.tsx | 11 +++--- 16 files changed, 172 insertions(+), 172 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 363299c913..02fbe5a2a4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,12 +1,6 @@ { "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" @@ -27,7 +21,5 @@ "editor.formatOnSave": true, "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, - "cSpell.words": [ - "tdesign" - ] -} \ No newline at end of file + "cSpell.words": ["tdesign", "popconfirm"] +} diff --git a/src/breadcrumb/breadcrumb-item.tsx b/src/breadcrumb/breadcrumb-item.tsx index 6446399e9e..7acf576c28 100644 --- a/src/breadcrumb/breadcrumb-item.tsx +++ b/src/breadcrumb/breadcrumb-item.tsx @@ -114,7 +114,7 @@ export default mixins(classPrefixMixins).extend({ ); if (href && !disabled) { - textClass.push(`${this.classPrefix}`); + textClass.push(`${this.classPrefix}-link`); itemContent = ( {textContent} diff --git a/src/calendar/calendar-cell.tsx b/src/calendar/calendar-cell.tsx index ba04dda95b..f372e59522 100644 --- a/src/calendar/calendar-cell.tsx +++ b/src/calendar/calendar-cell.tsx @@ -1,13 +1,15 @@ // 通用库 import dayjs from 'dayjs'; -import Vue, { VNode, PropType } from 'vue'; -import { prefix } from '../config'; +import { VNode, PropType } from 'vue'; // 组件的一些常量 -import { COMPONENT_NAME } from './const'; // 组件相关的自定义类型 import { CalendarCell, TdCalendarProps } from './type'; import { renderTNodeJSXDefault, renderTNodeJSX } from '../utils/render-tnode'; +import mixins from '../utils/mixins'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; + +const classPrefixMixins = getClassPrefixMixins('calendar'); const clickTypeEmitEventMap = { click: 'click', @@ -15,8 +17,8 @@ const clickTypeEmitEventMap = { contextmenu: 'rightclick', }; -export default Vue.extend({ - name: `${COMPONENT_NAME}-cell`, +export default mixins(classPrefixMixins).extend({ + name: 'TCalendarCell', props: { item: { type: Object as PropType, @@ -56,11 +58,11 @@ export default Vue.extend({ } = this.item; const isNow = mode === 'year' ? new Date().getMonth() === date.getMonth() : formattedDate === dayjs().format('YYYY-MM-DD'); return [ - `${prefix}-calendar__table-body-cell`, + `${this.componentName}__table-body-cell`, { - [`${prefix}-is-disabled`]: this.disabled, - [`${prefix}-is-checked`]: isCurrent, - [`${prefix}-calendar__table-body-cell--now`]: isNow, + [`${this.classPrefix}-is-disabled`]: this.disabled, + [`${this.classPrefix}-is-checked`]: isCurrent, + [`${this.componentName}__table-body-cell--now`]: isNow, }, ]; }, @@ -78,8 +80,8 @@ export default Vue.extend({ const defaultNode = () => ( -
{valueDisplay}
-
+
{valueDisplay}
+
{allowSlot && renderTNodeJSX(this, 'cellAppend', { params: item, diff --git a/src/calendar/calendar.tsx b/src/calendar/calendar.tsx index 1a27feb488..d512c73564 100644 --- a/src/calendar/calendar.tsx +++ b/src/calendar/calendar.tsx @@ -11,7 +11,7 @@ import { getIEVersion } from '../_common/js/utils/helper'; // 组件的一些常量 import { - COMPONENT_NAME, MIN_YEAR, FIRST_MONTH_OF_YEAR, LAST_MONTH_OF_YEAR, DEFAULT_YEAR_CELL_NUMINROW, + MIN_YEAR, FIRST_MONTH_OF_YEAR, LAST_MONTH_OF_YEAR, DEFAULT_YEAR_CELL_NUMINROW, } from './const'; // 子组件 @@ -121,11 +121,11 @@ export default mixins(getConfigReceiverMixins('calendar')). }, // 组件最外层的class名（除去前缀，class名和theme参数一致） calendarCls(): Record { - return [`${COMPONENT_NAME}`, `${COMPONENT_NAME}--${this.theme}`]; + return [`${this.componentName}`, `${this.componentName}--${this.theme}`]; }, calendarPanelCls(): Record { - return [`${COMPONENT_NAME}__panel`, `${COMPONENT_NAME}__panel--${this.curSelectedMode}`]; + return [`${this.componentName}__panel`, `${this.componentName}__panel--${this.curSelectedMode}`]; }, isWeekRender(): boolean { @@ -515,15 +515,15 @@ export default mixins(getConfigReceiverMixins('calendar')). renderControl() { const { controllerOptions } = this; return ( -
-
+
+
{renderTNodeJSX(this, 'head', { params: controllerOptions, })}
-
+
{this.isYearVisible && ( -
+
('calendar')).
)} {this.curSelectedMode === 'month' && this.isMonthVisible && ( -
+
('calendar')).
)} {this.isModeVisible && ( -
+
('calendar')).
)} {this.theme === 'full' && this.curSelectedMode === 'month' && this.isWeekendToggleVisible && ( -
+
('calendar')).
)} {this.theme === 'full' && this.isCurrentBtnVisible && ( -
+
('calendar')). } = this; const monthBody = () => ( - - - +
+ + {cellColHeaders.map( (item, index) => checkMonthCellColHeaderVisibled(item) && ( - - + {this.monthCellsData.map((week, weekIndex) => ( - + {week.map( (item, itemIndex) => this.checkMonthCellItemShowed(item) && ( ('calendar')). ); const yearBody = () => ( -
+ {Array.isArray(this.week) ? this.week[index] : renderTNodeJSXDefault(this, 'week', { @@ -630,9 +630,9 @@ export default mixins(getConfigReceiverMixins('calendar')).
- +
+ {this.yearCellsData.map((cell, cellIndex) => ( - + {cell.map((item, itemIndex) => ( = { }; export default { - COMPONENT_NAME, INVALID_DATE, MIN_YEAR, FIRST_MONTH_OF_YEAR, diff --git a/src/checkbox/checkbox.tsx b/src/checkbox/checkbox.tsx index 3738e32f79..f5ad0e7407 100644 --- a/src/checkbox/checkbox.tsx +++ b/src/checkbox/checkbox.tsx @@ -1,6 +1,5 @@ import Vue, { VNode, VueConstructor } from 'vue'; import { renderContent } from '../utils/render-tnode'; -import { prefix } from '../config'; import CLASSNAMES from '../utils/classnames'; import checkboxProps from './props'; import Group from './group'; @@ -8,8 +7,9 @@ import { omit } from '../utils/helper'; import { ClassName } from '../common'; import { emitEvent } from '../utils/event'; import { TdCheckboxProps } from './type'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; -const name = `${prefix}-checkbox`; +const classPrefixMixins = getClassPrefixMixins('checkbox'); interface CheckboxInstance extends Vue { checkboxGroup: InstanceType; @@ -20,8 +20,8 @@ export default (Vue as VueConstructor).extend({ inheritAttrs: false, - props: { ...checkboxProps }, - + props: { ...checkboxProps, componentName: String }, + mixins: [classPrefixMixins], inject: { checkboxGroup: { default: undefined }, }, @@ -36,7 +36,7 @@ export default (Vue as VueConstructor).extend({ computed: { labelClasses(): ClassName { return [ - `${name}`, + `${this.componentName}`, { [CLASSNAMES.STATUS.checked]: this.checked$, [CLASSNAMES.STATUS.disabled]: this.disabled$, @@ -71,7 +71,7 @@ export default (Vue as VueConstructor).extend({ ).extend({ checked={this.checked$} onChange={this.handleChange} > - - {renderContent(this, 'default', 'label')} + + {renderContent(this, 'default', 'label')} ); }, methods: { - handleChange(e: Event) { + handleChange(e: Event): void { const value = !this.checked$; emitEvent>(this, 'change', value, { e }); e.stopPropagation(); diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx index 33acff1f55..76f85e69c8 100644 --- a/src/checkbox/group.tsx +++ b/src/checkbox/group.tsx @@ -1,18 +1,19 @@ -import Vue, { VNode } from 'vue'; +import { VNode } from 'vue'; import intersection from 'lodash/intersection'; -import { prefix } from '../config'; import Checkbox from './checkbox'; import checkboxGroupProps from './checkbox-group-props'; import { emitEvent } from '../utils/event'; import { CheckboxOptionObj, TdCheckboxProps, CheckboxGroupValue, TdCheckboxGroupProps, } from './type'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; +import mixins from '../utils/mixins'; -type CheckedChangeType = Parameters; +const classPrefixMixins = getClassPrefixMixins('checkbox'); -const name = `${prefix}-checkbox-group`; +type CheckedChangeType = Parameters; -export default Vue.extend({ +export default mixins(classPrefixMixins).extend({ name: 'TCheckboxGroup', components: { @@ -118,7 +119,7 @@ export default Vue.extend({ children = nodes; } return ( -
this.$emit('click', e)}> +
this.$emit('click', e)}> {children}
); diff --git a/src/comment/comment.tsx b/src/comment/comment.tsx index e0e2eb2553..704a10ecf5 100644 --- a/src/comment/comment.tsx +++ b/src/comment/comment.tsx @@ -1,23 +1,24 @@ -import Vue, { VNode } from 'vue'; +import { VNode } from 'vue'; import { ScopedSlotReturnValue, ScopedSlotReturnArray } from 'vue/types/vnode'; -import { prefix } from '../config'; import props from './props'; import { renderTNodeJSX } from '../utils/render-tnode'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; +import mixins from '../utils/mixins'; -const preName = `${prefix}-comment`; +const classPrefixMixins = getClassPrefixMixins('comment'); -export default Vue.extend({ +export default mixins(classPrefixMixins).extend({ name: 'TComment', props, methods: { renderReply() { const reply = renderTNodeJSX(this, 'reply'); - return reply ?
{reply}
: null; + return reply ?
{reply}
: null; }, renderActions() { const actions: ScopedSlotReturnArray = renderTNodeJSX(this, 'actions'); return actions && actions.length ? ( -
    +
      {actions.map((action: ScopedSlotReturnValue, index: number) => (
    • {action}
      • ))} @@ -27,7 +28,7 @@ export default Vue.extend({ renderQuote() { const quote = renderTNodeJSX(this, 'quote'); - return quote ?
      {quote}
      : null; + return quote ?
      {quote}
      : null; }, renderAuthorDatetime() { @@ -36,9 +37,9 @@ export default Vue.extend({ return ( (author || datetime) && ( -
      - {author && {author}} - {datetime && {datetime}} +
      + {author && {author}} + {datetime && {datetime}}
      ) ); @@ -46,9 +47,9 @@ export default Vue.extend({ renderContent() { return ( -
      +
      {this.renderAuthorDatetime()} -
      {renderTNodeJSX(this, 'content')}
      +
      {renderTNodeJSX(this, 'content')}
      {this.renderQuote()} {this.renderActions()}
      @@ -58,8 +59,12 @@ export default Vue.extend({ renderAvatar() { const avatar = renderTNodeJSX(this, 'avatar'); return avatar ? ( -
      - {typeof avatar === 'string' ? : avatar} +
      + {typeof avatar === 'string' ? ( + + ) : ( + avatar + )}
      ) : null; }, @@ -67,8 +72,8 @@ export default Vue.extend({ render(): VNode { return ( -
      -
      +
      +
      {this.renderAvatar()} {this.renderContent()}
      diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index 51ce745f56..8ec45ca6c9 100644 --- a/src/dialog/dialog.tsx +++ b/src/dialog/dialog.tsx @@ -19,9 +19,6 @@ import { addClass, removeClass } from '../utils/dom'; import { ClassName, Styles } from '../common'; import { updateElement } from '../hooks/useDestroyOnClose'; -const name = `${prefix}-dialog`; -const lockClass = `${prefix}-dialog--lock`; - function getCSSValue(v: string | number) { return isNaN(Number(v)) ? v : `${Number(v)}px`; } @@ -82,23 +79,27 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d return this.mode === 'normal'; }, maskClass(): ClassName { - return [`${name}__mask`, !this.showOverlay && `${prefix}-is-hidden`]; + return [`${this.componentName}__mask`, !this.showOverlay && `${this.classPrefix}-is-hidden`]; }, dialogClass(): ClassName { - const dialogClass = [`${name}`, `${name}--default`, `${name}__modal-${this.theme}`]; + const dialogClass = [ + `${this.componentName}`, + `${this.componentName}--default`, + `${this.componentName}__modal-${this.theme}`, + ]; return dialogClass; }, positionClass(): ClassName { if (this.isNormal) return []; const dialogClass = [ - `${name}__position`, - !!this.top && `${name}--top`, - `${this.placement && !this.top ? `${name}--${this.placement}` : ''}`, + `${this.componentName}__position`, + !!this.top && `${this.componentName}--top`, + `${this.placement && !this.top ? `${this.componentName}--${this.placement}` : ''}`, ]; return dialogClass; }, wrapClass(): ClassName { - return [!this.isNormal && `${name}__wrap`]; + return [!this.isNormal && `${this.componentName}__wrap`]; }, positionStyle(): Styles { @@ -128,7 +129,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d const bodyCssText = `position: relative;width: calc(100% - ${scrollWidth}px);`; document.body.style.cssText = bodyCssText; } - this.preventScrollThrough && addClass(document.body, lockClass); + this.preventScrollThrough && addClass(document.body, `${this.componentName}--lock`); this.$nextTick(() => { const target = this.$refs.dialog as HTMLElement; if (mousePosition && target) { @@ -140,7 +141,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d } } else { document.body.style.cssText = ''; - removeClass(document.body, lockClass); + removeClass(document.body, `${this.componentName}--lock`); } this.addKeyboardEvent(value); if (this.isModeLess && this.draggable) { @@ -160,7 +161,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d window.addEventListener('resize', throttle(this.resizeAdjustPosition, 1000)); } if (this.visible && this.isModal && this.preventScrollThrough) { - addClass(document.body, lockClass); + addClass(document.body, `${this.componentName}--lock`); } }, @@ -251,10 +252,10 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d getIcon() { const icon = { - info: , - warning: , - danger: , - success: , + info: , + warning: , + danger: , + success: , }; return icon[this.theme]; }, @@ -327,38 +328,35 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d {this.getCancelBtn({ cancelBtn: this.cancelBtn, globalCancel: this.global.cancel, - className: `${prefix}-dialog__cancel`, + className: `${this.componentName}__cancel`, })} {this.getConfirmBtn({ theme: this.theme, confirmBtn: this.confirmBtn, globalConfirm: this.global.confirm, globalConfirmBtnTheme: this.global.confirmBtnTheme, - className: `${prefix}-dialog__confirm`, + className: `${this.componentName}__confirm`, })}
      ); - const bodyClassName = this.theme === 'default' ? `${name}__body` : `${name}__body__icon`; + const bodyClassName = this.theme === 'default' ? `${this.componentName}__body` : `${this.componentName}__body__icon`; // 此处获取定位方式 top 优先级较高 存在时 默认使用top定位 return ( // 非模态形态下draggable为true才允许拖拽
      -
      +
      {this.getIcon()} {renderTNodeJSX(this, 'header', defaultHeader)}
      {this.closeBtn ? ( - + {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)} ) : null} - {/* - {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)} - */}
      {body}
      -
      {renderTNodeJSX(this, 'footer', defaultFooter)}
      +
      {renderTNodeJSX(this, 'footer', defaultFooter)}
      @@ -375,17 +373,17 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d // dialog__ctx--absolute 挂载在attach元素上 相对定位 // __ctx--modeless modeless 点击穿透 const ctxClass = [ - `${name}__ctx`, + `${this.componentName}__ctx`, { [`${prefix}-dialog__ctx--fixed`]: this.mode === 'modal', [`${prefix}-dialog__ctx--absolute`]: this.isModal && this.showInAttachedElement, - [`${name}__ctx--modeless`]: this.isModeLess, + [`${this.componentName}__ctx--modeless`]: this.isModeLess, }, ]; return ( diff --git a/src/divider/divider.tsx b/src/divider/divider.tsx index 214eae98f7..aabd36b610 100644 --- a/src/divider/divider.tsx +++ b/src/divider/divider.tsx @@ -1,11 +1,11 @@ -import Vue from 'vue'; -import { prefix } from '../config'; import props from './props'; import { renderContent } from '../utils/render-tnode'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; +import mixins from '../utils/mixins'; -const name = `${prefix}-divider`; +const classPrefixMixins = getClassPrefixMixins('divider'); -export default Vue.extend({ +export default mixins(classPrefixMixins).extend({ name: 'TDivider', props: { ...props }, @@ -16,20 +16,19 @@ export default Vue.extend({ console.warn('TDesign Divider Warn: `theme` is going to be deprecated, please use `layout` instead.'); } const dividerClassNames = [ - `${name}`, - [`${name}--${this.layout || this.theme || 'horizontal'}`], + `${this.componentName}`, + [`${this.componentName}--${this.layout || this.theme || 'horizontal'}`], { - [`${name}--dashed`]: !!this.dashed, - [`${name}--with-text`]: !!children, - [`${name}--with-text-${this.align}`]: !!children, + [`${this.componentName}--dashed`]: !!this.dashed, + [`${this.componentName}--with-text`]: !!children, + [`${this.componentName}--with-text-${this.align}`]: !!children, }, ]; return (
      - {children && {children}} + {children && {children}}
      ); }, - }); diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index c794c20dd0..222d611dc0 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -1,7 +1,6 @@ import Vue from 'vue'; import { CloseIcon } from 'tdesign-icons-vue'; -import { prefix } from '../config'; import { Button as TButton } from '../button'; import props from './props'; import { FooterButton, DrawerCloseContext, TdDrawerProps } from './type'; @@ -16,9 +15,6 @@ import ActionMixin from '../dialog/actions'; type FooterButtonType = 'confirm' | 'cancel'; -const name = `${prefix}-drawer`; -const lockClass = `${prefix}-drawer--lock`; - export default mixins(ActionMixin, getConfigReceiverMixins('drawer')).extend({ name: 'TDrawer', @@ -41,12 +37,12 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d computed: { drawerClasses(): ClassName { return [ - name, - `${name}--${this.placement}`, + this.componentName, + `${this.componentName}--${this.placement}`, { - [`${name}--open`]: this.visible, - [`${name}--attach`]: this.showInAttachedElement, - [`${name}--without-mask`]: !this.showOverlay, + [`${this.componentName}--open`]: this.visible, + [`${this.componentName}--attach`]: this.showInAttachedElement, + [`${this.componentName}--without-mask`]: !this.showOverlay, }, ]; }, @@ -72,7 +68,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }; }, wrapperClasses(): ClassName { - return [`${name}__content-wrapper`, `${name}__content-wrapper--${this.placement}`]; + return [`${this.componentName}__content-wrapper`, `${this.componentName}__content-wrapper--${this.placement}`]; }, parentNode(): HTMLElement { return this.$el && (this.$el.parentNode as HTMLElement); @@ -139,7 +135,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d render() { if (this.destroyOnClose && !this.visible) return; - const defaultCloseBtn = ; + const defaultCloseBtn = ; const body = renderContent(this, 'default', 'body'); const defaultFooter = this.getDefaultFooter(); return ( @@ -151,19 +147,19 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d ref="drawerContainer" tabindex={0} > - {this.showOverlay &&
      } + {this.showOverlay &&
      }
      {this.header !== false ? ( -
      {renderTNodeJSX(this, 'header',
      )}
      +
      {renderTNodeJSX(this, 'header',
      )}
      ) : null} {this.closeBtn !== false ? ( -
      +
      {renderTNodeJSX(this, 'closeBtn', defaultCloseBtn)}
      ) : null} -
      {body}
      +
      {body}
      {this.footer !== false ? ( -
      {renderTNodeJSX(this, 'footer', defaultFooter)}
      +
      {renderTNodeJSX(this, 'footer', defaultFooter)}
      ) : null} {this.sizeDraggable &&
      }
      @@ -202,9 +198,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d handleScrollThrough(visible: boolean) { if (!document || !document.body || !this.preventScrollThrough) return; if (visible && !this.showInAttachedElement) { - this.preventScrollThrough && addClass(document.body, lockClass); + this.preventScrollThrough && addClass(document.body, `${this.componentName}--lock`); } else { - this.preventScrollThrough && removeClass(document.body, lockClass); + this.preventScrollThrough && removeClass(document.body, `${this.componentName}--lock`); } }, handlePushMode() { @@ -236,7 +232,12 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d const theme = isCancel ? 'default' : 'primary'; const isApiObject = typeof btnApi === 'object'; return ( - + {btnApi && typeof btnApi === 'object' ? btnApi.content : btnApi} ); @@ -251,13 +252,13 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d const confirmBtn = this.getConfirmBtn({ confirmBtn: this.confirmBtn, globalConfirm: this.global.confirm, - className: `${prefix}-drawer__confirm`, + className: `${this.componentName}__confirm`, }); // this.getCancelBtn is a function of ActionMixin const cancelBtn = this.getCancelBtn({ cancelBtn: this.cancelBtn, globalCancel: this.global.cancel, - className: `${prefix}-drawer__cancel`, + className: `${this.componentName}__cancel`, }); return (
      diff --git a/src/dropdown/dropdown-item.tsx b/src/dropdown/dropdown-item.tsx index dbb9c7084a..e06491773c 100644 --- a/src/dropdown/dropdown-item.tsx +++ b/src/dropdown/dropdown-item.tsx @@ -1,7 +1,6 @@ import Vue from 'vue'; import { ChevronRightIcon } from 'tdesign-icons-vue'; import TDivider from '../divider'; -import { prefix } from '../config'; import itemProps from './dropdown-item-props'; import { STATUS_CLASSNAMES } from '../utils/classnames'; import { DropdownOption } from './type'; @@ -10,11 +9,11 @@ import { renderContent } from '../utils/render-tnode'; import { emitEvent } from '../utils/event'; import ripple from '../utils/ripple'; import mixins from '../utils/mixins'; -import { getKeepAnimationMixins } from '../config-provider/config-receiver'; +import { getKeepAnimationMixins, getClassPrefixMixins } from '../config-provider/config-receiver'; import { TNodeReturnValue } from '../common'; -const name = `${prefix}-dropdown__item`; +const classPrefixMixins = getClassPrefixMixins('dropdown'); const keepAnimationMixins = getKeepAnimationMixins(); @@ -24,7 +23,7 @@ export interface DropdownItemInstance extends Vue { }; } -export default mixins(keepAnimationMixins).extend({ +export default mixins(keepAnimationMixins, classPrefixMixins).extend({ name: 'TDropdownItem', components: { ChevronRightIcon, @@ -54,7 +53,7 @@ export default mixins(keepAnimationMixins).extend({ }, methods: { renderSuffix(): TNodeReturnValue { - return this.hasChildren ? : null; + return this.hasChildren ? : null; }, handleItemClick(e: MouseEvent): void { if (!this.hasChildren && !this.disabled) { @@ -75,9 +74,9 @@ export default mixins(keepAnimationMixins).extend({ }, render() { const classes = [ - name, + `${this.componentName}__item`, { - [`${prefix}-dropdown--suffix`]: this.hasChildren, + [`${this.componentName}--suffix`]: this.hasChildren, [STATUS_CLASSNAMES.disabled]: this.disabled, [STATUS_CLASSNAMES.active]: this.active, }, @@ -90,8 +89,8 @@ export default mixins(keepAnimationMixins).extend({ onClick={this.handleItemClick} onMouseover={this.handleMouseover} > -
      - {renderContent(this, 'content', 'default')} +
      + {renderContent(this, 'content', 'default')}
      {this.renderSuffix()}
      diff --git a/src/dropdown/dropdown-menu.tsx b/src/dropdown/dropdown-menu.tsx index e9a3f13d31..594268a194 100644 --- a/src/dropdown/dropdown-menu.tsx +++ b/src/dropdown/dropdown-menu.tsx @@ -1,12 +1,13 @@ import Vue, { VueConstructor } from 'vue'; import DropdownItem from './dropdown-item'; -import { prefix } from '../config'; import { TNodeReturnValue } from '../common'; import { DropdownOption } from './type'; import { renderTNodeJSX } from '../utils/render-tnode'; import { pxCompat } from '../utils/helper'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; + +const classPrefixMixins = getClassPrefixMixins('dropdown'); -const name = `${prefix}-dropdown__menu`; export interface DropdownMenuInstance extends Vue { dropdown: { options: DropdownOption[]; @@ -23,6 +24,10 @@ export default (Vue as VueConstructor).extend({ default: undefined, }, }, + props: { + componentName: String, + }, + mixins: [classPrefixMixins], data() { return { path: '', // 当前选中路径，形如{/id1/id2/id3} @@ -39,11 +44,11 @@ export default (Vue as VueConstructor).extend({ handleHoverItem(path: string) { this.path = path; }, - handleItemClick(data: DropdownOption, context: { e: MouseEvent }, idx: number) { + handleItemClick(data: DropdownOption, context: { e: MouseEvent }, idx: number): void { this.dropdown.options[idx].onClick?.(data, context); }, renderMenuColumn(children: Array, showSubmenu: boolean, pathPrefix: string): TNodeReturnValue { - const menuClass = [`${name}-column`, 'narrow-scrollbar', { submenu__visible: showSubmenu }]; + const menuClass = [`${this.componentName}__menu-column`, 'narrow-scrollbar', { submenu__visible: showSubmenu }]; const { maxHeight, maxColumnWidth, minColumnWidth } = this.dropdown; return (
      ).extend({ let pathPrefix = ''; if (this.$scopedSlots.default) { return ( -
      +
      ).extend({ menuItems = []; } } - return
      {columns}
      ; + return
      {columns}
      ; }, }); diff --git a/src/dropdown/dropdown.tsx b/src/dropdown/dropdown.tsx index d5c1841f6d..2597b42bb3 100644 --- a/src/dropdown/dropdown.tsx +++ b/src/dropdown/dropdown.tsx @@ -1,14 +1,15 @@ -import Vue, { VNode } from 'vue'; -import { prefix } from '../config'; +import { VNode } from 'vue'; import Popup from '../popup'; import DropdownMenu from './dropdown-menu'; import { emitEvent } from '../utils/event'; import { DropdownOption } from './type'; import props from './props'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; +import mixins from '../utils/mixins'; -const name = `${prefix}-dropdown`; +const classPrefixMixins = getClassPrefixMixins('dropdown'); -export default Vue.extend({ +export default mixins(classPrefixMixins).extend({ name: 'TDropdown', props: { ...props, @@ -39,7 +40,9 @@ export default Vue.extend({ placement: this.placement, trigger: this.trigger, overlayClassName: - this.popupProps && this.popupProps.overlayClassName ? [name, this.popupProps.overlayClassName] : name, + this.popupProps && this.popupProps.overlayClassName + ? [this.componentName, this.popupProps.overlayClassName] + : this.componentName, }, ...this.popupProps, ref: 'popup', diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index 3df29f9dd2..77228ed104 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -6,7 +6,6 @@ import lodashSet from 'lodash/set'; import isNil from 'lodash/isNil'; import { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue'; import lodashTemplate from 'lodash/template'; -import { prefix } from '../config'; import { validate } from './form-model'; import { Data, @@ -114,11 +113,11 @@ export default mixins(getConfigReceiverMixins(' return [ CLASS_NAMES.label, { - [`${prefix}-form__label--required`]: this.needRequiredMark, - [`${prefix}-form__label--colon`]: this.hasColon, - [`${prefix}-form__label--top`]: labelAlign === 'top' || !labelWidth, - [`${prefix}-form__label--left`]: labelAlign === 'left' && labelWidth, - [`${prefix}-form__label--right`]: labelAlign === 'right' && labelWidth, + [`${this.componentName}__label--required`]: this.needRequiredMark, + [`${this.componentName}__label--colon`]: this.hasColon, + [`${this.componentName}__label--top`]: labelAlign === 'top' || !labelWidth, + [`${this.componentName}__label--left`]: labelAlign === 'left' && labelWidth, + [`${this.componentName}__label--right`]: labelAlign === 'right' && labelWidth, }, ]; }, diff --git a/src/form/form.tsx b/src/form/form.tsx index c372dcc147..cd2064901c 100644 --- a/src/form/form.tsx +++ b/src/form/form.tsx @@ -1,6 +1,5 @@ import Vue, { VNode } from 'vue'; import isEmpty from 'lodash/isEmpty'; -import { prefix } from '../config'; import { Data, FormValidateResult, @@ -15,12 +14,14 @@ import { FORM_ITEM_CLASS_PREFIX, CLASS_NAMES, FORM_CONTROL_COMPONENTS } from './ import { emitEvent } from '../utils/event'; import FormItem, { FormItemValidateResult } from './form-item'; import { FormResetEvent, FormSubmitEvent, ClassName } from '../common'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; +import mixins from '../utils/mixins'; -type FormItemInstance = InstanceType; +const classPrefixMixins = getClassPrefixMixins('form'); -const name = `${prefix}-form`; +type FormItemInstance = InstanceType; -export default Vue.extend({ +export default mixins(classPrefixMixins).extend({ name: 'TForm', props: { ...props }, @@ -42,7 +43,7 @@ export default Vue.extend({ return [ CLASS_NAMES.form, { - [`${name}-inline`]: this.layout === 'inline', + [`${this.componentName}-inline`]: this.layout === 'inline', }, ]; },