vant 3.2.8 → 3.3.3-beta.nuxt3

package/lib/tab/Tab.js

@@ -11,6 +11,10 @@ var _Tabs = require("../tabs/Tabs");
 
 var _use = require("@vant/use");
 
+var _useId = require("../composables/use-id");
+
+var _useExpose = require("../composables/use-expose");
+
 var _useRoute = require("../composables/use-route");
 
 var _useTabStatus = require("../composables/use-tab-status");
@@ -40,6 +44,7 @@ var _default = (0, _vue.defineComponent)({
     var {
       slots
     } = _ref;
+    var id = (0, _useId.useId)();
     var inited = (0, _vue.ref)(false);
     var {
       parent,
@@ -85,6 +90,7 @@ var _default = (0, _vue.defineComponent)({
     });
     (0, _vue.provide)(_useTabStatus.TAB_STATUS_KEY, active);
     return () => {
+      var label = parent.id + "-" + index.value;
       var {
         animated,
         swipeable,
@@ -100,23 +106,32 @@ var _default = (0, _vue.defineComponent)({
 
       if (animated || swipeable) {
         return (0, _vue.createVNode)(_swipeItem.SwipeItem, {
+          "id": id,
           "role": "tabpanel",
-          "aria-hidden": !active.value,
-          "class": bem('pane-wrapper', {
+          "class": bem('panel-wrapper', {
             inactive: !active.value
-          })
+          }),
+          "tabindex": active.value ? 0 : -1,
+          "aria-hidden": !active.value,
+          "aria-labelledby": label
         }, {
           default: () => [(0, _vue.createVNode)("div", {
-            "class": bem('pane')
+            "class": bem('panel')
           }, [slots.default == null ? void 0 : slots.default()])]
         });
       }
 
       var shouldRender = inited.value || scrollspy || !lazyRender;
       var Content = shouldRender ? slots.default == null ? void 0 : slots.default() : null;
+      (0, _useExpose.useExpose)({
+        id
+      });
       return (0, _vue.withDirectives)((0, _vue.createVNode)("div", {
+        "id": id,
         "role": "tabpanel",
-        "class": bem('pane')
+        "class": bem('panel'),
+        "tabindex": show ? 0 : -1,
+        "aria-labelledby": label
       }, [Content]), [[_vue.vShow, show]]);
     };
   }

package/lib/tab/index.css

@@ -1 +1 @@
-.van-tab__pane,.van-tab__pane-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.van-tab__pane-wrapper--inactive{height:0;overflow:visible}
+.van-tab__panel,.van-tab__panel-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.van-tab__panel-wrapper--inactive{height:0;overflow:visible}

package/lib/tab/index.less

@@ -1,5 +1,5 @@
 .van-tab {
-  &__pane {
+  &__panel {
     &,
     &-wrapper {
       flex-shrink: 0;

package/lib/tabbar/Tabbar.d.ts

@@ -27,7 +27,7 @@ declare const tabbarProps: {
 export declare type TabbarProps = ExtractPropTypes<typeof tabbarProps>;
 export declare type TabbarProvide = {
     props: TabbarProps;
-    setActive: (active: number | string) => void;
+    setActive: (active: number | string, afterChange: () => void) => void;
 };
 export declare const TABBAR_KEY: InjectionKey<TabbarProvide>;
 declare const _default: import("vue").DefineComponent<{

package/lib/tabbar/Tabbar.js

@@ -62,6 +62,7 @@ var _default = (0, _vue.defineComponent)({
       } = props;
       return (0, _vue.createVNode)("div", {
         "ref": root,
+        "role": "tablist",
         "style": (0, _utils.getZIndexStyle)(zIndex),
         "class": [bem({
           fixed
@@ -72,18 +73,17 @@ var _default = (0, _vue.defineComponent)({
       }, [slots.default == null ? void 0 : slots.default()]);
     };
 
-    var setActive = active => {
-      if (active !== props.modelValue) {
-        (0, _utils.callInterceptor)(props.beforeChange, {
-          args: [active],
+    var setActive = (active, afterChange) => {
+      (0, _utils.callInterceptor)(props.beforeChange, {
+        args: [active],
 
-          done() {
-            emit('update:modelValue', active);
-            emit('change', active);
-          }
+        done() {
+          emit('update:modelValue', active);
+          emit('change', active);
+          afterChange();
+        }
 
-        });
-      }
+      });
     };
 
     linkChildren({

package/lib/tabbar-item/TabbarItem.js

@@ -55,6 +55,8 @@ var _default = (0, _vue.defineComponent)({
     }
 
     var active = (0, _vue.computed)(() => {
+      var _props$name;
+
       var {
         route,
         modelValue
@@ -70,20 +72,24 @@ var _default = (0, _vue.defineComponent)({
         var config = (0, _utils.isObject)(to) ? to : {
           path: to
         };
-        var pathMatched = 'path' in config && config.path === $route.path;
-        var nameMatched = 'name' in config && config.name === $route.name;
-        return pathMatched || nameMatched;
+        return !!$route.matched.find(val => {
+          var pathMatched = 'path' in config && config.path === val.path;
+          var nameMatched = 'name' in config && config.name === val.name;
+          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 = () => {
@@ -112,12 +118,15 @@ 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,

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");
@@ -86,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 {
@@ -303,12 +305,14 @@ 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,
@@ -336,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);
@@ -393,6 +398,7 @@ var _default = (0, _vue.defineComponent)({
       target: scroller
     });
     linkChildren({
+      id,
       props,
       setLine,
       onRendered,

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/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/uploader/UploaderPreviewItem.js

@@ -80,7 +80,10 @@ var _default = (0, _vue.defineComponent)({
     var renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== 'uploading') {
         return (0, _vue.createVNode)("div", {
+          "role": "button",
           "class": (0, _utils.bem)('preview-delete'),
+          "tabindex": 0,
+          "aria-label": (0, _utils.t)('delete'),
           "onClick": onDelete
         }, [(0, _vue.createVNode)(_icon.Icon, {
           "name": "cross",

package/lib/uploader/utils.d.ts

@@ -1,6 +1,6 @@
 import type { UploaderMaxSize, UploaderResultType, UploaderFileListItem } from './types';
-declare const name: string, bem: (el?: import("../utils").Mods | undefined, mods?: import("../utils").Mods | undefined) => import("../utils").Mods;
-export { name, bem };
+declare const name: string, bem: (el?: import("../utils").Mods | undefined, mods?: import("../utils").Mods | undefined) => import("../utils").Mods, t: (path: string, ...args: unknown[]) => any;
+export { name, bem, t };
 export declare const toArray: <T>(item: T | T[]) => T[];
 export declare function readFileContent(file: File, resultType: UploaderResultType): Promise<string | void>;
 export declare function isOversize(items: UploaderFileListItem | UploaderFileListItem[], maxSize: UploaderMaxSize): boolean;

package/lib/uploader/utils.js

@@ -8,11 +8,12 @@ exports.isImageUrl = void 0;
 exports.isOversize = isOversize;
 exports.name = void 0;
 exports.readFileContent = readFileContent;
-exports.toArray = void 0;
+exports.toArray = exports.t = void 0;
 
 var _utils = require("../utils");
 
-var [name, bem] = (0, _utils.createNamespace)('uploader');
+var [name, bem, t] = (0, _utils.createNamespace)('uploader');
+exports.t = t;
 exports.bem = bem;
 exports.name = name;
 

package/lib/utils/dom.d.ts

@@ -9,3 +9,4 @@ export declare function resetScroll(): void;
 export declare const stopPropagation: (event: Event) => void;
 export declare function preventDefault(event: Event, isStopPropagation?: boolean): void;
 export declare function isHidden(elementRef: HTMLElement | Ref<HTMLElement | undefined>): boolean;
+export declare const windowWidth: Ref<number>, windowHeight: Ref<number>;

package/lib/utils/dom.js

@@ -9,7 +9,7 @@ exports.preventDefault = preventDefault;
 exports.resetScroll = resetScroll;
 exports.setRootScrollTop = setRootScrollTop;
 exports.setScrollTop = setScrollTop;
-exports.stopPropagation = void 0;
+exports.windowWidth = exports.windowHeight = exports.stopPropagation = void 0;
 
 var _use = require("@vant/use");
 
@@ -88,4 +88,11 @@ function isHidden(elementRef) {
 
   var parentHidden = el.offsetParent === null && style.position !== 'fixed';
   return hidden || parentHidden;
-}
+}
+
+var {
+  width: windowWidth,
+  height: windowHeight
+} = (0, _use.useWindowSize)();
+exports.windowHeight = windowHeight;
+exports.windowWidth = windowWidth;

package/lib/utils/format.js

@@ -13,14 +13,16 @@ exports.unitToPx = unitToPx;
 
 var _basic = require("./basic");
 
+var _dom = require("./dom");
+
 var _validate = require("./validate");
 
 function addUnit(value) {
-  if (!(0, _validate.isDef)(value)) {
-    return undefined;
+  if ((0, _validate.isDef)(value)) {
+    return (0, _validate.isNumeric)(value) ? value + "px" : String(value);
   }
 
-  return (0, _validate.isNumeric)(value) ? value + "px" : String(value);
+  return undefined;
 }
 
 function getSizeStyle(originSize) {
@@ -63,12 +65,12 @@ function convertRem(value) {
 
 function convertVw(value) {
   value = value.replace(/vw/g, '');
-  return +value * window.innerWidth / 100;
+  return +value * _dom.windowWidth.value / 100;
 }
 
 function convertVh(value) {
   value = value.replace(/vh/g, '');
-  return +value * window.innerHeight / 100;
+  return +value * _dom.windowHeight.value / 100;
 }
 
 function unitToPx(value) {