naive-ui 2.34.3 → 2.34.4

package/es/tabs/src/Tabs.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="lodash" />
-import { PropType, CSSProperties, ComponentPublicInstance, nextTick, ExtractPropTypes } from 'vue';
-import { VXScrollInst } from 'vueuc';
+import { type PropType, type CSSProperties, type ComponentPublicInstance, nextTick, type ExtractPropTypes } from 'vue';
+import { type VXScrollInst } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { Addable, OnClose, OnBeforeLeave, TabsType, OnUpdateValue } from './interface';
 export declare const tabsProps: {
@@ -28,6 +28,8 @@ export declare const tabsProps: {
     readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
+    readonly paneWrapperClass: StringConstructor;
+    readonly paneWrapperStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
     readonly tabsPadding: {
         readonly type: NumberConstructor;
@@ -82,6 +84,9 @@ export declare const tabsProps: {
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -91,6 +96,9 @@ export declare const tabsProps: {
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -100,6 +108,9 @@ export declare const tabsProps: {
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -115,6 +126,9 @@ export declare const tabsProps: {
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -161,6 +175,9 @@ export declare const tabsProps: {
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -170,6 +187,9 @@ export declare const tabsProps: {
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -179,6 +199,9 @@ export declare const tabsProps: {
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -194,6 +217,9 @@ export declare const tabsProps: {
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -240,6 +266,9 @@ export declare const tabsProps: {
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -249,6 +278,9 @@ export declare const tabsProps: {
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -258,6 +290,9 @@ export declare const tabsProps: {
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -273,6 +308,9 @@ export declare const tabsProps: {
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -306,6 +344,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
+    readonly paneWrapperClass: StringConstructor;
+    readonly paneWrapperStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
     readonly tabsPadding: {
         readonly type: NumberConstructor;
@@ -360,6 +400,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -369,6 +412,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -378,6 +424,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -393,6 +442,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -439,6 +491,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -448,6 +503,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -457,6 +515,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -472,6 +533,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -518,6 +582,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -527,6 +594,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -536,6 +606,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -551,6 +624,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -566,7 +642,7 @@ declare const _default: import("vue").DefineComponent<{
     tabsPaneWrapperRef: import("vue").Ref<HTMLElement | null>;
     tabsElRef: import("vue").Ref<HTMLElement | null>;
     barElRef: import("vue").Ref<HTMLElement | null>;
-    addTabInstRef: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null>;
+    addTabInstRef: import("vue").Ref<ComponentPublicInstance | null>;
     xScrollInstRef: import("vue").Ref<(VXScrollInst & {
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -641,7 +717,11 @@ declare const _default: import("vue").DefineComponent<{
         '--n-tab-padding': string;
         '--n-tab-padding-vertical': string;
         '--n-tab-gap': string;
-        '--n-pane-padding': string;
+        '--n-tab-gap-vertical': string;
+        '--n-pane-padding-left': string;
+        '--n-pane-padding-right': string;
+        '--n-pane-padding-top': string;
+        '--n-pane-padding-bottom': string;
         '--n-font-weight-strong': string;
         '--n-tab-color-segment': string;
     }> | undefined;
@@ -679,6 +759,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
+    readonly paneWrapperClass: StringConstructor;
+    readonly paneWrapperStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
     readonly tabsPadding: {
         readonly type: NumberConstructor;
@@ -733,6 +815,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -742,6 +827,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -751,6 +839,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -766,6 +857,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -812,6 +906,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -821,6 +918,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -830,6 +930,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -845,6 +948,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -891,6 +997,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallLine: string;
         tabGapMediumLine: string;
         tabGapLargeLine: string;
+        tabGapSmallLineVertical: string;
+        tabGapMediumLineVertical: string;
+        tabGapLargeLineVertical: string;
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
@@ -900,6 +1009,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
+        tabGapSmallBarVertical: string;
+        tabGapMediumBarVertical: string;
+        tabGapLargeBarVertical: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
@@ -909,6 +1021,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
+        tabGapSmallCardVertical: string;
+        tabGapMediumCardVertical: string;
+        tabGapLargeCardVertical: string;
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
@@ -924,6 +1039,9 @@ declare const _default: import("vue").DefineComponent<{
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
+        tabGapSmallSegmentVertical: string;
+        tabGapMediumSegmentVertical: string;
+        tabGapLargeSegmentVertical: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;

package/es/tabs/src/Tabs.js

@@ -8,6 +8,7 @@ import { tabsLight } from '../styles';
 import { tabsInjectionKey } from './interface';
 import Tab from './Tab';
 import style from './styles/index.cssr';
+import { getPadding } from 'seemly';
 export const tabsProps = Object.assign(Object.assign({}, useTheme.props), { value: [String, Number], defaultValue: [String, Number], trigger: {
         type: String,
         default: 'click'
@@ -20,7 +21,7 @@ export const tabsProps = Object.assign(Object.assign({}, useTheme.props), { valu
     }, placement: {
         type: String,
         default: 'top'
-    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
+    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], paneWrapperClass: String, paneWrapperStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
     }, animated: Boolean, onBeforeLeave: Function, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
@@ -51,8 +52,8 @@ export default defineComponent({
         const scrollWrapperElRef = ref(null);
         const addTabInstRef = ref(null);
         const xScrollInstRef = ref(null);
-        const leftReachedRef = ref(true);
-        const rightReachedRef = ref(true);
+        const startReachedRef = ref(true);
+        const endReachedRef = ref(true);
         const compitableSizeRef = useCompitable(props, ['labelSize', 'size']);
         const compitableValueRef = useCompitable(props, ['activeName', 'value']);
         const uncontrolledValueRef = ref((_b = (_a = compitableValueRef.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : (slots.default
@@ -334,9 +335,17 @@ export default defineComponent({
         function deriveScrollShadow(el) {
             if (!el)
                 return;
-            const { scrollLeft, scrollWidth, offsetWidth } = el;
-            leftReachedRef.value = scrollLeft <= 0;
-            rightReachedRef.value = scrollLeft + offsetWidth >= scrollWidth;
+            const { placement } = props;
+            if (placement === 'top' || placement === 'bottom') {
+                const { scrollLeft, scrollWidth, offsetWidth } = el;
+                startReachedRef.value = scrollLeft <= 0;
+                endReachedRef.value = scrollLeft + offsetWidth >= scrollWidth;
+            }
+            else {
+                const { scrollTop, scrollHeight, offsetHeight } = el;
+                startReachedRef.value = scrollTop <= 0;
+                endReachedRef.value = scrollTop + offsetHeight >= scrollHeight;
+            }
         }
         const handleScroll = throttle((e) => {
             deriveScrollShadow(e.target);
@@ -363,22 +372,22 @@ export default defineComponent({
         // avoid useless rerender
         watchEffect(() => {
             const { value: el } = scrollWrapperElRef;
-            if (!el || ['left', 'right'].includes(props.placement))
+            if (!el)
                 return;
             const { value: clsPrefix } = mergedClsPrefixRef;
-            const shadowBeforeClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-before`;
-            const shadowAfterClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-after`;
-            if (leftReachedRef.value) {
-                el.classList.remove(shadowBeforeClass);
+            const shadowStartClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-start`;
+            const shadowEndClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-end`;
+            if (startReachedRef.value) {
+                el.classList.remove(shadowStartClass);
             }
             else {
-                el.classList.add(shadowBeforeClass);
+                el.classList.add(shadowStartClass);
             }
-            if (rightReachedRef.value) {
-                el.classList.remove(shadowAfterClass);
+            if (endReachedRef.value) {
+                el.classList.remove(shadowEndClass);
             }
             else {
-                el.classList.add(shadowAfterClass);
+                el.classList.add(shadowEndClass);
             }
         });
         const tabsRailElRef = ref(null);
@@ -409,7 +418,7 @@ export default defineComponent({
                 segment: 'Segment'
             }[type];
             const sizeType = `${size}${typeSuffix}`;
-            const { self: { barColor, closeIconColor, closeIconColorHover, closeIconColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, colorSegment, fontWeightStrong, tabColorSegment, closeSize, closeIconSize, closeColorHover, closeColorPressed, closeBorderRadius, [createKey('panePadding', size)]: panePadding, [createKey('tabPadding', sizeType)]: tabPadding, [createKey('tabPaddingVertical', sizeType)]: tabPaddingVertical, [createKey('tabGap', sizeType)]: tabGap, [createKey('tabTextColor', type)]: tabTextColor, [createKey('tabTextColorActive', type)]: tabTextColorActive, [createKey('tabTextColorHover', type)]: tabTextColorHover, [createKey('tabTextColorDisabled', type)]: tabTextColorDisabled, [createKey('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { barColor, closeIconColor, closeIconColorHover, closeIconColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, colorSegment, fontWeightStrong, tabColorSegment, closeSize, closeIconSize, closeColorHover, closeColorPressed, closeBorderRadius, [createKey('panePadding', size)]: panePadding, [createKey('tabPadding', sizeType)]: tabPadding, [createKey('tabPaddingVertical', sizeType)]: tabPaddingVertical, [createKey('tabGap', sizeType)]: tabGap, [createKey('tabGap', `${sizeType}Vertical`)]: tabGapVertical, [createKey('tabTextColor', type)]: tabTextColor, [createKey('tabTextColorActive', type)]: tabTextColorActive, [createKey('tabTextColorHover', type)]: tabTextColorHover, [createKey('tabTextColorDisabled', type)]: tabTextColorDisabled, [createKey('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-color-segment': colorSegment,
@@ -436,7 +445,11 @@ export default defineComponent({
                 '--n-tab-padding': tabPadding,
                 '--n-tab-padding-vertical': tabPaddingVertical,
                 '--n-tab-gap': tabGap,
-                '--n-pane-padding': panePadding,
+                '--n-tab-gap-vertical': tabGapVertical,
+                '--n-pane-padding-left': getPadding(panePadding, 'left'),
+                '--n-pane-padding-right': getPadding(panePadding, 'right'),
+                '--n-pane-padding-top': getPadding(panePadding, 'top'),
+                '--n-pane-padding-bottom': getPadding(panePadding, 'bottom'),
                 '--n-font-weight-strong': fontWeightStrong,
                 '--n-tab-color-segment': tabColorSegment
             };
@@ -459,7 +472,7 @@ export default defineComponent({
             onAnimationAfterEnter, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, type, placement, addTabFixed, addable, mergedSize, renderNameListRef, onRender, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
+        const { mergedClsPrefix, type, placement, addTabFixed, addable, mergedSize, renderNameListRef, onRender, paneWrapperClass, paneWrapperStyle, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const tabPaneChildren = defaultSlot
             ? flatten(defaultSlot()).filter((v) => {
@@ -512,13 +525,14 @@ export default defineComponent({
                 isCard ? h("div", { class: `${mergedClsPrefix}-tabs-pad` }) : null,
                 isCard ? null : (h("div", { ref: "barElRef", class: `${mergedClsPrefix}-tabs-bar` }))));
         };
+        const resolvedPlacement = isSegment ? 'top' : placement;
         return (h("div", { class: [
                 `${mergedClsPrefix}-tabs`,
                 this.themeClass,
                 `${mergedClsPrefix}-tabs--${type}-type`,
                 `${mergedClsPrefix}-tabs--${mergedSize}-size`,
                 mergedJustifyContent && `${mergedClsPrefix}-tabs--flex`,
-                `${mergedClsPrefix}-tabs--${placement}`
+                `${mergedClsPrefix}-tabs--${resolvedPlacement}`
             ], style: this.cssVars },
             h("div", { class: [
                     // the class should be applied here since it's possible
@@ -526,7 +540,7 @@ export default defineComponent({
                     // other. adding a class will make it easy to write the
                     // style.
                     `${mergedClsPrefix}-tabs-nav--${type}-type`,
-                    `${mergedClsPrefix}-tabs-nav--${placement}`,
+                    `${mergedClsPrefix}-tabs-nav--${resolvedPlacement}`,
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 resolveWrappedSlot(prefixSlot, (children) => children && (h("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
@@ -548,16 +562,17 @@ export default defineComponent({
                             return createLeftPaddedTabVNode(tabVNode);
                         }
                     }))) : (h(VResizeObserver, { onResize: this.handleNavResize }, {
-                    default: () => (h("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" }, ['top', 'bottom'].includes(placement) ? (h(VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
+                    default: () => (h("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" }, ['top', 'bottom'].includes(resolvedPlacement) ? (h(VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
                         default: scrollContent
-                    })) : (h("div", { class: `${mergedClsPrefix}-tabs-nav-y-scroll` }, scrollContent()))))
+                    })) : (h("div", { class: `${mergedClsPrefix}-tabs-nav-y-scroll`, onScroll: this.handleScroll }, scrollContent()))))
                 })),
                 addTabFixed && addable && isCard
                     ? createAddTag(addable, true)
                     : null,
                 resolveWrappedSlot(suffixSlot, (children) => children && (h("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, children)))),
             showPane &&
-                (this.animated ? (h("div", { ref: "tabsPaneWrapperRef", class: `${mergedClsPrefix}-tabs-pane-wrapper` }, filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames, this.onAnimationBeforeLeave, this.onAnimationEnter, this.onAnimationAfterEnter, this.animationDirection))) : (filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)))));
+                (this.animated &&
+                    (resolvedPlacement === 'top' || resolvedPlacement === 'bottom') ? (h("div", { ref: "tabsPaneWrapperRef", style: paneWrapperStyle, class: [`${mergedClsPrefix}-tabs-pane-wrapper`, paneWrapperClass] }, filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames, this.onAnimationBeforeLeave, this.onAnimationEnter, this.onAnimationAfterEnter, this.animationDirection))) : (filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)))));
     }
 });
 function filterMapTabPanes(tabPaneVNodes, value, renderedNames, onBeforeLeave, onEnter, onAfterEnter, animationDirection) {

package/es/tabs/src/interface.d.ts

@@ -1,4 +1,4 @@
-import { Ref, CSSProperties } from 'vue';
+import { type Ref, type CSSProperties } from 'vue';
 export type TabsType = 'line' | 'card' | 'bar' | 'segment';
 export type OnUpdateValue = (value: string & number) => void;
 export type OnUpdateValueImpl = (value: string | number) => void;