Feat Tag CheckableTag (#2400)

* feat: update Tag CheckableTag

* fix:  merge event handler

* fix: merge event handler

* fix: delete dubugger

* fix: configProvider inject

components/tag/CheckableTag.jsx

@@ -1,17 +1,17 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'ACheckableTag',
-  model: {
-    prop: 'checked',
-  },
   props: {
     prefixCls: PropTypes.string,
-    checked: Boolean,
+    checked: PropTypes.bool,
   },
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   computed: {
     classes() {
@@ -28,7 +28,7 @@ export default {
   methods: {
     handleClick() {
       const { checked } = this;
-      this.$emit('input', !checked);
+      this.$emit('update:checked', !checked);
       this.$emit('change', !checked);
     },
   },
@@ -36,7 +36,7 @@ export default {
     const { classes, handleClick, $slots } = this;
     return (
       <div class={classes} onClick={handleClick}>
-        {$slots.default}
+        {$slots.default && $slots.default()}
       </div>
     );
   },

components/tag/Tag.jsx

@@ -1,10 +1,9 @@
-import { Transition } from 'vue';
+import { Transition, inject } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import PropTypes from '../_util/vue-types';
 import getTransitionProps from '../_util/getTransitionProps';
-import omit from 'omit.js';
 import Wave from '../_util/wave';
-import { hasProp, getListeners, getOptionProps } from '../_util/props-util';
+import { hasProp, getOptionProps } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
@@ -29,10 +28,6 @@ const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?
 export default {
   name: 'ATag',
   mixins: [BaseMixin],
-  model: {
-    prop: 'visible',
-    event: 'close.visible',
-  },
   props: {
     prefixCls: PropTypes.string,
     color: PropTypes.string,
@@ -40,8 +35,10 @@ export default {
     visible: PropTypes.bool,
     afterClose: PropTypes.func,
   },
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     let _visible = true;
@@ -68,7 +65,7 @@ export default {
   methods: {
     setVisible(visible, e) {
       this.$emit('close', e);
-      this.$emit('close.visible', false);
+      this.$emit('update:visible', false);
       const afterClose = this.afterClose;
       if (afterClose) {
         // next version remove.
@@ -120,16 +117,11 @@ export default {
 
   render() {
     const { prefixCls: customizePrefixCls } = this.$props;
-    const getPrefixCls = this.configProvider().getPrefixCls;
+    const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('tag', customizePrefixCls);
     const { _visible: visible } = this.$data;
     const tag = (
-      <span
+      <span v-show={visible} class={this.getTagClassName(prefixCls)} style={this.getTagStyle()}>
-        v-show={visible}
-        {...{ on: omit(getListeners(this), ['close']) }}
-        class={this.getTagClassName(prefixCls)}
-        style={this.getTagStyle()}
-      >
         {this.$slots.default()}
         {this.renderCloseIcon()}
       </span>

components/tag/index.js

@@ -1,14 +1,12 @@
 import Tag from './Tag';
 import CheckableTag from './CheckableTag';
-import Base from '../base';
 
 Tag.CheckableTag = CheckableTag;
 
 /* istanbul ignore next */
-Tag.install = function(Vue) {
+Tag.install = function(app) {
-  Vue.use(Base);
+  app.component(Tag.name, Tag);
-  Vue.component(Tag.name, Tag);
+  app.component(Tag.CheckableTag.name, Tag.CheckableTag);
-  Vue.component(Tag.CheckableTag.name, Tag.CheckableTag);
 };
 
 export default Tag;

examples/index.js

@@ -21,6 +21,7 @@ import Col from 'ant-design-vue/col';
 import Row from 'ant-design-vue/row';
 import Tooltip from 'ant-design-vue/tooltip';
 import Descriptions from 'ant-design-vue/descriptions';
+import Tag from 'ant-design-vue/tag';
 import 'ant-design-vue/style.js';
 
 createApp(App)
@@ -44,4 +45,5 @@ createApp(App)
   .use(Row)
   .use(Tooltip)
   .use(Descriptions)
+  .use(Tag)
   .mount('#app');