Skip to content

Commit 54bb228

Browse files
aa900031benjamincanac
aa900031
and
benjamincanac
authored
feat(InputTags): new component (#4261)
Co-authored-by: Benjamin Canac <[email protected]>
1 parent 2a2495a commit 54bb228

File tree

18 files changed

+1422
-7
lines changed

18 files changed

+1422
-7
lines changed

‎docs/app/components/content/examples/input-tags/InputTagsFormFieldExample.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
const tags = ref(['Vue'])
3+
</script>
4+
5+
<template>
6+
<UFormField label="Tags" required>
7+
<UInputTags v-model="tags" placeholder="Enter tags..." />
8+
</UFormField>
9+
</template>

‎docs/content/3.components/input-menu.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ props:
135135

136136
### Multiple
137137

138-
Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
138+
Use the `multiple` prop to allow multiple selections, the selected items will be displayed as tags.
139139

140140
::component-code
141141
---
@@ -166,7 +166,7 @@ Ensure to pass an array to the `default-value` prop or the `v-model` directive.
166166

167167
### Delete Icon
168168

169-
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-lucide-x`.
169+
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
170170

171171
::component-code
172172
---

‎docs/content/3.components/input-tags.md‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
---
2+
title: InputTags
3+
description: An input element that displays interactive tags.
4+
links:
5+
- label: InputTags
6+
icon: i-custom-reka-ui
7+
to: https://reka-ui.com/docs/components/tags-input
8+
- label: GitHub
9+
icon: i-simple-icons-github
10+
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputTags.vue
11+
navigation.badge: Soon
12+
---
13+
14+
## Usage
15+
16+
Use the `v-model` directive to control the value of the InputTags.
17+
18+
::component-code
19+
---
20+
prettier: true
21+
ignore:
22+
- modelValue
23+
external:
24+
- modelValue
25+
props:
26+
modelValue: ['Vue']
27+
---
28+
::
29+
30+
Use the `default-value` prop to set the initial value when you do not need to control its state.
31+
32+
::component-code
33+
---
34+
prettier: true
35+
ignore:
36+
- defaultValue
37+
props:
38+
defaultValue: ['Vue']
39+
---
40+
::
41+
42+
### Placeholder
43+
44+
Use the `placeholder` prop to set a placeholder text.
45+
46+
::component-code
47+
---
48+
props:
49+
placeholder: 'Enter tags...'
50+
---
51+
::
52+
53+
### Color
54+
55+
Use the `color` prop to change the ring color when the InputTags is focused.
56+
57+
::component-code
58+
---
59+
prettier: true
60+
ignore:
61+
- modelValue
62+
external:
63+
- modelValue
64+
props:
65+
modelValue: ['Vue']
66+
color: neutral
67+
highlight: true
68+
---
69+
::
70+
71+
::note
72+
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
73+
::
74+
75+
### Variants
76+
77+
Use the `variant` prop to change the appearance of the InputTags.
78+
79+
::component-code
80+
---
81+
prettier: true
82+
ignore:
83+
- modelValue
84+
external:
85+
- modelValue
86+
props:
87+
modelValue: ['Vue']
88+
variant: subtle
89+
color: neutral
90+
highlight: false
91+
---
92+
::
93+
94+
### Sizes
95+
96+
Use the `size` prop to adjust the size of the InputTags.
97+
98+
::component-code
99+
---
100+
prettier: true
101+
ignore:
102+
- modelValue
103+
external:
104+
- modelValue
105+
props:
106+
modelValue: ['Vue']
107+
size: xl
108+
---
109+
::
110+
111+
### Icon
112+
113+
Use the `icon` prop to show an [Icon](/components/icon) inside the InputTags.
114+
115+
::component-code
116+
---
117+
prettier: true
118+
ignore:
119+
- modelValue
120+
external:
121+
- modelValue
122+
props:
123+
modelValue: ['Vue']
124+
icon: 'i-lucide-search'
125+
size: md
126+
variant: outline
127+
---
128+
::
129+
130+
::note
131+
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.
132+
::
133+
134+
### Avatar
135+
136+
Use the `avatar` prop to show an [Avatar](/components/avatar) inside the InputTags.
137+
138+
::component-code
139+
---
140+
prettier: true
141+
ignore:
142+
- modelValue
143+
external:
144+
- modelValue
145+
props:
146+
modelValue: ['Vue']
147+
avatar:
148+
src: 'https://github.com/vuejs.png'
149+
size: md
150+
variant: outline
151+
---
152+
::
153+
154+
### Delete Icon
155+
156+
Use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
157+
158+
::component-code
159+
---
160+
prettier: true
161+
ignore:
162+
- modelValue
163+
external:
164+
- modelValue
165+
props:
166+
modelValue: ['Vue']
167+
deleteIcon: 'i-lucide-trash'
168+
---
169+
::
170+
171+
::framework-only
172+
#nuxt
173+
:::tip{to="/getting-started/icons/nuxt#theme"}
174+
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
175+
:::
176+
177+
#vue
178+
:::tip{to="/getting-started/icons/vue#theme"}
179+
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
180+
:::
181+
::
182+
183+
### Loading
184+
185+
Use the `loading` prop to show a loading icon on the InputTags.
186+
187+
::component-code
188+
---
189+
prettier: true
190+
ignore:
191+
- modelValue
192+
external:
193+
- modelValue
194+
props:
195+
modelValue: ['Vue']
196+
loading: true
197+
trailing: false
198+
---
199+
::
200+
201+
### Loading Icon
202+
203+
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
204+
205+
::component-code
206+
---
207+
prettier: true
208+
ignore:
209+
- modelValue
210+
external:
211+
- modelValue
212+
props:
213+
modelValue: ['Vue']
214+
loading: true
215+
loadingIcon: 'i-lucide-loader'
216+
---
217+
::
218+
219+
::framework-only
220+
#nuxt
221+
:::tip{to="/getting-started/icons/nuxt#theme"}
222+
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
223+
:::
224+
225+
#vue
226+
:::tip{to="/getting-started/icons/vue#theme"}
227+
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
228+
:::
229+
::
230+
231+
### Disabled
232+
233+
Use the `disabled` prop to disable the InputTags.
234+
235+
::component-code
236+
---
237+
prettier: true
238+
ignore:
239+
- modelValue
240+
external:
241+
- modelValue
242+
props:
243+
modelValue: ['Vue']
244+
disabled: true
245+
---
246+
::
247+
248+
## Examples
249+
250+
### Within a FormField
251+
252+
You can use the InputTags within a [FormField](/components/form-field) component to display a label, help text, required indicator, etc.
253+
254+
::component-example
255+
---
256+
name: 'input-tags-form-field-example'
257+
---
258+
::
259+
260+
## API
261+
262+
### Props
263+
264+
:component-props
265+
266+
### Slots
267+
268+
:component-slots
269+
270+
### Emits
271+
272+
:component-emits
273+
274+
### Expose
275+
276+
When accessing the component via a template ref, you can use the following:
277+
278+
| Name | Type |
279+
|----------------------------|-------------------------------------------------|
280+
| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
281+
282+
## Theme
283+
284+
:component-theme

‎playground-vue/src/app.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const components = [
4040
'input',
4141
'input-menu',
4242
'input-number',
43+
'input-tags',
4344
'kbd',
4445
'link',
4546
'modal',

‎playground/app/app.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const components = [
4040
'input',
4141
'input-menu',
4242
'input-number',
43+
'input-tags',
4344
'kbd',
4445
'link',
4546
'modal',

‎playground/app/pages/components/input-menu.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,5 +145,18 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
145145
class="w-48"
146146
/>
147147
</div>
148+
<div class="flex items-center gap-4">
149+
<UInputMenu
150+
v-for="variant in variants"
151+
:key="variant"
152+
:items="items"
153+
:model-value="[fruits[0]!]"
154+
multiple
155+
icon="i-lucide-search"
156+
placeholder="Search..."
157+
:variant="variant"
158+
class="w-48"
159+
/>
160+
</div>
148161
</div>
149162
</template>

0 commit comments

Comments
 (0)