feat(number-input): add out of range effect for input control

alphaelf · Apr 5, 2023 · 078681c · 078681c
1 parent 9c77dc3
commit 078681c
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 2 deletions.
diff --git a/common/config/src/locale/en-US.ts b/common/config/src/locale/en-US.ts
@@ -90,6 +90,11 @@ export function enUSLocale() {
       cancel: 'Cancel'
     },
 
+    numberInput: {
+      placeholder: 'Please input number',
+      outOfRange: 'Out of range'
+    },
+
     pagination: {
       page: 'Page | Pages',
       perPage: '/ Page',

diff --git a/common/config/src/locale/helper.ts b/common/config/src/locale/helper.ts
@@ -91,6 +91,11 @@ export interface LocaleConfig {
     cancel: string
   },
 
+  numberInput: {
+    placeholder: string,
+    outOfRange: string
+  },
+
   pagination: {
     page: string,
     perPage: string,

diff --git a/common/config/src/locale/ta-IN.ts b/common/config/src/locale/ta-IN.ts
@@ -90,6 +90,11 @@ export function taINLocale() {
       cancel: 'நிராகரி'
     },
 
+    numberInput: {
+      placeholder: 'தயவுசெய்து எண் உள்ளிடவும்',
+      outOfRange: 'வரம்புக்கு வெளியே'
+    },
+
     pagination: {
       page: 'பக்கம் | பக்கங்கள்',
       perPage: '/ பக்கம்',

diff --git a/common/config/src/locale/zh-CN.ts b/common/config/src/locale/zh-CN.ts
@@ -90,6 +90,11 @@ export function zhCNLocale() {
       cancel: '取消'
     },
 
+    numberInput: {
+      placeholder: '请输入数字',
+      outOfRange: '超出范围'
+    },
+
     pagination: {
       page: '页',
       perPage: '条/页',

diff --git a/components/number-input/number-input.vue b/components/number-input/number-input.vue
@@ -27,6 +27,7 @@
       :readonly="isReadonly"
       :placeholder="props.placeholder ?? locale.placeholder"
       role="spinbutton"
+      :title="outOfRange ? locale.outOfRange : undefined"
       :aria-valuenow="preciseNumber"
       :aria-valuemin="props.min !== -Infinity ? props.min : undefined"
       :aria-valuemax="props.max !== Infinity ? props.max : undefined"
@@ -107,6 +108,7 @@ type InputEventType = 'input' | 'change'
 
 const numberRE = /^-?[0-9]*\.?[0-9]*$/
 const isEmpty = (value: unknown) => !value && value !== 0
+const isNullOrNaN = (value: unknown) => isNull(value) || Number.isNaN(value)
 
 export default defineComponent({
   name: 'NumberInput',
@@ -208,11 +210,18 @@ export default defineComponent({
 
     let lastValue = props.value
 
+    const outOfRange = computed(() => {
+      return (
+        !isNullOrNaN(currentValue.value) &&
+        (toNumber(currentValue.value) > props.max || toNumber(currentValue.value) < props.min)
+      )
+    })
     const className = computed(() => {
       const [display, fade] = (props.controlType || 'right').split('-')
 
       return [
         nh.b(),
+        nh.bs('vars'),
         nh.ns('input-vars'),
         {
           [nh.bm('inherit')]: props.inherit,
@@ -222,7 +231,8 @@ export default defineComponent({
           [nh.bm(props.size)]: props.size !== 'default',
           [nh.bm(props.state)]: props.state !== 'default',
           [nh.bm(`control-${display}`)]: display !== 'right',
-          [nh.bm('control-fade')]: fade
+          [nh.bm('control-fade')]: fade,
+          [nh.bm('out-of-range')]: outOfRange.value
         }
       ]
     })
@@ -460,12 +470,13 @@ export default defineComponent({
     return {
       props,
       nh,
-      locale: useLocale('input', toRef(props, 'locale')),
+      locale: useLocale('numberInput', toRef(props, 'locale')),
       icons: useIcons(),
       idFor,
       focused,
       isHover,
 
+      outOfRange,
       className,
       hasPrefix,
       hasSuffix,

diff --git a/components/number-input/tests/number-input.spec.tsx b/components/number-input/tests/number-input.spec.tsx
@@ -427,4 +427,25 @@ describe('NumberInput', () => {
     await nextTick()
     expect(onChange).toHaveBeenCalledWith(NUMBER)
   })
+
+  it('range', async () => {
+    const onChange = vi.fn()
+    const wrapper = mount(NumberInput, {
+      props: { min: 5, max: 10, onChange }
+    })
+    const input = wrapper.find('input').element
+
+    emitChange(input, 11)
+    await nextTick()
+    expect(onChange).toHaveBeenLastCalledWith(10)
+
+    emitChange(input, 4)
+    await nextTick()
+    expect(onChange).toHaveBeenLastCalledWith(5)
+
+    emitInput(input, 11)
+    vi.runAllTimers()
+    await nextTick()
+    expect(wrapper.find('.vxp-number-input').classes()).toContain('vxp-number-input--out-of-range')
+  })
 })
diff --git a/style/input.scss b/style/input.scss
@@ -158,6 +158,7 @@ $input: map.merge(
     border: 0;
     border-radius: get-css-var('input-radius');
     outline: 0;
+    transition: get-css-var('transition-color');
 
     &:disabled {
       cursor: not-allowed;

diff --git a/style/number-input.scss b/style/number-input.scss
@@ -4,7 +4,19 @@
 @use './design' as *;
 @use './input.scss' as input;
 
+$number-input: () !default;
+$number-input: map.merge(
+  (
+    control-color-out: get-css-var('color-error-base')
+  ),
+  $number-input
+);
+
 .#{$namespace}-number-input {
+  &-vars {
+    @include define-preset-values('number-input', $number-input);
+  }
+
   @include basis;
   @include input.handler;
 
@@ -14,6 +26,10 @@
     }
   }
 
+  &--out-of-range &__control {
+    color: get-css-var('number-input-control-color-out');
+  }
+
   &__clear,
   &__loading {
     right: calc(get-css-var('input-h-padding') + 20px);