vant 3.2.6 → 3.3.1

package/es/sidebar-item/SidebarItem.d.ts

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

package/es/sidebar-item/SidebarItem.js

@@ -9,20 +9,22 @@ import { useRoute, routeProps } from '../composables/use-route'; // Components
 
 import { Badge } from '../badge';
 var [name, bem] = createNamespace('sidebar-item');
+var sidebarItemProps = extend({}, routeProps, {
+  dot: Boolean,
+  title: String,
+  badge: numericProp,
+  disabled: Boolean
+});
 export default defineComponent({
   name,
-  props: extend({}, routeProps, {
-    dot: Boolean,
-    title: String,
-    badge: numericProp,
-    disabled: Boolean
-  }),
+  props: sidebarItemProps,
   emits: ['click'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var route = useRoute();
     var {
       parent,
@@ -55,11 +57,14 @@ export default defineComponent({
         disabled
       } = props;
       var selected = index.value === parent.getActive();
-      return _createVNode("a", {
+      return _createVNode("div", {
+        "role": "tab",
         "class": bem({
           select: selected,
           disabled
         }),
+        "tabindex": disabled ? undefined : 0,
+        "aria-selected": selected,
         "onClick": onClick
       }, [_createVNode(Badge, {
         "dot": dot,

package/es/sidebar-item/index.css

@@ -1 +1 @@
-:root{--van-sidebar-font-size:var(--van-font-size-md);--van-sidebar-line-height:var(--van-line-height-md);--van-sidebar-text-color:var(--van-text-color);--van-sidebar-disabled-text-color:var(--van-gray-5);--van-sidebar-padding:20px var(--van-padding-sm);--van-sidebar-active-color:var(--van-active-color);--van-sidebar-background-color:var(--van-background-color);--van-sidebar-selected-font-weight:var(--van-font-weight-bold);--van-sidebar-selected-text-color:var(--van-text-color);--van-sidebar-selected-border-width:4px;--van-sidebar-selected-border-height:16px;--van-sidebar-selected-border-color:var(--van-danger-color);--van-sidebar-selected-background-color:var(--van-white)}.van-sidebar-item{position:relative;display:block;box-sizing:border-box;padding:var(--van-sidebar-padding);overflow:hidden;color:var(--van-sidebar-text-color);font-size:var(--van-sidebar-font-size);line-height:var(--van-sidebar-line-height);background:var(--van-sidebar-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-sidebar-item:active{background-color:var(--van-sidebar-active-color)}.van-sidebar-item:not(:last-child)::after{border-bottom-width:1px}.van-sidebar-item__text{word-break:break-all}.van-sidebar-item--select{color:var(--van-sidebar-selected-text-color);font-weight:var(--van-sidebar-selected-font-weight)}.van-sidebar-item--select,.van-sidebar-item--select:active{background-color:var(--van-sidebar-selected-background-color)}.van-sidebar-item--select::before{position:absolute;top:50%;left:0;width:var(--van-sidebar-selected-border-width);height:var(--van-sidebar-selected-border-height);background-color:var(--van-sidebar-selected-border-color);transform:translateY(-50%);content:''}.van-sidebar-item--disabled{color:var(--van-sidebar-disabled-text-color);cursor:not-allowed}.van-sidebar-item--disabled:active{background-color:var(--van-sidebar-background-color)}
+:root{--van-sidebar-font-size:var(--van-font-size-md);--van-sidebar-line-height:var(--van-line-height-md);--van-sidebar-text-color:var(--van-text-color);--van-sidebar-disabled-text-color:var(--van-text-color-3);--van-sidebar-padding:20px var(--van-padding-sm);--van-sidebar-active-color:var(--van-active-color);--van-sidebar-background-color:var(--van-background-color);--van-sidebar-selected-font-weight:var(--van-font-weight-bold);--van-sidebar-selected-text-color:var(--van-text-color);--van-sidebar-selected-border-width:4px;--van-sidebar-selected-border-height:16px;--van-sidebar-selected-border-color:var(--van-danger-color);--van-sidebar-selected-background-color:var(--van-background-color-light)}.van-sidebar-item{position:relative;display:block;box-sizing:border-box;padding:var(--van-sidebar-padding);overflow:hidden;color:var(--van-sidebar-text-color);font-size:var(--van-sidebar-font-size);line-height:var(--van-sidebar-line-height);background:var(--van-sidebar-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-sidebar-item:active{background-color:var(--van-sidebar-active-color)}.van-sidebar-item:not(:last-child)::after{border-bottom-width:1px}.van-sidebar-item__text{word-break:break-all}.van-sidebar-item--select{color:var(--van-sidebar-selected-text-color);font-weight:var(--van-sidebar-selected-font-weight)}.van-sidebar-item--select,.van-sidebar-item--select:active{background-color:var(--van-sidebar-selected-background-color)}.van-sidebar-item--select::before{position:absolute;top:50%;left:0;width:var(--van-sidebar-selected-border-width);height:var(--van-sidebar-selected-border-height);background-color:var(--van-sidebar-selected-border-color);transform:translateY(-50%);content:''}.van-sidebar-item--disabled{color:var(--van-sidebar-disabled-text-color);cursor:not-allowed}.van-sidebar-item--disabled:active{background-color:var(--van-sidebar-background-color)}

package/es/sidebar-item/index.d.ts

@@ -32,3 +32,4 @@ export declare const SidebarItem: import("../utils").WithInstall<import("vue").D
     disabled: boolean;
 }>>;
 export default SidebarItem;
+export type { SidebarItemProps } from './SidebarItem';

package/es/sidebar-item/var.less

@@ -3,7 +3,7 @@
 @sidebar-font-size: var(--van-font-size-md);
 @sidebar-line-height: var(--van-line-height-md);
 @sidebar-text-color: var(--van-text-color);
-@sidebar-disabled-text-color: var(--van-gray-5);
+@sidebar-disabled-text-color: var(--van-text-color-3);
 @sidebar-padding: 20px var(--van-padding-sm);
 @sidebar-active-color: var(--van-active-color);
 @sidebar-background-color: var(--van-background-color);
@@ -12,4 +12,4 @@
 @sidebar-selected-border-width: 4px;
 @sidebar-selected-border-height: 16px;
 @sidebar-selected-border-color: var(--van-danger-color);
-@sidebar-selected-background-color: var(--van-white);
+@sidebar-selected-background-color: var(--van-background-color-light);

package/es/skeleton/Skeleton.d.ts

@@ -1,5 +1,33 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 export declare type SkeletonAvatarShape = 'square' | 'round';
+declare const skeletonProps: {
+    row: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: BooleanConstructor;
+    round: BooleanConstructor;
+    avatar: BooleanConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    animate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    titleWidth: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+    rowWidth: {
+        type: PropType<string | number | (string | number)[]>;
+        default: string;
+    };
+};
+export declare type SkeletonProps = ExtractPropTypes<typeof skeletonProps>;
 declare const _default: import("vue").DefineComponent<{
     row: {
         type: (NumberConstructor | StringConstructor)[];

package/es/skeleton/Skeleton.js

@@ -4,27 +4,30 @@ import { addUnit, truthProp, numericProp, getSizeStyle, makeStringProp, makeNume
 var [name, bem] = createNamespace('skeleton');
 var DEFAULT_ROW_WIDTH = '100%';
 var DEFAULT_LAST_ROW_WIDTH = '60%';
+var skeletonProps = {
+  row: makeNumericProp(0),
+  title: Boolean,
+  round: Boolean,
+  avatar: Boolean,
+  loading: truthProp,
+  animate: truthProp,
+  avatarSize: numericProp,
+  titleWidth: numericProp,
+  avatarShape: makeStringProp('round'),
+  rowWidth: {
+    type: [Number, String, Array],
+    default: DEFAULT_ROW_WIDTH
+  }
+};
 export default defineComponent({
   name,
-  props: {
-    row: makeNumericProp(0),
-    title: Boolean,
-    round: Boolean,
-    avatar: Boolean,
-    loading: truthProp,
-    animate: truthProp,
-    avatarSize: numericProp,
-    titleWidth: numericProp,
-    avatarShape: makeStringProp('round'),
-    rowWidth: {
-      type: [Number, String, Array],
-      default: DEFAULT_ROW_WIDTH
-    }
-  },
+  props: skeletonProps,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
 
-  setup(props, {
-    slots
-  }) {
     var renderAvatar = () => {
       if (props.avatar) {
         return _createVNode("div", {

package/es/skeleton/index.d.ts

@@ -1,4 +1,3 @@
-import { SkeletonAvatarShape } from './Skeleton';
 export declare const Skeleton: import("../utils").WithInstall<import("vue").DefineComponent<{
     row: {
         type: (NumberConstructor | StringConstructor)[];
@@ -18,8 +17,8 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
     avatarSize: (NumberConstructor | StringConstructor)[];
     titleWidth: (NumberConstructor | StringConstructor)[];
     avatarShape: {
-        type: import("vue").PropType<SkeletonAvatarShape>;
-        default: SkeletonAvatarShape;
+        type: import("vue").PropType<import("./Skeleton").SkeletonAvatarShape>;
+        default: import("./Skeleton").SkeletonAvatarShape;
     };
     rowWidth: {
         type: import("vue").PropType<string | number | (string | number)[]>;
@@ -45,7 +44,7 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
     loading: boolean;
     row: string | number;
     avatar: boolean;
-    avatarShape: SkeletonAvatarShape;
+    avatarShape: import("./Skeleton").SkeletonAvatarShape;
     rowWidth: string | number | (string | number)[];
 } & {
     avatarSize?: string | number | undefined;
@@ -57,8 +56,8 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
     loading: boolean;
     row: string | number;
     avatar: boolean;
-    avatarShape: SkeletonAvatarShape;
+    avatarShape: import("./Skeleton").SkeletonAvatarShape;
     rowWidth: string | number | (string | number)[];
 }>>;
 export default Skeleton;
-export type { SkeletonAvatarShape };
+export type { SkeletonProps, SkeletonAvatarShape } from './Skeleton';

package/es/slider/Slider.d.ts

@@ -1,6 +1,34 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 declare type NumberRange = [number, number];
 declare type SliderValue = number | NumberRange;
+declare const sliderProps: {
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    step: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    range: BooleanConstructor;
+    reverse: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    vertical: BooleanConstructor;
+    barHeight: (NumberConstructor | StringConstructor)[];
+    buttonSize: (NumberConstructor | StringConstructor)[];
+    activeColor: StringConstructor;
+    inactiveColor: StringConstructor;
+    modelValue: {
+        type: PropType<SliderValue>;
+        default: number;
+    };
+};
+export declare type SliderProps = ExtractPropTypes<typeof sliderProps>;
 declare const _default: import("vue").DefineComponent<{
     min: {
         type: (NumberConstructor | StringConstructor)[];
@@ -42,8 +70,8 @@ declare const _default: import("vue").DefineComponent<{
     inactiveColor?: unknown;
     modelValue?: unknown;
 } & {
-    reverse: boolean;
     max: string | number;
+    reverse: boolean;
     disabled: boolean;
     modelValue: SliderValue;
     readonly: boolean;
@@ -62,8 +90,8 @@ declare const _default: import("vue").DefineComponent<{
     "onDrag-end"?: ((...args: any[]) => any) | undefined;
     "onDrag-start"?: ((...args: any[]) => any) | undefined;
 }, {
-    reverse: boolean;
     max: string | number;
+    reverse: boolean;
     disabled: boolean;
     modelValue: SliderValue;
     readonly: boolean;

package/es/slider/Slider.js

@@ -6,32 +6,34 @@ import { clamp, addUnit, addNumber, numericProp, getSizeStyle, preventDefault, s
 import { useRect, useCustomFieldValue } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 var [name, bem] = createNamespace('slider');
+var sliderProps = {
+  min: makeNumericProp(0),
+  max: makeNumericProp(100),
+  step: makeNumericProp(1),
+  range: Boolean,
+  reverse: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  vertical: Boolean,
+  barHeight: numericProp,
+  buttonSize: numericProp,
+  activeColor: String,
+  inactiveColor: String,
+  modelValue: {
+    type: [Number, Array],
+    default: 0
+  }
+};
 export default defineComponent({
   name,
-  props: {
-    min: makeNumericProp(0),
-    max: makeNumericProp(100),
-    step: makeNumericProp(1),
-    range: Boolean,
-    reverse: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
-    vertical: Boolean,
-    barHeight: numericProp,
-    buttonSize: numericProp,
-    activeColor: String,
-    inactiveColor: String,
-    modelValue: {
-      type: [Number, Array],
-      default: 0
-    }
-  },
+  props: sliderProps,
   emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var buttonIndex;
     var current;
     var startValue;
@@ -283,10 +285,12 @@ export default defineComponent({
       return _createVNode("div", {
         "role": "slider",
         "class": getButtonClassName(index),
-        "tabindex": props.disabled || props.readonly ? -1 : 0,
-        "aria-valuemin": +props.min,
+        "tabindex": props.disabled ? undefined : 0,
+        "aria-valuemin": props.min,
         "aria-valuenow": current,
-        "aria-valuemax": +props.max,
+        "aria-valuemax": props.max,
+        "aria-disabled": props.disabled || undefined,
+        "aria-readonly": props.readonly || undefined,
         "aria-orientation": props.vertical ? 'vertical' : 'horizontal',
         "onTouchstart": event => {
           if (typeof index === 'number') {

package/es/slider/index.d.ts

@@ -39,8 +39,8 @@ export declare const Slider: import("../utils").WithInstall<import("vue").Define
     inactiveColor?: unknown;
     modelValue?: unknown;
 } & {
-    reverse: boolean;
     max: string | number;
+    reverse: boolean;
     disabled: boolean;
     modelValue: number | [number, number];
     readonly: boolean;
@@ -59,8 +59,8 @@ export declare const Slider: import("../utils").WithInstall<import("vue").Define
     "onDrag-end"?: ((...args: any[]) => any) | undefined;
     "onDrag-start"?: ((...args: any[]) => any) | undefined;
 }, {
-    reverse: boolean;
     max: string | number;
+    reverse: boolean;
     disabled: boolean;
     modelValue: number | [number, number];
     readonly: boolean;
@@ -70,3 +70,4 @@ export declare const Slider: import("../utils").WithInstall<import("vue").Define
     step: string | number;
 }>>;
 export default Slider;
+export type { SliderProps } from './Slider';

package/es/step/Step.js

@@ -11,9 +11,10 @@ var [name, bem] = createNamespace('step');
 export default defineComponent({
   name,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var {
       parent,
       index

package/es/step/index.css

@@ -1 +1 @@
-:root{--van-step-text-color:var(--van-gray-6);--van-step-active-color:var(--van-success-color);--van-step-process-text-color:var(--van-text-color);--van-step-font-size:var(--van-font-size-md);--van-step-line-color:var(--van-border-color);--van-step-finish-line-color:var(--van-success-color);--van-step-finish-text-color:var(--van-text-color);--van-step-icon-size:12px;--van-step-circle-size:5px;--van-step-circle-color:var(--van-gray-6);--van-step-horizontal-title-font-size:var(--van-font-size-sm)}.van-step{position:relative;flex:1;color:var(--van-step-text-color);font-size:var(--van-step-font-size)}.van-step__circle{display:block;width:var(--van-step-circle-size);height:var(--van-step-circle-size);background-color:var(--van-step-circle-color);border-radius:50%}.van-step__line{position:absolute;background-color:var(--van-step-line-color);transition:background-color var(--van-animation-duration-base)}.van-step--horizontal{float:left}.van-step--horizontal:first-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child{position:absolute;right:1px;width:auto}.van-step--horizontal:last-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:-9px;left:auto}.van-step--horizontal .van-step__circle-container{position:absolute;top:30px;left:calc(var(--van-padding-xs) * -1);z-index:1;padding:0 var(--van-padding-xs);background-color:var(--van-white);transform:translateY(-50%)}.van-step--horizontal .van-step__title{display:inline-block;margin-left:3px;font-size:var(--van-step-horizontal-title-font-size);transform:translateX(-50%)}.van-step--horizontal .van-step__line{top:30px;left:0;width:100%;height:1px}.van-step--horizontal .van-step__icon{display:block;font-size:var(--van-step-icon-size)}.van-step--horizontal .van-step--process{color:var(--van-step-process-text-color)}.van-step--vertical{display:block;float:none;padding:10px 10px 10px 0;line-height:var(--van-line-height-sm)}.van-step--vertical:not(:last-child)::after{border-bottom-width:1px}.van-step--vertical .van-step__circle-container{position:absolute;top:19px;left:-15px;z-index:1;font-size:var(--van-step-icon-size);line-height:1;transform:translate(-50%,-50%)}.van-step--vertical .van-step__line{top:16px;left:-15px;width:1px;height:100%}.van-step:last-child .van-step__line{width:0}.van-step--finish{color:var(--van-step-finish-text-color)}.van-step--finish .van-step__circle,.van-step--finish .van-step__line{background-color:var(--van-step-finish-line-color)}.van-step__icon,.van-step__title{transition:color var(--van-animation-duration-base)}.van-step__icon--active,.van-step__icon--finish,.van-step__title--active,.van-step__title--finish{color:var(--van-step-active-color)}
+:root{--van-step-text-color:var(--van-text-color-2);--van-step-active-color:var(--van-success-color);--van-step-process-text-color:var(--van-text-color);--van-step-font-size:var(--van-font-size-md);--van-step-line-color:var(--van-border-color);--van-step-finish-line-color:var(--van-success-color);--van-step-finish-text-color:var(--van-text-color);--van-step-icon-size:12px;--van-step-circle-size:5px;--van-step-circle-color:var(--van-gray-6);--van-step-horizontal-title-font-size:var(--van-font-size-sm)}.van-step{position:relative;flex:1;color:var(--van-step-text-color);font-size:var(--van-step-font-size)}.van-step__circle{display:block;width:var(--van-step-circle-size);height:var(--van-step-circle-size);background-color:var(--van-step-circle-color);border-radius:50%}.van-step__line{position:absolute;background-color:var(--van-step-line-color);transition:background-color var(--van-animation-duration-base)}.van-step--horizontal{float:left}.van-step--horizontal:first-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child{position:absolute;right:1px;width:auto}.van-step--horizontal:last-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:-9px;left:auto}.van-step--horizontal .van-step__circle-container{position:absolute;top:30px;left:calc(var(--van-padding-xs) * -1);z-index:1;padding:0 var(--van-padding-xs);background-color:var(--van-background-color-light);transform:translateY(-50%)}.van-step--horizontal .van-step__title{display:inline-block;margin-left:3px;font-size:var(--van-step-horizontal-title-font-size);transform:translateX(-50%)}.van-step--horizontal .van-step__line{top:30px;left:0;width:100%;height:1px}.van-step--horizontal .van-step__icon{display:block;font-size:var(--van-step-icon-size)}.van-step--horizontal .van-step--process{color:var(--van-step-process-text-color)}.van-step--vertical{display:block;float:none;padding:10px 10px 10px 0;line-height:var(--van-line-height-sm)}.van-step--vertical:not(:last-child)::after{border-bottom-width:1px}.van-step--vertical .van-step__circle-container{position:absolute;top:19px;left:-15px;z-index:1;font-size:var(--van-step-icon-size);line-height:1;transform:translate(-50%,-50%)}.van-step--vertical .van-step__line{top:16px;left:-15px;width:1px;height:100%}.van-step:last-child .van-step__line{width:0}.van-step--finish{color:var(--van-step-finish-text-color)}.van-step--finish .van-step__circle,.van-step--finish .van-step__line{background-color:var(--van-step-finish-line-color)}.van-step__icon,.van-step__title{transition:color var(--van-animation-duration-base)}.van-step__icon--active,.van-step__icon--finish,.van-step__title--active,.van-step__title--finish{color:var(--van-step-active-color)}

package/es/step/index.less

@@ -66,7 +66,7 @@
       left: calc(var(--van-padding-xs) * -1);
       z-index: 1;
       padding: 0 var(--van-padding-xs);
-      background-color: var(--van-white);
+      background-color: var(--van-background-color-light);
       transform: translateY(-50%);
     }
 

package/es/step/var.less

@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@step-text-color: var(--van-gray-6);
+@step-text-color: var(--van-text-color-2);
 @step-active-color: var(--van-success-color);
 @step-process-text-color: var(--van-text-color);
 @step-font-size: var(--van-font-size-md);

package/es/stepper/Stepper.d.ts

@@ -1,6 +1,58 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 export declare type StepperTheme = 'default' | 'round';
+declare const stepperProps: {
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    name: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    step: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    theme: PropType<StepperTheme>;
+    integer: BooleanConstructor;
+    disabled: BooleanConstructor;
+    showPlus: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showMinus: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showInput: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    longPress: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    allowEmpty: BooleanConstructor;
+    modelValue: (NumberConstructor | StringConstructor)[];
+    inputWidth: (NumberConstructor | StringConstructor)[];
+    buttonSize: (NumberConstructor | StringConstructor)[];
+    placeholder: StringConstructor;
+    disablePlus: BooleanConstructor;
+    disableMinus: BooleanConstructor;
+    disableInput: BooleanConstructor;
+    beforeChange: PropType<Interceptor>;
+    defaultValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    decimalLength: (NumberConstructor | StringConstructor)[];
+};
+export declare type StepperProps = ExtractPropTypes<typeof stepperProps>;
 declare const _default: import("vue").DefineComponent<{
     min: {
         type: (NumberConstructor | StringConstructor)[];

package/es/stepper/Stepper.js

@@ -1,7 +1,7 @@
 import { withDirectives as _withDirectives, createVNode as _createVNode, mergeProps as _mergeProps, vShow as _vShow } from "vue";
-import { ref, watch, computed, defineComponent, nextTick } from 'vue'; // Utils
+import { ref, watch, computed, nextTick, defineComponent } from 'vue'; // Utils
 
-import { isDef, addUnit, addNumber, truthProp, resetScroll, numericProp, formatNumber, getSizeStyle, preventDefault, createNamespace, callInterceptor, makeNumericProp } from '../utils'; // Composables
+import { isDef, addUnit, addNumber, truthProp, resetScroll, numericProp, formatNumber, getSizeStyle, preventDefault, createNamespace, callInterceptor, makeNumericProp, HAPTICS_FEEDBACK } from '../utils'; // Composables
 
 import { useCustomFieldValue } from '@vant/use';
 var [name, bem] = createNamespace('stepper');
@@ -10,37 +10,40 @@ var LONG_PRESS_START_TIME = 600;
 
 var isEqual = (value1, value2) => String(value1) === String(value2);
 
+var stepperProps = {
+  min: makeNumericProp(1),
+  max: makeNumericProp(Infinity),
+  name: makeNumericProp(''),
+  step: makeNumericProp(1),
+  theme: String,
+  integer: Boolean,
+  disabled: Boolean,
+  showPlus: truthProp,
+  showMinus: truthProp,
+  showInput: truthProp,
+  longPress: truthProp,
+  allowEmpty: Boolean,
+  modelValue: numericProp,
+  inputWidth: numericProp,
+  buttonSize: numericProp,
+  placeholder: String,
+  disablePlus: Boolean,
+  disableMinus: Boolean,
+  disableInput: Boolean,
+  beforeChange: Function,
+  defaultValue: makeNumericProp(1),
+  decimalLength: numericProp
+};
 export default defineComponent({
   name,
-  props: {
-    min: makeNumericProp(1),
-    max: makeNumericProp(Infinity),
-    name: makeNumericProp(''),
-    step: makeNumericProp(1),
-    theme: String,
-    integer: Boolean,
-    disabled: Boolean,
-    showPlus: truthProp,
-    showMinus: truthProp,
-    showInput: truthProp,
-    longPress: truthProp,
-    allowEmpty: Boolean,
-    modelValue: numericProp,
-    inputWidth: numericProp,
-    buttonSize: numericProp,
-    placeholder: String,
-    disablePlus: Boolean,
-    disableMinus: Boolean,
-    disableInput: Boolean,
-    beforeChange: Function,
-    defaultValue: makeNumericProp(1),
-    decimalLength: numericProp
-  },
+  props: stepperProps,
   emits: ['plus', 'blur', 'minus', 'focus', 'change', 'overlimit', 'update:modelValue'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      emit
+    } = _ref;
+
     var format = value => {
       var {
         min,
@@ -208,14 +211,14 @@ export default defineComponent({
       // fix mobile safari page scroll down issue
       // see: https://github.com/youzan/vant/issues/7690
       if (props.disableInput) {
-        event.preventDefault();
+        preventDefault(event);
       }
     };
 
     var createListeners = type => ({
       onClick: event => {
         // disable double tap scrolling on mobile safari
-        event.preventDefault();
+        preventDefault(event);
         actionType = type;
         onChange();
       },
@@ -227,7 +230,7 @@ export default defineComponent({
       onTouchcancel: onTouchEnd
     });
 
-    watch([() => props.max, () => props.min, () => props.integer, () => props.decimalLength], check);
+    watch(() => [props.max, props.min, props.integer, props.decimalLength], check);
     watch(() => props.modelValue, value => {
       if (!isEqual(value, current.value)) {
         current.value = format(value);
@@ -241,13 +244,17 @@ export default defineComponent({
     });
     useCustomFieldValue(() => props.modelValue);
     return () => _createVNode("div", {
+      "role": "group",
       "class": bem([props.theme])
     }, [_withDirectives(_createVNode("button", _mergeProps({
       "type": "button",
       "style": buttonStyle.value,
-      "class": bem('minus', {
+      "class": [bem('minus', {
         disabled: minusDisabled.value
-      })
+      }), {
+        [HAPTICS_FEEDBACK]: !minusDisabled.value
+      }],
+      "aria-disabled": minusDisabled.value || undefined
     }, createListeners('minus')), null), [[_vShow, props.showMinus]]), _withDirectives(_createVNode("input", {
       "ref": inputRef,
       "type": props.integer ? 'tel' : 'text',
@@ -259,9 +266,9 @@ export default defineComponent({
       "readonly": props.disableInput,
       "inputmode": props.integer ? 'numeric' : 'decimal',
       "placeholder": props.placeholder,
-      "aria-valuemax": +props.max,
-      "aria-valuemin": +props.min,
-      "aria-valuenow": +current.value,
+      "aria-valuemax": props.max,
+      "aria-valuemin": props.min,
+      "aria-valuenow": current.value,
       "onBlur": onBlur,
       "onInput": onInput,
       "onFocus": onFocus,
@@ -269,9 +276,12 @@ export default defineComponent({
     }, null), [[_vShow, props.showInput]]), _withDirectives(_createVNode("button", _mergeProps({
       "type": "button",
       "style": buttonStyle.value,
-      "class": bem('plus', {
+      "class": [bem('plus', {
         disabled: plusDisabled.value
-      })
+      }), {
+        [HAPTICS_FEEDBACK]: !plusDisabled.value
+      }],
+      "aria-disabled": plusDisabled.value || undefined
     }, createListeners('plus')), null), [[_vShow, props.showPlus]])]);
   }
 

package/es/stepper/index.css

@@ -1 +1 @@
-:root{--van-stepper-active-color:#e8e8e8;--van-stepper-background-color:var(--van-active-color);--van-stepper-button-icon-color:var(--van-text-color);--van-stepper-button-disabled-color:var(--van-background-color);--van-stepper-button-disabled-icon-color:var(--van-gray-5);--van-stepper-button-round-theme-color:var(--van-danger-color);--van-stepper-input-width:32px;--van-stepper-input-height:28px;--van-stepper-input-font-size:var(--van-font-size-md);--van-stepper-input-line-height:normal;--van-stepper-input-text-color:var(--van-text-color);--van-stepper-input-disabled-text-color:var(--van-gray-5);--van-stepper-input-disabled-background-color:var(--van-active-color);--van-stepper-border-radius:var(--van-border-radius-md)}.van-stepper{display:inline-block;-webkit-user-select:none;user-select:none}.van-stepper__minus,.van-stepper__plus{position:relative;box-sizing:border-box;width:var(--van-stepper-input-height);height:var(--van-stepper-input-height);margin:0;padding:0;color:var(--van-stepper-button-icon-color);vertical-align:middle;background:var(--van-stepper-background-color);border:0;cursor:pointer}.van-stepper__minus::before,.van-stepper__plus::before{width:50%;height:1px}.van-stepper__minus::after,.van-stepper__plus::after{width:1px;height:50%}.van-stepper__minus::after,.van-stepper__minus::before,.van-stepper__plus::after,.van-stepper__plus::before{position:absolute;top:50%;left:50%;background-color:currentColor;transform:translate(-50%,-50%);content:''}.van-stepper__minus:active,.van-stepper__plus:active{background-color:var(--van-stepper-active-color)}.van-stepper__minus--disabled,.van-stepper__plus--disabled{color:var(--van-stepper-button-disabled-icon-color);background-color:var(--van-stepper-button-disabled-color);cursor:not-allowed}.van-stepper__minus--disabled:active,.van-stepper__plus--disabled:active{background-color:var(--van-stepper-button-disabled-color)}.van-stepper__minus{border-radius:var(--van-stepper-border-radius) 0 0 var(--van-stepper-border-radius)}.van-stepper__minus::after{display:none}.van-stepper__plus{border-radius:0 var(--van-stepper-border-radius) var(--van-stepper-border-radius) 0}.van-stepper__input{box-sizing:border-box;width:var(--van-stepper-input-width);height:var(--van-stepper-input-height);margin:0 2px;padding:0;color:var(--van-stepper-input-text-color);font-size:var(--van-stepper-input-font-size);line-height:var(--van-stepper-input-line-height);text-align:center;vertical-align:middle;background:var(--van-stepper-background-color);border:0;border-width:1px 0;border-radius:0;-webkit-appearance:none}.van-stepper__input:disabled{color:var(--van-stepper-input-disabled-text-color);background-color:var(--van-stepper-input-disabled-background-color);-webkit-text-fill-color:var(--van-stepper-input-disabled-text-color);opacity:1}.van-stepper__input:read-only{cursor:default}.van-stepper--round .van-stepper__input{background-color:transparent}.van-stepper--round .van-stepper__minus,.van-stepper--round .van-stepper__plus{border-radius:100%}.van-stepper--round .van-stepper__minus:active,.van-stepper--round .van-stepper__plus:active{opacity:var(--van-active-opacity)}.van-stepper--round .van-stepper__minus--disabled,.van-stepper--round .van-stepper__minus--disabled:active,.van-stepper--round .van-stepper__plus--disabled,.van-stepper--round .van-stepper__plus--disabled:active{opacity:.3}.van-stepper--round .van-stepper__plus{color:var(--van-white);background:var(--van-stepper-button-round-theme-color)}.van-stepper--round .van-stepper__minus{color:var(--van-stepper-button-round-theme-color);background-color:var(--van-white);border:1px solid var(--van-stepper-button-round-theme-color)}
+:root{--van-stepper-background-color:var(--van-active-color);--van-stepper-button-icon-color:var(--van-text-color);--van-stepper-button-disabled-color:var(--van-background-color);--van-stepper-button-disabled-icon-color:var(--van-gray-5);--van-stepper-button-round-theme-color:var(--van-danger-color);--van-stepper-input-width:32px;--van-stepper-input-height:28px;--van-stepper-input-font-size:var(--van-font-size-md);--van-stepper-input-line-height:normal;--van-stepper-input-text-color:var(--van-text-color);--van-stepper-input-disabled-text-color:var(--van-text-color-3);--van-stepper-input-disabled-background-color:var(--van-active-color);--van-stepper-border-radius:var(--van-border-radius-md)}.van-stepper{display:inline-block;-webkit-user-select:none;user-select:none}.van-stepper__minus,.van-stepper__plus{position:relative;box-sizing:border-box;width:var(--van-stepper-input-height);height:var(--van-stepper-input-height);margin:0;padding:0;color:var(--van-stepper-button-icon-color);vertical-align:middle;background:var(--van-stepper-background-color);border:0;cursor:pointer}.van-stepper__minus::before,.van-stepper__plus::before{width:50%;height:1px}.van-stepper__minus::after,.van-stepper__plus::after{width:1px;height:50%}.van-stepper__minus::after,.van-stepper__minus::before,.van-stepper__plus::after,.van-stepper__plus::before{position:absolute;top:50%;left:50%;background-color:currentColor;transform:translate(-50%,-50%);content:''}.van-stepper__minus--disabled,.van-stepper__plus--disabled{color:var(--van-stepper-button-disabled-icon-color);background-color:var(--van-stepper-button-disabled-color);cursor:not-allowed}.van-stepper__minus{border-radius:var(--van-stepper-border-radius) 0 0 var(--van-stepper-border-radius)}.van-stepper__minus::after{display:none}.van-stepper__plus{border-radius:0 var(--van-stepper-border-radius) var(--van-stepper-border-radius) 0}.van-stepper__input{box-sizing:border-box;width:var(--van-stepper-input-width);height:var(--van-stepper-input-height);margin:0 2px;padding:0;color:var(--van-stepper-input-text-color);font-size:var(--van-stepper-input-font-size);line-height:var(--van-stepper-input-line-height);text-align:center;vertical-align:middle;background:var(--van-stepper-background-color);border:0;border-width:1px 0;border-radius:0;-webkit-appearance:none}.van-stepper__input:disabled{color:var(--van-stepper-input-disabled-text-color);background-color:var(--van-stepper-input-disabled-background-color);-webkit-text-fill-color:var(--van-stepper-input-disabled-text-color);opacity:1}.van-stepper__input:read-only{cursor:default}.van-stepper--round .van-stepper__input{background-color:transparent}.van-stepper--round .van-stepper__minus,.van-stepper--round .van-stepper__plus{border-radius:100%}.van-stepper--round .van-stepper__minus--disabled,.van-stepper--round .van-stepper__plus--disabled{opacity:.3;cursor:not-allowed}.van-stepper--round .van-stepper__plus{color:var(--van-white);background:var(--van-stepper-button-round-theme-color)}.van-stepper--round .van-stepper__minus{color:var(--van-stepper-button-round-theme-color);background-color:var(--van-background-color-light);border:1px solid var(--van-stepper-button-round-theme-color)}