From 04e1a4b12041c62560e175820e1d51b252c59d72 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 2 Jul 2021 17:54:37 +0800 Subject: [PATCH] fix(tag): lacks `on-update-checked` prop --- CHANGELOG.en-US.md | 2 ++ CHANGELOG.zh-CN.md | 1 + src/select/demos/enUS/render-tag.demo.md | 5 ++++- src/select/demos/zhCN/render-tag.demo.md | 5 ++++- src/tag/demos/enUS/index.demo-entry.md | 19 ++++++++++--------- src/tag/demos/zhCN/index.demo-entry.md | 19 ++++++++++--------- src/tag/src/Tag.tsx | 15 +++++++-------- 7 files changed, 38 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f42d19ce4..a4529ab82 100644 --- a/CHANGELOG.en-US.md +++ b/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`. diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 4d45052f1..828a162d2 100644 --- a/CHANGELOG.zh-CN.md +++ b/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) diff --git a/src/select/demos/enUS/render-tag.demo.md b/src/select/demos/enUS/render-tag.demo.md index 717ade597..de4994379 100644 --- a/src/select/demos/enUS/render-tag.demo.md +++ b/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 } ) diff --git a/src/select/demos/zhCN/render-tag.demo.md b/src/select/demos/zhCN/render-tag.demo.md index dbb71a6a7..0c7a3d19d 100644 --- a/src/select/demos/zhCN/render-tag.demo.md +++ b/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 } ) diff --git a/src/tag/demos/enUS/index.demo-entry.md b/src/tag/demos/enUS/index.demo-entry.md index 5d1f71bf8..d58a72c6b 100644 --- a/src/tag/demos/enUS/index.demo-entry.md +++ b/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 diff --git a/src/tag/demos/zhCN/index.demo-entry.md b/src/tag/demos/zhCN/index.demo-entry.md index 0de3ce4a2..ca156d3a4 100644 --- a/src/tag/demos/zhCN/index.demo-entry.md +++ b/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 diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx index ef01e930e..d81ec9a1d 100644 --- a/src/tag/src/Tag.tsx +++ b/src/tag/src/Tag.tsx @@ -32,14 +32,11 @@ const tagProps = { type: Boolean, default: false }, - onClose: [Array, Function] as PropType void>>, + onClose: [Array, Function] as PropType 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 = {