naive-ui 2.38.2 → 2.40.0

package/lib/switch/styles/light.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const seemly_1 = require("seemly");
-const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
-const self = (vars) => {
+const _common_1 = __importDefault(require("./_common"));
+function self(vars) {
     const { primaryColor, opacityDisabled, borderRadius, textColor3 } = vars;
     const railOverlayColor = 'rgba(0, 0, 0, .14)';
     return Object.assign(Object.assign({}, _common_1.default), { iconColor: textColor3, textColor: 'white', loadingColor: primaryColor, opacityDisabled, railColor: railOverlayColor, railColorActive: primaryColor, buttonBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', buttonColor: '#FFF', railBorderRadiusSmall: borderRadius, railBorderRadiusMedium: borderRadius, railBorderRadiusLarge: borderRadius, buttonBorderRadiusSmall: borderRadius, buttonBorderRadiusMedium: borderRadius, buttonBorderRadiusLarge: borderRadius, boxShadowFocus: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}` });
-};
+}
 const switchLight = {
     name: 'Switch',
     common: common_1.commonLight,

package/lib/table/styles/light.d.ts

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { type Theme } from '../../_mixins';
-export declare const self: (vars: ThemeCommonVars) => {
+import type { Theme } from '../../_mixins';
+export declare function self(vars: ThemeCommonVars): {
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;

package/lib/table/styles/light.js

@@ -3,22 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.self = void 0;
+exports.self = self;
 const seemly_1 = require("seemly");
-const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
-const self = (vars) => {
+const _common_1 = __importDefault(require("./_common"));
+function self(vars) {
     const { dividerColor, cardColor, modalColor, popoverColor, tableHeaderColor, tableColorStriped, textColor1, textColor2, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
     return Object.assign(Object.assign({}, _common_1.default), { fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge,
         lineHeight,
         borderRadius, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, tdColorStriped: (0, seemly_1.composite)(cardColor, tableColorStriped), tdColorStripedModal: (0, seemly_1.composite)(modalColor, tableColorStriped), tdColorStripedPopover: (0, seemly_1.composite)(popoverColor, tableColorStriped), thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thTextColor: textColor1, tdTextColor: textColor2, thFontWeight: fontWeightStrong });
-};
-exports.self = self;
+}
 const tableLight = {
     name: 'Table',
     common: common_1.commonLight,
-    self: exports.self
+    self
 };
 exports.default = tableLight;

package/lib/table/styles/rtl.d.ts

@@ -1,2 +1,2 @@
-import { type RtlItem } from '../../config-provider/src/internal-interface';
+import type { RtlItem } from '../../config-provider/src/internal-interface';
 export declare const tableRtl: RtlItem;

package/lib/tabs/src/Tab.d.ts

@@ -4,12 +4,8 @@ export declare const tabProps: {
         readonly type: import("vue").PropType<string | number>;
         readonly required: true;
     };
-    readonly label: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => import("vue").VNodeChild)>;
-    readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => import("vue").VNodeChild)>;
+    readonly label: import("vue").PropType<string | number | import("vue").VNode | (() => import("vue").VNodeChild)>;
+    readonly tab: import("vue").PropType<string | number | import("vue").VNode | (() => import("vue").VNodeChild)>;
     readonly disabled: BooleanConstructor;
     readonly closable: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -26,12 +22,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<string | number>;
         readonly required: true;
     };
-    readonly label: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => import("vue").VNodeChild)>;
-    readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => import("vue").VNodeChild)>;
+    readonly label: import("vue").PropType<string | number | import("vue").VNode | (() => import("vue").VNodeChild)>;
+    readonly tab: import("vue").PropType<string | number | import("vue").VNode | (() => import("vue").VNodeChild)>;
     readonly disabled: BooleanConstructor;
     readonly closable: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -58,12 +50,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<string | number>;
         readonly required: true;
     };
-    readonly label: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => import("vue").VNodeChild)>;
-    readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => import("vue").VNodeChild)>;
+    readonly label: import("vue").PropType<string | number | import("vue").VNode | (() => import("vue").VNodeChild)>;
+    readonly tab: import("vue").PropType<string | number | import("vue").VNode | (() => import("vue").VNodeChild)>;
     readonly disabled: BooleanConstructor;
     readonly closable: {
         readonly type: import("vue").PropType<boolean | undefined>;

package/lib/tabs/src/Tab.js

@@ -14,9 +14,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Tab',
     props: exports.tabProps,
     setup(props) {
-        const { mergedClsPrefixRef, valueRef, typeRef, closableRef, tabStyleRef, addTabStyleRef, tabClassRef, addTabClassRef, tabChangeIdRef, onBeforeLeaveRef, triggerRef, handleAdd, activateTab, handleClose
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(interface_1.tabsInjectionKey);
+        const { mergedClsPrefixRef, valueRef, typeRef, closableRef, tabStyleRef, addTabStyleRef, tabClassRef, addTabClassRef, tabChangeIdRef, onBeforeLeaveRef, triggerRef, handleAdd, activateTab, handleClose } = (0, vue_1.inject)(interface_1.tabsInjectionKey);
         return {
             trigger: triggerRef,
             mergedClosable: (0, vue_1.computed)(() => {
@@ -82,9 +80,7 @@ exports.default = (0, vue_1.defineComponent)({
                 onClick: trigger === 'click' ? this.activateTab : undefined,
                 onMouseenter: trigger === 'hover' ? this.activateTab : undefined,
                 style: internalAddable ? this.addStyle : this.style
-            }, 
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            this.internalCreatedByPane
+            }, this.internalCreatedByPane
                 ? (this.tabProps || {})
                 : this.$attrs)),
                 (0, vue_1.h)("span", { class: `${clsPrefix}-tabs-tab__label` }, internalAddable ? ((0, vue_1.h)(vue_1.Fragment, null,

package/lib/tabs/src/TabPane.d.ts

@@ -1,16 +1,14 @@
-import { type PropType, type VNodeChild, type VNode, type HTMLAttributes } from 'vue';
+import { type HTMLAttributes, type PropType, type VNode, type VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const tabPaneProps: {
-    readonly tab: PropType<string | number | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => VNodeChild)>;
+    readonly tab: PropType<string | number | VNode | (() => VNodeChild)>;
     readonly name: {
         readonly type: PropType<string | number>;
         readonly required: true;
     };
     readonly disabled: BooleanConstructor;
     readonly displayDirective: {
-        readonly type: PropType<"show" | "if" | "show:lazy">;
+        readonly type: PropType<"if" | "show" | "show:lazy">;
         readonly default: "if";
     };
     readonly closable: {
@@ -19,22 +17,18 @@ export declare const tabPaneProps: {
     };
     readonly tabProps: PropType<HTMLAttributes>;
     /** @deprecated */
-    readonly label: PropType<string | number | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => VNodeChild)>;
+    readonly label: PropType<string | number | VNode | (() => VNodeChild)>;
 };
 export type TabPaneProps = ExtractPublicPropTypes<typeof tabPaneProps>;
 declare const _default: import("vue").DefineComponent<{
-    readonly tab: PropType<string | number | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => VNodeChild)>;
+    readonly tab: PropType<string | number | VNode | (() => VNodeChild)>;
     readonly name: {
         readonly type: PropType<string | number>;
         readonly required: true;
     };
     readonly disabled: BooleanConstructor;
     readonly displayDirective: {
-        readonly type: PropType<"show" | "if" | "show:lazy">;
+        readonly type: PropType<"if" | "show" | "show:lazy">;
         readonly default: "if";
     };
     readonly closable: {
@@ -43,24 +37,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly tabProps: PropType<HTMLAttributes>;
     /** @deprecated */
-    readonly label: PropType<string | number | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => VNodeChild)>;
+    readonly label: PropType<string | number | VNode | (() => VNodeChild)>;
 }, {
     style: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
     class: import("vue").Ref<string | undefined>;
     mergedClsPrefix: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly tab: PropType<string | number | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => VNodeChild)>;
+    readonly tab: PropType<string | number | VNode | (() => VNodeChild)>;
     readonly name: {
         readonly type: PropType<string | number>;
         readonly required: true;
     };
     readonly disabled: BooleanConstructor;
     readonly displayDirective: {
-        readonly type: PropType<"show" | "if" | "show:lazy">;
+        readonly type: PropType<"if" | "show" | "show:lazy">;
         readonly default: "if";
     };
     readonly closable: {
@@ -69,9 +59,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly tabProps: PropType<HTMLAttributes>;
     /** @deprecated */
-    readonly label: PropType<string | number | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | (() => VNodeChild)>;
+    readonly label: PropType<string | number | VNode | (() => VNodeChild)>;
 }>>, {
     readonly disabled: boolean;
     readonly closable: boolean | undefined;

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

@@ -1,7 +1,7 @@
-import { type PropType, type CSSProperties, type ComponentPublicInstance, nextTick, type ExtractPropTypes } from 'vue';
+import { type CSSProperties, type ComponentPublicInstance, type ExtractPropTypes, type PropType, nextTick } from 'vue';
 import { type VXScrollInst } from 'vueuc';
-import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import type { Addable, OnClose, OnBeforeLeave, TabsType, OnUpdateValue } from './interface';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { Addable, OnBeforeLeave, OnClose, OnUpdateValue, TabsType } from './interface';
 export declare const tabsProps: {
     readonly value: PropType<string | number>;
     readonly defaultValue: PropType<string | number>;
@@ -14,13 +14,13 @@ export declare const tabsProps: {
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
+    readonly justifyContent: PropType<"space-between" | "space-around" | "space-evenly" | "center" | "start" | "end">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly placement: {
-        readonly type: PropType<"left" | "right" | "top" | "bottom">;
+        readonly type: PropType<"top" | "left" | "right" | "bottom">;
         readonly default: "top";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
@@ -333,13 +333,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
+    readonly justifyContent: PropType<"space-between" | "space-around" | "space-evenly" | "center" | "start" | "end">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly placement: {
-        readonly type: PropType<"left" | "right" | "top" | "bottom">;
+        readonly type: PropType<"top" | "left" | "right" | "bottom">;
         readonly default: "top";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
@@ -364,7 +364,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClose: PropType<MaybeArray<OnClose>>;
     readonly labelSize: PropType<"small" | "medium" | "large">;
     readonly activeName: PropType<string | number>;
-    readonly onActiveNameChange: PropType<MaybeArray<(value: never) => void>>;
+    readonly onActiveNameChange: PropType<MaybeArray<(value: string & number) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tabs", {
         colorSegment: string;
         tabFontSizeCard: string;
@@ -661,30 +661,30 @@ declare const _default: import("vue").DefineComponent<{
         $slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;
         }>;
-        $root: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $parent: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
         };
         $forceUpdate: () => void;
         $nextTick: typeof nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, (cleanupFn: () => void) => void]) => any : (...args: [any, any, (cleanupFn: () => void) => void]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
     } & Omit<{}, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {}) | null>;
     scrollWrapperElRef: import("vue").Ref<HTMLElement | null>;
     addTabFixed: import("vue").Ref<boolean>;
@@ -692,10 +692,10 @@ declare const _default: import("vue").DefineComponent<{
         display: string;
         justifyContent: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
     } | undefined>;
-    handleNavResize: import("lodash").DebouncedFunc<(entry: ResizeObserverEntry) => void>;
+    handleNavResize: import("lodash").DebouncedFuncLeading<(entry: ResizeObserverEntry) => void>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
-    handleScroll: import("lodash").DebouncedFunc<(e: Event) => void>;
-    handleTabsResize: import("lodash").DebouncedFunc<(entry: ResizeObserverEntry) => void>;
+    handleScroll: import("lodash").DebouncedFuncLeading<(e: Event) => void>;
+    handleTabsResize: import("lodash").DebouncedFuncLeading<(entry: ResizeObserverEntry) => void>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color-segment': string;
@@ -753,13 +753,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
+    readonly justifyContent: PropType<"space-between" | "space-around" | "space-evenly" | "center" | "start" | "end">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly placement: {
-        readonly type: PropType<"left" | "right" | "top" | "bottom">;
+        readonly type: PropType<"top" | "left" | "right" | "bottom">;
         readonly default: "top";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
@@ -784,7 +784,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClose: PropType<MaybeArray<OnClose>>;
     readonly labelSize: PropType<"small" | "medium" | "large">;
     readonly activeName: PropType<string | number>;
-    readonly onActiveNameChange: PropType<MaybeArray<(value: never) => void>>;
+    readonly onActiveNameChange: PropType<MaybeArray<(value: string & number) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tabs", {
         colorSegment: string;
         tabFontSizeCard: string;

package/lib/tabs/src/Tabs.js

@@ -8,13 +8,13 @@ const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const lodash_1 = require("lodash");
 const vooks_1 = require("vooks");
+const seemly_1 = require("seemly");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const interface_1 = require("./interface");
 const Tab_1 = __importDefault(require("./Tab"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const seemly_1 = require("seemly");
 exports.tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: [String, Number], defaultValue: [String, Number], trigger: {
         type: String,
         default: 'click'
@@ -79,7 +79,7 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.watch)(mergedValueRef, () => {
             tabChangeIdRef.id = 0;
             updateCurrentBarStyle();
-            updateCurrentScrollPosition(true);
+            updateCurrentScrollPosition();
         });
         function getCurrentEl() {
             var _a;
@@ -176,7 +176,7 @@ exports.default = (0, vue_1.defineComponent)({
                 hideBarStyle();
             }
         }
-        function updateCurrentScrollPosition(smooth) {
+        function updateCurrentScrollPosition() {
             var _a;
             const scrollWrapperEl = (_a = xScrollInstRef.value) === null || _a === void 0 ? void 0 : _a.$el;
             if (!scrollWrapperEl)
@@ -193,8 +193,8 @@ exports.default = (0, vue_1.defineComponent)({
                     behavior: 'smooth'
                 });
             }
-            else if (tabElOffsetLeft + tabElOffsetWidth >
-                scrollWrapperElScrollLeft + scrollWrapperElOffsetWidth) {
+            else if (tabElOffsetLeft + tabElOffsetWidth
+                > scrollWrapperElScrollLeft + scrollWrapperElOffsetWidth) {
                 scrollWrapperEl.scrollTo({
                     top: 0,
                     left: tabElOffsetLeft + tabElOffsetWidth - scrollWrapperElOffsetWidth,
@@ -315,7 +315,8 @@ exports.default = (0, vue_1.defineComponent)({
             const tabsEl = tabsElRef.value;
             if (!tabsEl)
                 return;
-            transitionDisabled && tabsEl.classList.add('transition-disabled');
+            if (transitionDisabled)
+                tabsEl.classList.add('transition-disabled');
             const activeTabEl = getCurrentEl();
             if (activeTabEl && segmentCapsuleElRef.value) {
                 // move segment capsule to match the position of the active tab
@@ -326,7 +327,9 @@ exports.default = (0, vue_1.defineComponent)({
                     void segmentCapsuleElRef.value.offsetWidth;
                 }
             }
-            transitionDisabled && tabsEl.classList.remove('transition-disabled');
+            if (transitionDisabled) {
+                tabsEl.classList.remove('transition-disabled');
+            }
         }
         (0, vue_1.watch)([mergedValueRef], () => {
             if (props.type === 'segment') {
@@ -356,8 +359,8 @@ exports.default = (0, vue_1.defineComponent)({
             memorizedWidth = entry.contentRect.width;
             const { type } = props;
             if (type === 'line' || type === 'bar') {
-                if (firstTimeUpdatePosition ||
-                    ((_a = props.justifyContent) === null || _a === void 0 ? void 0 : _a.startsWith('space'))) {
+                if (firstTimeUpdatePosition
+                    || ((_a = props.justifyContent) === null || _a === void 0 ? void 0 : _a.startsWith('space'))) {
                     updateBarPositionInstantly();
                 }
             }
@@ -380,20 +383,37 @@ exports.default = (0, vue_1.defineComponent)({
         const addTabFixedRef = (0, vue_1.ref)(false);
         function _handleTabsResize(entry) {
             var _a;
-            const { target, contentRect: { width } } = entry;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const containerWidth = target.parentElement.offsetWidth;
+            const { target, contentRect: { width, height } } = entry;
+            const containerWidth = target.parentElement.parentElement.offsetWidth;
+            const containerHeight = target.parentElement.parentElement.offsetHeight;
+            const { placement } = props;
             if (!addTabFixedRef.value) {
-                if (containerWidth < width) {
-                    addTabFixedRef.value = true;
+                if (placement === 'top' || placement === 'bottom') {
+                    if (containerWidth < width) {
+                        addTabFixedRef.value = true;
+                    }
+                }
+                else {
+                    if (containerHeight < height) {
+                        addTabFixedRef.value = true;
+                    }
                 }
             }
             else {
                 const { value: addTabInst } = addTabInstRef;
                 if (!addTabInst)
                     return;
-                if (containerWidth - width > addTabInst.$el.offsetWidth) {
-                    addTabFixedRef.value = false;
+                if (placement === 'top' || placement === 'bottom') {
+                    if (containerWidth - width
+                        > addTabInst.$el.offsetWidth) {
+                        addTabFixedRef.value = false;
+                    }
+                }
+                else {
+                    if (containerHeight - height
+                        > addTabInst.$el.offsetHeight) {
+                        addTabFixedRef.value = false;
+                    }
                 }
             }
             deriveScrollShadow(((_a = xScrollInstRef.value) === null || _a === void 0 ? void 0 : _a.$el) || null);
@@ -453,7 +473,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         (0, vooks_1.onFontsReady)(() => {
             updateCurrentBarStyle();
-            updateCurrentScrollPosition(true);
+            updateCurrentScrollPosition();
         });
         // avoid useless rerender
         (0, vue_1.watchEffect)(() => {
@@ -570,16 +590,18 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedJustifyContent = !isCard && !isSegment && this.justifyContent;
         renderNameListRef.value = [];
         const scrollContent = () => {
-            const tabs = ((0, vue_1.h)("div", { style: this.tabWrapperStyle, class: [`${mergedClsPrefix}-tabs-wrapper`] },
-                mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } })),
+            const tabs = ((0, vue_1.h)("div", { style: this.tabWrapperStyle, class: `${mergedClsPrefix}-tabs-wrapper` },
+                mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: placement === 'top' || placement === 'bottom'
+                        ? { width: `${this.tabsPadding}px` }
+                        : { height: `${this.tabsPadding}px` } })),
                 showPane
                     ? tabPaneChildren.map((tabPaneVNode, index) => {
                         renderNameListRef.value.push(tabPaneVNode.props.name);
-                        return justifyTabDynamicProps((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalCreatedByPane: true, internalLeftPadded: index !== 0 &&
-                                (!mergedJustifyContent ||
-                                    mergedJustifyContent === 'center' ||
-                                    mergedJustifyContent === 'start' ||
-                                    mergedJustifyContent === 'end') }), tabPaneVNode.children
+                        return justifyTabDynamicProps((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalCreatedByPane: true, internalLeftPadded: index !== 0
+                                && (!mergedJustifyContent
+                                    || mergedJustifyContent === 'center'
+                                    || mergedJustifyContent === 'start'
+                                    || mergedJustifyContent === 'end') }), tabPaneVNode.children
                             ? {
                                 default: tabPaneVNode.children.tab
                             }
@@ -623,7 +645,7 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-tabs-nav--${resolvedPlacement}`,
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
-                (0, _utils_1.resolveWrappedSlot)(prefixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
+                (0, _utils_1.resolveWrappedSlot)(prefixSlot, children => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
                 isSegment ? ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleSegmentResize }, {
                     default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail`, ref: "tabsElRef" },
                         (0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-capsule`, ref: "segmentCapsuleElRef" },
@@ -655,10 +677,10 @@ exports.default = (0, vue_1.defineComponent)({
                 addTabFixed && addable && isCard
                     ? createAddTag(addable, true)
                     : null,
-                (0, _utils_1.resolveWrappedSlot)(suffixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, children)))),
-            showPane &&
-                (this.animated &&
-                    (resolvedPlacement === 'top' || resolvedPlacement === 'bottom') ? ((0, vue_1.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)))));
+                (0, _utils_1.resolveWrappedSlot)(suffixSlot, children => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, children)))),
+            showPane
+                && (this.animated
+                    && (resolvedPlacement === 'top' || resolvedPlacement === 'bottom') ? ((0, vue_1.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) {
@@ -670,9 +692,9 @@ function filterMapTabPanes(tabPaneVNodes, value, renderedNames, onBeforeLeave, o
         if (vNode.key !== undefined) {
             vNode.key = name;
         }
-        if (show ||
-            matchDisplayDirective('show') ||
-            (matchDisplayDirective('show:lazy') && renderedNames.has(name))) {
+        if (show
+            || matchDisplayDirective('show')
+            || (matchDisplayDirective('show:lazy') && renderedNames.has(name))) {
             if (!renderedNames.has(name)) {
                 renderedNames.add(name);
             }

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

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

package/lib/tabs/src/styles/index.cssr.js

@@ -306,7 +306,6 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-radius: 0;
  `)]), (0, cssr_1.cM)('card-type', [(0, cssr_1.cE)('prefix, suffix', `
  transition: border-color .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-pad', `
  flex-grow: 1;
  transition: border-color .3s var(--n-bezier);
@@ -327,6 +326,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  padding-left: 8px;
  padding-right: 8px;
  font-size: 16px;
+ justify-content: center;
  `, [(0, cssr_1.cE)('height-placeholder', `
  width: 0;
  font-size: var(--n-tab-font-size);
@@ -336,14 +336,20 @@ exports.default = (0, cssr_1.cB)('tabs', `
  background-color: #0000;
  font-weight: var(--n-tab-font-weight-active);
  color: var(--n-tab-text-color-active);
- `), (0, cssr_1.cM)('disabled', 'color: var(--n-tab-text-color-disabled);')]), (0, cssr_1.cB)('tabs-scroll-padding', 'border-bottom: 1px solid var(--n-tab-border-color);')]), (0, cssr_1.cM)('left, right', [(0, cssr_1.cB)('tabs-wrapper', `
+ `), (0, cssr_1.cM)('disabled', 'color: var(--n-tab-text-color-disabled);')])]), (0, cssr_1.cM)('left, right', `
+ flex-direction: column; 
+ `, [(0, cssr_1.cE)('prefix, suffix', `
+ padding: var(--n-tab-padding-vertical);
+ `), (0, cssr_1.cB)('tabs-wrapper', `
  flex-direction: column;
- `, [(0, cssr_1.cB)('tabs-tab-wrapper', `
+ `), (0, cssr_1.cB)('tabs-tab-wrapper', `
  flex-direction: column;
  `, [(0, cssr_1.cB)('tabs-tab-pad', `
  height: var(--n-tab-gap-vertical);
  width: 100%;
- `)])])]), (0, cssr_1.cM)('top', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
+ `)])]), (0, cssr_1.cM)('top', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-scroll-padding', 'border-bottom: 1px solid var(--n-tab-border-color);'), (0, cssr_1.cE)('prefix, suffix', `
+ border-bottom: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-tab', `
  border-top-left-radius: var(--n-tab-border-radius);
  border-top-right-radius: var(--n-tab-border-radius);
  `, [(0, cssr_1.cM)('active', `
@@ -352,7 +358,9 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-pad', `
  border-bottom: 1px solid var(--n-tab-border-color);
- `)])]), (0, cssr_1.cM)('left', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
+ `)])]), (0, cssr_1.cM)('left', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-scroll-padding', 'border-right: 1px solid var(--n-tab-border-color);'), (0, cssr_1.cE)('prefix, suffix', `
+ border-right: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-tab', `
  border-top-left-radius: var(--n-tab-border-radius);
  border-bottom-left-radius: var(--n-tab-border-radius);
  `, [(0, cssr_1.cM)('active', `
@@ -361,7 +369,9 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-right: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-pad', `
  border-right: 1px solid var(--n-tab-border-color);
- `)])]), (0, cssr_1.cM)('right', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
+ `)])]), (0, cssr_1.cM)('right', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-scroll-padding', 'border-left: 1px solid var(--n-tab-border-color);'), (0, cssr_1.cE)('prefix, suffix', `
+ border-left: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-tab', `
  border-top-right-radius: var(--n-tab-border-radius);
  border-bottom-right-radius: var(--n-tab-border-radius);
  `, [(0, cssr_1.cM)('active', `
@@ -370,7 +380,9 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-left: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-pad', `
  border-left: 1px solid var(--n-tab-border-color);
- `)])]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
+ `)])]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-scroll-padding', 'border-top: 1px solid var(--n-tab-border-color);'), (0, cssr_1.cE)('prefix, suffix', `
+ border-top: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-tab', `
  border-bottom-left-radius: var(--n-tab-border-radius);
  border-bottom-right-radius: var(--n-tab-border-radius);
  `, [(0, cssr_1.cM)('active', `