fix(tag): lacks on-update-checked prop

CHANGELOG.en-US.md

@@ -23,6 +23,8 @@
 - Fix `n-tab-pane` throws error when using v-if.
 - Fix `n-modal` still closes when `on-negative-click` returns `false`.
 - Fix `n-collapse` `defaultExpandedNames` does not work in accrodion mode, closes [#350](https://github.com/TuSimple/naive-ui/issues/350).
+- Fix `n-tag` lacks `on-update-checked` prop.
+
 ## 2.15.1 (2021-06-30)
 
 - Fix no `web-types.json`.

CHANGELOG.zh-CN.md

@@ -23,6 +23,7 @@
 - 修复 `n-tab-pane` 在使用 v-if 时报错
 - 修复 `n-modal` `on-negative-click` 返回 false 时 modal 依然关闭
 - 修复 `n-collapse` 在 accordion 模式下默认指定展开属性无效，关闭 [#350](https://github.com/TuSimple/naive-ui/issues/350)
+- 修复 `n-tag` 缺少 `on-update-checked` 属性
 
 ## 2.15.1 (2021-06-30)
 

src/select/demos/enUS/render-tag.demo.md

@@ -42,7 +42,10 @@ export default defineComponent({
           {
             type: option.type,
             closable: true,
-            onClose: handleClose
+            onClose: (e) => {
+              e.stopPropagation()
+              handleClose()
+            }
           },
           { default: () => option.label }
         )

src/select/demos/zhCN/render-tag.demo.md

@@ -42,7 +42,10 @@ export default defineComponent({
           {
             type: option.type,
             closable: true,
-            onClose: handleClose
+            onClose: (e) => {
+              e.stopPropagation()
+              handleClose()
+            }
           },
           { default: () => option.label }
         )

src/tag/demos/enUS/index.demo-entry.md

@@ -19,15 +19,16 @@ shape
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bordered | `boolean` | `true` |  |
-| checkable | `boolean` | `false` |  |
-| checked | `boolean` | `false` |  |
-| closable | `boolean` | `false` |  |
-| disabled | `boolean` | `false` |  |
-| round | `boolean` | `false` |  |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
-| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` |  |
-| on-update:checked | `(value: boolean) => void` | `undefined` |  |
+| bordered | `boolean` | `true` | Whether the tag has border. |
+| checkable | `boolean` | `false` | Whether the tag is checkable. |
+| checked | `boolean` | `false` | Whether the tag is checked. |
+| closable | `boolean` | `false` | Whether the tag is closable. |
+| disabled | `boolean` | `false` | Whether the tag is disabled. |
+| round | `boolean` | `false` | Whether the tag has round corner. |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |
+| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |
+| on-click | `(e: MouseEvent) => void` | `undefined` | Callback on click. |
+| on-update:checked | `(value: boolean) => void` | `undefined` | Callback on checked status changes. |
 
 ## Slots
 

src/tag/demos/zhCN/index.demo-entry.md

@@ -20,15 +20,16 @@ rtl-debug
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| bordered | `boolean` | `true` |  |
-| checkable | `boolean` | `false` |  |
-| checked | `boolean` | `false` |  |
-| closable | `boolean` | `false` |  |
-| disabled | `boolean` | `false` |  |
-| round | `boolean` | `false` |  |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
-| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` |  |
-| on-update:checked | `(value: boolean) => void` | `undefined` |  |
+| bordered | `boolean` | `true` | 是否有边框 |
+| checkable | `boolean` | `false` | 是否可以选择 |
+| checked | `boolean` | `false` | 是否被选中 |
+| closable | `boolean` | `false` | 是否可关闭 |
+| disabled | `boolean` | `false` | 是否禁用 |
+| round | `boolean` | `false` | 是否圆角 |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
+| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 类型 |
+| on-click | `(e: MouseEvent) => void` | `undefined` | 点击关闭时的回调 |
+| on-update:checked | `(value: boolean) => void` | `undefined` | 选择状态更改时的回调 |
 
 ## Slots
 

src/tag/src/Tag.tsx

@@ -32,14 +32,11 @@ const tagProps = {
     type: Boolean,
     default: false
   },
-  onClose: [Array, Function] as PropType<MaybeArray<() => void>>,
+  onClose: [Array, Function] as PropType<MaybeArray<(e: MouseEvent) => void>>,
   onMouseenter: Function as PropType<(e: MouseEvent) => void>,
   onMouseleave: Function as PropType<(e: MouseEvent) => void>,
-  // eslint-disable-next-line vue/prop-name-casing
-  'onUpdate:checked': {
-    type: Function,
-    default: undefined
-  },
+  'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
+  onUpdateChecked: Function as PropType<(checked: boolean) => void>,
   // private
   internalStopClickPropagation: {
     type: Boolean,
@@ -84,9 +81,11 @@ export default defineComponent({
           const {
             checked,
             onCheckedChange,
-            'onUpdate:checked': onUpdateChecked
+            onUpdateChecked,
+            'onUpdate:checked': _onUpdateChecked
           } = props
           if (onUpdateChecked) onUpdateChecked(!checked)
+          if (_onUpdateChecked) _onUpdateChecked(!checked)
           // deprecated
           if (onCheckedChange) onCheckedChange(!checked)
         }
@@ -98,7 +97,7 @@ export default defineComponent({
       }
       if (!props.disabled) {
         const { onClose } = props
-        if (onClose) call(onClose)
+        if (onClose) call(onClose, e)
       }
     }
     const tagPublicMethods: TagPublicMethods = {