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

src/theme/icons.ts

@@ -1,16 +1,18 @@
 export default {
+  arrowLeft: 'i-lucide-arrow-left',
+  arrowRight: 'i-lucide-arrow-right',
+  check: 'i-lucide-check',
   chevronDoubleLeft: 'i-lucide-chevrons-left',
   chevronDoubleRight: 'i-lucide-chevrons-right',
   chevronDown: 'i-lucide-chevron-down',
   chevronLeft: 'i-lucide-chevron-left',
   chevronRight: 'i-lucide-chevron-right',
-  arrowLeft: 'i-lucide-arrow-left',
-  arrowRight: 'i-lucide-arrow-right',
-  check: 'i-lucide-check',
   close: 'i-lucide-x',
   ellipsis: 'i-lucide-ellipsis',
   external: 'i-lucide-arrow-up-right',
   loading: 'i-lucide-refresh-ccw',
   minus: 'i-lucide-minus',
-  search: 'i-lucide-search'
+  plus: 'i-lucide-plus',
+  search: 'i-lucide-search',
+  chevronUp: 'i-lucide-chevron-up'
 }

src/theme/index.ts

@@ -20,6 +20,7 @@ export { default as form } from './form'
 export { default as formField } from './form-field'
 export { default as input } from './input'
 export { default as inputMenu } from './input-menu'
+export { default as inputNumber } from './input-number'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'

src/theme/input-number.ts

@@ -0,0 +1,113 @@
+import type { ModuleOptions } from '../module'
+import inputTheme from './input'
+
+export default (options: Required<ModuleOptions>) => {
+  const input = inputTheme(options)
+
+  return {
+    slots: {
+      root: 'relative inline-flex items-center',
+      base: ['w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
+      increment: 'absolute flex items-center',
+      decrement: 'absolute flex items-center'
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+        neutral: ''
+      },
+      size: {
+        xs: 'px-2 py-1 text-xs gap-1',
+        sm: 'px-2.5 py-1.5 text-xs gap-1.5',
+        md: 'px-2.5 py-1.5 text-sm gap-1.5',
+        lg: 'px-3 py-2 text-sm gap-2',
+        xl: 'px-3 py-2 text-base gap-2'
+      },
+      variant: {
+        ...input.variants.variant
+      },
+      disabled: {
+        true: {
+          increment: 'opacity-75 cursor-not-allowed',
+          decrement: 'opacity-75 cursor-not-allowed'
+        }
+      },
+      orientation: {
+        horizontal: {
+          base: 'text-center',
+          increment: 'inset-y-0 end-0 pe-1',
+          decrement: 'inset-y-0 start-0 ps-1'
+        },
+        vertical: {
+          increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
+          decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80'
+        }
+      },
+      highlight: {
+        true: ''
+      }
+    },
+    compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: ['outline', 'subtle'],
+      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+    })), ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      highlight: true,
+      class: `ring ring-inset ring-[var(--ui-${color})]`
+    })), {
+      color: 'neutral',
+      variant: ['outline', 'subtle'],
+      class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
+    }, {
+      color: 'neutral',
+      highlight: true,
+      class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
+    }, {
+      orientation: 'horizontal',
+      size: 'xs',
+      class: 'px-7'
+    }, {
+      orientation: 'horizontal',
+      size: 'sm',
+      class: 'px-8'
+    }, {
+      orientation: 'horizontal',
+      size: 'md',
+      class: 'px-9'
+    }, {
+      orientation: 'horizontal',
+      size: 'lg',
+      class: 'px-10'
+    }, {
+      orientation: 'horizontal',
+      size: 'xl',
+      class: 'px-11'
+    }, {
+      orientation: 'vertical',
+      size: 'xs',
+      class: 'pe-7'
+    }, {
+      orientation: 'vertical',
+      size: 'sm',
+      class: 'pe-8'
+    }, {
+      orientation: 'vertical',
+      size: 'md',
+      class: 'pe-9'
+    }, {
+      orientation: 'vertical',
+      size: 'lg',
+      class: 'pe-10'
+    }, {
+      orientation: 'vertical',
+      size: 'xl',
+      class: 'pe-11'
+    }],
+    defaultVariants: {
+      size: 'md',
+      color: 'primary',
+      variant: 'outline'
+    }
+  }
+}