vant 3.2.8 → 3.3.0

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;