vant 3.2.8 → 3.3.3-beta.nuxt3

package/lib/cascader/Cascader.js

@@ -173,20 +173,27 @@ var _default = (0, _vue.defineComponent)({
     }, null) : null]);
 
     var renderOption = (option, selectedOption, tabIndex) => {
-      var selected = selectedOption && option[valueKey] === selectedOption[valueKey];
+      var {
+        disabled
+      } = option;
+      var selected = !!(selectedOption && option[valueKey] === selectedOption[valueKey]);
       var color = option.color || (selected ? props.activeColor : undefined);
       var Text = slots.option ? slots.option({
         option,
         selected
       }) : (0, _vue.createVNode)("span", null, [option[textKey]]);
       return (0, _vue.createVNode)("li", {
+        "role": "menuitemradio",
         "class": [bem('option', {
           selected,
-          disabled: option.disabled
+          disabled
         }), option.className],
         "style": {
           color
         },
+        "tabindex": disabled ? undefined : selected ? 0 : -1,
+        "aria-checked": selected,
+        "aria-disabled": disabled || undefined,
         "onClick": () => onSelect(option, tabIndex)
       }, [Text, selected ? (0, _vue.createVNode)(_icon.Icon, {
         "name": "success",
@@ -195,6 +202,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var renderOptions = (options, selectedOption, tabIndex) => (0, _vue.createVNode)("ul", {
+      "role": "menu",
       "class": bem('options')
     }, [options.map(option => renderOption(option, selectedOption, tabIndex))]);
 

package/lib/checkbox/Checker.js

@@ -114,7 +114,7 @@ var _default = (0, _vue.defineComponent)({
           disabled: disabled.value,
           'label-disabled': props.labelDisabled
         }, direction.value]),
-        "tabindex": disabled.value ? -1 : 0,
+        "tabindex": disabled.value ? undefined : 0,
         "aria-checked": props.checked,
         "onClick": onClick
       }, [nodes]);

package/lib/checkbox/types.d.ts

@@ -5,13 +5,9 @@ export declare type CheckboxShape = CheckerShape;
 export declare type CheckboxLabelPosition = CheckerLabelPosition;
 export declare type CheckboxExpose = {
     toggle: (newValue?: boolean) => void;
-    /**
-     * @private
-     */
+    /** @private */
     props: CheckboxProps;
-    /**
-     * @private
-     */
+    /** @private */
     checked: ComputedRef<boolean>;
 };
 export declare type CheckboxInstance = ComponentPublicInstance<CheckboxProps, CheckboxExpose>;

package/lib/composables/use-id.d.ts

@@ -0,0 +1 @@
+export declare function useId(): string;

package/lib/composables/use-id.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useId = useId;
+
+var _vue = require("vue");
+
+var current = 0;
+
+function useId() {
+  var vm = (0, _vue.getCurrentInstance)();
+  var {
+    name = 'unknown'
+  } = (vm == null ? void 0 : vm.type) || {}; // keep jest snapshot stable
+
+  if (process.env.NODE_ENV === 'test') {
+    return name;
+  }
+
+  return name + "-" + ++current;
+}

package/lib/composables/use-route.d.ts

@@ -9,5 +9,5 @@ export declare const routeProps: {
     replace: BooleanConstructor;
 };
 export declare type RouteProps = ExtractPropTypes<typeof routeProps>;
-export declare function route(vm: ComponentPublicInstance<RouteProps>): void;
+export declare function route({ to, url, replace, $router: router, }: ComponentPublicInstance<RouteProps>): void;
 export declare function useRoute(): () => void;

package/lib/composables/use-route.js

@@ -17,13 +17,13 @@ var routeProps = {
 };
 exports.routeProps = routeProps;
 
-function route(vm) {
-  var router = vm.$router;
+function route(_ref) {
   var {
     to,
     url,
-    replace
-  } = vm;
+    replace,
+    $router: router
+  } = _ref;
 
   if (to && router) {
     router[replace ? 'replace' : 'push'](to);

package/lib/count-down/CountDown.js

@@ -63,6 +63,7 @@ var _default = (0, _vue.defineComponent)({
       reset: resetTime
     });
     return () => (0, _vue.createVNode)("div", {
+      "role": "timer",
       "class": bem()
     }, [slots.default ? slots.default(current.value) : timeText.value]);
   }

package/lib/coupon-list/CouponList.js

@@ -19,6 +19,8 @@ var _button = require("../button");
 
 var _coupon = require("../coupon");
 
+var _use = require("@vant/use");
+
 // Utils
 // Composables
 // Components
@@ -56,25 +58,33 @@ var _default = (0, _vue.defineComponent)({
       slots
     } = _ref;
     var [couponRefs, setCouponRefs] = (0, _useRefs.useRefs)();
-    var state = (0, _vue.reactive)({
-      tab: 0,
-      code: props.code
-    });
-    var buttonDisabled = (0, _vue.computed)(() => !props.exchangeButtonLoading && (props.exchangeButtonDisabled || !state.code || state.code.length < props.exchangeMinLength));
+    var root = (0, _vue.ref)();
+    var barRef = (0, _vue.ref)();
+    var activeTab = (0, _vue.ref)(0);
+    var listHeight = (0, _vue.ref)(0);
+    var currentCode = (0, _vue.ref)(props.code);
+    var buttonDisabled = (0, _vue.computed)(() => !props.exchangeButtonLoading && (props.exchangeButtonDisabled || !currentCode.value || currentCode.value.length < props.exchangeMinLength));
+
+    var updateListHeight = () => {
+      var TABS_HEIGHT = 44;
+      var rootHeight = (0, _use.useRect)(root).height;
+      var headerHeight = (0, _use.useRect)(barRef).height + TABS_HEIGHT;
+      listHeight.value = (rootHeight > headerHeight ? rootHeight : _utils.windowHeight.value) - headerHeight;
+    };
 
     var onExchange = () => {
-      emit('exchange', state.code); // auto clear currentCode when not use v-model
+      emit('exchange', currentCode.value); // auto clear currentCode when not use v-model
 
       if (!props.code) {
-        state.code = '';
+        currentCode.value = '';
       }
     };
 
     var scrollToCoupon = index => {
       (0, _vue.nextTick)(() => {
-        if (couponRefs.value[index]) {
-          couponRefs.value[index].scrollIntoView();
-        }
+        var _couponRefs$value$ind;
+
+        return (_couponRefs$value$ind = couponRefs.value[index]) == null ? void 0 : _couponRefs$value$ind.scrollIntoView();
       });
     };
 
@@ -87,10 +97,11 @@ var _default = (0, _vue.defineComponent)({
     var renderExchangeBar = () => {
       if (props.showExchangeBar) {
         return (0, _vue.createVNode)("div", {
+          "ref": barRef,
           "class": bem('exchange-bar')
         }, [(0, _vue.createVNode)(_field.Field, {
-          "modelValue": state.code,
-          "onUpdate:modelValue": $event => state.code = $event,
+          "modelValue": currentCode.value,
+          "onUpdate:modelValue": $event => currentCode.value = $event,
           "clearable": true,
           "border": false,
           "class": bem('field'),
@@ -121,9 +132,11 @@ var _default = (0, _vue.defineComponent)({
       }, {
         default: () => [(0, _vue.createVNode)("div", {
           "class": bem('list', {
-            'with-bar': props.showExchangeBar,
             'with-bottom': props.showCloseButton
-          })
+          }),
+          "style": {
+            height: listHeight.value + "px"
+          }
         }, [coupons.map((coupon, index) => (0, _vue.createVNode)(_coupon.Coupon, {
           "key": coupon.id,
           "ref": setCouponRefs(index),
@@ -148,9 +161,11 @@ var _default = (0, _vue.defineComponent)({
       }, {
         default: () => [(0, _vue.createVNode)("div", {
           "class": bem('list', {
-            'with-bar': props.showExchangeBar,
             'with-bottom': props.showCloseButton
-          })
+          }),
+          "style": {
+            height: listHeight.value + "px"
+          }
         }, [disabledCoupons.map(coupon => (0, _vue.createVNode)(_coupon.Coupon, {
           "disabled": true,
           "key": coupon.id,
@@ -161,20 +176,22 @@ var _default = (0, _vue.defineComponent)({
     };
 
     (0, _vue.watch)(() => props.code, value => {
-      state.code = value;
+      currentCode.value = value;
     });
-    (0, _vue.watch)(() => state.code, value => emit('update:code', value));
+    (0, _vue.watch)(_utils.windowHeight, updateListHeight);
+    (0, _vue.watch)(currentCode, value => emit('update:code', value));
     (0, _vue.watch)(() => props.displayedCouponIndex, scrollToCoupon);
     (0, _vue.onMounted)(() => {
+      updateListHeight();
       scrollToCoupon(props.displayedCouponIndex);
     });
     return () => (0, _vue.createVNode)("div", {
+      "ref": root,
       "class": bem()
     }, [renderExchangeBar(), (0, _vue.createVNode)(_tabs.Tabs, {
-      "active": state.tab,
-      "onUpdate:active": $event => state.tab = $event,
-      "class": bem('tab'),
-      "border": false
+      "active": activeTab.value,
+      "onUpdate:active": $event => activeTab.value = $event,
+      "class": bem('tab')
     }, {
       default: () => [renderCouponTab(), renderDisabledTab()]
     }), (0, _vue.createVNode)("div", {

package/lib/coupon-list/index.css

@@ -1 +1 @@
-:root{--van-coupon-list-background-color:var(--van-background-color);--van-coupon-list-field-padding:5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height:32px;--van-coupon-list-close-button-height:40px;--van-coupon-list-empty-image-size:200px;--van-coupon-list-empty-tip-color:var(--van-text-color-2);--van-coupon-list-empty-tip-font-size:var(--van-font-size-md);--van-coupon-list-empty-tip-line-height:var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background-color)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__body{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-gray-1);border-radius:17px}.van-coupon-list__field .van-field__body::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__body::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-color-light)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;height:calc(100vh - 108px);padding:var(--van-padding-md) 0 var(--van-padding-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.van-coupon-list__list--with-bar{height:calc(100vh - 152px)}.van-coupon-list__list--with-bottom{padding-bottom:50px}.van-coupon-list__bottom{position:absolute;bottom:0;left:0;z-index:999;box-sizing:border-box;width:100%;padding:5px var(--van-padding-md);font-weight:var(--van-font-weight-bold);background-color:var(--van-background-color-light)}.van-coupon-list__close{height:var(--van-coupon-list-close-button-height)}.van-coupon-list__empty{padding-top:60px;text-align:center}.van-coupon-list__empty p{margin:var(--van-padding-md) 0;color:var(--van-coupon-list-empty-tip-color);font-size:var(--van-coupon-list-empty-tip-font-size);line-height:var(--van-coupon-list-empty-tip-line-height)}.van-coupon-list__empty img{width:var(--van-coupon-list-empty-image-size);height:var(--van-coupon-list-empty-image-size)}
+:root{--van-coupon-list-background-color:var(--van-background-color);--van-coupon-list-field-padding:5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height:32px;--van-coupon-list-close-button-height:40px;--van-coupon-list-empty-image-size:200px;--van-coupon-list-empty-tip-color:var(--van-text-color-2);--van-coupon-list-empty-tip-font-size:var(--van-font-size-md);--van-coupon-list-empty-tip-line-height:var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background-color)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__body{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-gray-1);border-radius:17px}.van-coupon-list__field .van-field__body::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__body::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-color-light)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;padding:var(--van-padding-md) 0 var(--van-padding-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.van-coupon-list__list--with-bottom{padding-bottom:50px}.van-coupon-list__bottom{position:absolute;bottom:0;left:0;z-index:999;box-sizing:border-box;width:100%;padding:5px var(--van-padding-md);font-weight:var(--van-font-weight-bold);background-color:var(--van-background-color-light)}.van-coupon-list__close{height:var(--van-coupon-list-close-button-height)}.van-coupon-list__empty{padding-top:60px;text-align:center}.van-coupon-list__empty p{margin:var(--van-padding-md) 0;color:var(--van-coupon-list-empty-tip-color);font-size:var(--van-coupon-list-empty-tip-font-size);line-height:var(--van-coupon-list-empty-tip-line-height)}.van-coupon-list__empty img{width:var(--van-coupon-list-empty-image-size);height:var(--van-coupon-list-empty-image-size)}

package/lib/coupon-list/index.less

@@ -56,15 +56,10 @@
 
   &__list {
     box-sizing: border-box;
-    height: calc(100vh - 108px);
     padding: var(--van-padding-md) 0 var(--van-padding-lg);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
-    &--with-bar {
-      height: calc(100vh - 152px);
-    }
-
     &--with-bottom {
       padding-bottom: 50px;
     }

package/lib/dropdown-item/DropdownItem.js

@@ -49,7 +49,8 @@ var _default = (0, _vue.defineComponent)({
       showWrapper: false
     });
     var {
-      parent
+      parent,
+      index
     } = (0, _use.useParent)(_DropdownMenu.DROPDOWN_KEY);
 
     if (!parent) {
@@ -138,7 +139,7 @@ var _default = (0, _vue.defineComponent)({
       };
 
       return (0, _vue.createVNode)(_cell.Cell, {
-        "clickable": true,
+        "role": "menuitem",
         "key": option.value,
         "icon": option.icon,
         "title": option.text,
@@ -148,6 +149,8 @@ var _default = (0, _vue.defineComponent)({
         "style": {
           color: active ? activeColor : ''
         },
+        "tabindex": active ? 0 : -1,
+        "clickable": true,
         "onClick": onClick
       }, {
         value: renderIcon
@@ -180,6 +183,7 @@ var _default = (0, _vue.defineComponent)({
       }, [(0, _vue.createVNode)(_popup.Popup, {
         "show": state.showPopup,
         "onUpdate:show": $event => state.showPopup = $event,
+        "role": "menu",
         "class": bem('content'),
         "overlay": overlay,
         "position": direction === 'down' ? 'top' : 'bottom',
@@ -188,6 +192,7 @@ var _default = (0, _vue.defineComponent)({
         "overlayStyle": {
           position: 'absolute'
         },
+        "aria-labelledby": parent.id + "-" + index.value,
         "closeOnClickOverlay": closeOnClickOverlay,
         "onOpen": onOpen,
         "onClose": onClose,

package/lib/dropdown-item/types.d.ts

@@ -9,17 +9,13 @@ export declare type DropdownItemExpose = {
     toggle: (show?: boolean, options?: {
         immediate?: boolean;
     }) => void;
-    /**
-     * @private
-     */
+    /** @private */
     state: {
         showPopup: boolean;
         transition: boolean;
         showWrapper: boolean;
     };
-    /**
-     * @private
-     */
+    /** @private */
     renderTitle: () => string | VNode[];
 };
 export declare type DropdownItemInstance = ComponentPublicInstance<DropdownItemProps, DropdownItemExpose>;

package/lib/dropdown-menu/DropdownMenu.js

@@ -7,6 +7,8 @@ var _vue = require("vue");
 
 var _utils = require("../utils");
 
+var _useId = require("../composables/use-id");
+
 var _use = require("@vant/use");
 
 // Utils
@@ -32,6 +34,7 @@ var _default = (0, _vue.defineComponent)({
     var {
       slots
     } = _ref;
+    var id = (0, _useId.useId)();
     var root = (0, _vue.ref)();
     var barRef = (0, _vue.ref)();
     var offset = (0, _vue.ref)(0);
@@ -64,7 +67,7 @@ var _default = (0, _vue.defineComponent)({
         if (props.direction === 'down') {
           offset.value = rect.bottom;
         } else {
-          offset.value = window.innerHeight - rect.top;
+          offset.value = _utils.windowHeight.value - rect.top;
         }
       }
     };
@@ -97,8 +100,9 @@ var _default = (0, _vue.defineComponent)({
         titleClass
       } = item;
       return (0, _vue.createVNode)("div", {
+        "id": id + "-" + index,
         "role": "button",
-        "tabindex": disabled ? -1 : 0,
+        "tabindex": disabled ? undefined : 0,
         "class": [bem('item', {
           disabled
         }), {
@@ -123,6 +127,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     linkChildren({
+      id,
       props,
       offset
     });

package/lib/dropdown-menu/types.d.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 import type { DropdownMenuProps } from './DropdownMenu';
 export declare type DropdownMenuDirection = 'up' | 'down';
 export declare type DropdownMenuProvide = {
+    id: string;
     props: DropdownMenuProps;
     offset: Ref<number>;
 };

package/lib/empty/Network.js

@@ -17,71 +17,59 @@ var Network = (0, _vue.createVNode)("svg", {
   "viewBox": "0 0 160 160"
 }, [(0, _vue.createVNode)("defs", null, [(0, _vue.createVNode)("linearGradient", {
   "id": prefix + "1",
-  "x1": "64.022%",
+  "x1": "64%",
   "y1": "100%",
-  "x2": "64.022%"
+  "x2": "64%"
 }, [renderStop('#FFF', 0, 0.5), renderStop('#F2F3F5', 100)]), (0, _vue.createVNode)("linearGradient", {
   "id": prefix + "2",
   "x1": "50%",
   "x2": "50%",
-  "y2": "84.459%"
+  "y2": "84%"
 }, [renderStop('#EBEDF0', 0), renderStop('#DCDEE0', 100, 0)]), (0, _vue.createVNode)("linearGradient", {
   "id": prefix + "3",
   "x1": "100%",
   "x2": "100%",
   "y2": "100%"
-}, [renderStop('#EAEDF0', 0), renderStop('#DCDEE0', 100)]), (0, _vue.createVNode)("linearGradient", {
-  "id": prefix + "4",
-  "x1": "100%",
-  "y1": "100%",
-  "x2": "100%"
 }, [renderStop('#EAEDF0', 0), renderStop('#DCDEE0', 100)]), (0, _vue.createVNode)("radialGradient", {
-  "id": prefix + "5",
+  "id": prefix + "4",
   "cx": "50%",
   "cy": "0%",
   "fx": "50%",
   "fy": "0%",
   "r": "100%",
-  "gradientTransform": "matrix(0 1 -.54835 0 .5 -.5)"
+  "gradientTransform": "matrix(0 1 -.54 0 .5 -.5)"
 }, [renderStop('#EBEDF0', 0), renderStop('#FFF', 100, 0)])]), (0, _vue.createVNode)("g", {
   "fill": "none"
 }, [(0, _vue.createVNode)("g", {
   "opacity": ".8"
 }, [(0, _vue.createVNode)("path", {
-  "d": "M0 124V46h20v20h14v58H0z",
-  "fill": "url(#" + prefix + "1)",
-  "transform": "matrix(-1 0 0 1 36 7)"
+  "d": "M36 131V53H16v20H2v58h34z",
+  "fill": "url(#" + prefix + "1)"
 }, null), (0, _vue.createVNode)("path", {
-  "d": "M121 8h22.231v14H152v77.37h-31V8z",
-  "fill": "url(#" + prefix + "1)",
-  "transform": "translate(2 7)"
+  "d": "M123 15h22v14h9v77h-31V15z",
+  "fill": "url(#" + prefix + "1)"
 }, null)]), (0, _vue.createVNode)("path", {
-  "fill": "url(#" + prefix + "5)",
+  "fill": "url(#" + prefix + "4)",
   "d": "M0 139h160v21H0z"
 }, null), (0, _vue.createVNode)("path", {
-  "d": "M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z",
-  "fill": "url(#" + prefix + "2)",
-  "transform": "translate(43 36)"
+  "d": "M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z",
+  "fill": "url(#" + prefix + "2)"
 }, null), (0, _vue.createVNode)("g", {
   "opacity": ".6",
   "stroke-linecap": "round",
   "stroke-width": "7"
 }, [(0, _vue.createVNode)("path", {
-  "d": "M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12",
-  "stroke": "url(#" + prefix + "3)",
-  "transform": "translate(43 36)"
+  "d": "M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13",
+  "stroke": "url(#" + prefix + "3)"
 }, null), (0, _vue.createVNode)("path", {
-  "d": "M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145",
-  "stroke": "url(#" + prefix + "3)",
-  "transform": "translate(43 36)"
+  "d": "M53 36a34 34 0 0 0 0 48",
+  "stroke": "url(#" + prefix + "3)"
 }, null), (0, _vue.createVNode)("path", {
-  "d": "M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12",
-  "stroke": "url(#" + prefix + "4)",
-  "transform": "rotate(-180 76.483 42.257)"
+  "d": "M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13",
+  "stroke": "url(#" + prefix + "3)"
 }, null), (0, _vue.createVNode)("path", {
-  "d": "M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145",
-  "stroke": "url(#" + prefix + "4)",
-  "transform": "rotate(-180 89.791 42.146)"
+  "d": "M106 84a34 34 0 0 0 0-48",
+  "stroke": "url(#" + prefix + "3)"
 }, null)]), (0, _vue.createVNode)("g", {
   "transform": "translate(31 105)"
 }, [(0, _vue.createVNode)("rect", {
@@ -95,13 +83,13 @@ var Network = (0, _vue.createVNode)("svg", {
   "y": "8",
   "width": "80",
   "height": "18",
-  "rx": "1.114"
+  "rx": "1.1"
 }, null), (0, _vue.createVNode)("rect", {
   "fill": "#EBEDF0",
   "x": "15",
   "y": "12",
   "width": "18",
   "height": "6",
-  "rx": "1.114"
+  "rx": "1.1"
 }, null)])])]);
 exports.Network = Network;

package/lib/field/Field.d.ts

@@ -278,12 +278,12 @@ declare const _default: import("vue").DefineComponent<{
     value?: string | number | undefined;
     icon?: string | undefined;
     size?: import("../cell").CellSize | undefined;
+    id?: string | undefined;
     valueClass?: unknown;
     labelClass?: unknown;
     titleClass?: unknown;
     titleStyle?: string | import("vue").CSSProperties | undefined;
     arrowDirection?: import("../cell").CellArrowDirection | undefined;
-    id?: string | undefined;
     leftIcon?: string | undefined;
     rightIcon?: string | undefined;
     maxlength?: string | number | undefined;

package/lib/field/Field.js

@@ -13,6 +13,8 @@ var _Cell = require("../cell/Cell");
 
 var _use = require("@vant/use");
 
+var _useId = require("../composables/use-id");
+
 var _useExpose = require("../composables/use-expose");
 
 var _icon = require("../icon");
@@ -81,6 +83,7 @@ var _default = (0, _vue.defineComponent)({
       emit,
       slots
     } = _ref;
+    var id = (0, _useId.useId)();
     var state = (0, _vue.reactive)({
       focused: false,
       validateFailed: false,
@@ -285,14 +288,16 @@ var _default = (0, _vue.defineComponent)({
       emit('focus', event);
       (0, _vue.nextTick)(adjustTextareaSize); // readonly not work in legacy mobile safari
 
-      var readonly = getProp('readonly');
-
-      if (readonly) {
+      if (getProp('readonly')) {
         blur();
       }
     };
 
     var onBlur = event => {
+      if (getProp('readonly')) {
+        return;
+      }
+
       state.focused = false;
       updateValue(getModelValue(), 'onBlur');
       emit('blur', event);
@@ -351,6 +356,8 @@ var _default = (0, _vue.defineComponent)({
       emit('keypress', event);
     };
 
+    var getInputId = () => props.id || id + "-input";
+
     var renderInput = () => {
       var controlClass = bem('control', [getProp('inputAlign'), {
         error: showError.value,
@@ -366,7 +373,7 @@ var _default = (0, _vue.defineComponent)({
       }
 
       var inputAttrs = {
-        id: props.id,
+        id: getInputId(),
         ref: inputRef,
         name: props.name,
         rows: props.rows !== undefined ? +props.rows : undefined,
@@ -377,6 +384,7 @@ var _default = (0, _vue.defineComponent)({
         autofocus: props.autofocus,
         placeholder: props.placeholder,
         autocomplete: props.autocomplete,
+        'aria-labelledby': props.label ? id + "-label" : undefined,
         onBlur,
         onFocus,
         onInput,
@@ -460,7 +468,8 @@ var _default = (0, _vue.defineComponent)({
 
       if (props.label) {
         return (0, _vue.createVNode)("label", {
-          "for": props.id
+          "id": id + "-label",
+          "for": getInputId()
         }, [props.label + colon]);
       }
     };

package/lib/field/index.d.ts

@@ -152,12 +152,12 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     value?: string | number | undefined;
     icon?: string | undefined;
     size?: import("..").CellSize | undefined;
+    id?: string | undefined;
     valueClass?: unknown;
     labelClass?: unknown;
     titleClass?: unknown;
     titleStyle?: string | import("vue").CSSProperties | undefined;
     arrowDirection?: import("..").CellArrowDirection | undefined;
-    id?: string | undefined;
     leftIcon?: string | undefined;
     rightIcon?: string | undefined;
     maxlength?: string | number | undefined;
@@ -201,4 +201,4 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
 }>>;
 export default Field;
 export type { FieldProps };
-export type { FieldType, FieldRule, FieldInstance, FieldTextAlign, FieldClearTrigger, FieldFormatTrigger, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, } from './types';
+export type { FieldType, FieldRule, FieldInstance, FieldTextAlign, FieldRuleMessage, FieldClearTrigger, FieldFormatTrigger, FieldRuleValidator, FiledRuleFormatter, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, } from './types';

package/lib/field/types.d.ts

@@ -13,13 +13,16 @@ export declare type FieldValidateError = {
     name?: string;
     message: string;
 };
+export declare type FieldRuleMessage = string | ((value: any, rule: FieldRule) => string);
+export declare type FieldRuleValidator = (value: any, rule: FieldRule) => boolean | string | Promise<boolean | string>;
+export declare type FiledRuleFormatter = (value: any, rule: FieldRule) => string;
 export declare type FieldRule = {
     pattern?: RegExp;
     trigger?: FieldValidateTrigger;
-    message?: string | ((value: any, rule: FieldRule) => string);
+    message?: FieldRuleMessage;
     required?: boolean;
-    validator?: (value: any, rule: FieldRule) => boolean | string | Promise<boolean | string>;
-    formatter?: (value: any, rule: FieldRule) => string;
+    validator?: FieldRuleValidator;
+    formatter?: FiledRuleFormatter;
 };
 export declare type FieldFormSharedProps = 'colon' | 'disabled' | 'readonly' | 'labelWidth' | 'labelAlign' | 'inputAlign' | 'errorMessageAlign';
 export declare type FieldExpose = {
@@ -27,9 +30,7 @@ export declare type FieldExpose = {
     focus: () => void | undefined;
     validate: (rules?: FieldRule[] | undefined) => Promise<void | FieldValidateError>;
     resetValidation: () => void;
-    /**
-     * @private
-     */
+    /** @private */
     formValue: ComputedRef<unknown>;
 };
 export declare type FieldInstance = ComponentPublicInstance<FieldProps, FieldExpose>;

package/lib/form/Form.js

@@ -154,7 +154,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var onSubmit = event => {
-      event.preventDefault();
+      (0, _utils.preventDefault)(event);
       submit();
     };