feat(comp:badge): add status prop and support css variable (#1390)

packages/components/badge/__tests__/__snapshots__/badge.spec.ts.snap

@@ -1,45 +1,13 @@
 // Vitest Snapshot v1
 
-exports[`Badge > color work 1`] = `
-"<sup class=\\"ix-badge ix-badge-empty ix-badge-count ix-badge-hide-zero\\" style=\\"background-color: rgb(255, 0, 0);\\">
-  <!---->
-</sup>"
+exports[`Badge > render work 1`] = `
+"<span class=\\"ix-badge ix-badge-error\\"><!----><span class=\\"ix-badge-content\\"><a href=\\"#\\"></a></span>
+<transition-stub name=\\"ix-badge-sub\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\"><sup class=\\"ix-badge-sub ix-badge-count\\" title=\\"9\\"><span class=\\"ix-badge-count-track\\" style=\\"transform: translateY(-900%);\\"><span class=\\"ix-badge-count-unit\\">0</span><span class=\\"ix-badge-count-unit\\">1</span><span class=\\"ix-badge-count-unit\\">2</span><span class=\\"ix-badge-count-unit\\">3</span><span class=\\"ix-badge-count-unit\\">4</span><span class=\\"ix-badge-count-unit\\">5</span><span class=\\"ix-badge-count-unit\\">6</span><span class=\\"ix-badge-count-unit\\">7</span><span class=\\"ix-badge-count-unit\\">8</span><span class=\\"ix-badge-count-unit ix-badge-count-current\\">9</span></span>
+    <!---->
+  </sup></transition-stub></span>"
 `;
 
-exports[`Badge > count slot work 1`] = `"<span class=\\"ix-badge-wrapper\\"><!----><sup class=\\"ix-badge ix-badge-empty ix-badge-slot-count\\"><div class=\\"count-slot\\"></div></sup></span>"`;
-
-exports[`Badge > count work 1`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">10</sup>"`;
-
-exports[`Badge > count work 2`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">50</sup>"`;
-
-exports[`Badge > count work 3`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">1-1</sup>"`;
-
-exports[`Badge > dot work 1`] = `
-"<sup class=\\"ix-badge ix-badge-empty ix-badge-count ix-badge-hide-zero\\">
-  <!---->
-</sup>"
-`;
-
-exports[`Badge > dot work 2`] = `
-"<sup class=\\"ix-badge ix-badge-empty ix-badge-dot\\">
-  <!---->
-</sup>"
-`;
-
-exports[`Badge > overflowCount work 1`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">99+</sup>"`;
-
-exports[`Badge > overflowCount work 2`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">999+</sup>"`;
-
-exports[`Badge > overflowCount work 3`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">999+</sup>"`;
-
-exports[`Badge > overflowCount work 4`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">1000</sup>"`;
-
-exports[`Badge > render work 1`] = `"<span class=\\"ix-badge-wrapper\\"><!----><sup class=\\"ix-badge ix-badge-empty ix-badge-count ix-badge-hide-zero\\"><!----></sup></span>"`;
-
-exports[`Badge > showZero work 1`] = `
-"<sup class=\\"ix-badge ix-badge-empty ix-badge-count ix-badge-hide-zero\\">
-  <!---->
-</sup>"
+exports[`Badge > render work 2`] = `
+"<span class=\\"ix-badge ix-badge-error\\"><!----><!----><transition-stub name=\\"ix-badge-sub\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\"><sup class=\\"ix-badge-sub ix-badge-count\\" title=\\"9\\"><span class=\\"ix-badge-count-track\\" style=\\"transform: translateY(-900%);\\"><span class=\\"ix-badge-count-unit\\">0</span><span class=\\"ix-badge-count-unit\\">1</span><span class=\\"ix-badge-count-unit\\">2</span><span class=\\"ix-badge-count-unit\\">3</span><span class=\\"ix-badge-count-unit\\">4</span><span class=\\"ix-badge-count-unit\\">5</span><span class=\\"ix-badge-count-unit\\">6</span><span class=\\"ix-badge-count-unit\\">7</span><span class=\\"ix-badge-count-unit\\">8</span><span class=\\"ix-badge-count-unit ix-badge-count-current\\">9</span></span>
+<!----></sup></transition-stub></span>"
 `;
-
-exports[`Badge > showZero work 2`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">0</sup>"`;

packages/components/badge/__tests__/badge.spec.ts

@@ -8,82 +8,96 @@ import { BadgeProps } from '../src/types'
 describe('Badge', () => {
   const BadgeMount = (options?: MountingOptions<Partial<BadgeProps>>) => mount(IxBadge, { ...options })
 
-  renderWork(IxBadge)
+  renderWork(IxBadge, { props: { count: 9 }, slots: { default: '<a href="#"></a>' } })
+  renderWork(IxBadge, { props: { count: 9 } })
 
-  // 基本功能测试
   test('count work', async () => {
     const wrapper = BadgeMount({ props: { count: 10 } })
-    const badge = wrapper.find('.ix-badge')
-    expect(badge.text()).toBe('10')
-    expect(badge.html()).toMatchSnapshot()
+
+    let countCurrents = wrapper.findAll('.ix-badge-count-current')
+
+    expect(countCurrents[0].text()).toBe('1')
+    expect(countCurrents[1].text()).toBe('0')
+
     await wrapper.setProps({ count: '50' })
-    expect(badge.text()).toBe('50')
-    expect(badge.html()).toMatchSnapshot()
-    await wrapper.setProps({ count: '1-1' })
-    expect(badge.text()).toBe('1-1')
-    expect(badge.html()).toMatchSnapshot()
+    countCurrents = wrapper.findAll('.ix-badge-count-current')
+
+    expect(countCurrents[0].text()).toBe('5')
+    expect(countCurrents[1].text()).toBe('0')
   })
 
-  // 是否显示0
-  test('showZero work', async () => {
-    const wrapper = BadgeMount({ props: { count: 0 } })
-    const badge = wrapper.find('.ix-badge')
-    expect(badge.classes()).toContain('ix-badge-hide-zero')
-    expect(badge.text()).toBe('')
-    expect(badge.html()).toMatchSnapshot()
-    await wrapper.setProps({ showZero: true })
-    expect(badge.classes()).not.toContain('ix-badge-hide-zero')
-    expect(badge.text()).toBe('0')
-    expect(badge.html()).toMatchSnapshot()
+  test('count slot work', async () => {
+    const wrapper = BadgeMount({ slots: { count: '<div class="count-slot"></div>' } })
+    expect(wrapper.find('.count-slot').exists()).toBe(true)
+  })
+
+  test('dot work', async () => {
+    const wrapper = BadgeMount({ props: { dot: true } })
+
+    expect(wrapper.find('.ix-badge-dot').exists()).toBe(true)
+    expect(wrapper.find('.ix-badge-count').exists()).toBe(false)
+
+    await wrapper.setProps({ dot: false })
+
+    expect(wrapper.find('.ix-badge-dot').exists()).toBe(false)
+    expect(wrapper.find('.ix-badge-count').exists()).toBe(false)
+
+    await wrapper.setProps({ count: 9 })
+
+    expect(wrapper.find('.ix-badge-dot').exists()).toBe(false)
+    expect(wrapper.find('.ix-badge-count').exists()).toBe(true)
   })
 
-  // 超出的数据显示
   test('overflowCount work', async () => {
     const wrapper = BadgeMount({ props: { count: 100 } })
-    const badge = wrapper.find('.ix-badge')
-    expect(badge.text()).toBe('99+')
-    expect(badge.html()).toMatchSnapshot()
-    await wrapper.setProps({ count: '1000', overflowCount: 999 })
-    expect(badge.text()).toBe('999+')
-    expect(badge.html()).toMatchSnapshot()
-
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    await wrapper.setProps({ count: '1000', overflowCount: '999' })
-    expect(badge.text()).toBe('999+')
-    expect(badge.html()).toMatchSnapshot()
-    await wrapper.setProps({ count: '1000', overflowCount: 'xxx' })
-    expect(badge.text()).toBe('1000')
-    expect(badge.html()).toMatchSnapshot()
-
-    expect(warn).toBeCalledTimes(2)
+
+    expect(wrapper.find('.ix-badge-count').text()).toBe('99+')
+
+    await wrapper.setProps({ count: 1000, overflowCount: 999 })
+
+    expect(wrapper.find('.ix-badge-count').text()).toBe('999+')
+
+    await wrapper.setProps({ count: 1000, overflowCount: '888' })
+
+    expect(wrapper.find('.ix-badge-count').text()).toBe('888+')
+
+    await wrapper.setProps({ count: 1000, overflowCount: 'xxx' })
+
+    const countCurrents = wrapper.findAll('.ix-badge-count-current')
+
+    expect(countCurrents[0].text()).toBe('1')
+    expect(countCurrents[1].text()).toBe('0')
+    expect(countCurrents[2].text()).toBe('0')
   })
 
-  // 圆点徽标呈现
-  test('dot work', async () => {
-    const wrapper = BadgeMount()
-    const badge = wrapper.find('.ix-badge')
-    expect(badge.classes()).not.toContain('ix-badge-dot')
-    expect(badge.html()).toMatchSnapshot()
-    await wrapper.setProps({ dot: true })
-    expect(badge.classes()).toContain('ix-badge-dot')
-    expect(badge.text()).toBe('')
-    expect(badge.html()).toMatchSnapshot()
+  test('showZero work', async () => {
+    const wrapper = BadgeMount({ props: { count: 0 } })
+
+    expect(wrapper.find('.ix-badge-count').exists()).toBe(false)
+
+    await wrapper.setProps({ showZero: true })
+
+    expect(wrapper.find('.ix-badge-count').exists()).toBe(true)
+    expect(wrapper.find('.ix-badge-count-current').text()).toBe('0')
   })
 
-  // 设置颜色属性
-  test('color work', async () => {
-    const wrapper = BadgeMount({ props: { color: '#f00' } })
-    const badge = wrapper.find('.ix-badge')
-    expect(badge.attributes().style).toContain('background-color: rgb(255, 0, 0)')
-    expect(badge.html()).toMatchSnapshot()
+  test('status work', async () => {
+    const wrapper = BadgeMount({ props: { status: 'error' } })
+
+    expect(wrapper.classes()).toContain('ix-badge-error')
+
+    await wrapper.setProps({ status: 'info' })
+
+    expect(wrapper.classes()).toContain('ix-badge-info')
   })
 
-  // 自定义插槽
-  test('count slot work', async () => {
-    const wrapper = BadgeMount({ slots: { count: '<div class="count-slot"></div>' } })
-    const countSlot = wrapper.find('.count-slot')
-    expect(countSlot.exists()).toBe(true)
-    expect(wrapper.html()).toMatchSnapshot()
+  test('title work', async () => {
+    const wrapper = BadgeMount({ props: { count: 9 } })
+
+    expect(wrapper.find('.ix-badge-count').attributes().title).toBe('9')
+
+    await wrapper.setProps({ title: 'custom title' })
+
+    expect(wrapper.find('.ix-badge-count').attributes().title).toBe('custom title')
   })
 })

packages/components/badge/demo/Basic.md

@@ -1,7 +1,7 @@
 ---
 order: 0
 title:
-  zh: 基本
+  zh: 基本使用
 ---
 
 ## zh

packages/components/badge/demo/Basic.vue

@@ -1,37 +1,26 @@
 <template>
-  <div class="badge-demo">
+  <IxSpace size="16px">
     <IxBadge count="5">
       <a href="#"></a>
     </IxBadge>
-
     <IxBadge count="0" showZero>
       <a href="#"></a>
     </IxBadge>
-
-    <IxBadge dot>
-      <a href="#"></a>
-    </IxBadge>
-
     <IxBadge>
       <a href="#"></a>
       <template #count>
-        <IxIcon name="clock-circle"></IxIcon>
+        <IxIcon name="clock-circle" :size="16"></IxIcon>
       </template>
     </IxBadge>
-  </div>
+  </IxSpace>
 </template>
 
 <style lang="less" scoped>
-.badge-demo {
-  & > * {
-    margin-right: 20px;
-    a {
-      display: inline-block;
-      width: 40px;
-      height: 40px;
-      border-radius: 4px;
-      background-color: gainsboro;
-    }
-  }
+a {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--ix-border-color);
+  border-radius: var(--ix-border-radius-sm);
 }
 </style>

packages/components/badge/demo/Count.md

@@ -0,0 +1,9 @@
+---
+order: 10
+title:
+  zh: 动态数字
+---
+
+## zh
+
+数字可以进行动态的变化, 带有一些动画效果。

packages/components/badge/demo/Count.vue

@@ -0,0 +1,30 @@
+<template>
+  <IxSpace align="center" size="16px">
+    <IxBadge :count="count">
+      <a href="#"></a>
+    </IxBadge>
+    <IxBadge :dot="count > 0">
+      <a href="#"></a>
+    </IxBadge>
+    <IxButtonGroup>
+      <IxButton icon="plus" @click="count++"></IxButton>
+      <IxButton icon="minus" @click="count--"></IxButton>
+    </IxButtonGroup>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(9)
+</script>
+
+<style lang="less" scoped>
+a {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--ix-border-color);
+  border-radius: var(--ix-border-radius-sm);
+}
+</style>

packages/components/badge/demo/Dot.md

@@ -0,0 +1,9 @@
+---
+order: 12
+title:
+  zh: 状态点
+---
+
+## zh
+
+只有一个小点, 没有具体的数字。

packages/components/badge/demo/Dot.vue

@@ -0,0 +1,13 @@
+<template>
+  <IxSpace size="16px">
+    <IxBadge dot>
+      <IxIcon name="alert" size="16px"></IxIcon>
+    </IxBadge>
+    <IxBadge :dot="false">
+      <IxIcon name="alert" size="16px"></IxIcon>
+    </IxBadge>
+    <IxBadge dot>
+      <a href="#">Link</a>
+    </IxBadge>
+  </IxSpace>
+</template>

packages/components/badge/demo/IndependentUse.md → packages/components/badge/demo/EmptyContent.md

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 6
 title:
   zh: 独立使用
 ---