Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP]:feat(numeric): [numeric] add props of numeric #2546

Closed
wants to merge 1 commit into from
Closed

[WIP]:feat(numeric): [numeric] add props of numeric #2546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions examples/sites/demos/apis/numeric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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': '严格控制输入，包含合法性输入与小数点长度验证，不允许输入超过精度设置',
Expand Down
24 changes: 22 additions & 2 deletions examples/sites/demos/pc/app/numeric/about-step-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Replace hardcoded Chinese text with i18n keys

The demo labels should use internationalization for better maintainability and global accessibility.

-      <div class="m-b10">1、step-restore 用法</div>
+      <div class="m-b10">{{ t('numeric.stepRestore.title') }}</div>
-      <div class="m-b10">2、step-strictly 用法</div>
+      <div class="m-b10">{{ t('numeric.stepStrictly.title') }}</div>

Also applies to: 8-8

<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>
Comment on lines 1 to +31
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Documentation and test coverage needed for step features

The verification reveals that:

  • No documentation exists for the step-restore and step-strictly features in the markdown files
  • The existing test file numeric-size.spec.ts doesn't cover these step features
  • While a demo exists, formal documentation and test coverage are still required

Action items:

  • Add documentation for step-restore and step-strictly features in examples/sites/demos/pc/app/numeric/webdoc/numeric.*.md
  • Create test cases to verify the functionality of these step features
🔗 Analysis chain

Verify documentation and test coverage

While this example demonstrates the new step-restore and step-strictly features, the PR objectives indicate that tests and documentation are missing.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for presence of test files and documentation
echo "Checking for test coverage..."
fd "numeric.*spec" --type f

echo "Checking for documentation..."
fd "numeric.*md" --type f

Length of output: 622

Script:

#!/bin/bash
# Check if step-restore and step-strictly features are documented
echo "Checking documentation content for step features..."
rg -i "step-restore|step-strictly" examples/sites/demos/pc/app/numeric/webdoc/numeric.*.md

echo "Checking test coverage for step features..."
rg -i "step-restore|step-strictly" examples/sites/demos/pc/app/numeric/numeric-size.spec.ts

Length of output: 454

30 changes: 19 additions & 11 deletions examples/sites/demos/pc/app/numeric/about-step.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Comment on lines +7 to +15
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance test clarity and coverage for step-restore feature

The test implementation could be improved in several ways:

  1. Add comments explaining the test scenario and expected behavior
  2. Document why '56' becomes '5' (what's the step value?)
  3. Use data-testid instead of CSS class selectors
  4. Add test cases for edge scenarios

Consider refactoring like this:

+ // Test step-restore feature:
+ // When input value is not a multiple of step (step = 5),
+ // it should restore to the nearest valid value
  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()
+ const inputValue = await page.getByTestId('numeric-input').first().inputValue()
  expect(inputValue).toEqual('5')

+ // Add edge cases
+ await page.getByRole('spinbutton').first().fill('4.9')
+ await page.getByTestId('step-restore').click()
+ expect(await page.getByTestId('numeric-input').first().inputValue()).toEqual('5')

Committable suggestion skipped: line range outside the PR's diff.


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')
Comment on lines +17 to +25
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve test structure and coverage for step-strictly feature

Similar to the previous test segment, this implementation needs improvements:

  1. Document the test scenario and expected behavior
  2. Explain the rounding behavior (56 → 55)
  3. Extract common test patterns into helper functions
  4. Add edge cases

Consider refactoring like this:

+ // Test step-strictly feature:
+ // When input value is not a multiple of step (step = 5),
+ // it should round to the nearest multiple
+ const testStrictStep = async (input: string, expected: string) => {
+   await page.getByTestId('numeric-input').nth(1).fill(input)
+   await page.getByTestId('step-strictly').click()
+   expect(await page.getByTestId('numeric-input').nth(1).inputValue())
+     .toEqual(expected)
+ }

  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')
+ await testStrictStep('56', '55')  // Rounds down to nearest multiple of 5
+ await testStrictStep('53', '55')  // Rounds up to nearest multiple of 5
+ await testStrictStep('50', '50')  // Already a multiple of 5

Committable suggestion skipped: line range outside the PR's diff.

})
24 changes: 22 additions & 2 deletions examples/sites/demos/pc/app/numeric/about-step.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Externalize UI text for internationalization

The Chinese text should be moved to translation files to support internationalization.

-      <div class="m-b10">1、step-restore 用法</div>
+      <div class="m-b10">{{ t('numeric.stepRestore.title') }}</div>
-      <div class="m-b10">2、step-strictly 用法</div>
+      <div class="m-b10">{{ t('numeric.stepStrictly.title') }}</div>

Also applies to: 8-8

<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">
Expand All @@ -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>
6 changes: 4 additions & 2 deletions examples/sites/demos/pc/app/numeric/webdoc/numeric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Comment on lines +38 to +41
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve English translation and formatting

The English description has several issues that should be addressed for better clarity and consistency:

  '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'
+   'Set the increment/decrement value through the <code>step</code> attribute, use the <code>step-restore</code> attribute to control whether to restore the previous value, and the <code>step-strictly</code> attribute to restrict input to multiples of the step value'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'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'
'zh-CN':
'可通过<code>step</code>属性设置计数器的加减数值，<code>step-restore</code>属性设置是否还原上一个值，<code>step-strictly</code>属性设置只能输入 step 的倍数',
'en-US':
'Set the increment/decrement value through the <code>step</code> attribute, use the <code>step-restore</code> attribute to control whether to restore the previous value, and the <code>step-strictly</code> attribute to restrict input to multiples of the step value'

},
codeFiles: ['about-step.vue']
},
Expand Down
5 changes: 5 additions & 0 deletions packages/renderless/src/numeric/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}

Expand Down
4 changes: 4 additions & 0 deletions packages/vue/src/numeric/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@ export const numericProps = {
type: [Number, String],
default: 1
},
stepRestore: {
type: Boolean,
default: false
},
stepStrictly: {
type: Boolean,
default: false
Expand Down
1 change: 1 addition & 0 deletions packages/vue/src/numeric/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ export default defineComponent({
...props,
'step',
'tabindex',
'stepRestore',
'stepStrictly',
'max',
'min',
Expand Down
Loading