naive-ui 2.34.2 → 2.34.4

package/es/tabs/src/Tabs.js

@@ -8,6 +8,7 @@ import { tabsLight } from '../styles';
 import { tabsInjectionKey } from './interface';
 import Tab from './Tab';
 import style from './styles/index.cssr';
+import { getPadding } from 'seemly';
 export const tabsProps = Object.assign(Object.assign({}, useTheme.props), { value: [String, Number], defaultValue: [String, Number], trigger: {
         type: String,
         default: 'click'
@@ -17,7 +18,10 @@ export const tabsProps = Object.assign(Object.assign({}, useTheme.props), { valu
     }, 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], 
@@ -48,8 +52,8 @@ export default defineComponent({
         const scrollWrapperElRef = ref(null);
         const addTabInstRef = ref(null);
         const xScrollInstRef = ref(null);
-        const leftReachedRef = ref(true);
-        const rightReachedRef = ref(true);
+        const startReachedRef = ref(true);
+        const endReachedRef = ref(true);
         const compitableSizeRef = useCompitable(props, ['labelSize', 'size']);
         const compitableValueRef = useCompitable(props, ['activeName', 'value']);
         const uncontrolledValueRef = ref((_b = (_a = compitableValueRef.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : (slots.default
@@ -86,24 +90,49 @@ export default 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() {
@@ -306,9 +335,17 @@ export default defineComponent({
         function deriveScrollShadow(el) {
             if (!el)
                 return;
-            const { scrollLeft, scrollWidth, offsetWidth } = el;
-            leftReachedRef.value = scrollLeft <= 0;
-            rightReachedRef.value = scrollLeft + offsetWidth >= scrollWidth;
+            const { placement } = props;
+            if (placement === 'top' || placement === 'bottom') {
+                const { scrollLeft, scrollWidth, offsetWidth } = el;
+                startReachedRef.value = scrollLeft <= 0;
+                endReachedRef.value = scrollLeft + offsetWidth >= scrollWidth;
+            }
+            else {
+                const { scrollTop, scrollHeight, offsetHeight } = el;
+                startReachedRef.value = scrollTop <= 0;
+                endReachedRef.value = scrollTop + offsetHeight >= scrollHeight;
+            }
         }
         const handleScroll = throttle((e) => {
             deriveScrollShadow(e.target);
@@ -338,19 +375,19 @@ export default 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 = ref(null);
@@ -381,7 +418,7 @@ export default defineComponent({
                 segment: 'Segment'
             }[type];
             const sizeType = `${size}${typeSuffix}`;
-            const { self: { barColor, closeIconColor, closeIconColorHover, closeIconColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, colorSegment, fontWeightStrong, tabColorSegment, closeSize, closeIconSize, closeColorHover, closeColorPressed, closeBorderRadius, [createKey('panePadding', size)]: panePadding, [createKey('tabPadding', sizeType)]: tabPadding, [createKey('tabGap', sizeType)]: tabGap, [createKey('tabTextColor', type)]: tabTextColor, [createKey('tabTextColorActive', type)]: tabTextColorActive, [createKey('tabTextColorHover', type)]: tabTextColorHover, [createKey('tabTextColorDisabled', type)]: tabTextColorDisabled, [createKey('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { barColor, closeIconColor, closeIconColorHover, closeIconColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, colorSegment, fontWeightStrong, tabColorSegment, closeSize, closeIconSize, closeColorHover, closeColorPressed, closeBorderRadius, [createKey('panePadding', size)]: panePadding, [createKey('tabPadding', sizeType)]: tabPadding, [createKey('tabPaddingVertical', sizeType)]: tabPaddingVertical, [createKey('tabGap', sizeType)]: tabGap, [createKey('tabGap', `${sizeType}Vertical`)]: tabGapVertical, [createKey('tabTextColor', type)]: tabTextColor, [createKey('tabTextColorActive', type)]: tabTextColorActive, [createKey('tabTextColorHover', type)]: tabTextColorHover, [createKey('tabTextColorDisabled', type)]: tabTextColorDisabled, [createKey('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-color-segment': colorSegment,
@@ -406,8 +443,13 @@ export default 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': getPadding(panePadding, 'left'),
+                '--n-pane-padding-right': getPadding(panePadding, 'right'),
+                '--n-pane-padding-top': getPadding(panePadding, 'top'),
+                '--n-pane-padding-bottom': getPadding(panePadding, 'bottom'),
                 '--n-font-weight-strong': fontWeightStrong,
                 '--n-tab-color-segment': tabColorSegment
             };
@@ -430,7 +472,7 @@ export default 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
             ? flatten(defaultSlot()).filter((v) => {
@@ -447,12 +489,50 @@ export default defineComponent({
         const isSegment = type === 'segment';
         const mergedJustifyContent = !isCard && !isSegment && this.justifyContent;
         renderNameListRef.value = [];
+        const scrollContent = () => {
+            const tabs = (h("div", { style: this.tabWrapperStyle, class: [`${mergedClsPrefix}-tabs-wrapper`] },
+                mergedJustifyContent ? null : (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(h(Tab, 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 : (h("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
+            return (h("div", { ref: "tabsElRef", class: `${mergedClsPrefix}-tabs-nav-scroll-content` },
+                isCard && addable ? (h(VResizeObserver, { onResize: this.handleTabsResize }, {
+                    default: () => tabs
+                })) : (tabs),
+                isCard ? h("div", { class: `${mergedClsPrefix}-tabs-pad` }) : null,
+                isCard ? null : (h("div", { ref: "barElRef", class: `${mergedClsPrefix}-tabs-bar` }))));
+        };
+        const resolvedPlacement = isSegment ? 'top' : placement;
         return (h("div", { class: [
                 `${mergedClsPrefix}-tabs`,
                 this.themeClass,
                 `${mergedClsPrefix}-tabs--${type}-type`,
                 `${mergedClsPrefix}-tabs--${mergedSize}-size`,
-                mergedJustifyContent && `${mergedClsPrefix}-tabs--flex`
+                mergedJustifyContent && `${mergedClsPrefix}-tabs--flex`,
+                `${mergedClsPrefix}-tabs--${resolvedPlacement}`
             ], style: this.cssVars },
             h("div", { class: [
                     // the class should be applied here since it's possible
@@ -460,6 +540,7 @@ export default defineComponent({
                     // other. adding a class will make it easy to write the
                     // style.
                     `${mergedClsPrefix}-tabs-nav--${type}-type`,
+                    `${mergedClsPrefix}-tabs-nav--${resolvedPlacement}`,
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 resolveWrappedSlot(prefixSlot, (children) => children && (h("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
@@ -481,61 +562,17 @@ export default defineComponent({
                             return createLeftPaddedTabVNode(tabVNode);
                         }
                     }))) : (h(VResizeObserver, { onResize: this.handleNavResize }, {
-                    default: () => (h("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" },
-                        h(VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
-                            default: () => {
-                                const rawWrappedTabs = (h("div", { style: this.tabWrapperStyle, class: `${mergedClsPrefix}-tabs-wrapper` },
-                                    mergedJustifyContent ? null : (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(h(Tab, 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 : (h("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
-                                let wrappedTabs = rawWrappedTabs;
-                                if (isCard && addable) {
-                                    wrappedTabs = (h(VResizeObserver, { onResize: this.handleTabsResize }, {
-                                        default: () => rawWrappedTabs
-                                    }));
-                                }
-                                return (h("div", { ref: "tabsElRef", class: `${mergedClsPrefix}-tabs-nav-scroll-content` },
-                                    wrappedTabs,
-                                    isCard ? (h("div", { class: `${mergedClsPrefix}-tabs-pad` })) : null,
-                                    isCard ? null : (h("div", { ref: "barElRef", class: `${mergedClsPrefix}-tabs-bar` }))));
-                            }
-                        })))
+                    default: () => (h("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" }, ['top', 'bottom'].includes(resolvedPlacement) ? (h(VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
+                        default: scrollContent
+                    })) : (h("div", { class: `${mergedClsPrefix}-tabs-nav-y-scroll`, onScroll: this.handleScroll }, scrollContent()))))
                 })),
                 addTabFixed && addable && isCard
                     ? createAddTag(addable, true)
                     : null,
                 resolveWrappedSlot(suffixSlot, (children) => children && (h("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, children)))),
             showPane &&
-                (this.animated ? (h("div", { ref: "tabsPaneWrapperRef", class: `${mergedClsPrefix}-tabs-pane-wrapper` }, filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames, this.onAnimationBeforeLeave, this.onAnimationEnter, this.onAnimationAfterEnter, this.animationDirection))) : (filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)))));
+                (this.animated &&
+                    (resolvedPlacement === 'top' || resolvedPlacement === 'bottom') ? (h("div", { ref: "tabsPaneWrapperRef", style: paneWrapperStyle, class: [`${mergedClsPrefix}-tabs-pane-wrapper`, paneWrapperClass] }, filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames, this.onAnimationBeforeLeave, this.onAnimationEnter, this.onAnimationAfterEnter, this.animationDirection))) : (filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)))));
     }
 });
 function filterMapTabPanes(tabPaneVNodes, value, renderedNames, onBeforeLeave, onEnter, onAfterEnter, animationDirection) {

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

@@ -1,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/es/tabs/src/styles/index.cssr.js

@@ -21,20 +21,54 @@ import { c, cM, cB, cE, cNotM } from '../../../_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
 export default 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);
 `, [cM('segment-type', [cB('tabs-rail', [c('&.transition-disabled', 'color: red;', [cB('tabs-tab', `
  transition: none;
- `)])])]), cB('tabs-rail', `
+ `)])])]), cM('top', [cB('tab-pane', `
+ padding: var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left);
+ `)]), cM('left', [cB('tab-pane', `
+ padding: var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left) var(--n-pane-padding-top);
+ `)]), cM('left, right', `
+ flex-direction: row;
+ `, [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);
+ `), cB('tabs-tab', `
+ padding: var(--n-tab-padding-vertical); 
+ `)]), cM('right', `
+ flex-direction: row-reverse;
+ `, [cB('tab-pane', `
+ padding: var(--n-pane-padding-left) var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom);
+ `), cB('tabs-bar', `
+ left: 0;
+ `)]), cM('bottom', `
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ `, [cB('tab-pane', `
+ padding: var(--n-pane-padding-bottom) var(--n-pane-padding-right) var(--n-pane-padding-top) var(--n-pane-padding-left);
+ `), cB('tabs-bar', `
+ top: 0;
+ `)]), cB('tabs-rail', `
  padding: 3px;
  border-radius: var(--n-tab-border-radius);
  width: 100%;
@@ -76,32 +110,58 @@ export default cB('tabs', `
  `, [cE('prefix, suffix', `
  display: flex;
  align-items: center;
- `), cE('prefix', 'padding-right: 16px;'), cE('suffix', 'padding-left: 16px;')]), cB('tabs-nav-scroll-wrapper', `
+ `), cE('prefix', 'padding-right: 16px;'), cE('suffix', 'padding-left: 16px;')]), cM('top, bottom', [cB('tabs-nav-scroll-wrapper', [c('&::before', `
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 20px;
+ `), c('&::after', `
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 20px;
+ `), cM('shadow-start', [c('&::before', `
+ box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
+ `)]), cM('shadow-end', [c('&::after', `
+ box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
+ `)])])]), cM('left, right', [cB('tabs-nav-scroll-wrapper', [c('&::before', `
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 20px;
+ `), c('&::after', `
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 20px;
+ `), cM('shadow-start', [c('&::before', `
+ box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, .12);
+ `)]), cM('shadow-end', [c('&::after', `
+ box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, .12);
+ `)])])]), cB('tabs-nav-scroll-wrapper', `
  flex: 1;
  position: relative;
  overflow: hidden;
- `, [cM('shadow-before', [c('&::before', `
- box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
- `)]), cM('shadow-after', [c('&::after', `
- box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
+ `, [cB('tabs-nav-y-scroll', `
+ height: 100%;
+ width: 100%;
+ overflow-y: auto; 
+ scrollbar-width: none;
+ `, [c('&::-webkit-scrollbar', `
+ width: 0;
+ height: 0;
  `)]), 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;
- `), c('&::before', `
- left: 0;
- `), c('&::after', `
- right: 0;
  `)]), cB('tabs-nav-scroll-content', `
  display: flex;
  position: relative;
  min-width: 100%;
  width: fit-content;
+ box-sizing: border-box;
  `), cB('tabs-wrapper', `
  display: inline-flex;
  flex-wrap: nowrap;
@@ -157,7 +217,6 @@ export default cB('tabs', `
  `), 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),
@@ -183,6 +242,7 @@ export default cB('tabs', `
  transform: translateX(0);
  opacity: 1;
  `)]), cB('tabs-tab-pad', `
+ box-sizing: border-box;
  width: var(--n-tab-gap);
  flex-grow: 0;
  flex-shrink: 0;
@@ -197,15 +257,36 @@ export default cB('tabs', `
  font-weight: var(--n-tab-font-weight-active);
  `), cM('disabled', {
   color: 'var(--n-tab-text-color-disabled)'
-})])]), cB('tabs-nav', [cM('line-type', [cE('prefix, suffix', `
- transition: border-color .3s var(--n-bezier);
+})])]), cB('tabs-nav', [cM('line-type', [cM('top', [cE('prefix, suffix', `
  border-bottom: 1px solid var(--n-tab-border-color);
  `), cB('tabs-nav-scroll-content', `
- transition: border-color .3s var(--n-bezier);
  border-bottom: 1px solid var(--n-tab-border-color);
  `), cB('tabs-bar', `
- border-radius: 0;
  bottom: -1px;
+ `)]), cM('left', [cE('prefix, suffix', `
+ border-right: 1px solid var(--n-tab-border-color);
+ `), cB('tabs-nav-scroll-content', `
+ border-right: 1px solid var(--n-tab-border-color);
+ `), cB('tabs-bar', `
+ right: -1px;
+ `)]), cM('right', [cE('prefix, suffix', `
+ border-left: 1px solid var(--n-tab-border-color);
+ `), cB('tabs-nav-scroll-content', `
+ border-left: 1px solid var(--n-tab-border-color);
+ `), cB('tabs-bar', `
+ left: -1px;
+ `)]), cM('bottom', [cE('prefix, suffix', `
+ border-top: 1px solid var(--n-tab-border-color);
+ `), cB('tabs-nav-scroll-content', `
+ border-top: 1px solid var(--n-tab-border-color);
+ `), cB('tabs-bar', `
+ top: -1px;
+ `)]), cE('prefix, suffix', `
+ transition: border-color .3s var(--n-bezier);
+ `), cB('tabs-nav-scroll-content', `
+ transition: border-color .3s var(--n-bezier);
+ `), cB('tabs-bar', `
+ border-radius: 0;
  `)]), cM('card-type', [cE('prefix, suffix', `
  transition: border-color .3s var(--n-bezier);
  border-bottom: 1px solid var(--n-tab-border-color);
@@ -215,12 +296,9 @@ export default cB('tabs', `
  border-bottom: 1px solid var(--n-tab-border-color);
  `), cB('tabs-tab-pad', `
  transition: border-color .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-tab-border-color);
  `), 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;
@@ -238,9 +316,43 @@ export default cB('tabs', `
  font-size: var(--n-tab-font-size);
  `), cNotM('disabled', [c('&:hover', `
  color: var(--n-tab-text-color-hover);
- `)])]), cM('closable', 'padding-right: 6px;'), cM('active', `
- border-bottom: 1px solid #0000;
+ `)])]), cM('closable', 'padding-right: 8px;'), cM('active', `
  background-color: #0000;
  font-weight: var(--n-tab-font-weight-active);
  color: var(--n-tab-text-color-active);
- `), cM('disabled', 'color: var(--n-tab-text-color-disabled);')]), cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--n-tab-border-color);')])])]);
+ `), cM('disabled', 'color: var(--n-tab-text-color-disabled);')]), cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--n-tab-border-color);')]), cM('left, right', [cB('tabs-wrapper', `
+ flex-direction: column;
+ `, [cB('tabs-tab-wrapper', `
+ flex-direction: column;
+ `, [cB('tabs-tab-pad', `
+ height: var(--n-tab-gap-vertical);
+ width: 100%;
+ `)])])]), cM('top', [cM('card-type', [cB('tabs-tab', `
+ border-top-left-radius: var(--n-tab-border-radius);
+ border-top-right-radius: var(--n-tab-border-radius);
+ `, [cM('active', `
+ border-bottom: 1px solid #0000;
+ `)]), cB('tabs-tab-pad', `
+ border-bottom: 1px solid var(--n-tab-border-color);
+ `)])]), cM('left', [cM('card-type', [cB('tabs-tab', `
+ border-top-left-radius: var(--n-tab-border-radius);
+ border-bottom-left-radius: var(--n-tab-border-radius);
+ `, [cM('active', `
+ border-right: 1px solid #0000;
+ `)]), cB('tabs-tab-pad', `
+ border-right: 1px solid var(--n-tab-border-color);
+ `)])]), cM('right', [cM('card-type', [cB('tabs-tab', `
+ border-top-right-radius: var(--n-tab-border-radius);
+ border-bottom-right-radius: var(--n-tab-border-radius);
+ `, [cM('active', `
+ border-left: 1px solid #0000;
+ `)]), cB('tabs-tab-pad', `
+ border-left: 1px solid var(--n-tab-border-color);
+ `)])]), cM('bottom', [cM('card-type', [cB('tabs-tab', `
+ border-bottom-left-radius: var(--n-tab-border-radius);
+ border-bottom-right-radius: var(--n-tab-border-radius);
+ `, [cM('active', `
+ border-top: 1px solid #0000;
+ `)]), cB('tabs-tab-pad', `
+ border-top: 1px solid var(--n-tab-border-color);
+ `)])])])]);

package/es/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;