From 36a311cf496b3851a033cd03caa11a42fb6856c7 Mon Sep 17 00:00:00 2001
From: Zheng-Changfu <zcfpromise@163.com>
Date: Thu, 19 Dec 2024 17:25:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=20inset=20=E5=B1=9E?=
=?UTF-8?q?=E6=80=A7=EF=BC=8C=E5=9B=A0=E4=B8=BA=E5=9C=A8=E9=83=A8=E5=88=86?=
=?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E4=B8=AD=E6=9C=89=E5=85=BC=E5=AE=B9?=
=?UTF-8?q?=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(
- <div style={{ position: 'fixed', inset: 0 }} />,
+ <div
+ style={{
+ position: 'fixed',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0
+ }}
+ />,
[
[
zindexable,