From 72f9262d0a524da892f03238eca26eccd83cc497 Mon Sep 17 00:00:00 2001
From: selicens <1244620067@qq.com>
Date: Fri, 18 Aug 2023 13:48:00 +0800
Subject: [PATCH] feat(Tag): add border less & synch checkable (#6819)
---
.../__tests__/__snapshots__/demo.test.js.snap | 48 +++++++++++++++++++
components/tag/demo/border-less.vue | 43 +++++++++++++++++
components/tag/demo/checkable.vue | 29 ++++++-----
components/tag/demo/index.vue | 3 ++
components/tag/index.en-US.md | 1 +
components/tag/index.tsx | 2 +
components/tag/index.zh-CN.md | 1 +
components/tag/style/index.ts | 12 +++++
8 files changed, 127 insertions(+), 12 deletions(-)
create mode 100644 components/tag/demo/border-less.vue
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
index 503330ae3..2405e6bee 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -2,6 +2,54 @@
exports[`renders ./components/tag/demo/basic.vue correctly 1`] = `Tag 1LinkTag 2Prevent Default `;
+exports[`renders ./components/tag/demo/border-less.vue correctly 1`] = `
+
+
Tag 1
+
+
Tag 2
+
+
+
+
+
+
+
+
+
+
processing
+
+
success
+
+
error
+
+
warning
+
+
magenta
+
+
red
+
+
volcano
+
+
orange
+
+
gold
+
+
lime
+
+
green
+
+
cyan
+
+
blue
+
+
geekblue
+
+
purple
+
+
Tag1Tag2Tag3
`;
exports[`renders ./components/tag/demo/colorful.vue correctly 1`] = `
diff --git a/components/tag/demo/border-less.vue b/components/tag/demo/border-less.vue
new file mode 100644
index 000000000..33bc62933
--- /dev/null
+++ b/components/tag/demo/border-less.vue
@@ -0,0 +1,43 @@
+
+---
+order: 7
+title:
+ zh-CN: 无边框
+ en-US: Border Less
+---
+
+## zh-CN
+
+无边框模式。
+
+## en-US
+border less.
+
+
+
+
+
+ Tag 1
+ Tag 2
+ Tag 3
+ Tag 4
+
+
+
+ processing
+ success
+ error
+ warning
+ magenta
+ red
+ volcano
+ orange
+ gold
+ lime
+ green
+ cyan
+ blue
+ geekblue
+ purple
+
+
diff --git a/components/tag/demo/checkable.vue b/components/tag/demo/checkable.vue
index 8a72718b0..d134e8b78 100644
--- a/components/tag/demo/checkable.vue
+++ b/components/tag/demo/checkable.vue
@@ -2,7 +2,7 @@
---
order: 1
title:
- zh-CN: 可选择
+ zh-CN: 可选择标签
en-US: Checkable
---
@@ -19,18 +19,23 @@ title:
-
+ Categories:
+
+
+ {{ tag }}
+
+
diff --git a/components/tag/demo/index.vue b/components/tag/demo/index.vue
index 99c393865..c4e911725 100644
--- a/components/tag/demo/index.vue
+++ b/components/tag/demo/index.vue
@@ -7,6 +7,7 @@
+
@@ -18,6 +19,7 @@ import Control from './control.vue';
import HotTags from './hot-tags.vue';
import Icon from './icon.vue';
import Status from './status.vue';
+import BorderLess from './border-less.vue';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
import { defineComponent } from 'vue';
@@ -33,6 +35,7 @@ export default defineComponent({
HotTags,
Icon,
Status,
+ BorderLess,
},
});
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
index a8625449c..eb072538d 100644
--- a/components/tag/index.en-US.md
+++ b/components/tag/index.en-US.md
@@ -23,6 +23,7 @@ Tag for categorizing or markup.
| closeIcon | Custom close icon | VNode \| slot | - | 2.0.0 |
| color | Color of the Tag | string | - | |
| icon | Set the icon of tag | VNode \| slot | - | 2.0.0 |
+| bordered | Whether has border style | boolean | `true` | 4.x |
### Tag Events
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index 993c2454f..9ff67a623 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -30,6 +30,7 @@ export const tagProps = () => ({
onClick: eventType<(e: MouseEvent) => void>(),
'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
icon: PropTypes.any,
+ bordered: { type: Boolean, default: true },
});
export type TagProps = HTMLAttributes & Partial>>;
@@ -98,6 +99,7 @@ const Tag = defineComponent({
[`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
[`${prefixCls.value}-hidden`]: !visible.value,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+ [`${prefixCls.value}-borderless`]: !props.bordered,
}),
);
const handleClick = (e: MouseEvent) => {
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
index bc99b22ac..da89f12bc 100644
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@@ -24,6 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAA
| closeIcon | 自定义关闭按钮 | VNode \| slot | - | 2.0.0 |
| color | 标签色 | string | - | |
| icon | 设置图标 | VNode \| slot | - | 2.0.0 |
+| bordered | 是否有边框 | boolean | `true` | 4.x |
### 事件
diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts
index ab7d68906..2cb61c0e1 100644
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@@ -14,6 +14,7 @@ interface TagToken extends FullToken<'Tag'> {
tagDefaultColor: string;
tagIconSize: number;
tagPaddingHorizontal: number;
+ tagBorderlessBg: string;
}
// ============================== Styles ==============================
@@ -31,6 +32,9 @@ const genTagStatusStyle = (
color: token[`color${cssVariableType}`],
background: token[`color${capitalizedCssVariableType}Bg`],
borderColor: token[`color${capitalizedCssVariableType}Border`],
+ [`&${token.componentCls}-borderless`]: {
+ borderColor: 'transparent',
+ },
},
};
};
@@ -48,6 +52,9 @@ const genPresetStyle = (token: TagToken) =>
background: darkColor,
borderColor: darkColor,
},
+ [`&${token.componentCls}-borderless`]: {
+ borderColor: 'transparent',
+ },
},
}));
@@ -138,6 +145,10 @@ const genBaseStyle = (token: TagToken): CSSObject => {
marginInlineStart: paddingInline,
},
},
+ [`${componentCls}-borderless`]: {
+ borderColor: 'transparent',
+ background: token.tagBorderlessBg,
+ },
};
};
@@ -158,6 +169,7 @@ export default genComponentStyleHook('Tag', token => {
tagDefaultColor,
tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
tagPaddingHorizontal: 8, // Fixed padding.
+ tagBorderlessBg: token.colorFillTertiary,
});
return [