naive-ui 2.18.1 → 2.19.2

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

@@ -2,23 +2,17 @@
 import { PropType, CSSProperties, ComponentPublicInstance, nextTick } from 'vue';
 import { VXScrollInst } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import { Addable, OnClose } from './interface';
+import { Addable, OnClose, TabsType } from './interface';
 import type { OnUpdateValue } from './interface';
 declare const tabsProps: {
     readonly value: PropType<string | number>;
     readonly defaultValue: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"bar" | "line" | "card">;
+        readonly type: PropType<TabsType>;
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
     readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
-    /** deprecated */
-    readonly labelSize: {
-        readonly type: PropType<"small" | "medium" | "large">;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
@@ -34,22 +28,20 @@ declare const tabsProps: {
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly onClose: PropType<MaybeArray<OnClose>>;
-    readonly activeName: {
-        readonly type: PropType<string | number | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onActiveNameChange: {
-        readonly type: PropType<MaybeArray<(value: string & number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly labelSize: PropType<"small" | "medium" | "large">;
+    readonly activeName: PropType<string | number>;
+    readonly onActiveNameChange: PropType<MaybeArray<(value: string & number) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -63,11 +55,13 @@ declare const tabsProps: {
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -89,16 +83,27 @@ declare const tabsProps: {
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -112,11 +117,13 @@ declare const tabsProps: {
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -138,16 +145,27 @@ declare const tabsProps: {
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -161,11 +179,13 @@ declare const tabsProps: {
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -187,6 +207,12 @@ declare const tabsProps: {
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -197,17 +223,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly value: PropType<string | number>;
     readonly defaultValue: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"bar" | "line" | "card">;
+        readonly type: PropType<TabsType>;
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
     readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
-    /** deprecated */
-    readonly labelSize: {
-        readonly type: PropType<"small" | "medium" | "large">;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
@@ -223,22 +243,20 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly onClose: PropType<MaybeArray<OnClose>>;
-    readonly activeName: {
-        readonly type: PropType<string | number | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onActiveNameChange: {
-        readonly type: PropType<MaybeArray<(value: never) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly labelSize: PropType<"small" | "medium" | "large">;
+    readonly activeName: PropType<string | number>;
+    readonly onActiveNameChange: PropType<MaybeArray<(value: never) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -252,11 +270,13 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -278,16 +298,27 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -301,11 +332,13 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -327,16 +360,27 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -350,11 +394,13 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -376,6 +422,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -436,6 +488,7 @@ declare const _default: import("vue").DefineComponent<{
     handleTabsResize: import("lodash").DebouncedFunc<(entry: ResizeObserverEntry) => void>;
     cssVars: import("vue").ComputedRef<{
         '--bezier': string;
+        '--color-segment': string;
         '--bar-color': string;
         '--tab-font-size': string;
         '--tab-text-color': string;
@@ -454,6 +507,8 @@ declare const _default: import("vue").DefineComponent<{
         '--tab-padding': string;
         '--tab-gap': string;
         '--pane-padding': string;
+        '--font-weight-strong': string;
+        '--tab-color-segment': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly value?: unknown;
@@ -461,7 +516,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly type?: unknown;
     readonly closable?: unknown;
     readonly justifyContent?: unknown;
-    readonly labelSize?: unknown;
     readonly size?: unknown;
     readonly tabStyle?: unknown;
     readonly paneStyle?: unknown;
@@ -471,13 +525,14 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
     readonly onClose?: unknown;
+    readonly labelSize?: unknown;
     readonly activeName?: unknown;
     readonly onActiveNameChange?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
 } & {
-    type: "bar" | "line" | "card";
+    type: TabsType;
     size: "small" | "medium" | "large";
     closable: boolean;
     tabsPadding: number;
@@ -485,11 +540,16 @@ declare const _default: import("vue").DefineComponent<{
     value?: string | number | undefined;
     justifyContent?: "space-around" | "space-between" | "space-evenly" | undefined;
     theme?: import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -503,11 +563,13 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -529,16 +591,27 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -552,11 +625,13 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -578,16 +653,27 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tabs", {
+        colorSegment: string;
         tabFontSizeCard: string;
         tabTextColorLine: string;
         tabTextColorActiveLine: string;
         tabTextColorHoverLine: string;
         tabTextColorDisabledLine: string;
+        tabTextColorSegment: string;
+        tabTextColorActiveSegment: string;
+        tabTextColorHoverSegment: string;
+        tabTextColorDisabledSegment: string;
         tabTextColorBar: string;
         tabTextColorActiveBar: string;
         tabTextColorHoverBar: string;
@@ -601,11 +687,13 @@ declare const _default: import("vue").DefineComponent<{
         closeColorHover: string;
         closeColorPressed: string;
         tabColor: string;
+        tabColorSegment: string;
         tabBorderColor: string;
         tabFontWeightActive: string;
         tabFontWeight: string;
         tabBorderRadius: string;
         paneTextColor: string;
+        fontWeightStrong: string;
         tabFontSizeSmall: string;
         tabFontSizeMedium: string;
         tabFontSizeLarge: string;
@@ -627,6 +715,12 @@ declare const _default: import("vue").DefineComponent<{
         tabPaddingSmallCard: string;
         tabPaddingMediumCard: string;
         tabPaddingLargeCard: string;
+        tabPaddingSmallSegment: string;
+        tabPaddingMediumSegment: string;
+        tabPaddingLargeSegment: string;
+        tabGapSmallSegment: string;
+        tabGapMediumSegment: string;
+        tabGapLargeSegment: string;
         panePaddingSmall: string;
         panePaddingMedium: string;
         panePaddingLarge: string;
@@ -636,19 +730,16 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     addable?: Addable | undefined;
-    labelSize?: "small" | "medium" | "large" | undefined;
     tabStyle?: string | CSSProperties | undefined;
     paneStyle?: string | CSSProperties | undefined;
     onAdd?: (() => void) | undefined;
+    labelSize?: "small" | "medium" | "large" | undefined;
     activeName?: string | number | undefined;
     onActiveNameChange?: MaybeArray<(value: never) => void> | undefined;
 }>, {
-    type: "bar" | "line" | "card";
+    type: TabsType;
     size: "small" | "medium" | "large";
     closable: boolean;
-    labelSize: "small" | "medium" | "large";
     tabsPadding: number;
-    activeName: string | number | undefined;
-    onActiveNameChange: MaybeArray<(value: never) => void> | undefined;
 }>;
 export default _default;

package/lib/tabs/src/Tabs.js

@@ -13,18 +13,7 @@ const Tab_1 = require("./Tab");
 const tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: [String, Number], defaultValue: [String, Number], type: {
         type: String,
         default: 'bar'
-    }, closable: Boolean, justifyContent: String, 
-    /** deprecated */
-    labelSize: {
-        type: String,
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('tabs', '`label-size` is deprecated, please use `size` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, size: {
+    }, closable: Boolean, justifyContent: String, size: {
         type: String,
         default: 'medium'
     }, tabStyle: [String, Object], paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
@@ -32,30 +21,25 @@ const tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { v
         default: 0
     }, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
     // deprecated
-    activeName: {
-        type: [String, Number],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('tabs', '`active-name` is deprecated, please use `value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onActiveNameChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('tabs', '`on-active-name-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    labelSize: String, activeName: [String, Number], onActiveNameChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Tabs',
     props: tabsProps,
     setup(props, { slots }) {
         var _a, _b;
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.labelSize !== undefined) {
+                    (0, _utils_1.warnOnce)('tabs', '`label-size` is deprecated, please use `size` instead.');
+                }
+                if (props.activeName !== undefined) {
+                    (0, _utils_1.warnOnce)('tabs', '`active-name` is deprecated, please use `value` instead.');
+                }
+                if (props.onActiveNameChange !== undefined) {
+                    (0, _utils_1.warnOnce)('tabs', '`on-active-name-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Tabs', 'Tabs', index_cssr_1.default, styles_1.tabsLight, props, mergedClsPrefixRef);
         const tabsElRef = (0, vue_1.ref)(null);
@@ -256,11 +240,17 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { value: size } = compitableSizeRef;
                 const { type } = props;
-                const typeSuffix = type === 'card' ? 'Card' : type === 'bar' ? 'Bar' : 'Line';
+                const typeSuffix = {
+                    card: 'Card',
+                    bar: 'Bar',
+                    line: 'Line',
+                    segment: 'Segment'
+                }[type];
                 const sizeType = `${size}${typeSuffix}`;
-                const { self: { barColor, closeColor, closeColorHover, closeColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, [(0, _utils_1.createKey)('panePadding', size)]: panePadding, [(0, _utils_1.createKey)('tabPadding', sizeType)]: tabPadding, [(0, _utils_1.createKey)('tabGap', sizeType)]: tabGap, [(0, _utils_1.createKey)('tabTextColor', type)]: tabTextColor, [(0, _utils_1.createKey)('tabTextColorActive', type)]: tabTextColorActive, [(0, _utils_1.createKey)('tabTextColorHover', type)]: tabTextColorHover, [(0, _utils_1.createKey)('tabTextColorDisabled', type)]: tabTextColorDisabled, [(0, _utils_1.createKey)('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+                const { self: { barColor, closeColor, closeColorHover, closeColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, colorSegment, fontWeightStrong, tabColorSegment, [(0, _utils_1.createKey)('panePadding', size)]: panePadding, [(0, _utils_1.createKey)('tabPadding', sizeType)]: tabPadding, [(0, _utils_1.createKey)('tabGap', sizeType)]: tabGap, [(0, _utils_1.createKey)('tabTextColor', type)]: tabTextColor, [(0, _utils_1.createKey)('tabTextColorActive', type)]: tabTextColorActive, [(0, _utils_1.createKey)('tabTextColorHover', type)]: tabTextColorHover, [(0, _utils_1.createKey)('tabTextColorDisabled', type)]: tabTextColorDisabled, [(0, _utils_1.createKey)('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
                     '--bezier': cubicBezierEaseInOut,
+                    '--color-segment': colorSegment,
                     '--bar-color': barColor,
                     '--tab-font-size': tabFontSize,
                     '--tab-text-color': tabTextColor,
@@ -278,7 +268,9 @@ exports.default = (0, vue_1.defineComponent)({
                     '--tab-font-weight-active': tabFontWeightActive,
                     '--tab-padding': tabPadding,
                     '--tab-gap': tabGap,
-                    '--pane-padding': panePadding
+                    '--pane-padding': panePadding,
+                    '--font-weight-strong': fontWeightStrong,
+                    '--tab-color-segment': tabColorSegment
                 };
             })
         };
@@ -293,7 +285,8 @@ exports.default = (0, vue_1.defineComponent)({
         const prefix = prefixSlot ? prefixSlot() : null;
         const suffix = suffixSlot ? suffixSlot() : null;
         const isCard = type === 'card';
-        const mergedJustifyContent = !isCard && this.justifyContent;
+        const isSegment = type === 'segment';
+        const mergedJustifyContent = !isCard && !isSegment && this.justifyContent;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-tabs`,
                 `${mergedClsPrefix}-tabs--${type}-type`,
@@ -309,7 +302,13 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, prefix)) : null,
-                (0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
+                isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail` }, children.map((tabPaneVNode, index) => {
+                    return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 }), tabPaneVNode.children
+                        ? {
+                            default: tabPaneVNode.children.tab
+                        }
+                        : undefined));
+                }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
                     default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" },
                         (0, vue_1.h)(vueuc_1.VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
                             default: () => {
@@ -338,7 +337,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     isCard ? null : ((0, vue_1.h)("div", { ref: "barElRef", class: `${mergedClsPrefix}-tabs-bar` }))));
                             }
                         })))
-                }),
+                })),
                 addTabFixed && addable && isCard
                     ? createAddTag(addable, true)
                     : null,

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

@@ -1,4 +1,5 @@
 import { Ref, InjectionKey, 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;
@@ -6,7 +7,7 @@ export declare type OnCloseImpl = (name: string | number) => void;
 export interface TabsInjection {
     mergedClsPrefixRef: Ref<string>;
     valueRef: Ref<string | number | null>;
-    typeRef: Ref<'line' | 'card' | 'bar'>;
+    typeRef: Ref<TabsType>;
     closableRef: Ref<boolean>;
     tabStyleRef: Ref<string | CSSProperties | undefined>;
     paneStyleRef: Ref<string | CSSProperties | undefined>;