naive-ui 2.34.3 → 2.35.0

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'
@@ -20,7 +21,7 @@ export const tabsProps = Object.assign(Object.assign({}, useTheme.props), { valu
     }, 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], 
@@ -51,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
@@ -214,6 +215,19 @@ export default 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: [] };
@@ -334,9 +348,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);
@@ -363,22 +385,22 @@ export default defineComponent({
         // avoid useless rerender
         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 = ref(null);
@@ -409,7 +431,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('tabPaddingVertical', sizeType)]: tabPaddingVertical, [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,
@@ -436,7 +458,11 @@ export default 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': 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
             };
@@ -459,7 +485,7 @@ export default 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
             ? flatten(defaultSlot()).filter((v) => {
@@ -512,13 +538,14 @@ export default defineComponent({
                 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`,
-                `${mergedClsPrefix}-tabs--${placement}`
+                `${mergedClsPrefix}-tabs--${resolvedPlacement}`
             ], style: this.cssVars },
             h("div", { class: [
                     // the class should be applied here since it's possible
@@ -526,7 +553,7 @@ export default 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`
                 ] },
                 resolveWrappedSlot(prefixSlot, (children) => children && (h("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
@@ -548,16 +575,17 @@ export default defineComponent({
                             return createLeftPaddedTabVNode(tabVNode);
                         }
                     }))) : (h(VResizeObserver, { onResize: this.handleNavResize }, {
-                    default: () => (h("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" }, ['top', 'bottom'].includes(placement) ? (h(VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
+                    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` }, 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,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/es/tabs/src/styles/index.cssr.js

@@ -21,8 +21,12 @@ 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
@@ -36,7 +40,11 @@ export default cB('tabs', `
  border-color .3s var(--n-bezier);
 `, [cM('segment-type', [cB('tabs-rail', [c('&.transition-disabled', 'color: red;', [cB('tabs-tab', `
  transition: none;
- `)])])]), cM('left, right', `
+ `)])])]), 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;
@@ -49,12 +57,16 @@ export default cB('tabs', `
  padding: var(--n-tab-padding-vertical); 
  `)]), cM('right', `
  flex-direction: row-reverse;
- `, [cB('tabs-bar', `
+ `, [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('tabs-bar', `
+ `, [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;
@@ -98,15 +110,39 @@ 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', `
+ `, [cB('tabs-nav-y-scroll', `
  height: 100%;
  width: 100%;
  overflow-y: auto; 
@@ -119,19 +155,13 @@ export default cB('tabs', `
  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;
@@ -187,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),
@@ -213,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;
@@ -227,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);
@@ -245,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;
@@ -268,8 +316,7 @@ 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);
@@ -278,16 +325,34 @@ export default cB('tabs', `
  `, [cB('tabs-tab-wrapper', `
  flex-direction: column;
  `, [cB('tabs-tab-pad', `
- height: var(--n-tab-gap);
+ height: var(--n-tab-gap-vertical);
  width: 100%;
- `)])]), cB('tabs-nav-scroll-content', `
- border-bottom: none;
- `)]), cM('left', [cB('tabs-nav-scroll-content', `
- box-sizing: border-box;
+ `)])])]), 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', [cB('tabs-nav-scroll-content', `
+ `)])]), 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', [cB('tabs-nav-scroll-content', `
+ `)])]), 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);
- border-bottom: none;
- `)])])]);
+ `)])])])]);

package/es/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/es/tabs/styles/_common.js

@@ -5,39 +5,51 @@ export 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/es/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/es/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/es/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/es/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/es/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/es/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/es/theme-editor/src/ThemeEditor.js

@@ -189,7 +189,7 @@ export default 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/es/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/es/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;