feat(tag): add content-style prop

tusen-ai · Nov 6, 2024 · 0b24897 · 0b24897
1 parent acced75
commit 0b24897
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 1 deletion.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,7 @@
 - `n-progress`'s `color` prop supports gradient config.
 - `n-select` adds `font-weight` theme variable
 - `n-input` adds `font-weight` theme variable
+- `n-tag` adds `content-style` prop.
 
 ## 2.40.1
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,7 @@
 - `n-progress` 的 `color` 属性支持渐变色配置
 - `n-select` 新增 `font-weight` 主题变量
 - `n-input` 新增 `font-weight` 主题变量
+- `n-tag` 新增 `content-style` 属性
 
 ## 2.40.1
 

diff --git a/src/tag/demos/enUS/index.demo-entry.md b/src/tag/demos/enUS/index.demo-entry.md
@@ -28,6 +28,7 @@ icon.vue
 | checked | `boolean` | `false` | Whether the tag is checked. Note: used with `checkable`. |  |
 | closable | `boolean` | `false` | Whether the tag shows a close button. |  |
 | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | Color of the tag. Note: this will override the type property's color. |  |
+| content-style | `string \| Object` | `undefined` | Content style of the tag. | NEXT-VERSION |
 | disabled | `boolean` | `false` | Whether the tag is disabled. |  |
 | round | `boolean` | `false` | Whether the tag has rounded corners. |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |  |

diff --git a/src/tag/demos/zhCN/index.demo-entry.md b/src/tag/demos/zhCN/index.demo-entry.md
@@ -29,6 +29,7 @@ rtl-debug.vue
 | checked | `boolean` | `false` | 是否被选中，配合 checkable 一起使用 |  |
 | closable | `boolean` | `false` | 是否可关闭 |  |
 | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | 标签颜色，设置该项后 `type` 无效 |  |
+| content-style | `string \| Object` | `undefined` | tag 内容的样式 | NEXT_VERSION |
 | disabled | `boolean` | `false` | 是否禁用 |  |
 | round | `boolean` | `false` | 是否圆角 |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |  |

diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx
@@ -45,6 +45,7 @@ export const tagProps = {
   },
   checked: Boolean,
   checkable: Boolean,
+  contentStyle: [Object, String] as PropType<CSSProperties | string>,
   strong: Boolean,
   triggerClickOnClose: Boolean,
   onClose: [Array, Function] as PropType<MaybeArray<(e: MouseEvent) => void>>,
@@ -259,6 +260,7 @@ export default defineComponent({
       rtlEnabled,
       closable,
       color: { borderColor } = {},
+      contentStyle,
       round,
       onRender,
       $slots
@@ -299,7 +301,11 @@ export default defineComponent({
         onMouseleave={this.onMouseleave}
       >
         {iconNode || avatarNode}
-        <span class={`${mergedClsPrefix}-tag__content`} ref="contentRef">
+        <span
+          class={`${mergedClsPrefix}-tag__content`}
+          ref="contentRef"
+          style={contentStyle}
+        >
           {this.$slots.default?.()}
         </span>
         {!this.checkable && closable ? (

diff --git a/src/tag/tests/Tag.spec.ts b/src/tag/tests/Tag.spec.ts
@@ -166,4 +166,17 @@ describe('n-tag', () => {
       '--n-merged-size: var(--n-avatar-size-override, 34px);'
     )
   })
+
+  it('should work with `content-style` prop', () => {
+    const wrapper = mount(NTag, {
+      props: {
+        contentStyle: {
+          color: 'rgb(204, 204, 204)'
+        }
+      }
+    })
+    expect(wrapper.find('.n-tag__content').attributes('style')).toContain(
+      'color: rgb(204, 204, 204);'
+    )
+  })
 })