feat(Stepper): add auto-fixed prop (#11071)

* perf: improve the type of setTimeout with 'ReturnType<typeof setTimeout>'

* fix: fix type 'number' is not assignable to type 'Timeout'

* feat: add 'auto-fixed' prop to control whether to fixed the value that out of rang

* docs(Stepper): fix prop name

* perf: whether to format the value entered by the user

packages/vant/src/stepper/README.md

@@ -126,6 +126,7 @@ export default {
 | v-model | Current value | _number \| string_ | - |
 | min | Min value | _number \| string_ | `1` |
 | max | Max value | _number \| string_ | - |
+| auto-fixed | Whether to auto fix value that is out of range, set to `false` and value that is out of range won’t be auto fixed | _boolean_ | `true` |
 | default-value | Default value, valid when v-model is empty | _number \| string_ | `1` |
 | step | Value change step | _number \| string_ | `1` |
 | name | Stepper name, usually a unique string or number | _number \| string_ | - |

packages/vant/src/stepper/README.zh-CN.md

@@ -47,7 +47,7 @@ export default {
 
 ### 限制输入范围
 
-通过 `min` 和 `max` 属性限制输入值的范围。
+通过 `min` 和 `max` 属性限制输入值的范围，默认超出范围后会自动校正最大值或最小值，通过 `auto-fixed` 可以关闭自动校正。
 
 ```html
 <van-stepper v-model="value" min="5" max="8" />
@@ -146,6 +146,7 @@ export default {
 | v-model | 当前输入的值 | _number \| string_ | - |
 | min | 最小值 | _number \| string_ | `1` |
 | max | 最大值 | _number \| string_ | - |
+| auto-fixed | 是否自动校正超出限制范围的数值，设置为 `false` 后输入超过限制范围的数值将不会自动校正 | _boolean_ | `true` |
 | default-value | 初始值，当 v-model 为空时生效 | _number \| string_ | `1` |
 | step | 步长，每次点击时改变的值 | _number \| string_ | `1` |
 | name | 标识符，通常为一个唯一的字符串或数字，可以在 `change` 事件回调参数中获取 | _number \| string_ | - |

packages/vant/src/stepper/Stepper.tsx

@@ -52,6 +52,7 @@ export const stepperProps = {
   showMinus: truthProp,
   showInput: truthProp,
   longPress: truthProp,
+  autoFixed: truthProp,
   allowEmpty: Boolean,
   modelValue: numericProp,
   inputWidth: numericProp,
@@ -83,7 +84,7 @@ export default defineComponent({
   ],
 
   setup(props, { emit }) {
-    const format = (value: Numeric) => {
+    const format = (value: Numeric, autoFixed = true) => {
       const { min, max, allowEmpty, decimalLength } = props;
 
       if (allowEmpty && value === '') {
@@ -93,7 +94,9 @@ export default defineComponent({
       value = formatNumber(String(value), !props.integer);
       value = value === '' ? 0 : +value;
       value = Number.isNaN(value) ? +min : value;
-      value = Math.max(Math.min(+max, value), +min);
+
+      // whether to format the value entered by the user
+      value = autoFixed ? Math.max(Math.min(+max, value), +min) : value;
 
       // format decimal
       if (isDef(decimalLength)) {
@@ -204,7 +207,7 @@ export default defineComponent({
 
     const onBlur = (event: Event) => {
       const input = event.target as HTMLInputElement;
-      const value = format(input.value);
+      const value = format(input.value, props.autoFixed);
       input.value = String(value);
       current.value = value;
       nextTick(() => {

packages/vant/src/stepper/test/index.spec.ts

@@ -249,6 +249,26 @@ test('should format input value when stepper blurred', async () => {
   expect(wrapper.emitted('blur')).toBeTruthy();
 });
 
+test('should not format input value when stepper blurred if set auto-fixed to false', async () => {
+  const wrapper = mount(Stepper, {
+    props: {
+      min: 5,
+      max: 8,
+      autoFixed: false,
+    },
+  });
+
+  const input = wrapper.find('input');
+
+  input.element.value = '2';
+  await input.trigger('blur');
+  expect(wrapper.emitted('update:modelValue')![1]).toEqual([2]);
+
+  input.element.value = '10';
+  await input.trigger('blur');
+  expect(wrapper.emitted('update:modelValue')![2]).toEqual([10]);
+});
+
 test('should update input width when using input-width prop', () => {
   const wrapper = mount(Stepper, {
     props: {