refactor(tag): less to cssinjs (#6227)

Author: buqiyuan

components/style.ts

@@ -3,7 +3,7 @@
 import './radio/style';
 import './checkbox/style';
 // import './grid/style';
-import './tag/style';
+// import './tag/style';
 import './rate/style';
 import './pagination/style';
 // import './avatar/style';

components/tag/CheckableTag.tsx

@@ -2,6 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, computed } from 'vue';
 import classNames from '../_util/classNames';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import useStyle from './style';
 
 const checkableTagProps = () => ({
   prefixCls: String,
@@ -19,10 +20,14 @@ export type CheckableTagProps = Partial<ExtractPropTypes<ReturnType<typeof check
 const CheckableTag = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ACheckableTag',
+  inheritAttrs: false,
   props: checkableTagProps(),
   // emits: ['update:checked', 'change', 'click'],
-  setup(props, { slots, emit }) {
+  setup(props, { slots, emit, attrs }) {
     const { prefixCls } = useConfigInject('tag', props);
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const handleClick = (e: MouseEvent) => {
       const { checked } = props;
       emit('update:checked', !checked);
@@ -31,17 +36,17 @@ const CheckableTag = defineComponent({
     };
 
     const cls = computed(() =>
-      classNames(prefixCls.value, {
+      classNames(prefixCls.value, hashId.value, {
         [`${prefixCls.value}-checkable`]: true,
         [`${prefixCls.value}-checkable-checked`]: props.checked,
       }),
     );
 
     return () => {
-      return (
-        <span class={cls.value} onClick={handleClick}>
+      return wrapSSR(
+        <span {...attrs} class={cls.value} onClick={handleClick}>
           {slots.default?.()}
-        </span>
+        </span>,
       );
     };
   },

components/tag/demo/controlled.vue

@@ -4,7 +4,6 @@
     <Checkable />
     <Colorful />
     <Control />
-    <Controlled />
     <HotTags />
     <Icon />
     <Status />
@@ -16,7 +15,6 @@ import Basic from './basic.vue';
 import Checkable from './checkable.vue';
 import Colorful from './colorful.vue';
 import Control from './control.vue';
-import Controlled from './controlled.vue';
 import HotTags from './hot-tags.vue';
 import Icon from './icon.vue';
 import Status from './status.vue';
@@ -32,7 +30,6 @@ export default defineComponent({
     Checkable,
     Colorful,
     Control,
-    Controlled,
     HotTags,
     Icon,
     Status,

components/tag/demo/index.vue

@@ -16,13 +16,12 @@ Tag for categorizing or markup.
 
 ### Tag
 
-| Property         | Description                      | Type          | Default | Version |
-| ---------------- | -------------------------------- | ------------- | ------- | ------- |
-| closable         | Whether the Tag can be closed    | boolean       | `false` |         |
-| 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   |
-| visible(v-model) | Whether the Tag is closed or not | boolean       | `true`  |         |
+| Property  | Description                   | Type          | Default | Version |
+| --------- | ----------------------------- | ------------- | ------- | ------- |
+| closable  | Whether the Tag can be closed | boolean       | `false` |         |
+| 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   |
 
 ### Tag Events
 

components/tag/index.en-US.md

@@ -9,6 +9,9 @@ import { isPresetColor, isPresetStatusColor } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import CheckableTag from './CheckableTag';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import warning from '../_util/warning';
+
+import useStyle from './style';
 
 export const tagProps = () => ({
   prefixCls: String,
@@ -17,6 +20,7 @@ export const tagProps = () => ({
   },
   closable: { type: Boolean, default: false },
   closeIcon: PropTypes.any,
+  /** @deprecated `visible` will be removed in next major version. */
   visible: { type: Boolean, default: undefined },
   onClose: {
     type: Function as PropType<(e: MouseEvent) => void>,
@@ -30,14 +34,26 @@ export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<ReturnType<type
 const Tag = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ATag',
+  inheritAttrs: false,
   props: tagProps(),
   // emits: ['update:visible', 'close'],
   slots: ['closeIcon', 'icon'],
   setup(props: TagProps, { slots, emit, attrs }) {
     const { prefixCls, direction } = useConfigInject('tag', props);
 
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const visible = ref(true);
 
+    // Warning for deprecated usage
+    if (process.env.NODE_ENV !== 'production') {
+      warning(
+        !('visible' in props),
+        'Tag',
+        '`visible` is deprecated, please use `<Tag v-show="visible" />` instead.',
+      );
+    }
+
     watchEffect(() => {
       if (props.visible !== undefined) {
         visible.value = props.visible!;
@@ -70,7 +86,7 @@ const Tag = defineComponent({
     );
 
     const tagClassName = computed(() =>
-      classNames(prefixCls.value, {
+      classNames(prefixCls.value, hashId.value, {
         [`${prefixCls.value}-${props.color}`]: isInternalColor.value,
         [`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
         [`${prefixCls.value}-hidden`]: !visible.value,
@@ -117,13 +133,13 @@ const Tag = defineComponent({
       const isNeedWave = 'onClick' in attrs;
 
       const tagNode = (
-        <span class={tagClassName.value} style={tagStyle}>
+        <span {...attrs} class={tagClassName.value} style={tagStyle}>
           {kids}
           {renderCloseIcon()}
         </span>
       );
 
-      return isNeedWave ? <Wave>{tagNode}</Wave> : tagNode;
+      return wrapSSR(isNeedWave ? <Wave>{tagNode}</Wave> : tagNode);
     };
   },
 });

components/tag/index.tsx

@@ -17,13 +17,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
 
 ### Tag
 
-| 参数             | 说明             | 类型          | 默认值 | 版本  |
-| ---------------- | ---------------- | ------------- | ------ | ----- |
-| closable         | 标签是否可以关闭 | boolean       | false  |       |
-| closeIcon        | 自定义关闭按钮   | VNode \| slot | -      | 2.0.0 |
-| color            | 标签色           | string        | -      |       |
-| icon             | 设置图标         | VNode \| slot | -      | 2.0.0 |
-| visible(v-model) | 是否显示标签     | boolean       | `true` |       |
+| 参数      | 说明             | 类型          | 默认值 | 版本  |
+| --------- | ---------------- | ------------- | ------ | ----- |
+| closable  | 标签是否可以关闭 | boolean       | false  |       |
+| closeIcon | 自定义关闭按钮   | VNode \| slot | -      | 2.0.0 |
+| color     | 标签色           | string        | -      |       |
+| icon      | 设置图标         | VNode \| slot | -      | 2.0.0 |
 
 ### 事件