vant 3.3.7 → 3.4.0

package/es/switch/index.d.ts

@@ -13,7 +13,7 @@ export declare const Switch: import("../utils").WithInstall<import("vue").Define
         type: import("vue").PropType<unknown>;
         default: unknown;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;
     loading?: unknown;
     disabled?: unknown;
@@ -43,3 +43,8 @@ export declare const Switch: import("../utils").WithInstall<import("vue").Define
 }>>;
 export default Switch;
 export type { SwitchProps } from './Switch';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanSwitch: typeof Switch;
+    }
+}

package/es/tab/Tab.d.ts

@@ -1,4 +1,4 @@
-import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import { type PropType, type CSSProperties, type ExtractPropTypes } from 'vue';
 declare const tabProps: {
     to: PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-}, (() => JSX.Element | undefined) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, (() => JSX.Element | undefined) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     to?: unknown;
     url?: unknown;
     replace?: unknown;

package/es/tab/index.d.ts

@@ -14,7 +14,7 @@ export declare const Tab: import("../utils").WithInstall<import("vue").DefineCom
         type: BooleanConstructor;
         default: true;
     };
-}, (() => JSX.Element | undefined) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, (() => JSX.Element | undefined) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     to?: unknown;
     url?: unknown;
     replace?: unknown;
@@ -47,3 +47,8 @@ export declare const Tab: import("../utils").WithInstall<import("vue").DefineCom
 }>>;
 export default Tab;
 export type { TabProps } from './Tab';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanTab: typeof Tab;
+    }
+}

package/es/tabbar/Tabbar.d.ts

@@ -1,4 +1,4 @@
-import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
+import { type PropType, type InjectionKey, type ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 declare const tabbarProps: {
     route: BooleanConstructor;
@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | null>;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     route?: unknown;
     fixed?: unknown;
     border?: unknown;

package/es/tabbar/index.d.ts

@@ -21,7 +21,7 @@ export declare const Tabbar: import("../utils").WithInstall<import("vue").Define
         type: import("vue").PropType<boolean | null>;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     route?: unknown;
     fixed?: unknown;
     border?: unknown;
@@ -57,3 +57,8 @@ export declare const Tabbar: import("../utils").WithInstall<import("vue").Define
 }>>;
 export default Tabbar;
 export type { TabbarProps } from './Tabbar';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanTabbar: typeof Tabbar;
+    }
+}

package/es/tabbar-item/TabbarItem.d.ts

@@ -1,6 +1,6 @@
-import { ExtractPropTypes } from 'vue';
+import { type PropType, type ExtractPropTypes } from 'vue';
 declare const tabbarItemProps: {
-    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    to: PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
     replace: BooleanConstructor;
 } & {
@@ -8,11 +8,31 @@ declare const tabbarItemProps: {
     icon: StringConstructor;
     name: (NumberConstructor | StringConstructor)[];
     badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: PropType<Partial<{
+        dot?: unknown;
+        max?: unknown;
+        tag?: unknown;
+        color?: unknown;
+        offset?: unknown;
+        content?: unknown;
+        showZero?: unknown;
+        position?: unknown;
+    } & {
+        dot: boolean;
+        tag: keyof HTMLElementTagNameMap;
+        showZero: boolean;
+        position: import("../badge").BadgePosition;
+    } & {
+        color?: string | undefined;
+        max?: string | number | undefined;
+        offset?: [string | number, string | number] | undefined;
+        content?: string | number | undefined;
+    }>>;
     iconPrefix: StringConstructor;
 };
 export declare type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>;
 declare const _default: import("vue").DefineComponent<{
-    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    to: PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
     replace: BooleanConstructor;
 } & {
@@ -20,8 +40,28 @@ declare const _default: import("vue").DefineComponent<{
     icon: StringConstructor;
     name: (NumberConstructor | StringConstructor)[];
     badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: PropType<Partial<{
+        dot?: unknown;
+        max?: unknown;
+        tag?: unknown;
+        color?: unknown;
+        offset?: unknown;
+        content?: unknown;
+        showZero?: unknown;
+        position?: unknown;
+    } & {
+        dot: boolean;
+        tag: keyof HTMLElementTagNameMap;
+        showZero: boolean;
+        position: import("../badge").BadgePosition;
+    } & {
+        color?: string | undefined;
+        max?: string | number | undefined;
+        offset?: [string | number, string | number] | undefined;
+        content?: string | number | undefined;
+    }>>;
     iconPrefix: StringConstructor;
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     to?: unknown;
     url?: unknown;
     replace?: unknown;
@@ -29,6 +69,7 @@ declare const _default: import("vue").DefineComponent<{
     icon?: unknown;
     name?: unknown;
     badge?: unknown;
+    badgeProps?: unknown;
     iconPrefix?: unknown;
 } & {
     replace: boolean;
@@ -40,6 +81,26 @@ declare const _default: import("vue").DefineComponent<{
     badge?: string | number | undefined;
     iconPrefix?: string | undefined;
     icon?: string | undefined;
+    badgeProps?: Partial<{
+        dot?: unknown;
+        max?: unknown;
+        tag?: unknown;
+        color?: unknown;
+        offset?: unknown;
+        content?: unknown;
+        showZero?: unknown;
+        position?: unknown;
+    } & {
+        dot: boolean;
+        tag: keyof HTMLElementTagNameMap;
+        showZero: boolean;
+        position: import("../badge").BadgePosition;
+    } & {
+        color?: string | undefined;
+        max?: string | number | undefined;
+        offset?: [string | number, string | number] | undefined;
+        content?: string | number | undefined;
+    }> | undefined;
 }> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {

package/es/tabbar-item/TabbarItem.js

@@ -1,4 +1,4 @@
-import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 import { computed, defineComponent, getCurrentInstance } from 'vue'; // Utils
 
 import { createNamespace, extend, isObject, numericProp } from '../utils';
@@ -15,6 +15,7 @@ var tabbarItemProps = extend({}, routeProps, {
   icon: String,
   name: numericProp,
   badge: numericProp,
+  badgeProps: Object,
   iconPrefix: String
 });
 export default defineComponent({
@@ -116,11 +117,11 @@ export default defineComponent({
         "tabindex": 0,
         "aria-selected": active.value,
         "onClick": onClick
-      }, [_createVNode(Badge, {
+      }, [_createVNode(Badge, _mergeProps({
         "dot": dot,
-        "content": badge,
-        "class": bem('icon')
-      }, {
+        "class": bem('icon'),
+        "content": badge
+      }, props.badgeProps), {
         default: renderIcon
       }), _createVNode("div", {
         "class": bem('text')

package/es/tabbar-item/index.d.ts

@@ -7,8 +7,28 @@ export declare const TabbarItem: import("../utils").WithInstall<import("vue").De
     icon: StringConstructor;
     name: (NumberConstructor | StringConstructor)[];
     badge: (NumberConstructor | StringConstructor)[];
+    badgeProps: import("vue").PropType<Partial<{
+        dot?: unknown;
+        max?: unknown;
+        tag?: unknown;
+        color?: unknown;
+        offset?: unknown;
+        content?: unknown;
+        showZero?: unknown;
+        position?: unknown;
+    } & {
+        dot: boolean;
+        tag: keyof HTMLElementTagNameMap;
+        showZero: boolean;
+        position: import("..").BadgePosition;
+    } & {
+        color?: string | undefined;
+        max?: string | number | undefined;
+        offset?: [string | number, string | number] | undefined;
+        content?: string | number | undefined;
+    }>>;
     iconPrefix: StringConstructor;
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     to?: unknown;
     url?: unknown;
     replace?: unknown;
@@ -16,6 +36,7 @@ export declare const TabbarItem: import("../utils").WithInstall<import("vue").De
     icon?: unknown;
     name?: unknown;
     badge?: unknown;
+    badgeProps?: unknown;
     iconPrefix?: unknown;
 } & {
     replace: boolean;
@@ -27,6 +48,26 @@ export declare const TabbarItem: import("../utils").WithInstall<import("vue").De
     badge?: string | number | undefined;
     iconPrefix?: string | undefined;
     icon?: string | undefined;
+    badgeProps?: Partial<{
+        dot?: unknown;
+        max?: unknown;
+        tag?: unknown;
+        color?: unknown;
+        offset?: unknown;
+        content?: unknown;
+        showZero?: unknown;
+        position?: unknown;
+    } & {
+        dot: boolean;
+        tag: keyof HTMLElementTagNameMap;
+        showZero: boolean;
+        position: import("..").BadgePosition;
+    } & {
+        color?: string | undefined;
+        max?: string | number | undefined;
+        offset?: [string | number, string | number] | undefined;
+        content?: string | number | undefined;
+    }> | undefined;
 }> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
@@ -35,3 +76,8 @@ export declare const TabbarItem: import("../utils").WithInstall<import("vue").De
 }>>;
 export default TabbarItem;
 export type { TabbarItemProps } from './TabbarItem';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanTabbarItem: typeof TabbarItem;
+    }
+}

package/es/tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
+import { type PropType, type InjectionKey, type ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 import type { TabsProvide, TabsType } from './types';
 declare const tabsProps: {
@@ -9,6 +9,7 @@ declare const tabsProps: {
     color: StringConstructor;
     border: BooleanConstructor;
     sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -53,6 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     color: StringConstructor;
     border: BooleanConstructor;
     sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -86,11 +88,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     type?: unknown;
     color?: unknown;
     border?: unknown;
     sticky?: unknown;
+    shrink?: unknown;
     active?: unknown;
     duration?: unknown;
     animated?: unknown;
@@ -115,6 +118,7 @@ declare const _default: import("vue").DefineComponent<{
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
+    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
     scrollspy: boolean;
@@ -144,6 +148,7 @@ declare const _default: import("vue").DefineComponent<{
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
+    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
     scrollspy: boolean;

package/es/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent, getCurrentInstance } from 'vue'; // Utils
 
 import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from '../utils';
@@ -21,6 +21,7 @@ var tabsProps = {
   color: String,
   border: Boolean,
   sticky: Boolean,
+  shrink: Boolean,
   active: makeNumericProp(0),
   duration: makeNumericProp(0.3),
   animated: Boolean,
@@ -83,7 +84,7 @@ export default defineComponent({
       currentIndex: -1
     }); // whether the nav is scrollable
 
-    var scrollable = computed(() => children.length > props.swipeThreshold || !props.ellipsis);
+    var scrollable = computed(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
     var navStyle = computed(() => ({
       borderColor: props.color,
       background: props.background
@@ -292,14 +293,25 @@ export default defineComponent({
       "color": props.color,
       "style": item.titleStyle,
       "class": item.titleClass,
+      "shrink": props.shrink,
       "isActive": index === state.currentIndex,
       "controls": item.id,
       "scrollable": scrollable.value,
-      "renderTitle": item.$slots.title,
       "activeColor": props.titleActiveColor,
       "inactiveColor": props.titleInactiveColor,
       "onClick": event => onClickTab(item, index, event)
-    }, pick(item, ['dot', 'badge', 'title', 'disabled', 'showZeroBadge'])), null));
+    }, pick(item, ['dot', 'badge', 'title', 'disabled', 'showZeroBadge'])), {
+      title: item.$slots.title
+    }));
+
+    var renderLine = () => {
+      if (props.type === 'line' && children.length) {
+        return _createVNode("div", {
+          "class": bem('line'),
+          "style": state.lineStyle
+        }, null);
+      }
+    };
 
     var renderHeader = () => {
       var _slots$navLeft, _slots$navRight;
@@ -310,23 +322,19 @@ export default defineComponent({
       } = props;
       return _createVNode("div", {
         "ref": wrapRef,
-        "class": [bem('wrap', {
-          scrollable: scrollable.value
-        }), {
+        "class": [bem('wrap'), {
           [BORDER_TOP_BOTTOM]: type === 'line' && border
         }]
       }, [_createVNode("div", {
         "ref": navRef,
         "role": "tablist",
         "class": bem('nav', [type, {
+          shrink: props.shrink,
           complete: scrollable.value
         }]),
         "style": navStyle.value,
         "aria-orientation": "horizontal"
-      }, [(_slots$navLeft = slots['nav-left']) == null ? void 0 : _slots$navLeft.call(slots), renderNav(), type === 'line' && _createVNode("div", {
-        "class": bem('line'),
-        "style": state.lineStyle
-      }, null), (_slots$navRight = slots['nav-right']) == null ? void 0 : _slots$navRight.call(slots)])]);
+      }, [(_slots$navLeft = slots['nav-left']) == null ? void 0 : _slots$navLeft.call(slots), renderNav(), renderLine(), (_slots$navRight = slots['nav-right']) == null ? void 0 : _slots$navRight.call(slots)])]);
     };
 
     watch([() => props.color, windowWidth], setLine);

package/es/tabs/TabsContent.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     count?: unknown;
     inited?: unknown;
     animated?: unknown;

package/es/tabs/TabsTitle.d.ts

@@ -5,51 +5,52 @@ declare const _default: import("vue").DefineComponent<{
     color: StringConstructor;
     title: StringConstructor;
     badge: (NumberConstructor | StringConstructor)[];
+    shrink: BooleanConstructor;
     isActive: BooleanConstructor;
     disabled: BooleanConstructor;
     controls: StringConstructor;
     scrollable: BooleanConstructor;
     activeColor: StringConstructor;
-    renderTitle: FunctionConstructor;
     inactiveColor: StringConstructor;
     showZeroBadge: {
         type: BooleanConstructor;
         default: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     id?: unknown;
     dot?: unknown;
     type?: unknown;
     color?: unknown;
     title?: unknown;
     badge?: unknown;
+    shrink?: unknown;
     isActive?: unknown;
     disabled?: unknown;
     controls?: unknown;
     scrollable?: unknown;
     activeColor?: unknown;
-    renderTitle?: unknown;
     inactiveColor?: unknown;
     showZeroBadge?: unknown;
 } & {
     dot: boolean;
     disabled: boolean;
+    shrink: boolean;
     isActive: boolean;
     scrollable: boolean;
     showZeroBadge: boolean;
 } & {
+    color?: string | undefined;
     type?: string | undefined;
     badge?: string | number | undefined;
     title?: string | undefined;
-    color?: string | undefined;
     controls?: string | undefined;
     id?: string | undefined;
     activeColor?: string | undefined;
     inactiveColor?: string | undefined;
-    renderTitle?: Function | undefined;
 }>, {
     dot: boolean;
     disabled: boolean;
+    shrink: boolean;
     isActive: boolean;
     scrollable: boolean;
     showZeroBadge: boolean;

package/es/tabs/TabsTitle.js

@@ -12,17 +12,20 @@ export default defineComponent({
     color: String,
     title: String,
     badge: numericProp,
+    shrink: Boolean,
     isActive: Boolean,
     disabled: Boolean,
     controls: String,
     scrollable: Boolean,
     activeColor: String,
-    renderTitle: Function,
     inactiveColor: String,
     showZeroBadge: truthProp
   },
 
-  setup(props) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var style = computed(() => {
       var style = {};
       var {
@@ -61,7 +64,7 @@ export default defineComponent({
         "class": bem('text', {
           ellipsis: !props.scrollable
         })
-      }, [props.renderTitle ? props.renderTitle() : props.title]);
+      }, [slots.title ? slots.title() : props.title]);
 
       if (props.dot || isDef(props.badge) && props.badge !== '') {
         return _createVNode(Badge, {
@@ -79,10 +82,12 @@ export default defineComponent({
     return () => _createVNode("div", {
       "id": props.id,
       "role": "tab",
-      "class": [bem({
+      "class": [bem([props.type, {
+        grow: props.scrollable && !props.shrink,
+        shrink: props.shrink,
         active: props.isActive,
         disabled: props.disabled
-      })],
+      }])],
       "style": style.value,
       "tabindex": props.disabled ? undefined : props.isActive ? 0 : -1,
       "aria-selected": props.isActive,

package/es/tabs/index.css

@@ -1 +1 @@
-:root{--van-tab-text-color:var(--van-gray-7);--van-tab-active-text-color:var(--van-text-color);--van-tab-disabled-text-color:var(--van-text-color-3);--van-tab-font-size:var(--van-font-size-md);--van-tab-line-height:var(--van-line-height-md);--van-tabs-default-color:var(--van-danger-color);--van-tabs-line-height:44px;--van-tabs-card-height:30px;--van-tabs-nav-background-color:var(--van-background-color-light);--van-tabs-bottom-bar-width:40px;--van-tabs-bottom-bar-height:3px;--van-tabs-bottom-bar-color:var(--van-danger-color)}.van-tab{position:relative;display:flex;flex:1;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--van-padding-base);color:var(--van-tab-text-color);font-size:var(--van-tab-font-size);line-height:var(--van-tab-line-height);cursor:pointer}.van-tab--active{color:var(--van-tab-active-text-color);font-weight:var(--van-font-weight-bold)}.van-tab--disabled{color:var(--van-tab-disabled-text-color);cursor:not-allowed}.van-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.van-tabs{position:relative}.van-tabs__wrap{overflow:hidden}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__wrap--scrollable .van-tab{flex:1 0 auto;padding:0 var(--van-padding-sm)}.van-tabs__wrap--scrollable .van-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-tabs__wrap--scrollable .van-tabs__nav::-webkit-scrollbar{display:none}.van-tabs__nav{position:relative;display:flex;background:var(--van-tabs-nav-background-color);-webkit-user-select:none;user-select:none}.van-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.van-tabs__nav--line.van-tabs__nav--complete{padding-right:var(--van-padding-xs);padding-left:var(--van-padding-xs)}.van-tabs__nav--card{box-sizing:border-box;height:var(--van-tabs-card-height);margin:0 var(--van-padding-md);border:var(--van-border-width-base) solid var(--van-tabs-default-color);border-radius:var(--van-border-radius-sm)}.van-tabs__nav--card .van-tab{color:var(--van-tabs-default-color);border-right:var(--van-border-width-base) solid var(--van-tabs-default-color)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:var(--van-white);background-color:var(--van-tabs-default-color)}.van-tabs__nav--card .van-tab--disabled{color:var(--van-tab-disabled-text-color)}.van-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:var(--van-tabs-bottom-bar-width);height:var(--van-tabs-bottom-bar-height);background:var(--van-tabs-bottom-bar-color);border-radius:var(--van-tabs-bottom-bar-height)}.van-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.van-tabs__content--animated{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:var(--van-tabs-line-height)}.van-tabs--card>.van-tabs__wrap{height:var(--van-tabs-card-height)}
+:root{--van-tab-text-color:var(--van-gray-7);--van-tab-active-text-color:var(--van-text-color);--van-tab-disabled-text-color:var(--van-text-color-3);--van-tab-font-size:var(--van-font-size-md);--van-tab-line-height:var(--van-line-height-md);--van-tabs-default-color:var(--van-danger-color);--van-tabs-line-height:44px;--van-tabs-card-height:30px;--van-tabs-nav-background-color:var(--van-background-color-light);--van-tabs-bottom-bar-width:40px;--van-tabs-bottom-bar-height:3px;--van-tabs-bottom-bar-color:var(--van-danger-color)}.van-tab{position:relative;display:flex;flex:1;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--van-padding-base);color:var(--van-tab-text-color);font-size:var(--van-tab-font-size);line-height:var(--van-tab-line-height);cursor:pointer}.van-tab--active{color:var(--van-tab-active-text-color);font-weight:var(--van-font-weight-bold)}.van-tab--disabled{color:var(--van-tab-disabled-text-color);cursor:not-allowed}.van-tab--grow{flex:1 0 auto;padding:0 var(--van-padding-sm)}.van-tab--shrink{flex:none;padding:0 var(--van-padding-xs)}.van-tab--card{color:var(--van-tabs-default-color);border-right:var(--van-border-width-base) solid var(--van-tabs-default-color)}.van-tab--card:last-child{border-right:none}.van-tab--card.van-tab--active{color:var(--van-white);background-color:var(--van-tabs-default-color)}.van-tab--card--disabled{color:var(--van-tab-disabled-text-color)}.van-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.van-tabs{position:relative}.van-tabs__wrap{overflow:hidden}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__nav{position:relative;display:flex;background:var(--van-tabs-nav-background-color);-webkit-user-select:none;user-select:none}.van-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-tabs__nav--complete::-webkit-scrollbar{display:none}.van-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.van-tabs__nav--line.van-tabs__nav--complete,.van-tabs__nav--line.van-tabs__nav--shrink{padding-right:var(--van-padding-xs);padding-left:var(--van-padding-xs)}.van-tabs__nav--card{box-sizing:border-box;height:var(--van-tabs-card-height);margin:0 var(--van-padding-md);border:var(--van-border-width-base) solid var(--van-tabs-default-color);border-radius:var(--van-border-radius-sm)}.van-tabs__nav--card.van-tabs__nav--shrink{display:inline-flex}.van-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:var(--van-tabs-bottom-bar-width);height:var(--van-tabs-bottom-bar-height);background:var(--van-tabs-bottom-bar-color);border-radius:var(--van-tabs-bottom-bar-height)}.van-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.van-tabs__content--animated{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:var(--van-tabs-line-height)}.van-tabs--card>.van-tabs__wrap{height:var(--van-tabs-card-height)}

package/es/tabs/index.d.ts

@@ -7,6 +7,7 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     color: StringConstructor;
     border: BooleanConstructor;
     sticky: BooleanConstructor;
+    shrink: BooleanConstructor;
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -40,11 +41,12 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     };
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active")[], "scroll" | "disabled" | "click" | "change" | "rendered" | "click-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     type?: unknown;
     color?: unknown;
     border?: unknown;
     sticky?: unknown;
+    shrink?: unknown;
     active?: unknown;
     duration?: unknown;
     animated?: unknown;
@@ -69,6 +71,7 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
+    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
     scrollspy: boolean;
@@ -98,6 +101,7 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
+    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
     scrollspy: boolean;
@@ -106,3 +110,8 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
 export default Tabs;
 export type { TabsProps };
 export type { TabsType, TabsInstance } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanTabs: typeof Tabs;
+    }
+}