vant 3.2.5 → 3.3.0

package/lib/tabbar/index.less

@@ -12,7 +12,7 @@
   box-sizing: content-box;
   width: 100%;
   height: var(--van-tabbar-height);
-  background-color: var(--van-tabbar-background-color);
+  background: var(--van-tabbar-background-color);
 
   &--fixed {
     position: fixed;

package/lib/tabbar/var.less

@@ -2,4 +2,4 @@
 
 @tabbar-height: 50px;
 @tabbar-z-index: 1;
-@tabbar-background-color: var(--van-white);
+@tabbar-background-color: var(--van-background-color-light);

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

@@ -1,3 +1,16 @@
+import { ExtractPropTypes } from 'vue';
+declare const tabbarItemProps: {
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    icon: StringConstructor;
+    name: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    iconPrefix: StringConstructor;
+};
+export declare type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>;
 declare const _default: import("vue").DefineComponent<{
     to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;

package/lib/tabbar-item/TabbarItem.js

@@ -21,22 +21,24 @@ var _badge = require("../badge");
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('tabbar-item');
+var tabbarItemProps = (0, _utils.extend)({}, _useRoute.routeProps, {
+  dot: Boolean,
+  icon: String,
+  name: _utils.numericProp,
+  badge: _utils.numericProp,
+  iconPrefix: String
+});
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, _useRoute.routeProps, {
-    dot: Boolean,
-    icon: String,
-    name: _utils.numericProp,
-    badge: _utils.numericProp,
-    iconPrefix: String
-  }),
+  props: tabbarItemProps,
   emits: ['click'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var route = (0, _useRoute.useRoute)();
     var vm = (0, _vue.getCurrentInstance)().proxy;
     var {
@@ -53,6 +55,8 @@ var _default = (0, _vue.defineComponent)({
     }
 
     var active = (0, _vue.computed)(() => {
+      var _props$name;
+
       var {
         route,
         modelValue
@@ -73,15 +77,17 @@ var _default = (0, _vue.defineComponent)({
         return pathMatched || nameMatched;
       }
 
-      return (props.name || index.value) === modelValue;
+      return ((_props$name = props.name) != null ? _props$name : index.value) === modelValue;
     });
 
     var onClick = event => {
-      var _props$name;
+      if (!active.value) {
+        var _props$name2;
+
+        parent.setActive((_props$name2 = props.name) != null ? _props$name2 : index.value, route);
+      }
 
-      parent.setActive((_props$name = props.name) != null ? _props$name : index.value);
       emit('click', event);
-      route();
     };
 
     var renderIcon = () => {
@@ -110,19 +116,22 @@ var _default = (0, _vue.defineComponent)({
       } = parent.props;
       var color = active.value ? activeColor : inactiveColor;
       return (0, _vue.createVNode)("div", {
+        "role": "tab",
         "class": bem({
           active: active.value
         }),
         "style": {
           color
         },
+        "tabindex": 0,
+        "aria-selected": active.value,
         "onClick": onClick
       }, [(0, _vue.createVNode)(_badge.Badge, {
         "dot": dot,
         "content": badge,
         "class": bem('icon')
       }, {
-        default: () => [renderIcon()]
+        default: renderIcon
       }), (0, _vue.createVNode)("div", {
         "class": bem('text')
       }, [slots.default == null ? void 0 : slots.default({

package/lib/tabbar-item/index.css

@@ -1 +1 @@
-:root{--van-tabbar-item-font-size:var(--van-font-size-sm);--van-tabbar-item-text-color:var(--van-gray-7);--van-tabbar-item-active-color:var(--van-primary-color);--van-tabbar-item-active-background-color:var(--van-white);--van-tabbar-item-line-height:1;--van-tabbar-item-icon-size:22px;--van-tabbar-item-icon-margin-bottom:var(--van-padding-base)}.van-tabbar-item{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;color:var(--van-tabbar-item-text-color);font-size:var(--van-tabbar-item-font-size);line-height:var(--van-tabbar-item-line-height);cursor:pointer}.van-tabbar-item__icon{margin-bottom:var(--van-tabbar-item-icon-margin-bottom);font-size:var(--van-tabbar-item-icon-size)}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon .van-badge{margin-top:var(--van-padding-base)}.van-tabbar-item__icon img{display:block;height:20px}.van-tabbar-item--active{color:var(--van-tabbar-item-active-color);background-color:var(--van-tabbar-item-active-background-color)}
+:root{--van-tabbar-item-font-size:var(--van-font-size-sm);--van-tabbar-item-text-color:var(--van-gray-7);--van-tabbar-item-active-color:var(--van-primary-color);--van-tabbar-item-active-background-color:var(--van-background-color-light);--van-tabbar-item-line-height:1;--van-tabbar-item-icon-size:22px;--van-tabbar-item-icon-margin-bottom:var(--van-padding-base)}.van-tabbar-item{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;color:var(--van-tabbar-item-text-color);font-size:var(--van-tabbar-item-font-size);line-height:var(--van-tabbar-item-line-height);cursor:pointer}.van-tabbar-item__icon{margin-bottom:var(--van-tabbar-item-icon-margin-bottom);font-size:var(--van-tabbar-item-icon-size)}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon .van-badge{margin-top:var(--van-padding-base)}.van-tabbar-item__icon img{display:block;height:20px}.van-tabbar-item--active{color:var(--van-tabbar-item-active-color);background-color:var(--van-tabbar-item-active-background-color)}

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

@@ -34,3 +34,4 @@ export declare const TabbarItem: import("../utils").WithInstall<import("vue").De
     dot: boolean;
 }>>;
 export default TabbarItem;
+export type { TabbarItemProps } from './TabbarItem';

package/lib/tabbar-item/var.less

@@ -3,7 +3,7 @@
 @tabbar-item-font-size: var(--van-font-size-sm);
 @tabbar-item-text-color: var(--van-gray-7);
 @tabbar-item-active-color: var(--van-primary-color);
-@tabbar-item-active-background-color: var(--van-white);
+@tabbar-item-active-background-color: var(--van-background-color-light);
 @tabbar-item-line-height: 1;
 @tabbar-item-icon-size: 22px;
 @tabbar-item-icon-margin-bottom: var(--van-padding-base);

package/lib/tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 import type { TabsProvide, TabsType } from './types';
-declare const props: {
+declare const tabsProps: {
     type: {
         type: PropType<TabsType>;
         default: TabsType;
@@ -43,7 +43,7 @@ declare const props: {
     titleActiveColor: StringConstructor;
     titleInactiveColor: StringConstructor;
 };
-export declare type TabsProps = ExtractPropTypes<typeof props>;
+export declare type TabsProps = ExtractPropTypes<typeof tabsProps>;
 export declare const TABS_KEY: InjectionKey<TabsProvide>;
 declare const _default: import("vue").DefineComponent<{
     type: {

package/lib/tabs/Tabs.js

@@ -11,6 +11,8 @@ var _utils2 = require("./utils");
 
 var _use = require("@vant/use");
 
+var _useId = require("../composables/use-id");
+
 var _useRoute = require("../composables/use-route");
 
 var _useRefs = require("../composables/use-refs");
@@ -31,7 +33,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('tabs');
-var props = {
+var tabsProps = {
   type: (0, _utils.makeStringProp)('line'),
   color: String,
   border: Boolean,
@@ -57,13 +59,15 @@ exports.TABS_KEY = TABS_KEY;
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: tabsProps,
   emits: ['click', 'change', 'scroll', 'disabled', 'rendered', 'click-tab', 'update:active'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
+
     if (process.env.NODE_ENV !== 'production') {
       var _getCurrentInstance, _getCurrentInstance$v;
 
@@ -84,7 +88,7 @@ var _default = (0, _vue.defineComponent)({
     var root = (0, _vue.ref)();
     var navRef = (0, _vue.ref)();
     var wrapRef = (0, _vue.ref)();
-    var windowSize = (0, _use.useWindowSize)();
+    var id = (0, _useId.useId)();
     var scroller = (0, _use.useScrollParent)(root);
     var [titleRefs, setTitleRefs] = (0, _useRefs.useRefs)();
     var {
@@ -215,7 +219,11 @@ var _default = (0, _vue.defineComponent)({
       setCurrentIndex(index);
     };
 
-    var scrollToCurrentContent = (immediate = false) => {
+    var scrollToCurrentContent = function (immediate) {
+      if (immediate === void 0) {
+        immediate = false;
+      }
+
       if (props.scrollspy) {
         var target = children[state.currentIndex].$el;
 
@@ -236,20 +244,13 @@ var _default = (0, _vue.defineComponent)({
         disabled
       } = children[index];
       var name = getTabName(children[index], index);
-      emit('click-tab', {
-        name,
-        title,
-        event,
-        disabled
-      });
 
       if (disabled) {
         // @deprecated
         // should be removed in next major version
         emit('disabled', name, title);
       } else {
-        (0, _utils.callInterceptor)({
-          interceptor: props.beforeChange,
+        (0, _utils.callInterceptor)(props.beforeChange, {
           args: [name],
           done: () => {
             setCurrentIndex(index);
@@ -261,6 +262,13 @@ var _default = (0, _vue.defineComponent)({
         emit('click', name, title);
         (0, _useRoute.route)(item);
       }
+
+      emit('click-tab', {
+        name,
+        title,
+        event,
+        disabled
+      });
     };
 
     var onStickyScroll = params => {
@@ -297,19 +305,19 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var renderNav = () => children.map((item, index) => (0, _vue.createVNode)(_TabsTitle.default, (0, _vue.mergeProps)({
+      "id": id + "-" + index,
       "ref": setTitleRefs(index),
       "type": props.type,
       "color": props.color,
       "style": item.titleStyle,
       "class": item.titleClass,
       "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);
-      }
+      "onClick": event => onClickTab(item, index, event)
     }, (0, _utils.pick)(item, ['dot', 'badge', 'title', 'disabled', 'showZeroBadge'])), null));
 
     var renderHeader = () => {
@@ -332,14 +340,15 @@ var _default = (0, _vue.defineComponent)({
         "class": bem('nav', [type, {
           complete: scrollable.value
         }]),
-        "style": navStyle.value
+        "style": navStyle.value,
+        "aria-orientation": "horizontal"
       }, [(_slots$navLeft = slots['nav-left']) == null ? void 0 : _slots$navLeft.call(slots), renderNav(), type === 'line' && (0, _vue.createVNode)("div", {
         "class": bem('line'),
         "style": state.lineStyle
       }, null), (_slots$navRight = slots['nav-right']) == null ? void 0 : _slots$navRight.call(slots)])]);
     };
 
-    (0, _vue.watch)([() => props.color, windowSize.width], setLine);
+    (0, _vue.watch)([() => props.color, _utils.windowWidth], setLine);
     (0, _vue.watch)(() => props.active, value => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
@@ -389,6 +398,7 @@ var _default = (0, _vue.defineComponent)({
       target: scroller
     });
     linkChildren({
+      id,
       props,
       setLine,
       onRendered,

package/lib/tabs/TabsContent.js

@@ -24,10 +24,11 @@ var _default = (0, _vue.defineComponent)({
   },
   emits: ['change'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var swipeRef = (0, _vue.ref)();
 
     var onChange = index => emit('change', index);

package/lib/tabs/TabsTitle.d.ts

@@ -1,4 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
+    id: StringConstructor;
     dot: BooleanConstructor;
     type: StringConstructor;
     color: StringConstructor;
@@ -6,6 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     badge: (NumberConstructor | StringConstructor)[];
     isActive: BooleanConstructor;
     disabled: BooleanConstructor;
+    controls: StringConstructor;
     scrollable: BooleanConstructor;
     activeColor: StringConstructor;
     renderTitle: FunctionConstructor;
@@ -15,6 +17,7 @@ declare const _default: import("vue").DefineComponent<{
         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<{
+    id?: unknown;
     dot?: unknown;
     type?: unknown;
     color?: unknown;
@@ -22,6 +25,7 @@ declare const _default: import("vue").DefineComponent<{
     badge?: unknown;
     isActive?: unknown;
     disabled?: unknown;
+    controls?: unknown;
     scrollable?: unknown;
     activeColor?: unknown;
     renderTitle?: unknown;
@@ -38,6 +42,8 @@ declare const _default: import("vue").DefineComponent<{
     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;

package/lib/tabs/TabsTitle.js

@@ -14,6 +14,7 @@ var [name, bem] = (0, _utils.createNamespace)('tab');
 var _default = (0, _vue.defineComponent)({
   name,
   props: {
+    id: String,
     dot: Boolean,
     type: String,
     color: String,
@@ -21,6 +22,7 @@ var _default = (0, _vue.defineComponent)({
     badge: _utils.numericProp,
     isActive: Boolean,
     disabled: Boolean,
+    controls: String,
     scrollable: Boolean,
     activeColor: String,
     renderTitle: Function,
@@ -83,13 +85,17 @@ var _default = (0, _vue.defineComponent)({
     };
 
     return () => (0, _vue.createVNode)("div", {
+      "id": props.id,
       "role": "tab",
       "class": [bem({
         active: props.isActive,
         disabled: props.disabled
       })],
       "style": style.value,
-      "aria-selected": props.isActive
+      "tabindex": props.disabled ? undefined : props.isActive ? 0 : -1,
+      "aria-selected": props.isActive,
+      "aria-disabled": props.disabled || undefined,
+      "aria-controls": props.controls
     }, [renderText()]);
   }
 

package/lib/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-gray-5);--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-white);--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-color: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-color: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__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)}

package/lib/tabs/index.less

@@ -84,7 +84,7 @@
   &__nav {
     position: relative;
     display: flex;
-    background-color: var(--van-tabs-nav-background-color);
+    background: var(--van-tabs-nav-background-color);
     user-select: none;
 
     &--line {
@@ -133,7 +133,7 @@
     z-index: 1;
     width: var(--van-tabs-bottom-bar-width);
     height: var(--van-tabs-bottom-bar-height);
-    background-color: var(--van-tabs-bottom-bar-color);
+    background: var(--van-tabs-bottom-bar-color);
     border-radius: var(--van-tabs-bottom-bar-height);
   }
 

package/lib/tabs/types.d.ts

@@ -8,6 +8,7 @@ export declare type TabsClickTabEventParams = {
     disabled: boolean;
 };
 export declare type TabsProvide = {
+    id: string;
     props: TabsProps;
     setLine: () => void;
     onRendered: (name: string | number, title?: string) => void;

package/lib/tabs/var.less

@@ -2,13 +2,13 @@
 
 @tab-text-color: var(--van-gray-7);
 @tab-active-text-color: var(--van-text-color);
-@tab-disabled-text-color: var(--van-gray-5);
+@tab-disabled-text-color: var(--van-text-color-3);
 @tab-font-size: var(--van-font-size-md);
 @tab-line-height: var(--van-line-height-md);
 @tabs-default-color: var(--van-danger-color);
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
-@tabs-nav-background-color: var(--van-white);
+@tabs-nav-background-color: var(--van-background-color-light);
 @tabs-bottom-bar-width: 40px;
 @tabs-bottom-bar-height: 3px;
 @tabs-bottom-bar-color: @tabs-default-color;

package/lib/tag/Tag.d.ts

@@ -1,13 +1,33 @@
+import { PropType, ExtractPropTypes } from 'vue';
+export declare type TagSize = 'large' | 'medium';
 export declare type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+declare const tagProps: {
+    size: PropType<TagSize>;
+    mark: BooleanConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    type: {
+        type: PropType<TagType>;
+        default: TagType;
+    };
+    color: StringConstructor;
+    plain: BooleanConstructor;
+    round: BooleanConstructor;
+    textColor: StringConstructor;
+    closeable: BooleanConstructor;
+};
+export declare type TagProps = ExtractPropTypes<typeof tagProps>;
 declare const _default: import("vue").DefineComponent<{
-    size: StringConstructor;
+    size: PropType<TagSize>;
     mark: BooleanConstructor;
     show: {
         type: BooleanConstructor;
         default: true;
     };
     type: {
-        type: import("vue").PropType<TagType>;
+        type: PropType<TagType>;
         default: TagType;
     };
     color: StringConstructor;
@@ -34,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     closeable: boolean;
 } & {
     color?: string | undefined;
-    size?: string | undefined;
+    size?: TagSize | undefined;
     textColor?: string | undefined;
 }> & {
     onClose?: ((...args: any[]) => any) | undefined;

package/lib/tag/Tag.js

@@ -10,26 +10,29 @@ var _utils = require("../utils");
 var _icon = require("../icon");
 
 var [name, bem] = (0, _utils.createNamespace)('tag');
+var tagProps = {
+  size: String,
+  mark: Boolean,
+  show: _utils.truthProp,
+  type: (0, _utils.makeStringProp)('default'),
+  color: String,
+  plain: Boolean,
+  round: Boolean,
+  textColor: String,
+  closeable: Boolean
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    size: String,
-    mark: Boolean,
-    show: _utils.truthProp,
-    type: (0, _utils.makeStringProp)('default'),
-    color: String,
-    plain: Boolean,
-    round: Boolean,
-    textColor: String,
-    closeable: Boolean
-  },
+  props: tagProps,
   emits: ['close'],
 
-  setup(props, {
-    slots,
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      slots,
+      emit
+    } = _ref;
+
     var onClose = event => {
       event.stopPropagation();
       emit('close', event);

package/lib/tag/index.css

@@ -1 +1 @@
-:root{--van-tag-padding:0 var(--van-padding-base);--van-tag-text-color:var(--van-white);--van-tag-font-size:var(--van-font-size-sm);--van-tag-border-radius:2px;--van-tag-line-height:16px;--van-tag-medium-padding:2px 6px;--van-tag-large-padding:var(--van-padding-base) var(--van-padding-xs);--van-tag-large-border-radius:var(--van-border-radius-md);--van-tag-large-font-size:var(--van-font-size-md);--van-tag-round-border-radius:var(--van-border-radius-max);--van-tag-danger-color:var(--van-danger-color);--van-tag-primary-color:var(--van-primary-color);--van-tag-success-color:var(--van-success-color);--van-tag-warning-color:var(--van-warning-color);--van-tag-default-color:var(--van-gray-6);--van-tag-plain-background-color:var(--van-white)}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-border-radius)}.van-tag--default{background-color:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background-color:var(--van-tag-danger-color)}.van-tag--danger.van-tag--plain{color:var(--van-tag-danger-color)}.van-tag--primary{background-color:var(--van-tag-primary-color)}.van-tag--primary.van-tag--plain{color:var(--van-tag-primary-color)}.van-tag--success{background-color:var(--van-tag-success-color)}.van-tag--success.van-tag--plain{color:var(--van-tag-success-color)}.van-tag--warning{background-color:var(--van-tag-warning-color)}.van-tag--warning.van-tag--plain{color:var(--van-tag-warning-color)}.van-tag--plain{background-color:var(--van-tag-plain-background-color);border-color:currentColor}.van-tag--plain::before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:'';pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-border-radius)}.van-tag--mark{border-radius:0 var(--van-tag-round-border-radius) var(--van-tag-round-border-radius) 0}.van-tag--mark::after{display:block;width:2px;content:''}.van-tag--round{border-radius:var(--van-tag-round-border-radius)}.van-tag__close{margin-left:2px;cursor:pointer}
+:root{--van-tag-padding:0 var(--van-padding-base);--van-tag-text-color:var(--van-white);--van-tag-font-size:var(--van-font-size-sm);--van-tag-border-radius:2px;--van-tag-line-height:16px;--van-tag-medium-padding:2px 6px;--van-tag-large-padding:var(--van-padding-base) var(--van-padding-xs);--van-tag-large-border-radius:var(--van-border-radius-md);--van-tag-large-font-size:var(--van-font-size-md);--van-tag-round-border-radius:var(--van-border-radius-max);--van-tag-danger-color:var(--van-danger-color);--van-tag-primary-color:var(--van-primary-color);--van-tag-success-color:var(--van-success-color);--van-tag-warning-color:var(--van-warning-color);--van-tag-default-color:var(--van-gray-6);--van-tag-plain-background-color:var(--van-background-color-light)}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-border-radius)}.van-tag--default{background:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background:var(--van-tag-danger-color)}.van-tag--danger.van-tag--plain{color:var(--van-tag-danger-color)}.van-tag--primary{background:var(--van-tag-primary-color)}.van-tag--primary.van-tag--plain{color:var(--van-tag-primary-color)}.van-tag--success{background:var(--van-tag-success-color)}.van-tag--success.van-tag--plain{color:var(--van-tag-success-color)}.van-tag--warning{background:var(--van-tag-warning-color)}.van-tag--warning.van-tag--plain{color:var(--van-tag-warning-color)}.van-tag--plain{background:var(--van-tag-plain-background-color);border-color:currentColor}.van-tag--plain::before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:'';pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-border-radius)}.van-tag--mark{border-radius:0 var(--van-tag-round-border-radius) var(--van-tag-round-border-radius) 0}.van-tag--mark::after{display:block;width:2px;content:''}.van-tag--round{border-radius:var(--van-tag-round-border-radius)}.van-tag__close{margin-left:2px;cursor:pointer}

package/lib/tag/index.d.ts

@@ -1,5 +1,5 @@
 export declare const Tag: import("../utils").WithInstall<import("vue").DefineComponent<{
-    size: StringConstructor;
+    size: import("vue").PropType<import("./Tag").TagSize>;
     mark: BooleanConstructor;
     show: {
         type: BooleanConstructor;
@@ -33,7 +33,7 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
     closeable: boolean;
 } & {
     color?: string | undefined;
-    size?: string | undefined;
+    size?: import("./Tag").TagSize | undefined;
     textColor?: string | undefined;
 }> & {
     onClose?: ((...args: any[]) => any) | undefined;
@@ -46,3 +46,4 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
     closeable: boolean;
 }>>;
 export default Tag;
+export type { TagSize, TagType, TagProps } from './Tag';

package/lib/tag/index.less

@@ -30,7 +30,7 @@
   border-radius: var(--van-tag-border-radius);
 
   &--default {
-    background-color: var(--van-tag-default-color);
+    background: var(--van-tag-default-color);
 
     &.van-tag--plain {
       color: var(--van-tag-default-color);
@@ -38,7 +38,7 @@
   }
 
   &--danger {
-    background-color: var(--van-tag-danger-color);
+    background: var(--van-tag-danger-color);
 
     &.van-tag--plain {
       color: var(--van-tag-danger-color);
@@ -46,7 +46,7 @@
   }
 
   &--primary {
-    background-color: var(--van-tag-primary-color);
+    background: var(--van-tag-primary-color);
 
     &.van-tag--plain {
       color: var(--van-tag-primary-color);
@@ -54,7 +54,7 @@
   }
 
   &--success {
-    background-color: var(--van-tag-success-color);
+    background: var(--van-tag-success-color);
 
     &.van-tag--plain {
       color: var(--van-tag-success-color);
@@ -62,7 +62,7 @@
   }
 
   &--warning {
-    background-color: var(--van-tag-warning-color);
+    background: var(--van-tag-warning-color);
 
     &.van-tag--plain {
       color: var(--van-tag-warning-color);
@@ -70,7 +70,7 @@
   }
 
   &--plain {
-    background-color: var(--van-tag-plain-background-color);
+    background: var(--van-tag-plain-background-color);
     border-color: currentColor;
 
     &::before {

package/lib/tag/var.less

@@ -15,4 +15,4 @@
 @tag-success-color: var(--van-success-color);
 @tag-warning-color: var(--van-warning-color);
 @tag-default-color: var(--van-gray-6);
-@tag-plain-background-color: var(--van-white);
+@tag-plain-background-color: var(--van-background-color-light);