feat(comp:tag): support css variable and add status prop (#1600)

IDuxFE · Jul 26, 2023 · 4c2d506 · 4c2d506
1 parent 9f643b2
commit 4c2d506
Show file tree

Hide file tree

Showing 46 changed files with 493 additions and 595 deletions.
diff --git a/packages/components/style/themes/default.less b/packages/components/style/themes/default.less
@@ -14,6 +14,8 @@
   --ix-color-red: @color-red;
   --ix-color-red-l10: @color-red-l10; // hover
   --ix-color-red-d10: @color-red-d10; // active
+  --ix-color-red-d20: @color-red-d20;
+  --ix-color-red-d30: @color-red-d30;
 
   // Turquoise
   --ix-color-turquoise: @color-turquoise;
@@ -25,6 +27,11 @@
   --ix-color-brown-l10: @color-brown-l10;
   --ix-color-brown-d10: @color-brown-d10;
 
+  // Brown
+  --ix-color-orange: @color-orange;
+  --ix-color-orange-l10: @color-orange-l10;
+  --ix-color-orange-d10: @color-orange-d10;
+
   // Text
   --ix-text-color: @color-grey-d40; // 默认文字颜色
   --ix-text-color-inverse: @color-white; // 反向

diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -54,8 +54,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 0
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -83,8 +83,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 1
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -112,8 +112,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 2
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -139,8 +139,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 3
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -168,8 +168,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 4
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -197,8 +197,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 5
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -224,8 +224,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 6
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -253,8 +253,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 7
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -282,8 +282,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 8
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
@@ -309,8 +309,8 @@ exports[`Table > basic work > render work 1`] = `
               <!---->London Park no. 9
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><span class=\\"ix-tag ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
-              <!----></span><span class=\\"ix-tag ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
+              <!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
+              <!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">

diff --git a/packages/components/tag/__tests__/__snapshots__/tag.spec.ts.snap b/packages/components/tag/__tests__/__snapshots__/tag.spec.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
 exports[`Tag > render work 1`] = `
-"<span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">test tag</span>
+"<span class=\\"ix-tag ix-tag-normal\\"><!----><!----><span class=\\"ix-tag-content\\">test tag</span>
 <!----></span>"
 `;
diff --git a/packages/components/tag/__tests__/__snapshots__/tagGroup.spec.ts.snap b/packages/components/tag/__tests__/__snapshots__/tagGroup.spec.ts.snap
@@ -1,8 +1,12 @@
 // Vitest Snapshot v1
 
 exports[`TagGroup > render work 1`] = `
-"<div class=\\"ix-tag-group\\" style=\\"gap: 8px 8px;\\"><span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">A</span>
-  <!----></span><span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">B</span>
-  <!----></span>
+"<div class=\\"ix-space ix-tag-group\\" style=\\"margin-bottom: -8px;\\">
+  <div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\"><span class=\\"ix-tag ix-tag-normal\\"><!----><!----><span class=\\"ix-tag-content\\">A</span>
+    <!----></span>
+  </div>
+  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 8px;\\"><span class=\\"ix-tag ix-tag-normal\\"><!----><!----><span class=\\"ix-tag-content\\">B</span>
+    <!----></span>
+  </div>
 </div>"
 `;
diff --git a/packages/components/tag/__tests__/tag.spec.ts b/packages/components/tag/__tests__/tag.spec.ts
@@ -13,6 +13,7 @@ describe('Tag', () => {
 
   renderWork(IxTag, { slots: { default: () => 'test tag' } })
 
+  // TODO: REMOVE
   test('color work', async () => {
     const wrapper = TagMount({ props: { color: 'red' } })
 
@@ -29,6 +30,26 @@ describe('Tag', () => {
     expect(wrapper.classes()).toContain('ix-tag-has-color')
   })
 
+  test('bordered work', async () => {
+    const wrapper = TagMount({ props: { bordered: true } })
+
+    expect(wrapper.classes()).toContain('ix-tag-bordered')
+
+    await wrapper.setProps({ bordered: false })
+
+    expect(wrapper.classes()).not.toContain('ix-tag-bordered')
+  })
+
+  test('filled work', async () => {
+    const wrapper = TagMount({ props: { filled: true } })
+
+    expect(wrapper.classes()).toContain('ix-tag-filled')
+
+    await wrapper.setProps({ filled: false })
+
+    expect(wrapper.classes()).not.toContain('ix-tag-filled')
+  })
+
   test('icon work', async () => {
     const wrapper = TagMount({ props: { icon: 'up' } })
 
@@ -46,6 +67,18 @@ describe('Tag', () => {
     expect(wrapper.find('.ix-icon-down').exists()).toBe(true)
   })
 
+  test('number work', async () => {
+    const wrapper = TagMount({ props: { number: 2 } })
+
+    expect(wrapper.classes()).toContain('ix-tag-numeric')
+    expect(wrapper.find('.ix-tag-numeric-prefix').text()).toBe('2')
+  })
+
+  test('number exceeds 9 work', async () => {
+    const wrapper = TagMount({ props: { number: 10000 } })
+    expect(wrapper.find('.ix-tag-numeric-prefix').text()).toBe('9+')
+  })
+
   test('shape work', async () => {
     const wrapper = TagMount({ props: { shape: 'round' } })
 
@@ -56,15 +89,17 @@ describe('Tag', () => {
     expect(wrapper.classes()).toContain('ix-tag-rect')
   })
 
-  test('number work', async () => {
-    const wrapper = TagMount({ props: { number: 2 } })
+  test('status work', async () => {
+    const wrapper = TagMount({ props: { status: 'success' } })
 
-    expect(wrapper.classes()).toContain('ix-tag-numeric')
-    expect(wrapper.find('.ix-tag-numeric-prefix').text()).toBe('2')
-  })
+    expect(wrapper.classes()).toContain('ix-tag-success')
 
-  test('number exceeds 9 work', async () => {
-    const wrapper = TagMount({ props: { number: 10000 } })
-    expect(wrapper.find('.ix-tag-numeric-prefix').text()).toBe('9+')
+    await wrapper.setProps({ status: 'fatal' })
+
+    expect(wrapper.classes()).toContain('ix-tag-fatal')
+
+    await wrapper.setProps({ status: undefined })
+
+    expect(wrapper.classes()).toContain('ix-tag-normal')
   })
 })
diff --git a/packages/components/tag/__tests__/tagGroup.spec.ts b/packages/components/tag/__tests__/tagGroup.spec.ts
@@ -75,24 +75,6 @@ describe('TagGroup', () => {
     expect(closeFn.mock.calls[0][0]).toBe('a')
   })
 
-  test('prop gap work', async () => {
-    const wrapper = TagGroupMount({ props: { dataSource, gap: 16 } })
-
-    expect((wrapper.element as HTMLElement).style.gap).toBe('8px 16px')
-
-    await wrapper.setProps({ gap: 15 })
-    expect((wrapper.element as HTMLElement).style.gap).toBe('8px 15px')
-  })
-
-  test('prop wrap work', async () => {
-    const wrapper = TagGroupMount({ props: { dataSource, wrap: true } })
-
-    expect(wrapper.find('.ix-tag-group-nowrap').exists()).toBe(false)
-
-    await wrapper.setProps({ wrap: false })
-    expect(wrapper.find('.ix-tag-group-nowrap').exists()).toBe(true)
-  })
-
   test('prop shape work', async () => {
     const wrapper = TagGroupMount({ props: { dataSource, shape: 'round' } })
     const tags = wrapper.findAll('.ix-tag')

diff --git a/packages/components/tag/demo/Custom.md → packages/components/tag/demo/Basic.md b/packages/components/tag/demo/Custom.md → packages/components/tag/demo/Basic.md
@@ -7,7 +7,7 @@ order: 1
 
 ## zh
 
-基本使用
+最简单的用法， 可以通过设置 `status` 来展示不同颜色的标签。
 
 ## en
 

diff --git a/packages/components/tag/demo/Basic.vue b/packages/components/tag/demo/Basic.vue
@@ -0,0 +1,9 @@
+<template>
+  <IxTag>标签</IxTag>
+  <IxTag status="success">标签</IxTag>
+  <IxTag status="info">标签</IxTag>
+  <IxTag status="warning">标签</IxTag>
+  <IxTag status="risk">标签</IxTag>
+  <IxTag status="error">标签</IxTag>
+  <IxTag status="fatal">标签</IxTag>
+</template>
diff --git a/packages/components/tag/demo/Bordered.md b/packages/components/tag/demo/Bordered.md
@@ -0,0 +1,10 @@
+---
+title:
+  zh: 带边框的
+  en: Bordered
+order: 12
+---
+
+## zh
+
+通过设置 `bordered` 来展示带边框的标签
diff --git a/packages/components/tag/demo/Bordered.vue b/packages/components/tag/demo/Bordered.vue
@@ -0,0 +1,9 @@
+<template>
+  <IxTag bordered>标签</IxTag>
+  <IxTag bordered status="success">标签</IxTag>
+  <IxTag bordered status="info">标签</IxTag>
+  <IxTag bordered status="warning">标签</IxTag>
+  <IxTag bordered status="risk">标签</IxTag>
+  <IxTag bordered status="error">标签</IxTag>
+  <IxTag bordered status="fatal">标签</IxTag>
+</template>
diff --git a/packages/components/tag/demo/Clickable.md b/packages/components/tag/demo/Clickable.md
@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 16
 title:
   zh: 一组标签
 ---

diff --git a/packages/components/tag/demo/Clickable.vue b/packages/components/tag/demo/Clickable.vue
@@ -1,12 +1,6 @@
 <template>
-  <IxTagGroup
-    v-model:activeKeys="activeKeys"
-    :dataSource="list"
-    :clickable="true"
-    :gap="48"
-    shape="round"
-    @click="handleClick"
-  ></IxTagGroup>
+  <IxTagGroup v-model:activeKeys="activeKeys" :dataSource="list" clickable shape="round" @click="handleClick">
+  </IxTagGroup>
 </template>
 
 <script lang="ts" setup>
@@ -18,24 +12,10 @@ import { computed, ref } from 'vue'
 const activeKeys = ref<VKey[]>([])
 
 const list = computed<TagData[]>(() => {
-  return [
-    '斗之气',
-    '斗者',
-    '斗师',
-    '大斗师',
-    '斗灵',
-    '斗王',
-    '斗皇',
-    '斗宗',
-    '斗尊',
-    '斗尊巅峰',
-    '半圣',
-    '斗圣',
-    '斗帝',
-  ].map((label, idx) => ({
+  return ['斗之气', '斗者', '斗师', '斗灵', '斗王', '斗皇', '斗宗', '斗尊', '斗圣', '斗帝'].map((label, idx) => ({
     key: idx,
     label,
-    color: activeKeys.value.includes(idx) ? 'success' : 'info',
+    status: activeKeys.value.includes(idx) ? 'success' : 'info',
   }))
 })
 

diff --git a/packages/components/tag/demo/Closable.md b/packages/components/tag/demo/Closable.md
@@ -0,0 +1,9 @@
+---
+order: 18
+title:
+  zh: 可关闭的
+---
+
+## zh
+
+`closable` 属性定义一个标签是否可以移除，当标签被移除时会触发 `close` 事件。
diff --git a/packages/components/tag/demo/Closable.vue b/packages/components/tag/demo/Closable.vue
@@ -0,0 +1,12 @@
+<template>
+  <IxTagGroup closable @close="handleClose">
+    <IxTag key="a">两数之和</IxTag>
+    <IxTag key="b" status="info">三数之和</IxTag>
+    <IxTag key="c" status="warning">四数之和</IxTag>
+    <IxTag key="d" status="error">M数之和</IxTag>
+  </IxTagGroup>
+</template>
+
+<script lang="ts" setup>
+const handleClose = console.log
+</script>
diff --git a/packages/components/tag/demo/Color.md b/packages/components/tag/demo/Color.md
@@ -1,14 +1,10 @@
 ---
 title:
-  zh: 颜色
-  en: color
-order: 0
+  zh: 自定义颜色
+  en: Customized Color
+order: 14
 ---
 
 ## zh
 
-标签颜色配置
-
-## en
-
-tag colors
+通过设置 `css` 变量： `--ix-tag-color`, `--ix-tag-background-color` 和 `--ix-tag-border-color` 来自定义标签颜色