From 08c0a944aef8c77e44b779a78ed2a3978a68e9a6 Mon Sep 17 00:00:00 2001 From: qunbotop Date: Fri, 11 Mar 2022 09:47:06 +0800 Subject: [PATCH 01/12] refactor: refactor notification component used by composition BREAKING CHANGE: refactor notification component used by composition , and add notification recycle effect --- src/_common | 2 +- src/notification/notification.tsx | 91 ++++++++++++---------- src/notification/notificationList.tsx | 104 +++++++++++++++----------- 3 files changed, 112 insertions(+), 85 deletions(-) diff --git a/src/_common b/src/_common index 1710b1b9a0..c550374f92 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 1710b1b9a0e3ba7bce05047831a8fe6216d67f29 +Subproject commit c550374f92ed8a8b9da5cbb692a09c4cf2a6ba78 diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index 94d2e64696..081921bb80 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -1,63 +1,76 @@ -import { defineComponent, h, VNodeChild } from 'vue'; +import { ComponentPublicInstance, defineComponent, h, onMounted } from 'vue'; import { InfoCircleFilledIcon, CheckCircleFilledIcon, CloseIcon } from 'tdesign-icons-vue-next'; import isFunction from 'lodash/isFunction'; import { prefix } from '../config'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; import props from './props'; -import { emitEvent } from '../utils/event'; +import { useEmitEvent } from '../hooks/event'; const name = `${prefix}-notification`; export default defineComponent({ name: 'TNotification', - props: { ...props }, - emits: ['duration-end', 'click-close-btn'], - mounted() { - if (this.duration > 0) { - const timer = setTimeout(() => { - clearTimeout(timer); - emitEvent(this, 'duration-end', this); - }, this.duration); - } + props: { + ...props, }, - methods: { - close(e?: MouseEvent) { - emitEvent(this, 'click-close-btn', e, this); - }, - renderIcon() { - let icon; - if (this.icon === false) return null; - if (isFunction(this.icon)) { - icon = this.icon(h); - } else if (this.$slots.icon) { - icon = this.$slots.icon(null); - } else if (this.theme) { + emits: ['duration-end', 'click-close-btn'], + setup(props, { slots }) { + const emitEvent = useEmitEvent(); + const close = (e?: MouseEvent) => { + emitEvent('click-close-btn', e); + }; + const renderIcon = () => { + let iconContent; + if (props.icon === false) return null; + if (isFunction(props.icon)) { + iconContent = props.icon(h); + } else if (slots.icon) { + iconContent = slots.icon(null); + } else if (props.theme) { const iconType = - this.theme === 'success' ? ( - + props.theme === 'success' ? ( + ) : ( - + ); - icon =
{iconType}
; + iconContent =
{iconType}
; } - return icon; - }, - renderClose() { + return iconContent; + }; + + const renderClose = (context: ComponentPublicInstance) => { const defaultClose = ; return ( - - {renderTNodeJSX(this, 'closeBtn', defaultClose)} + + {renderTNodeJSX(context, 'closeBtn', defaultClose)} ); - }, - renderContent() { - return
{renderContent(this, 'default', 'content')}
; - }, + }; + + const renderMainContent = (context: ComponentPublicInstance) => { + return
{renderContent(context, 'default', 'content')}
; + }; + + onMounted(() => { + if (props.duration > 0) { + const timer = setTimeout(() => { + clearTimeout(timer); + emitEvent('duration-end'); + }, props.duration); + } + }); + + return { + renderIcon, + renderClose, + renderMainContent, + }; }, render() { - const icon = this.renderIcon(); - const close = this.renderClose(); - const content = this.renderContent(); + const { renderIcon, renderClose, renderMainContent } = this; + const icon = renderIcon(); + const close = renderClose(this); + const content = renderMainContent(this); const footer = renderTNodeJSX(this, 'footer'); const title = renderTNodeJSX(this, 'title'); diff --git a/src/notification/notificationList.tsx b/src/notification/notificationList.tsx index 9b4c2b6094..50fb99bddd 100644 --- a/src/notification/notificationList.tsx +++ b/src/notification/notificationList.tsx @@ -1,4 +1,4 @@ -import { defineComponent } from 'vue'; +import { defineComponent, ref, computed, TransitionGroup } from 'vue'; import Notification from './notification'; import { prefix } from '../config'; import { TdNotificationProps, NotificationOptions } from './type'; @@ -15,66 +15,80 @@ export default defineComponent({ }, }, }, - data() { - return { - list: [], + setup(props) { + const { placement } = props as NotificationOptions; + + const list = ref([]); + + const styles = computed(() => ({ + zIndex: DEFAULT_Z_INDEX, + ...PLACEMENT_OFFSET[placement], + })); + + const add = (options: TdNotificationProps): number => { + list.value.push(options); + return list.value.length - 1; }; - }, - computed: { - styles(): Styles { - return { - zIndex: DEFAULT_Z_INDEX, - ...PLACEMENT_OFFSET[this.placement], - }; - }, - }, - methods: { - add(options: TdNotificationProps): number { - this.list.push(options); - return this.list.length - 1; - }, - remove(index: number) { - this.list.splice(index, 1); - }, - removeAll() { - this.list = []; - }, - getOffset(val: string | number) { + + const remove = (index: number) => { + list.value.splice(index, 1); + }; + + const removeAll = () => { + list.value = []; + }; + + const getOffset = (val: string | number) => { if (!val) return; return isNaN(Number(val)) ? val : `${val}px`; - }, - notificationStyles(item: { offset: NotificationOptions['offset']; zIndex: number }) { + }; + + const notificationStyles = (item: { offset: NotificationOptions['offset']; zIndex: number }) => { const styles: Styles = { marginBottom: DISTANCE, }; if (item.offset) { styles.position = 'relative'; - styles.left = this.getOffset(item.offset[0]); - styles.top = this.getOffset(item.offset[1]); + styles.left = getOffset(item.offset[0]); + styles.top = getOffset(item.offset[1]); } if (item.zIndex) styles['z-index'] = item.zIndex; return styles; - }, - getListeners(index: number) { + }; + + const getListeners = (options: NotificationOptions, index: number) => { return { - onClickCloseBtn: () => this.remove(index), - onDurationEnd: () => this.remove(index), + onClickCloseBtn: () => remove(index), + onDurationEnd: () => remove(index), }; - }, + }; + + return { + list, + styles, + add, + remove, + removeAll, + getOffset, + notificationStyles, + getListeners, + }; }, render() { - if (!this.list.length) return; + const { placement, styles, list } = this; return ( -
- {this.list.map((item, index) => ( - - ))} +
+ + {list.map((item, index) => ( + + ))} +
); }, From adcf61c4797ae8f12c658b05caaa05273f902f19 Mon Sep 17 00:00:00 2001 From: qunbotop Date: Fri, 11 Mar 2022 17:16:48 +0800 Subject: [PATCH 02/12] =?UTF-8?q?fix:=20=E6=8F=92=E4=BB=B6=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E5=BC=8F=E8=B0=83=E7=94=A8close=E6=8A=A5=E9=94=99?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/notification/plugin.ts b/src/notification/plugin.ts index b9ea54dc64..ecfe4a8aec 100644 --- a/src/notification/plugin.ts +++ b/src/notification/plugin.ts @@ -52,7 +52,7 @@ const NotificationFunction = (options: NotificationOptions): Promise { nextTick(() => { - const lastChild = tmpInstance.$children; + const lastChild = tmpInstance.$refs.notification0 as NotificationInstance; resolve(lastChild); }); }); From 47ca27d155b27173f057b41bf207d2f96f09b5e5 Mon Sep 17 00:00:00 2001 From: qunbotop Date: Fri, 11 Mar 2022 17:21:56 +0800 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=E7=9B=B4=E6=8E=A5=E8=B0=83?= =?UTF-8?q?=E7=94=A8props=E4=B8=8A=E7=9A=84=E5=87=BD=E6=95=B0=E6=9B=BF?= =?UTF-8?q?=E4=BB=A3useEmitEvent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/notification.tsx | 8 +++----- src/notification/notificationList.tsx | 6 +++--- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index 081921bb80..c171374114 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -4,7 +4,6 @@ import isFunction from 'lodash/isFunction'; import { prefix } from '../config'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; import props from './props'; -import { useEmitEvent } from '../hooks/event'; const name = `${prefix}-notification`; @@ -13,11 +12,9 @@ export default defineComponent({ props: { ...props, }, - emits: ['duration-end', 'click-close-btn'], setup(props, { slots }) { - const emitEvent = useEmitEvent(); const close = (e?: MouseEvent) => { - emitEvent('click-close-btn', e); + props.onCloseBtnClick({ e }); }; const renderIcon = () => { let iconContent; @@ -55,12 +52,13 @@ export default defineComponent({ if (props.duration > 0) { const timer = setTimeout(() => { clearTimeout(timer); - emitEvent('duration-end'); + props.onDurationEnd(); }, props.duration); } }); return { + close, renderIcon, renderClose, renderMainContent, diff --git a/src/notification/notificationList.tsx b/src/notification/notificationList.tsx index 50fb99bddd..dd244b6edb 100644 --- a/src/notification/notificationList.tsx +++ b/src/notification/notificationList.tsx @@ -56,9 +56,9 @@ export default defineComponent({ return styles; }; - const getListeners = (options: NotificationOptions, index: number) => { + const getListeners = (index: number) => { return { - onClickCloseBtn: () => remove(index), + onCloseBtnClick: () => remove(index), onDurationEnd: () => remove(index), }; }; @@ -85,7 +85,7 @@ export default defineComponent({ key={item.id} style={this.notificationStyles(item)} {...item} - {...this.getListeners(item, index)} + {...this.getListeners(index)} /> ))} From 6ef4d72d79fea3062454777e64f0c150901b0a91 Mon Sep 17 00:00:00 2001 From: qunbotop Date: Fri, 11 Mar 2022 18:37:24 +0800 Subject: [PATCH 04/12] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0props=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/notification.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index c171374114..e27dda5f3d 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -4,6 +4,7 @@ import isFunction from 'lodash/isFunction'; import { prefix } from '../config'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; import props from './props'; +import { TdNotificationProps } from './type'; const name = `${prefix}-notification`; @@ -12,10 +13,11 @@ export default defineComponent({ props: { ...props, }, - setup(props, { slots }) { + setup(props: TdNotificationProps, { slots }) { const close = (e?: MouseEvent) => { - props.onCloseBtnClick({ e }); + props.onCloseBtnClick?.({ e }); }; + const renderIcon = () => { let iconContent; if (props.icon === false) return null; @@ -52,7 +54,7 @@ export default defineComponent({ if (props.duration > 0) { const timer = setTimeout(() => { clearTimeout(timer); - props.onDurationEnd(); + props.onDurationEnd?.(); }, props.duration); } }); From da48d4d0b879c993a79ea0186c34b0a0a39dc1c9 Mon Sep 17 00:00:00 2001 From: qunbotop Date: Mon, 14 Mar 2022 11:15:58 +0800 Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8useTNodeJSX?= =?UTF-8?q?=E5=92=8CuseContent=E8=BF=9B=E8=A1=8C=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/notification.tsx | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index e27dda5f3d..134da662f7 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -1,8 +1,8 @@ -import { ComponentPublicInstance, defineComponent, h, onMounted } from 'vue'; +import { defineComponent, h, onMounted } from 'vue'; import { InfoCircleFilledIcon, CheckCircleFilledIcon, CloseIcon } from 'tdesign-icons-vue-next'; import isFunction from 'lodash/isFunction'; import { prefix } from '../config'; -import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; +import { useTNodeJSX, useContent } from '../hooks/tnode'; import props from './props'; import { TdNotificationProps } from './type'; @@ -14,6 +14,9 @@ export default defineComponent({ ...props, }, setup(props: TdNotificationProps, { slots }) { + const renderTNode = useTNodeJSX(); + const renderContent = useContent(); + const close = (e?: MouseEvent) => { props.onCloseBtnClick?.({ e }); }; @@ -37,17 +40,17 @@ export default defineComponent({ return iconContent; }; - const renderClose = (context: ComponentPublicInstance) => { + const renderClose = () => { const defaultClose = ; return ( - {renderTNodeJSX(context, 'closeBtn', defaultClose)} + {renderTNode('closeBtn', defaultClose)} ); }; - const renderMainContent = (context: ComponentPublicInstance) => { - return
{renderContent(context, 'default', 'content')}
; + const renderMainContent = () => { + return
{renderContent('default', 'content')}
; }; onMounted(() => { @@ -64,15 +67,16 @@ export default defineComponent({ renderIcon, renderClose, renderMainContent, + renderTNode, }; }, render() { - const { renderIcon, renderClose, renderMainContent } = this; + const { renderIcon, renderClose, renderMainContent, renderTNode } = this; const icon = renderIcon(); - const close = renderClose(this); - const content = renderMainContent(this); - const footer = renderTNodeJSX(this, 'footer'); - const title = renderTNodeJSX(this, 'title'); + const close = renderClose(); + const content = renderMainContent(); + const footer = renderTNode('footer'); + const title = renderTNode('title'); return (
From 35a4b81f4348373bc2adaee3d67feac54cb44b56 Mon Sep 17 00:00:00 2001 From: qunbotop Date: Mon, 14 Mar 2022 11:33:10 +0800 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8useConfig?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2prefix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/notification.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index 134da662f7..97215d2ec8 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -1,12 +1,10 @@ import { defineComponent, h, onMounted } from 'vue'; import { InfoCircleFilledIcon, CheckCircleFilledIcon, CloseIcon } from 'tdesign-icons-vue-next'; import isFunction from 'lodash/isFunction'; -import { prefix } from '../config'; import { useTNodeJSX, useContent } from '../hooks/tnode'; import props from './props'; import { TdNotificationProps } from './type'; - -const name = `${prefix}-notification`; +import { useConfig } from '../config-provider/useConfig'; export default defineComponent({ name: 'TNotification', @@ -16,6 +14,8 @@ export default defineComponent({ setup(props: TdNotificationProps, { slots }) { const renderTNode = useTNodeJSX(); const renderContent = useContent(); + const { classPrefix } = useConfig('classPrefix'); + const name = `${classPrefix.value}-notification`; const close = (e?: MouseEvent) => { props.onCloseBtnClick?.({ e }); @@ -43,7 +43,7 @@ export default defineComponent({ const renderClose = () => { const defaultClose = ; return ( - + {renderTNode('closeBtn', defaultClose)} ); @@ -63,6 +63,7 @@ export default defineComponent({ }); return { + name, close, renderIcon, renderClose, @@ -71,7 +72,7 @@ export default defineComponent({ }; }, render() { - const { renderIcon, renderClose, renderMainContent, renderTNode } = this; + const { renderIcon, renderClose, renderMainContent, renderTNode, name } = this; const icon = renderIcon(); const close = renderClose(); const content = renderMainContent(); From dba3fb898b4a75dd517ea907eeb9900dcb30311a Mon Sep 17 00:00:00 2001 From: qunbotop Date: Mon, 14 Mar 2022 11:41:47 +0800 Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=E6=8F=92=E4=BB=B6=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E8=B0=83=E7=94=A8$refs=E4=BD=BF=E7=94=A8=E5=8F=AF?= =?UTF-8?q?=E9=80=89=E9=93=BE=E6=93=8D=E4=BD=9C=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/notification/plugin.ts b/src/notification/plugin.ts index ecfe4a8aec..cde42ed4c4 100644 --- a/src/notification/plugin.ts +++ b/src/notification/plugin.ts @@ -52,7 +52,7 @@ const NotificationFunction = (options: NotificationOptions): Promise { nextTick(() => { - const lastChild = tmpInstance.$refs.notification0 as NotificationInstance; + const lastChild = tmpInstance.$refs?.notification0 as NotificationInstance; resolve(lastChild); }); }); From 8819a72eaf6abb157da3638611c3a31e38743033 Mon Sep 17 00:00:00 2001 From: qunbotop Date: Tue, 15 Mar 2022 15:52:06 +0800 Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=E5=9C=A8setup=E4=B8=AD=E8=BF=94?= =?UTF-8?q?=E5=9B=9Erender=E5=87=BD=E6=95=B0=E3=80=81=E4=BD=BF=E7=94=A8use?= =?UTF-8?q?PrefixClasss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/notification.tsx | 51 +++++++++------------------ src/notification/notificationList.tsx | 37 ++++++++----------- 2 files changed, 30 insertions(+), 58 deletions(-) diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index 97215d2ec8..bfd60447fc 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -4,18 +4,15 @@ import isFunction from 'lodash/isFunction'; import { useTNodeJSX, useContent } from '../hooks/tnode'; import props from './props'; import { TdNotificationProps } from './type'; -import { useConfig } from '../config-provider/useConfig'; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ name: 'TNotification', - props: { - ...props, - }, - setup(props: TdNotificationProps, { slots }) { + props, + setup(props: TdNotificationProps, { slots, expose }) { + const COMPONENT_NAME = usePrefixClass('notification'); const renderTNode = useTNodeJSX(); const renderContent = useContent(); - const { classPrefix } = useConfig('classPrefix'); - const name = `${classPrefix.value}-notification`; const close = (e?: MouseEvent) => { props.onCloseBtnClick?.({ e }); @@ -43,14 +40,14 @@ export default defineComponent({ const renderClose = () => { const defaultClose = ; return ( - + {renderTNode('closeBtn', defaultClose)} ); }; const renderMainContent = () => { - return
{renderContent('default', 'content')}
; + return
{renderContent('default', 'content')}
; }; onMounted(() => { @@ -62,33 +59,17 @@ export default defineComponent({ } }); - return { - name, - close, - renderIcon, - renderClose, - renderMainContent, - renderTNode, - }; - }, - render() { - const { renderIcon, renderClose, renderMainContent, renderTNode, name } = this; - const icon = renderIcon(); - const close = renderClose(); - const content = renderMainContent(); - const footer = renderTNode('footer'); - const title = renderTNode('title'); - - return ( -
- {icon} -
-
- {title} - {close} + expose({ close }); + return () => ( +
+ {renderIcon()} +
+
+ {renderTNode('title')} + {renderClose()}
- {content} - {footer} + {renderMainContent()} + {renderTNode('footer')}
); diff --git a/src/notification/notificationList.tsx b/src/notification/notificationList.tsx index dd244b6edb..d6f962f4d3 100644 --- a/src/notification/notificationList.tsx +++ b/src/notification/notificationList.tsx @@ -1,9 +1,9 @@ -import { defineComponent, ref, computed, TransitionGroup } from 'vue'; +import { defineComponent, ref, computed, TransitionGroup, Ref } from 'vue'; import Notification from './notification'; -import { prefix } from '../config'; import { TdNotificationProps, NotificationOptions } from './type'; import { Styles } from '../common'; import { DEFAULT_Z_INDEX, PLACEMENT_OFFSET, DISTANCE } from './const'; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ props: { @@ -15,12 +15,14 @@ export default defineComponent({ }, }, }, - setup(props) { + setup(props, { expose }) { + const COMPONENT_NAME = usePrefixClass('notification-list'); + const { placement } = props as NotificationOptions; - const list = ref([]); + const list: Ref = ref([]); - const styles = computed(() => ({ + const styles = computed(() => ({ zIndex: DEFAULT_Z_INDEX, ...PLACEMENT_OFFSET[placement], })); @@ -63,29 +65,18 @@ export default defineComponent({ }; }; - return { - list, - styles, - add, - remove, - removeAll, - getOffset, - notificationStyles, - getListeners, - }; - }, - render() { - const { placement, styles, list } = this; - return ( -
+ expose({ add, remove, removeAll }); + + return () => ( +
- {list.map((item, index) => ( + {list.value.map((item: { offset: NotificationOptions['offset']; zIndex: number; id: number }, index) => ( ))} From cb91c604fd4e52545131532a708e233cdd1d915e Mon Sep 17 00:00:00 2001 From: qunbotop Date: Tue, 15 Mar 2022 18:10:00 +0800 Subject: [PATCH 09/12] =?UTF-8?q?feat:=20=E5=AF=BC=E5=85=A5classPrefix?= =?UTF-8?q?=EF=BC=8C=E6=BB=A1=E8=B6=B3t-message=5F=5Fclose=E7=B1=BB?= =?UTF-8?q?=E5=90=8D=E8=A6=81=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/notification/notification.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index bfd60447fc..202fcd6654 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -4,13 +4,14 @@ import isFunction from 'lodash/isFunction'; import { useTNodeJSX, useContent } from '../hooks/tnode'; import props from './props'; import { TdNotificationProps } from './type'; -import { usePrefixClass } from '../config-provider'; +import { useConfig, usePrefixClass } from '../config-provider'; export default defineComponent({ name: 'TNotification', props, setup(props: TdNotificationProps, { slots, expose }) { const COMPONENT_NAME = usePrefixClass('notification'); + const { classPrefix } = useConfig('classPrefix'); const renderTNode = useTNodeJSX(); const renderContent = useContent(); @@ -40,7 +41,7 @@ export default defineComponent({ const renderClose = () => { const defaultClose = ; return ( - + {renderTNode('closeBtn', defaultClose)} ); From d48681742b59581aa723daed48bbd540e4dc7abf Mon Sep 17 00:00:00 2001 From: pengYYY Date: Tue, 15 Mar 2022 22:22:58 +0800 Subject: [PATCH 10/12] fix(config): add classPrefix --- src/config-provider/config-provider.tsx | 5 +- src/config-provider/config-receiver.ts | 5 +- src/dialog/dialog.tsx | 11 +- src/drawer/drawer.tsx | 10 +- src/dropdown/dropdown.tsx | 1 - src/form/const.ts | 57 +++--- src/form/form-item.tsx | 40 +++-- src/form/form.tsx | 11 +- src/menu/menu-group.tsx | 1 - src/pagination/pagination.tsx | 9 +- src/popconfirm/popconfirm.tsx | 26 ++- src/popup/popup.tsx | 31 ++-- src/progress/progress.tsx | 164 ++++++++---------- src/radio/group.tsx | 12 +- src/radio/radio.tsx | 18 +- src/select-input/select-input.tsx | 38 ++-- src/select/option.tsx | 25 +-- src/select/optionGroup.tsx | 21 ++- src/select/select.tsx | 85 +++++---- src/skeleton/skeleton.tsx | 23 ++- src/slider/slider-button.tsx | 17 +- src/slider/slider-mark.tsx | 13 +- src/slider/slider.tsx | 37 ++-- src/steps/step-item.tsx | 29 ++-- src/steps/steps.tsx | 18 +- src/swiper/swiper-item.tsx | 3 - src/swiper/swiper.tsx | 16 +- src/tabs/tab-nav-item.tsx | 36 ++-- src/tabs/tab-nav.tsx | 57 +++--- src/tabs/tab-panel.tsx | 13 +- src/tabs/tabs.tsx | 24 ++- src/tag-input/tag-input.tsx | 26 +-- src/tag-input/useTagList.tsx | 9 +- src/tag/check-tag.tsx | 19 +- src/tag/tag.tsx | 29 ++-- src/time-picker/constant.ts | 4 - src/time-picker/input-items.tsx | 26 +-- src/time-picker/panel/index.tsx | 23 ++- src/time-picker/panel/panel-col.tsx | 16 +- src/time-picker/time-picker.tsx | 25 +-- src/time-picker/time-range-picker.tsx | 27 +-- src/tooltip/tooltip.tsx | 14 +- src/transfer/components/transfer-list.tsx | 36 ++-- .../components/transfer-operations.tsx | 10 +- src/transfer/components/transfer-search.tsx | 10 +- src/transfer/transfer.tsx | 14 +- src/tree-select/tree-select.tsx | 52 +++--- 47 files changed, 678 insertions(+), 518 deletions(-) diff --git a/src/config-provider/config-provider.tsx b/src/config-provider/config-provider.tsx index b01d9f172a..a91a32ec2b 100644 --- a/src/config-provider/config-provider.tsx +++ b/src/config-provider/config-provider.tsx @@ -1,12 +1,9 @@ import { defineComponent, PropType, provide } from 'vue'; import { GlobalConfigProvider } from './type'; import { renderTNodeJSX } from '../utils/render-tnode'; -import { prefix } from '../config'; - -const name = `${prefix}-config-provider`; export default defineComponent({ - name, + name: 'TConfigProvider', props: { globalConfig: Object as PropType, diff --git a/src/config-provider/config-receiver.ts b/src/config-provider/config-receiver.ts index 87b225c340..2e32b0be0f 100644 --- a/src/config-provider/config-receiver.ts +++ b/src/config-provider/config-receiver.ts @@ -1,7 +1,6 @@ import { defineComponent } from 'vue'; import defaultConfig from './zh_CN_config'; import { GlobalConfigProvider } from './type'; -import { prefix } from '../config'; export type ValueOf = T[keyof T]; @@ -14,11 +13,9 @@ export interface Placement { [propName: string]: string | number; } -const name = `${prefix}-locale-receiver`; - export default function getConfigReceiverMixins(componentName: string) { return defineComponent({ - name, + name: 'TLocalReceiver', inject: { globalConfig: { default: undefined, diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index 21322fc481..e8b5b32dd1 100644 --- a/src/dialog/dialog.tsx +++ b/src/dialog/dialog.tsx @@ -1,6 +1,5 @@ import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, Transition, watch } from 'vue'; import { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-vue-next'; -import { prefix } from '../config'; import TButton from '../button'; import { DialogCloseContext, TdDialogProps } from './type'; import props from './props'; @@ -86,6 +85,7 @@ export default defineComponent({ setup(props: TdDialogProps, context) { const COMPONENT_NAME = usePrefixClass('dialog'); const LOCK_CLASS = usePrefixClass('dialog--lock'); + const classPrefix = usePrefixClass(); const renderContent = useContent(); const renderTNodeJSX = useTNodeJSX(); const dialogEle = ref(null); @@ -106,7 +106,10 @@ export default defineComponent({ const isModal = computed(() => props.mode === 'modal'); // 是否非模态对话框 const isModeless = computed(() => props.mode === 'modeless'); - const maskClass = computed(() => [`${COMPONENT_NAME.value}__mask`, !props.showOverlay && `${prefix}-is-hidden`]); + const maskClass = computed(() => [ + `${COMPONENT_NAME.value}__mask`, + !props.showOverlay && `${classPrefix.value}-is-hidden`, + ]); const dialogClass = computed(() => { const dialogClass = [ `${COMPONENT_NAME.value}`, @@ -242,14 +245,14 @@ export default defineComponent({ {getCancelBtn({ cancelBtn: props.cancelBtn, globalCancel: global.value.cancel, - className: `${prefix}-dialog__cancel`, + className: `${COMPONENT_NAME.value}__cancel`, })} {getConfirmBtn({ theme: props.theme, confirmBtn: props.confirmBtn, globalConfirm: global.value.confirm, globalConfirmBtnTheme: global.value.confirmBtnTheme, - className: `${prefix}-dialog__confirm`, + className: `${COMPONENT_NAME.value}__confirm`, })}
); diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index 0791409bd4..2518a9e934 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -3,7 +3,6 @@ import { CloseIcon } from 'tdesign-icons-vue-next'; import { useConfig, usePrefixClass } from '../config-provider'; import { addClass, removeClass } from '../utils/dom'; import { ClassName, Styles } from '../common'; -import { prefix } from '../config'; import { Button as TButton } from '../button'; import props from './props'; import { FooterButton, DrawerCloseContext } from './type'; @@ -13,8 +12,6 @@ import { useAction } from '../dialog/hooks'; type FooterButtonType = 'confirm' | 'cancel'; -const lockClass = `${prefix}-drawer--lock`; - export default defineComponent({ name: 'TDrawer', @@ -32,6 +29,9 @@ export default defineComponent({ setup(props, context) { const { global } = useConfig('drawer'); const COMPONENT_NAME = usePrefixClass('drawer'); + + const LOCK_CLASS = usePrefixClass('drawer--lock'); + const confirmBtnAction = (e: MouseEvent) => { props.onConfirm?.({ e }); }; @@ -166,9 +166,9 @@ export default defineComponent({ () => props.visible, (value: boolean) => { if (value && !props.showInAttachedElement) { - props.preventScrollThrough && addClass(document.body, lockClass); + props.preventScrollThrough && addClass(document.body, LOCK_CLASS.value); } else { - props.preventScrollThrough && removeClass(document.body, lockClass); + props.preventScrollThrough && removeClass(document.body, LOCK_CLASS.value); } }, { immediate: true }, diff --git a/src/dropdown/dropdown.tsx b/src/dropdown/dropdown.tsx index 1c9a4e5cdf..d7a43771d7 100644 --- a/src/dropdown/dropdown.tsx +++ b/src/dropdown/dropdown.tsx @@ -1,5 +1,4 @@ import { defineComponent, VNode } from 'vue'; -import { prefix } from '../config'; import Popup from '../popup/index'; import DropdownMenu from './dropdown-menu'; import { DropdownOption, TdDropdownProps } from './type'; diff --git a/src/form/const.ts b/src/form/const.ts index a06d26a75a..ae5df12130 100644 --- a/src/form/const.ts +++ b/src/form/const.ts @@ -1,29 +1,5 @@ -import { prefix } from '../config'; - -export const FORM_ITEM_CLASS_PREFIX = 't-form-item__'; - -const form = `${prefix}-form`; -const input = `${prefix}-input`; -const is = `${prefix}-is`; - -export const CLASS_NAMES = { - form, - label: `${form}__label`, - labelTop: `${form}__label--top`, - inline: `${form}-inline`, - formItem: `${form}__item`, - formItemWithHelp: `${form}__item-with-help`, - formItemWithExtra: `${form}__item-with-extra`, - controls: `${form}__controls`, - controlsContent: `${form}__controls-content`, - status: `${form}__status`, - help: `${form}__help`, - extra: `${input}__extra`, - success: `${is}-success`, - successBorder: `${form}--success-border`, - error: `${is}-error`, - warning: `${is}-warning`, -}; +import { computed } from 'vue'; +import { usePrefixClass } from '../config-provider'; // 允许 Form 统一控制的表单 export const FORM_CONTROL_COMPONENTS = [ @@ -45,3 +21,32 @@ export const FORM_CONTROL_COMPONENTS = [ 'TTransfer', 'TSlider', ]; + +export const useCLASSNAMES = () => { + const classPrefix = usePrefixClass(); + + return computed(() => { + const form = `${classPrefix.value}-form`; + const input = `${classPrefix.value}-input`; + const is = `${classPrefix.value}-is`; + + return { + form, + label: `${form}__label`, + labelTop: `${form}__label--top`, + inline: `${form}-inline`, + formItem: `${form}__item`, + formItemWithHelp: `${form}__item-with-help`, + formItemWithExtra: `${form}__item-with-extra`, + controls: `${form}__controls`, + controlsContent: `${form}__controls-content`, + status: `${form}__status`, + help: `${form}__help`, + extra: `${input}__extra`, + success: `${is}-success`, + successBorder: `${form}--success-border`, + error: `${is}-error`, + warning: `${is}-warning`, + }; + }); +}; diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index 8bf5cabdd7..6cf84367f1 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -1,4 +1,4 @@ -import { defineComponent, VNode, nextTick, h, ComponentPublicInstance, Slot } from 'vue'; +import { defineComponent, VNode, nextTick, h, Slot } from 'vue'; import { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next'; import cloneDeep from 'lodash/cloneDeep'; import lodashGet from 'lodash/get'; @@ -17,7 +17,7 @@ import { FormErrorMessage, } from './type'; import props from './form-item-props'; -import { CLASS_NAMES, FORM_ITEM_CLASS_PREFIX } from './const'; +import { useCLASSNAMES } from './const'; import Form, { FormItemInstance } from './form'; import { ClassName, TNodeReturnValue, Styles } from '../common'; import mixins from '../utils/mixins'; @@ -47,8 +47,12 @@ export default defineComponent({ props: { ...props }, setup() { const FROM_LABEL = usePrefixClass('form__label'); + const CLASS_NAMES = useCLASSNAMES(); + const FORM_ITEM_CLASS_PREFIX = usePrefixClass('form-item__'); return { + CLASS_NAMES, FROM_LABEL, + FORM_ITEM_CLASS_PREFIX, }; }, @@ -69,11 +73,11 @@ export default defineComponent({ computed: { classes(): ClassName { return [ - CLASS_NAMES.formItem, - FORM_ITEM_CLASS_PREFIX + this.name, + this.CLASS_NAMES.formItem, + this.FORM_ITEM_CLASS_PREFIX + this.name, { - [CLASS_NAMES.formItemWithHelp]: this.help, - [CLASS_NAMES.formItemWithExtra]: this.renderTipsInfo(), + [this.CLASS_NAMES.formItemWithHelp]: this.help, + [this.CLASS_NAMES.formItemWithExtra]: this.renderTipsInfo(), }, ]; }, @@ -84,7 +88,7 @@ export default defineComponent({ const labelWidth = isNil(this.labelWidth) ? parent?.labelWidth : this.labelWidth; return [ - CLASS_NAMES.label, + this.CLASS_NAMES.label, { [`${FROM_LABEL}--required`]: this.needRequiredMark, [`${FROM_LABEL}--colon`]: this.hasColon, @@ -98,11 +102,13 @@ export default defineComponent({ const parent = this.form as FormInstance; if (!parent.showErrorMessage) return ''; if (this.verifyStatus === ValidateStatus.SUCCESS) { - return this.successBorder ? [CLASS_NAMES.success, CLASS_NAMES.successBorder].join(' ') : CLASS_NAMES.success; + return this.successBorder + ? [this.CLASS_NAMES.success, this.CLASS_NAMES.successBorder].join(' ') + : this.CLASS_NAMES.success; } if (!this.errorList.length) return; const type = this.errorList[0].type || 'error'; - return type === 'error' ? CLASS_NAMES.error : CLASS_NAMES.warning; + return type === 'error' ? this.CLASS_NAMES.error : this.CLASS_NAMES.warning; }, disabled(): boolean { @@ -111,7 +117,7 @@ export default defineComponent({ contentClasses() { const getErrorClass: string = this.errorClasses; - return [CLASS_NAMES.controls, getErrorClass]; + return [this.CLASS_NAMES.controls, getErrorClass]; }, contentStyle(): Styles { const parent = this.form; @@ -247,20 +253,20 @@ export default defineComponent({ const parent = this.form; let helpVNode: VNode; if (this.help) { - helpVNode =
{this.help}
; + helpVNode =
{this.help}
; } const list = this.errorList; if (parent.showErrorMessage && list && list[0] && list[0].message) { - return

{list[0].message}

; + return

{list[0].message}

; } if (this.successList.length) { - return

{this.successList[0].message}

; + return

{this.successList[0].message}

; } return helpVNode; }, getDefaultIcon(): TNodeReturnValue { const resultIcon = (Icon: IconConstructor) => ( - + ); @@ -284,7 +290,9 @@ export default defineComponent({ slotStatusIcon: Slot, props?: TdFormItemProps, ): TNodeReturnValue { - const resultIcon = (otherContent?: TNodeReturnValue) => {otherContent}; + const resultIcon = (otherContent?: TNodeReturnValue) => ( + {otherContent} + ); if (statusIcon === true) { return this.getDefaultIcon(); } @@ -353,7 +361,7 @@ export default defineComponent({
{this.getLabel()}
-
+
{this.$slots.default ? this.$slots.default() : null} {this.getSuffixIcon()}
diff --git a/src/form/form.tsx b/src/form/form.tsx index 9184c628db..9da04aaa05 100644 --- a/src/form/form.tsx +++ b/src/form/form.tsx @@ -4,7 +4,7 @@ import isBoolean from 'lodash/isBoolean'; import isArray from 'lodash/isArray'; import { FormValidateResult, TdFormProps, FormValidateParams, ValidateResultList } from './type'; import props from './props'; -import { FORM_ITEM_CLASS_PREFIX, CLASS_NAMES, FORM_CONTROL_COMPONENTS } from './const'; +import { useCLASSNAMES, FORM_CONTROL_COMPONENTS } from './const'; import FormItem from './form-item'; import { FormResetEvent, FormSubmitEvent, ClassName } from '../common'; import { emitEvent } from '../utils/event'; @@ -35,8 +35,13 @@ export default defineComponent({ provide('formDisabled', { disabled, }); + const CLASS_NAMES = useCLASSNAMES(); + const FORM_ITEM_CLASS_PREFIX = usePrefixClass('form-item__'); + return { + CLASS_NAMES, COMPONENT_NAME, + FORM_ITEM_CLASS_PREFIX, }; }, @@ -49,7 +54,7 @@ export default defineComponent({ computed: { formClass(): ClassName { return [ - CLASS_NAMES.form, + this.CLASS_NAMES.form, { [`${this.COMPONENT_NAME}-inline`]: this.layout === 'inline', }, @@ -69,7 +74,7 @@ export default defineComponent({ if (isBoolean(result)) return ''; const [firstKey] = Object.keys(result); if (this.scrollToFirstError) { - this.scrollTo(`.${FORM_ITEM_CLASS_PREFIX + firstKey}`); + this.scrollTo(`.${this.FORM_ITEM_CLASS_PREFIX + firstKey}`); } const resArr = result[firstKey] as ValidateResultList; if (!isArray(resArr)) return ''; diff --git a/src/menu/menu-group.tsx b/src/menu/menu-group.tsx index 9ee4d05b81..585126e138 100644 --- a/src/menu/menu-group.tsx +++ b/src/menu/menu-group.tsx @@ -1,5 +1,4 @@ import { defineComponent } from 'vue'; -import { prefix } from '../config'; import props from './menu-group-props'; import { renderTNodeJSX } from '../utils/render-tnode'; import { usePrefixClass } from '../config-provider'; diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx index 357c2a43ec..9a3d5ff32d 100755 --- a/src/pagination/pagination.tsx +++ b/src/pagination/pagination.tsx @@ -8,7 +8,7 @@ import { EllipsisIcon, } from 'tdesign-icons-vue-next'; import { TdPaginationProps } from '../pagination/type'; -import { useConfig } from '../config-provider'; +import { useConfig, usePrefixClass } from '../config-provider'; import { renderTNodeJSX } from '../utils/render-tnode'; import TInputNumber from '../input-number'; import { Option, Select } from '../select'; @@ -34,11 +34,10 @@ export default defineComponent({ 'pageSize', ); - const { t, global, classPrefix: prefix } = useConfig('pagination'); + const { t, global } = useConfig('pagination'); + const COMPONENT_NAME = usePrefixClass('pagination'); - const name = computed(() => `${prefix.value}-pagination`); - - const { pageCount, ...paginationClasses } = usePaginationClasses(props, innerCurrent, name); + const { pageCount, ...paginationClasses } = usePaginationClasses(props, innerCurrent, COMPONENT_NAME); const { prevMore, isPrevMoreShow, curPageLeftCount, nextMore, isNextMoreShow, curPageRightCount } = useMoreAction( props, diff --git a/src/popconfirm/popconfirm.tsx b/src/popconfirm/popconfirm.tsx index 91b079cf44..adac87998d 100644 --- a/src/popconfirm/popconfirm.tsx +++ b/src/popconfirm/popconfirm.tsx @@ -1,6 +1,6 @@ import { defineComponent, computed, toRefs } from 'vue'; import { InfoCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-vue-next'; -import { useConfig } from '../config-provider'; +import { useConfig, usePrefixClass } from '../config-provider'; import Popup, { PopupProps } from '../popup/index'; import props from './props'; import { PopconfirmVisibleChangeContext } from './type'; @@ -11,14 +11,12 @@ import useVModel from '../hooks/useVModel'; export default defineComponent({ name: 'TPopconfirm', props, - setup(props, context) { - const { global, classPrefix } = useConfig('popconfirm'); + setup(props) { + const { global } = useConfig('popconfirm'); + const COMPONENT_NAME = usePrefixClass('popconfirm'); const { visible, modelValue } = toRefs(props); const [innerVisible, setInnerVisible] = useVModel(visible, modelValue, props.defaultVisible, props.onVisibleChange); - const componentName = computed(() => { - return `${classPrefix.value}-popconfirm`; - }); const confirmBtnAction = (e: MouseEvent) => { props.onConfirm?.({ e }); @@ -36,7 +34,7 @@ export default defineComponent({ const innerPopupProps = computed(() => { return { showArrow: props.showArrow, - overlayClassName: componentName.value, + overlayClassName: COMPONENT_NAME.value, trigger: 'click', destroyOnClose: props.destroyOnClose, placement: props.placement, @@ -49,7 +47,7 @@ export default defineComponent({ const cancelBtn = getCancelBtn({ cancelBtn: props.cancelBtn, globalCancel: global.value.cancel, - className: `${componentName.value}__cancel`, + className: `${COMPONENT_NAME.value}__cancel`, }); const confirmBtn = getConfirmBtn({ @@ -57,7 +55,7 @@ export default defineComponent({ confirmBtn: props.confirmBtn, globalConfirm: global.value.confirm, globalConfirmBtnTheme: global.value.confirmBtnTheme, - className: `${componentName.value}__confirm`, + className: `${COMPONENT_NAME.value}__confirm`, }); const renderIcon = () => { @@ -67,17 +65,17 @@ export default defineComponent({ danger: ErrorCircleFilledIcon, }[props.theme]; const theme = props.theme || 'default'; - return renderTNodeDefault('icon', ); + return renderTNodeDefault('icon', ); }; return ( -
-
+
+
{renderIcon()} -
{renderTNodeJSX('content')}
+
{renderTNodeJSX('content')}
{Boolean(cancelBtn || confirmBtn) && ( -
+
{cancelBtn} {confirmBtn}
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx index 64cddb33c4..13fca009b0 100644 --- a/src/popup/popup.tsx +++ b/src/popup/popup.tsx @@ -1,8 +1,6 @@ import { defineComponent, Transition } from 'vue'; import { createPopper, Placement } from '@popperjs/core'; import ResizeSensor from 'css-element-queries/src/ResizeSensor'; -import config from '../config'; -import CLASSNAMES from '../utils/classnames'; import { on, off, once, getAttach } from '../utils/dom'; import props from './props'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; @@ -10,11 +8,9 @@ import { PopupVisibleChangeContext } from './type'; import { ClassName, Styles } from '../common'; import setStyle from '../utils/set-style'; import { emitEvent } from '../utils/event'; - -const { prefix } = config; +import { usePrefixClass, useCommonClassName } from '../config-provider'; const stop = (e: MouseEvent) => e.stopPropagation(); -const name = `${prefix}-popup`; const placementMap = { top: 'top', @@ -60,12 +56,19 @@ export default defineComponent({ type: Boolean, }, }, - emits: ['visible-change'], + setup() { + const COMPONENT_NAME = usePrefixClass('popup'); + const { STATUS } = useCommonClassName(); + return { + STATUS, + COMPONENT_NAME, + }; + }, + data() { return { - name, currentPlacement: '', popperElm: null, referenceElm: null, @@ -80,10 +83,10 @@ export default defineComponent({ computed: { overlayClasses(): ClassName { const base = [ - `${name}__content`, + `${this.COMPONENT_NAME}__content`, { - [`${name}__content--arrow`]: this.showArrow, - [CLASSNAMES.STATUS.disabled]: this.disabled, + [`${this.COMPONENT_NAME}__content--arrow`]: this.showArrow, + [this.STATUS.disabled]: this.disabled, }, ] as ClassName; return base.concat(this.overlayClassName); @@ -320,14 +323,14 @@ export default defineComponent({ render() { return ( -
+
diff --git a/src/progress/progress.tsx b/src/progress/progress.tsx index 955e6466d2..4343b897cc 100644 --- a/src/progress/progress.tsx +++ b/src/progress/progress.tsx @@ -7,18 +7,18 @@ import { CheckIcon, ErrorIcon, } from 'tdesign-icons-vue-next'; -import { prefix } from '../config'; import { getBackgroundColor } from '../utils/helper'; import { PRO_THEME, CIRCLE_SIZE, CIRCLE_SIZE_PX, STATUS_ICON, CIRCLE_FONT_SIZE_RATIO } from './constants'; import props from './props'; -import { renderTNodeJSX } from '../utils/render-tnode'; - -const name = `${prefix}-progress`; +import { usePrefixClass } from '../config-provider'; +import { useTNodeJSX } from '../hooks/tnode'; export default defineComponent({ name: 'TProgress', props, setup(props) { + const renderTNodeJSX = useTNodeJSX(); + const COMPONENT_NAME = usePrefixClass('progress'); const statusStyle = computed(() => { if (props.percentage >= 100) { return 'success'; @@ -26,14 +26,6 @@ export default defineComponent({ return props.status; }); - const themeClass = computed(() => { - const Line = PRO_THEME.LINE; - if (props.theme === Line) { - return 'thin'; - } - return props.theme; - }); - const trackBgStyle = computed(() => { const height = typeof props.strokeWidth === 'string' ? props.strokeWidth : `${props.strokeWidth}px`; return { @@ -57,8 +49,6 @@ export default defineComponent({ }; }); - const isShowIcon = computed(() => STATUS_ICON.includes(props.status) && typeof props.label === 'boolean'); - // theme=circle 获取直径 const diameter = computed(() => { let diameter = CIRCLE_SIZE_PX.MEDIUM; @@ -142,95 +132,81 @@ export default defineComponent({ const components = getIconMap(); const component = components[status]; if (component) { - labelContent = ; + labelContent = ; } } return labelContent; }; - return { - props, - statusStyle, - themeClass, - trackBgStyle, - barStyle, - circlePathStyle, - isShowIcon, - diameter, - rPoints, - radius, - circleStyle, - circleStrokeWidth, - strokeDashArr, - getIconMap, - getLabelContent, - }; - }, - - render() { - const labelContent = ( -
{renderTNodeJSX(this, 'label', this.getLabelContent() as any)}
- ); - // 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部 - const PLUMP_SEPERATE = 10; - const seperateClasses = this.percentage > PLUMP_SEPERATE ? `${name}--over-ten` : `${name}--under-ten`; - return ( -
- {this.theme === PRO_THEME.LINE && ( -
-
-
+ return () => { + const labelContent = ( +
{renderTNodeJSX('label', getLabelContent())}
+ ); + // 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部 + const PLUMP_SEPERATE = 10; + const seperateClasses = + props.percentage > PLUMP_SEPERATE ? `${COMPONENT_NAME.value}--over-ten` : `${COMPONENT_NAME.value}--under-ten`; + return ( +
+ {props.theme === PRO_THEME.LINE && ( +
+
+
+
+ {labelContent}
- {labelContent} -
- )} - - {this.theme === PRO_THEME.PLUMP && ( -
-
- {this.percentage > PLUMP_SEPERATE && labelContent} + )} + + {props.theme === PRO_THEME.PLUMP && ( +
+
+ {props.percentage > PLUMP_SEPERATE && labelContent} +
+ {props.percentage < PLUMP_SEPERATE && labelContent}
- {this.percentage < PLUMP_SEPERATE && labelContent} -
- )} - - {this.theme === PRO_THEME.CIRCLE && ( -
- {labelContent} - - - {this.percentage > 0 && ( + )} + + {props.theme === PRO_THEME.CIRCLE && ( +
+ {labelContent} + - )} - -
- )} -
- ); + {props.percentage > 0 && ( + + )} + +
+ )} +
+ ); + }; }, }); diff --git a/src/radio/group.tsx b/src/radio/group.tsx index af0afa9b39..37177de0bf 100644 --- a/src/radio/group.tsx +++ b/src/radio/group.tsx @@ -4,10 +4,11 @@ import isNumber from 'lodash/isNumber'; import props from './radio-group-props'; import { RadioOptionObj, RadioOption, RadioValue } from './type'; import { prefix } from '../config'; -import Radio, { radioBtnName } from './radio'; +import Radio from './radio'; import { TNodeReturnValue } from '../common'; import CLASSNAMES, { SIZE_CLASSNAMES } from '../utils/classnames'; import { emitEvent } from '../utils/event'; +import { usePrefixClass } from '../config-provider'; const name = `${prefix}-radio-group`; @@ -27,6 +28,13 @@ export default defineComponent({ emits: ['change'], + setup() { + const radioBtnName = usePrefixClass('radio-button'); + return { + radioBtnName, + }; + }, + data() { return { barStyle: { width: '0px', left: '0px' }, @@ -35,7 +43,7 @@ export default defineComponent({ }, computed: { checkedClassName() { - return `.${radioBtnName}.${CLASSNAMES.STATUS.checked}`; + return `.${this.radioBtnName}.${CLASSNAMES.STATUS.checked}`; }, }, watch: { diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx index 84229e2921..11b1e88486 100644 --- a/src/radio/radio.tsx +++ b/src/radio/radio.tsx @@ -1,6 +1,5 @@ import { defineComponent, VNode } from 'vue'; -import { prefix } from '../config'; -import CLASSNAMES from '../utils/classnames'; +import { usePrefixClass, useCommonClassName } from '../config-provider'; import { omit } from '../utils/helper'; import props from './props'; import { emitEvent } from '../utils/event'; @@ -9,9 +8,6 @@ import { TdRadioProps } from './type'; // hooks import { useFormDisabled } from '../form/hooks'; -const name = `${prefix}-radio`; -export const radioBtnName = `${prefix}-radio-button`; - function getValidAttrs(obj: Record): Record { const newObj = {}; Object.keys(obj).forEach((key) => { @@ -33,7 +29,13 @@ export default defineComponent({ emits: ['change', 'click'], setup() { const disabled = useFormDisabled(); + const COMPONENT_NAME = usePrefixClass('radio'); + const radioBtnName = usePrefixClass('radio-button'); + const { STATUS } = useCommonClassName(); return { + STATUS, + COMPONENT_NAME, + radioBtnName, disabled, }; }, @@ -86,13 +88,13 @@ export default defineComponent({ inputProps.name = radioGroup.name; } - const prefixCls = radioButton ? radioBtnName : name; + const prefixCls = radioButton ? this.radioBtnName : this.COMPONENT_NAME; const inputClass = [ `${prefixCls}`, { - [CLASSNAMES.STATUS.checked]: inputProps.checked, - [CLASSNAMES.STATUS.disabled]: inputProps.disabled, + [this.STATUS.checked]: inputProps.checked, + [this.STATUS.disabled]: inputProps.disabled, }, ]; diff --git a/src/select-input/select-input.tsx b/src/select-input/select-input.tsx index 2f6e6d38fd..8b45f76693 100644 --- a/src/select-input/select-input.tsx +++ b/src/select-input/select-input.tsx @@ -1,18 +1,22 @@ import { computed, defineComponent, ref, SetupContext, toRefs } from 'vue'; import Popup from '../popup'; -import { prefix } from '../config'; import props from './props'; import { TdSelectInputProps } from './type'; import useSingle from './useSingle'; import useMultiple from './useMultiple'; import useOverlayStyle from './useOverlayStyle'; +import { usePrefixClass } from '../config-provider'; -const NAME_CLASS = `${prefix}-select-input`; -const BASE_CLASS_BORDERLESS = `${prefix}-select-input--borderless`; -const BASE_CLASS_MULTIPLE = `${prefix}-select-input--multiple`; -const BASE_CLASS_POPUP_VISIBLE = `${prefix}-select-input--popup-visible`; -const BASE_CLASS_EMPTY = `${prefix}-select-input--empty`; +const useCOmponentClassName = () => { + return { + NAME_CLASS: usePrefixClass('select-input'), + BASE_CLASS_BORDERLESS: usePrefixClass('select-input--borderless'), + BASE_CLASS_MULTIPLE: usePrefixClass('select-input--multiple'), + BASE_CLASS_POPUP_VISIBLE: usePrefixClass('select-input--popup-visible'), + BASE_CLASS_EMPTY: usePrefixClass('select-input--empty'), + }; +}; export default defineComponent({ name: 'TSelectInput', @@ -20,6 +24,10 @@ export default defineComponent({ props: { ...props }, setup(props: TdSelectInputProps, context: SetupContext) { + const { NAME_CLASS, BASE_CLASS_BORDERLESS, BASE_CLASS_MULTIPLE, BASE_CLASS_POPUP_VISIBLE, BASE_CLASS_EMPTY } = + useCOmponentClassName(); + const classPrefix = usePrefixClass(); + const selectInputRef = ref(); const selectInputWrapRef = ref(); const { multiple, value, popupVisible, borderless } = toRefs(props); @@ -28,16 +36,18 @@ export default defineComponent({ const { tOverlayStyle, innerPopupVisible, onInnerPopupVisibleChange } = useOverlayStyle(props); const popupClasses = computed(() => [ - NAME_CLASS, + NAME_CLASS.value, { - [BASE_CLASS_BORDERLESS]: borderless.value, - [BASE_CLASS_MULTIPLE]: multiple.value, - [BASE_CLASS_POPUP_VISIBLE]: popupVisible.value ?? innerPopupVisible.value, - [BASE_CLASS_EMPTY]: value.value instanceof Array ? !value.value.length : !value.value, + [BASE_CLASS_BORDERLESS.value]: borderless.value, + [BASE_CLASS_MULTIPLE.value]: multiple.value, + [BASE_CLASS_POPUP_VISIBLE.value]: popupVisible.value ?? innerPopupVisible.value, + [BASE_CLASS_EMPTY.value]: value.value instanceof Array ? !value.value.length : !value.value, }, ]); return { + classPrefix, + NAME_CLASS, selectInputWrapRef, innerPopupVisible, commonInputProps, @@ -81,9 +91,11 @@ export default defineComponent({ if (!this.tips) return mainContent; return ( -
+
{mainContent} -
{this.tips}
+
+ {this.tips} +
); }, diff --git a/src/select/option.tsx b/src/select/option.tsx index 28f17c7f31..49b5d8c39c 100644 --- a/src/select/option.tsx +++ b/src/select/option.tsx @@ -1,9 +1,8 @@ -import { defineComponent, VNode, ref, onMounted } from 'vue'; +import { defineComponent, VNode, ref } from 'vue'; import get from 'lodash/get'; import { renderContent } from '../utils/render-tnode'; import { scrollSelectedIntoView } from '../utils/dom'; -import { prefix } from '../config'; -import CLASSNAMES from '../utils/classnames'; + import props from './option-props'; import { SelectOption } from './type'; import Checkbox from '../checkbox/index'; @@ -12,8 +11,7 @@ import { ClassName } from '../common'; // hooks import { useFormDisabled } from '../form/hooks'; import useRipple from '../hooks/useRipple'; - -const selectName = `${prefix}-select`; +import { usePrefixClass, useCommonClassName } from '../config-provider'; export default defineComponent({ name: 'TOption', @@ -30,11 +28,16 @@ export default defineComponent({ setup() { const disabled = useFormDisabled(); + const selectName = usePrefixClass('select'); + const { STATUS, SIZE } = useCommonClassName(); const liRef = ref(); useRipple(liRef); return { + STATUS, + SIZE, + selectName, disabled, liRef, }; @@ -69,12 +72,12 @@ export default defineComponent({ }, classes(): ClassName { return [ - `${prefix}-select-option`, + `${this.selectName}-option`, { - [CLASSNAMES.STATUS.disabled]: this.disabled || this.multiLimitDisabled, - [CLASSNAMES.STATUS.selected]: this.selected, - [CLASSNAMES.SIZE[this.tSelect && this.tSelect.size]]: this.tSelect && this.tSelect.size, - [`${prefix}-select-option__hover`]: this.hovering, + [this.STATUS.disabled]: this.disabled || this.multiLimitDisabled, + [this.STATUS.selected]: this.selected, + [this.SIZE[this.tSelect && this.tSelect.size]]: this.tSelect && this.tSelect.size, + [`${this.selectName}-option__hover`]: this.hovering, }, ]; }, @@ -145,7 +148,7 @@ export default defineComponent({ return false; } const parent = this.$el.parentNode as HTMLElement; - if (parent && parent.className.indexOf(`${selectName}__create-option`) !== -1) { + if (parent && parent.className.indexOf(`${this.selectName}__create-option`) !== -1) { this.tSelect && this.tSelect.createOption(this.value.toString()); } this.tSelect && this.tSelect.onOptionClick(this.value, e); diff --git a/src/select/optionGroup.tsx b/src/select/optionGroup.tsx index 7c3efbbb17..6ce083a927 100644 --- a/src/select/optionGroup.tsx +++ b/src/select/optionGroup.tsx @@ -1,11 +1,8 @@ import { defineComponent, VNode } from 'vue'; import { renderTNodeJSX } from '../utils/render-tnode'; -import { prefix } from '../config'; -import CLASSNAMES from '../utils/classnames'; import props from './option-group-props'; import { ClassName } from '../common'; - -const name = `${prefix}-select-option-group`; +import { usePrefixClass, useCommonClassName } from '../config-provider'; export default defineComponent({ name: 'TOptionGroup', @@ -15,6 +12,14 @@ export default defineComponent({ }, }, props: { ...props }, + setup() { + const COMPONENT_NAME = usePrefixClass('select-option-group'); + const { SIZE } = useCommonClassName(); + return { + SIZE, + COMPONENT_NAME, + }; + }, data() { return { visible: true, @@ -23,10 +28,10 @@ export default defineComponent({ computed: { classes(): ClassName { return [ - name, + this.COMPONENT_NAME, { - [CLASSNAMES.SIZE[this.tSelect.size]]: this.tSelect && this.tSelect.size, - [`${name}__divider`]: this.divider, + [this.SIZE[this.tSelect.size]]: this.tSelect && this.tSelect.size, + [`${this.COMPONENT_NAME}__divider`]: this.divider, }, ]; }, @@ -43,7 +48,7 @@ export default defineComponent({ const children = renderTNodeJSX(this, 'default'); return (
  • -
    {this.label}
    +
    {this.label}
      {children}
    • ); diff --git a/src/select/select.tsx b/src/select/select.tsx index bd484c7dad..4e15d74436 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -9,8 +9,6 @@ import TLoading from '../loading'; import { renderTNodeJSX } from '../utils/render-tnode'; import mixins from '../utils/mixins'; import getConfigReceiverMixins, { SelectConfig } from '../config-provider/config-receiver'; -import { prefix } from '../config'; -import CLASSNAMES from '../utils/classnames'; import TInput from '../input/index'; import Tag from '../tag/index'; import FakeArrow from '../common-components/fake-arrow'; @@ -21,6 +19,7 @@ import props from './props'; import { SelectOption, TdOptionProps, SelectValue, TdSelectProps, SelectOptionGroup } from './type'; import { ClassName } from '../common'; import { emitEvent } from '../utils/event'; +import { usePrefixClass, useCommonClassName } from '../config-provider'; // hooks import { useFormDisabled } from '../form/hooks'; @@ -32,8 +31,6 @@ interface KeysType { label?: string; } -const name = `${prefix}-select`; -const listName = `${name}__list`; // trigger元素不超过此宽度时，下拉选项的最大宽度（用户未设置overStyle width时） // 用户设置overStyle width时，以设置的为准 const DEFAULT_MAX_OVERLAY_WIDTH = 500; @@ -72,7 +69,16 @@ export default defineComponent({ ], setup() { const disabled = useFormDisabled(); + const COMPONENT_NAME = usePrefixClass('select'); + const classPrefix = usePrefixClass(''); + const listName = usePrefixClass('select__list'); + const { STATUS, SIZE } = useCommonClassName(); return { + STATUS, + SIZE, + classPrefix, + listName, + COMPONENT_NAME, disabled, }; }, @@ -102,34 +108,34 @@ export default defineComponent({ computed: { classes(): ClassName { return [ - `${name}`, - `${prefix}-select-polyfill`, // 基于select-input改造时需要移除，polyfill代码，同时移除common中此类名 + `${this.COMPONENT_NAME}`, + `${this.COMPONENT_NAME}-polyfill`, // 基于select-input改造时需要移除，polyfill代码，同时移除common中此类名 { - [CLASSNAMES.STATUS.disabled]: this.disabled, - [CLASSNAMES.STATUS.active]: this.visible, - [CLASSNAMES.SIZE[this.size]]: this.size, - [`${prefix}-has-prefix`]: this.$slots.prefixIcon, - [`${prefix}-no-border`]: !this.bordered, + [this.STATUS.disabled]: this.disabled, + [this.STATUS.active]: this.visible, + [this.SIZE[this.size]]: this.size, + [`${this.classPrefix}-has-prefix`]: this.$slots.prefixIcon, + [`${this.classPrefix}-no-border`]: !this.bordered, }, ]; }, popClass(): string { const { popupObject } = this; - return `${popupObject.overlayClassName} ${name}__dropdown narrow-scrollbar`; + return `${popupObject.overlayClassName} ${this.COMPONENT_NAME}__dropdown narrow-scrollbar`; }, tipsClass(): ClassName { return [ - `${name}__loading-tips`, + `${this.COMPONENT_NAME}__loading-tips`, { - [CLASSNAMES.SIZE[this.size]]: this.size, + [this.SIZE[this.size]]: this.size, }, ]; }, emptyClass(): ClassName { return [ - `${name}__empty`, + `${this.COMPONENT_NAME}__empty`, { - [CLASSNAMES.SIZE[this.size]]: this.size, + [this.SIZE[this.size]]: this.size, }, ]; }, @@ -414,7 +420,11 @@ export default defineComponent({ }, getOptions(option: OptionInstance) { // create option值不push到options里 - if (option.$el && option.$el.className && option.$el.className.indexOf(`${name}__create-option--special`) !== -1) + if ( + option.$el && + option.$el.className && + option.$el.className.indexOf(`${this.COMPONENT_NAME}__create-option--special`) !== -1 + ) return; const tmp = this.realOptions.filter((item) => get(item, this.realValue) === option.value); if (!tmp.length) { @@ -609,7 +619,11 @@ export default defineComponent({ }, getCloseIcon() { // TODO 基于select-input改造时需要移除，polyfill代码，同时移除common中此类名 - const closeIconClass = [`${name}__right-icon`, `${name}__right-icon-clear`, `${name}__right-icon-polyfill`]; + const closeIconClass = [ + `${this.COMPONENT_NAME}__right-icon`, + `${this.COMPONENT_NAME}__right-icon-clear`, + `${this.COMPONENT_NAME}__right-icon-polyfill`, + ]; if (isFunction(this.global.clearIcon)) { return ( @@ -632,7 +646,7 @@ export default defineComponent({ }, renderGroupOptions(options: SelectOptionGroup[]) { return ( -
      +
        {options.map((groupList: SelectOptionGroup) => { const children = groupList.children.filter((item) => this.displayOptions.find((child) => child.value === item.value), @@ -649,7 +663,7 @@ export default defineComponent({ // options 直传时 renderOptions(options: SelectOption[]) { return ( -
          +
            {options.map((item: TdOptionProps, index: number) => ( ( -
            +
            {renderTNodeJSX(this, 'panelTopContent')} -
              - +
                +
              {loading &&
              {loadingTextSlot || loadingText}
              } {!loading && !displayOptions.length && !showCreateOption &&
            • {emptySlot}
              • } {!hasOptions && displayOptions.length && !loading ? ( this.renderDataWithOptions() ) : ( -
                {children}
              +
                {children}
              )} {renderTNodeJSX(this, 'panelBottomContent')}
            ), }; return ( -
            +
            - {prefixIconSlot && {prefixIconSlot[0]}} - {showPlaceholder && {placeholderText}} + {prefixIconSlot && {prefixIconSlot[0]}} + {showPlaceholder && {placeholderText}} {this.valueDisplay || this.$slots.valueDisplay ? renderTNodeJSX(this, 'valueDisplay', { params: { value: selectedMultiple, onClose: (index: number) => this.removeTag(index) }, @@ -787,7 +805,7 @@ export default defineComponent({ )} {!multiple && !showPlaceholder && !showFilter && ( - + {selectedSingle} )} @@ -798,7 +816,7 @@ export default defineComponent({ size={size} placeholder={filterPlaceholder} disabled={disabled} - class={`${name}__input`} + class={`${this.COMPONENT_NAME}__input`} readonly={!this.visible || !this.showFilter} onFocus={this.focus} onBlur={this.blur} @@ -807,13 +825,16 @@ export default defineComponent({ )} {this.showArrow && !this.showLoading && ( )} {this.showClose && !this.showLoading && this.getCloseIcon()} {this.showLoading && ( - + )}
            diff --git a/src/skeleton/skeleton.tsx b/src/skeleton/skeleton.tsx index 9b06874e41..3dccd6a6ff 100644 --- a/src/skeleton/skeleton.tsx +++ b/src/skeleton/skeleton.tsx @@ -1,13 +1,10 @@ import { h, defineComponent } from 'vue'; import isNumber from 'lodash/isNumber'; import isFunction from 'lodash/isFunction'; -import { prefix } from '../config'; import { renderContent } from '../utils/render-tnode'; import props from './props'; import { SkeletonRowCol, SkeletonRowColObj, TdSkeletonProps } from './type'; -import { ClassName, Styles } from '../common'; - -const name = `${prefix}-skeleton`; +import { usePrefixClass } from '../config-provider'; const ThemeMap: Record = { text: [1], @@ -38,9 +35,9 @@ const ThemeMap: Record = { ], }; -const getColItemStyle = (obj: SkeletonRowColObj): Styles => { +const getColItemStyle = (obj: SkeletonRowColObj) => { const styleName = ['width', 'height', 'marginRight', 'marginLeft', 'margin', 'size', 'background', 'backgroundColor']; - const style: Styles = {}; + const style = Object.create(null); styleName.forEach((name) => { if (name in obj) { const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name]; @@ -60,10 +57,11 @@ export default defineComponent({ props: { ...props }, setup(props) { - const getColItemClass = (obj: SkeletonRowColObj): ClassName => [ - `${name}__col`, - `${name}--type-${obj.type || 'text'}`, - { [`${name}--animation-${props.animation}`]: props.animation }, + const COMPONENT_NAME = usePrefixClass('skeleton'); + const getColItemClass = (obj: SkeletonRowColObj) => [ + `${COMPONENT_NAME.value}__col`, + `${COMPONENT_NAME.value}--type-${obj.type || 'text'}`, + { [`${COMPONENT_NAME.value}--animation-${props.animation}`]: props.animation }, ]; const renderCols = (_cols: Number | SkeletonRowColObj | Array) => { @@ -85,12 +83,13 @@ export default defineComponent({ const renderRowCol = (_rowCol?: SkeletonRowCol) => { const rowCol: SkeletonRowCol = _rowCol || props.rowCol; - const getBlockClass = (): ClassName => [`${name}__row`]; + const getBlockClass = () => [`${COMPONENT_NAME.value}__row`]; return rowCol.map((item) =>
            {renderCols(item)}
            ); }; return { + COMPONENT_NAME, renderRowCol, }; }, @@ -118,6 +117,6 @@ export default defineComponent({ children.push(this.renderRowCol([1, 1, 1, { width: '70%' }])); } - return
            {children}
            ; + return
            {children}
            ; }, }); diff --git a/src/slider/slider-button.tsx b/src/slider/slider-button.tsx index d380e476e6..fa886304bb 100644 --- a/src/slider/slider-button.tsx +++ b/src/slider/slider-button.tsx @@ -1,12 +1,10 @@ import { defineComponent, ComponentPublicInstance } from 'vue'; -import { prefix } from '../config'; import TPopup from '../popup/index'; import { emitEvent } from '../utils/event'; - -const name = `${prefix}-slider-button`; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ - name, + name: 'TSliderButton', components: { TPopup, }, @@ -29,6 +27,12 @@ export default defineComponent({ }, }, emits: ['input'], + setup() { + const COMPONENT_NAME = usePrefixClass('slider__button'); + return { + COMPONENT_NAME, + }; + }, data() { return { hovering: false, @@ -50,7 +54,6 @@ export default defineComponent({ popupVisible: false, }; }, - computed: { placement() { if (this.tooltipProps instanceof Object) { @@ -266,7 +269,7 @@ export default defineComponent({ return (
            -
            +
            ); diff --git a/src/slider/slider-mark.tsx b/src/slider/slider-mark.tsx index ac6975e9d7..e03d176468 100644 --- a/src/slider/slider-mark.tsx +++ b/src/slider/slider-mark.tsx @@ -1,11 +1,10 @@ import { defineComponent, PropType } from 'vue'; -import { prefix } from '../config'; import { TdSliderProps } from './type'; import { emitEvent } from '../utils/event'; +import { usePrefixClass } from '../config-provider'; -const name = `${prefix}-slider-mark`; export default defineComponent({ - name, + name: 'TSliderMark', props: { mark: { type: [Object, Array, String, Number] as PropType, @@ -15,6 +14,12 @@ export default defineComponent({ }, }, emits: ['change-value'], + setup() { + const COMPONENT_NAME = usePrefixClass('slider__mark'); + return { + COMPONENT_NAME, + }; + }, methods: { changeValue(event: MouseEvent) { event.stopPropagation(); @@ -24,7 +29,7 @@ export default defineComponent({ render() { const label = this.mark; return ( -
            +
            {label}
            ); diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx index d3b6ad6a3e..0a98055b5a 100644 --- a/src/slider/slider.tsx +++ b/src/slider/slider.tsx @@ -3,7 +3,6 @@ import cloneDeep from 'lodash/cloneDeep'; import { emitEvent } from '../utils/event'; import { ClassName, TNode } from '../common'; import props from './props'; -import { prefix } from '../config'; import InputNumber from '../input-number/index'; import TSliderMark from './slider-mark'; import TSliderButton from './slider-button'; @@ -11,8 +10,8 @@ import { SliderValue, TdSliderProps } from './type'; import log from '../_common/js/log/log'; // hooks import { useFormDisabled } from '../form/hooks'; +import { usePrefixClass, useCommonClassName } from '../config-provider'; -const name = `${prefix}-slider`; interface MarkItem { point: number; position: number; @@ -35,7 +34,11 @@ export default defineComponent({ props: { ...props }, setup() { const disabled = useFormDisabled(); + const COMPONENT_NAME = usePrefixClass('slider'); + const { STATUS } = useCommonClassName(); return { + STATUS, + COMPONENT_NAME, disabled, }; }, @@ -55,25 +58,25 @@ export default defineComponent({ }, computed: { containerClass(): ClassName { - return [`${name}__container`, { 'is-vertical': this.vertical }]; + return [`${this.COMPONENT_NAME}__container`, { 'is-vertical': this.vertical }]; }, sliderClass(): ClassName { return [ - `${name}`, + `${this.COMPONENT_NAME}`, { 'is-vertical': this.vertical, - [`${name}--with-input`]: this.inputNumberProps, - [`${name}--vertical`]: this.vertical, - [`${prefix}-is-disabled`]: this.disabled, + [`${this.COMPONENT_NAME}--with-input`]: this.inputNumberProps, + [`${this.COMPONENT_NAME}--vertical`]: this.vertical, + [this.STATUS.disabled]: this.disabled, }, ]; }, sliderRailClass(): ClassName { - return [`${name}__rail`, { 'show-input': this.inputNumberProps, disabled: this.disabled }]; + return [`${this.COMPONENT_NAME}__rail`, { 'show-input': this.inputNumberProps, disabled: this.disabled }]; }, sliderNumberClass(): ClassName { return [ - `${name}__input`, + `${this.COMPONENT_NAME}__input`, { 'is-vertical': this.vertical, }, @@ -376,10 +379,14 @@ export default defineComponent({
            {this.markList.map((item, index) => ( -
            +
            ))}
            -
            +
            {this.markList.map((item, key) => ( } - {range &&
            } + {range &&
            } {range && (
            -
            +
            {this.steps.map((item, key) => ( -
            +
            ))}
            )} diff --git a/src/steps/step-item.tsx b/src/steps/step-item.tsx index 4bd790e8d9..13e74a49b6 100644 --- a/src/steps/step-item.tsx +++ b/src/steps/step-item.tsx @@ -1,16 +1,14 @@ import { defineComponent, h } from 'vue'; import isFunction from 'lodash/isFunction'; import { CheckIcon, CloseIcon } from 'tdesign-icons-vue-next'; -import { prefix } from '../config'; import props from './step-item-props'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; import { ClassName, SlotReturnValue } from '../common'; +import { usePrefixClass } from '../config-provider'; import mixins from '../utils/mixins'; import getConfigReceiverMixins, { StepsConfig } from '../config-provider/config-receiver'; -const name = `${prefix}-steps-item`; - export default defineComponent({ ...mixins(getConfigReceiverMixins('steps')), name: 'TStepItem', @@ -24,6 +22,12 @@ export default defineComponent({ props: { ...props, }, + setup() { + const COMPONENT_NAME = usePrefixClass('steps-item'); + return { + COMPONENT_NAME, + }; + }, data() { return { index: -1, @@ -34,10 +38,10 @@ export default defineComponent({ return this.steps && this.steps.current; }, baseClass(): ClassName { - return [name, { [`${name}--${this.status}`]: this.status }]; + return [this.COMPONENT_NAME, { [`${this.COMPONENT_NAME}--${this.status}`]: this.status }]; }, iconClass(): ClassName { - return [`${name}__icon`, { [`${name}--${this.status}`]: this.status }]; + return [`${this.COMPONENT_NAME}__icon`, { [`${this.COMPONENT_NAME}--${this.status}`]: this.status }]; }, canClick(): boolean { return this.status !== 'process' && !this.steps?.readonly; @@ -69,7 +73,7 @@ export default defineComponent({ icon = String(this.index + 1); break; } - defaultIcon = {icon}; + defaultIcon = {icon}; } return renderTNodeJSX(this, 'icon', defaultIcon); }, @@ -82,12 +86,15 @@ export default defineComponent({ const content = renderContent(this, 'default', 'content'); return (
            -
            +
            {this.renderIcon()}
            -
            -
            {renderTNodeJSX(this, 'title')}
            -
            {content}
            -
            {renderTNodeJSX(this, 'extra')}
            +
            +
            {renderTNodeJSX(this, 'title')}
            +
            {content}
            +
            {renderTNodeJSX(this, 'extra')}
            diff --git a/src/steps/steps.tsx b/src/steps/steps.tsx index fae282b1ce..499358f7ff 100644 --- a/src/steps/steps.tsx +++ b/src/steps/steps.tsx @@ -1,5 +1,4 @@ import { defineComponent, ComponentPublicInstance, VNode } from 'vue'; -import { prefix } from '../config'; import props from './props'; import TStepItem from './step-item'; import { ClassName } from '../common'; @@ -8,8 +7,7 @@ import getConfigReceiverMixins, { StepsConfig } from '../config-provider/config- import { TdStepsProps, TdStepItemProps } from './type'; import { emitEvent } from '../utils/event'; import { renderTNodeJSX } from '../utils/render-tnode'; - -const name = `${prefix}-steps`; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ name: 'TSteps', @@ -23,6 +21,12 @@ export default defineComponent({ }; }, props: { ...props }, + setup() { + const COMPONENT_NAME = usePrefixClass('steps'); + return { + COMPONENT_NAME, + }; + }, data() { return { stepChildren: [], @@ -36,11 +40,11 @@ export default defineComponent({ } const layout = this.layout || this.direction || 'horizontal'; return [ - name, - `${name}--${layout}`, - `${name}--${this.handleTheme()}-anchor`, + this.COMPONENT_NAME, + `${this.COMPONENT_NAME}--${layout}`, + `${this.COMPONENT_NAME}--${this.handleTheme()}-anchor`, { - [`${name}--${this.sequence}`]: layout === 'vertical', + [`${this.COMPONENT_NAME}--${this.sequence}`]: layout === 'vertical', }, ]; }, diff --git a/src/swiper/swiper-item.tsx b/src/swiper/swiper-item.tsx index e7d656ea42..cd50a0dc3e 100644 --- a/src/swiper/swiper-item.tsx +++ b/src/swiper/swiper-item.tsx @@ -1,7 +1,4 @@ import { defineComponent } from 'vue'; -import { prefix } from '../config'; - -const name = `${prefix}-swiper-item`; export default defineComponent({ name: 'TSwiperItem', diff --git a/src/swiper/swiper.tsx b/src/swiper/swiper.tsx index 3d2b7f7471..32ea1e39b1 100644 --- a/src/swiper/swiper.tsx +++ b/src/swiper/swiper.tsx @@ -1,9 +1,7 @@ import { defineComponent, VNode, computed } from 'vue'; -import { prefix } from '../config'; import props from './props'; import { useChildComponentSlots } from '../hooks/slot'; - -const name = `${prefix}-swiper`; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ name: 'TSwiper', @@ -13,7 +11,11 @@ export default defineComponent({ setup() { const items = computed(() => useChildComponentSlots('TSwiperItem')); + const COMPONENT_NAME = usePrefixClass('swiper'); + const classPrefix = usePrefixClass(); return { + classPrefix, + COMPONENT_NAME, items, }; }, @@ -55,8 +57,8 @@ export default defineComponent({ }; } return ( -
            -
            +
            +
            {this.items}
            @@ -109,9 +111,9 @@ export default defineComponent({ }, render(): VNode { const swiperClass = [ - `${name}`, + `${this.COMPONENT_NAME}`, { - [`${prefix}-is-hidden`]: !this.visible, + [`${this.classPrefix}-is-hidden`]: !this.visible, }, ]; return ( diff --git a/src/tabs/tab-nav-item.tsx b/src/tabs/tab-nav-item.tsx index f21894d506..4ed5752dbe 100644 --- a/src/tabs/tab-nav-item.tsx +++ b/src/tabs/tab-nav-item.tsx @@ -1,12 +1,12 @@ import { defineComponent, ref } from 'vue'; import { CloseIcon } from 'tdesign-icons-vue-next'; -import { prefix } from '../config'; import { TdTabsProps } from './type'; import { emitEvent } from '../utils/event'; import tabProps from './props'; import tabPanelProps from './tab-panel-props'; import useRipple from '../hooks/useRipple'; +import { usePrefixClass, useCommonClassName } from '../config-provider'; export default defineComponent({ name: 'TTabNavItem', @@ -34,21 +34,29 @@ export default defineComponent({ setup() { const itemRef = ref(); useRipple(itemRef); + + const COMPONENT_NAME = usePrefixClass('tabs__nav-item'); + const classPrefix = usePrefixClass(); + const { STATUS, SIZE } = useCommonClassName(); return { + SIZE, + STATUS, + COMPONENT_NAME, itemRef, + classPrefix, }; }, computed: { navItemClass(): {} { return { - [`${prefix}-tabs__nav-item`]: true, - [`${prefix}-tabs__nav--card`]: this.theme === 'card', - [`${prefix}-is-disabled`]: this.disabled, - [`${prefix}-is-active`]: this.active, - [`${prefix}-is-left`]: this.placement === 'left', - [`${prefix}-is-right`]: this.placement === 'right', - [`${prefix}-size-m`]: this.size === 'medium', - [`${prefix}-size-l`]: this.size === 'large', + [this.COMPONENT_NAME]: true, + [`${this.classPrefix}-tabs__nav--card`]: this.theme === 'card', + [this.STATUS.disabled]: this.disabled, + [this.STATUS.active]: this.active, + [`${this.classPrefix}-is-left`]: this.placement === 'left', + [`${this.classPrefix}-is-right`]: this.placement === 'right', + [this.SIZE.medium]: this.size === 'medium', + [this.SIZE.large]: this.size === 'large', }; }, }, @@ -64,7 +72,7 @@ export default defineComponent({ renderCardItem() { return (
            - {this.label} + {this.label} {this.removable && !this.disabled ? : null}
            ); @@ -74,15 +82,15 @@ export default defineComponent({
            - {this.label} + {this.label}
            ); diff --git a/src/tabs/tab-nav.tsx b/src/tabs/tab-nav.tsx index 5534ab6fb0..40b454f643 100644 --- a/src/tabs/tab-nav.tsx +++ b/src/tabs/tab-nav.tsx @@ -1,13 +1,13 @@ import { defineComponent, Transition } from 'vue'; import debounce from 'lodash/debounce'; import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, AddIcon } from 'tdesign-icons-vue-next'; -import { prefix } from '../config'; import TTabPanel from './tab-panel'; import TTabNavItem from './tab-nav-item'; import { emitEvent } from '../utils/event'; import { firstUpperCase } from '../utils/helper'; import { TdTabsProps, TdTabPanelProps as TabPanelProps } from './type'; import tabProps from './props'; +import { usePrefixClass, useCommonClassName } from '../config-provider'; const getDomWidth = (dom: HTMLElement): number => dom?.offsetWidth || 0; @@ -64,6 +64,17 @@ export default defineComponent({ disabled: tabProps.disabled, addable: tabProps.addable, }, + setup() { + const COMPONENT_NAME = usePrefixClass('tabs'); + const classPrefix = usePrefixClass(); + const { STATUS, SIZE } = useCommonClassName(); + return { + classPrefix, + STATUS, + SIZE, + COMPONENT_NAME, + }; + }, data() { return { scrollLeft: 0, @@ -113,52 +124,52 @@ export default defineComponent({ }, iconBaseClass(): { [key: string]: boolean } { return { - [`${prefix}-tabs__btn`]: true, - [`${prefix}-size-m`]: this.size === 'medium', - [`${prefix}-size-l`]: this.size === 'large', + [`${this.COMPONENT_NAME}__btn`]: true, + [this.SIZE.medium]: this.size === 'medium', + [this.SIZE.large]: this.size === 'large', }; }, leftIconClass(): { [key: string]: boolean } { return { - [`${prefix}-tabs__btn--left`]: true, + [`${this.COMPONENT_NAME}__btn--left`]: true, ...this.iconBaseClass, }; }, rightIconClass(): { [key: string]: boolean } { return { - [`${prefix}-tabs__btn--right`]: true, + [`${this.COMPONENT_NAME}__btn--right`]: true, ...this.iconBaseClass, }; }, addIconClass(): { [key: string]: boolean } { return { - [`${prefix}-tabs__add-btn`]: true, + [`${this.COMPONENT_NAME}__add-btn`]: true, ...this.iconBaseClass, }; }, navContainerClass(): { [key: string]: boolean } { return { - [`${prefix}-tabs__nav-container`]: true, - [`${prefix}-tabs__nav--card`]: this.theme === 'card', - [`${prefix}-is-${this.placement}`]: true, - [`${prefix}-is-addable`]: this.theme === 'card' && this.addable, + [`${this.COMPONENT_NAME}__nav-container`]: true, + [`${this.COMPONENT_NAME}__nav--card`]: this.theme === 'card', + [`${this.classPrefix}-is-${this.placement}`]: true, + [`${this.classPrefix}-is-addable`]: this.theme === 'card' && this.addable, }; }, navScrollContainerClass(): { [key: string]: boolean } { return { - [`${prefix}-tabs__nav-scroll`]: true, - [`${prefix}-is-scrollable`]: this.canToLeft || this.canToRight, + [`${this.COMPONENT_NAME}__nav-scroll`]: true, + [`${this.classPrefix}-is-scrollable`]: this.canToLeft || this.canToRight, }; }, navsWrapClass(): Array { return [ - `${prefix}-tabs__nav-wrap`, - `${prefix}-is-smooth`, - { [`${prefix}-is-vertical`]: this.placement === 'left' || this.placement === 'right' }, + `${this.COMPONENT_NAME}__nav-wrap`, + `${this.classPrefix}-is-smooth`, + { [`${this.classPrefix}-is-vertical`]: this.placement === 'left' || this.placement === 'right' }, ]; }, navBarClass(): Array { - return [`${prefix}-tabs__bar`, `${prefix}-is-${this.placement}`]; + return [`${this.COMPONENT_NAME}__bar`, `${this.classPrefix}-is-${this.placement}`]; }, navsContainerStyle(): object { return this.addable ? { 'min-height': '48px' } : null; @@ -402,7 +413,10 @@ export default defineComponent({ renderArrows() { return [ -
            +
            {this.canToLeft ? (
            @@ -411,7 +425,10 @@ export default defineComponent({ ) : null}
            , -
            +
            {this.canToRight ? (
            @@ -447,7 +464,7 @@ export default defineComponent({ render() { return ( -
            +
            {this.renderArrows()} {this.renderNavs()}
            diff --git a/src/tabs/tab-panel.tsx b/src/tabs/tab-panel.tsx index 1510de2039..d2f10de209 100644 --- a/src/tabs/tab-panel.tsx +++ b/src/tabs/tab-panel.tsx @@ -1,13 +1,18 @@ -import { defineComponent, h, VNodeChild, getCurrentInstance } from 'vue'; -import { prefix } from '../config'; +import { defineComponent, getCurrentInstance } from 'vue'; import props from './tab-panel-props'; import { renderContent } from '../utils/render-tnode'; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ name: 'TTabPanel', props: { ...props }, - + setup() { + const COMPONENT_NAME = usePrefixClass('tab-panel'); + return { + COMPONENT_NAME, + }; + }, computed: { active(): boolean { const { value } = this.$parent as any; @@ -20,7 +25,7 @@ export default defineComponent({ const { destroyOnHide, active } = (instance as any).ctx; if (destroyOnHide && !active) return null; return ( -
            +
            {renderContent(this, 'default', 'panel')}
            ); diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx index 2685ce0ba5..8d47e8413f 100644 --- a/src/tabs/tabs.tsx +++ b/src/tabs/tabs.tsx @@ -1,16 +1,14 @@ import { ComponentPublicInstance, defineComponent, VNode } from 'vue'; -import { prefix } from '../config'; import TTabPanel from './tab-panel'; import TTabNav from './tab-nav'; import { TabValue, TdTabsProps } from './type'; import props from './props'; import { emitEvent } from '../utils/event'; import { renderTNodeJSX } from '../utils/render-tnode'; - -const name = `${prefix}-tabs`; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ - name, + name: 'TTabs', components: { TTabPanel, @@ -22,13 +20,21 @@ export default defineComponent({ }, emits: ['change', 'add', 'remove', 'update:value'], + + setup() { + const COMPONENT_NAME = usePrefixClass('tabs'); + const classPrefix = usePrefixClass(); + return { + classPrefix, + COMPONENT_NAME, + }; + }, data() { return { panels: [] as Array>, listPanels: [], }; }, - methods: { onAddTab(e: MouseEvent) { emitEvent>(this, 'add', { e }); @@ -84,8 +90,8 @@ export default defineComponent({ return (
            @@ -98,7 +104,7 @@ export default defineComponent({ return this.list.map((item) => ); } if (panels && panels.length) { - return
            {panels}
            ; + return
            {panels}
            ; } console.warn('Tdesign error: list or slots is empty'); }, @@ -106,7 +112,7 @@ export default defineComponent({ render() { return ( -
            +
            {this.placement !== 'bottom' ? [this.renderHeader(), this.renderContent()] : [this.renderContent(), this.renderHeader()]} diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx index 3f9eb36463..8444ff2d78 100644 --- a/src/tag-input/tag-input.tsx +++ b/src/tag-input/tag-input.tsx @@ -5,17 +5,21 @@ import TInput, { InputValue } from '../input'; import { TdTagInputProps } from './type'; import props from './props'; -import { prefix } from '../config'; import { renderTNodeJSX } from '../utils/render-tnode'; +import { usePrefixClass } from '../config-provider'; import useTagScroll from './useTagScroll'; import useTagList from './useTagList'; import useHover from './useHover'; import useDefault from '../hooks/useDefaultValue'; -const NAME_CLASS = `${prefix}-tag-input`; -const CLEAR_CLASS = `${prefix}-tag-input__suffix-clear`; -const BREAK_LINE_CLASS = `${prefix}-tag-input--break-line`; +const useCOmponentClassName = () => { + return { + NAME_CLASS: usePrefixClass('tag-input'), + CLEAR_CLASS: usePrefixClass('tag-input__suffix-clear'), + BREAK_LINE_CLASS: usePrefixClass('tag-input--break-line'), + }; +}; export default defineComponent({ name: 'TTagInput', @@ -23,6 +27,8 @@ export default defineComponent({ props: { ...props }, setup(props: TdTagInputProps, context) { + const { NAME_CLASS, CLEAR_CLASS, BREAK_LINE_CLASS } = useCOmponentClassName(); + const { inputValue } = toRefs(props); const [tInputValue, setTInputValue] = useDefault( inputValue, @@ -39,16 +45,13 @@ export default defineComponent({ }); const { scrollToRight, onWheel, scrollToRightOnEnter, scrollToLeftOnLeave, tagInputRef } = useTagScroll(props); // handle tag add and remove - const { tagValue, onInnerEnter, onInputBackspaceKeyUp, clearAll, renderLabel, onClose } = useTagList( - props, - context, - ); + const { tagValue, onInnerEnter, onInputBackspaceKeyUp, clearAll, renderLabel, onClose } = useTagList(props); const classes = computed(() => { return [ - NAME_CLASS, + NAME_CLASS.value, { - [BREAK_LINE_CLASS]: excessTagsDisplayType.value === 'break-line', + [BREAK_LINE_CLASS.value]: excessTagsDisplayType.value === 'break-line', }, ]; }); @@ -84,6 +87,7 @@ export default defineComponent({ }; return { + CLEAR_CLASS, tagValue, tInputValue, isHover, @@ -109,7 +113,7 @@ export default defineComponent({ render() { const suffixIconNode = this.showClearIcon ? ( - + ) : ( renderTNodeJSX(this, 'suffixIcon') ); diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx index fe56049826..4c471ec065 100644 --- a/src/tag-input/useTagList.tsx +++ b/src/tag-input/useTagList.tsx @@ -1,16 +1,17 @@ -import { ref, SetupContext, toRefs } from 'vue'; +import { ref, toRefs } from 'vue'; import { TagInputValue, TdTagInputProps, TagInputChangeContext } from './type'; import { InputValue } from '../input'; import Tag from '../tag'; import useVModel from '../hooks/useVModel'; -import { prefix } from '../config'; +import { usePrefixClass } from '../config-provider'; import { useTNodeJSX } from '../hooks/tnode'; export type ChangeParams = [TagInputChangeContext]; // handle tag add and remove -export default function useTagList(props: TdTagInputProps, context: SetupContext) { +export default function useTagList(props: TdTagInputProps) { const renderTNode = useTNodeJSX(); + const classPrefix = usePrefixClass(); const { value, modelValue, onRemove, max, minCollapsedNum, size, disabled, readonly, tagProps } = toRefs(props); // handle controlled property and uncontrolled property const [tagValue, setTagValue] = useVModel(value, modelValue, props.defaultValue || [], props.onChange); @@ -82,7 +83,7 @@ export default function useTagList(props: TdTagInputProps, context: SetupContext }); if (![null, undefined, ''].includes(label)) { list.unshift( -
            +
            {label}
            , ); diff --git a/src/tag/check-tag.tsx b/src/tag/check-tag.tsx index f491aaa154..1faeaf2d8b 100644 --- a/src/tag/check-tag.tsx +++ b/src/tag/check-tag.tsx @@ -2,30 +2,27 @@ import { defineComponent, computed, toRefs } from 'vue'; import props from './check-tag-props'; import { renderContent } from '../utils/render-tnode'; import CLASSNAMES from '../utils/classnames'; -import { useConfig } from '../config-provider'; +import { usePrefixClass } from '../config-provider'; import useVModel from '../hooks/useVModel'; export default defineComponent({ name: 'TCheckTag', props, - setup(props, context) { - const { classPrefix: prefix } = useConfig('tag'); - const name = computed(() => { - return `${prefix.value}-tag`; - }); + setup(props) { + const COMPONENT_NAME = usePrefixClass('tag'); const { checked, modelValue } = toRefs(props); const [innerChecked, setInnerChecked] = useVModel(checked, modelValue, props.defaultChecked, props.onChange); const tagClass = computed(() => { return [ - `${name.value}`, - `${name.value}--check`, - `${name.value}--default`, + `${COMPONENT_NAME.value}`, + `${COMPONENT_NAME.value}--check`, + `${COMPONENT_NAME.value}--default`, CLASSNAMES.SIZE[props.size], { - [`${name.value}--checked`]: !props.disabled && innerChecked.value, - [`${name.value}--disabled`]: props.disabled, + [`${COMPONENT_NAME.value}--checked`]: !props.disabled && innerChecked.value, + [`${COMPONENT_NAME.value}--disabled`]: props.disabled, }, ]; }); diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx index 98443580d5..5196b281fe 100644 --- a/src/tag/tag.tsx +++ b/src/tag/tag.tsx @@ -1,6 +1,6 @@ import { computed, defineComponent, h, VNode } from 'vue'; import { CloseIcon } from 'tdesign-icons-vue-next'; -import { useConfig } from '../config-provider'; +import { useConfig, usePrefixClass } from '../config-provider'; import CLASSNAMES from '../utils/classnames'; import props from './props'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; @@ -9,24 +9,21 @@ export default defineComponent({ name: 'TTag', props, setup(props) { - const { global: tagGlobalConfig, classPrefix: prefix } = useConfig('tag'); - - const name = computed(() => { - return `${prefix.value}-tag`; - }); + const { global: tagGlobalConfig } = useConfig('tag'); + const COMPONENT_NAME = usePrefixClass('tag'); const tagClass = computed(() => { return [ - `${name.value}`, - `${name.value}--${props.theme}`, - `${name.value}--${props.variant}`, + `${COMPONENT_NAME.value}`, + `${COMPONENT_NAME.value}--${props.theme}`, + `${COMPONENT_NAME.value}--${props.variant}`, { - [`${name.value}--ellipsis`]: props.maxWidth, - [`${name.value}--close`]: props.closable, - [`${name.value}--disabled`]: props.disabled, + [`${COMPONENT_NAME.value}--ellipsis`]: props.maxWidth, + [`${COMPONENT_NAME.value}--close`]: props.closable, + [`${COMPONENT_NAME.value}--disabled`]: props.disabled, }, CLASSNAMES.SIZE[props.size], - props.shape !== 'square' && `${name.value}--${props.shape}`, + props.shape !== 'square' && `${COMPONENT_NAME.value}--${props.shape}`, ]; }); const tagStyle = computed>(() => { @@ -39,7 +36,7 @@ export default defineComponent({ const getCloseIcon = () => { if (!props.closable) return null; - const iconClassName = `${name.value}__icon-close`; + const iconClassName = `${COMPONENT_NAME.value}__icon-close`; if (tagGlobalConfig.value.closeIcon) { return h(tagGlobalConfig.value.closeIcon(h) as VNode, { class: iconClassName }); } @@ -47,7 +44,7 @@ export default defineComponent({ }; return { - name, + COMPONENT_NAME, tagClass, tagStyle, getCloseIcon, @@ -66,7 +63,7 @@ export default defineComponent({ {icon} {this.maxWidth ? ( - + {tagContent} ) : ( diff --git a/src/time-picker/constant.ts b/src/time-picker/constant.ts index 5339bf614c..c5ba901a17 100644 --- a/src/time-picker/constant.ts +++ b/src/time-picker/constant.ts @@ -1,7 +1,3 @@ -import { prefix } from '../config'; - -export const COMPONENT_NAME = `${prefix}-time-picker`; - export enum EPickerCols { hour = 'hour', minute = 'minute', diff --git a/src/time-picker/input-items.tsx b/src/time-picker/input-items.tsx index 6267eca7f2..a7aba2005c 100644 --- a/src/time-picker/input-items.tsx +++ b/src/time-picker/input-items.tsx @@ -4,16 +4,13 @@ import mixins from '../utils/mixins'; import getConfigReceiverMixins, { TimePickerConfig } from '../config-provider/config-receiver'; import { emitEvent } from '../utils/event'; -import { COMPONENT_NAME, amFormat, KeyboardDirection, EMPTY_VALUE, MERIDIEM_LIST } from './constant'; +import { amFormat, KeyboardDirection, EMPTY_VALUE, MERIDIEM_LIST } from './constant'; -import { prefix } from '../config'; - -const name = `${prefix}-time-picker-input-items`; // t-time-picker-input-items +import { usePrefixClass } from '../config-provider'; export default defineComponent({ ...mixins(getConfigReceiverMixins('timePicker')), - name, - + name: 'TTimePickerInputItems', props: { // 格式化标准 format: { @@ -44,6 +41,13 @@ export default defineComponent({ emits: ['change', 'blurDefault', 'focusDefault', 'toggleMeridiem'], + setup() { + const COMPONENT_NAME = usePrefixClass('time-picker'); + return { + COMPONENT_NAME, + }; + }, + computed: { displayTimeList(): Array | Record { return this.isRangePicker ? this.dayjs : [this.dayjs]; @@ -190,12 +194,12 @@ export default defineComponent({ } const isEmptyVal = this.displayTimeList.every((date: InputTime) => isEmptyDayjs(date)); if (isEmptyVal) { - return {placeholder}; + return {placeholder}; } const itemClasses = disabled - ? [`${COMPONENT_NAME}__input-item`, `${COMPONENT_NAME}__input-item-disabled`] - : [`${COMPONENT_NAME}__input-item`]; - const inputClass = `${COMPONENT_NAME}__input-item-input`; + ? [`${this.COMPONENT_NAME}__input-item`, `${this.COMPONENT_NAME}__input-item-disabled`] + : [`${this.COMPONENT_NAME}__input-item`]; + const inputClass = `${this.COMPONENT_NAME}__input-item-input`; const render: any = []; this.displayTimeList.forEach((inputTime: InputTime | undefined, index: number) => { @@ -274,7 +278,7 @@ export default defineComponent({ }, render() { - const classes = [`${COMPONENT_NAME}__input`]; + const classes = [`${this.COMPONENT_NAME}__input`]; return
            {this.switchRenderComponent()}
            ; }, }); diff --git a/src/time-picker/panel/index.tsx b/src/time-picker/panel/index.tsx index 9bb8665e6c..7286b23791 100644 --- a/src/time-picker/panel/index.tsx +++ b/src/time-picker/panel/index.tsx @@ -5,25 +5,34 @@ import customParseFormat from 'dayjs/plugin/customParseFormat'; import mixins from '../../utils/mixins'; import getConfigReceiverMixins, { TimePickerConfig } from '../../config-provider/config-receiver'; import { TimePickerPanelColInstance } from '../interface'; -import { COMPONENT_NAME, EPickerCols } from '../constant'; +import { EPickerCols } from '../constant'; import { panelProps } from './props'; import PanelCol from './panel-col'; import TButton from '../../button/button'; - -const name = `${COMPONENT_NAME}__panel`; +import { usePrefixClass, useCommonClassName } from '../../config-provider'; dayjs.extend(customParseFormat); export default defineComponent({ ...mixins(getConfigReceiverMixins('timePicker')), - name, + name: 'TimePickerPanel', components: { PanelCol, TButton, }, props: panelProps(), - emits: ['sure', 'now-action', 'time-pick'], + + setup() { + const COMPONENT_NAME = usePrefixClass('time-picker'); + const COMPONENT_NAME_PANEL = usePrefixClass('time-picker__panel'); + const { STATUS } = useCommonClassName(); + return { + COMPONENT_NAME_PANEL, + COMPONENT_NAME, + STATUS, + }; + }, data() { return { panel: null, @@ -32,10 +41,10 @@ export default defineComponent({ }, computed: { sectionComponentName() { - return `${name}-section`; + return `${this.COMPONENT_NAME_PANEL}-section`; }, classNames() { - return this.rangePicker ? [name, this.sectionComponentName] : [name]; + return this.rangePicker ? [this.COMPONENT_NAME_PANEL, this.sectionComponentName] : [this.COMPONENT_NAME_PANEL]; }, colValues() { return this.value.map((el) => el || dayjs()); diff --git a/src/time-picker/panel/panel-col.tsx b/src/time-picker/panel/panel-col.tsx index 2aa1f22a5f..3918b2ae7a 100644 --- a/src/time-picker/panel/panel-col.tsx +++ b/src/time-picker/panel/panel-col.tsx @@ -4,8 +4,8 @@ import dayjs from 'dayjs'; import customParseFormat from 'dayjs/plugin/customParseFormat'; import { panelColProps } from './props'; -import { COMPONENT_NAME, EPickerCols } from '../constant'; -import { useCommonClassName } from '../../config-provider'; +import { EPickerCols } from '../constant'; +import { usePrefixClass, useCommonClassName } from '../../config-provider'; dayjs.extend(customParseFormat); @@ -15,8 +15,10 @@ export default defineComponent({ emits: ['time-pick'], setup() { + const COMPONENT_NAME = usePrefixClass('time-picker'); const { STATUS } = useCommonClassName(); return { + COMPONENT_NAME, STATUS, }; }, @@ -40,7 +42,7 @@ export default defineComponent({ return [Number(this.value.get('hour')), Number(this.value.get('minute')), Number(this.value.get('second'))]; }, timeItemMargin() { - const maskDom = this.$el?.querySelector?.(`.${COMPONENT_NAME}__panel-body-active-mask > div`); + const maskDom = this.$el?.querySelector?.(`.${this.COMPONENT_NAME}__panel-body-active-mask > div`); return maskDom && parseInt(getComputedStyle(maskDom).margin, 10); }, }, @@ -149,7 +151,7 @@ export default defineComponent({ this.splitValue[col] = el; } const classNames = [ - `${COMPONENT_NAME}__panel-body-scroll-item`, + `${this.COMPONENT_NAME}__panel-body-scroll-item`, { [this.STATUS.disabled]: !this.timeItemCanUsed(col, el), [this.STATUS.current]: isCurrent, @@ -200,7 +202,7 @@ export default defineComponent({ renderScroller(col: EPickerCols) { return (
              this.handleScroll(col), 50)} > @@ -267,7 +269,7 @@ export default defineComponent({ }, renderActiveMask() { return ( -
              +
              {this.cols.map((_col, idx) => (
              ))} @@ -277,7 +279,7 @@ export default defineComponent({ }, render() { return ( -
              +
              {this.renderActiveMask()} {this.renderScrollers()}
              diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx index cb6b278424..cbe405d0a3 100755 --- a/src/time-picker/time-picker.tsx +++ b/src/time-picker/time-picker.tsx @@ -8,8 +8,6 @@ import mixins from '../utils/mixins'; import getConfigReceiverMixins, { TimePickerConfig } from '../config-provider/config-receiver'; import { TimePickerPanelInstance, TimeInputEvent, InputTime, TimeInputType } from './interface'; import TPopup, { PopupVisibleChangeContext } from '../popup'; -import { prefix } from '../config'; -import CLASSNAMES from '../utils/classnames'; import PickerPanel from './panel'; import TInput from '../input'; import { emitEvent } from '../utils/event'; @@ -18,19 +16,17 @@ import InputItems from './input-items'; import props from './props'; -import { EPickerCols, EMPTY_VALUE, COMPONENT_NAME, amFormat, pmFormat, AM } from './constant'; +import { EPickerCols, EMPTY_VALUE, amFormat, pmFormat, AM } from './constant'; // hooks import { useFormDisabled } from '../form/hooks'; - -const name = `${prefix}-time-picker`; +import { usePrefixClass, useCommonClassName } from '../config-provider'; dayjs.extend(customParseFormat); export default defineComponent({ ...mixins(getConfigReceiverMixins('timePicker')), name: 'TTimePicker', - components: { PickerPanel, TimeIcon, @@ -45,7 +41,12 @@ export default defineComponent({ setup() { const disabled = useFormDisabled(); + const COMPONENT_NAME = usePrefixClass('time-picker'); + const { SIZE, STATUS } = useCommonClassName(); return { + SIZE, + STATUS, + COMPONENT_NAME, disabled, }; }, @@ -84,7 +85,7 @@ export default defineComponent({ const isDefault = (this.inputTime as any).some( (item: InputTime) => !!item.hour && !!item.minute && !!item.second, ); - return isDefault ? '' : `${name}__group-text`; + return isDefault ? '' : `${this.COMPONENT_NAME}__group-text`; }, }, @@ -300,9 +301,9 @@ export default defineComponent({ }, renderInput() { const classes = [ - `${name}__group`, + `${this.COMPONENT_NAME}__group`, { - [`${prefix}-is-focused`]: this.isShowPanel, + [this.STATUS.focused]: this.isShowPanel, }, ]; @@ -319,7 +320,7 @@ export default defineComponent({ readonly placeholder=" " value={this.time ? ' ' : undefined} - class={this.isShowPanel ? `${prefix}-is-focused` : ''} + class={this.isShowPanel ? this.STATUS.focused : ''} v-slots={slots} > ( @@ -377,7 +378,7 @@ export default defineComponent({ trigger="click" disabled={disabled} visible={this.isShowPanel} - overlayClassName={`${COMPONENT_NAME}__panel-container`} + overlayClassName={`${this.COMPONENT_NAME}__panel-container`} onVisibleChange={this.panelVisibleChange} expandAnimation={true} v-slots={slots} diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx index 8aee97d79c..bc61e645a8 100644 --- a/src/time-picker/time-range-picker.tsx +++ b/src/time-picker/time-range-picker.tsx @@ -9,23 +9,21 @@ import mixins from '../utils/mixins'; import getConfigReceiverMixins, { TimePickerConfig } from '../config-provider/config-receiver'; import { TimeInputEvent, InputTime, TimePickerPanelInstance } from './interface'; import TPopup, { PopupVisibleChangeContext } from '../popup'; -import { prefix } from '../config'; -import CLASSNAMES from '../utils/classnames'; import PickerPanel from './panel'; import TInput from '../input'; import InputItems from './input-items'; import props from './time-range-picker-props'; import { emitEvent } from '../utils/event'; -import { EPickerCols, TIME_PICKER_EMPTY, EMPTY_VALUE, COMPONENT_NAME, amFormat, pmFormat, AM } from './constant'; +import { EPickerCols, TIME_PICKER_EMPTY, EMPTY_VALUE, amFormat, pmFormat, AM } from './constant'; -const name = `${prefix}-time-picker`; +import { usePrefixClass, useCommonClassName } from '../config-provider'; dayjs.extend(customParseFormat); export default defineComponent({ ...mixins(getConfigReceiverMixins('timePicker')), - name: `${prefix}-time-range-picker`, + name: 'TTimeRangePicker', components: { PickerPanel, @@ -38,6 +36,15 @@ export default defineComponent({ props: { ...props }, emits: ['input', 'click', 'blur', 'focus', 'change', 'close', 'open'], + setup() { + const COMPONENT_NAME = usePrefixClass('time-picker'); + const { SIZE, STATUS } = useCommonClassName(); + return { + STATUS, + SIZE, + COMPONENT_NAME, + }; + }, data() { // 初始化数据 return { @@ -61,7 +68,7 @@ export default defineComponent({ const isDefault = (this.inputTime as any).some( (item: InputTime) => !!item.hour && !!item.minute && !!item.second, ); - return isDefault ? '' : `${name}__group-text`; + return isDefault ? '' : `${this.COMPONENT_NAME}__group-text`; }, }, @@ -252,9 +259,9 @@ export default defineComponent({ }, renderInput() { const classes = [ - `${name}__group`, + `${this.COMPONENT_NAME}__group`, { - [`${prefix}-is-focused`]: this.isShowPanel, + [this.STATUS.focused]: this.isShowPanel, }, ]; return ( @@ -294,7 +301,7 @@ export default defineComponent({ $props: { size, disabled }, } = this; // 样式类名 - const classes = [name, CLASSNAMES.SIZE[size]]; + const classes = [this.COMPONENT_NAME, this.SIZE[size]]; const slots = { content: () => ( @@ -322,7 +329,7 @@ export default defineComponent({ trigger="click" disabled={disabled} visible={this.isShowPanel} - overlayClassName={`${COMPONENT_NAME}__panel-container`} + overlayClassName={`${this.COMPONENT_NAME}__panel-container`} onVisibleChange={this.panelVisibleChange} expandAnimation={true} v-slots={slots} diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx index 9000959eb5..4af7e41755 100644 --- a/src/tooltip/tooltip.tsx +++ b/src/tooltip/tooltip.tsx @@ -1,11 +1,11 @@ import { defineComponent } from 'vue'; -import { prefix } from '../config'; import props from './props'; import popupProps from '../popup/props'; import Popup, { PopupProps, PopupVisibleChangeContext } from '../popup'; import { ClassName } from '../common'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; import { emitEvent } from '../utils/event'; +import { usePrefixClass } from '../config-provider'; export default defineComponent({ name: 'TTooltip', @@ -15,6 +15,12 @@ export default defineComponent({ ...props, }, emits: ['visible-change'], + setup() { + const classPrefix = usePrefixClass(); + return { + classPrefix, + }; + }, data() { return { timer: null, @@ -23,7 +29,11 @@ export default defineComponent({ }, computed: { tooltipOverlayClassName(): ClassName { - return [`${prefix}-tooltip`, { [`${prefix}-tooltip--${this.theme}`]: this.theme }, this.overlayClassName]; + return [ + `${this.classPrefix}-tooltip`, + { [`${this.classPrefix}-tooltip--${this.theme}`]: this.theme }, + this.overlayClassName, + ]; }, }, watch: { diff --git a/src/transfer/components/transfer-list.tsx b/src/transfer/components/transfer-list.tsx index 8f6279322b..3c0b0b4cbb 100644 --- a/src/transfer/components/transfer-list.tsx +++ b/src/transfer/components/transfer-list.tsx @@ -1,5 +1,4 @@ -import { defineComponent, VNode, PropType, ref, onMounted } from 'vue'; -import { prefix } from '../../config'; +import { defineComponent, VNode, PropType } from 'vue'; import { EmptyType, SearchEvent, @@ -15,6 +14,8 @@ import { getLeefCount, getDataValues } from '../utils'; import Search from './transfer-search'; import { renderTNodeJSXDefault } from '../../utils/render-tnode'; +import { usePrefixClass } from '../../config-provider'; + export default defineComponent({ name: 'TTransferList', components: { @@ -70,6 +71,12 @@ export default defineComponent({ }, }, emits: ['pageChange', 'checkedChange', 'scroll', 'search'], + setup() { + const classPrefix = usePrefixClass(); + return { + classPrefix, + }; + }, data() { return { filterValue: '', // 搜索框输入内容, @@ -188,8 +195,8 @@ export default defineComponent({ value={item.value} needRipple={true} class={[ - `${prefix}-transfer__list-item`, - this.checkedValue.includes(item.value) ? `${prefix}-is-checked` : '', + `${this.classPrefix}-transfer__list-item`, + this.checkedValue.includes(item.value) ? `${this.classPrefix}-is-checked` : '', ]} key={item.key} {...{ props: this.checkboxProps }} @@ -203,7 +210,7 @@ export default defineComponent({ ); return ( -
              +
              {/* {this.$slots.tree ? this.$slots.tree({ data: this.curPageData, @@ -226,7 +233,7 @@ export default defineComponent({ const empty = this.empty || this.t(this.global.empty); const defaultNode: VNode = typeof empty === 'string' ? {empty} : null; return ( -
              +
              {renderTNodeJSXDefault(this, 'empty', { defaultNode, params: { @@ -238,7 +245,9 @@ export default defineComponent({ }, renderFooter() { const defaultNode = - typeof this.footer === 'string' ?
              {this.footer}
              : null; + typeof this.footer === 'string' ? ( +
              {this.footer}
              + ) : null; return renderTNodeJSXDefault(this, 'footer', { defaultNode, params: { @@ -249,8 +258,8 @@ export default defineComponent({ }, render() { return ( -
              -
              +
              +
              {this.checkAll && ( {this.renderTitle()}
              -
              +
              {this.search && ( 0 ? this.renderContent() : this.renderEmpty()}
              {this.pagination && this.pageSize > 0 && this.pageTotal > 0 && ( -
              +
              )} diff --git a/src/transfer/components/transfer-operations.tsx b/src/transfer/components/transfer-operations.tsx index 7459c12b20..89425f1304 100644 --- a/src/transfer/components/transfer-operations.tsx +++ b/src/transfer/components/transfer-operations.tsx @@ -1,8 +1,8 @@ import { defineComponent, createElementVNode, PropType } from 'vue'; import { ChevronRightIcon, ChevronLeftIcon } from 'tdesign-icons-vue-next'; -import { prefix } from '../../config'; import TButton from '../../button'; import { TNode } from '../../common'; +import { usePrefixClass } from '../../config-provider'; export default defineComponent({ name: 'TTransferOperations', @@ -27,6 +27,12 @@ export default defineComponent({ }, }, emits: ['moveToRight', 'moveToLeft'], + setup() { + const classPrefix = usePrefixClass(); + return { + classPrefix, + }; + }, methods: { moveToRight() { this.$emit('moveToRight'); @@ -81,7 +87,7 @@ export default defineComponent({ render(h: any) { const { leftDisabled, rightDisabled } = this.$props; return ( -
              +
              +
              diff --git a/src/transfer/transfer.tsx b/src/transfer/transfer.tsx index 1bb7b18407..e683e555fc 100644 --- a/src/transfer/transfer.tsx +++ b/src/transfer/transfer.tsx @@ -1,6 +1,5 @@ import { defineComponent, VNode } from 'vue'; import pick from 'lodash/pick'; -import { prefix } from '../config'; import TransferList from './components/transfer-list'; import TransferOperations from './components/transfer-operations'; import { @@ -32,6 +31,7 @@ import { TNode } from '../common'; // hooks import { useFormDisabled } from '../form/hooks'; +import { usePrefixClass } from '../config-provider'; const SOURCE = 'source'; const TARGET = 'target'; @@ -63,7 +63,9 @@ export default defineComponent({ ], setup() { const disabled = useFormDisabled(); + const classPrefix = usePrefixClass(); return { + classPrefix, disabled, }; }, @@ -252,11 +254,11 @@ export default defineComponent({ return (
              {this.renderTransferList(SOURCE)} diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index fcaa2a6014..a919d75e34 100644 --- a/src/tree-select/tree-select.tsx +++ b/src/tree-select/tree-select.tsx @@ -20,19 +20,16 @@ import Input, { InputValue } from '../input'; import FakeArrow from '../common-components/fake-arrow'; import { emitEvent } from '../utils/event'; -import CLASSNAMES from '../utils/classnames'; import props from './props'; import { TreeSelectValue } from './type'; import { ClassName, TreeOptionData } from '../common'; -import { prefix } from '../config'; +import { usePrefixClass, useCommonClassName } from '../config-provider'; import { RemoveOptions, NodeOptions } from './interface'; // hooks import { useFormDisabled } from '../form/hooks'; -const name = `${prefix}-tree-select`; - export default defineComponent({ ...mixins(getConfigReceiverMixins('treeSelect')), name: 'TTreeSelect', @@ -45,7 +42,12 @@ export default defineComponent({ emits: ['change', 'clear', 'focus', 'blur', 'remove', 'search'], setup() { const disabled = useFormDisabled(); + const classPrefix = usePrefixClass(); + const { STATUS, SIZE } = useCommonClassName(); return { + SIZE, + STATUS, + classPrefix, disabled, }; }, @@ -74,20 +76,20 @@ export default defineComponent({ computed: { classes(): ClassName { return [ - `${prefix}-select`, - `${prefix}-select-polyfill`, + `${this.classPrefix}-select`, + `${this.classPrefix}-select-polyfill`, { - [CLASSNAMES.STATUS.disabled]: this.disabled, - [CLASSNAMES.STATUS.active]: this.visible, - [CLASSNAMES.SIZE[this.size]]: this.size, - [`${prefix}-has-prefix`]: this.prefixIconSlot, - [`${prefix}-select-selected`]: this.selectedSingle || !isEmpty(this.selectedMultiple), + [this.STATUS.disabled]: this.disabled, + [this.STATUS.active]: this.visible, + [this.SIZE[this.size]]: this.size, + [`${this.classPrefix}-has-prefix`]: this.prefixIconSlot, + [`${this.classPrefix}-select-selected`]: this.selectedSingle || !isEmpty(this.selectedMultiple), }, ]; }, popupClass(): ClassName { const { popupObject } = this; - return `${popupObject.overlayClassName} ${prefix}-select__dropdown narrow-scrollbar`; + return `${popupObject.overlayClassName} ${this.classPrefix}-select__dropdown narrow-scrollbar`; }, isObjectValue(): boolean { return this.valueType === 'object'; @@ -182,7 +184,7 @@ export default defineComponent({ loadingTextSlot(): VNode { const useLocale = !this.loadingText && !this.$slots.loadingText; return useLocale ? ( -
              {this.t(this.global.loadingText)}
              +
              {this.t(this.global.loadingText)}
              ) : ( renderTNodeJSX(this, 'loadingText') ); @@ -190,7 +192,7 @@ export default defineComponent({ emptySlot(): VNode { const useLocale = !this.empty && !this.$slots.empty; return useLocale ? ( -
              {this.t(this.global.empty)}
              +
              {this.t(this.global.empty)}
              ) : ( renderTNodeJSX(this, 'empty') ); @@ -401,7 +403,7 @@ export default defineComponent({ ref="input" v-show={this.showFilter} v-model={this.filterText} - class={`${prefix}-select__input`} + class={`${this.classPrefix}-select__input`} size={this.size} disabled={this.disabled} placeholder={this.filterPlaceholder} @@ -428,7 +430,7 @@ export default defineComponent({ params: { value: this.nodeInfo || { [this.realLabel]: '', [this.realValue]: '' } }, }) ) : ( - + {this.selectedSingle} ); @@ -451,7 +453,7 @@ export default defineComponent({ const slots = { content: () => (
              -

              +

              {this.loadingTextSlot}

              {treeItem} @@ -459,10 +461,10 @@ export default defineComponent({ ), }; return ( -
              +
              (this.isHover = true)} onmouseleave={() => (this.isHover = false)}> - {this.prefixIconSlot && {this.prefixIconSlot[0]}} - + {this.prefixIconSlot && ( + {this.prefixIconSlot[0]} + )} + {this.placeholder || this.global.placeholder}{' '} {tagItem} @@ -484,20 +488,20 @@ export default defineComponent({ {searchInput} {this.showArrow && !this.showLoading && ( )} this.clear(e)} />
              From 9ebe4733fdd91a3dfb3508d6f72b5665cab61485 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Wed, 16 Mar 2022 10:41:44 +0800 Subject: [PATCH 11/12] fix(cascader): fix cascader pagesize controlled --- src/pagination/pagination.tsx | 9 +++++++-- src/pagination/props.ts | 2 +- src/pagination/usePaginationClasses.ts | 9 +++++++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx index 9a3d5ff32d..6147b367ac 100755 --- a/src/pagination/pagination.tsx +++ b/src/pagination/pagination.tsx @@ -37,7 +37,12 @@ export default defineComponent({ const { t, global } = useConfig('pagination'); const COMPONENT_NAME = usePrefixClass('pagination'); - const { pageCount, ...paginationClasses } = usePaginationClasses(props, innerCurrent, COMPONENT_NAME); + const { pageCount, ...paginationClasses } = usePaginationClasses( + props, + innerCurrent, + innerPageSize, + COMPONENT_NAME, + ); const { prevMore, isPrevMoreShow, curPageLeftCount, nextMore, isNextMoreShow, curPageRightCount } = useMoreAction( props, @@ -115,7 +120,7 @@ export default defineComponent({ const pageInfo = { current, previous: prev, - pageSize: props.pageSize, + pageSize: innerPageSize.value, }; if (isTriggerChange !== false) { props.onChange?.(pageInfo); diff --git a/src/pagination/props.ts b/src/pagination/props.ts index a64fa79e7a..3e4c95233a 100644 --- a/src/pagination/props.ts +++ b/src/pagination/props.ts @@ -38,7 +38,7 @@ export default { /** 分页总页数 */ pageSize: { type: Number, - default: 10, + default: undefined, }, /** 分页总页数，非受控属性 */ defaultPageSize: { diff --git a/src/pagination/usePaginationClasses.ts b/src/pagination/usePaginationClasses.ts index caf92e404d..1160b9869f 100644 --- a/src/pagination/usePaginationClasses.ts +++ b/src/pagination/usePaginationClasses.ts @@ -2,9 +2,14 @@ import { computed, Ref } from 'vue'; import CLASSNAMES from '../utils/classnames'; import { TdPaginationProps } from './type'; -export default function usePaginationClasses(props: TdPaginationProps, innerCurrent: Ref, name: Ref) { +export default function usePaginationClasses( + props: TdPaginationProps, + innerCurrent: Ref, + innerPageSize: Ref, + name: Ref, +) { const pageCount = computed(() => { - const c: number = Math.ceil(props.total / props.pageSize); + const c: number = Math.ceil(props.total / innerPageSize.value); return c > 0 ? c : 1; }); From 744f3b45756867390c8d3d68a2e43298d6b66098 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Wed, 16 Mar 2022 11:00:52 +0800 Subject: [PATCH 12/12] test(snap): snap update --- test/ssr/__snapshots__/ssr.test.js.snap | 16 ++++----- .../table/__snapshots__/demo.test.js.snap | 36 +++++++++++++------ 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 865bb0b34e..84efd4cf28 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -38490,8 +38490,8 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct
                -
              • 5 条/页
                • -
              • 10 条/页
                • +
              • 5 条/页
                • +
              • 10 条/页
              • 20 条/页
              • 50 条/页
                • @@ -38508,7 +38508,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct - 10 + 5 @@ -38522,18 +38522,18 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct
                - +
              • 1
                • -
              • 1
              • 2
              • 3
              • 4
              • 5
                • -
              • 6
                • - - +
              • + +
                • +
              • 12
              diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap index ff104efbc0..72de599c32 100644 --- a/test/unit/table/__snapshots__/demo.test.js.snap +++ b/test/unit/table/__snapshots__/demo.test.js.snap @@ -20283,7 +20283,7 @@ exports[`Table Table paginationVue demo works fine 1`] = `
            • @@ -20291,7 +20291,7 @@ exports[`Table Table paginationVue demo works fine 1`] = `
            • @@ -20344,9 +20344,9 @@ exports[`Table Table paginationVue demo works fine 1`] = ` - 10 + 5 - - -
            • 1
              • + +
            • @@ -20419,14 +20418,29 @@ exports[`Table Table paginationVue demo works fine 1`] = ` > 5
              • + +
            • + + + +
            • - 6 + 12
              • - - -