fix(comp:badge): the count should support non-numeric types (#1399)

IDuxFE · Jan 11, 2023 · 5400b29 · 5400b29
1 parent da3905e
commit 5400b29
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/packages/components/badge/__tests__/badge.spec.ts b/packages/components/badge/__tests__/badge.spec.ts
@@ -24,6 +24,12 @@ describe('Badge', () => {
 
     expect(countCurrents[0].text()).toBe('5')
     expect(countCurrents[1].text()).toBe('0')
+
+    // 非 number 情况
+    await wrapper.setProps({ count: 'New' })
+
+    expect(wrapper.find('.ix-badge-count-current').exists()).toBe(false)
+    expect(wrapper.find('.ix-badge-count').text()).toBe('New')
   })
 
   test('count slot work', async () => {

diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx
@@ -7,7 +7,7 @@
 
 import { computed, defineComponent, normalizeClass } from 'vue'
 
-import { convertNumber } from '@idux/cdk/utils'
+import { convertNumber, isNumeric } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
 import BadgeSub from './BadgeSub'
@@ -27,6 +27,11 @@ export default defineComponent({
     const mergedOverflowCount = computed(() =>
       Math.max(0, convertNumber(props.overflowCount ?? config.overflowCount, Number.MAX_VALUE)),
     )
+    // 兼容之前的用法
+    const mergedText = computed(() => {
+      const { count } = props
+      return isNumeric(count) ? undefined : (count as string)
+    })
 
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
@@ -62,6 +67,7 @@ export default defineComponent({
               prefixCls={prefixCls}
               showZero={mergedShowZero.value}
               status={props.status}
+              text={mergedText.value}
               title={props.title}
             />
           )}

diff --git a/packages/components/badge/src/BadgeSub.tsx b/packages/components/badge/src/BadgeSub.tsx
@@ -32,11 +32,13 @@ export default defineComponent({
     })
 
     return () => {
-      const { prefixCls, dot } = props
-      if (dot) {
+      const { prefixCls, dot, text } = props
+      if (dot || text) {
         return (
           <Transition name={`${prefixCls}-sub`} appear>
-            <sup class={classes.value} title={props.title}></sup>
+            <sup class={classes.value} title={props.title}>
+              {text && <span class={`${prefixCls}-sub-text`}>{text}</span>}
+            </sup>
           </Transition>
         )
       }

diff --git a/packages/components/badge/src/types.ts b/packages/components/badge/src/types.ts
@@ -33,5 +33,6 @@ export const badgeSubProps = {
   prefixCls: { type: String, required: true },
   showZero: { type: Boolean, required: true },
   status: { type: String as PropType<'success' | 'info' | 'error' | 'warning'>, required: true },
+  text: { type: String },
   title: { type: String },
 } as const
diff --git a/packages/components/badge/style/index.less b/packages/components/badge/style/index.less
@@ -72,6 +72,7 @@
     border-radius: calc(@badge-count-size / 2);
     box-shadow: 0 0 0 1px @badge-color;
     text-align: center;
+    white-space: nowrap;
 
     &-track {
       position: relative;
@@ -88,7 +89,8 @@
     }
   }
 
-  &-count-multiple {
+  &-count-multiple,
+  &-sub-text {
     padding: 0 4px;
   }