feat(InputNumber): implement component (#2577)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/InputNumber.vue

@@ -0,0 +1,192 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { NumberFieldRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/input-number'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { inputNumber: Partial<typeof theme> } }
+
+const inputNumber = tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber || {}) })
+
+type InputNumberVariants = VariantProps<typeof inputNumber>
+
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  ui?: Partial<typeof inputNumber.slots>
+  color?: InputNumberVariants['color']
+  variant?: InputNumberVariants['variant']
+  size?: InputNumberVariants['size']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  /**
+   * The orientation of the input menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: 'vertical' | 'horizontal'
+  /**
+   * Configure the increment button. The `color` and `size` are inherited.
+   * @defaultValue { variant: 'link' }
+   */
+  increment?: ButtonProps
+  /**
+   * The icon displayed to increment the value.
+   * @defaultValue appConfig.ui.icons.plus
+   */
+  incrementIcon?: string
+  /**
+   * Configure the decrement button. The `color` and `size` are inherited.
+   * @defaultValue { variant: 'link' }
+   */
+  decrement?: ButtonProps
+  /**
+   * The icon displayed to decrement the value.
+   * @defaultValue appConfig.ui.icons.minus
+   */
+  decrementIcon?: string
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue UApp.locale.code
+   */
+  locale?: string
+}
+
+export interface InputNumberEmits {
+  (e: 'update:modelValue', payload: number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', payload: Event): void
+}
+
+export interface InputNumberSlots {
+  increment(props?: {}): any
+  decrement(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import UButton from './Button.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  orientation: 'horizontal'
+})
+const emits = defineEmits<InputNumberEmits>()
+defineSlots<InputNumberSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emits)
+
+const { emitFormBlur, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled } = useFormField<InputNumberProps>(props)
+
+const { t, code: codeLocale } = useLocale()
+const locale = computed(() => props.locale || codeLocale.value)
+
+const ui = computed(() => inputNumber({
+  color: color.value,
+  variant: props.variant,
+  size: size.value,
+  highlight: highlight.value,
+  orientation: props.orientation
+}))
+
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown))
+
+const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function onUpdate(value: number) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="id"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :name="name"
+    :disabled="disabled"
+    :locale="locale"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="$attrs"
+      ref="inputRef"
+      :placeholder="placeholder"
+      :required="required"
+      :class="ui.base({ class: props.ui?.base })"
+      @blur="onBlur"
+    />
+
+    <div :class="ui.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="disabled">
+        <slot name="increment">
+          <UButton
+            :icon="incrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof increment === 'object' ? increment : undefined"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="ui.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="disabled">
+        <slot name="decrement">
+          <UButton
+            :icon="decrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof decrement === 'object' ? decrement : undefined"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
+</template>

src/runtime/locale/ar.ts

@@ -10,6 +10,10 @@ export default defineLocale({
       noData: 'لا توجد بيانات',
       create: 'إنشاء "{label}"'
     },
+    inputNumber: {
+      increment: 'زيادة',
+      decrement: 'تقليل'
+    },
     commandPalette: {
       noMatch: 'لا توجد نتائج مطابقة',
       noData: 'لا توجد بيانات',

src/runtime/locale/cs.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: 'Žádná data',
       create: 'Vytvořit "{label}"'
     },
+    inputNumber: {
+      increment: 'Zvýšit',
+      decrement: 'Snížit'
+    },
     commandPalette: {
       noMatch: 'Žádná shoda',
       noData: 'Žádná data',

src/runtime/locale/de.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: 'Keine Daten',
       create: 'Erstellen "{label}"'
     },
+    inputNumber: {
+      increment: 'Erhöhen',
+      decrement: 'Verringern'
+    },
     commandPalette: {
       noMatch: 'Nichts gefunden',
       noData: 'Keine Daten',

src/runtime/locale/en.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: 'No data',
       create: 'Create "{label}"'
     },
+    inputNumber: {
+      increment: 'Increment',
+      decrement: 'Decrement'
+    },
     commandPalette: {
       noMatch: 'No matching data',
       noData: 'No data',

src/runtime/locale/es.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: 'Sin datos',
       create: 'Crear "{label}"'
     },
+    inputNumber: {
+      increment: 'Incremento',
+      decrement: 'Decremento'
+    },
     commandPalette: {
       noMatch: 'No hay datos coincidentes',
       noData: 'Sin datos',

src/runtime/locale/fr.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: 'Aucune donnée',
       create: 'Créer "{label}"'
     },
+    inputNumber: {
+      increment: 'Augmenter',
+      decrement: 'Diminuer'
+    },
     commandPalette: {
       noMatch: 'Aucune donnée correspondante',
       noData: 'Aucune donnée',

src/runtime/locale/it.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: 'Nessun dato',
       create: 'Crea "{label}"'
     },
+    inputNumber: {
+      increment: 'Aumenta',
+      decrement: 'Diminuisci'
+    },
     commandPalette: {
       noMatch: 'Nessun dato corrispondente',
       noData: 'Nessun dato',

src/runtime/locale/ru.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: 'Нет данных',
       create: 'Создать "{label}"'
     },
+    inputNumber: {
+      increment: 'Увеличить',
+      decrement: 'Уменьшить'
+    },
     commandPalette: {
       noMatch: 'Совпадений не найдено',
       noData: 'Нет данных',

src/runtime/locale/zh_hans.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: '没有数据',
       create: '创建 "{label}"'
     },
+    inputNumber: {
+      increment: '增加',
+      decrement: '减少'
+    },
     commandPalette: {
       noMatch: '没有匹配的数据',
       noData: '没有数据',

src/runtime/locale/zh_hant.ts

@@ -9,6 +9,10 @@ export default defineLocale({
       noData: '沒有資料',
       create: '創建 "{label}"'
     },
+    inputNumber: {
+      increment: '增加',
+      decrement: '减少'
+    },
     commandPalette: {
       noMatch: '沒有匹配的資料',
       noData: '沒有資料',

src/runtime/types/index.ts

@@ -20,6 +20,7 @@ export * from '../components/Form.vue'
 export * from '../components/FormField.vue'
 export * from '../components/Input.vue'
 export * from '../components/InputMenu.vue'
+export * from '../components/InputNumber.vue'
 export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Modal.vue'

src/runtime/types/locale.ts

@@ -4,6 +4,10 @@ export type Messages = {
     noData: string
     create: string
   }
+  inputNumber: {
+    increment: string
+    decrement: string
+  }
   commandPalette: {
     noMatch: string
     noData: string