arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(input-menu): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-26 12:04:12 +02:00
parent 2c7c41bd04
commit db754740ef
17 changed files with 963 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue Normal file
View File

@@ -0,0 +1,31 @@
<script setup lang="ts">
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
transform: (data: { id: number, name: string }[]) => {
return data?.map(user => ({
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
},
lazy: true
})
</script>
<template>
<UInputMenu
:items="users || []"
:loading="status === 'pending'"
icon="i-heroicons-user"
placeholder="Select user"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
</UInputMenu>
</template>

37
docs/app/components/content/examples/input-menu/InputMenuFilterExample.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup lang="ts">
const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
params: { q: searchTermDebounced },
transform: (data: { id: number, name: string }[]) => {
return data?.map(user => ({
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
},
lazy: true
})
</script>
<template>
<UInputMenu
v-model:search-term="searchTerm"
:items="users || []"
:loading="status === 'pending'"
:filter="false"
icon="i-heroicons-user"
placeholder="Select user"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
</UInputMenu>
</template>

41
docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue Normal file
View File

@@ -0,0 +1,41 @@
<script setup lang="ts">
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
transform: (data: { id: number, name: string, email: string }[]) => {
return data?.map(user => ({
label: user.name,
email: user.email,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
},
lazy: true
})
</script>
<template>
<UInputMenu
:items="users || []"
:loading="status === 'pending'"
:filter="['name', 'email']"
icon="i-heroicons-user"
placeholder="Select user"
class="w-80"
>
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
<template #item-label="{ item }">
{{ item.label }}
<span class="text-gray-500 dark:text-gray-400">
{{ item.email }}
</span>
</template>
</UInputMenu>
</template>

14
docs/app/components/content/examples/input-menu/InputMenuIconExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const selected = ref('Backlog')
</script>
<template>
<UInputMenu
v-model="selected"
:items="items"
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"
/>
</template>

42
docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup lang="ts">
const items = ref([
{
label: 'benjamincanac',
value: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
}
},
{
label: 'romhml',
value: 'romhml',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
}
},
{
label: 'noook',
value: 'noook',
avatar: {
src: 'https://github.com/noook.png',
alt: 'noook'
}
}
])
const selected = ref(items.value[0])
</script>
<template>
<UInputMenu v-model="selected" :items="items" class="w-40">
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.itemLeadingAvatarSize()"
:class="ui.itemLeadingAvatar()"
/>
</template>
</UInputMenu>
</template>

41
docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue Normal file
View File

@@ -0,0 +1,41 @@
<script setup lang="ts">
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'red' as const
}
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'blue' as const
}
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'violet' as const
}
}
])
const selected = ref(items.value[0])
</script>
<template>
<UInputMenu v-model="selected" :items="items" class="w-40">
<template #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"
v-bind="modelValue.chip"
inset
standalone
:size="ui.itemLeadingChipSize()"
:class="ui.itemLeadingChip()"
/>
</template>
</UInputMenu>
</template>

29
docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup lang="ts">
const items = ref([
{
label: 'Backlog',
value: 'backlog',
icon: 'i-heroicons-question-mark-circle'
},
{
label: 'Todo',
value: 'todo',
icon: 'i-heroicons-plus-circle'
},
{
label: 'In Progress',
value: 'in_progress',
icon: 'i-heroicons-arrow-up-circle'
},
{
label: 'Done',
value: 'done',
icon: 'i-heroicons-check-circle'
}
])
const selected = ref(items.value[0])
</script>
<template>
<UInputMenu v-model="selected" :icon="selected?.icon" :items="items" class="w-40" />
</template>

13
docs/app/components/content/examples/input-menu/InputMenuOpenExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
const open = ref(false)
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const selected = ref('Backlog')
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<UInputMenu v-model="selected" v-model:open="open" :items="items" />
</template>

9
docs/app/components/content/examples/input-menu/InputMenuSearchTermExample.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
const searchTerm = ref('D')
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const selected = ref('Backlog')
</script>
<template>
<UInputMenu v-model="selected" v-model:search-term="searchTerm" :items="items" />
</template>

4
docs/content/3.components/accordion.md
View File

@@ -153,12 +153,12 @@ hide:
- class
props:
class: 'px-4'
trailingIcon: 'i-heroicons-plus'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
items:
- label: 'Icons'
icon: 'i-heroicons-face-smile'
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
trailingIcon: 'i-heroicons-arrow-down'
trailingIcon: 'i-heroicons-plus-20-solid'
- label: 'Colors'
icon: 'i-heroicons-swatch'
content: 'Choose a primary and a gray color from your Tailwind CSS theme.'

2
docs/content/3.components/checkbox.md
View File

@@ -54,7 +54,7 @@ Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults
---
props:
indeterminate: true
indeterminateIcon: 'i-heroicons-plus'
indeterminateIcon: 'i-heroicons-plus-20-solid'
---
::

631
docs/content/3.components/input-menu.md
View File

@@ -8,15 +8,640 @@ links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputMenu.vue
navigation:
badge:
label: Todo
---
## Usage
Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.
::tip
Use this over an [Input](/components/input) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
::
::note
This component is similar to the [SelectMenu](/components/select-menu) but it's using an Input instead of a Select.
::
### Items
Use the `items` prop as an array of strings, numbers or booleans:
::component-code
---
prettier: true
ignore:
- modelValue
- items
external:
- items
- modelValue
props:
modelValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
You can also pass an array of objects with the following properties:
- `label?: string`{lang="ts-type"}
- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-typed-items)
- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
- `disabled?: boolean`{lang="ts-type"}
- `select?(e: Event): void`{lang="ts-type"}
::component-code
---
ignore:
- modelValue.label
- items
external:
- items
- modelValue
props:
modelValue:
label: 'Todo'
items:
- label: 'Backlog'
- label: 'Todo'
- label: 'In Progress'
- label: 'Done'
---
::
You can also pass an array of arrays to the `items` prop to display separated groups of items.
::component-code
---
prettier: true
ignore:
- modelValue
- items
external:
- items
- modelValue
props:
modelValue: 'Apple'
items:
- - Apple
- Banana
- Blueberry
- Grapes
- Pineapple
- - Aubergine
- Broccoli
- Carrot
- Courgette
- Leek
---
::
### Value Key
You can choose to bind a single property of the object rather than the whole object by using the `value-key` prop. Defaults to `undefined`.
::component-code
---
collapse: true
ignore:
- modelValue
- valueKey
- items
external:
- items
- modelValue
props:
modelValue: 'todo'
valueKey: 'id'
items:
- label: 'Backlog'
id: 'backlog'
- label: 'Todo'
id: 'todo'
- label: 'In Progress'
id: 'in_progress'
- label: 'Done'
id: 'done'
---
::
### Multiple
Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
::component-code
---
prettier: true
ignore:
- modelValue
- items
- multiple
external:
- items
- modelValue
props:
modelValue:
- Backlog
- Todo
multiple: true
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::caution
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
::
### Delete Icon
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-heroicons-x-mark-20-solid`.
::component-code
---
prettier: true
ignore:
- modelValue
- items
- multiple
external:
- items
- modelValue
props:
modelValue:
- Backlog
- Todo
multiple: true
deleteIcon: 'i-heroicons-trash'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::tip{to="/getting-started/icons#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
::
### Placeholder
Use the `placeholder` prop to set a placeholder text.
::component-code
---
prettier: true
ignore:
- items
external:
- items
props:
placeholder: 'Select status'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Content
Use the `content` prop to control how the InputMenu content is rendered, like its `align` or `side` for example.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
items:
content.align:
- start
- center
- end
content.side:
- right
- left
- top
- bottom
props:
modelValue: Backlog
content:
align: center
side: bottom
sideOffset: 8
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Color
Use the `color` prop to change the ring color when the InputMenu is focused.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
color: gray
highlight: true
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::note
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
::
### Variant
Use the `variant` prop to change the variant of the InputMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
color: gray
variant: subtle
highlight: false
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Size
Use the `size` prop to change the size of the InputMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
size: xl
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Icon
Use the `icon` prop to show an [Icon](/components/icon) inside the InputMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
icon: 'i-heroicons-magnifying-glass'
size: md
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
size: md
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::tip{to="/getting-started/icons#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
::
### Selected Icon
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
selectedIcon: 'i-heroicons-fire'
size: md
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::tip{to="/getting-started/icons#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
::
### Loading
Use the `loading` prop to show a loading icon on the InputMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
loading: true
trailing: false
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
prettier: true
ignore:
- items
- modelValue
external:
- items
- modelValue
props:
modelValue: 'Backlog'
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
::tip{to="/getting-started/icons#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
::
### Disabled
Use the `disabled` prop to disable the InputMenu.
::component-code
---
prettier: true
ignore:
- items
- placeholder
external:
- items
props:
disabled: true
placeholder: 'Select status'
items:
- Backlog
- Todo
- In Progress
- Done
---
::
## Examples
### With typed items
You can use the `type` property with `separator` to display a separator between items or `label` to display a label.
::component-code
---
collapse: true
ignore:
- modelValue
- items
external:
- items
- modelValue
props:
modelValue: 'Apple'
items:
- type: 'label'
label: 'Fruits'
- Apple
- Banana
- Blueberry
- Grapes
- Pineapple
- type: 'separator'
- type: 'label'
label: 'Vegetables'
- Aubergine
- Broccoli
- Carrot
- Courgette
- Leek
---
::
### With icons in items
You can use the `icon` property to display an [Icon](/components/icon) inside the items.
::component-example
---
collapse: true
name: 'input-menu-items-icon-example'
---
::
::tip
You can also use the `#leading` slot to display the selected icon, like in the next example.
::
### With avatar in items
You can use the `avatar` property to display an [Avatar](/components/avatar) inside the items.
::component-example
---
collapse: true
name: 'input-menu-items-avatar-example'
---
::
::note
In this example, the `#leading` slot is used to display the selected avatar.
::
### With chip in items
You can use the `chip` property to display a [Chip](/components/chip) inside the items.
::component-example
---
collapse: true
name: 'input-menu-items-chip-example'
---
::
::note
In this example, the `#leading` slot is used to display the selected chip.
::
### Control open state
You can control the open state by using the `default-open` prop or the `v-model:open` directive.
::component-example
---
name: 'input-menu-open-example'
---
::
::note
In this example, press :kbd{value="O"} to toggle the InputMenu.
::
### Control search term
Use the `v-model:search-term` directive to control the search term.
::component-example
---
name: 'input-menu-search-term-example'
---
::
### With rotating icon
Here is an example with a rotating icon that indicates the open state of the InputMenu.
::component-example
---
name: 'input-menu-icon-example'
---
::
### With fetched items
You can fetch items from an API and use them in the InputMenu.
::component-example
---
collapse: true
name: 'input-menu-fetch-example'
---
::
### Without internal search
Set the `filter` prop to `false` to disable the internal search and use your own search logic.
::component-example
---
collapse: true
name: 'input-menu-filter-example'
---
::
::note
This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
::
### With custom search
Use the `filter` prop with an array of fields to filter on.
::component-example
---
collapse: true
name: 'input-menu-filter-fields-example'
---
::
## API
### Props

2
docs/content/3.components/navigation-menu.md
View File

@@ -296,7 +296,7 @@ ignore:
external:
- items
props:
trailingIcon: 'i-heroicons-plus'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
items:
- label: Guide
icon: i-heroicons-book-open

6
docs/content/3.components/radio-group.md
View File

@@ -25,8 +25,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'System'
items:
@@ -49,8 +49,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'system'
items:
@@ -81,8 +81,8 @@ ignore:
- items
- valueKey
external:
- modelValue
- items
- modelValue
props:
modelValue: 'light'
valueKey: 'id'

78
docs/content/3.components/select-menu.md
View File

@@ -15,7 +15,11 @@ links:
Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.
::tip
Use the SelectMenu component over a [Select](/components/select) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
Use this over a [Select](/components/select) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
::
::note
This component is similar to the [InputMenu](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
::
### Items
@@ -29,8 +33,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'Backlog'
items:
@@ -57,8 +61,8 @@ ignore:
- modelValue.label
- items
external:
- modelValue
- items
- modelValue
props:
modelValue:
label: 'Todo'
@@ -83,8 +87,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'Apple'
items:
@@ -113,8 +117,8 @@ ignore:
- valueKey
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'todo'
valueKey: 'id'
@@ -142,18 +146,18 @@ ignore:
- items
- multiple
external:
- modelValue
- items
- modelValue
props:
modelValue:
- Backlog
- Todo
multiple: true
items:
- Backlog
- Todo
- In Progress
- Done
multiple: true
---
::
@@ -168,10 +172,10 @@ Use the `placeholder` prop to set a placeholder text.
::component-code
---
prettier: true
external:
- items
ignore:
- items
external:
- items
props:
placeholder: 'Select status'
items:
@@ -225,10 +229,10 @@ Use the `content` prop to control how the SelectMenu content is rendered, like i
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
items:
@@ -257,15 +261,15 @@ props:
### Color
Use the `color` prop to change the ring color when the Select is focused.
Use the `color` prop to change the ring color when the SelectMenu is focused.
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
@@ -286,15 +290,15 @@ The `highlight` prop is used here to show the focus state. It's used internally
### Variant
Use the `variant` prop to change the variant of the Select.
Use the `variant` prop to change the variant of the SelectMenu.
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
@@ -312,15 +316,15 @@ props:
### Size
Use the `size` prop to change the size of the Select.
Use the `size` prop to change the size of the SelectMenu.
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
@@ -336,15 +340,15 @@ props:
### Icon
Use the `icon` prop to show an [Icon](/components/icon) inside the Select.
Use the `icon` prop to show an [Icon](/components/icon) inside the SelectMenu.
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
@@ -361,20 +365,20 @@ props:
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing icon. Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
modelValue: 'Backlog'
trailingIcon: 'i-heroicons-arrow-small-right'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
size: md
items:
- Backlog
@@ -395,10 +399,10 @@ Use the `selected-icon` prop to customize the icon when an item is selected. Def
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
@@ -419,15 +423,15 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
### Loading
Use the `loading` prop to show a loading icon on the Select.
Use the `loading` prop to show a loading icon on the SelectMenu.
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
@@ -449,10 +453,10 @@ Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroic
::component-code
---
prettier: true
external:
ignore:
- items
- modelValue
ignore:
external:
- items
- modelValue
props:
@@ -473,16 +477,16 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.loa
### Disabled
Use the `disabled` prop to disable the Select.
Use the `disabled` prop to disable the SelectMenu.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- placeholder
external:
- items
props:
disabled: true
placeholder: 'Select status'

58
docs/content/3.components/select.md
View File

@@ -24,8 +24,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'Backlog'
items:
@@ -52,8 +52,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'backlog'
items:
@@ -81,8 +81,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'Apple'
items:
@@ -110,8 +110,8 @@ ignore:
- valueKey
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'backlog'
valueKey: 'id'
@@ -134,10 +134,10 @@ Use the `placeholder` prop to set a placeholder text.
::component-code
---
prettier: true
external:
- items
ignore:
- items
external:
- items
props:
placeholder: 'Select status'
items:
@@ -159,11 +159,11 @@ The `content.align`, `content.side`, etc. properties only apply when `content.po
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
items:
content.position:
- 'item-aligned'
@@ -203,11 +203,11 @@ Use the `color` prop to change the ring color when the Select is focused.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
color: gray
highlight: true
@@ -231,11 +231,11 @@ Use the `variant` prop to change the variant of the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
color: gray
variant: subtle
@@ -256,11 +256,11 @@ Use the `size` prop to change the size of the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
size: xl
defaultValue: 'Backlog'
@@ -279,11 +279,11 @@ Use the `icon` prop to show an [Icon](/components/icon) inside the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
icon: 'i-heroicons-magnifying-glass'
size: md
@@ -298,18 +298,18 @@ props:
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing icon. Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
trailingIcon: 'i-heroicons-arrow-small-right'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
size: md
defaultValue: 'Backlog'
items:
@@ -331,11 +331,11 @@ Use the `selected-icon` prop to customize the icon when an item is selected. Def
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
selectedIcon: 'i-heroicons-fire'
size: md
@@ -359,11 +359,11 @@ Use the `loading` prop to show a loading icon on the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
loading: true
trailing: false
@@ -383,11 +383,11 @@ Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroic
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
external:
- items
props:
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
@@ -411,11 +411,11 @@ Use the `disabled` prop to disable the Select.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- placeholder
external:
- items
props:
disabled: true
placeholder: 'Select status'
@@ -440,8 +440,8 @@ ignore:
- modelValue
- items
external:
- modelValue
- items
- modelValue
props:
modelValue: 'Apple'
items:

1
docs/nuxt.config.ts
View File

@@ -163,6 +163,7 @@ export default defineNuxtConfig({
'UFormField',
'UIcon',
'UInput',
'UInputMenu',
'UKbd',
'ULink',
'UModal',