chore: improve tag type

Author: Amour1688

components/tag/__tests__/__snapshots__/index.test.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<span class="ant-tag" style="display: none;"><!----><!----></span>`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<span class="ant-tag ant-tag-hidden"><!----><!----></span>`;
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<span class="ant-tag" style=""><!----><!----></span>`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<span class="ant-tag"><!----><!----></span>`;
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<span class="ant-tag" style="display: none;"><!----><!----></span>`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<span class="ant-tag ant-tag-hidden"><!----><!----></span>`;
 
 exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `<span class="ant-tag"><!----><!----></span>`;
 
-exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<span class="ant-tag" style="display: none;"><!----><!----></span>`;
+exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<span class="ant-tag ant-tag-hidden"><!----><!----></span>`;
 
-exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<span class="ant-tag" style=""><!----><!----></span>`;
+exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<span class="ant-tag"><!----><!----></span>`;

components/tag/__tests__/index.test.js

@@ -19,21 +19,17 @@ describe('Tag', () => {
     await asyncExpect(() => {
       expect(wrapper.findAll('.anticon-close').length).toBe(1);
       expect(
-        wrapper.findAll('.ant-tag').filter(w => {
-          const style = window.getComputedStyle(w.element, null);
-          return style.display !== 'none';
-        }).length,
-      ).toBe(1);
+        wrapper.findAll('.ant-tag').filter(w => w.element.classList.contains('ant-tag-hidden'))
+          .length,
+      ).toBe(0);
       wrapper.find('.anticon-close').trigger('click');
       expect(onClose).toBeCalled();
     });
     await asyncExpect(() => {
       expect(
-        wrapper.findAll('.ant-tag').filter(w => {
-          const style = window.getComputedStyle(w.element, null);
-          return style.display !== 'none';
-        }).length,
-      ).toBe(0);
+        wrapper.findAll('.ant-tag').filter(w => w.element.classList.contains('ant-tag-hidden'))
+          .length,
+      ).toBe(1);
     });
   });
 
@@ -52,11 +48,9 @@ describe('Tag', () => {
     await asyncExpect(() => {
       expect(wrapper.findAll('.anticon-close').length).toBe(1);
       expect(
-        wrapper.findAll('.ant-tag').filter(w => {
-          const style = window.getComputedStyle(w.element, null);
-          return style.display !== 'none';
-        }).length,
-      ).toBe(1);
+        wrapper.findAll('.ant-tag').filter(w => w.element.classList.contains('ant-tag-hidden'))
+          .length,
+      ).toBe(0);
       wrapper.find('.anticon-close').trigger('click');
     });
     // await asyncExpect(() => {

components/tag/index.tsx

@@ -1,4 +1,13 @@
-import { inject, ref, HTMLAttributes, defineComponent, App, VNodeTypes, watchEffect } from 'vue';
+import {
+  inject,
+  ref,
+  HTMLAttributes,
+  defineComponent,
+  App,
+  watchEffect,
+  PropType,
+  ExtractPropTypes,
+} from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
@@ -16,15 +25,21 @@ import CheckableTag from './CheckableTag';
 const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
 const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
 
-export interface TagProps extends HTMLAttributes {
-  prefixCls?: string;
-  color?: LiteralUnion<PresetColorType | PresetStatusColorType, string>;
-  closable?: boolean;
-  closeIcon?: VNodeTypes;
-  visible?: boolean;
-  onClose?: (e: MouseEvent) => void;
-  icon?: VNodeTypes;
-}
+const tagProps = {
+  prefixCls: PropTypes.string,
+  color: {
+    type: String as PropType<LiteralUnion<PresetColorType | PresetStatusColorType, string>>,
+  },
+  closable: PropTypes.looseBool.def(false),
+  closeIcon: PropTypes.VNodeChild,
+  visible: PropTypes.looseBool,
+  onClose: {
+    type: Function as PropType<(e: MouseEvent) => void>,
+  },
+  icon: PropTypes.VNodeChild,
+};
+
+export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<typeof tagProps>>;
 
 const Tag = defineComponent({
   name: 'ATag',
@@ -110,7 +125,7 @@ const Tag = defineComponent({
       const isNeedWave = 'onClick' in attrs;
 
       const tagNode = (
-        <span v-show={visible.value} class={tagClassName} style={tagStyle}>
+        <span class={tagClassName} style={tagStyle}>
           {kids}
           {renderCloseIcon()}
         </span>
@@ -121,22 +136,16 @@ const Tag = defineComponent({
   },
 });
 
-Tag.props = {
-  prefixCls: PropTypes.string,
-  color: PropTypes.string,
-  closable: PropTypes.looseBool.def(false),
-  closeIcon: PropTypes.any,
-  visible: PropTypes.looseBool,
-  onClose: PropTypes.func,
-  icon: PropTypes.any,
-};
+Tag.props = tagProps;
 
 Tag.CheckableTag = CheckableTag;
 
-Tag.install = (app: App) => {
+Tag.install = function(app: App) {
   app.component(Tag.name, Tag);
   app.component(CheckableTag.name, CheckableTag);
   return app;
 };
 
-export default Tag;
+export default Tag as typeof Tag & {
+  readonly CheckableTag: typeof CheckableTag;
+};