fix(number-input): unexpected behavior in sync mode

fix vexip-ui#299
alphaelf · Apr 5, 2023 · 9c77dc3 · 9c77dc3
1 parent 0a39d69
commit 9c77dc3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 35 deletions.
diff --git a/components/number-input/number-input.vue b/components/number-input/number-input.vue
@@ -106,7 +106,6 @@ import { numberInputProps } from './props'
 type InputEventType = 'input' | 'change'
 
 const numberRE = /^-?[0-9]*\.?[0-9]*$/
-const isNullOrNaN = (value: unknown) => isNull(value) || Number.isNaN(value)
 const isEmpty = (value: unknown) => !value && value !== 0
 
 export default defineComponent({
@@ -251,12 +250,6 @@ export default defineComponent({
         ? props.formatter(preciseNumber.value as number)
         : preciseNumber.value.toString()
     })
-    const plusDisabled = computed(() => {
-      return !isNullOrNaN(currentValue.value) && toNumber(currentValue.value) >= props.max
-    })
-    const minusDisabled = computed(() => {
-      return !isNullOrNaN(currentValue.value) && toNumber(currentValue.value) <= props.min
-    })
     const hasValue = computed(() => !!(currentValue.value || currentValue.value === 0))
     const showClear = computed(() => {
       return !props.disabled && props.clearable && isHover.value && hasValue.value
@@ -274,7 +267,9 @@ export default defineComponent({
     watch(
       () => props.value,
       value => {
-        currentValue.value = isNull(value) ? NaN : value
+        if (!focused.value || !numberRE.test(String(currentValue.value))) {
+          currentValue.value = isNull(value) ? NaN : value
+        }
       }
     )
 
@@ -301,10 +296,6 @@ export default defineComponent({
     }
 
     function plusNumber(event: MouseEvent) {
-      if (plusDisabled.value) {
-        return
-      }
-
       !focused.value && focus()
       changeStep(
         'plus',
@@ -313,10 +304,6 @@ export default defineComponent({
     }
 
     function minusNumber(event: MouseEvent) {
-      if (minusDisabled.value) {
-        return
-      }
-
       !focused.value && focus()
       changeStep(
         'minus',
@@ -367,7 +354,6 @@ export default defineComponent({
 
       let value = stringValue.trim()
 
-      debugger
       if (type === 'change' && stringValue && !numberRE.test(stringValue)) {
         const floatValue = parseFloat(stringValue)
 
@@ -387,9 +373,7 @@ export default defineComponent({
 
     function setValue(value: string | number, type: InputEventType) {
       if (type !== 'input') {
-        currentValue.value = isEmpty(value)
-          ? NaN
-          : boundRange(toNumber(value), props.min, props.max)
+        currentValue.value = isEmpty(value) ? NaN : toNumber(value)
       } else {
         currentValue.value = value
       }
@@ -409,20 +393,27 @@ export default defineComponent({
     }
 
     function emitChangeEvent(type: InputEventType) {
-      const value = isEmpty(currentValue.value) ? getEmptyValue() : toNumber(currentValue.value)
+      const empty = isEmpty(currentValue.value)
+      const value = empty ? getEmptyValue() : toNumber(currentValue.value)
 
       type = type === 'input' ? 'input' : 'change'
 
       if (type === 'change') {
-        if (lastValue === value) return
+        const boundValue = empty ? value : boundRange(toNumber(value), props.min, props.max)
+        const boundChange = boundValue !== value
 
-        lastValue = value
+        if (!empty) {
+          currentValue.value = boundValue
+        }
 
-        !props.sync && setFieldValue(value)
-        emitEvent(props.onChange, value)
+        if (!props.sync && lastValue === boundValue) return
 
-        if (!props.sync) {
-          emit('update:value', value)
+        lastValue = boundValue
+        ;(!props.sync || boundChange) && setFieldValue(boundValue)
+        emitEvent(props.onChange, boundValue)
+
+        if (!props.sync || boundChange) {
+          emit('update:value', boundValue)
           validateField()
         }
       } else {
@@ -481,8 +472,6 @@ export default defineComponent({
       inputStyle,
       preciseNumber,
       formattedValue,
-      plusDisabled,
-      minusDisabled,
       hasValue,
       showClear,
       inputValue,

diff --git a/docs/demos/number-input/range/demo.en-US.vue b/docs/demos/number-input/range/demo.en-US.vue
@@ -3,8 +3,9 @@
     v-model:value="value"
     :min="0"
     :max="10"
-    style="max-width: 300px;"
+    style="max-width: 300px"
   ></NumberInput>
+  <p>Number Input Value: {{ value }}</p>
 </template>
 
 <script setup lang="ts">

diff --git a/docs/demos/number-input/range/demo.zh-CN.vue b/docs/demos/number-input/range/demo.zh-CN.vue
@@ -3,8 +3,9 @@
     v-model:value="value"
     :min="0"
     :max="10"
-    style="max-width: 300px;"
+    style="max-width: 300px"
   ></NumberInput>
+  <p>Number Input Value: {{ value }}</p>
 </template>
 
 <script setup lang="ts">

diff --git a/docs/demos/number-input/sync/demo.en-US.vue b/docs/demos/number-input/sync/demo.en-US.vue
@@ -2,8 +2,10 @@
   <NumberInput
     v-model:value="value"
     sync
-    clearable=""
-    style="max-width: 300px;"
+    clearable
+    :min="-10"
+    :max="10"
+    style="max-width: 300px"
   ></NumberInput>
   <p>Number Input Value: {{ value }}</p>
 </template>

diff --git a/docs/demos/number-input/sync/demo.zh-CN.vue b/docs/demos/number-input/sync/demo.zh-CN.vue
@@ -2,8 +2,10 @@
   <NumberInput
     v-model:value="value"
     sync
-    clearable=""
-    style="max-width: 300px;"
+    clearable
+    :min="-10"
+    :max="10"
+    style="max-width: 300px"
   ></NumberInput>
   <p>Number Input Value: {{ value }}</p>
 </template>