feat(comp:tag): support compact group tags (#1779)

IDuxFE · Jan 8, 2024 · 318d8ef · 318d8ef
1 parent 124ea76
commit 318d8ef
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 20 deletions.
diff --git a/packages/components/tag/demo/GroupedTag.md b/packages/components/tag/demo/GroupedTag.md
@@ -0,0 +1,10 @@
+---
+title:
+  zh: 组合标签
+  en: Grouped tag
+order: 12
+---
+
+## zh
+
+通过使用 `IxTagGroup` 并设置 `gap` 为 `0` 来创建组合标签
diff --git a/packages/components/tag/demo/GroupedTag.vue b/packages/components/tag/demo/GroupedTag.vue
@@ -0,0 +1,44 @@
+<template>
+  <IxSpace vertical size="md">
+    <IxSpace>
+      <IxTagGroup :gap="0">
+        <IxTag filled>未定级</IxTag>
+        <IxTag>1.27</IxTag>
+      </IxTagGroup>
+      <IxTagGroup :gap="0">
+        <IxTag status="success" filled>安全</IxTag>
+        <IxTag status="success">2.33</IxTag>
+      </IxTagGroup>
+      <IxTagGroup :gap="0">
+        <IxTag status="info" filled>信息</IxTag>
+        <IxTag status="info">3.69</IxTag>
+      </IxTagGroup>
+      <IxTagGroup :gap="0">
+        <IxTag status="warning" filled>低危</IxTag>
+        <IxTag status="warning">5.13</IxTag>
+      </IxTagGroup>
+      <IxTagGroup :gap="0">
+        <IxTag status="risk" filled>中危</IxTag>
+        <IxTag status="risk">7.03</IxTag>
+      </IxTagGroup>
+      <IxTagGroup :gap="0">
+        <IxTag status="error" filled>高危</IxTag>
+        <IxTag status="error">9.21</IxTag>
+      </IxTagGroup>
+      <IxTagGroup :gap="0">
+        <IxTag status="fatal" filled>严重</IxTag>
+        <IxTag status="fatal">10.33</IxTag>
+      </IxTagGroup>
+    </IxSpace>
+    <IxSpace>
+      <IxTagGroup :gap="0">
+        <IxTag filled style="--ix-tag-color: #f9dc97; --ix-tag-background-color: #5a616f">恶意病毒</IxTag>
+        <IxTag>1.27</IxTag>
+      </IxTagGroup>
+      <IxTagGroup :gap="0">
+        <IxTag filled style="--ix-tag-color: #fff; --ix-tag-background-color: #6f7785">ATTACK</IxTag>
+        <IxTag style="--ix-tag-color: #6f7785; --ix-tag-background-color: #e1e5eb">持久化</IxTag>
+      </IxTagGroup>
+    </IxSpace>
+  </IxSpace>
+</template>
diff --git a/packages/components/tag/docs/Theme.zh.md b/packages/components/tag/docs/Theme.zh.md
@@ -1,14 +1,8 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `bgColorFilled` |  | `string` | `#99acd1` | `#99acd1` |
-| `borderRadius` |  | `number` | `2` | `2` |
-| `borderWidth` |  | `number` | `1` | `1` |
-| `errorBgColor` |  | `string` | `rgba(255, 87, 82, 0.1)` | `rgba(232, 81, 76, 0.2)` |
-| `fatalBgColor` |  | `string` | `rgba(130, 1, 14, 0.1)` | `rgba(143, 30, 31, 0.2)` |
-| `infoBgColor` |  | `string` | `rgba(28, 110, 255, 0.1)` | `rgba(64, 131, 232, 0.2)` |
-| `minWidthNumeric` |  | `number` | `64` | `64` |
-| `minWidthRect` |  | `number` | `40` | `40` |
-| `minWidthRound` |  | `number` | `48` | `48` |
-| `riskBgColor` |  | `string` | `rgba(250, 114, 27, 0.1)` | `rgba(232, 134, 65, 0.2)` |
-| `successBgColor` |  | `string` | `rgba(18, 166, 121, 0.1)` | `rgba(64, 198, 149, 0.2)` |
-| `warningBgColor` |  | `string` | `rgba(253, 170, 29, 0.1)` | `rgba(253, 170, 29, 0.2)` |
+| `bgColorFilled` | 标签背景颜色 | `string` | `#99acd1` | `#99acd1` |
+| `borderRadius` | 标签边框圆角尺寸 | `number` | `2` | `2` |
+| `borderWidth` | 标签边框尺寸 | `number` | `1` | `1` |
+| `minWidthNumeric` | numeric标签最小宽度 | `number` | `64` | `64` |
+| `minWidthRect` | rect标签最小宽度 | `number` | `40` | `40` |
+| `minWidthRound` | round标签最小宽度 | `number` | `48` | `48` |
diff --git a/packages/components/tag/src/TagGroup.tsx b/packages/components/tag/src/TagGroup.tsx
@@ -57,9 +57,11 @@ export default defineComponent({
 
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
+      const gap = mergedGap.value
       return {
         [prefixCls]: true,
         [`${prefixCls}-clickable`]: props.clickable,
+        [`${prefixCls}-compact`]: !gap || gap === '0',
       }
     })
 

diff --git a/packages/components/tag/style/index.less b/packages/components/tag/style/index.less
@@ -11,22 +11,25 @@
   align-items: center;
   color: var(--ix-tag-color, var(--ix-color-text-info));
   background-color: var(--ix-tag-background-color, var(--ix-color-emphasized-container-bg));
-  padding: 0 calc(8px - var(--ix-tag-border-width));
+  padding: 0 calc(var(--ix-margin-size-sm) - var(--ix-tag-border-width));
   line-height: @tag-line-height;
   border: var(--ix-tag-border-width) solid transparent;
   border-radius: var(--ix-tag-border-radius);
 
-  & + & {
-    margin-left: 8px;
+  & + &,
+  & + .@{tag-prefix}-group,
+  .@{tag-prefix}-group + &,
+  .@{tag-prefix}-group + .@{tag-prefix}-group {
+    margin-left: var(--ix-margin-size-sm);
   }
 
   > .@{icon-prefix} {
-    margin-left: -4px;
+    margin-left: calc(var(--ix-margin-size-xs) * -1);
     font-size: var(--ix-font-size-icon);
   }
 
   .@{icon-prefix} + &-content {
-    padding-left: 4px;
+    padding-left: var(--ix-margin-size-xs);
   }
 
   &-content {
@@ -49,7 +52,7 @@
   }
 
   &-close-icon {
-    margin-left: 4px;
+    margin-left: var(--ix-margin-size-xs);
     font-size: var(--ix-font-size-icon);
     cursor: pointer;
   }
@@ -68,7 +71,7 @@
 }
 
 .@{tag-prefix}-numeric {
-  @tag-prefix-size: calc(@tag-line-height + 4px);
+  @tag-prefix-size: calc(@tag-line-height + var(--ix-margin-size-xs));
 
   position: relative;
   padding-left: calc(@tag-prefix-size + var(--ix-tag-border-width));
@@ -96,16 +99,43 @@
       cursor: pointer;
     }
   }
+
+  &-compact {
+    &:not(.@{space-prefix}-vertical) {
+      > .@{space-prefix}-item:first-child > .@{tag-prefix} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      > .@{space-prefix}-item:last-child > .@{tag-prefix} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      > .@{space-prefix}-item:not(:first-child):not(:last-child) > .@{tag-prefix} {
+        border-radius: 0;
+      }
+
+      > .@{space-prefix}-item:not(:last-child) > .@{tag-prefix}.@{tag-prefix}-bordered {
+        margin-right: -1px;
+      }
+    }
+  }
 }
 
 .tag-status-color(@status) {
   @color: '--ix-color-@{status}';
   @background-color: '--ix-tag-@{status}-bg-color';
   @background-color-filled: '--ix-color-@{status}-bg';
+  @icon-color: '--ix-color-@{status}-icon';
 
   &-@{status} {
     --ix-tag-color: ~'var(@{color})';
     --ix-tag-background-color: ~'var(@{background-color})';
+
+    .@{tag-prefix}-close-icon {
+      color: ~'var(@{icon-color})';
+    }
   }
 
   &-@{status}&-bordered {

diff --git a/packages/components/tag/theme/tokens.ts b/packages/components/tag/theme/tokens.ts
@@ -6,20 +6,61 @@
  */
 
 export interface TagThemeTokens {
+  /**
+   * @desc 标签背景颜色
+   */
   bgColorFilled: string
 
+  /**
+   * @desc 标签边框尺寸
+   */
   borderWidth: number
+  /**
+   * @desc 标签边框圆角尺寸
+   */
   borderRadius: number
 
+  /**
+   * @desc rect标签最小宽度
+   */
   minWidthRect: number
+  /**
+   * @desc round标签最小宽度
+   */
   minWidthRound: number
+  /**
+   * @desc numeric标签最小宽度
+   */
   minWidthNumeric: number
 
-  // private
+  /**
+   * @desc successBgColor
+   * @private internal
+   */
   successBgColor: string
+  /**
+   * @desc infoBgColor
+   * @private internal
+   */
   infoBgColor: string
+  /**
+   * @desc warningBgColor
+   * @private internal
+   */
   warningBgColor: string
+  /**
+   * @desc riskBgColor
+   * @private internal
+   */
   riskBgColor: string
+  /**
+   * @desc errorBgColor
+   * @private internal
+   */
   errorBgColor: string
+  /**
+   * @desc fatalBgColor
+   * @private internal
+   */
   fatalBgColor: string
 }