feat(numeric): [numeric] add props of numeric

examples/sites/demos/apis/numeric.js

@@ -309,13 +309,29 @@ export default {
             'en-US': 'Whether to enter only multiples of step'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
-          pcDemo: 'step',
+          pcDemo: 'about-step',
           mobileDemo: 'step',
           mfDemo: ''
         },
+        {
+          name: 'step-restore',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '当输入值，非step步长的倍数时，是否还原上一个值',
+            'en-US': 'When the input value is not a multiple of the step size, should the previous value be restored'
+          },
+          meta: {
+            stable: '3.20.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'about-step',
+          mobileDemo: '',
+          mfDemo: ''
+        },
         {
           name: 'strict-input',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '严格控制输入，包含合法性输入与小数点长度验证，不允许输入超过精度设置',

examples/sites/demos/pc/app/numeric/about-step-composition-api.vue

@@ -1,11 +1,31 @@
 <template>
-  <tiny-numeric v-model="value" :step="step"></tiny-numeric>
+  <div class="m-layout">
+    <div class="m-b10">
+      <div class="m-b10">1、step-restore 用法</div>
+      <tiny-numeric v-model="value" :step="step" step-restore></tiny-numeric>
+    </div>
+    <div>
+      <div class="m-b10">2、step-strictly 用法</div>
+      <tiny-numeric v-model="valueStep" :step="step" step-strictly></tiny-numeric>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(0)
-const step = ref(2)
+const step = ref(5)
+const valueStep = ref(0)
 </script>
+
+<style scoped>
+.m-layout {
+  display: flex;
+  flex-direction: column;
+}
+.m-b10 {
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/pc/app/numeric/about-step.spec.ts

@@ -4,15 +4,23 @@ test('步长', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('numeric#about-step')
 
-  const input = page.getByRole('spinbutton')
-  const increaseBtn = page.locator('.tiny-numeric__increase')
-  const decreaseBtn = page.locator('.tiny-numeric__decrease')
-  const value = Number(await input.inputValue())
-  const step = 2
-  await decreaseBtn.click()
-  const decreasedVal = Number(await input.inputValue())
-  expect(value).toEqual(decreasedVal + step)
-  await increaseBtn.click()
-  const increasedVal = Number(await input.inputValue())
-  expect(decreasedVal).toEqual(increasedVal - step)
+  await page.getByRole('button').nth(1).click()
+  await page.getByRole('spinbutton').first().fill('56')
+  await page
+    .locator('div')
+    .filter({ hasText: /step-restore/ })
+    .first()
+    .click()
+  const inputValue = await page.locator('.tiny-numeric__input-inner').first().inputValue()
+  expect(inputValue).toEqual('5')
+
+  await page.getByRole('button').nth(3).click()
+  await page.getByRole('spinbutton').nth(1).fill('56')
+  await page
+    .locator('div')
+    .filter({ hasText: /step-strictly/ })
+    .first()
+    .click()
+  const input = await page.locator('.tiny-numeric__input-inner').nth(1).inputValue()
+  expect(input).toEqual('55')
 })

examples/sites/demos/pc/app/numeric/about-step.vue

@@ -1,5 +1,14 @@
 <template>
-  <tiny-numeric v-model="value" :step="step"></tiny-numeric>
+  <div class="m-layout">
+    <div class="m-b10">
+      <div class="m-b10">1、step-restore 用法</div>
+      <tiny-numeric v-model="value" :step="step" step-restore></tiny-numeric>
+    </div>
+    <div>
+      <div class="m-b10">2、step-strictly 用法</div>
+      <tiny-numeric v-model="valueStep" :step="step" step-strictly></tiny-numeric>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -12,8 +21,19 @@ export default {
   data() {
     return {
       value: 0,
-      step: 2
+      valueStep: 0,
+      step: 5
     }
   }
 }
 </script>
+
+<style scoped>
+.m-layout {
+  display: flex;
+  flex-direction: column;
+}
+.m-b10 {
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/pc/app/numeric/webdoc/numeric.js

@@ -35,8 +35,10 @@ export default {
         'en-US': 'Step'
       },
       desc: {
-        'zh-CN': '可通过<code>step</code>属性设置计数器的加减数值。',
-        'en-US': 'Set the addition and subtraction values of the counter through the<code>step</code>attribute.'
+        'zh-CN':
+          '可通过<code>step</code>属性设置计数器的加减数值，<code>step-restore</code>属性设置是否还原上一个值，<code>step-strictly</code>属性设置只能输入 step 的倍数',
+        'en-US':
+          'Set the addition and subtraction values of the counter through the<code>step</code>attribute,<code>step-restore</code>property setting whether to restore the previous value,<code>step restricted</code>The attribute setting can only input multiples of step'
       },
       codeFiles: ['about-step.vue']
     },

packages/renderless/src/numeric/index.ts

@@ -302,6 +302,11 @@ export const setCurrentValue =
       if (validateEvent) {
         dispatch(constants.COMPONENT_NAME, constants.EVENT_NAME.change, [state.currentValue])
       }
+
+      if (props.stepRestore && props.step > 1 && newVal % Number(props.step) !== 0) {
+        state.currentValue = oldVal
+        state.userInput = oldVal
+      }
     }
   }
 

packages/vue/src/numeric/src/index.ts

@@ -97,6 +97,10 @@ export const numericProps = {
     type: [Number, String],
     default: 1
   },
+  stepRestore: {
+    type: Boolean,
+    default: false
+  },
   stepStrictly: {
     type: Boolean,
     default: false

packages/vue/src/numeric/src/pc.vue

@@ -223,6 +223,7 @@ export default defineComponent({
     ...props,
     'step',
     'tabindex',
+    'stepRestore',
     'stepStrictly',
     'max',
     'min',