Skip to content

Commit 936253f

Browse files
hywaxvercel[bot]benjamincanac
authored
feat(InputTime): new component (#5302)
Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
1 parent b61127a commit 936253f

File tree

14 files changed

+1452
-1
lines changed

14 files changed

+1452
-1
lines changed

‎docs/app/components/content/ComponentCode.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { ChipProps } from '@nuxt/ui'
44
import json5 from 'json5'
55
import { upperFirst, camelCase, kebabCase } from 'scule'
66
import { hash } from 'ohash'
7-
import { CalendarDate } from '@internationalized/date'
7+
import { CalendarDate, Time } from '@internationalized/date'
88
import * as theme from '#build/ui'
99
import { get, set } from '#ui/utils'
1010
@@ -14,6 +14,7 @@ interface Cast {
1414
}
1515
1616
type CastDateValue = [number, number, number]
17+
type CastTimeValue = [number, number, number]
1718
1819
const castMap: Record<string, Cast> = {
1920
'DateValue': {
@@ -37,6 +38,12 @@ const castMap: Record<string, Cast> = {
3738
3839
return `{ start: new CalendarDate(${value.start.year}, ${value.start.month}, ${value.start.day}), end: new CalendarDate(${value.end.year}, ${value.end.month}, ${value.end.day}) }`
3940
}
41+
},
42+
'TimeValue': {
43+
get: (args: CastTimeValue) => new Time(...args),
44+
template: (value: Time) => {
45+
return value ? `new Time(${value.hour}, ${value.minute}, ${value.second})` : 'null'
46+
}
4047
}
4148
}
4249

‎docs/app/components/content/examples/input-time/InputTimeFormFieldExample.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { Time } from '@internationalized/date'
3+
4+
const time = shallowRef(new Time(12, 30, 0))
5+
</script>
6+
7+
<template>
8+
<UFormField label="Time" help="Specify the time" required>
9+
<UInputTime v-model="time" />
10+
</UFormField>
11+
</template>

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

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
---
2+
title: InputTime
3+
description: 'An input for selecting a time.'
4+
category: form
5+
links:
6+
- label: TimeField
7+
icon: i-custom-reka-ui
8+
to: https://reka-ui.com/docs/components/time-field
9+
- label: GitHub
10+
icon: i-simple-icons-github
11+
to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/InputTime.vue
12+
navigation.badge: Soon
13+
---
14+
15+
## Usage
16+
17+
Use the `v-model` directive to control the selected date.
18+
19+
::component-code
20+
---
21+
cast:
22+
modelValue: TimeValue
23+
ignore:
24+
- modelValue
25+
external:
26+
- modelValue
27+
props:
28+
modelValue: [12, 30, 0]
29+
---
30+
::
31+
32+
Use the `default-value` prop to set the initial value when you do not need to control its state.
33+
34+
::component-code
35+
---
36+
cast:
37+
defaultValue: TimeValue
38+
ignore:
39+
- defaultValue
40+
external:
41+
- defaultValue
42+
props:
43+
defaultValue: [12, 30, 0]
44+
---
45+
::
46+
47+
::note
48+
This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
49+
::
50+
51+
### Hour Cycle
52+
53+
Use the `hour-cycle` prop to change the hour cycle of the InputTime. Defaults to `12`.
54+
55+
::component-code
56+
---
57+
cast:
58+
defaultValue: TimeValue
59+
ignore:
60+
- hourCycle
61+
- defaultValue
62+
external:
63+
- defaultValue
64+
props:
65+
hourCycle: 24
66+
defaultValue: [16, 30, 0]
67+
---
68+
::
69+
70+
### Color
71+
72+
Use the `color` prop to change the color of the InputTime.
73+
74+
::component-code
75+
---
76+
props:
77+
color: neutral
78+
highlight: true
79+
---
80+
::
81+
82+
::note
83+
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
84+
::
85+
86+
### Variant
87+
88+
Use the `variant` prop to change the variant of the InputTime.
89+
90+
::component-code
91+
---
92+
props:
93+
variant: subtle
94+
---
95+
::
96+
97+
### Size
98+
99+
Use the `size` prop to change the size of the InputTime.
100+
101+
::component-code
102+
---
103+
props:
104+
size: xl
105+
---
106+
::
107+
108+
### Icon
109+
110+
Use the `icon` prop to show an [Icon](/docs/components/icon) inside the InputTime.
111+
112+
::component-code
113+
---
114+
props:
115+
icon: 'i-lucide-clock'
116+
---
117+
::
118+
119+
::note
120+
Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
121+
::
122+
123+
### Avatar
124+
125+
Use the `avatar` prop to show an [Avatar](/docs/components/avatar) inside the InputTime.
126+
127+
::component-code
128+
---
129+
prettier: true
130+
props:
131+
avatar:
132+
src: 'https://github.com/vuejs.png'
133+
size: md
134+
variant: outline
135+
---
136+
::
137+
138+
### Disabled
139+
140+
Use the `disabled` prop to disable the InputTime.
141+
142+
::component-code
143+
---
144+
props:
145+
disabled: true
146+
---
147+
::
148+
149+
## Examples
150+
151+
### Within a FormField
152+
153+
You can use the InputTime within a [FormField](/docs/components/form-field) component to display a label, help text, required indicator, etc.
154+
155+
::component-example
156+
---
157+
name: 'input-time-form-field-example'
158+
---
159+
::
160+
161+
## API
162+
163+
### Props
164+
165+
:component-props
166+
167+
### Slots
168+
169+
:component-slots
170+
171+
### Emits
172+
173+
:component-emits
174+
175+
## Theme
176+
177+
:component-theme
178+
179+
## Changelog
180+
181+
:component-changelog

‎docs/public/components/dark/input-time.png‎

3.73 KB
Loading

‎docs/public/components/light/input-time.png‎

3.72 KB
Loading

‎playgrounds/nuxt/app/composables/useNavigation.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const components = [
3838
'input-menu',
3939
'input-number',
4040
'input-tags',
41+
'input-time',
4142
'input',
4243
'kbd',
4344
'link',

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script setup lang="ts">
2+
import { Time } from '@internationalized/date'
3+
import theme from '#build/ui/input-time'
4+
5+
const colors = Object.keys(theme.variants.color)
6+
const sizes = Object.keys(theme.variants.size)
7+
const variants = Object.keys(theme.variants.variant)
8+
9+
const attrs = reactive({
10+
color: [theme.defaultVariants.color],
11+
size: [theme.defaultVariants.size],
12+
variant: [theme.defaultVariants.variant]
13+
})
14+
15+
const value = shallowRef(new Time(12, 30))
16+
</script>
17+
18+
<template>
19+
<Navbar>
20+
<USelect v-model="attrs.color" :items="colors" multiple />
21+
<USelect v-model="attrs.variant" :items="variants" multiple />
22+
<USelect v-model="attrs.size" :items="sizes" multiple />
23+
</Navbar>
24+
25+
<Matrix v-slot="props" :attrs="attrs">
26+
<UInputTime v-model="value" autofocus v-bind="props" />
27+
<UInputTime :default-value="new Time(12, 30)" v-bind="props" />
28+
<UInputTime highlight v-bind="props" />
29+
<UInputTime disabled v-bind="props" />
30+
<UInputTime required v-bind="props" />
31+
<UInputTime icon="i-lucide-clock" v-bind="props" />
32+
<UInputTime icon="i-lucide-clock" trailing v-bind="props" />
33+
<UInputTime :avatar="{ src: 'https://github.com/benjamincanac.png' }" icon="i-lucide-clock" trailing v-bind="props" />
34+
<UInputTime loading v-bind="props" />
35+
<UInputTime loading trailing v-bind="props" />
36+
<UInputTime loading icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" v-bind="props" />
37+
</Matrix>
38+
</template>

0 commit comments

Comments
 (0)