feat(components): [tag] add new API for rounded

- Add new api `round` for rounded tag.
- Add documentation for rounded tag.
- Update document styles.

docs/.vitepress/vitepress/styles/base.scss

@@ -45,6 +45,14 @@ h5,
 h6 {
   margin: 0;
   line-height: 1.25;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  // Special case for handling tagged header.
+  .el-tag {
+    margin-left: 8px;
+  }
 }
 
 h1,
@@ -137,7 +145,7 @@ a {
 }
 
 a.header-anchor {
-  float: left;
+  position: absolute;
   margin-top: 0.125em;
   margin-left: -0.87em;
   padding-right: 0.23em;

docs/en-US/component/tag.md

@@ -53,6 +53,16 @@ tag/theme
 
 :::
 
+## Rounded <el-tag>> 2.1.7</el-tag>
+
+Tag can also be rounded like button.
+
+:::demo
+
+tag/rounded
+
+:::
+
 ## Checkable tag
 
 Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
@@ -74,6 +84,7 @@ tag/checkable
 | color               | background color of the Tag          | string  | —                           | —       |
 | size                | tag size                             | string  | large / default /small      | default |
 | effect              | component theme                      | string  | dark / light / plain        | light   |
+| round               | whether Tag is rounded               | boolean | —                           | false   |
 
 ## Events
 

docs/examples/tag/rounded.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-wrap gap-2 my-2">
+    <el-tag
+      v-for="item in items"
+      :key="item.label"
+      :type="item.type"
+      class="mx-1"
+      effect="dark"
+      round
+    >
+      {{ item.label }}
+    </el-tag>
+  </div>
+  <div class="flex flex-wrap gap-2">
+    <el-tag
+      v-for="item in items"
+      :key="item.label"
+      :type="item.type"
+      class="mx-1"
+      effect="light"
+      round
+    >
+      {{ item.label }}
+    </el-tag>
+  </div>
+  <div class="flex flex-wrap gap-2 my-2">
+    <el-tag
+      v-for="item in items"
+      :key="item.label"
+      :type="item.type"
+      class="mx-1"
+      effect="plain"
+      round
+    >
+      {{ item.label }}
+    </el-tag>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { TagProps } from 'element-plus'
+
+type Item = { type: TagProps['type']; label: string }
+
+const items = ref<Array<Item>>([
+  { type: '', label: 'Tag 1' },
+  { type: 'success', label: 'Tag 2' },
+  { type: 'info', label: 'Tag 3' },
+  { type: 'danger', label: 'Tag 4' },
+  { type: 'warning', label: 'Tag 5' },
+])
+</script>

docs/examples/tag/theme.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="tag-group my-2">
-    <span class="tag-group__title m-1">Dark</span>
+  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
+    <span class="tag-group__title m-1 line-height-2">Dark</span>
     <el-tag
       v-for="item in items"
       :key="item.label"
-      class="mx-1"
       :type="item.type"
+      class="mx-1"
       effect="dark"
     >
       {{ item.label }}
@@ -13,15 +13,15 @@
     <el-tag
       v-for="item in items"
       :key="item.label"
-      class="mx-1"
       :type="item.type"
+      class="mx-1"
       effect="dark"
       closable
     >
       {{ item.label }}
     </el-tag>
   </div>
-  <div class="tag-group my-2">
+  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
     <span class="tag-group__title m-1">Plain</span>
     <el-tag
       v-for="item in items"
@@ -48,7 +48,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const items = ref([
+import type { TagProps } from 'element-plus'
+
+type Item = { type: TagProps['type']; label: string }
+
+const items = ref<Array<Item>>([
   { type: '', label: 'Tag 1' },
   { type: 'success', label: 'Tag 2' },
   { type: 'info', label: 'Tag 3' },

packages/components/tag/src/tag.ts

@@ -27,6 +27,7 @@ export const tagProps = buildProps({
     values: ['dark', 'light', 'plain'],
     default: 'light',
   },
+  round: Boolean,
 } as const)
 export type TagProps = ExtractPropTypes<typeof tagProps>
 

packages/components/tag/src/tag.vue

@@ -45,7 +45,7 @@ const emit = defineEmits(tagEmits)
 const tagSize = useSize()
 const ns = useNamespace('tag')
 const classes = computed(() => {
-  const { type, hit, effect, closable } = props
+  const { type, hit, effect, closable, round } = props
   return [
     ns.b(),
     ns.is('closable', closable),
@@ -53,6 +53,7 @@ const classes = computed(() => {
     ns.m(tagSize.value),
     ns.m(effect),
     ns.is('hit', hit),
+    ns.is('round', round),
   ]
 })
 

packages/theme-chalk/src/common/var.scss

@@ -886,6 +886,7 @@ $tag: map.merge(
   (
     'font-size': 12px,
     'border-radius': 4px,
+    'border-radius-rounded': 9999px,
   ),
   $tag
 );

packages/theme-chalk/src/tag.scss

@@ -78,6 +78,9 @@ $tag-icon-span-gap: map.merge(
   @include when(hit) {
     border-color: getCssVar('color', 'primary');
   }
+  @include when(round) {
+    border-radius: getCssVar('tag', 'border-radius-rounded');
+  }
 
   .#{$namespace}-tag__close {
     color: var(--el-tag-text-color);