naive-ui 2.34.3 → 2.35.0

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'
@@ -26,7 +27,7 @@ exports.tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, placement: {
         type: String,
         default: 'top'
-    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
+    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], paneWrapperClass: String, paneWrapperStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
     }, animated: Boolean, onBeforeLeave: Function, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
@@ -57,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
@@ -220,6 +221,19 @@ exports.default = (0, vue_1.defineComponent)({
             if (tabsPaneWrapperEl) {
                 tabsPaneWrapperEl.style.maxHeight = '';
                 tabsPaneWrapperEl.style.height = '';
+                const { paneWrapperStyle } = props;
+                if (typeof paneWrapperStyle === 'string') {
+                    tabsPaneWrapperEl.style.cssText = paneWrapperStyle;
+                }
+                else if (paneWrapperStyle) {
+                    const { maxHeight, height } = paneWrapperStyle;
+                    if (maxHeight !== undefined) {
+                        tabsPaneWrapperEl.style.maxHeight = maxHeight;
+                    }
+                    if (height !== undefined) {
+                        tabsPaneWrapperEl.style.height = height;
+                    }
+                }
             }
         }
         const renderNameListRef = { value: [] };
@@ -340,9 +354,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);
@@ -369,22 +391,22 @@ exports.default = (0, vue_1.defineComponent)({
         // avoid useless rerender
         (0, vue_1.watchEffect)(() => {
             const { value: el } = scrollWrapperElRef;
-            if (!el || ['left', 'right'].includes(props.placement))
+            if (!el)
                 return;
             const { value: clsPrefix } = mergedClsPrefixRef;
-            const shadowBeforeClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-before`;
-            const shadowAfterClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-after`;
-            if (leftReachedRef.value) {
-                el.classList.remove(shadowBeforeClass);
+            const shadowStartClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-start`;
+            const shadowEndClass = `${clsPrefix}-tabs-nav-scroll-wrapper--shadow-end`;
+            if (startReachedRef.value) {
+                el.classList.remove(shadowStartClass);
             }
             else {
-                el.classList.add(shadowBeforeClass);
+                el.classList.add(shadowStartClass);
             }
-            if (rightReachedRef.value) {
-                el.classList.remove(shadowAfterClass);
+            if (endReachedRef.value) {
+                el.classList.remove(shadowEndClass);
             }
             else {
-                el.classList.add(shadowAfterClass);
+                el.classList.add(shadowEndClass);
             }
         });
         const tabsRailElRef = (0, vue_1.ref)(null);
@@ -415,7 +437,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)('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;
+            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,
@@ -442,7 +464,11 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-tab-padding': tabPadding,
                 '--n-tab-padding-vertical': tabPaddingVertical,
                 '--n-tab-gap': tabGap,
-                '--n-pane-padding': panePadding,
+                '--n-tab-gap-vertical': tabGapVertical,
+                '--n-pane-padding-left': (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
             };
@@ -465,7 +491,7 @@ exports.default = (0, vue_1.defineComponent)({
             onAnimationAfterEnter, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, type, placement, addTabFixed, addable, mergedSize, renderNameListRef, onRender, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
+        const { mergedClsPrefix, type, placement, addTabFixed, addable, mergedSize, renderNameListRef, onRender, paneWrapperClass, paneWrapperStyle, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const tabPaneChildren = defaultSlot
             ? (0, _utils_1.flatten)(defaultSlot()).filter((v) => {
@@ -518,13 +544,14 @@ exports.default = (0, vue_1.defineComponent)({
                 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`,
-                `${mergedClsPrefix}-tabs--${placement}`
+                `${mergedClsPrefix}-tabs--${resolvedPlacement}`
             ], style: this.cssVars },
             (0, vue_1.h)("div", { class: [
                     // the class should be applied here since it's possible
@@ -532,7 +559,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--${resolvedPlacement}`,
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 (0, _utils_1.resolveWrappedSlot)(prefixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
@@ -554,16 +581,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" }, ['top', 'bottom'].includes(placement) ? ((0, vue_1.h)(vueuc_1.VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
+                    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` }, 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,4 +1,4 @@
-import { Ref, CSSProperties } from 'vue';
+import { type Ref, type CSSProperties } from 'vue';
 export type TabsType = 'line' | 'card' | 'bar' | 'segment';
 export type OnUpdateValue = (value: string & number) => void;
 export type OnUpdateValueImpl = (value: string | number) => void;

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

@@ -26,8 +26,12 @@ 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
@@ -41,7 +45,11 @@ exports.default = (0, cssr_1.cB)('tabs', `
  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.cM)('left, right', `
+ `)])])]), (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;
@@ -54,12 +62,16 @@ exports.default = (0, cssr_1.cB)('tabs', `
  padding: var(--n-tab-padding-vertical); 
  `)]), (0, cssr_1.cM)('right', `
  flex-direction: row-reverse;
- `, [(0, cssr_1.cB)('tabs-bar', `
+ `, [(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)('tabs-bar', `
+ `, [(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;
@@ -103,15 +115,39 @@ 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', `
+ `, [(0, cssr_1.cB)('tabs-nav-y-scroll', `
  height: 100%;
  width: 100%;
  overflow-y: auto; 
@@ -124,19 +160,13 @@ exports.default = (0, cssr_1.cB)('tabs', `
  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;
@@ -192,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),
@@ -218,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;
@@ -232,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);
@@ -250,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;
@@ -273,8 +321,7 @@ 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);
@@ -283,16 +330,34 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `, [(0, cssr_1.cB)('tabs-tab-wrapper', `
  flex-direction: column;
  `, [(0, cssr_1.cB)('tabs-tab-pad', `
- height: var(--n-tab-gap);
+ height: var(--n-tab-gap-vertical);
  width: 100%;
- `)])]), (0, cssr_1.cB)('tabs-nav-scroll-content', `
- border-bottom: none;
- `)]), (0, cssr_1.cM)('left', [(0, cssr_1.cB)('tabs-nav-scroll-content', `
- box-sizing: border-box;
+ `)])])]), (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.cB)('tabs-nav-scroll-content', `
+ `)])]), (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.cB)('tabs-nav-scroll-content', `
+ `)])]), (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);
- border-bottom: none;
- `)])])]);
+ `)])])])]);

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

@@ -5,6 +5,9 @@ declare const _default: {
     tabGapSmallLine: string;
     tabGapMediumLine: string;
     tabGapLargeLine: string;
+    tabGapSmallLineVertical: string;
+    tabGapMediumLineVertical: string;
+    tabGapLargeLineVertical: string;
     tabPaddingSmallLine: string;
     tabPaddingMediumLine: string;
     tabPaddingLargeLine: string;
@@ -14,6 +17,9 @@ declare const _default: {
     tabGapSmallBar: string;
     tabGapMediumBar: string;
     tabGapLargeBar: string;
+    tabGapSmallBarVertical: string;
+    tabGapMediumBarVertical: string;
+    tabGapLargeBarVertical: string;
     tabPaddingSmallBar: string;
     tabPaddingMediumBar: string;
     tabPaddingLargeBar: string;
@@ -23,6 +29,9 @@ declare const _default: {
     tabGapSmallCard: string;
     tabGapMediumCard: string;
     tabGapLargeCard: string;
+    tabGapSmallCardVertical: string;
+    tabGapMediumCardVertical: string;
+    tabGapLargeCardVertical: string;
     tabPaddingSmallCard: string;
     tabPaddingMediumCard: string;
     tabPaddingLargeCard: string;
@@ -38,6 +47,9 @@ declare const _default: {
     tabGapSmallSegment: string;
     tabGapMediumSegment: string;
     tabGapLargeSegment: string;
+    tabGapSmallSegmentVertical: string;
+    tabGapMediumSegmentVertical: string;
+    tabGapLargeSegmentVertical: string;
     panePaddingSmall: string;
     panePaddingMedium: string;
     panePaddingLarge: string;

package/lib/tabs/styles/_common.js

@@ -7,39 +7,51 @@ exports.default = {
     tabGapSmallLine: '36px',
     tabGapMediumLine: '36px',
     tabGapLargeLine: '36px',
+    tabGapSmallLineVertical: '8px',
+    tabGapMediumLineVertical: '8px',
+    tabGapLargeLineVertical: '8px',
     tabPaddingSmallLine: '6px 0',
     tabPaddingMediumLine: '10px 0',
     tabPaddingLargeLine: '14px 0',
-    tabPaddingVerticalSmallLine: '0 6px',
-    tabPaddingVerticalMediumLine: '0 10px',
-    tabPaddingVerticalLargeLine: '0 14px',
+    tabPaddingVerticalSmallLine: '6px 12px',
+    tabPaddingVerticalMediumLine: '8px 16px',
+    tabPaddingVerticalLargeLine: '10px 20px',
     tabGapSmallBar: '36px',
     tabGapMediumBar: '36px',
     tabGapLargeBar: '36px',
+    tabGapSmallBarVertical: '8px',
+    tabGapMediumBarVertical: '8px',
+    tabGapLargeBarVertical: '8px',
     tabPaddingSmallBar: '4px 0',
     tabPaddingMediumBar: '6px 0',
     tabPaddingLargeBar: '10px 0',
-    tabPaddingVerticalSmallBar: '0 4px',
-    tabPaddingVerticalMediumBar: '0 6px ',
-    tabPaddingVerticalLargeBar: '0 10px ',
+    tabPaddingVerticalSmallBar: '6px 12px',
+    tabPaddingVerticalMediumBar: '8px 16px',
+    tabPaddingVerticalLargeBar: '10px 20px',
     tabGapSmallCard: '4px',
     tabGapMediumCard: '4px',
     tabGapLargeCard: '4px',
-    tabPaddingSmallCard: '6px 10px',
-    tabPaddingMediumCard: '8px 12px',
-    tabPaddingLargeCard: '8px 16px',
+    tabGapSmallCardVertical: '4px',
+    tabGapMediumCardVertical: '4px',
+    tabGapLargeCardVertical: '4px',
+    tabPaddingSmallCard: '8px 16px',
+    tabPaddingMediumCard: '10px 20px',
+    tabPaddingLargeCard: '12px 24px',
     tabPaddingSmallSegment: '4px 0',
     tabPaddingMediumSegment: '6px 0',
     tabPaddingLargeSegment: '8px 0',
     tabPaddingVerticalLargeSegment: '0 8px',
-    tabPaddingVerticalSmallCard: '10px 6px',
-    tabPaddingVerticalMediumCard: '12px 8px',
-    tabPaddingVerticalLargeCard: '16px 8px',
+    tabPaddingVerticalSmallCard: '8px 12px',
+    tabPaddingVerticalMediumCard: '10px 16px',
+    tabPaddingVerticalLargeCard: '12px 20px',
     tabPaddingVerticalSmallSegment: '0 4px',
     tabPaddingVerticalMediumSegment: '0 6px',
     tabGapSmallSegment: '0',
     tabGapMediumSegment: '0',
     tabGapLargeSegment: '0',
+    tabGapSmallSegmentVertical: '0',
+    tabGapMediumSegmentVertical: '0',
+    tabGapLargeSegmentVertical: '0',
     panePaddingSmall: '8px 0 0 0',
     panePaddingMedium: '12px 0 0 0',
     panePaddingLarge: '16px 0 0 0',

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

@@ -1,5 +1,5 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { Theme } from '../../_mixins';
+import { type Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
     colorSegment: string;
     tabFontSizeCard: string;
@@ -40,6 +40,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     tabGapSmallLine: string;
     tabGapMediumLine: string;
     tabGapLargeLine: string;
+    tabGapSmallLineVertical: string;
+    tabGapMediumLineVertical: string;
+    tabGapLargeLineVertical: string;
     tabPaddingSmallLine: string;
     tabPaddingMediumLine: string;
     tabPaddingLargeLine: string;
@@ -49,6 +52,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     tabGapSmallBar: string;
     tabGapMediumBar: string;
     tabGapLargeBar: string;
+    tabGapSmallBarVertical: string;
+    tabGapMediumBarVertical: string;
+    tabGapLargeBarVertical: string;
     tabPaddingSmallBar: string;
     tabPaddingMediumBar: string;
     tabPaddingLargeBar: string;
@@ -58,6 +64,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     tabGapSmallCard: string;
     tabGapMediumCard: string;
     tabGapLargeCard: string;
+    tabGapSmallCardVertical: string;
+    tabGapMediumCardVertical: string;
+    tabGapLargeCardVertical: string;
     tabPaddingSmallCard: string;
     tabPaddingMediumCard: string;
     tabPaddingLargeCard: string;
@@ -73,6 +82,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     tabGapSmallSegment: string;
     tabGapMediumSegment: string;
     tabGapLargeSegment: string;
+    tabGapSmallSegmentVertical: string;
+    tabGapMediumSegmentVertical: string;
+    tabGapLargeSegmentVertical: string;
     panePaddingSmall: string;
     panePaddingMedium: string;
     panePaddingLarge: string;

package/lib/tag/src/Tag.d.ts

@@ -1,4 +1,4 @@
-import { PropType, Ref } from 'vue';
+import { type PropType, type Ref } from 'vue';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 export interface TagPublicMethods {
     setTextContent: (textContent: string) => void;
@@ -624,7 +624,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: Ref<string>;
     contentRef: Ref<HTMLElement | null>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     handleClick: (e: MouseEvent) => void;
@@ -984,5 +984,5 @@ declare const _default: import("vue").DefineComponent<{
     triggerClickOnClose: boolean;
     internalCloseFocusable: boolean;
     internalCloseIsButtonTag: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/tag/src/common-props.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 export interface TagColor {
     color?: string;
     borderColor?: string;

package/lib/theme-editor/src/MaximizeIcon.d.ts

@@ -1 +1 @@
-export declare const MaximizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export declare const MaximizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/lib/theme-editor/src/MinimizeIcon.d.ts

@@ -1 +1 @@
-export declare const MinimizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export declare const MinimizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/lib/theme-editor/src/ThemeEditor.d.ts

@@ -1,4 +1,4 @@
-import { GlobalThemeOverrides } from '../../config-provider';
+import { type GlobalThemeOverrides } from '../../config-provider';
 declare const _default: import("vue").DefineComponent<{}, {
     locale: import("vue").Ref<{
         title: string;
@@ -131,8 +131,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleImportClick: () => void;
     handleInputFileChange: () => void;
     toggleMaximized: () => void;
-    isMaximized: import("vue").Ref<{
-        valueOf: () => boolean;
-    }>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    isMaximized: import("vue").Ref<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/theme-editor/src/ThemeEditor.js

@@ -191,7 +191,7 @@ exports.default = (0, vue_1.defineComponent)({
                             ], 
                             // We use ts-ignore for vue-tsc, since it seems to patch
                             // native event for vue components
-                            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+                            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
                             // @ts-ignore
                             onClick: () => {
                                 this.showPanel = !this.showPanel;

package/lib/themes/interface.d.ts

@@ -1,2 +1,2 @@
-import { GlobalTheme } from '../config-provider';
+import { type GlobalTheme } from '../config-provider';
 export type BuiltInGlobalTheme = Omit<Required<GlobalTheme>, 'InternalSelectMenu' | 'InternalSelection'>;

package/lib/themes/utils.d.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../config-provider';
+import { type GlobalTheme } from '../config-provider';
 type ComponentKey = Exclude<keyof GlobalTheme, 'name'>;
 type ComponentThemes = Array<Exclude<GlobalTheme[ComponentKey], undefined>>;
 export declare function createTheme(name: string, componentThemes: ComponentThemes): GlobalTheme;