feat(tag): add trigger-click-on-close prop (tusen-ai#3352)

* feat(tag): expose `stop-click-propagation` prop Signed-off-by: Sepush <[email protected]> * refactor(tag): rename to `trigger-click-on-close` Signed-off-by: Sepush <[email protected]> * Update src/tag/demos/zhCN/index.demo-entry.md * refactor: change default value to false Signed-off-by: Sepush <[email protected]> * Apply suggestions from code review Co-authored-by: 07akioni <[email protected]>
vicenterusso · Jul 30, 2022 · d6b5cd3 · d6b5cd3
1 parent dea1d82
commit d6b5cd3
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 5 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -51,6 +51,7 @@
 - `n-legacy-grid` supports RTL.
 - `n-statistic` supports RTL.
 - `n-thing` supports RTL.
+- `n-tag` add `trigger-click-on-close` prop, closes [#3343](https://github.com/TuSimple/naive-ui/issues/3343).
 - `n-transfer` add `render-source-label` prop.
 - `n-transfer` add `render-target-label` prop.
 - `n-transfer` add `render-source-list` prop.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -51,6 +51,7 @@
 - `n-legacy-grid` 支持 RTL
 - `n-statistic` 支持 RTL
 - `n-thing` 支持 RTL
+- `n-tag` 新增 `trigger-click-on-close` 属性，关闭 [#3343](https://github.com/TuSimple/naive-ui/issues/3343)
 - `n-transfer` 新增 `render-source-label` 属性
 - `n-transfer` 新增 `render-target-label` 属性
 - `n-transfer` 新增 `render-source-list` 属性

diff --git a/src/_internal/selection/src/Selection.tsx b/src/_internal/selection/src/Selection.tsx
@@ -592,7 +592,6 @@ export default defineComponent({
               disabled={disabled}
               onClose={() => this.handleDeleteOption(option)}
               internalCloseFocusable={false}
-              internalStopClickPropagation
             >
               {{
                 default: () =>

diff --git a/src/tag/demos/enUS/closable.demo.vue b/src/tag/demos/enUS/closable.demo.vue
@@ -16,7 +16,13 @@
     <n-tag type="error" closable @close="handleClose">
       Yesterday
     </n-tag>
-    <n-tag type="info" closable @close="handleClose">
+    <n-tag
+      type="info"
+      closable
+      :trigger-click-on-close="false"
+      @click="handleClick"
+      @close="handleClose"
+    >
       I'm Looking Through You
     </n-tag>
   </n-space>
@@ -32,6 +38,9 @@ export default defineComponent({
     return {
       handleClose () {
         message.info('tag close')
+      },
+      handleClick () {
+        message.info('tag click')
       }
     }
   }

diff --git a/src/tag/demos/enUS/index.demo-entry.md b/src/tag/demos/enUS/index.demo-entry.md
@@ -32,6 +32,7 @@ icon.vue
 | round | `boolean` | `false` | Whether the tag has rounded corners. |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |  |
 | strong | `boolean` | `false` | Whether to use strong text | 2.30.0 |
+| trigger-click-on-close | `boolean` | `false` | Whether the tag triggers click on close. | NEXT_VERSION |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |  |
 | on-close | `(e: MouseEvent) => void` | `undefined` | Close clicked callback. |  |
 | on-update:checked | `(value: boolean) => void` | `undefined` | Checked status change callback. |  |

diff --git a/src/tag/demos/zhCN/closable.demo.vue b/src/tag/demos/zhCN/closable.demo.vue
@@ -16,7 +16,12 @@
     <n-tag type="error" closable @close="handleClose">
       手写的从前
     </n-tag>
-    <n-tag type="info" closable @close="handleClose">
+    <n-tag
+      type="info"
+      closable
+      @click="handleClick"
+      @close="handleClose"
+    >
       哪里都是你
     </n-tag>
   </n-space>
@@ -32,6 +37,9 @@ export default defineComponent({
     return {
       handleClose () {
         message.info('tag close')
+      },
+      handleClick () {
+        message.info('tag click')
       }
     }
   }

diff --git a/src/tag/demos/zhCN/index.demo-entry.md b/src/tag/demos/zhCN/index.demo-entry.md
@@ -33,6 +33,7 @@ rtl-debug.vue
 | round | `boolean` | `false` | 是否圆角 |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |  |
 | strong | `boolean` | `false` | 文字是否加粗 | 2.30.0 |
+| trigger-click-on-close | `boolean` | `false` | 关闭时是否触发点击事件 | NEXT_VERSION |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 类型 |
 | on-close | `(e: MouseEvent) => void` | `undefined` | 点击关闭时的回调 |
 | on-update:checked | `(value: boolean) => void` | `undefined` | 选择状态更改时的回调 |

diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx
@@ -44,6 +44,7 @@ export const tagProps = {
   checked: Boolean,
   checkable: Boolean,
   strong: Boolean,
+  triggerClickOnClose: Boolean,
   onClose: [Array, Function] as PropType<MaybeArray<(e: MouseEvent) => void>>,
   onMouseenter: Function as PropType<(e: MouseEvent) => void>,
   onMouseleave: Function as PropType<(e: MouseEvent) => void>,
@@ -54,7 +55,6 @@ export const tagProps = {
     type: Boolean,
     default: true
   },
-  internalStopClickPropagation: Boolean,
   // deprecated
   onCheckedChange: {
     type: Function as PropType<(checked: boolean) => void>,
@@ -118,7 +118,7 @@ export default defineComponent({
       }
     }
     function handleCloseClick (e: MouseEvent): void {
-      if (props.internalStopClickPropagation) {
+      if (!props.triggerClickOnClose) {
         e.stopPropagation()
       }
       if (!props.disabled) {