feat(InputTime): add component

Author: hywax

docs/content/docs/2.components/input-time.md

@@ -0,0 +1,38 @@
+---
+title: InputTime
+description: ''
+links:
+  - label: InputTime
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/input-time
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/InputTime.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog

playgrounds/nuxt/app/composables/useNavigation.ts

@@ -38,6 +38,7 @@ const components = [
   'input-menu',
   'input-number',
   'input-tags',
+  'input-time',
   'input',
   'kbd',
   'link',

playgrounds/nuxt/app/pages/components/input-time.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Time } from '@internationalized/date'
+import theme from '#build/ui/input-number'
+
+const colors = Object.keys(theme.variants.color)
+const sizes = Object.keys(theme.variants.size)
+const variants = Object.keys(theme.variants.variant)
+
+const attrs = reactive({
+  color: [theme.defaultVariants.color],
+  size: [theme.defaultVariants.size],
+  variant: [theme.defaultVariants.variant]
+})
+
+const value = shallowRef(new Time(12, 30))
+</script>
+
+<template>
+  <Navbar>
+    <USelect v-model="attrs.color" :items="colors" multiple />
+    <USelect v-model="attrs.size" :items="sizes" multiple />
+    <USelect v-model="attrs.variant" :items="variants" multiple />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs">
+    <UInputTime v-model="value" v-bind="props" />
+    <UInputTime highlight v-bind="props" />
+    <UInputTime disabled v-bind="props" />
+    <UInputTime required v-bind="props" />
+  </Matrix>
+</template>

src/runtime/components/InputTime.vue

@@ -0,0 +1,166 @@
+<script lang="ts">
+import type { TimeFieldRootProps, TimeFieldRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/input-time'
+import type { ComponentConfig } from '../types/tv'
+
+type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>
+
+export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'locale' | 'dir'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  color?: InputTime['variants']['color']
+  variant?: InputTime['variants']['variant']
+  size?: InputTime['variants']['size']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue UApp.locale.code
+   */
+  locale?: string
+  class?: any
+  ui?: InputTime['slots']
+}
+
+export interface InputTimeEmits extends TimeFieldRootEmits {
+  change: [event: Event]
+  blur: [event: FocusEvent]
+  focus: [event: FocusEvent]
+}
+
+export interface InputTimeSlots {
+  leading(props: { ui: InputTime['ui'] }): any
+  default(props: { ui: InputTime['ui'] }): any
+  trailing(props: { ui: InputTime['ui'] }): any
+}
+</script>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits, Primitive } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useFieldGroup } from '../composables/useFieldGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import { tv } from '../utils/tv'
+
+const props = withDefaults(defineProps<InputTimeProps>(), {
+  autofocusDelay: 0
+})
+const emits = defineEmits<InputTimeEmits>()
+const slots = defineSlots<InputTimeSlots>()
+
+const { code: codeLocale, dir } = useLocale()
+const appConfig = useAppConfig() as InputTime['AppConfig']
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'id', 'name', 'required'), emits)
+
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps>(props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const locale = computed(() => props.locale || codeLocale.value)
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTime || {}) })({
+  color: color.value,
+  variant: props.variant,
+  size: inputSize.value,
+  highlight: highlight.value,
+  trailing: isTrailing.value || !!slots.trailing,
+  fieldGroup: orientation.value
+}))
+
+const inputsRef = ref<ComponentPublicInstance[]>([])
+
+function onUpdate(value: any) {
+  // @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)
+}
+
+function onFocus(event: FocusEvent) {
+  emitFormFocus()
+  emits('focus', event)
+}
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputsRef.value[0]?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+defineExpose({
+  inputsRef
+})
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <TimeFieldRoot
+      v-bind="{ ...rootProps, ...ariaAttrs }"
+      :id="id"
+      v-slot="{ segments }"
+      :model-value="modelValue"
+      :default-value="defaultValue"
+      :default-placeholder="defaultPlaceholder"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      :locale="locale"
+      :name="name"
+      :dir="dir"
+      :class="ui.base({ class: [props.ui?.base] })"
+      @update:model-value="onUpdate"
+      @blur="onBlur"
+      @focus="onFocus"
+    >
+      <TimeFieldInput
+        v-for="(segment, index) in segments"
+        :key="segment.part"
+        :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
+        :part="segment.part"
+        :class="ui.segment({ class: props.ui?.segment })"
+      >
+        {{ segment.value }}
+      </TimeFieldInput>
+
+      <slot :ui="ui" />
+
+      <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" :ui="ui">
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        </slot>
+      </span>
+
+      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <slot name="trailing" :ui="ui">
+          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        </slot>
+      </span>
+    </TimeFieldRoot>
+  </Primitive>
+</template>

src/runtime/types/index.ts

@@ -54,6 +54,7 @@ export * from '../components/Input.vue'
 export * from '../components/InputMenu.vue'
 export * from '../components/InputNumber.vue'
 export * from '../components/InputTags.vue'
+export * from '../components/InputTime.vue'
 export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Main.vue'

src/theme/index.ts

@@ -52,6 +52,7 @@ export { default as input } from './input'
 export { default as inputMenu } from './input-menu'
 export { default as inputNumber } from './input-number'
 export { default as inputTags } from './input-tags'
+export { default as inputTime } from './input-time'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as main } from './main'

src/theme/input-time.ts

@@ -0,0 +1,38 @@
+import { defuFn } from 'defu'
+import type { ModuleOptions } from '../module'
+import input from './input'
+
+export default (options: Required<ModuleOptions>) => {
+  return defuFn({
+    slots: {
+      base: () => ['w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0', options.theme.transitions && 'transition-colors'],
+      segment: 'focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white'
+    },
+    variants: {
+      variant: {
+        outline: 'text-highlighted bg-default ring ring-inset ring-accented',
+        soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
+        subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
+        ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+        none: 'text-highlighted bg-transparent'
+      }
+    },
+    compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: ['outline', 'subtle'],
+      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    })), ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      highlight: true,
+      class: `ring ring-inset ring-${color}`
+    })), {
+      color: 'neutral',
+      variant: ['outline', 'subtle'],
+      class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
+    }, {
+      color: 'neutral',
+      highlight: true,
+      class: 'ring ring-inset ring-inverted'
+    }]
+  }, input(options))
+}

test/components/InputTime.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { axe } from 'vitest-axe'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import InputTime from '../../src/runtime/components/InputTime.vue'
+import type { InputTimeProps, InputTimeSlots } from '../../src/runtime/components/InputTime.vue'
+import ComponentRender from '../component-render'
+
+describe('InputTime', () => {
+  const props = {}
+
+  it.each([
+    // Props
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputTimeProps, slots?: Partial<InputTimeSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, InputTime)
+    expect(html).toMatchSnapshot()
+  })
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(InputTime, {
+      props
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+})