From 2372d82cd90579f6048b13a6de8ff072c1ca4d29 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 11 May 2024 23:18:02 +0800
Subject: [PATCH] fix: steps, min value, empty initial value

---
 .../src/NumberField/NumberFieldDecrement.vue  |   5 +-
 .../src/NumberField/NumberFieldIncrement.vue  |   5 +-
 .../src/NumberField/NumberFieldInput.vue      |   1 +
 .../src/NumberField/NumberFieldRoot.vue       |  51 +++--
 .../NumberField/story/NumberField.story.vue   |   9 +-
 .../story/NumberFieldChromatic.story.vue      | 201 ++++++++++++++++++
 .../src/NumberField/story/_NumberField.vue    |  22 ++
 packages/radix-vue/src/NumberField/utils.ts   |  25 +++
 8 files changed, 289 insertions(+), 30 deletions(-)
 create mode 100644 packages/radix-vue/src/NumberField/story/NumberFieldChromatic.story.vue
 create mode 100644 packages/radix-vue/src/NumberField/story/_NumberField.vue

diff --git a/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue b/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue
index 7bfd2c366..c24d18819 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue
@@ -27,7 +27,7 @@ onTrigger(() => {
   rootContext.handleDecrease()
 })
 
-const isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isMin.value)
+const isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isDecreaseDisabled.value)
 </script>
 
 <template>
@@ -43,8 +43,7 @@ const isDisabled = computed(() => rootContext.disabled?.value || props.disabled
     :disabled="isDisabled ? '' : undefined"
     :data-disabled="isDisabled ? '' : undefined"
     :data-pressed="isPressed ? 'true' : undefined"
-    @pointerdown.left="() => {
-      rootContext.inputEl.value?.focus()
+    @pointerdown.left.prevent="() => {
       handlePressStart()
     }"
     @pointerup.left="() => {
diff --git a/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue b/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue
index 49c508e61..19b67ec72 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue
@@ -27,7 +27,7 @@ onTrigger(() => {
   rootContext.handleIncrease()
 })
 
-const isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isMax.value)
+const isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isIncreaseDisabled.value)
 </script>
 
 <template>
@@ -43,8 +43,7 @@ const isDisabled = computed(() => rootContext.disabled?.value || props.disabled
     :disabled="isDisabled ? '' : undefined"
     :data-disabled="isDisabled ? '' : undefined"
     :data-pressed="isPressed ? 'true' : undefined"
-    @pointerdown.left="() => {
-      rootContext.inputEl.value?.focus()
+    @pointerdown.left.prevent="() => {
       handlePressStart()
     }"
     @pointerup.left="() => {
diff --git a/packages/radix-vue/src/NumberField/NumberFieldInput.vue b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
index 22da6ec90..c4e8adc17 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldInput.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
@@ -29,6 +29,7 @@ function handleWheelEvent(event: WheelEvent) {
   if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))
     return
 
+  event.preventDefault()
   if (event.deltaY > 0)
     rootContext.handleIncrease()
   else if (event.deltaY < 0)
diff --git a/packages/radix-vue/src/NumberField/NumberFieldRoot.vue b/packages/radix-vue/src/NumberField/NumberFieldRoot.vue
index 41790acd2..7b2734456 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldRoot.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldRoot.vue
@@ -46,8 +46,8 @@ interface NumberFieldRootContext {
   labelId: string
   max: Ref<number | undefined>
   min: Ref<number | undefined>
-  isMin: Ref<boolean>
-  isMax: Ref<boolean>
+  isDecreaseDisabled: Ref<boolean>
+  isIncreaseDisabled: Ref<boolean>
 }
 
 export const [injectNumberFieldRootContext, provideNumberFieldRootContext] = createContext<NumberFieldRootContext>('NumberFieldRoot')
@@ -55,7 +55,7 @@ export const [injectNumberFieldRootContext, provideNumberFieldRootContext] = cre
 
 <script setup lang="ts">
 import { Primitive, usePrimitiveElement } from '@/Primitive'
-import { useNumberFormatter, useNumberParser } from './utils'
+import { handleDecimalOperation, useNumberFormatter, useNumberParser } from './utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -63,10 +63,11 @@ defineOptions({
 
 const props = withDefaults(defineProps<NumberFieldRootProps>(), {
   as: 'div',
-  defaultValue: 0,
+  defaultValue: undefined,
+  step: 1,
 })
 const emits = defineEmits<NumberFieldRootEmits>()
-const { disabled, min, max } = toRefs(props)
+const { disabled, min, max, step } = toRefs(props)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
@@ -78,14 +79,32 @@ const labelId = useId('number-field-label')
 const isFormControl = useFormControl(currentElement)
 const inputEl = ref<HTMLInputElement>()
 
-const isMin = computed(() => clampInputValue(modelValue.value) === min.value)
-const isMax = computed(() => clampInputValue(modelValue.value) === max.value)
+const isDecreaseDisabled = computed(() => (
+  clampInputValue(modelValue.value) === min.value
+  || (min.value && !isNaN(modelValue.value) ? (handleDecimalOperation('-', modelValue.value, step.value) < min.value) : false)),
+)
+const isIncreaseDisabled = computed(() => (
+  clampInputValue(modelValue.value) === max.value
+  || (max.value && !isNaN(modelValue.value) ? (handleDecimalOperation('+', modelValue.value, step.value) > max.value) : false)),
+)
+
+function handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) {
+  if (isNaN(modelValue.value)) {
+    modelValue.value = min.value ?? 0
+  }
+  else {
+    if (type === 'increase')
+      modelValue.value = clampInputValue(modelValue.value + ((step.value ?? 1) * multiplier))
+    else
+      modelValue.value = clampInputValue(modelValue.value - ((step.value ?? 1) * multiplier))
+  }
+}
 
 function handleIncrease(multiplier = 1) {
-  modelValue.value = clampInputValue(modelValue.value + ((props.step ?? 1) * multiplier))
+  handleChangingValue('increase', multiplier)
 }
 function handleDecrease(multiplier = 1) {
-  modelValue.value = clampInputValue(modelValue.value - ((props.step ?? 1) * multiplier))
+  handleChangingValue('decrease', multiplier)
 }
 
 function handleMinMaxValue(type: 'min' | 'max') {
@@ -111,7 +130,7 @@ const inputMode = computed<HTMLAttributes['inputmode']>(() => {
 // Replace negative textValue formatted using currencySign: 'accounting'
 // with a textValue that can be announced using a minus sign.
 const textValueFormatter = useNumberFormatter(props.locale, props.formatOptions)
-const textValue = computed(() => Number.isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value))
+const textValue = computed(() => isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value))
 
 function validate(val: string) {
   return numberParser.isValidPartialNumber(val, min.value, max.value)
@@ -125,10 +144,10 @@ function setInputValue(val: string) {
 function clampInputValue(val: number) {
   // Clamp to min and max, round to the nearest step, and round to specified number of digits
   let clampedValue: number
-  if (props.step === undefined || Number.isNaN(props.step))
+  if (step.value === undefined || isNaN(step.value))
     clampedValue = clamp(val, min.value, max.value)
   else
-    clampedValue = snapValueToStep(val, min.value, max.value, props.step)
+    clampedValue = snapValueToStep(val, min.value, max.value, step.value)
 
   clampedValue = numberParser.parse(numberFormatter.format(clampedValue))
   return clampedValue
@@ -139,14 +158,12 @@ function applyInputValue(val: string) {
     return
 
   const parsedValue = numberParser.parse(val)
-  // modelValue.value = Number.isNaN(newValue) ? Number.NaN : newValue
-
   // Set to empty state if input value is empty
   if (!val.length)
     return setInputValue(modelValue.value === undefined ? '' : textValue.value)
 
   // if it failed to parse, then reset input to formatted version of current number
-  if (Number.isNaN(parsedValue))
+  if (isNaN(parsedValue))
     return setInputValue(textValue.value)
 
   modelValue.value = clampInputValue(parsedValue)
@@ -168,8 +185,8 @@ provideNumberFieldRootContext({
   disabled,
   max,
   min,
-  isMin,
-  isMax,
+  isDecreaseDisabled,
+  isIncreaseDisabled,
 })
 </script>
 
diff --git a/packages/radix-vue/src/NumberField/story/NumberField.story.vue b/packages/radix-vue/src/NumberField/story/NumberField.story.vue
index f68d79594..f33f6bf95 100644
--- a/packages/radix-vue/src/NumberField/story/NumberField.story.vue
+++ b/packages/radix-vue/src/NumberField/story/NumberField.story.vue
@@ -7,14 +7,9 @@ import { Icon } from '@iconify/vue'
   <Story title="NumberField/Basic" :layout="{ type: 'single', iframe: true }">
     <Variant title="default">
       <NumberFieldRoot
-        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white" :format-options="{
-          style: 'currency',
-          currency: 'EUR',
-          currencyDisplay: 'code',
-          currencySign: 'accounting',
-        }"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
         :min="0"
-        :max="100"
+        :default-value="5"
       >
         <NumberFieldDecrement class="p-2">
           <Icon icon="radix-icons:minus" />
diff --git a/packages/radix-vue/src/NumberField/story/NumberFieldChromatic.story.vue b/packages/radix-vue/src/NumberField/story/NumberFieldChromatic.story.vue
new file mode 100644
index 000000000..5bbaf616b
--- /dev/null
+++ b/packages/radix-vue/src/NumberField/story/NumberFieldChromatic.story.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from '..'
+import { Icon } from '@iconify/vue'
+
+const value = ref(5)
+</script>
+
+<template>
+  <Story title="NumberField/Chromatic" :layout="{ type: 'grid', width: '50%' }">
+    <Variant title="Uncontrolled">
+      <NumberFieldRoot
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+        :default-value="5"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Controlled">
+      <NumberFieldRoot
+        v-model="value"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Decimal">
+      <NumberFieldRoot
+        :default-value="0"
+        :format-options="{
+          signDisplay: 'exceptZero',
+          minimumFractionDigits: 1,
+          maximumFractionDigits: 2,
+        }"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Percentage">
+      <NumberFieldRoot
+        :default-value="0.05"
+        :step="0.01"
+        :format-options="{
+          style: 'percent',
+        }"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Currency values">
+      <NumberFieldRoot
+        :default-value="5"
+        :format-options="{
+          style: 'currency',
+          currency: 'EUR',
+          currencyDisplay: 'code',
+          currencySign: 'accounting',
+        }"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Units">
+      <NumberFieldRoot
+        :default-value="5"
+        :format-options="{
+          style: 'unit',
+          unit: 'inch',
+          unitDisplay: 'long',
+        }"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Minimum">
+      <NumberFieldRoot
+        :default-value="5"
+        :min="0"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Maximum">
+      <NumberFieldRoot
+        :default-value="5"
+        :max="20"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Step (3)">
+      <NumberFieldRoot
+        :step="3"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Step (3) + Minimum (2)">
+      <NumberFieldRoot
+        :min="2"
+        :step="3"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+
+    <Variant title="Step (3) + Minimum (2) + Maximum (21)">
+      <NumberFieldRoot
+        :min="2"
+        :max="21"
+        :step="3"
+        class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+      >
+        <NumberFieldDecrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:minus" />
+        </NumberFieldDecrement>
+        <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
+        <NumberFieldIncrement class="p-2 disabled:opacity-20">
+          <Icon icon="radix-icons:plus" />
+        </NumberFieldIncrement>
+      </NumberFieldRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/NumberField/story/_NumberField.vue b/packages/radix-vue/src/NumberField/story/_NumberField.vue
new file mode 100644
index 000000000..a90df2877
--- /dev/null
+++ b/packages/radix-vue/src/NumberField/story/_NumberField.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NumberFieldRootProps } from '../'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from '../'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<NumberFieldRootProps>()
+</script>
+
+<template>
+  <NumberFieldRoot
+    class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+    v-bind="props"
+  >
+    <NumberFieldDecrement class="p-2">
+      <Icon icon="radix-icons:minus" />
+    </NumberFieldDecrement>
+    <NumberFieldInput class="bg-transparent w-32 tabular-nums focus:outline-0 p-1" />
+    <NumberFieldIncrement class="p-2">
+      <Icon icon="radix-icons:plus" />
+    </NumberFieldIncrement>
+  </NumberFieldRoot>
+</template>
diff --git a/packages/radix-vue/src/NumberField/utils.ts b/packages/radix-vue/src/NumberField/utils.ts
index 0d605e46c..62f488fce 100644
--- a/packages/radix-vue/src/NumberField/utils.ts
+++ b/packages/radix-vue/src/NumberField/utils.ts
@@ -40,3 +40,28 @@ export function useNumberFormatter(locale: string = 'en-US', options: MaybeRef<I
 export function useNumberParser(locale: string = 'en-US', options: MaybeRef<Intl.NumberFormatOptions> = {}) {
   return new NumberParser(locale, unref(options))
 }
+
+export function handleDecimalOperation(operator: '-' | '+', value1: number, value2: number): number {
+  let result = operator === '+' ? value1 + value2 : value1 - value2
+
+  // Check if we have decimals
+  if (value1 % 1 !== 0 || value2 % 1 !== 0) {
+    const value1Decimal = value1.toString().split('.')
+    const value2Decimal = value2.toString().split('.')
+    const value1DecimalLength = (value1Decimal[1] && value1Decimal[1].length) || 0
+    const value2DecimalLength = (value2Decimal[1] && value2Decimal[1].length) || 0
+    const multiplier = 10 ** Math.max(value1DecimalLength, value2DecimalLength)
+
+    // Transform the decimals to integers based on the precision
+    value1 = Math.round(value1 * multiplier)
+    value2 = Math.round(value2 * multiplier)
+
+    // Perform the operation on integers values to make sure we don't get a fancy decimal value
+    result = operator === '+' ? value1 + value2 : value1 - value2
+
+    // Transform the integer result back to decimal
+    result /= multiplier
+  }
+
+  return result
+}