From 36a311cf496b3851a033cd03caa11a42fb6856c7 Mon Sep 17 00:00:00 2001 From: Zheng-Changfu Date: Thu, 19 Dec 2024 17:25:53 +0800 Subject: [PATCH 01/11] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=20inset=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=EF=BC=8C=E5=9B=A0=E4=B8=BA=E5=9C=A8=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=B5=8F=E8=A7=88=E5=99=A8=E4=B8=AD=E6=9C=89=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=E6=80=A7=E9=97=AE=E9=A2=98=20(#6605)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: inset 替换为 top right bottom left * fix: 修复 rtlInset 方法无效问题 * docs: update changelog --- CHANGELOG.zh-CN.md | 6 ++ src/_internal/scrollbar/src/Scrollbar.tsx | 64 ++++++++++++++++--- .../scrollbar/src/styles/index.cssr.ts | 20 ++++-- src/_utils/css/rtl-inset.ts | 2 +- .../src/styles/index.cssr.ts | 8 ++- src/float-button/src/styles/index.cssr.ts | 10 ++- src/loading-bar/demos/enUS/container.demo.vue | 5 +- src/loading-bar/demos/zhCN/container.demo.vue | 5 +- src/popover/src/Popover.tsx | 10 ++- 9 files changed, 110 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 163dc6a4934..65660d74211 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,11 @@ # CHANGELOG +## NEXT_VERSION + +### Fixes + +- 修复 `n-scrollbar`、`n-float-button`、`n-float-button-group`、`n-popover` 组件中的 `inset` 属性在部分浏览器中有兼容性问题，close [#6604](https://github.com/tusen-ai/naive-ui/issues/6604)，close [#6602](https://github.com/tusen-ai/naive-ui/issues/6602) + ## 2.40.3 `2024-12-02` diff --git a/src/_internal/scrollbar/src/Scrollbar.tsx b/src/_internal/scrollbar/src/Scrollbar.tsx index ef2b6f8cdbb..86e5fa00015 100644 --- a/src/_internal/scrollbar/src/Scrollbar.tsx +++ b/src/_internal/scrollbar/src/Scrollbar.tsx @@ -6,7 +6,7 @@ import type { } from '../../../_utils' import type { ScrollbarTheme } from '../styles' import { off, on } from 'evtd' -import { depx, getPreciseEventTarget } from 'seemly' +import { depx, getPadding, getPreciseEventTarget } from 'seemly' import { useIsIos } from 'vooks' import { computed, @@ -701,6 +701,43 @@ const Scrollbar = defineComponent({ railColor } } = themeRef.value + + const { + top: railTopHorizontalTop, + right: railRightHorizontalTop, + bottom: railBottomHorizontalTop, + left: railLeftHorizontalTop + } = getPadding(railInsetHorizontalTop) + + const { + top: railTopHorizontalBottom, + right: railRightHorizontalBottom, + bottom: railBottomHorizontalBottom, + left: railLeftHorizontalBottom + } = getPadding(railInsetHorizontalBottom) + + const { + top: railTopVerticalRight, + right: railRightVerticalRight, + bottom: railBottomVerticalRight, + left: railLeftVerticalRight + } = getPadding( + rtlEnabledRef?.value + ? rtlInset(railInsetVerticalRight) + : railInsetVerticalRight + ) + + const { + top: railTopVerticalLeft, + right: railRightVerticalLeft, + bottom: railBottomVerticalLeft, + left: railLeftVerticalLeft + } = getPadding( + rtlEnabledRef?.value + ? rtlInset(railInsetVerticalLeft) + : railInsetVerticalLeft + ) + return { '--n-scrollbar-bezier': cubicBezierEaseInOut, '--n-scrollbar-color': color, @@ -708,14 +745,23 @@ const Scrollbar = defineComponent({ '--n-scrollbar-border-radius': borderRadius, '--n-scrollbar-width': width, '--n-scrollbar-height': height, - '--n-scrollbar-rail-inset-horizontal-top': railInsetHorizontalTop, - '--n-scrollbar-rail-inset-horizontal-bottom': railInsetHorizontalBottom, - '--n-scrollbar-rail-inset-vertical-right': rtlEnabledRef?.value - ? rtlInset(railInsetVerticalRight) - : railInsetVerticalRight, - '--n-scrollbar-rail-inset-vertical-left': rtlEnabledRef?.value - ? rtlInset(railInsetVerticalLeft) - : railInsetVerticalLeft, + '--n-scrollbar-rail-top-horizontal-top': railTopHorizontalTop, + '--n-scrollbar-rail-right-horizontal-top': railRightHorizontalTop, + '--n-scrollbar-rail-bottom-horizontal-top': railBottomHorizontalTop, + '--n-scrollbar-rail-left-horizontal-top': railLeftHorizontalTop, + '--n-scrollbar-rail-top-horizontal-bottom': railTopHorizontalBottom, + '--n-scrollbar-rail-right-horizontal-bottom': railRightHorizontalBottom, + '--n-scrollbar-rail-bottom-horizontal-bottom': + railBottomHorizontalBottom, + '--n-scrollbar-rail-left-horizontal-bottom': railLeftHorizontalBottom, + '--n-scrollbar-rail-top-vertical-right': railTopVerticalRight, + '--n-scrollbar-rail-right-vertical-right': railRightVerticalRight, + '--n-scrollbar-rail-bottom-vertical-right': railBottomVerticalRight, + '--n-scrollbar-rail-left-vertical-right': railLeftVerticalRight, + '--n-scrollbar-rail-top-vertical-left': railTopVerticalLeft, + '--n-scrollbar-rail-right-vertical-left': railRightVerticalLeft, + '--n-scrollbar-rail-bottom-vertical-left': railBottomVerticalLeft, + '--n-scrollbar-rail-left-vertical-left': railLeftVerticalLeft, '--n-scrollbar-rail-color': railColor } }) diff --git a/src/_internal/scrollbar/src/styles/index.cssr.ts b/src/_internal/scrollbar/src/styles/index.cssr.ts index 1c851ac3643..eb6dff7fac6 100644 --- a/src/_internal/scrollbar/src/styles/index.cssr.ts +++ b/src/_internal/scrollbar/src/styles/index.cssr.ts @@ -61,10 +61,16 @@ export default cB('scrollbar', ` ]) ]), cM('horizontal--top', ` - inset: var(--n-scrollbar-rail-inset-horizontal-top); + top: var(--n-scrollbar-rail-top-horizontal-top); + right: var(--n-scrollbar-rail-right-horizontal-top); + bottom: var(--n-scrollbar-rail-bottom-horizontal-top); + left: var(--n-scrollbar-rail-left-horizontal-top); `), cM('horizontal--bottom', ` - inset: var(--n-scrollbar-rail-inset-horizontal-bottom); + top: var(--n-scrollbar-rail-top-horizontal-bottom); + right: var(--n-scrollbar-rail-right-horizontal-bottom); + bottom: var(--n-scrollbar-rail-bottom-horizontal-bottom); + left: var(--n-scrollbar-rail-left-horizontal-bottom); `), cM('vertical', ` width: var(--n-scrollbar-width); @@ -78,10 +84,16 @@ export default cB('scrollbar', ` ]) ]), cM('vertical--left', ` - inset: var(--n-scrollbar-rail-inset-vertical-left); + top: var(--n-scrollbar-rail-top-vertical-left); + right: var(--n-scrollbar-rail-right-vertical-left); + bottom: var(--n-scrollbar-rail-bottom-vertical-left); + left: var(--n-scrollbar-rail-left-vertical-left); `), cM('vertical--right', ` - inset: var(--n-scrollbar-rail-inset-vertical-right); + top: var(--n-scrollbar-rail-top-vertical-right); + right: var(--n-scrollbar-rail-right-vertical-right); + bottom: var(--n-scrollbar-rail-bottom-vertical-right); + left: var(--n-scrollbar-rail-left-vertical-right); `), cM('disabled', [ c('>', [ diff --git a/src/_utils/css/rtl-inset.ts b/src/_utils/css/rtl-inset.ts index 17039e50ad0..4e9e3aeae5b 100644 --- a/src/_utils/css/rtl-inset.ts +++ b/src/_utils/css/rtl-inset.ts @@ -2,5 +2,5 @@ import { getPadding } from 'seemly' export function rtlInset(inset: string): string { const { left, right, top, bottom } = getPadding(inset) - return `${top} ${right} ${bottom} ${left}` + return `${top} ${left} ${bottom} ${right}` } diff --git a/src/float-button-group/src/styles/index.cssr.ts b/src/float-button-group/src/styles/index.cssr.ts index c06fcb1238e..a585af711b8 100644 --- a/src/float-button-group/src/styles/index.cssr.ts +++ b/src/float-button-group/src/styles/index.cssr.ts @@ -37,7 +37,13 @@ export default cB('float-button-group', [ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; `), - cE('fill', 'inset: 4px; border-radius: var(--n-border-radius-square);') + cE('fill', ` + top: 4px; + right: 4px; + bottom: 4px; + left: 4px; + border-radius: var(--n-border-radius-square); + `) ]) ]), cM('circle-shape', [ diff --git a/src/float-button/src/styles/index.cssr.ts b/src/float-button/src/styles/index.cssr.ts index a61706e394d..47a44d87fe2 100644 --- a/src/float-button/src/styles/index.cssr.ts +++ b/src/float-button/src/styles/index.cssr.ts @@ -34,7 +34,10 @@ export default cB('float-button', ` `), cE('fill', ` position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0 + left: 0; transition: background-color .3s var(--n-bezier); border-radius: inherit; `), @@ -93,7 +96,10 @@ export default cB('float-button', ` opacity: 0; transform: scale(0.75); position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; display: flex; align-items: center; justify-content: center; diff --git a/src/loading-bar/demos/enUS/container.demo.vue b/src/loading-bar/demos/enUS/container.demo.vue index ada30472566..d204579428c 100644 --- a/src/loading-bar/demos/enUS/container.demo.vue +++ b/src/loading-bar/demos/enUS/container.demo.vue @@ -49,7 +49,10 @@ export default defineComponent({ ref="loadingBarTargetRef" style=" position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; border-radius: var(--n-border-radius); overflow: hidden; pointer-events: none; diff --git a/src/loading-bar/demos/zhCN/container.demo.vue b/src/loading-bar/demos/zhCN/container.demo.vue index fe12b7db898..300f921f547 100644 --- a/src/loading-bar/demos/zhCN/container.demo.vue +++ b/src/loading-bar/demos/zhCN/container.demo.vue @@ -41,7 +41,10 @@ export default defineComponent({ ref="loadingBarTargetRef" style=" position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; border-radius: var(--n-border-radius); overflow: hidden; pointer-events: none; diff --git a/src/popover/src/Popover.tsx b/src/popover/src/Popover.tsx index 62df826a32b..063ef8f9b7f 100644 --- a/src/popover/src/Popover.tsx +++ b/src/popover/src/Popover.tsx @@ -583,7 +583,15 @@ export default defineComponent({ return [ this.internalTrapFocus && mergedShow ? withDirectives( -
, +
, [ [ zindexable, From 5de9c45707ec464809ba3116fc6406369f2c064e Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 19 Dec 2024 17:30:29 +0800 Subject: [PATCH 02/11] fix: replaceable vnode caused memory leak --- src/_internal/icons/Cancel.tsx | 5 +- src/_internal/icons/Clear.tsx | 5 +- src/_internal/icons/Close.tsx | 5 +- src/_internal/icons/Date.tsx | 5 +- src/_internal/icons/Download.tsx | 5 +- src/_internal/icons/Error.tsx | 5 +- src/_internal/icons/Info.tsx | 5 +- src/_internal/icons/Retry.tsx | 5 +- src/_internal/icons/RotateClockwise.tsx | 5 +- .../icons/RotateCounterclockwise.tsx | 5 +- src/_internal/icons/Success.tsx | 5 +- src/_internal/icons/Time.tsx | 5 +- src/_internal/icons/To.tsx | 5 +- src/_internal/icons/Trash.tsx | 5 +- src/_internal/icons/Warning.tsx | 5 +- src/_internal/icons/ZoomIn.tsx | 5 +- src/_internal/icons/ZoomOut.tsx | 5 +- src/_internal/icons/replaceable.tsx | 12 +- test.html | 117 ++++++++++++++++++ 19 files changed, 160 insertions(+), 54 deletions(-) create mode 100644 test.html diff --git a/src/_internal/icons/Cancel.tsx b/src/_internal/icons/Cancel.tsx index f93c15c9fba..15b27a69c36 100644 --- a/src/_internal/icons/Cancel.tsx +++ b/src/_internal/icons/Cancel.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'cancel', +export default replaceable('cancel', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/Clear.tsx b/src/_internal/icons/Clear.tsx index b3b86232406..8e1e88897e6 100644 --- a/src/_internal/icons/Clear.tsx +++ b/src/_internal/icons/Clear.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'clear', +export default replaceable('clear', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/Close.tsx b/src/_internal/icons/Close.tsx index f1c418222cc..b605e01eabf 100644 --- a/src/_internal/icons/Close.tsx +++ b/src/_internal/icons/Close.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'close', +export default replaceable('close', () => ( -) +)) diff --git a/src/_internal/icons/Date.tsx b/src/_internal/icons/Date.tsx index 6f930cd15f8..a475960a962 100644 --- a/src/_internal/icons/Date.tsx +++ b/src/_internal/icons/Date.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'date', +export default replaceable('date', () => ( -) +)) diff --git a/src/_internal/icons/Download.tsx b/src/_internal/icons/Download.tsx index c2ba5f7c4e6..a1926ce6a75 100644 --- a/src/_internal/icons/Download.tsx +++ b/src/_internal/icons/Download.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'download', +export default replaceable('download', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/Error.tsx b/src/_internal/icons/Error.tsx index b3af34e1edd..390b44f65f6 100644 --- a/src/_internal/icons/Error.tsx +++ b/src/_internal/icons/Error.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'error', +export default replaceable('error', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/Info.tsx b/src/_internal/icons/Info.tsx index 42e098d79ac..104e82a3021 100644 --- a/src/_internal/icons/Info.tsx +++ b/src/_internal/icons/Info.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'info', +export default replaceable('info', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/Retry.tsx b/src/_internal/icons/Retry.tsx index f272847ecd8..7bc2e29faef 100644 --- a/src/_internal/icons/Retry.tsx +++ b/src/_internal/icons/Retry.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'retry', +export default replaceable('retry', () => ( -) +)) diff --git a/src/_internal/icons/RotateClockwise.tsx b/src/_internal/icons/RotateClockwise.tsx index 82d7decc12f..fcc1f83dbff 100644 --- a/src/_internal/icons/RotateClockwise.tsx +++ b/src/_internal/icons/RotateClockwise.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'rotateClockwise', +export default replaceable('rotateClockwise', () => ( -) +)) diff --git a/src/_internal/icons/RotateCounterclockwise.tsx b/src/_internal/icons/RotateCounterclockwise.tsx index 9bae8b0f904..68d44e60d3d 100644 --- a/src/_internal/icons/RotateCounterclockwise.tsx +++ b/src/_internal/icons/RotateCounterclockwise.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'rotateClockwise', +export default replaceable('rotateClockwise', () => ( -) +)) diff --git a/src/_internal/icons/Success.tsx b/src/_internal/icons/Success.tsx index 9798473af31..2a6da757d01 100644 --- a/src/_internal/icons/Success.tsx +++ b/src/_internal/icons/Success.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'success', +export default replaceable('success', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/Time.tsx b/src/_internal/icons/Time.tsx index e3f40debee4..1d4a91a05a6 100644 --- a/src/_internal/icons/Time.tsx +++ b/src/_internal/icons/Time.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'time', +export default replaceable('time', () => ( -) +)) diff --git a/src/_internal/icons/To.tsx b/src/_internal/icons/To.tsx index da531afcb78..06d9996581a 100644 --- a/src/_internal/icons/To.tsx +++ b/src/_internal/icons/To.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'to', +export default replaceable('to', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/Trash.tsx b/src/_internal/icons/Trash.tsx index 9a803494994..bf92702daf2 100644 --- a/src/_internal/icons/Trash.tsx +++ b/src/_internal/icons/Trash.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'trash', +export default replaceable('trash', () => ( -) +)) diff --git a/src/_internal/icons/Warning.tsx b/src/_internal/icons/Warning.tsx index 9579fc33503..e921cdaef1f 100644 --- a/src/_internal/icons/Warning.tsx +++ b/src/_internal/icons/Warning.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'warning', +export default replaceable('warning', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/icons/ZoomIn.tsx b/src/_internal/icons/ZoomIn.tsx index 574003d0c46..02310e12aa7 100644 --- a/src/_internal/icons/ZoomIn.tsx +++ b/src/_internal/icons/ZoomIn.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'zoomIn', +export default replaceable('zoomIn', () => ( -) +)) diff --git a/src/_internal/icons/ZoomOut.tsx b/src/_internal/icons/ZoomOut.tsx index b56592b2279..14d1ccf21f7 100644 --- a/src/_internal/icons/ZoomOut.tsx +++ b/src/_internal/icons/ZoomOut.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'zoomOut', +export default replaceable('zoomOut', () => ( -) +)) diff --git a/src/_internal/icons/replaceable.tsx b/src/_internal/icons/replaceable.tsx index 377b3aa122d..7fdf7ce2fe2 100644 --- a/src/_internal/icons/replaceable.tsx +++ b/src/_internal/icons/replaceable.tsx @@ -1,9 +1,15 @@ +import type { VNode } from 'vue' import type { GlobalIconConfig } from '../../config-provider/src/internal-interface' import { upperFirst } from 'lodash-es' -import { defineComponent, inject } from 'vue' +import { defineComponent, h, inject } from 'vue' import { configProviderInjectionKey } from '../../config-provider/src/context' -export function replaceable(name: keyof GlobalIconConfig, icon: JSX.Element) { +export function replaceable(name: keyof GlobalIconConfig, icon: () => VNode) { + const IconComponent = defineComponent({ + render() { + return icon() + } + }) return defineComponent({ name: upperFirst(name), setup() { @@ -13,7 +19,7 @@ export function replaceable(name: keyof GlobalIconConfig, icon: JSX.Element) { )?.mergedIconsRef return () => { const iconOverride = mergedIconsRef?.value?.[name] - return iconOverride ? iconOverride() : icon + return iconOverride ? iconOverride() : } } }) diff --git a/test.html b/test.html new file mode 100644 index 00000000000..b87263cd573 --- /dev/null +++ b/test.html @@ -0,0 +1,117 @@ + + + + Just a moment... + + + + + + + + +
+
+ +
+
+ + + From 41db9e6aa49b8b87bce9bacad9dcb92c92f1a9bd Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 19 Dec 2024 17:50:44 +0800 Subject: [PATCH 03/11] fix: lint --- scripts/utils/loader.js | 4 +- src/_internal/icons/Attach.tsx | 5 +- src/_internal/select-menu/src/SelectMenu.tsx | 10 +- src/_internal/selection/src/Selection.tsx | 40 ++-- src/_utils/cssr/index.ts | 2 +- src/alert/src/Alert.tsx | 14 +- src/avatar/src/Avatar.tsx | 58 ++--- src/back-top/src/BackTop.tsx | 34 +-- src/badge/src/Badge.tsx | 30 +-- src/button/src/Button.tsx | 110 +++++----- src/button/src/styles/index.cssr.ts | 4 +- src/card/src/Card.tsx | 22 +- src/carousel/src/Carousel.tsx | 22 +- src/cascader/src/CascaderOption.tsx | 16 +- src/cascader/src/CascaderSelectMenu.tsx | 58 ++--- src/checkbox/src/Checkbox.tsx | 10 +- src/code/src/Code.tsx | 14 +- src/color-picker/src/ColorPicker.tsx | 28 +-- src/config-provider/src/ConfigProvider.ts | 12 +- .../demos/enUS/switchable-editable.demo.md | 16 +- .../demos/zhCN/switchable-editable.demo.md | 16 +- src/data-table/src/DataTable.tsx | 10 +- src/data-table/src/TableParts/Body.tsx | 14 +- src/data-table/src/use-table-data.ts | 78 +++---- src/date-picker/src/DatePicker.tsx | 42 ++-- src/date-picker/src/panel/date.tsx | 8 +- src/date-picker/src/panel/daterange.tsx | 8 +- src/date-picker/src/panel/datetime.tsx | 12 +- src/date-picker/src/panel/datetimerange.tsx | 8 +- src/date-picker/src/panel/month.tsx | 12 +- src/date-picker/src/panel/monthrange.tsx | 32 +-- src/date-picker/src/panel/panelHeader.tsx | 40 ++-- src/date-picker/src/panel/use-calendar.ts | 6 +- .../src/panel/use-dual-calendar.ts | 40 ++-- src/descriptions/src/Descriptions.tsx | 24 +-- src/dialog/src/Dialog.tsx | 38 ++-- src/drawer/src/DrawerBodyWrapper.tsx | 202 +++++++++--------- src/dropdown/src/Dropdown.tsx | 10 +- src/dropdown/src/DropdownMenu.tsx | 12 +- src/empty/src/Empty.tsx | 20 +- src/float-button/src/FloatButton.tsx | 10 +- src/form/src/FormItem.tsx | 32 +-- src/global-style/src/GlobalStyle.ts | 8 +- src/gradient-text/src/GradientText.tsx | 10 +- src/icon/src/Icon.ts | 10 +- src/image/src/Image.tsx | 56 ++--- src/input/src/Input.tsx | 36 ++-- src/input/src/InputGroupLabel.tsx | 10 +- src/layout/src/Layout.tsx | 14 +- src/layout/src/LayoutFooter.tsx | 10 +- src/layout/src/LayoutHeader.tsx | 10 +- src/layout/src/LayoutSider.tsx | 10 +- src/menu/src/Menu.tsx | 10 +- src/message/src/Message.tsx | 10 +- src/modal/src/BodyWrapper.tsx | 192 ++++++++--------- src/notification/src/Notification.tsx | 10 +- src/pagination/src/Pagination.tsx | 20 +- src/popconfirm/src/PopconfirmPanel.tsx | 10 +- src/popover/src/Popover.tsx | 38 ++-- src/popover/src/PopoverBody.tsx | 12 +- src/progress/src/Progress.tsx | 10 +- src/radio/src/Radio.tsx | 10 +- src/radio/src/RadioGroup.tsx | 10 +- src/rate/src/Rate.tsx | 32 +-- src/result/src/Result.tsx | 30 +-- src/space/src/Space.tsx | 112 +++++----- src/spin/src/Spin.tsx | 16 +- src/steps/src/Step.tsx | 18 +- src/switch/src/Switch.tsx | 14 +- src/table/src/Table.tsx | 14 +- src/tabs/src/Tabs.tsx | 152 ++++++------- src/tag/src/Tag.tsx | 40 ++-- src/time-picker/src/Panel.tsx | 8 +- src/time-picker/src/TimePicker.tsx | 18 +- src/time-picker/src/utils.ts | 10 +- src/timeline/src/TimelineItem.tsx | 22 +- src/transfer/src/TransferListItem.tsx | 8 +- src/tree-select/src/TreeSelect.tsx | 20 +- src/tree/src/Tree.tsx | 36 ++-- src/tree/src/TreeNode.tsx | 16 +- src/tree/src/TreeNodeContent.tsx | 24 +-- src/tree/src/keyboard.tsx | 8 +- src/typography/src/create-header.ts | 10 +- src/typography/src/p.tsx | 10 +- src/typography/src/text.tsx | 10 +- src/upload/src/Upload.tsx | 8 +- src/upload/src/UploadFile.tsx | 8 +- 87 files changed, 1166 insertions(+), 1167 deletions(-) diff --git a/scripts/utils/loader.js b/scripts/utils/loader.js index 27f4d21ad91..668e55d4895 100644 --- a/scripts/utils/loader.js +++ b/scripts/utils/loader.js @@ -48,8 +48,8 @@ function getPartsOfMdDemo(tokens) { function createBlockTemplate(tag, content, attrs) { const attrsStr = attrs ? Object.keys(attrs).reduce((attrsStr, key) => { - return `${attrsStr} ${key}="${attrs[key]}"` - }, '') + return `${attrsStr} ${key}="${attrs[key]}"` + }, '') : '' return `<${tag}${attrsStr}> ${content} diff --git a/src/_internal/icons/Attach.tsx b/src/_internal/icons/Attach.tsx index 991cff956fb..f8a73584071 100644 --- a/src/_internal/icons/Attach.tsx +++ b/src/_internal/icons/Attach.tsx @@ -1,8 +1,7 @@ import { h } from 'vue' import { replaceable } from './replaceable' -export default replaceable( - 'attach', +export default replaceable('attach', () => ( @@ -10,4 +9,4 @@ export default replaceable( -) +)) diff --git a/src/_internal/select-menu/src/SelectMenu.tsx b/src/_internal/select-menu/src/SelectMenu.tsx index 232683fb279..eab3e46b7b1 100644 --- a/src/_internal/select-menu/src/SelectMenu.tsx +++ b/src/_internal/select-menu/src/SelectMenu.tsx @@ -411,11 +411,11 @@ export default defineComponent({ const { inlineThemeDisabled } = props const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'internal-select-menu', - computed(() => props.size[0]), - cssVarsRef, - props - ) + 'internal-select-menu', + computed(() => props.size[0]), + cssVarsRef, + props + ) : undefined const exposedProps: InternalExposedProps = { selfRef, diff --git a/src/_internal/selection/src/Selection.tsx b/src/_internal/selection/src/Selection.tsx index c3868ab6725..600f678cb5f 100644 --- a/src/_internal/selection/src/Selection.tsx +++ b/src/_internal/selection/src/Selection.tsx @@ -152,16 +152,16 @@ export default defineComponent({ return props.selectedOption ? props.renderTag ? props.renderTag({ - option: props.selectedOption, - handleClose: () => {} - }) + option: props.selectedOption, + handleClose: () => {} + }) : props.renderLabel ? props.renderLabel(props.selectedOption as never, true) : render( - props.selectedOption[props.labelField], - props.selectedOption, - true - ) + props.selectedOption[props.labelField], + props.selectedOption, + true + ) : props.placeholder }) const labelRef = computed(() => { @@ -541,13 +541,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'internal-selection', - computed(() => { - return props.size[0] - }), - cssVarsRef, - props - ) + 'internal-selection', + computed(() => { + return props.size[0] + }), + cssVarsRef, + props + ) : undefined return { mergedTheme: themeRef, @@ -903,9 +903,9 @@ export default defineComponent({
{renderTag ? renderTag({ - option: this.selectedOption!, - handleClose: () => {} - }) + option: this.selectedOption!, + handleClose: () => {} + }) : renderLabel ? renderLabel(this.selectedOption!, true) : render(this.label, this.selectedOption, true)} @@ -942,9 +942,9 @@ export default defineComponent({
{renderTag ? renderTag({ - option: this.selectedOption!, - handleClose: () => {} - }) + option: this.selectedOption!, + handleClose: () => {} + }) : renderLabel ? renderLabel(this.selectedOption!, true) : render(this.label, this.selectedOption, true)} diff --git a/src/_utils/cssr/index.ts b/src/_utils/cssr/index.ts index ac88c99a803..7c4782870bc 100644 --- a/src/_utils/cssr/index.ts +++ b/src/_utils/cssr/index.ts @@ -45,7 +45,7 @@ function createKey

( + (suffix === 'default' ? '' : suffix.replace(/^[a-z]/, startChar => - startChar.toUpperCase()))) as any + startChar.toUpperCase()))) as any } export { diff --git a/src/alert/src/Alert.tsx b/src/alert/src/Alert.tsx index fea59045ac9..3a3c68a635b 100644 --- a/src/alert/src/Alert.tsx +++ b/src/alert/src/Alert.tsx @@ -141,13 +141,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'alert', - computed(() => { - return props.type[0] - }), - cssVarsRef, - props - ) + 'alert', + computed(() => { + return props.type[0] + }), + cssVarsRef, + props + ) : undefined const visibleRef = ref(true) const doAfterLeave = (): void => { diff --git a/src/avatar/src/Avatar.tsx b/src/avatar/src/Avatar.tsx index 43d28a85c88..a606ed5446f 100644 --- a/src/avatar/src/Avatar.tsx +++ b/src/avatar/src/Avatar.tsx @@ -165,35 +165,35 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'avatar', - computed(() => { - const size = mergedSizeRef.value - const round = mergedRoundRef.value - const bordered = mergedBorderedRef.value - const { color } = props - let hash = '' - if (size) { - if (typeof size === 'number') { - hash += `a${size}` + 'avatar', + computed(() => { + const size = mergedSizeRef.value + const round = mergedRoundRef.value + const bordered = mergedBorderedRef.value + const { color } = props + let hash = '' + if (size) { + if (typeof size === 'number') { + hash += `a${size}` + } + else { + hash += size[0] + } } - else { - hash += size[0] + if (round) { + hash += 'b' } - } - if (round) { - hash += 'b' - } - if (bordered) { - hash += 'c' - } - if (color) { - hash += color2Class(color) - } - return hash - }), - cssVarsRef, - props - ) + if (bordered) { + hash += 'c' + } + if (color) { + hash += color2Class(color) + } + return hash + }), + cssVarsRef, + props + ) : undefined const shouldStartLoadingRef = ref(!props.lazy) @@ -281,8 +281,8 @@ export default defineComponent({ img = this.renderFallback ? this.renderFallback() : resolveSlot($slots.fallback, () => [ - - ]) + + ]) } else { img = resolveWrappedSlot($slots.default, (children) => { diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx index 0afff47b5b9..ff4de8cf9ab 100644 --- a/src/back-top/src/BackTop.tsx +++ b/src/back-top/src/BackTop.tsx @@ -288,23 +288,23 @@ export default defineComponent({ this.onRender?.() return this.mergedShow ? h( - 'div', - mergeProps(this.$attrs, { - class: [ - `${mergedClsPrefix}-back-top`, - this.themeClass, - this.transitionDisabled - && `${mergedClsPrefix}-back-top--transition-disabled` - ], - style: [this.style, this.cssVars], - onClick: this.handleClick - }), - resolveSlot(this.$slots.default, () => [ - - {{ default: () => BackTopIcon }} - - ]) - ) + 'div', + mergeProps(this.$attrs, { + class: [ + `${mergedClsPrefix}-back-top`, + this.themeClass, + this.transitionDisabled + && `${mergedClsPrefix}-back-top--transition-disabled` + ], + style: [this.style, this.cssVars], + onClick: this.handleClick + }), + resolveSlot(this.$slots.default, () => [ + + {{ default: () => BackTopIcon }} + + ]) + ) : null } }} diff --git a/src/badge/src/Badge.tsx b/src/badge/src/Badge.tsx index d19c292593e..c6cfe7c671e 100644 --- a/src/badge/src/Badge.tsx +++ b/src/badge/src/Badge.tsx @@ -103,21 +103,21 @@ export default defineComponent({ const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'badge', - computed(() => { - let hash = '' - const { type, color } = props - if (type) { - hash += type[0] - } - if (color) { - hash += color2Class(color) - } - return hash - }), - cssVarsRef, - props - ) + 'badge', + computed(() => { + let hash = '' + const { type, color } = props + if (type) { + hash += type[0] + } + if (color) { + hash += color2Class(color) + } + return hash + }), + cssVarsRef, + props + ) : undefined const offsetStyleRef = computed(() => { diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx index 191c788ea32..0a42377f76e 100644 --- a/src/button/src/Button.tsx +++ b/src/button/src/Button.tsx @@ -316,23 +316,23 @@ const Button = defineComponent({ colorProps = { '--n-color': isColoredType ? changeColor(mergedTextColor, { - alpha: Number(self.colorOpacitySecondary) - }) + alpha: Number(self.colorOpacitySecondary) + }) : self.colorSecondary, '--n-color-hover': isColoredType ? changeColor(mergedTextColor, { - alpha: Number(self.colorOpacitySecondaryHover) - }) + alpha: Number(self.colorOpacitySecondaryHover) + }) : self.colorSecondaryHover, '--n-color-pressed': isColoredType ? changeColor(mergedTextColor, { - alpha: Number(self.colorOpacitySecondaryPressed) - }) + alpha: Number(self.colorOpacitySecondaryPressed) + }) : self.colorSecondaryPressed, '--n-color-focus': isColoredType ? changeColor(mergedTextColor, { - alpha: Number(self.colorOpacitySecondaryHover) - }) + alpha: Number(self.colorOpacitySecondaryHover) + }) : self.colorSecondaryHover, '--n-color-disabled': self.colorSecondary, '--n-ripple-color': '#0000', @@ -486,53 +486,53 @@ const Button = defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'button', - computed(() => { - let hash = '' - const { - dashed, - type, - ghost, - text, - color, - round, - circle, - textColor, - secondary, - tertiary, - quaternary, - strong - } = props - if (dashed) - hash += 'a' - if (ghost) - hash += 'b' - if (text) - hash += 'c' - if (round) - hash += 'd' - if (circle) - hash += 'e' - if (secondary) - hash += 'f' - if (tertiary) - hash += 'g' - if (quaternary) - hash += 'h' - if (strong) - hash += 'i' - if (color) - hash += `j${color2Class(color)}` - if (textColor) - hash += `k${color2Class(textColor)}` - const { value: size } = mergedSizeRef - hash += `l${size[0]}` - hash += `m${type[0]}` - return hash - }), - cssVarsRef, - props - ) + 'button', + computed(() => { + let hash = '' + const { + dashed, + type, + ghost, + text, + color, + round, + circle, + textColor, + secondary, + tertiary, + quaternary, + strong + } = props + if (dashed) + hash += 'a' + if (ghost) + hash += 'b' + if (text) + hash += 'c' + if (round) + hash += 'd' + if (circle) + hash += 'e' + if (secondary) + hash += 'f' + if (tertiary) + hash += 'g' + if (quaternary) + hash += 'h' + if (strong) + hash += 'i' + if (color) + hash += `j${color2Class(color)}` + if (textColor) + hash += `k${color2Class(textColor)}` + const { value: size } = mergedSizeRef + hash += `l${size[0]}` + hash += `m${type[0]}` + return hash + }), + cssVarsRef, + props + ) : undefined return { diff --git a/src/button/src/styles/index.cssr.ts b/src/button/src/styles/index.cssr.ts index e06eb2ab3d6..804ab429d4e 100644 --- a/src/button/src/styles/index.cssr.ts +++ b/src/button/src/styles/index.cssr.ts @@ -162,8 +162,8 @@ export default c([ ]), (isBrowser && 'MozBoxSizing' in document.createElement('div').style) ? c('&::moz-focus-inner', { - border: 0 - }) + border: 0 + }) : null, cE('border, state-border', ` position: absolute; diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx index 4371600a7fd..9eee7ddd7d3 100644 --- a/src/card/src/Card.tsx +++ b/src/card/src/Card.tsx @@ -164,13 +164,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'card', - computed(() => { - return props.size[0] - }), - cssVarsRef, - props - ) + 'card', + computed(() => { + return props.size[0] + }), + cssVarsRef, + props + ) : undefined return { rtlEnabled: rtlEnabledRef, @@ -240,8 +240,8 @@ export default defineComponent({ const { title } = this const mergedChildren = title ? ensureValidVNode( - typeof title === 'function' ? [title()] : [title] - ) + typeof title === 'function' ? [title()] : [title] + ) : children return mergedChildren || this.closable ? (

{userWantsControl ? slides.map((slide, i) => ( -
- {withDirectives( - - {{ - default: () => slide - }} - , - [[vShow, this.isActive(i)]] - )} -
- )) +
+ {withDirectives( + + {{ + default: () => slide + }} + , + [[vShow, this.isActive(i)]] + )} +
+ )) : slides}
) diff --git a/src/cascader/src/CascaderOption.tsx b/src/cascader/src/CascaderOption.tsx index bed6f4f5d6f..9e8844acaa6 100644 --- a/src/cascader/src/CascaderOption.tsx +++ b/src/cascader/src/CascaderOption.tsx @@ -214,10 +214,10 @@ export default defineComponent({
{renderPrefix ? renderPrefix({ - option: this.tmNode.rawNode, - checked: this.checked, - node: originalNode - }) + option: this.tmNode.rawNode, + checked: this.checked, + node: originalNode + }) : originalNode}
) @@ -269,10 +269,10 @@ export default defineComponent({
{renderSuffix ? renderSuffix({ - option: this.tmNode.rawNode, - checked: this.checked, - node: originalSuffixChild - }) + option: this.tmNode.rawNode, + checked: this.checked, + node: originalSuffixChild + }) : originalSuffixChild}
) diff --git a/src/cascader/src/CascaderSelectMenu.tsx b/src/cascader/src/CascaderSelectMenu.tsx index 04b4794d719..3cdba38c80c 100644 --- a/src/cascader/src/CascaderSelectMenu.tsx +++ b/src/cascader/src/CascaderSelectMenu.tsx @@ -102,8 +102,8 @@ export default defineComponent({ return ( pattern ? selectOptionsRef.value.filter((option) => { - return mergedFilter(pattern, option.rawNode, option.path) - }) + return mergedFilter(pattern, option.rawNode, option.path) + }) : selectOptionsRef.value ).map(option => ({ value: option.value, @@ -192,35 +192,35 @@ export default defineComponent({ default: () => this.show ? withDirectives( - - {{ - empty: () => - resolveSlot(cascaderSlots['not-found'], () => []) - }} - , - [ + + {{ + empty: () => + resolveSlot(cascaderSlots['not-found'], () => []) + }} + , [ - clickoutside, - this.handleClickOutside, - undefined as unknown as string, - { capture: true } + [ + clickoutside, + this.handleClickOutside, + undefined as unknown as string, + { capture: true } + ] ] - ] - ) + ) : null }} diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx index cf3258eece0..5e9633e94ca 100644 --- a/src/checkbox/src/Checkbox.tsx +++ b/src/checkbox/src/Checkbox.tsx @@ -295,11 +295,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'checkbox', - computed(() => mergedSizeRef.value[0]), - cssVarsRef, - props - ) + 'checkbox', + computed(() => mergedSizeRef.value[0]), + cssVarsRef, + props + ) : undefined return Object.assign(formItem, exposedMethods, { rtlEnabled: rtlEnabledRef, diff --git a/src/code/src/Code.tsx b/src/code/src/Code.tsx index 9b9672d8f05..f20dd6f9d58 100644 --- a/src/code/src/Code.tsx +++ b/src/code/src/Code.tsx @@ -171,13 +171,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'code', - computed(() => { - return `${props.internalFontSize || 'a'}` - }), - cssVarsRef, - props - ) + 'code', + computed(() => { + return `${props.internalFontSize || 'a'}` + }), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/color-picker/src/ColorPicker.tsx b/src/color-picker/src/ColorPicker.tsx index f50d9c3fb7f..68d1d990cd2 100644 --- a/src/color-picker/src/ColorPicker.tsx +++ b/src/color-picker/src/ColorPicker.tsx @@ -526,13 +526,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'color-picker', - computed(() => { - return mergedSizeRef.value[0] - }), - cssVarsRef, - props - ) + 'color-picker', + computed(() => { + return mergedSizeRef.value[0] + }), + cssVarsRef, + props + ) : undefined function renderPanel(): VNode { @@ -746,13 +746,13 @@ export default defineComponent({ default: () => this.mergedShow ? withDirectives(this.renderPanel(), [ - [ - clickoutside, - this.handleClickOutside, - undefined as any as string, - { capture: true } - ] - ]) + [ + clickoutside, + this.handleClickOutside, + undefined as any as string, + { capture: true } + ] + ]) : null }} diff --git a/src/config-provider/src/ConfigProvider.ts b/src/config-provider/src/ConfigProvider.ts index 15bd4c6c0fe..7c4717ba21e 100644 --- a/src/config-provider/src/ConfigProvider.ts +++ b/src/config-provider/src/ConfigProvider.ts @@ -241,12 +241,12 @@ export default defineComponent({ render() { return !this.abstract ? h( - this.as || this.tag, - { - class: `${this.mergedClsPrefix || defaultClsPrefix}-config-provider` - }, - this.$slots.default?.() - ) + this.as || this.tag, + { + class: `${this.mergedClsPrefix || defaultClsPrefix}-config-provider` + }, + this.$slots.default?.() + ) : this.$slots.default?.() } }) diff --git a/src/data-table/demos/enUS/switchable-editable.demo.md b/src/data-table/demos/enUS/switchable-editable.demo.md index 9e45bb5cbb0..21e4afbf669 100644 --- a/src/data-table/demos/enUS/switchable-editable.demo.md +++ b/src/data-table/demos/enUS/switchable-editable.demo.md @@ -51,14 +51,14 @@ const ShowOrEdit = defineComponent({ }, isEdit.value ? h(NInput, { - ref: inputRef, - value: inputValue.value, - onUpdateValue: (v) => { - inputValue.value = v - }, - onChange: handleChange, - onBlur: handleChange - }) + ref: inputRef, + value: inputValue.value, + onUpdateValue: (v) => { + inputValue.value = v + }, + onChange: handleChange, + onBlur: handleChange + }) : props.value ) } diff --git a/src/data-table/demos/zhCN/switchable-editable.demo.md b/src/data-table/demos/zhCN/switchable-editable.demo.md index 934e751a344..5531dcb092f 100644 --- a/src/data-table/demos/zhCN/switchable-editable.demo.md +++ b/src/data-table/demos/zhCN/switchable-editable.demo.md @@ -51,14 +51,14 @@ const ShowOrEdit = defineComponent({ }, isEdit.value ? h(NInput, { - ref: inputRef, - value: inputValue.value, - onUpdateValue: (v) => { - inputValue.value = v - }, - onChange: handleChange, - onBlur: handleChange - }) + ref: inputRef, + value: inputValue.value, + onUpdateValue: (v) => { + inputValue.value = v + }, + onChange: handleChange, + onBlur: handleChange + }) : props.value ) } diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx index 3e7c9942027..237e2570516 100644 --- a/src/data-table/src/DataTable.tsx +++ b/src/data-table/src/DataTable.tsx @@ -417,11 +417,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'data-table', - computed(() => props.size[0]), - cssVarsRef, - props - ) + 'data-table', + computed(() => props.size[0]), + cssVarsRef, + props + ) : undefined const mergedShowPaginationRef = computed(() => { if (!props.pagination) diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx index d068694bdaa..2674c69913c 100644 --- a/src/data-table/src/TableParts/Body.tsx +++ b/src/data-table/src/TableParts/Body.tsx @@ -774,13 +774,13 @@ export default defineComponent({ : createRowClassName(rowData, actualRowIndex, rowClassName) const iteratedCols = isVirtualX ? cols.filter((col, index) => { - if (startColIndex <= index && index <= endColIndex) - return true - if (col.column.fixed) { - return true - } - return false - }) + if (startColIndex <= index && index <= endColIndex) + return true + if (col.column.fixed) { + return true + } + return false + }) : cols const virtualXRowHeight = isVirtualX ? pxfy(heightForRow?.(rowData, actualRowIndex) || minRowHeight) diff --git a/src/data-table/src/use-table-data.ts b/src/data-table/src/use-table-data.ts index 8e9bd0fa1a4..30792b3207f 100644 --- a/src/data-table/src/use-table-data.ts +++ b/src/data-table/src/use-table-data.ts @@ -137,48 +137,48 @@ export function useTableData( }) return data ? data.filter((tmNode) => { - const { rawNode: row } = tmNode - // traverse all filters - for (const [columnKey, column] of columnEntries) { - let activeFilterOptionValues = mergedFilterState[columnKey] - if (activeFilterOptionValues == null) - continue - if (!Array.isArray(activeFilterOptionValues)) { - activeFilterOptionValues = [activeFilterOptionValues] - } - if (!activeFilterOptionValues.length) - continue - // When async, filter won't be set, so data won't be filtered - const filter + const { rawNode: row } = tmNode + // traverse all filters + for (const [columnKey, column] of columnEntries) { + let activeFilterOptionValues = mergedFilterState[columnKey] + if (activeFilterOptionValues == null) + continue + if (!Array.isArray(activeFilterOptionValues)) { + activeFilterOptionValues = [activeFilterOptionValues] + } + if (!activeFilterOptionValues.length) + continue + // When async, filter won't be set, so data won't be filtered + const filter = column.filter === 'default' ? createDefaultFilter(columnKey) : column.filter - if (column && typeof filter === 'function') { - if (column.filterMode === 'and') { - if ( - activeFilterOptionValues.some( - filterOptionValue => !filter(filterOptionValue, row) - ) - ) { - return false - } - } - else { - if ( - activeFilterOptionValues.some(filterOptionValue => - filter(filterOptionValue, row) - ) - ) { - continue + if (column && typeof filter === 'function') { + if (column.filterMode === 'and') { + if ( + activeFilterOptionValues.some( + filterOptionValue => !filter(filterOptionValue, row) + ) + ) { + return false + } } else { - return false + if ( + activeFilterOptionValues.some(filterOptionValue => + filter(filterOptionValue, row) + ) + ) { + continue + } + else { + return false + } } } } - } - return true - }) + return true + }) : [] }) @@ -241,12 +241,12 @@ export function useTableData( return props.remote ? page : Math.max( - 1, - Math.min( - Math.ceil(filteredDataRef.value.length / mergedPageSizeRef.value), - page + 1, + Math.min( + Math.ceil(filteredDataRef.value.length / mergedPageSizeRef.value), + page + ) ) - ) }) const mergedPageCountRef = computed(() => { diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx index 7a503337d21..6ee1e38d6b6 100644 --- a/src/date-picker/src/DatePicker.tsx +++ b/src/date-picker/src/DatePicker.tsx @@ -750,11 +750,11 @@ export default defineComponent({ }) const triggerThemeClassHandle = inlineThemeDisabled ? useThemeClass( - 'date-picker-trigger', - undefined, - triggerCssVarsRef, - props - ) + 'date-picker-trigger', + undefined, + triggerCssVarsRef, + props + ) : undefined const cssVarsRef = computed(() => { @@ -870,13 +870,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'date-picker', - computed(() => { - return props.type - }), - cssVarsRef, - props - ) + 'date-picker', + computed(() => { + return props.type + }), + cssVarsRef, + props + ) : undefined return { @@ -1075,15 +1075,15 @@ export default defineComponent({ separator: () => this.separator === undefined ? resolveSlot($slots.separator, () => [ - - {{ - default: () => - }} - - ]) + + {{ + default: () => + }} + + ]) : this.separator, [clearable ? 'clear-icon-placeholder' : 'suffix']: () => diff --git a/src/date-picker/src/panel/date.tsx b/src/date-picker/src/panel/date.tsx index 9e10c944a88..94390187b67 100644 --- a/src/date-picker/src/panel/date.tsx +++ b/src/date-picker/src/panel/date.tsx @@ -181,7 +181,7 @@ export default defineComponent({
{this.actions?.includes('clear') ? resolveSlotWithProps( - this.$slots.clear, + this.$slots.clear, { onClear: this.handleClearClick, text: this.locale.clear @@ -196,11 +196,11 @@ export default defineComponent({ {{ default: () => this.locale.clear }} ] - ) + ) : null} {this.actions?.includes('now') ? resolveSlotWithProps( - this.$slots.now, + this.$slots.now, { onNow: this.handleNowClick, text: this.locale.now @@ -215,7 +215,7 @@ export default defineComponent({ {{ default: () => this.locale.now }} ] - ) + ) : null} {/** we don't need a confirm button for date picking */}
diff --git a/src/date-picker/src/panel/daterange.tsx b/src/date-picker/src/panel/daterange.tsx index e000b9358e3..62693541b44 100644 --- a/src/date-picker/src/panel/daterange.tsx +++ b/src/date-picker/src/panel/daterange.tsx @@ -262,7 +262,7 @@ export default defineComponent({
{this.actions?.includes('clear') ? resolveSlotWithProps( - $slots.clear, + $slots.clear, { onClear: this.handleClearClick, text: this.locale.clear @@ -277,11 +277,11 @@ export default defineComponent({ {{ default: () => this.locale.clear }} ] - ) + ) : null} {this.actions?.includes('confirm') ? resolveSlotWithProps( - $slots.confirm, + $slots.confirm, { onConfirm: this.handleConfirmClick, disabled: this.isRangeInvalid || this.isSelecting, @@ -299,7 +299,7 @@ export default defineComponent({ {{ default: () => this.locale.confirm }} ] - ) + ) : null}
diff --git a/src/date-picker/src/panel/datetime.tsx b/src/date-picker/src/panel/datetime.tsx index 7ee1e2fbd36..802631b50b6 100644 --- a/src/date-picker/src/panel/datetime.tsx +++ b/src/date-picker/src/panel/datetime.tsx @@ -199,7 +199,7 @@ export default defineComponent({
{this.actions?.includes('clear') ? resolveSlotWithProps( - this.$slots.clear, + this.$slots.clear, { onClear: this.clearSelectedDateTime, text: this.locale.clear @@ -214,11 +214,11 @@ export default defineComponent({ {{ default: () => this.locale.clear }} ] - ) + ) : null} {this.actions?.includes('now') ? resolveSlotWithProps( - $slots.now, + $slots.now, { onNow: this.handleNowClick, text: this.locale.now @@ -233,11 +233,11 @@ export default defineComponent({ {{ default: () => this.locale.now }} ] - ) + ) : null} {this.actions?.includes('confirm') ? resolveSlotWithProps( - $slots.confirm, + $slots.confirm, { onConfirm: this.handleConfirmClick, disabled: this.isDateInvalid, @@ -255,7 +255,7 @@ export default defineComponent({ {{ default: () => this.locale.confirm }} ] - ) + ) : null}
diff --git a/src/date-picker/src/panel/datetimerange.tsx b/src/date-picker/src/panel/datetimerange.tsx index d74106011ec..e5d618f72c2 100644 --- a/src/date-picker/src/panel/datetimerange.tsx +++ b/src/date-picker/src/panel/datetimerange.tsx @@ -357,7 +357,7 @@ export default defineComponent({
{this.actions?.includes('clear') ? resolveSlotWithProps( - $slots.clear, + $slots.clear, { onClear: this.handleClearClick, text: this.locale.clear @@ -372,11 +372,11 @@ export default defineComponent({ {{ default: () => this.locale.clear }} ] - ) + ) : null} {this.actions?.includes('confirm') ? resolveSlotWithProps( - $slots.confirm, + $slots.confirm, { onConfirm: this.handleConfirmClick, disabled: this.isRangeInvalid || this.isSelecting, @@ -394,7 +394,7 @@ export default defineComponent({ {{ default: () => this.locale.confirm }} ] - ) + ) : null}
diff --git a/src/date-picker/src/panel/month.tsx b/src/date-picker/src/panel/month.tsx index 64303d976ae..71c48a937c0 100644 --- a/src/date-picker/src/panel/month.tsx +++ b/src/date-picker/src/panel/month.tsx @@ -246,7 +246,7 @@ export default defineComponent({
{actions?.includes('clear') ? resolveSlotWithProps( - this.$slots.now, + this.$slots.now, { onClear: this.handleClearClick, text: this.locale.clear @@ -261,11 +261,11 @@ export default defineComponent({ {{ default: () => this.locale.clear }} ] - ) + ) : null} {actions?.includes('now') ? resolveSlotWithProps( - this.$slots.now, + this.$slots.now, { onNow: this.handleNowClick, text: this.locale.now @@ -280,11 +280,11 @@ export default defineComponent({ {{ default: () => this.locale.now }} ] - ) + ) : null} {actions?.includes('confirm') ? resolveSlotWithProps( - this.$slots.confirm, + this.$slots.confirm, { onConfirm: this.handleConfirmClick, disabled: this.isDateInvalid, @@ -302,7 +302,7 @@ export default defineComponent({ {{ default: () => this.locale.confirm }} ] - ) + ) : null}
diff --git a/src/date-picker/src/panel/monthrange.tsx b/src/date-picker/src/panel/monthrange.tsx index e4b87484ca6..6701149248b 100644 --- a/src/date-picker/src/panel/monthrange.tsx +++ b/src/date-picker/src/panel/monthrange.tsx @@ -83,21 +83,21 @@ export default defineComponent({ > {item.type === 'month' ? getMonthString( - item.dateObject.month, - item.monthFormat, - dateLocaleRef.value.locale - ) - : item.type === 'quarter' - ? getQuarterString( - item.dateObject.quarter, - item.quarterFormat, + item.dateObject.month, + item.monthFormat, dateLocaleRef.value.locale ) + : item.type === 'quarter' + ? getQuarterString( + item.dateObject.quarter, + item.quarterFormat, + dateLocaleRef.value.locale + ) : getYearString( - item.dateObject.year, - item.yearFormat, - dateLocaleRef.value.locale - )} + item.dateObject.year, + item.yearFormat, + dateLocaleRef.value.locale + )} ) } @@ -303,7 +303,7 @@ export default defineComponent({
{this.actions?.includes('clear') ? resolveSlotWithProps( - this.$slots.clear, + this.$slots.clear, { onClear: this.handleClearClick, text: this.locale.clear @@ -318,11 +318,11 @@ export default defineComponent({ {{ default: () => this.locale.clear }} ] - ) + ) : null} {this.actions?.includes('confirm') ? resolveSlotWithProps( - this.$slots.confirm, + this.$slots.confirm, { disabled: this.isRangeInvalid, onConfirm: this.handleConfirmClick, @@ -340,7 +340,7 @@ export default defineComponent({ {{ default: () => this.locale.confirm }} ] - ) + ) : null}
diff --git a/src/date-picker/src/panel/panelHeader.tsx b/src/date-picker/src/panel/panelHeader.tsx index e55700d564d..36104409aff 100644 --- a/src/date-picker/src/panel/panelHeader.tsx +++ b/src/date-picker/src/panel/panelHeader.tsx @@ -106,28 +106,28 @@ export default defineComponent({ default: () => this.show ? withDirectives( - , - [ + , [ - clickoutside, - handleClickOutside, - undefined as unknown as string, - { capture: true } + [ + clickoutside, + handleClickOutside, + undefined as unknown as string, + { capture: true } + ] ] - ] - ) + ) : null }} diff --git a/src/date-picker/src/panel/use-calendar.ts b/src/date-picker/src/panel/use-calendar.ts index d714c7fa3d9..987f1ba7aa0 100644 --- a/src/date-picker/src/panel/use-calendar.ts +++ b/src/date-picker/src/panel/use-calendar.ts @@ -382,9 +382,9 @@ function useCalendar( newValue = getTime( dateItem.type === 'quarter' && dateItem.dateObject.quarter ? setQuarter( - setYear(newValue, dateItem.dateObject.year), - dateItem.dateObject.quarter - ) + setYear(newValue, dateItem.dateObject.year), + dateItem.dateObject.quarter + ) : set(newValue, dateItem.dateObject) ) panelCommon.doUpdateValue( diff --git a/src/date-picker/src/panel/use-dual-calendar.ts b/src/date-picker/src/panel/use-dual-calendar.ts index 20a99b9af6f..1d8c84ec9c2 100644 --- a/src/date-picker/src/panel/use-dual-calendar.ts +++ b/src/date-picker/src/panel/use-dual-calendar.ts @@ -138,19 +138,19 @@ function useDualCalendar( const startDateInput = ref( Array.isArray(value) ? format( - value[0], - mergedDateFormatRef.value, - panelCommon.dateFnsOptions.value - ) + value[0], + mergedDateFormatRef.value, + panelCommon.dateFnsOptions.value + ) : '' ) const endDateInputRef = ref( Array.isArray(value) ? format( - value[1], - mergedDateFormatRef.value, - panelCommon.dateFnsOptions.value - ) + value[1], + mergedDateFormatRef.value, + panelCommon.dateFnsOptions.value + ) : '' ) @@ -795,19 +795,19 @@ function useDualCalendar( = dateItem.type === 'year' && type !== 'yearrange' ? noCurrentValue ? set(dateItem.ts, { - month: getMonth( - type === 'quarterrange' - ? startOfQuarter(new Date()) - : new Date() - ) - }).valueOf() + month: getMonth( + type === 'quarterrange' + ? startOfQuarter(new Date()) + : new Date() + ) + }).valueOf() : set(dateItem.ts, { - month: getMonth( - type === 'quarterrange' - ? startOfQuarter(value[clickType === 'start' ? 0 : 1]) - : value[clickType === 'start' ? 0 : 1] - ) - }).valueOf() + month: getMonth( + type === 'quarterrange' + ? startOfQuarter(value[clickType === 'start' ? 0 : 1]) + : value[clickType === 'start' ? 0 : 1] + ) + }).valueOf() : dateItem.ts if (noCurrentValue) { const partialValue = sanitizeValue(itemTs) diff --git a/src/descriptions/src/Descriptions.tsx b/src/descriptions/src/Descriptions.tsx index a7491499045..a00c27aef9b 100644 --- a/src/descriptions/src/Descriptions.tsx +++ b/src/descriptions/src/Descriptions.tsx @@ -122,18 +122,18 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'descriptions', - computed(() => { - let hash = '' - const { size, bordered } = props - if (bordered) - hash += 'a' - hash += size[0] - return hash - }), - cssVarsRef, - props - ) + 'descriptions', + computed(() => { + let hash = '' + const { size, bordered } = props + if (bordered) + hash += 'a' + hash += size[0] + return hash + }), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/dialog/src/Dialog.tsx b/src/dialog/src/Dialog.tsx index 0a0e12ee9bc..efa16e064d4 100644 --- a/src/dialog/src/Dialog.tsx +++ b/src/dialog/src/Dialog.tsx @@ -146,11 +146,11 @@ export const NDialog = defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'dialog', - computed(() => `${props.type[0]}${mergedIconPlacementRef.value[0]}`), - cssVarsRef, - props - ) + 'dialog', + computed(() => `${props.type[0]}${mergedIconPlacementRef.value[0]}`), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, @@ -265,20 +265,20 @@ export const NDialog = defineComponent({ > {closable ? resolveWrappedSlot(this.$slots.close, (node) => { - const classNames = [ - `${mergedClsPrefix}-dialog__close`, - this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl` - ] - return node ? ( -
{node}
- ) : ( - - ) - }) + const classNames = [ + `${mergedClsPrefix}-dialog__close`, + this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl` + ] + return node ? ( +
{node}
+ ) : ( + + ) + }) : null} {showIcon && mergedIconPlacement === 'top' ? (
{icon}
diff --git a/src/drawer/src/DrawerBodyWrapper.tsx b/src/drawer/src/DrawerBodyWrapper.tsx index 2a03d512641..62c0319d4eb 100644 --- a/src/drawer/src/DrawerBodyWrapper.tsx +++ b/src/drawer/src/DrawerBodyWrapper.tsx @@ -245,111 +245,111 @@ export default defineComponent({ const { $slots, mergedClsPrefix } = this return this.displayDirective === 'show' || this.displayed || this.show ? withDirectives( - /* Keep the wrapper dom. Make sure the drawer has a host. + /* Keep the wrapper dom. Make sure the drawer has a host. Nor the detached content will disappear without transition */ -
- - {{ - default: () => ( - - {{ - default: () => - withDirectives( - h( - 'div', - mergeProps(this.$attrs, { - role: 'dialog', - ref: 'bodyRef', - 'aria-modal': 'true', - class: [ - `${mergedClsPrefix}-drawer`, - this.rtlEnabled - && `${mergedClsPrefix}-drawer--rtl`, - `${mergedClsPrefix}-drawer--${this.placement}-placement`, - /** - * When the mouse is pressed to resize the drawer, - * disable text selection - */ - this.isDragging - && `${mergedClsPrefix}-drawer--unselectable`, - this.nativeScrollbar - && `${mergedClsPrefix}-drawer--native-scrollbar` +
+ + {{ + default: () => ( + + {{ + default: () => + withDirectives( + h( + 'div', + mergeProps(this.$attrs, { + role: 'dialog', + ref: 'bodyRef', + 'aria-modal': 'true', + class: [ + `${mergedClsPrefix}-drawer`, + this.rtlEnabled + && `${mergedClsPrefix}-drawer--rtl`, + `${mergedClsPrefix}-drawer--${this.placement}-placement`, + /** + * When the mouse is pressed to resize the drawer, + * disable text selection + */ + this.isDragging + && `${mergedClsPrefix}-drawer--unselectable`, + this.nativeScrollbar + && `${mergedClsPrefix}-drawer--native-scrollbar` + ] + }), + [ + this.resizable ? ( +
+ ) : null, + this.nativeScrollbar ? ( +
+ {$slots} +
+ ) : ( + + {$slots} + + ) ] - }), - [ - this.resizable ? ( -
- ) : null, - this.nativeScrollbar ? ( -
- {$slots} -
- ) : ( - - {$slots} - - ) - ] - ), - this.bodyDirectives - ) - }} - - ) - }} - -
, - [ + ), + this.bodyDirectives + ) + }} + + ) + }} + +
, [ - vShow, - this.displayDirective === 'if' || this.displayed || this.show + [ + vShow, + this.displayDirective === 'if' || this.displayed || this.show + ] ] - ] - ) + ) : null } }) diff --git a/src/dropdown/src/Dropdown.tsx b/src/dropdown/src/Dropdown.tsx index a13b0796256..38fb8add1d1 100644 --- a/src/dropdown/src/Dropdown.tsx +++ b/src/dropdown/src/Dropdown.tsx @@ -407,11 +407,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'dropdown', - computed(() => `${props.size[0]}${props.inverted ? 'i' : ''}`), - cssVarsRef, - props - ) + 'dropdown', + computed(() => `${props.size[0]}${props.inverted ? 'i' : ''}`), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/dropdown/src/DropdownMenu.tsx b/src/dropdown/src/DropdownMenu.tsx index 0c8fba965d5..b0ee65929d4 100644 --- a/src/dropdown/src/DropdownMenu.tsx +++ b/src/dropdown/src/DropdownMenu.tsx @@ -156,12 +156,12 @@ export default defineComponent({ )} {this.showArrow ? renderArrow({ - clsPrefix, - arrowStyle: this.arrowStyle, - arrowClass: undefined, - arrowWrapperClass: undefined, - arrowWrapperStyle: undefined - }) + clsPrefix, + arrowStyle: this.arrowStyle, + arrowClass: undefined, + arrowWrapperClass: undefined, + arrowWrapperStyle: undefined + }) : null}
) diff --git a/src/empty/src/Empty.tsx b/src/empty/src/Empty.tsx index ca65c2c74fd..d94a88e9dd4 100644 --- a/src/empty/src/Empty.tsx +++ b/src/empty/src/Empty.tsx @@ -83,16 +83,16 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'empty', - computed(() => { - let hash = '' - const { size } = props - hash += size[0] - return hash - }), - cssVarsRef, - props - ) + 'empty', + computed(() => { + let hash = '' + const { size } = props + hash += size[0] + return hash + }), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/float-button/src/FloatButton.tsx b/src/float-button/src/FloatButton.tsx index a144a0556a7..0b5561697c4 100644 --- a/src/float-button/src/FloatButton.tsx +++ b/src/float-button/src/FloatButton.tsx @@ -177,11 +177,11 @@ export default defineComponent({ const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'float-button', - computed(() => props.type[0]), - cssVarsRef, - props - ) + 'float-button', + computed(() => props.type[0]), + cssVarsRef, + props + ) : undefined onMounted(() => { diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx index 38d6881cc89..bc068e76411 100644 --- a/src/form/src/FormItem.tsx +++ b/src/form/src/FormItem.tsx @@ -225,13 +225,13 @@ export default defineComponent({ !trigger ? rules : rules.filter((rule) => { - if (Array.isArray(rule.trigger)) { - return rule.trigger.includes(trigger) - } - else { - return rule.trigger === trigger - } - }) + if (Array.isArray(rule.trigger)) { + return rule.trigger.includes(trigger) + } + else { + return rule.trigger === trigger + } + }) ) .filter(shouldRuleBeApplied) .map((rule, i) => { @@ -495,15 +495,15 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'form-item', - computed(() => { - return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${ - labelTextAlignRef.value?.[0] || '' - }` - }), - cssVarsRef, - props - ) + 'form-item', + computed(() => { + return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${ + labelTextAlignRef.value?.[0] || '' + }` + }), + cssVarsRef, + props + ) : undefined const reverseColSpaceRef = computed(() => { // label placement left diff --git a/src/global-style/src/GlobalStyle.ts b/src/global-style/src/GlobalStyle.ts index bdc1bae2e1f..d7b924099c4 100644 --- a/src/global-style/src/GlobalStyle.ts +++ b/src/global-style/src/GlobalStyle.ts @@ -31,10 +31,10 @@ export default defineComponent({ lineHeight } = NConfigProvider ? merge( - {}, - NConfigProvider.mergedThemeRef.value?.common || commonLight, - NConfigProvider.mergedThemeOverridesRef.value?.common - ) + {}, + NConfigProvider.mergedThemeRef.value?.common || commonLight, + NConfigProvider.mergedThemeOverridesRef.value?.common + ) : commonLight if (styleApplied || !body.hasAttribute('n-styled')) { style.setProperty('-webkit-text-size-adjust', '100%') diff --git a/src/gradient-text/src/GradientText.tsx b/src/gradient-text/src/GradientText.tsx index 3d8c5a0a581..4e670c0fae2 100644 --- a/src/gradient-text/src/GradientText.tsx +++ b/src/gradient-text/src/GradientText.tsx @@ -93,11 +93,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'gradient-text', - computed(() => compatibleTypeRef.value[0]), - cssVarsRef, - props - ) + 'gradient-text', + computed(() => compatibleTypeRef.value[0]), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/icon/src/Icon.ts b/src/icon/src/Icon.ts index f758c14afcc..eecadb5e8ce 100644 --- a/src/icon/src/Icon.ts +++ b/src/icon/src/Icon.ts @@ -67,11 +67,11 @@ export const NIcon = defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'icon', - computed(() => `${props.depth || 'd'}`), - cssVarsRef, - props - ) + 'icon', + computed(() => `${props.depth || 'd'}`), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx index c104e96af12..ca1e52e9f0b 100644 --- a/src/image/src/Image.tsx +++ b/src/image/src/Image.tsx @@ -160,39 +160,39 @@ export default defineComponent({ = this.showError && errorNode.length ? errorNode : h('img', { - ...imgProps, - ref: 'imageRef', - width: this.width || imgProps.width, - height: this.height || imgProps.height, - src: this.showError - ? this.fallbackSrc - : lazy && this.intersectionObserverOptions - ? this.shouldStartLoading - ? loadSrc - : undefined - : loadSrc, - alt: this.alt || imgProps.alt, - 'aria-label': this.alt || imgProps.alt, - onClick: this.mergedOnClick, - onError: this.mergedOnError, - onLoad: this.mergedOnLoad, - // If interseciton observer options is set, do not use native lazy - loading: + ...imgProps, + ref: 'imageRef', + width: this.width || imgProps.width, + height: this.height || imgProps.height, + src: this.showError + ? this.fallbackSrc + : lazy && this.intersectionObserverOptions + ? this.shouldStartLoading + ? loadSrc + : undefined + : loadSrc, + alt: this.alt || imgProps.alt, + 'aria-label': this.alt || imgProps.alt, + onClick: this.mergedOnClick, + onError: this.mergedOnError, + onLoad: this.mergedOnLoad, + // If interseciton observer options is set, do not use native lazy + loading: isImageSupportNativeLazy && lazy && !this.intersectionObserverOptions ? 'lazy' : 'eager', - style: [ - imgProps.style || '', - placeholderNode && !loaded - ? { height: '0', width: '0', visibility: 'hidden' } - : '', - { objectFit: this.objectFit } - ], - 'data-error': this.showError, - 'data-preview-src': this.previewSrc || this.src - }) + style: [ + imgProps.style || '', + placeholderNode && !loaded + ? { height: '0', width: '0', visibility: 'hidden' } + : '', + { objectFit: this.objectFit } + ], + 'data-error': this.showError, + 'data-preview-src': this.previewSrc || this.src + }) return (
{ - const { value: size } = mergedSizeRef - return size[0] - }), - cssVarsRef, - props - ) + 'input', + computed(() => { + const { value: size } = mergedSizeRef + return size[0] + }), + cssVarsRef, + props + ) : undefined return { @@ -1352,18 +1352,18 @@ export default defineComponent({ > {this.passwordVisible ? resolveSlot($slots['password-visible-icon'], () => [ - - {{ default: () => }} - - ]) - : resolveSlot( - $slots['password-invisible-icon'], - () => [ - {{ default: () => }} + {{ default: () => }} - ] - )} + ]) + : resolveSlot( + $slots['password-invisible-icon'], + () => [ + + {{ default: () => }} + + ] + )}
) : null ]} diff --git a/src/input/src/InputGroupLabel.tsx b/src/input/src/InputGroupLabel.tsx index 3738aa4cf62..054c86fd53f 100644 --- a/src/input/src/InputGroupLabel.tsx +++ b/src/input/src/InputGroupLabel.tsx @@ -65,11 +65,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'input-group-label', - computed(() => props.size[0]), - cssVarsRef, - props - ) + 'input-group-label', + computed(() => props.size[0]), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/layout/src/Layout.tsx b/src/layout/src/Layout.tsx index aa3368c10a0..8d455d9971e 100644 --- a/src/layout/src/Layout.tsx +++ b/src/layout/src/Layout.tsx @@ -126,13 +126,13 @@ export function createLayoutComponent(isContent: boolean) { }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'layout', - computed(() => { - return props.embedded ? 'e' : '' - }), - cssVarsRef, - props - ) + 'layout', + computed(() => { + return props.embedded ? 'e' : '' + }), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/layout/src/LayoutFooter.tsx b/src/layout/src/LayoutFooter.tsx index a75bb10fe76..2ba71ae189b 100644 --- a/src/layout/src/LayoutFooter.tsx +++ b/src/layout/src/LayoutFooter.tsx @@ -51,11 +51,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'layout-footer', - computed(() => (props.inverted ? 'a' : 'b')), - cssVarsRef, - props - ) + 'layout-footer', + computed(() => (props.inverted ? 'a' : 'b')), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/layout/src/LayoutHeader.tsx b/src/layout/src/LayoutHeader.tsx index 40d366ab1bf..e51b4488644 100644 --- a/src/layout/src/LayoutHeader.tsx +++ b/src/layout/src/LayoutHeader.tsx @@ -56,11 +56,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'layout-header', - computed(() => (props.inverted ? 'a' : 'b')), - cssVarsRef, - props - ) + 'layout-header', + computed(() => (props.inverted ? 'a' : 'b')), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/layout/src/LayoutSider.tsx b/src/layout/src/LayoutSider.tsx index 87be85b3e1f..7c6205cebc1 100644 --- a/src/layout/src/LayoutSider.tsx +++ b/src/layout/src/LayoutSider.tsx @@ -263,11 +263,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'layout-sider', - computed(() => (props.inverted ? 'a' : 'b')), - cssVarsRef, - props - ) + 'layout-sider', + computed(() => (props.inverted ? 'a' : 'b')), + cssVarsRef, + props + ) : undefined return { scrollableElRef, diff --git a/src/menu/src/Menu.tsx b/src/menu/src/Menu.tsx index 328bcb7132e..b46c2cc71cc 100644 --- a/src/menu/src/Menu.tsx +++ b/src/menu/src/Menu.tsx @@ -491,11 +491,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'menu', - computed(() => (props.inverted ? 'a' : 'b')), - cssVarsRef, - props - ) + 'menu', + computed(() => (props.inverted ? 'a' : 'b')), + cssVarsRef, + props + ) : undefined const ellipsisNodeId = createId() diff --git a/src/message/src/Message.tsx b/src/message/src/Message.tsx index b5c3f1adf48..976576765ee 100644 --- a/src/message/src/Message.tsx +++ b/src/message/src/Message.tsx @@ -119,11 +119,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'message', - computed(() => props.type[0]), - cssVarsRef, - {} - ) + 'message', + computed(() => props.type[0]), + cssVarsRef, + {} + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/modal/src/BodyWrapper.tsx b/src/modal/src/BodyWrapper.tsx index 18c4fc676a9..cd393dbf1ad 100644 --- a/src/modal/src/BodyWrapper.tsx +++ b/src/modal/src/BodyWrapper.tsx @@ -214,105 +214,105 @@ export default defineComponent({ } return this.displayDirective === 'show' || this.displayed || this.show ? withDirectives( -
- - {{ - default: () => [ - this.renderMask?.(), - - {{ - default: () => ( - - {{ - default: () => { - const dirs: DirectiveArguments = [ - [vShow, this.show] - ] - const { onClickoutside } = this - if (onClickoutside) { - dirs.push([ - clickoutside, - this.onClickoutside, - undefined as unknown as string, - { capture: true } - ]) +
+ + {{ + default: () => [ + this.renderMask?.(), + + {{ + default: () => ( + + {{ + default: () => { + const dirs: DirectiveArguments = [ + [vShow, this.show] + ] + const { onClickoutside } = this + if (onClickoutside) { + dirs.push([ + clickoutside, + this.onClickoutside, + undefined as unknown as string, + { capture: true } + ]) + } + return withDirectives( + (this.preset === 'confirm' + || this.preset === 'dialog' ? ( + + {$slots} + + ) : this.preset === 'card' ? ( + + {$slots} + + ) : ( + (this.childNodeRef = childNode) + )) as any, + dirs + ) } - return withDirectives( - (this.preset === 'confirm' - || this.preset === 'dialog' ? ( - - {$slots} - - ) : this.preset === 'card' ? ( - - {$slots} - - ) : ( - (this.childNodeRef = childNode) - )) as any, - dirs - ) - } - }} - - ) - }} - - ] - }} - -
, - [ + }} + + ) + }} + + ] + }} + +
, [ - vShow, - this.displayDirective === 'if' || this.displayed || this.show + [ + vShow, + this.displayDirective === 'if' || this.displayed || this.show + ] ] - ] - ) + ) : null } }) diff --git a/src/notification/src/Notification.tsx b/src/notification/src/Notification.tsx index 1e323555f08..9a1c2a37fa8 100644 --- a/src/notification/src/Notification.tsx +++ b/src/notification/src/Notification.tsx @@ -139,11 +139,11 @@ export const Notification = defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'notification', - computed(() => props.type[0]), - cssVarsRef, - providerProps - ) + 'notification', + computed(() => props.type[0]), + cssVarsRef, + providerProps + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/pagination/src/Pagination.tsx b/src/pagination/src/Pagination.tsx index 929aabd2941..3246aed98f5 100644 --- a/src/pagination/src/Pagination.tsx +++ b/src/pagination/src/Pagination.tsx @@ -501,16 +501,16 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'pagination', - computed(() => { - let hash = '' - const { size } = props - hash += size[0] - return hash - }), - cssVarsRef, - props - ) + 'pagination', + computed(() => { + let hash = '' + const { size } = props + hash += size[0] + return hash + }), + cssVarsRef, + props + ) : undefined return { rtlEnabled: rtlEnabledRef, diff --git a/src/popconfirm/src/PopconfirmPanel.tsx b/src/popconfirm/src/PopconfirmPanel.tsx index eaf0d581d36..6cc53e50368 100644 --- a/src/popconfirm/src/PopconfirmPanel.tsx +++ b/src/popconfirm/src/PopconfirmPanel.tsx @@ -58,11 +58,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'popconfirm-panel', - undefined, - cssVarsRef, - popconfirmProps - ) + 'popconfirm-panel', + undefined, + cssVarsRef, + popconfirmProps + ) : undefined return { ...useLocale('Popconfirm'), diff --git a/src/popover/src/Popover.tsx b/src/popover/src/Popover.tsx index 063ef8f9b7f..41d7c837c2c 100644 --- a/src/popover/src/Popover.tsx +++ b/src/popover/src/Popover.tsx @@ -583,31 +583,31 @@ export default defineComponent({ return [ this.internalTrapFocus && mergedShow ? withDirectives( -
, - [ +
, [ - zindexable, - { - enabled: mergedShow, - zIndex: this.zIndex - } + [ + zindexable, + { + enabled: mergedShow, + zIndex: this.zIndex + } + ] ] - ] - ) + ) : null, positionManually ? null : h(VTarget, null, { - default: () => triggerVNode - }), + default: () => triggerVNode + }), h( NPopoverBody, keep(this.$props, bodyPropKeys, { diff --git a/src/popover/src/PopoverBody.tsx b/src/popover/src/PopoverBody.tsx index a7fc0c596d7..cb7229dc5e3 100644 --- a/src/popover/src/PopoverBody.tsx +++ b/src/popover/src/PopoverBody.tsx @@ -387,12 +387,12 @@ export default defineComponent({ ) const arrow = props.showArrow ? renderArrow({ - arrowClass: props.arrowClass, - arrowStyle: props.arrowStyle, - arrowWrapperClass: props.arrowWrapperClass, - arrowWrapperStyle: props.arrowWrapperStyle, - clsPrefix: mergedClsPrefix - }) + arrowClass: props.arrowClass, + arrowStyle: props.arrowStyle, + arrowWrapperClass: props.arrowWrapperClass, + arrowWrapperStyle: props.arrowWrapperStyle, + clsPrefix: mergedClsPrefix + }) : null return [maybeScrollableBody, arrow] } diff --git a/src/progress/src/Progress.tsx b/src/progress/src/Progress.tsx index 7561998d866..500c77e06b2 100644 --- a/src/progress/src/Progress.tsx +++ b/src/progress/src/Progress.tsx @@ -140,11 +140,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'progress', - computed(() => props.status[0]), - cssVarsRef, - props - ) + 'progress', + computed(() => props.status[0]), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/radio/src/Radio.tsx b/src/radio/src/Radio.tsx index 1d39f6d377a..dd62f2bde8a 100644 --- a/src/radio/src/Radio.tsx +++ b/src/radio/src/Radio.tsx @@ -80,11 +80,11 @@ export default defineComponent({ const rtlEnabledRef = useRtl('Radio', mergedRtlRef, mergedClsPrefixRef) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'radio', - computed(() => radio.mergedSize.value[0]), - cssVarsRef, - props - ) + 'radio', + computed(() => radio.mergedSize.value[0]), + cssVarsRef, + props + ) : undefined return Object.assign(radio, { rtlEnabled: rtlEnabledRef, diff --git a/src/radio/src/RadioGroup.tsx b/src/radio/src/RadioGroup.tsx index 8df282fed00..970a249f2f7 100644 --- a/src/radio/src/RadioGroup.tsx +++ b/src/radio/src/RadioGroup.tsx @@ -228,11 +228,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'radio-group', - computed(() => mergedSizeRef.value[0]), - cssVarsRef, - props - ) + 'radio-group', + computed(() => mergedSizeRef.value[0]), + cssVarsRef, + props + ) : undefined return { selfElRef, diff --git a/src/rate/src/Rate.tsx b/src/rate/src/Rate.tsx index 23d6f2102f0..fc8872cd05d 100644 --- a/src/rate/src/Rate.tsx +++ b/src/rate/src/Rate.tsx @@ -146,22 +146,22 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'rate', - computed(() => { - const size = mergedSizeRef.value - const { color } = props - let hash = '' - if (size) { - hash += size[0] - } - if (color) { - hash += color2Class(color) - } - return hash - }), - cssVarsRef, - props - ) + 'rate', + computed(() => { + const size = mergedSizeRef.value + const { color } = props + let hash = '' + if (size) { + hash += size[0] + } + if (color) { + hash += color2Class(color) + } + return hash + }), + cssVarsRef, + props + ) : undefined return { diff --git a/src/result/src/Result.tsx b/src/result/src/Result.tsx index 7d4bbd507ff..93ea66ba790 100644 --- a/src/result/src/Result.tsx +++ b/src/result/src/Result.tsx @@ -95,21 +95,21 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'result', - computed(() => { - const { size, status } = props - let hash = '' - if (size) { - hash += size[0] - } - if (status) { - hash += status[0] - } - return hash - }), - cssVarsRef, - props - ) + 'result', + computed(() => { + const { size, status } = props + let hash = '' + if (size) { + hash += size[0] + } + if (status) { + hash += status[0] + } + return hash + }), + cssVarsRef, + props + ) : undefined return { diff --git a/src/space/src/Space.tsx b/src/space/src/Space.tsx index f781c897b1e..3741cc4de71 100644 --- a/src/space/src/Space.tsx +++ b/src/space/src/Space.tsx @@ -168,65 +168,65 @@ export default defineComponent({ {!wrapItem && (useGap || internalUseGap) ? children : children.map((child, index) => - child.type === Comment ? ( - child - ) : ( -
- {child} -
- ) - )} + paddingTop: semiVerticalMargin, + paddingBottom: semiVerticalMargin + } + : { + marginRight: isJustifySpace + ? justify === 'space-between' + && index === lastIndex + ? '' + : semiHorizontalMargin + : index !== lastIndex + ? horizontalMargin + : '', + marginLeft: isJustifySpace + ? justify === 'space-between' && index === 0 + ? '' + : semiHorizontalMargin + : '', + paddingTop: semiVerticalMargin, + paddingBottom: semiVerticalMargin + } + ]} + > + {child} +
+ ) + )}
) } diff --git a/src/spin/src/Spin.tsx b/src/spin/src/Spin.tsx index 95fb9447459..b6773a4a437 100644 --- a/src/spin/src/Spin.tsx +++ b/src/spin/src/Spin.tsx @@ -99,14 +99,14 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'spin', - computed(() => { - const { size } = props - return typeof size === 'number' ? String(size) : size[0] - }), - cssVarsRef, - props - ) + 'spin', + computed(() => { + const { size } = props + return typeof size === 'number' ? String(size) : size[0] + }), + cssVarsRef, + props + ) : undefined const compitableShow = useCompitable(props, ['spinning', 'show']) diff --git a/src/steps/src/Step.tsx b/src/steps/src/Step.tsx index 7cd9816172c..c1c2f1f9b0a 100644 --- a/src/steps/src/Step.tsx +++ b/src/steps/src/Step.tsx @@ -117,15 +117,15 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'step', - computed(() => { - const { value: status } = mergedStatusRef - const { size } = stepsProps - return `${status[0]}${size[0]}` - }), - cssVarsRef, - stepsProps - ) + 'step', + computed(() => { + const { value: status } = mergedStatusRef + const { size } = stepsProps + return `${status[0]}${size[0]}` + }), + cssVarsRef, + stepsProps + ) : undefined const handleStepClick = computed((): undefined | (() => void) => { diff --git a/src/switch/src/Switch.tsx b/src/switch/src/Switch.tsx index a29f6939b71..95d456e7a6d 100644 --- a/src/switch/src/Switch.tsx +++ b/src/switch/src/Switch.tsx @@ -263,13 +263,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'switch', - computed(() => { - return mergedSizeRef.value[0] - }), - cssVarsRef, - props - ) + 'switch', + computed(() => { + return mergedSizeRef.value[0] + }), + cssVarsRef, + props + ) : undefined return { handleClick, diff --git a/src/table/src/Table.tsx b/src/table/src/Table.tsx index 0c0e335685c..1a187aea1e1 100644 --- a/src/table/src/Table.tsx +++ b/src/table/src/Table.tsx @@ -106,13 +106,13 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'table', - computed(() => { - return props.size[0] - }), - cssVarsRef, - props - ) + 'table', + computed(() => { + return props.size[0] + }), + cssVarsRef, + props + ) : undefined return { rtlEnabled: rtlEnabledRef, diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx index 9555779e155..f36a501cf03 100644 --- a/src/tabs/src/Tabs.tsx +++ b/src/tabs/src/Tabs.tsx @@ -750,13 +750,13 @@ export default defineComponent({ const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'tabs', - computed(() => { - return `${compitableSizeRef.value[0]}${props.type[0]}` - }), - cssVarsRef, - props - ) + 'tabs', + computed(() => { + return `${compitableSizeRef.value[0]}${props.type[0]}` + }), + cssVarsRef, + props + ) : undefined return { @@ -808,13 +808,13 @@ export default defineComponent({ const tabPaneChildren = defaultSlot ? flatten(defaultSlot()).filter((v) => { - return (v.type as any).__TAB_PANE__ === true - }) + return (v.type as any).__TAB_PANE__ === true + }) : [] const tabChildren = defaultSlot ? flatten(defaultSlot()).filter((v) => { - return (v.type as any).__TAB__ === true - }) + return (v.type as any).__TAB__ === true + }) : [] const showPane = !tabChildren.length const isCard = type === 'card' @@ -839,47 +839,47 @@ export default defineComponent({ )} {showPane ? tabPaneChildren.map((tabPaneVNode: any, index: number) => { - renderNameListRef.value.push( - tabPaneVNode.props.name as string | number - ) - return justifyTabDynamicProps( - - {tabPaneVNode.children - ? { - default: tabPaneVNode.children.tab - } - : undefined} - - ) - }) - : tabChildren.map((tabVNode: any, index: number) => { - renderNameListRef.value.push( - tabVNode.props.name as string | number - ) - if (index !== 0 && !mergedJustifyContent) { + renderNameListRef.value.push( + tabPaneVNode.props.name as string | number + ) return justifyTabDynamicProps( - createLeftPaddedTabVNode(tabVNode as VNode) + + {tabPaneVNode.children + ? { + default: tabPaneVNode.children.tab + } + : undefined} + ) - } - else { - return justifyTabDynamicProps(tabVNode as VNode) - } - })} + }) + : tabChildren.map((tabVNode: any, index: number) => { + renderNameListRef.value.push( + tabVNode.props.name as string | number + ) + if (index !== 0 && !mergedJustifyContent) { + return justifyTabDynamicProps( + createLeftPaddedTabVNode(tabVNode as VNode) + ) + } + else { + return justifyTabDynamicProps(tabVNode as VNode) + } + })} {!addTabFixed && addable && isCard ? createAddTag( - addable, - (showPane ? tabPaneChildren.length : tabChildren.length) !== 0 - ) + addable, + (showPane ? tabPaneChildren.length : tabChildren.length) !== 0 + ) : null} {mergedJustifyContent ? null : (
{showPane ? tabPaneChildren.map( - (tabPaneVNode: any, index: number) => { + (tabPaneVNode: any, index: number) => { + renderNameListRef.value.push( + tabPaneVNode.props.name as string | number + ) + return ( + + {tabPaneVNode.children + ? { + default: tabPaneVNode.children.tab + } + : undefined} + + ) + } + ) + : tabChildren.map((tabVNode: any, index: number) => { renderNameListRef.value.push( - tabPaneVNode.props.name as string | number + tabVNode.props.name as string | number ) - return ( - - {tabPaneVNode.children - ? { - default: tabPaneVNode.children.tab - } - : undefined} - - ) - } - ) - : tabChildren.map((tabVNode: any, index: number) => { - renderNameListRef.value.push( - tabVNode.props.name as string | number - ) - if (index === 0) { - return tabVNode - } - else { - return createLeftPaddedTabVNode(tabVNode as VNode) - } - })} + if (index === 0) { + return tabVNode + } + else { + return createLeftPaddedTabVNode(tabVNode as VNode) + } + })}
) }} diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx index 6425c7dbf5d..5aae9b5c8f5 100644 --- a/src/tag/src/Tag.tsx +++ b/src/tag/src/Tag.tsx @@ -219,26 +219,26 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'tag', - computed(() => { - let hash = '' - const { type, size, color: { color, textColor } = {} } = props - hash += type[0] - hash += size[0] - if (color) { - hash += `a${color2Class(color)}` - } - if (textColor) { - hash += `b${color2Class(textColor)}` - } - if (mergedBorderedRef.value) { - hash += 'c' - } - return hash - }), - cssVarsRef, - props - ) + 'tag', + computed(() => { + let hash = '' + const { type, size, color: { color, textColor } = {} } = props + hash += type[0] + hash += size[0] + if (color) { + hash += `a${color2Class(color)}` + } + if (textColor) { + hash += `b${color2Class(textColor)}` + } + if (mergedBorderedRef.value) { + hash += 'c' + } + return hash + }), + cssVarsRef, + props + ) : undefined return { ...tagPublicMethods, diff --git a/src/time-picker/src/Panel.tsx b/src/time-picker/src/Panel.tsx index 6d57e3fd4e2..103a5f033bd 100644 --- a/src/time-picker/src/Panel.tsx +++ b/src/time-picker/src/Panel.tsx @@ -148,10 +148,10 @@ export default defineComponent({ value: Number(second), disabled: isSecondDisabled ? isSecondDisabled( - Number(second), - props.minuteValue, - props.hourValue - ) + Number(second), + props.minuteValue, + props.hourValue + ) : false } }) diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx index 35719596b32..b7b31747b88 100644 --- a/src/time-picker/src/TimePicker.tsx +++ b/src/time-picker/src/TimePicker.tsx @@ -289,10 +289,10 @@ export default defineComponent({ = mergedValue === null ? '' : mergedFormatRef.value( - mergedValue, - props.format, - dateFnsOptionsRef.value - ) + mergedValue, + props.format, + dateFnsOptionsRef.value + ) }, { immediate: true @@ -804,11 +804,11 @@ export default defineComponent({ }) const triggerThemeClassHandle = inlineThemeDisabled ? useThemeClass( - 'time-picker-trigger', - undefined, - triggerCssVarsRef, - props - ) + 'time-picker-trigger', + undefined, + triggerCssVarsRef, + props + ) : undefined const cssVarsRef = computed(() => { const { diff --git a/src/time-picker/src/utils.ts b/src/time-picker/src/utils.ts index e3dfbbb7a24..6280b14f360 100644 --- a/src/time-picker/src/utils.ts +++ b/src/time-picker/src/utils.ts @@ -199,8 +199,8 @@ export function getTimeUnits( ? stepOrList.filter(v => v < 12) : isHourWithAmPm === 'pm' ? stepOrList - .filter(v => v >= 12) - .map(v => (v === 12 ? 12 : v - 12)) + .filter(v => v >= 12) + .map(v => (v === 12 ? 12 : v - 12)) : stepOrList ).map(v => getFixValue(v)) } @@ -231,9 +231,9 @@ export function getTimeUnits( ? defaultValue.filter(hour => Number(hour) < 12) : isHourWithAmPm === 'pm' ? defaultValue - .map(hour => Number(hour)) - .filter(hour => Number(hour) >= 12) - .map(v => getFixValue(v === 12 ? 12 : v - 12)) + .map(hour => Number(hour)) + .filter(hour => Number(hour) >= 12) + .map(v => getFixValue(v === 12 ? 12 : v - 12)) : defaultValue } } diff --git a/src/timeline/src/TimelineItem.tsx b/src/timeline/src/TimelineItem.tsx index 397887096ff..95aaa33f54b 100644 --- a/src/timeline/src/TimelineItem.tsx +++ b/src/timeline/src/TimelineItem.tsx @@ -89,17 +89,17 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'timeline-item', - computed(() => { - const { - props: { size, iconSize: iconSizeProp } - } = NTimeline - const { type } = props - return `${size[0]}${iconSizeProp || 'a'}${type[0]}` - }), - cssVarsRef, - NTimeline.props - ) + 'timeline-item', + computed(() => { + const { + props: { size, iconSize: iconSizeProp } + } = NTimeline + const { type } = props + return `${size[0]}${iconSizeProp || 'a'}${type[0]}` + }), + cssVarsRef, + NTimeline.props + ) : undefined return { mergedClsPrefix: NTimeline.mergedClsPrefixRef, diff --git a/src/transfer/src/TransferListItem.tsx b/src/transfer/src/TransferListItem.tsx index 8147032c188..29617e9fef6 100644 --- a/src/transfer/src/TransferListItem.tsx +++ b/src/transfer/src/TransferListItem.tsx @@ -89,13 +89,13 @@ export default defineComponent({ {source ? renderSourceLabel ? renderSourceLabel({ - option: this.option - }) + option: this.option + }) : label : renderTargetLabel ? renderTargetLabel({ - option: this.option - }) + option: this.option + }) : label}
{!source && !disabled && ( diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx index 533be8c89e5..88c624f8b2b 100644 --- a/src/tree-select/src/TreeSelect.tsx +++ b/src/tree-select/src/TreeSelect.tsx @@ -305,11 +305,11 @@ export default defineComponent({ if (tmNode !== null) { return showPath ? treeOption2SelectOptionWithPath( - tmNode, - treeMate.getPath(mergedValue).treeNodePath, - separator, - labelField - ) + tmNode, + treeMate.getPath(mergedValue).treeNodePath, + separator, + labelField + ) : treeOption2SelectOption(tmNode, labelField) } } @@ -335,11 +335,11 @@ export default defineComponent({ res.push( showPath ? treeOption2SelectOptionWithPath( - tmNode, - treeMate.getPath(value).treeNodePath, - separator, - labelField - ) + tmNode, + treeMate.getPath(value).treeNodePath, + separator, + labelField + ) : treeOption2SelectOption(tmNode, labelField) ) } diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx index 9ece979404e..fe3f3977484 100644 --- a/src/tree/src/Tree.tsx +++ b/src/tree/src/Tree.tsx @@ -446,18 +446,18 @@ export default defineComponent({ const dataTreeMateRef = props.internalTreeSelect ? treeSelectInjection!.dataTreeMate : computed(() => - props.showIrrelevantNodes - ? displayTreeMateRef.value - : createTreeMate( - props.data, - createTreeMateOptions( - props.keyField, - props.childrenField, - props.disabledField, - props.getChildren - ) - ) - ) + props.showIrrelevantNodes + ? displayTreeMateRef.value + : createTreeMate( + props.data, + createTreeMateOptions( + props.keyField, + props.childrenField, + props.disabledField, + props.getChildren + ) + ) + ) const { watchProps } = props const uncontrolledCheckedKeysRef = ref([]) if (watchProps?.includes('defaultCheckedKeys')) { @@ -1874,12 +1874,12 @@ export default defineComponent({ > {!fNodes.length ? resolveSlot(this.$slots.empty, () => [ - - ]) + + ]) : fNodes.map(createNode)} ) diff --git a/src/tree/src/TreeNode.tsx b/src/tree/src/TreeNode.tsx index eb17d2d0313..d21dba7d1df 100644 --- a/src/tree/src/TreeNode.tsx +++ b/src/tree/src/TreeNode.tsx @@ -510,18 +510,18 @@ const TreeNode = defineComponent({ {draggable ? this.showDropMark ? renderDropMark({ - el: this.contentElRef.value!, - position: this.droppingPosition!, - offsetLevel: this.droppingOffsetLevel, - indent - }) - : this.showDropMarkAsParent - ? renderDropMark({ el: this.contentElRef.value!, - position: 'inside', + position: this.droppingPosition!, offsetLevel: this.droppingOffsetLevel, indent }) + : this.showDropMarkAsParent + ? renderDropMark({ + el: this.contentElRef.value!, + position: 'inside', + offsetLevel: this.droppingOffsetLevel, + indent + }) : null : null} {checkboxOnRight ? checkboxNode : null} diff --git a/src/tree/src/TreeNodeContent.tsx b/src/tree/src/TreeNodeContent.tsx index 4bc522dc1cd..f563c019934 100644 --- a/src/tree/src/TreeNodeContent.tsx +++ b/src/tree/src/TreeNodeContent.tsx @@ -78,30 +78,30 @@ export default defineComponent({
{renderPrefix ? renderPrefix({ - option: rawNode, - selected, - checked - }) + option: rawNode, + selected, + checked + }) : render(prefix)}
) : null}
{renderLabel ? renderLabel({ - option: rawNode, - selected, - checked - }) + option: rawNode, + selected, + checked + }) : render(label)}
{renderSuffix || suffix ? (
{renderSuffix ? renderSuffix({ - option: rawNode, - selected, - checked - }) + option: rawNode, + selected, + checked + }) : render(suffix)}
) : null} diff --git a/src/tree/src/keyboard.tsx b/src/tree/src/keyboard.tsx index 2c15f7996e2..5ed73c335f0 100644 --- a/src/tree/src/keyboard.tsx +++ b/src/tree/src/keyboard.tsx @@ -43,10 +43,10 @@ export function useKeyboard({ const pendingNodeKeyRef = treeSelectInjection ? treeSelectInjection.pendingNodeKeyRef : ref( - mergedSelectedKeys.length - ? mergedSelectedKeys[mergedSelectedKeys.length - 1] - : null - ) + mergedSelectedKeys.length + ? mergedSelectedKeys[mergedSelectedKeys.length - 1] + : null + ) function handleKeydown(e: KeyboardEvent): { enterBehavior: TreeOverrideNodeClickBehaviorReturn | null } { diff --git a/src/typography/src/create-header.ts b/src/typography/src/create-header.ts index ab519e8e3ff..cf703c1df52 100644 --- a/src/typography/src/create-header.ts +++ b/src/typography/src/create-header.ts @@ -61,11 +61,11 @@ export default (level: '1' | '2' | '3' | '4' | '5' | '6') => }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - `h${level}`, - computed(() => props.type[0]), - cssVarsRef, - props - ) + `h${level}`, + computed(() => props.type[0]), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/typography/src/p.tsx b/src/typography/src/p.tsx index 70847e1b3e6..bf11f957acc 100644 --- a/src/typography/src/p.tsx +++ b/src/typography/src/p.tsx @@ -55,11 +55,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'p', - computed(() => `${props.depth || ''}`), - cssVarsRef, - props - ) + 'p', + computed(() => `${props.depth || ''}`), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/typography/src/text.tsx b/src/typography/src/text.tsx index d1d37906503..805eae95711 100644 --- a/src/typography/src/text.tsx +++ b/src/typography/src/text.tsx @@ -86,11 +86,11 @@ export default defineComponent({ }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - 'text', - computed(() => `${props.type[0]}${props.depth || ''}`), - cssVarsRef, - props - ) + 'text', + computed(() => `${props.type[0]}${props.depth || ''}`), + cssVarsRef, + props + ) : undefined return { mergedClsPrefix: mergedClsPrefixRef, diff --git a/src/upload/src/Upload.tsx b/src/upload/src/Upload.tsx index 635ba0572e0..fc82122c1ad 100644 --- a/src/upload/src/Upload.tsx +++ b/src/upload/src/Upload.tsx @@ -443,10 +443,10 @@ export default defineComponent({ handleFileAddition( target.files ? Array.from(target.files).map(file => ({ - file, - entry: null, - source: 'input' - })) + file, + entry: null, + source: 'input' + })) : null, e ) diff --git a/src/upload/src/UploadFile.tsx b/src/upload/src/UploadFile.tsx index 171aa4118da..8b39734ed40 100644 --- a/src/upload/src/UploadFile.tsx +++ b/src/upload/src/UploadFile.tsx @@ -158,10 +158,10 @@ export default defineComponent({ void Promise.resolve( onRemove ? onRemove({ - file: Object.assign({}, file), - fileList: mergedFileList, - index: props.index - }) + file: Object.assign({}, file), + fileList: mergedFileList, + index: props.index + }) : true ).then((result) => { if (result === false) From d72ae664ded54451903778e0cc301ce59774a66a Mon Sep 17 00:00:00 2001 From: Zheng-Changfu Date: Thu, 19 Dec 2024 18:06:48 +0800 Subject: [PATCH 04/11] fix(cascader): fix memory leak caused by event listener (#6313) Co-authored-by: 07akioni <07akioni2@gmail.com> --- src/_utils/composable/use-resize.ts | 21 ++++++++++++++++++++- src/cascader/src/CascaderMenu.tsx | 3 ++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/_utils/composable/use-resize.ts b/src/_utils/composable/use-resize.ts index fad8fb8cea5..a0ea3977d17 100644 --- a/src/_utils/composable/use-resize.ts +++ b/src/_utils/composable/use-resize.ts @@ -1,9 +1,19 @@ import { onBeforeUnmount, onMounted, type Ref } from 'vue' import { resizeObserverManager } from 'vueuc' +interface UseOnResizeOptions { + /** + * In some cases + * if a reactive variable is used in the render function to control whether or not the dom is rendered, + * the event cannot be cleared in onBeforeUnmount because the dom no longer exists, + * but the event contains a reference to the dom, resulting in a memory leak + */ + show?: Ref +} export function useOnResize( elRef: Ref, - onResize: (() => void) | undefined + onResize: (() => void) | undefined, + options?: UseOnResizeOptions ): void { // it needn't be reactive since it's for internal usage if (onResize) { @@ -19,5 +29,14 @@ export function useOnResize( resizeObserverManager.unregisterHandler(el) } }) + if (options?.show && isRef(options.show)) { + onBeforeUpdate(() => { + const { value: el } = elRef + const { value: show } = options.show! + if (!show && el) { + resizeObserverManager.unregisterHandler(el) + } + }) + } } } diff --git a/src/cascader/src/CascaderMenu.tsx b/src/cascader/src/CascaderMenu.tsx index 6252395aba2..e32c06df7f8 100644 --- a/src/cascader/src/CascaderMenu.tsx +++ b/src/cascader/src/CascaderMenu.tsx @@ -13,6 +13,7 @@ import { inject, type PropType, ref, + toRef, Transition, withDirectives } from 'vue' @@ -74,7 +75,7 @@ export default defineComponent({ function handleResize(): void { syncCascaderMenuPosition() } - useOnResize(selfElRef, handleResize) + useOnResize(selfElRef, handleResize, { show: toRef(props, 'show') }) function showErrorMessage(label: string): void { const { value: { loadingRequiredMessage } From 312d133f93c0eae7bb1d49a0f62d6f4ab9944953 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 19 Dec 2024 18:14:08 +0800 Subject: [PATCH 05/11] refactor(useOnResize): clean code --- src/_utils/composable/use-resize.ts | 37 +++++++++++++---------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/src/_utils/composable/use-resize.ts b/src/_utils/composable/use-resize.ts index a0ea3977d17..525a8682d14 100644 --- a/src/_utils/composable/use-resize.ts +++ b/src/_utils/composable/use-resize.ts @@ -1,19 +1,9 @@ -import { onBeforeUnmount, onMounted, type Ref } from 'vue' +import { onBeforeUnmount, onMounted, type Ref, watch } from 'vue' import { resizeObserverManager } from 'vueuc' -interface UseOnResizeOptions { - /** - * In some cases - * if a reactive variable is used in the render function to control whether or not the dom is rendered, - * the event cannot be cleared in onBeforeUnmount because the dom no longer exists, - * but the event contains a reference to the dom, resulting in a memory leak - */ - show?: Ref -} export function useOnResize( elRef: Ref, - onResize: (() => void) | undefined, - options?: UseOnResizeOptions + onResize: (() => void) | undefined ): void { // it needn't be reactive since it's for internal usage if (onResize) { @@ -23,20 +13,25 @@ export function useOnResize( resizeObserverManager.registerHandler(el, onResize) } }) + + // avoid memory leak + watch( + elRef, + (_, oldEl) => { + if (oldEl) { + resizeObserverManager.unregisterHandler(oldEl) + } + }, + { + deep: false + } + ) + onBeforeUnmount(() => { const { value: el } = elRef if (el) { resizeObserverManager.unregisterHandler(el) } }) - if (options?.show && isRef(options.show)) { - onBeforeUpdate(() => { - const { value: el } = elRef - const { value: show } = options.show! - if (!show && el) { - resizeObserverManager.unregisterHandler(el) - } - }) - } } } From c84b2f2e58c716c8fe1fdd47dd75bce03374046f Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 19 Dec 2024 18:18:19 +0800 Subject: [PATCH 06/11] fix(checkbox): memory leak --- src/checkbox/src/CheckMark.tsx | 3 ++- src/checkbox/src/Checkbox.tsx | 21 +++++++++++---------- src/checkbox/src/LineMark.tsx | 3 ++- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/checkbox/src/CheckMark.tsx b/src/checkbox/src/CheckMark.tsx index 4897034d68b..c1c89eaf83e 100644 --- a/src/checkbox/src/CheckMark.tsx +++ b/src/checkbox/src/CheckMark.tsx @@ -1,6 +1,7 @@ +import type { VNode } from 'vue' import { h } from 'vue' -export default ( +export default (): VNode => ( diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx index 5e9633e94ca..558fd2a4905 100644 --- a/src/checkbox/src/Checkbox.tsx +++ b/src/checkbox/src/Checkbox.tsx @@ -32,8 +32,8 @@ import { } from '../../_utils' import { checkboxLight } from '../styles' import { checkboxGroupInjectionKey } from './CheckboxGroup' -import CheckMark from './CheckMark' -import LineMark from './LineMark' +import renderCheckMark from './CheckMark' +import renderLineMark from './LineMark' import style from './styles/index.cssr' export const checkboxProps = { @@ -246,8 +246,8 @@ export default defineComponent({ colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, - checkMarkColor, - checkMarkColorDisabled, + renderCheckMarkColor, + renderCheckMarkColorDisabled, border, borderFocus, borderDisabled, @@ -255,7 +255,7 @@ export default defineComponent({ boxShadowFocus, textColor, textColorDisabled, - checkMarkColorDisabledChecked, + renderCheckMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, @@ -286,9 +286,10 @@ export default defineComponent({ '--n-color-disabled-checked': colorDisabledChecked, '--n-text-color': textColor, '--n-text-color-disabled': textColorDisabled, - '--n-check-mark-color': checkMarkColor, - '--n-check-mark-color-disabled': checkMarkColorDisabled, - '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked, + '--n-check-mark-color': renderCheckMarkColor, + '--n-check-mark-color-disabled': renderCheckMarkColorDisabled, + '--n-check-mark-color-disabled-checked': + renderCheckMarkColorDisabledChecked, '--n-font-size': fontSize, '--n-label-padding': labelPadding } @@ -389,11 +390,11 @@ export default defineComponent({ key="indeterminate" class={`${mergedClsPrefix}-checkbox-icon`} > - {LineMark} + {renderLineMark()} ) : (
- {CheckMark} + {renderCheckMark()}
) }} diff --git a/src/checkbox/src/LineMark.tsx b/src/checkbox/src/LineMark.tsx index 2053beb42f9..802bda3254e 100644 --- a/src/checkbox/src/LineMark.tsx +++ b/src/checkbox/src/LineMark.tsx @@ -1,6 +1,7 @@ +import type { VNode } from 'vue' import { h } from 'vue' -export default ( +export default (): VNode => ( From da4394dee6decdec7659f768e52589c8f81b17d3 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 19 Dec 2024 19:25:46 +0800 Subject: [PATCH 07/11] fix: memory leak --- src/back-top/src/BackTop.tsx | 4 +- src/back-top/src/BackTopIcon.tsx | 2 +- src/carousel/src/CarouselArrow.tsx | 52 +++++++++++++----------- src/cascader/src/CascaderMenu.tsx | 3 +- src/checkbox/src/Checkbox.tsx | 13 +++--- src/image/src/ImagePreview.tsx | 8 ++-- src/image/src/icons.tsx | 54 ++++++++++++++----------- src/rate/src/Rate.tsx | 4 +- src/rate/src/StarIcon.tsx | 2 +- src/result/src/403.tsx | 26 ++++++------ src/result/src/404.tsx | 40 ++++++++++--------- src/result/src/418.tsx | 37 +++++++++-------- src/result/src/500.tsx | 28 +++++++------ src/result/src/Result.tsx | 16 ++++---- src/theme-editor/src/ThemeEditor.tsx | 60 ++++++++++++++-------------- src/upload/src/UploadFile.tsx | 6 +-- src/upload/src/icons.tsx | 4 +- 17 files changed, 190 insertions(+), 169 deletions(-) diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx index ff4de8cf9ab..225d28bbeda 100644 --- a/src/back-top/src/BackTop.tsx +++ b/src/back-top/src/BackTop.tsx @@ -30,7 +30,7 @@ import { warnOnce } from '../../_utils' import { backTopLight } from '../styles' -import BackTopIcon from './BackTopIcon' +import renderBackTopIcon from './BackTopIcon' import style from './styles/index.cssr' export const backTopProps = { @@ -301,7 +301,7 @@ export default defineComponent({ }), resolveSlot(this.$slots.default, () => [ - {{ default: () => BackTopIcon }} + {{ default: renderBackTopIcon }} ]) ) diff --git a/src/back-top/src/BackTopIcon.tsx b/src/back-top/src/BackTopIcon.tsx index e3af0570746..5935d350cb6 100644 --- a/src/back-top/src/BackTopIcon.tsx +++ b/src/back-top/src/BackTopIcon.tsx @@ -1,6 +1,6 @@ import { h } from 'vue' -export default ( +export default () => ( - - - - - -) +function renderBackwardIcon() { + return ( + + + + + + + ) +} -const forwardIcon = ( - - - - - - -) +function renderForwardIcon() { + return ( + + + + + + + ) +} export default defineComponent({ name: 'CarouselArrow', @@ -54,7 +58,7 @@ export default defineComponent({ role="button" onClick={this.prev} > - {backwardIcon} + {renderBackwardIcon()}
- {forwardIcon} + {renderForwardIcon()}
) diff --git a/src/cascader/src/CascaderMenu.tsx b/src/cascader/src/CascaderMenu.tsx index e32c06df7f8..6252395aba2 100644 --- a/src/cascader/src/CascaderMenu.tsx +++ b/src/cascader/src/CascaderMenu.tsx @@ -13,7 +13,6 @@ import { inject, type PropType, ref, - toRef, Transition, withDirectives } from 'vue' @@ -75,7 +74,7 @@ export default defineComponent({ function handleResize(): void { syncCascaderMenuPosition() } - useOnResize(selfElRef, handleResize, { show: toRef(props, 'show') }) + useOnResize(selfElRef, handleResize) function showErrorMessage(label: string): void { const { value: { loadingRequiredMessage } diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx index 558fd2a4905..a92581efc51 100644 --- a/src/checkbox/src/Checkbox.tsx +++ b/src/checkbox/src/Checkbox.tsx @@ -246,8 +246,8 @@ export default defineComponent({ colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, - renderCheckMarkColor, - renderCheckMarkColorDisabled, + checkMarkColor, + checkMarkColorDisabled, border, borderFocus, borderDisabled, @@ -255,7 +255,7 @@ export default defineComponent({ boxShadowFocus, textColor, textColorDisabled, - renderCheckMarkColorDisabledChecked, + checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, @@ -286,10 +286,9 @@ export default defineComponent({ '--n-color-disabled-checked': colorDisabledChecked, '--n-text-color': textColor, '--n-text-color-disabled': textColorDisabled, - '--n-check-mark-color': renderCheckMarkColor, - '--n-check-mark-color-disabled': renderCheckMarkColorDisabled, - '--n-check-mark-color-disabled-checked': - renderCheckMarkColorDisabledChecked, + '--n-check-mark-color': checkMarkColor, + '--n-check-mark-color-disabled': checkMarkColorDisabled, + '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked, '--n-font-size': fontSize, '--n-label-padding': labelPadding } diff --git a/src/image/src/ImagePreview.tsx b/src/image/src/ImagePreview.tsx index 311b5a0f621..ad0dbfb6133 100644 --- a/src/image/src/ImagePreview.tsx +++ b/src/image/src/ImagePreview.tsx @@ -35,7 +35,7 @@ import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins' import { download } from '../../_utils' import { NTooltip } from '../../tooltip' import { imageLight } from '../styles' -import { closeIcon, nextIcon, prevIcon } from './icons' +import { renderCloseIcon, renderNextIcon, renderPrevIcon } from './icons' import { imageContextKey, imagePreviewSharedProps, @@ -507,13 +507,13 @@ export default defineComponent({ const prevNode = withTooltip( - {{ default: () => prevIcon }} + {{ default: renderPrevIcon }} , 'tipPrevious' ) const nextNode = withTooltip( - {{ default: () => nextIcon }} + {{ default: renderNextIcon }} , 'tipNext' ) @@ -560,7 +560,7 @@ export default defineComponent({ const closeNode = withTooltip( - {{ default: () => closeIcon }} + {{ default: renderCloseIcon }} , 'tipClose' ) diff --git a/src/image/src/icons.tsx b/src/image/src/icons.tsx index cb697ca9814..965dbeef6d0 100644 --- a/src/image/src/icons.tsx +++ b/src/image/src/icons.tsx @@ -1,28 +1,34 @@ import { h } from 'vue' -export const prevIcon = ( - - - -) +export function renderPrevIcon() { + return ( + + + + ) +} -export const nextIcon = ( - - - -) +export function renderNextIcon() { + return ( + + + + ) +} -export const closeIcon = ( - - - -) +export function renderCloseIcon() { + return ( + + + + ) +} diff --git a/src/rate/src/Rate.tsx b/src/rate/src/Rate.tsx index fc8872cd05d..42a66c88f0e 100644 --- a/src/rate/src/Rate.tsx +++ b/src/rate/src/Rate.tsx @@ -17,7 +17,7 @@ import { NBaseIcon } from '../../_internal' import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins' import { call, color2Class, createKey } from '../../_utils' import { rateLight } from '../styles' -import StarIcon from './StarIcon' +import renderStarIcon from './StarIcon' import style from './styles/index.cssr' export const rateProps = { @@ -204,7 +204,7 @@ export default defineComponent({ defaultSlot({ index }) ) : ( - {{ default: () => StarIcon }} + {{ default: renderStarIcon }} ) const entireStarActive diff --git a/src/rate/src/StarIcon.tsx b/src/rate/src/StarIcon.tsx index e3ca549e792..8856ed66c40 100644 --- a/src/rate/src/StarIcon.tsx +++ b/src/rate/src/StarIcon.tsx @@ -1,6 +1,6 @@ import { h } from 'vue' -export default ( +export default () => ( diff --git a/src/result/src/403.tsx b/src/result/src/403.tsx index dd61dc3d359..37da30535bc 100644 --- a/src/result/src/403.tsx +++ b/src/result/src/403.tsx @@ -1,14 +1,16 @@ import { h } from 'vue' -export default ( - - - - -) +export function render403() { + return ( + + + + + ) +} diff --git a/src/result/src/404.tsx b/src/result/src/404.tsx index bee000d467b..ba622acd8cd 100644 --- a/src/result/src/404.tsx +++ b/src/result/src/404.tsx @@ -1,21 +1,23 @@ import { h } from 'vue' -export default ( - - - - - - - - -) +export function render404() { + return ( + + + + + + + + + ) +} diff --git a/src/result/src/418.tsx b/src/result/src/418.tsx index 029587cf902..1fa82e48f6c 100644 --- a/src/result/src/418.tsx +++ b/src/result/src/418.tsx @@ -1,18 +1,23 @@ import { h } from 'vue' -export default ( - - - - - - - - -) +export function render418() { + return ( + + + + + + + + + ) +} diff --git a/src/result/src/500.tsx b/src/result/src/500.tsx index 130d1846140..4825e0200b3 100644 --- a/src/result/src/500.tsx +++ b/src/result/src/500.tsx @@ -1,15 +1,17 @@ import { h } from 'vue' -export default ( - - - - - -) +export function render500() { + return ( + + + + + + ) +} diff --git a/src/result/src/Result.tsx b/src/result/src/Result.tsx index 93ea66ba790..c5fac6a7e94 100644 --- a/src/result/src/Result.tsx +++ b/src/result/src/Result.tsx @@ -18,17 +18,17 @@ import { import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { createKey } from '../../_utils' import { resultLight } from '../styles' -import image403 from './403' -import image404 from './404' -import image418 from './418' -import image500 from './500' +import { render403 } from './403' +import { render404 } from './404' +import { render418 } from './418' +import { render500 } from './500' import style from './styles/index.cssr' const iconRenderMap = { - 403: () => image403, - 404: () => image404, - 418: () => image418, - 500: () => image500, + 403: render403, + 404: render404, + 418: render418, + 500: render500, info: () => , success: () => , warning: () => , diff --git a/src/theme-editor/src/ThemeEditor.tsx b/src/theme-editor/src/ThemeEditor.tsx index 8cf9a89e52a..5c31881d88a 100644 --- a/src/theme-editor/src/ThemeEditor.tsx +++ b/src/theme-editor/src/ThemeEditor.tsx @@ -32,35 +32,37 @@ import { lightTheme } from '../../themes/light' import { MaximizeIcon } from './MaximizeIcon' import { MinimizeIcon } from './MinimizeIcon' -const ColorWandIcon = ( - - - - - - - - - - -) + + + + + + + + + + ) +} // button colorOpacitySecondary var is not color function showColorPicker(key: string): boolean { @@ -258,7 +260,7 @@ export default defineComponent({ this.showPanel = !this.showPanel }} > - {{ default: () => ColorWandIcon }} + {{ default: renderColorWandIcon }} ), default: () => ( diff --git a/src/upload/src/UploadFile.tsx b/src/upload/src/UploadFile.tsx index 8b39734ed40..ec355af91a1 100644 --- a/src/upload/src/UploadFile.tsx +++ b/src/upload/src/UploadFile.tsx @@ -26,7 +26,7 @@ import { import { download, warn } from '../../_utils' import { NButton } from '../../button' import { NImage } from '../../image' -import { documentIcon, imageIcon } from './icons' +import { renderDocumentIcon, renderImageIcon } from './icons' import { uploadInjectionKey } from './interface' import NUploadProgress from './UploadProgress' import { isImageFile } from './utils' @@ -265,11 +265,11 @@ export default defineComponent({ renderIcon(file) ) : isImageFile(file) ? ( - {{ default: () => imageIcon }} + {{ default: renderImageIcon }} ) : ( - {{ default: () => documentIcon }} + {{ default: renderDocumentIcon }} )} diff --git a/src/upload/src/icons.tsx b/src/upload/src/icons.tsx index 4b4903dd7cb..a948febe8ca 100644 --- a/src/upload/src/icons.tsx +++ b/src/upload/src/icons.tsx @@ -5,7 +5,7 @@ import { h } from 'vue' * now. */ -export const imageIcon = ( +export const renderImageIcon = ( ) -export const documentIcon = ( +export const renderDocumentIcon = ( Date: Fri, 20 Dec 2024 11:56:33 +0800 Subject: [PATCH 08/11] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20issue=20tem?= =?UTF-8?q?plate=20(#6634)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/ISSUE_TEMPLATE/bug_report.yml | 2 +- .github/ISSUE_TEMPLATE/bug_report.zh-CN.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 9731081bae5..2a84eff4d37 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -29,7 +29,7 @@ body: id: reproduction attributes: label: Link to minimal reproduction - description: Please provide a [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example). Provide a streamlined CodePen/CodeSandbox or GitHub repository link. Please don't fill in a link randomly. + description: Please provide a [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example). Provide a streamlined [Playground](https://play.pro-components.cn)/CodePen/CodeSandbox or GitHub repository link. Please don't fill in a link randomly. placeholder: Reproduction validations: required: true diff --git a/.github/ISSUE_TEMPLATE/bug_report.zh-CN.yml b/.github/ISSUE_TEMPLATE/bug_report.zh-CN.yml index d045d91100f..0754bfae7d4 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.zh-CN.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.zh-CN.yml @@ -29,7 +29,7 @@ body: id: reproduction attributes: label: 最小复现链接 - description: 请提供[最小复现](https://stackoverflow.com/help/minimal-reproducible-example)链接。提供一个简化的 CodePen/CodeSandbox 或 GitHub 仓库链接。请不要随机填写链接。 + description: 请提供[最小复现](https://stackoverflow.com/help/minimal-reproducible-example)链接。提供一个简化的 [Playground](https://play.pro-components.cn)/CodePen/CodeSandbox 或 GitHub 仓库链接。请不要随机填写链接。 placeholder: 复现链接 validations: required: true From 42fd8128587a81677cfd1709cf88b02eef85eae3 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 20 Dec 2024 12:03:27 +0800 Subject: [PATCH 09/11] deps: update xicons to fix memory leaking issue --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b12d50542c5..3a2d95a83d1 100644 --- a/package.json +++ b/package.json @@ -101,9 +101,9 @@ "@rollup/plugin-terser": "^0.4.3", "@types/estree": "^1.0.1", "@types/jest": "^29.5.4", - "@vicons/fluent": "^0.12.0", - "@vicons/ionicons4": "^0.12.0", - "@vicons/ionicons5": "^0.12.0", + "@vicons/fluent": "^0.13.0", + "@vicons/ionicons4": "^0.13.0", + "@vicons/ionicons5": "^0.13.0", "@vitejs/plugin-vue": "^5.0.3", "@vue/compiler-sfc": "^3.4.15", "@vue/server-renderer": "^3.5.13", From cfd807dd10b59e0eac6c25a8f0e8b4bd3ca7f904 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 20 Dec 2024 14:03:27 +0800 Subject: [PATCH 10/11] docs: fixes changelog --- CHANGELOG.en-US.md | 9 +++++++++ CHANGELOG.zh-CN.md | 5 ++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 4da53bc65a1..3db78296d18 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,14 @@ # CHANGELOG +## NEXT_VERSION + +`2024-12-20` + +### Fixes + +- Fix `inset` CSS property caused compatibility issues in some browsers, closes [#6604](https://github.com/tusen-ai/naive-ui/issues/6604)，close [#6602](https://github.com/tusen-ai/naive-ui/issues/6602). +- Fix memory leak problem when used with new version of vue. Note: After the fix you may still find memory leak in Chrome >= 129, since they introduced a bug, see https://github.com/vuejs/core/issues/12306, https://issues.chromium.org/issues/376777343 + ## 2.40.3 `2024-12-02` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 65660d74211..a0cb52dc253 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -2,9 +2,12 @@ ## NEXT_VERSION +`2024-12-20` + ### Fixes -- 修复 `n-scrollbar`、`n-float-button`、`n-float-button-group`、`n-popover` 组件中的 `inset` 属性在部分浏览器中有兼容性问题，close [#6604](https://github.com/tusen-ai/naive-ui/issues/6604)，close [#6602](https://github.com/tusen-ai/naive-ui/issues/6602) +- 修复 `n-scrollbar`、`n-float-button`、`n-float-button-group`、`n-popover` 组件中的 `inset` 属性在部分浏览器中有兼容性问题，关闭 [#6604](https://github.com/tusen-ai/naive-ui/issues/6604)，关闭 [#6602](https://github.com/tusen-ai/naive-ui/issues/6602) +- 修复和较新版本 vue 配合使用时的内存泄露问题。注意：修复后你可能仍然会在 Chrome >= 129 中发现内存泄漏，因为他们引入了一个 bug，参考：https://github.com/vuejs/core/issues/12306 https://issues.chromium.org/issues/376777343 ## 2.40.3 From 3bdde87071fed9e2cd2073b6571521b8240c0060 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 20 Dec 2024 14:11:53 +0800 Subject: [PATCH 11/11] 2.40.4 --- CHANGELOG.en-US.md | 2 +- CHANGELOG.zh-CN.md | 2 +- package.json | 2 +- src/version.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 3db78296d18..4e37276cdcd 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,6 +1,6 @@ # CHANGELOG -## NEXT_VERSION +## 2.40.4 `2024-12-20` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index a0cb52dc253..e195665e9d2 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,6 +1,6 @@ # CHANGELOG -## NEXT_VERSION +## 2.40.4 `2024-12-20` diff --git a/package.json b/package.json index 3a2d95a83d1..82a4066a248 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "naive-ui", - "version": "2.40.3", + "version": "2.40.4", "packageManager": "pnpm@9.5.0", "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast", "author": "07akioni", diff --git a/src/version.ts b/src/version.ts index 19e2a94a02d..cb39e3fae16 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export default '2.40.3' +export default '2.40.4'