naive-ui 2.34.2 → 2.34.4

package/lib/tabs/src/Tabs.js

@@ -14,6 +14,7 @@ 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'
@@ -23,7 +24,10 @@ exports.tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, closable: Boolean, justifyContent: String, size: {
         type: String,
         default: 'medium'
-    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
+    }, placement: {
+        type: String,
+        default: 'top'
+    }, 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], 
@@ -54,8 +58,8 @@ exports.default = (0, vue_1.defineComponent)({
         const scrollWrapperElRef = (0, vue_1.ref)(null);
         const addTabInstRef = (0, vue_1.ref)(null);
         const xScrollInstRef = (0, vue_1.ref)(null);
-        const leftReachedRef = (0, vue_1.ref)(true);
-        const rightReachedRef = (0, vue_1.ref)(true);
+        const startReachedRef = (0, vue_1.ref)(true);
+        const endReachedRef = (0, vue_1.ref)(true);
         const compitableSizeRef = (0, vooks_1.useCompitable)(props, ['labelSize', 'size']);
         const compitableValueRef = (0, vooks_1.useCompitable)(props, ['activeName', 'value']);
         const uncontrolledValueRef = (0, vue_1.ref)((_b = (_a = compitableValueRef.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : (slots.default
@@ -92,24 +96,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() {
@@ -312,9 +341,17 @@ exports.default = (0, vue_1.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 = (0, lodash_1.throttle)((e) => {
             deriveScrollShadow(e.target);
@@ -344,19 +381,19 @@ exports.default = (0, vue_1.defineComponent)({
             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 = (0, vue_1.ref)(null);
@@ -387,7 +424,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)('tabGap', `${sizeType}Vertical`)]: tabGapVertical, [(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,8 +449,13 @@ 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-tab-gap-vertical': tabGapVertical,
+                '--n-pane-padding-left': (0, seemly_1.getPadding)(panePadding, 'left'),
+                '--n-pane-padding-right': (0, seemly_1.getPadding)(panePadding, 'right'),
+                '--n-pane-padding-top': (0, seemly_1.getPadding)(panePadding, 'top'),
+                '--n-pane-padding-bottom': (0, seemly_1.getPadding)(panePadding, 'bottom'),
                 '--n-font-weight-strong': fontWeightStrong,
                 '--n-tab-color-segment': tabColorSegment
             };
@@ -436,7 +478,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, paneWrapperClass, paneWrapperStyle, $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 +495,50 @@ 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` }))));
+        };
+        const resolvedPlacement = isSegment ? 'top' : placement;
         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--${resolvedPlacement}`
             ], style: this.cssVars },
             (0, vue_1.h)("div", { class: [
                     // the class should be applied here since it's possible
@@ -466,6 +546,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--${resolvedPlacement}`,
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 (0, _utils_1.resolveWrappedSlot)(prefixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
@@ -487,61 +568,17 @@ 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(resolvedPlacement) ? ((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`, onScroll: this.handleScroll }, scrollContent()))))
                 })),
                 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 ? ((0, vue_1.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') ? ((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) {

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>;
+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;
+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>;

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

@@ -26,20 +26,54 @@ const cssr_1 = require("../../../_utils/cssr");
 // --n-tab-font-weight
 // --n-tab-font-weight-active
 // --n-tab-gap
+// --n-tab-gap-vertical
 // --n-tab-padding
-// --n-pane-padding
+// --n-pane-padding-left
+// --n-pane-padding-right
+// --n-pane-padding-top
+// --n-pane-padding-bottom
 // --n-color-segment
 // --n-font-weight-strong
 // --n-tab-color-segment
 exports.default = (0, cssr_1.cB)('tabs', `
  box-sizing: border-box;
  width: 100%;
+ display: flex;
+ flex-direction: column;
  transition:
  background-color .3s var(--n-bezier),
  border-color .3s var(--n-bezier);
 `, [(0, cssr_1.cM)('segment-type', [(0, cssr_1.cB)('tabs-rail', [(0, cssr_1.c)('&.transition-disabled', 'color: red;', [(0, cssr_1.cB)('tabs-tab', `
  transition: none;
- `)])])]), (0, cssr_1.cB)('tabs-rail', `
+ `)])])]), (0, cssr_1.cM)('top', [(0, cssr_1.cB)('tab-pane', `
+ padding: var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left);
+ `)]), (0, cssr_1.cM)('left', [(0, cssr_1.cB)('tab-pane', `
+ padding: var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left) var(--n-pane-padding-top);
+ `)]), (0, cssr_1.cM)('left, right', `
+ flex-direction: row;
+ `, [(0, cssr_1.cB)('tabs-bar', `
+ width: 2px;
+ right: 0;
+ transition:
+ top .2s var(--n-bezier),
+ max-height .2s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ `), (0, cssr_1.cB)('tabs-tab', `
+ padding: var(--n-tab-padding-vertical); 
+ `)]), (0, cssr_1.cM)('right', `
+ flex-direction: row-reverse;
+ `, [(0, cssr_1.cB)('tab-pane', `
+ padding: var(--n-pane-padding-left) var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom);
+ `), (0, cssr_1.cB)('tabs-bar', `
+ left: 0;
+ `)]), (0, cssr_1.cM)('bottom', `
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ `, [(0, cssr_1.cB)('tab-pane', `
+ padding: var(--n-pane-padding-bottom) var(--n-pane-padding-right) var(--n-pane-padding-top) var(--n-pane-padding-left);
+ `), (0, cssr_1.cB)('tabs-bar', `
+ top: 0;
+ `)]), (0, cssr_1.cB)('tabs-rail', `
  padding: 3px;
  border-radius: var(--n-tab-border-radius);
  width: 100%;
@@ -81,32 +115,58 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `, [(0, cssr_1.cE)('prefix, suffix', `
  display: flex;
  align-items: center;
- `), (0, cssr_1.cE)('prefix', 'padding-right: 16px;'), (0, cssr_1.cE)('suffix', 'padding-left: 16px;')]), (0, cssr_1.cB)('tabs-nav-scroll-wrapper', `
+ `), (0, cssr_1.cE)('prefix', 'padding-right: 16px;'), (0, cssr_1.cE)('suffix', 'padding-left: 16px;')]), (0, cssr_1.cM)('top, bottom', [(0, cssr_1.cB)('tabs-nav-scroll-wrapper', [(0, cssr_1.c)('&::before', `
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 20px;
+ `), (0, cssr_1.c)('&::after', `
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 20px;
+ `), (0, cssr_1.cM)('shadow-start', [(0, cssr_1.c)('&::before', `
+ box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
+ `)]), (0, cssr_1.cM)('shadow-end', [(0, cssr_1.c)('&::after', `
+ box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
+ `)])])]), (0, cssr_1.cM)('left, right', [(0, cssr_1.cB)('tabs-nav-scroll-wrapper', [(0, cssr_1.c)('&::before', `
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 20px;
+ `), (0, cssr_1.c)('&::after', `
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 20px;
+ `), (0, cssr_1.cM)('shadow-start', [(0, cssr_1.c)('&::before', `
+ box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, .12);
+ `)]), (0, cssr_1.cM)('shadow-end', [(0, cssr_1.c)('&::after', `
+ box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, .12);
+ `)])])]), (0, cssr_1.cB)('tabs-nav-scroll-wrapper', `
  flex: 1;
  position: relative;
  overflow: hidden;
- `, [(0, cssr_1.cM)('shadow-before', [(0, cssr_1.c)('&::before', `
- box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
- `)]), (0, cssr_1.cM)('shadow-after', [(0, cssr_1.c)('&::after', `
- box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
+ `, [(0, cssr_1.cB)('tabs-nav-y-scroll', `
+ height: 100%;
+ width: 100%;
+ overflow-y: auto; 
+ scrollbar-width: none;
+ `, [(0, cssr_1.c)('&::-webkit-scrollbar', `
+ width: 0;
+ height: 0;
  `)]), (0, cssr_1.c)('&::before, &::after', `
  transition: box-shadow .3s var(--n-bezier);
  pointer-events: none;
  content: "";
  position: absolute;
- top: 0;
- bottom: 0;
- width: 20px;
  z-index: 1;
- `), (0, cssr_1.c)('&::before', `
- left: 0;
- `), (0, cssr_1.c)('&::after', `
- right: 0;
  `)]), (0, cssr_1.cB)('tabs-nav-scroll-content', `
  display: flex;
  position: relative;
  min-width: 100%;
  width: fit-content;
+ box-sizing: border-box;
  `), (0, cssr_1.cB)('tabs-wrapper', `
  display: inline-flex;
  flex-wrap: nowrap;
@@ -162,7 +222,6 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `), (0, cssr_1.cB)('tab-pane', `
  color: var(--n-pane-text-color);
  width: 100%;
- padding: var(--n-pane-padding);
  transition:
  color .3s var(--n-bezier),
  background-color .3s var(--n-bezier),
@@ -188,6 +247,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  transform: translateX(0);
  opacity: 1;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
+ box-sizing: border-box;
  width: var(--n-tab-gap);
  flex-grow: 0;
  flex-shrink: 0;
@@ -202,15 +262,36 @@ exports.default = (0, cssr_1.cB)('tabs', `
  font-weight: var(--n-tab-font-weight-active);
  `), (0, cssr_1.cM)('disabled', {
   color: 'var(--n-tab-text-color-disabled)'
-})])]), (0, cssr_1.cB)('tabs-nav', [(0, cssr_1.cM)('line-type', [(0, cssr_1.cE)('prefix, suffix', `
- transition: border-color .3s var(--n-bezier);
+})])]), (0, cssr_1.cB)('tabs-nav', [(0, cssr_1.cM)('line-type', [(0, cssr_1.cM)('top', [(0, cssr_1.cE)('prefix, suffix', `
  border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-nav-scroll-content', `
- transition: border-color .3s var(--n-bezier);
  border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-bar', `
- border-radius: 0;
  bottom: -1px;
+ `)]), (0, cssr_1.cM)('left', [(0, cssr_1.cE)('prefix, suffix', `
+ border-right: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-nav-scroll-content', `
+ border-right: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-bar', `
+ right: -1px;
+ `)]), (0, cssr_1.cM)('right', [(0, cssr_1.cE)('prefix, suffix', `
+ border-left: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-nav-scroll-content', `
+ border-left: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-bar', `
+ left: -1px;
+ `)]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('prefix, suffix', `
+ border-top: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-nav-scroll-content', `
+ border-top: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-bar', `
+ top: -1px;
+ `)]), (0, cssr_1.cE)('prefix, suffix', `
+ transition: border-color .3s var(--n-bezier);
+ `), (0, cssr_1.cB)('tabs-nav-scroll-content', `
+ transition: border-color .3s var(--n-bezier);
+ `), (0, cssr_1.cB)('tabs-bar', `
+ 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);
@@ -220,12 +301,9 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-tab-pad', `
  transition: border-color .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-tab', `
  font-weight: var(--n-tab-font-weight);
  border: 1px solid var(--n-tab-border-color);
- border-top-left-radius: var(--n-tab-border-radius);
- border-top-right-radius: var(--n-tab-border-radius);
  background-color: var(--n-tab-color);
  box-sizing: border-box;
  position: relative;
@@ -243,9 +321,43 @@ exports.default = (0, cssr_1.cB)('tabs', `
  font-size: var(--n-tab-font-size);
  `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', `
  color: var(--n-tab-text-color-hover);
- `)])]), (0, cssr_1.cM)('closable', 'padding-right: 6px;'), (0, cssr_1.cM)('active', `
- border-bottom: 1px solid #0000;
+ `)])]), (0, cssr_1.cM)('closable', 'padding-right: 8px;'), (0, cssr_1.cM)('active', `
  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)('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', `
+ flex-direction: column;
+ `, [(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', `
+ border-top-left-radius: var(--n-tab-border-radius);
+ border-top-right-radius: var(--n-tab-border-radius);
+ `, [(0, cssr_1.cM)('active', `
+ border-bottom: 1px solid #0000;
+ `)]), (0, cssr_1.cB)('tabs-tab-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', `
+ border-top-left-radius: var(--n-tab-border-radius);
+ border-bottom-left-radius: var(--n-tab-border-radius);
+ `, [(0, cssr_1.cM)('active', `
+ border-right: 1px solid #0000;
+ `)]), (0, cssr_1.cB)('tabs-tab-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', `
+ border-top-right-radius: var(--n-tab-border-radius);
+ border-bottom-right-radius: var(--n-tab-border-radius);
+ `, [(0, cssr_1.cM)('active', `
+ border-left: 1px solid #0000;
+ `)]), (0, cssr_1.cB)('tabs-tab-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', `
+ border-bottom-left-radius: var(--n-tab-border-radius);
+ border-bottom-right-radius: var(--n-tab-border-radius);
+ `, [(0, cssr_1.cM)('active', `
+ border-top: 1px solid #0000;
+ `)]), (0, cssr_1.cB)('tabs-tab-pad', `
+ border-top: 1px solid var(--n-tab-border-color);
+ `)])])])]);

package/lib/tabs/styles/_common.d.ts

@@ -5,27 +5,51 @@ declare const _default: {
     tabGapSmallLine: string;
     tabGapMediumLine: string;
     tabGapLargeLine: string;
+    tabGapSmallLineVertical: string;
+    tabGapMediumLineVertical: string;
+    tabGapLargeLineVertical: string;
     tabPaddingSmallLine: string;
     tabPaddingMediumLine: string;
     tabPaddingLargeLine: string;
+    tabPaddingVerticalSmallLine: string;
+    tabPaddingVerticalMediumLine: string;
+    tabPaddingVerticalLargeLine: string;
     tabGapSmallBar: string;
     tabGapMediumBar: string;
     tabGapLargeBar: string;
+    tabGapSmallBarVertical: string;
+    tabGapMediumBarVertical: string;
+    tabGapLargeBarVertical: string;
     tabPaddingSmallBar: string;
     tabPaddingMediumBar: string;
     tabPaddingLargeBar: string;
+    tabPaddingVerticalSmallBar: string;
+    tabPaddingVerticalMediumBar: string;
+    tabPaddingVerticalLargeBar: string;
     tabGapSmallCard: string;
     tabGapMediumCard: string;
     tabGapLargeCard: string;
+    tabGapSmallCardVertical: string;
+    tabGapMediumCardVertical: string;
+    tabGapLargeCardVertical: string;
     tabPaddingSmallCard: string;
     tabPaddingMediumCard: string;
     tabPaddingLargeCard: string;
     tabPaddingSmallSegment: string;
     tabPaddingMediumSegment: string;
     tabPaddingLargeSegment: string;
+    tabPaddingVerticalLargeSegment: string;
+    tabPaddingVerticalSmallCard: string;
+    tabPaddingVerticalMediumCard: string;
+    tabPaddingVerticalLargeCard: string;
+    tabPaddingVerticalSmallSegment: string;
+    tabPaddingVerticalMediumSegment: string;
     tabGapSmallSegment: string;
     tabGapMediumSegment: string;
     tabGapLargeSegment: string;
+    tabGapSmallSegmentVertical: string;
+    tabGapMediumSegmentVertical: string;
+    tabGapLargeSegmentVertical: string;
     panePaddingSmall: string;
     panePaddingMedium: string;
     panePaddingLarge: string;