vant 3.2.8 → 3.3.3-beta.nuxt3

package/es/tab/Tab.js

@@ -5,6 +5,8 @@ import { extend, truthProp, unknownProp, numericProp, createNamespace } from '..
 import { TABS_KEY } from '../tabs/Tabs'; // Composables
 
 import { useParent } from '@vant/use';
+import { useId } from '../composables/use-id';
+import { useExpose } from '../composables/use-expose';
 import { routeProps } from '../composables/use-route';
 import { TAB_STATUS_KEY } from '../composables/use-tab-status'; // Components
 
@@ -28,6 +30,7 @@ export default defineComponent({
     var {
       slots
     } = _ref;
+    var id = useId();
     var inited = ref(false);
     var {
       parent,
@@ -73,6 +76,7 @@ export default defineComponent({
     });
     provide(TAB_STATUS_KEY, active);
     return () => {
+      var label = parent.id + "-" + index.value;
       var {
         animated,
         swipeable,
@@ -88,23 +92,32 @@ export default defineComponent({
 
       if (animated || swipeable) {
         return _createVNode(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: () => [_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;
+      useExpose({
+        id
+      });
       return _withDirectives(_createVNode("div", {
+        "id": id,
         "role": "tabpanel",
-        "class": bem('pane')
+        "class": bem('panel'),
+        "tabindex": show ? 0 : -1,
+        "aria-labelledby": label
       }, [Content]), [[_vShow, show]]);
     };
   }

package/es/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/es/tab/index.less

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

package/es/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/es/tabbar/Tabbar.js

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

package/es/tabbar-item/TabbarItem.js

@@ -43,6 +43,8 @@ export default defineComponent({
     }
 
     var active = computed(() => {
+      var _props$name;
+
       var {
         route,
         modelValue
@@ -58,20 +60,24 @@ export default defineComponent({
         var config = 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 = () => {
@@ -100,12 +106,15 @@ export default defineComponent({
       } = parent.props;
       var color = active.value ? activeColor : inactiveColor;
       return _createVNode("div", {
+        "role": "tab",
         "class": bem({
           active: active.value
         }),
         "style": {
           color
         },
+        "tabindex": 0,
+        "aria-selected": active.value,
         "onClick": onClick
       }, [_createVNode(Badge, {
         "dot": dot,

package/es/tabs/Tabs.js

@@ -1,10 +1,11 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent, getCurrentInstance } from 'vue'; // Utils
 
-import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from '../utils';
+import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from '../utils';
 import { scrollLeftTo, scrollTopTo } from './utils'; // Composables
 
-import { useRect, useChildren, useWindowSize, useScrollParent, useEventListener, onMountedOrActivated } from '@vant/use';
+import { useRect, useChildren, useScrollParent, useEventListener, onMountedOrActivated } from '@vant/use';
+import { useId } from '../composables/use-id';
 import { route } from '../composables/use-route';
 import { useRefs } from '../composables/use-refs';
 import { useExpose } from '../composables/use-expose';
@@ -68,7 +69,7 @@ export default defineComponent({
     var root = ref();
     var navRef = ref();
     var wrapRef = ref();
-    var windowSize = useWindowSize();
+    var id = useId();
     var scroller = useScrollParent(root);
     var [titleRefs, setTitleRefs] = useRefs();
     var {
@@ -285,12 +286,14 @@ export default defineComponent({
     };
 
     var renderNav = () => children.map((item, index) => _createVNode(TabsTitle, _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,
@@ -318,14 +321,15 @@ export default 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' && _createVNode("div", {
         "class": bem('line'),
         "style": state.lineStyle
       }, null), (_slots$navRight = slots['nav-right']) == null ? void 0 : _slots$navRight.call(slots)])]);
     };
 
-    watch([() => props.color, windowSize.width], setLine);
+    watch([() => props.color, windowWidth], setLine);
     watch(() => props.active, value => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
@@ -375,6 +379,7 @@ export default defineComponent({
       target: scroller
     });
     linkChildren({
+      id,
       props,
       setLine,
       onRendered,

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

@@ -6,6 +6,7 @@ var [name, bem] = createNamespace('tab');
 export default defineComponent({
   name,
   props: {
+    id: String,
     dot: Boolean,
     type: String,
     color: String,
@@ -13,6 +14,7 @@ export default defineComponent({
     badge: numericProp,
     isActive: Boolean,
     disabled: Boolean,
+    controls: String,
     scrollable: Boolean,
     activeColor: String,
     renderTitle: Function,
@@ -75,13 +77,17 @@ export default defineComponent({
     };
 
     return () => _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/es/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/es/uploader/UploaderPreviewItem.js

@@ -1,7 +1,7 @@
 import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue'; // Utils
 
-import { bem, isImageFile } from './utils';
+import { t, bem, isImageFile } from './utils';
 import { isDef, extend, numericProp, getSizeStyle, callInterceptor, makeRequiredProp } from '../utils'; // Components
 
 import { Icon } from '../icon';
@@ -71,7 +71,10 @@ export default defineComponent({
     var renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== 'uploading') {
         return _createVNode("div", {
+          "role": "button",
           "class": bem('preview-delete'),
+          "tabindex": 0,
+          "aria-label": t('delete'),
           "onClick": onDelete
         }, [_createVNode(Icon, {
           "name": "cross",

package/es/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/es/uploader/utils.js

@@ -1,6 +1,6 @@
 import { createNamespace, isFunction } from '../utils';
-var [name, bem] = createNamespace('uploader');
-export { name, bem };
+var [name, bem, t] = createNamespace('uploader');
+export { name, bem, t };
 export var toArray = item => Array.isArray(item) ? item : [item];
 export function readFileContent(file, resultType) {
   return new Promise(resolve => {

package/es/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/es/utils/dom.js

@@ -1,4 +1,4 @@
-import { useRect } from '@vant/use';
+import { useRect, useWindowSize } from '@vant/use';
 import { unref } from 'vue';
 import { isIOS as checkIsIOS } from './validate';
 export function getScrollTop(el) {
@@ -62,4 +62,8 @@ export function isHidden(elementRef) {
 
   var parentHidden = el.offsetParent === null && style.position !== 'fixed';
   return hidden || parentHidden;
-}
+}
+export var {
+  width: windowWidth,
+  height: windowHeight
+} = useWindowSize();

package/es/utils/format.js

@@ -1,11 +1,12 @@
 import { inBrowser } from './basic';
+import { windowWidth, windowHeight } from './dom';
 import { isDef, isNumeric } from './validate';
 export function addUnit(value) {
-  if (!isDef(value)) {
-    return undefined;
+  if (isDef(value)) {
+    return isNumeric(value) ? value + "px" : String(value);
   }
 
-  return isNumeric(value) ? value + "px" : String(value);
+  return undefined;
 }
 export function getSizeStyle(originSize) {
   if (isDef(originSize)) {
@@ -45,12 +46,12 @@ function convertRem(value) {
 
 function convertVw(value) {
   value = value.replace(/vw/g, '');
-  return +value * window.innerWidth / 100;
+  return +value * windowWidth.value / 100;
 }
 
 function convertVh(value) {
   value = value.replace(/vh/g, '');
-  return +value * window.innerHeight / 100;
+  return +value * windowHeight.value / 100;
 }
 
 export function unitToPx(value) {

package/es/vue-tsx-shim.d.ts

@@ -4,6 +4,7 @@ type EventHandler = (...args: any[]) => void;
 
 declare module 'vue' {
   interface ComponentCustomProps {
+    id?: string;
     role?: string;
     tabindex?: number;
     onClick?: EventHandler;