naive-ui 2.34.2 → 2.34.3

package/lib/table/src/Table.d.ts

@@ -104,7 +104,7 @@ export declare const tableProps: {
         tdPaddingLarge: string;
     }, any>>>;
 };
-export declare type TableProps = ExtractPublicPropTypes<typeof tableProps>;
+export type TableProps = ExtractPublicPropTypes<typeof tableProps>;
 declare const _default: import("vue").DefineComponent<{
     bordered: {
         type: BooleanConstructor;

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

@@ -28,7 +28,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     tdPaddingMedium: string;
     tdPaddingLarge: string;
 };
-export declare type TableThemeVars = ReturnType<typeof self>;
+export type TableThemeVars = ReturnType<typeof self>;
 declare const tableLight: Theme<'Table', TableThemeVars>;
 export default tableLight;
-export declare type TableTheme = typeof tableLight;
+export type TableTheme = typeof tableLight;

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

@@ -20,7 +20,7 @@ export declare const tabProps: {
     readonly internalAddable: BooleanConstructor;
     readonly internalCreatedByPane: BooleanConstructor;
 };
-export declare type TabProps = ExtractPublicPropTypes<typeof tabProps>;
+export type TabProps = ExtractPublicPropTypes<typeof tabProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;

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

@@ -23,7 +23,7 @@ export declare const tabPaneProps: {
         [key: string]: any;
     }> | (() => VNodeChild)>;
 };
-export declare type TabPaneProps = ExtractPublicPropTypes<typeof tabPaneProps>;
+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;

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

@@ -20,6 +20,10 @@ export declare const tabsProps: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly placement: {
+        readonly type: PropType<"left" | "right" | "bottom" | "top">;
+        readonly default: "top";
+    };
     readonly tabStyle: PropType<string | CSSProperties>;
     readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
@@ -81,12 +85,18 @@ export declare const tabsProps: {
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -96,6 +106,12 @@ export declare const tabsProps: {
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -148,12 +164,18 @@ export declare const tabsProps: {
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -163,6 +185,12 @@ export declare const tabsProps: {
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -215,12 +243,18 @@ export declare const tabsProps: {
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -230,6 +264,12 @@ export declare const tabsProps: {
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -240,7 +280,7 @@ export declare const tabsProps: {
         closeIconSize: string;
     }, any>>>;
 };
-export declare type TabsProps = ExtractPublicPropTypes<typeof tabsProps>;
+export type TabsProps = ExtractPublicPropTypes<typeof tabsProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly value: PropType<string | number>;
     readonly defaultValue: PropType<string | number>;
@@ -258,6 +298,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly placement: {
+        readonly type: PropType<"left" | "right" | "bottom" | "top">;
+        readonly default: "top";
+    };
     readonly tabStyle: PropType<string | CSSProperties>;
     readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
@@ -319,12 +363,18 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -334,6 +384,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -386,12 +442,18 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -401,6 +463,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -453,12 +521,18 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -468,6 +542,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -559,6 +639,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-tab-font-weight': string;
         '--n-tab-font-weight-active': string;
         '--n-tab-padding': string;
+        '--n-tab-padding-vertical': string;
         '--n-tab-gap': string;
         '--n-pane-padding': string;
         '--n-font-weight-strong': string;
@@ -590,6 +671,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly placement: {
+        readonly type: PropType<"left" | "right" | "bottom" | "top">;
+        readonly default: "top";
+    };
     readonly tabStyle: PropType<string | CSSProperties>;
     readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
@@ -651,12 +736,18 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -666,6 +757,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -718,12 +815,18 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -733,6 +836,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -785,12 +894,18 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallLine: string;
         tabPaddingMediumLine: string;
         tabPaddingLargeLine: string;
+        tabPaddingVerticalSmallLine: string;
+        tabPaddingVerticalMediumLine: string;
+        tabPaddingVerticalLargeLine: string;
         tabGapSmallBar: string;
         tabGapMediumBar: string;
         tabGapLargeBar: string;
         tabPaddingSmallBar: string;
         tabPaddingMediumBar: string;
         tabPaddingLargeBar: string;
+        tabPaddingVerticalSmallBar: string;
+        tabPaddingVerticalMediumBar: string;
+        tabPaddingVerticalLargeBar: string;
         tabGapSmallCard: string;
         tabGapMediumCard: string;
         tabGapLargeCard: string;
@@ -800,6 +915,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallSegment: string;
         tabPaddingMediumSegment: string;
         tabPaddingLargeSegment: string;
+        tabPaddingVerticalLargeSegment: string;
+        tabPaddingVerticalSmallCard: string;
+        tabPaddingVerticalMediumCard: string;
+        tabPaddingVerticalLargeCard: string;
+        tabPaddingVerticalSmallSegment: string;
+        tabPaddingVerticalMediumSegment: string;
         tabGapSmallSegment: string;
         tabGapMediumSegment: string;
         tabGapLargeSegment: string;
@@ -813,6 +934,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly type: TabsType;
     readonly size: "small" | "medium" | "large";
     readonly closable: boolean;
+    readonly placement: "left" | "right" | "bottom" | "top";
     readonly trigger: "click" | "hover";
     readonly animated: boolean;
     readonly tabsPadding: number;

package/lib/tabs/src/Tabs.js

@@ -23,6 +23,9 @@ exports.tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, closable: Boolean, justifyContent: String, size: {
         type: String,
         default: 'medium'
+    }, placement: {
+        type: String,
+        default: 'top'
     }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
@@ -92,24 +95,49 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             if (tabEl) {
                 const disabledClassName = `${mergedClsPrefixRef.value}-tabs-bar--disabled`;
-                const { barWidth } = props;
+                const { barWidth, placement } = props;
                 if (tabEl.dataset.disabled === 'true') {
                     barEl.classList.add(disabledClassName);
                 }
                 else {
                     barEl.classList.remove(disabledClassName);
                 }
-                if (typeof barWidth === 'number' && tabEl.offsetWidth >= barWidth) {
-                    const offsetDiffLeft = Math.floor((tabEl.offsetWidth - barWidth) / 2) + tabEl.offsetLeft;
-                    barEl.style.left = `${offsetDiffLeft}px`;
-                    barEl.style.maxWidth = `${barWidth}px`;
+                if (['top', 'bottom'].includes(placement)) {
+                    clearBarStyle(['top', 'maxHeight', 'height']);
+                    if (typeof barWidth === 'number' && tabEl.offsetWidth >= barWidth) {
+                        const offsetDiffLeft = Math.floor((tabEl.offsetWidth - barWidth) / 2) + tabEl.offsetLeft;
+                        barEl.style.left = `${offsetDiffLeft}px`;
+                        barEl.style.maxWidth = `${barWidth}px`;
+                    }
+                    else {
+                        barEl.style.left = `${tabEl.offsetLeft}px`;
+                        barEl.style.maxWidth = `${tabEl.offsetWidth}px`;
+                    }
+                    barEl.style.width = '8192px';
+                    void barEl.offsetWidth;
                 }
                 else {
-                    barEl.style.left = `${tabEl.offsetLeft}px`;
-                    barEl.style.maxWidth = `${tabEl.offsetWidth}px`;
+                    clearBarStyle(['left', 'maxWidth', 'width']);
+                    if (typeof barWidth === 'number' && tabEl.offsetHeight >= barWidth) {
+                        const offsetDiffTop = Math.floor((tabEl.offsetHeight - barWidth) / 2) + tabEl.offsetTop;
+                        barEl.style.top = `${offsetDiffTop}px`;
+                        barEl.style.maxHeight = `${barWidth}px`;
+                    }
+                    else {
+                        barEl.style.top = `${tabEl.offsetTop}px`;
+                        barEl.style.maxHeight = `${tabEl.offsetHeight}px`;
+                    }
+                    barEl.style.height = '8192px';
+                    void barEl.offsetHeight;
                 }
-                barEl.style.width = '8192px';
-                void barEl.offsetWidth;
+            }
+        }
+        function clearBarStyle(styleProps) {
+            const { value: barEl } = barElRef;
+            if (!barEl)
+                return;
+            for (const prop of styleProps) {
+                barEl.style[prop] = '';
             }
         }
         function updateCurrentBarStyle() {
@@ -341,7 +369,7 @@ exports.default = (0, vue_1.defineComponent)({
         // avoid useless rerender
         (0, vue_1.watchEffect)(() => {
             const { value: el } = scrollWrapperElRef;
-            if (!el)
+            if (!el || ['left', 'right'].includes(props.placement))
                 return;
             const { value: clsPrefix } = mergedClsPrefixRef;
             const shadowBeforeClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-before`;
@@ -387,7 +415,7 @@ exports.default = (0, vue_1.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, [(0, _utils_1.createKey)('panePadding', size)]: panePadding, [(0, _utils_1.createKey)('tabPadding', sizeType)]: tabPadding, [(0, _utils_1.createKey)('tabGap', sizeType)]: tabGap, [(0, _utils_1.createKey)('tabTextColor', type)]: tabTextColor, [(0, _utils_1.createKey)('tabTextColorActive', type)]: tabTextColorActive, [(0, _utils_1.createKey)('tabTextColorHover', type)]: tabTextColorHover, [(0, _utils_1.createKey)('tabTextColorDisabled', type)]: tabTextColorDisabled, [(0, _utils_1.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, [(0, _utils_1.createKey)('panePadding', size)]: panePadding, [(0, _utils_1.createKey)('tabPadding', sizeType)]: tabPadding, [(0, _utils_1.createKey)('tabPaddingVertical', sizeType)]: tabPaddingVertical, [(0, _utils_1.createKey)('tabGap', sizeType)]: tabGap, [(0, _utils_1.createKey)('tabTextColor', type)]: tabTextColor, [(0, _utils_1.createKey)('tabTextColorActive', type)]: tabTextColorActive, [(0, _utils_1.createKey)('tabTextColorHover', type)]: tabTextColorHover, [(0, _utils_1.createKey)('tabTextColorDisabled', type)]: tabTextColorDisabled, [(0, _utils_1.createKey)('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-color-segment': colorSegment,
@@ -412,6 +440,7 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-tab-font-weight': tabFontWeight,
                 '--n-tab-font-weight-active': tabFontWeightActive,
                 '--n-tab-padding': tabPadding,
+                '--n-tab-padding-vertical': tabPaddingVertical,
                 '--n-tab-gap': tabGap,
                 '--n-pane-padding': panePadding,
                 '--n-font-weight-strong': fontWeightStrong,
@@ -436,7 +465,7 @@ exports.default = (0, vue_1.defineComponent)({
             onAnimationAfterEnter, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, renderNameListRef, onRender, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
+        const { mergedClsPrefix, type, placement, addTabFixed, addable, mergedSize, renderNameListRef, onRender, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const tabPaneChildren = defaultSlot
             ? (0, _utils_1.flatten)(defaultSlot()).filter((v) => {
@@ -453,12 +482,49 @@ exports.default = (0, vue_1.defineComponent)({
         const isSegment = type === 'segment';
         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` } })),
+                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
+                            ? {
+                                default: tabPaneVNode.children.tab
+                            }
+                            : undefined));
+                    })
+                    : tabChildren.map((tabVNode, index) => {
+                        renderNameListRef.value.push(tabVNode.props.name);
+                        if (index !== 0 && !mergedJustifyContent) {
+                            return justifyTabDynamicProps(createLeftPaddedTabVNode(tabVNode));
+                        }
+                        else {
+                            return justifyTabDynamicProps(tabVNode);
+                        }
+                    }),
+                !addTabFixed && addable && isCard
+                    ? createAddTag(addable, (showPane ? tabPaneChildren.length : tabChildren.length) !== 0)
+                    : null,
+                mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
+            return ((0, vue_1.h)("div", { ref: "tabsElRef", class: `${mergedClsPrefix}-tabs-nav-scroll-content` },
+                isCard && addable ? ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleTabsResize }, {
+                    default: () => tabs
+                })) : (tabs),
+                isCard ? (0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-pad` }) : null,
+                isCard ? null : ((0, vue_1.h)("div", { ref: "barElRef", class: `${mergedClsPrefix}-tabs-bar` }))));
+        };
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-tabs`,
                 this.themeClass,
                 `${mergedClsPrefix}-tabs--${type}-type`,
                 `${mergedClsPrefix}-tabs--${mergedSize}-size`,
-                mergedJustifyContent && `${mergedClsPrefix}-tabs--flex`
+                mergedJustifyContent && `${mergedClsPrefix}-tabs--flex`,
+                `${mergedClsPrefix}-tabs--${placement}`
             ], style: this.cssVars },
             (0, vue_1.h)("div", { class: [
                     // the class should be applied here since it's possible
@@ -466,6 +532,7 @@ exports.default = (0, vue_1.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`
                 ] },
                 (0, _utils_1.resolveWrappedSlot)(prefixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
@@ -487,54 +554,9 @@ exports.default = (0, vue_1.defineComponent)({
                             return createLeftPaddedTabVNode(tabVNode);
                         }
                     }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
-                    default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" },
-                        (0, vue_1.h)(vueuc_1.VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
-                            default: () => {
-                                const rawWrappedTabs = ((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` } })),
-                                    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
-                                                ? {
-                                                    default: tabPaneVNode.children.tab
-                                                }
-                                                : undefined));
-                                        })
-                                        : tabChildren.map((tabVNode, index) => {
-                                            renderNameListRef.value.push(tabVNode.props.name);
-                                            if (index !== 0 &&
-                                                !mergedJustifyContent) {
-                                                return justifyTabDynamicProps(createLeftPaddedTabVNode(tabVNode));
-                                            }
-                                            else {
-                                                return justifyTabDynamicProps(tabVNode);
-                                            }
-                                        }),
-                                    !addTabFixed && addable && isCard
-                                        ? createAddTag(addable, (showPane
-                                            ? tabPaneChildren.length
-                                            : tabChildren.length) !== 0)
-                                        : null,
-                                    mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
-                                let wrappedTabs = rawWrappedTabs;
-                                if (isCard && addable) {
-                                    wrappedTabs = ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleTabsResize }, {
-                                        default: () => rawWrappedTabs
-                                    }));
-                                }
-                                return ((0, vue_1.h)("div", { ref: "tabsElRef", class: `${mergedClsPrefix}-tabs-nav-scroll-content` },
-                                    wrappedTabs,
-                                    isCard ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-pad` })) : null,
-                                    isCard ? null : ((0, vue_1.h)("div", { ref: "barElRef", class: `${mergedClsPrefix}-tabs-bar` }))));
-                            }
-                        })))
+                    default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" }, ['top', 'bottom'].includes(placement) ? ((0, vue_1.h)(vueuc_1.VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
+                        default: scrollContent
+                    })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-y-scroll` }, scrollContent()))))
                 })),
                 addTabFixed && addable && isCard
                     ? createAddTag(addable, true)

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

@@ -1,11 +1,11 @@
 import { Ref, CSSProperties } from 'vue';
-export declare type TabsType = 'line' | 'card' | 'bar' | 'segment';
-export declare type OnUpdateValue = (value: string & number) => void;
-export declare type OnUpdateValueImpl = (value: string | number) => void;
-export declare type OnClose = (name: string & number) => void;
-export declare type OnCloseImpl = (name: string | number) => void;
-export declare type OnBeforeLeave = (name: string & number, oldName: string & number & null) => boolean | Promise<boolean>;
-export declare type OnBeforeLeaveImpl = (name: string | number, oldName: string | number | null) => boolean | Promise<boolean>;
+export type TabsType = 'line' | 'card' | 'bar' | 'segment';
+export type OnUpdateValue = (value: string & number) => void;
+export type OnUpdateValueImpl = (value: string | number) => void;
+export type OnClose = (name: string & number) => void;
+export type OnCloseImpl = (name: string | number) => void;
+export type OnBeforeLeave = (name: string & number, oldName: string & number & null) => boolean | Promise<boolean>;
+export type OnBeforeLeaveImpl = (name: string | number, oldName: string | number | null) => boolean | Promise<boolean>;
 export interface TabsInjection {
     mergedClsPrefixRef: Ref<string>;
     valueRef: Ref<string | number | null>;
@@ -23,7 +23,7 @@ export interface TabsInjection {
     handleClose: (panelName: string | number) => void;
     handleAdd: () => void;
 }
-export declare type Addable = boolean | {
+export type Addable = boolean | {
     disabled?: boolean;
 };
 export declare const tabsInjectionKey: import("vue").InjectionKey<TabsInjection>;