fix(tabs): may missing over-scroll shadow if placement is 'left' or 'right'

CHANGELOG.en-US.md

@@ -25,6 +25,7 @@
 - Fix `n-avatar`'s lazy loading and `fallback-src` prop not working when load error in lazy, closes [#5007](https://github.com/tusen-ai/naive-ui/issues/5007).
 - Fix `n-split` has no color if it's not used in a card.
 - Fix `n-card` `footer-class` prop not working.
+- Fix `n-tabs` may miss over-scroll shadow if `placement` is `'left'` or `'right'`.
 
 ### Features
 

CHANGELOG.zh-CN.md

@@ -25,6 +25,7 @@
 - 修复 `n-avatar` 懒加载和懒加载失败时 `fallback-src` 属性都不生效，关闭[#5007](https://github.com/tusen-ai/naive-ui/issues/5007)
 - 修复 `n-split` 不在卡片中使用没有颜色
 - 修复 `n-card` 的 `footer-class` 属性不生效
+- 修复 `n-tabs` 在 `placement` 为 `'left'` 和 `'right'` 时初始化滚动阴影可能不正确
 
 ### Features
 

src/flex/index.ts

@@ -1,2 +1,3 @@
 export { default as NFlex, flexProps } from './src/Flex'
 export type { FlexProps } from './src/Flex'
+export type { FlexAlign, FlexJustify } from './src/type'

src/flex/src/Flex.tsx

@@ -1,19 +1,19 @@
 import { h, defineComponent, computed, type PropType } from 'vue'
-import type { Property } from 'csstype'
 import { depx, getGap } from 'seemly'
+import { useRtl } from '../../_mixins/use-rtl'
 import { createKey, flatten, getSlot } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { flexLight } from '../styles'
 import type { FlexTheme } from '../styles'
-import { useRtl } from '../../_mixins/use-rtl'
+import type { FlexAlign, FlexJustify } from './type'
 
 export const flexProps = {
   ...(useTheme.props as ThemeProps<FlexTheme>),
-  align: String as PropType<Property.AlignItems>,
+  align: String as PropType<FlexAlign>,
   justify: {
-    type: String as PropType<Property.JustifyContent>,
+    type: String as PropType<FlexJustify>,
     default: 'start'
   },
   inline: Boolean,

src/flex/src/type.ts

@@ -0,0 +1,5 @@
+import { type Property } from 'csstype'
+
+export type FlexAlign = Property.AlignItems
+
+export type FlexJustify = Property.JustifyContent

src/tabs/src/Tabs.tsx

@@ -158,6 +158,7 @@ export default defineComponent({
     const xScrollInstRef = ref<(VXScrollInst & ComponentPublicInstance) | null>(
       null
     )
+    const yScrollElRef = ref<HTMLElement | null>(null)
 
     const startReachedRef = ref(true)
     const endReachedRef = ref(true)
@@ -478,8 +479,11 @@ export default defineComponent({
         }
       }
       if (type !== 'segment') {
+        const { placement } = props
         deriveScrollShadow(
-          (xScrollInstRef.value?.$el as undefined | HTMLElement) || null
+          (placement === 'top' || placement === 'bottom'
+            ? (xScrollInstRef.value?.$el as undefined | HTMLElement)
+            : yScrollElRef.value) || null
         )
       }
     }
@@ -711,6 +715,7 @@ export default defineComponent({
       themeClass: themeClassHandle?.themeClass,
       animationDirection: animationDirectionRef,
       renderNameListRef,
+      yScrollElRef,
       onAnimationBeforeLeave,
       onAnimationEnter,
       onAnimationAfterEnter,
@@ -928,6 +933,7 @@ export default defineComponent({
                       <div
                         class={`${mergedClsPrefix}-tabs-nav-y-scroll`}
                         onScroll={this.handleScroll}
+                        ref="yScrollElRef"
                       >
                         {scrollContent()}
                       </div>