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

docs(command-palette): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-20 18:40:52 +02:00
parent 32ac575d56
commit 8709717a32
19 changed files with 780 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
const groups = [{
id: 'settings',
items: [{
label: 'Profile',
icon: 'i-heroicons-user',
kbds: ['meta', 'P']
}, {
label: 'Billing',
icon: 'i-heroicons-credit-card',
kbds: ['meta', 'B'],
slot: 'billing'
}, {
label: 'Notifications',
icon: 'i-heroicons-bell'
}, {
label: 'Security',
icon: 'i-heroicons-lock-closed'
}]
}, {
id: 'users',
label: 'Users',
slot: 'users',
items: [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
]
}]
</script>
<template>
<UCommandPalette :groups="groups" class="flex-1 h-80">
<template #users-leading="{ item }">
<UAvatar :src="`https://i.pravatar.cc/120?img=${item.id}`" size="2xs" />
</template>
<template #billing-label="{ item }">
{{ item.label }}
<UBadge variant="subtle" size="sm">
50% off
</UBadge>
</template>
</UCommandPalette>
</template>

25
docs/app/components/content/examples/command-palette/CommandPaletteFetchExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
const searchTerm = ref('')
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
transform: (data: any[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
},
lazy: true
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || []
}])
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending'"
:groups="groups"
class="flex-1 h-80"
/>
</template>

28
docs/app/components/content/examples/command-palette/CommandPaletteFilterExample.vue Normal file
View File

@@ -0,0 +1,28 @@
<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: any[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
},
lazy: true
})
const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
filter: false
}])
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:loading="status === 'pending'"
:groups="groups"
class="flex-1 h-80"
/>
</template>

16
docs/app/components/content/examples/command-palette/CommandPaletteFuseExample.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup lang="ts">
const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
transform: (data: any[]) => {
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
},
lazy: true
})
</script>
<template>
<UCommandPalette
:groups="[{ id: 'users', items: users || [] }]"
:fuse="{ fuseOptions: { includeMatches: true } }"
class="flex-1 h-80"
/>
</template>

24
docs/app/components/content/examples/command-palette/CommandPaletteModelValueExample.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup lang="ts">
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
]
const selected = ref(users[0])
function onSelect(item: any) {
console.log(item)
}
</script>
<template>
<UCommandPalette
v-model="selected"
:groups="[{ id: 'users', items: users }]"
class="flex-1"
@update:model-value="onSelect"
/>
</template>

25
docs/app/components/content/examples/command-palette/CommandPaletteModelValueMultipleExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
]
const selected = ref([users[0], users[1]])
function onSelect(items: any) {
console.log(items)
}
</script>
<template>
<UCommandPalette
v-model="selected"
multiple
:groups="[{ id: 'users', items: users }]"
class="flex-1"
@update:model-value="onSelect"
/>
</template>

25
docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
const open = ref(false)
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
]
</script>
<template>
<UModal v-model:open="open">
<UButton label="Search users..." color="gray" variant="subtle" icon="i-heroicons-magnifying-glass" />
<template #content>
<UCommandPalette
close
:groups="[{ id: 'users', items: users }]"
@update:open="open = $event"
/>
</template>
</UModal>
</template>

40
docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup lang="ts">
const items = [{
id: '/',
label: 'Introduction',
level: 1
}, {
id: '/getting-started#whats-new-in-v3',
label: 'What\'s new in v3?',
level: 2
}, {
id: '/getting-started#radix-vue-3',
label: 'Radix Vue',
level: 3
}, {
id: '/getting-started#tailwind-css-v4',
label: 'Tailwind CSS v4',
level: 3
}, {
id: '/getting-started#tailwind-variants',
label: 'Tailwind Variants',
level: 3
}, {
id: '/getting-started/installation',
label: 'Installation',
level: 1
}]
function postFilter(searchTerm: string, items: any[]) {
// Filter only first level items if no searchTerm
if (!searchTerm) {
return items?.filter(item => item.level === 1)
}
return items
}
</script>
<template>
<UCommandPalette :groups="[{ id: 'files', items, postFilter }]" class="flex-1" />
</template>

19
docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue Normal file
View File

@@ -0,0 +1,19 @@
<script setup lang="ts">
const users = [
{ id: 1, label: 'Durward Reynolds' },
{ id: 2, label: 'Kenton Towne' },
{ id: 3, label: 'Therese Wunsch' },
{ id: 4, label: 'Benedict Kessler' },
{ id: 5, label: 'Katelyn Rohan' }
]
const searchTerm = ref('Th')
</script>
<template>
<UCommandPalette
v-model:search-term="searchTerm"
:groups="[{ id: 'users', items: users }]"
class="flex-1"
/>
</template>

32
docs/content/3.components/alert.md
View File

@@ -113,8 +113,6 @@ Use the `close` prop to display a [Button](/components/button) to dismiss the Al
An `update:open` event will be emitted when the close button is clicked.
::
Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
::component-code
---
prettier: true
@@ -126,15 +124,10 @@ props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
close: true
closeIcon: ''
---
::
::tip{to="/getting-started/icons#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
::
You can pass all the props of the [Button](/components/button) component to customize it.
You can also pass all the props of the [Button](/components/button) component to customize it.
::component-code
---
@@ -154,6 +147,29 @@ props:
---
::
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
::component-code
---
prettier: true
ignore:
- title
- description
- close
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
close: true
closeIcon: 'i-heroicons-arrow-right'
---
::
::tip{to="/getting-started/icons#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
::
### Actions
Use the `actions` prop to add some [Button](/components/button) actions to the Alert.

33
docs/content/3.components/button.md
View File

@@ -129,13 +129,34 @@ props:
Use the `loading` prop to show a loading icon and disable the Button.
Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
props:
loading: true
trailing: false
slots:
default: Button
---
Button
::
Use the `loading-auto` prop to show the loading icon automatically while the `@click` promise is pending.
:component-example{name="button-loading-auto-example"}
This also works with the [Form](/components/form) component.
:component-example{name="button-loading-auto-form-example"}
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
props:
loading: true
loadingIcon: ''
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
trailing: false
slots:
default: Button
@@ -147,14 +168,6 @@ Button
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
::
Use the `loading-auto` prop to show the loading icon automatically while the `@click` promise is pending.
:component-example{name="button-loading-auto-example"}
This also works with the [Form](/components/form) component.
:component-example{name="button-loading-auto-form-example"}
### Disabled
Use the `disabled` prop to disable the Button.

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

@@ -39,13 +39,22 @@ props:
Use the `indeterminate` prop to set the Checkbox to an [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
Use the `indeterminate-icon` prop to customize this icon. Defaults to `i-heroicons-minus-20-solid`.
::component-code
---
props:
indeterminate: true
---
::
### Indeterminate Icon
Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults to `i-heroicons-minus-20-solid`.
::component-code
---
props:
indeterminate: true
indeterminateIcon: ''
indeterminateIcon: 'i-heroicons-plus'
---
::

435
docs/content/3.components/command-palette.md
View File

@@ -8,31 +8,24 @@ links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CommandPalette.vue
navigation:
badge:
label: Todo
---
## Usage
The CommandPalette component leverages [Fuse.js](https://fusejs.io/) to provide robust and efficient fuzzy search functionality.
### Groups
Use the `groups` prop as an array of objects with the following properties:
When searching for a command, the groups are filtered and the matching commands are presented in order of relevance. Use the `groups` prop as an array of objects with the following properties:
- `id: string`{lang="ts-type"}
- `label?: string`{lang="ts-type"}
- `slot?: string`{lang="ts-type"}
- [`items?: CommandPaletteItem[]`{lang="ts-type"}](#items)
- `filter?: boolean`{lang="ts-type"}
- `postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}
- `items?: CommandPaletteItem[]`{lang="ts-type"}
- [`filter?: boolean`{lang="ts-type"}](#without-internal-search)
- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}](#with-post-filtered-items)
- `highlightedIcon?: string`{lang="ts-type"}
::caution
You must provide an `id` for each group otherwise the group will be ignored.
::
### Items
Each group takes some `items` as an array of objects with the following properties:
- `prefix?: string`{lang="ts-type"}
@@ -57,80 +50,73 @@ external:
class: '!p-0'
props:
groups:
- id: 'users'
label: 'Users'
- id: 'suggestions'
label: 'Suggestions'
items:
- label: 'John Doe'
suffix: 'john.doe@example.com'
icon: 'i-heroicons-user'
- label: 'Jane Doe'
suffix: 'jane.doe@example.com'
icon: 'i-heroicons-user'
- label: 'John Smith'
suffix: 'john.smith@example.com'
icon: 'i-heroicons-user'
class: 'flex-1'
---
::
### Multiple
Use the `multiple` prop to allow multiple selections.
::component-code
---
collapse: true
ignore:
- groups
- class
external:
- groups
class: '!p-0'
props:
multiple: true
groups:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
- id: 'actions'
label: 'Actions'
items:
- label: 'Add new file'
suffix: 'Create a new file in the current directory or workspace.'
icon: 'i-heroicons-document-plus'
kbds:
- 'meta'
- 'N'
- meta
- N
- label: 'Add new folder'
suffix: 'Create a new folder in the current directory or workspace.'
icon: 'i-heroicons-folder-plus'
kbds:
- 'meta'
- 'F'
- meta
- F
- label: 'Add hashtag'
suffix: 'Add a hashtag to the current item.'
icon: 'i-heroicons-hashtag'
kbds:
- 'meta'
- 'H'
- meta
- H
- label: 'Add label'
suffix: 'Add a label to the current item.'
icon: 'i-heroicons-tag'
kbds:
- 'meta'
- 'L'
class: 'flex-1'
- meta
- L
class: 'flex-1 max-h-80'
---
::
::caution
You must provide an `id` for each group otherwise the group will be ignored.
::
### Placeholder
Use the `placeholder` prop to change the placeholder text.
::component-code
---
collapse: true
ignore:
- class
- groups
external:
- groups
class: '!p-0'
props:
placeholder: 'Search a user...'
placeholder: 'Search an app...'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
@@ -141,11 +127,24 @@ Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to
::component-code
---
collapse: true
ignore:
- class
- groups
external:
- groups
class: '!p-0'
props:
icon: 'i-heroicons-user'
icon: 'i-heroicons-cube'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
@@ -158,16 +157,55 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.sea
Use the `loading` prop to show a loading icon on the CommandPalette.
Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
collapse: true
ignore:
- class
- groups
external:
- groups
class: '!p-0'
props:
loading: true
loadingIcon: ''
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
collapse: true
ignore:
- class
- groups
external:
- groups
class: '!p-0'
props:
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
@@ -182,11 +220,24 @@ Use the `disabled` prop to disable the CommandPalette.
::component-code
---
collapse: true
ignore:
- groups
- class
external:
- groups
class: '!p-0'
props:
disabled: true
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
@@ -199,17 +250,89 @@ Use the `close` prop to display a [Button](/components/button) to dismiss the Co
An `update:open` event will be emitted when the close button is clicked.
::
Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
::component-code
---
collapse: true
ignore:
- class
- groups
- close
external:
- groups
class: '!p-0'
props:
close: true
closeIcon: ''
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
You can also pass all the props of the [Button](/components/button) component to customize it.
::component-code
---
collapse: true
prettier: true
ignore:
- close.color
- close.variant
- groups
- class
external:
- groups
class: '!p-0'
props:
close:
color: primary
variant: outline
class: 'rounded-full'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
::component-code
---
collapse: true
ignore:
- class
- groups
- close
external:
- groups
class: '!p-0'
props:
close: true
closeIcon: 'i-heroicons-arrow-right'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
- label: 'Maps'
icon: 'i-heroicons-map'
class: 'flex-1'
---
::
@@ -218,42 +341,135 @@ props:
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
::
You can pass all the props of the [Button](/components/button) component to customize it.
::component-code
---
prettier: true
ignore:
- close.color
- close.variant
- class
class: '!p-0'
props:
close:
color: primary
variant: outline
class: 'rounded-full'
class: 'flex-1'
---
::
## Examples
### Control active item(s)
You can control the active item(s) by using the `default-value` prop or the `v-model` directive with the index of the item.
::note
You can also use it without any of these and either use the `select` field on each item and/or the `@update:model-value` event.
::
### Control selected item(s)
You can control the selected item by using the `default-value` prop or the `v-model` directive.
::component-example
---
collapse: true
name: 'command-palette-model-value-example'
class: '!p-0'
---
::
::note
You can also use the `select` field on each item and/or the `@update:model-value` event.
::
Use the `multiple` prop to allow multiple selections.
::component-example
---
collapse: true
name: 'command-palette-model-value-multiple-example'
class: '!p-0'
---
::
::caution
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
::
### Control search term
Use the `v-model:search-term` directive to control the search term.
::component-example
---
collapse: true
name: 'command-palette-search-term-example'
class: '!p-0'
---
::
### With fetched items
### With filtered items
You can fetch items from an API and use them in the CommandPalette.
::component-example
---
collapse: true
name: 'command-palette-fetch-example'
class: '!p-0'
---
::
### Without internal search
You can set the `filter` field to `false` on a group to disable the internal search and use your own search logic.
::component-example
---
collapse: true
name: 'command-palette-filter-example'
class: '!p-0'
---
::
::note
This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
::
### With post-filtered items
You can use the `postFilter` field on a group to filter items after the search happened.
::component-example
---
collapse: true
name: 'command-palette-post-filter-example'
class: '!p-0'
---
::
::note
Start typing to see items with higher level appear.
::
### With custom fuse search
You can use the `fuse` prop to override the options of [useFuse](https://vueuse.org/integrations/useFuse) which defaults to:
```ts
{
fuseOptions: {
ignoreLocation: true,
threshold: 0.1,
keys: ['label', 'suffix']
},
resultLimit: 12,
matchAllWhenSearchEmpty: true
}
```
::tip
The `fuseOptions` are the options of [Fuse.js](https://www.fusejs.io/api/options.html), the `resultLimit` is the maximum number of results to return and the `matchAllWhenSearchEmpty` is a boolean to match all items when the search term is empty.
::
You can for example set `{ fuseOptions: { includeMatches: true } }` to highlight the search term in the items.
::component-example
---
collapse: true
name: 'command-palette-fuse-example'
class: '!p-0'
---
::
### Within a popover
You can use the CommandPalette component inside a [Popover](/components/popover)'s content.
::component-example
---
collapse: true
name: 'popover-command-palette-example'
class: 'justify-center'
---
::
### Within a modal
@@ -279,26 +495,49 @@ class: 'justify-center'
---
::
### Within a popover
### Listen open state
You can use the CommandPalette component inside a [Popover](/components/popover)'s content.
When using the `close` prop, you can listen to the `update:open` event when the button is clicked.
::component-example
---
collapse: true
name: 'popover-command-palette-example'
name: 'command-palette-open-example'
class: 'justify-center'
---
::
### Listen open state
### With custom search
### With highlighted search
::note
This can be useful when using the CommandPalette inside a [Modal](/components/modal) for example.
::
### With custom slot
Use the `slot` property to customize a specific item or group.
You will have access to the following slots:
- `#{{ item.slot }}`{lang="ts-type"}
- `#{{ item.slot }}-leading`{lang="ts-type"}
- `#{{ item.slot }}-label`{lang="ts-type"}
- `#{{ item.slot }}-trailing`{lang="ts-type"}
- `#{{ group.slot }}`{lang="ts-type"}
- `#{{ group.slot }}-leading`{lang="ts-type"}
- `#{{ group.slot }}-label`{lang="ts-type"}
- `#{{ group.slot }}-trailing`{lang="ts-type"}
::component-example
---
name: 'command-palette-custom-slot-example'
class: '!p-0'
---
::
::tip{to="#slots"}
You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
::
## API
### Props

17
docs/content/3.components/input.md
View File

@@ -140,7 +140,20 @@ props:
Use the `loading` prop to show a loading icon on the Input.
Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
ignore:
- placeholder
props:
loading: true
trailing: false
placeholder: 'Search...'
---
::
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
@@ -148,7 +161,7 @@ ignore:
- placeholder
props:
loading: true
loadingIcon: ''
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
trailing: false
placeholder: 'Search...'
---

42
docs/content/3.components/modal.md
View File

@@ -94,13 +94,9 @@ slots:
### Close
Use the `close` prop to customize or hide the close button displayed in the Modal's header. You can pass all the props of the [Button](/components/button) component to customize it.
Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Modal's header.
::tip
The close button is not displayed if the `#content` slot is used as it's a part of the header.
::
Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
You can pass all the props of the [Button](/components/button) component to customize it.
::component-code
---
@@ -116,7 +112,39 @@ props:
color: primary
variant: outline
class: 'rounded-full'
closeIcon: ''
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
#body
:placeholder{class="h-48"}
::
::tip
The close button is not displayed if the `#content` slot is used as it's a part of the header.
::
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
::component-code
---
prettier: true
class: 'justify-center'
ignore:
- title
props:
title: 'Modal with close button'
closeIcon: 'i-heroicons-arrow-right'
slots:
default: |

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

@@ -393,7 +393,29 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
Use the `loading` prop to show a loading icon on the Select.
Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
prettier: true
external:
- items
ignore:
- items
- defaultValue
props:
loading: true
trailing: false
defaultValue: 'Backlog'
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
---
@@ -405,7 +427,7 @@ ignore:
- defaultValue
props:
loading: true
loadingIcon: ''
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
trailing: false
defaultValue: 'Backlog'
items:

42
docs/content/3.components/slideover.md
View File

@@ -94,13 +94,9 @@ slots:
### Close
Use the `close` prop to customize or hide the close button displayed in the Slideover's header. You can pass all the props of the [Button](/components/button) component to customize it.
Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Slideover's header.
::tip
The close button is not displayed if the `#content` slot is used as it's a part of the header.
::
Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
You can pass all the props of the [Button](/components/button) component to customize it.
::component-code
---
@@ -116,7 +112,39 @@ props:
color: primary
variant: outline
class: 'rounded-full'
closeIcon: ''
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
#body
:placeholder{class="h-full"}
::
::note
The close button is not displayed if the `#content` slot is used as it's a part of the header.
::
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
::component-code
---
prettier: true
class: 'justify-center'
ignore:
- title
props:
title: 'Slideover with close button'
closeIcon: 'i-heroicons-arrow-right'
slots:
default: |

18
docs/content/3.components/switch.md
View File

@@ -94,7 +94,21 @@ props:
Use the `loading` prop to show a loading icon on the Switch.
Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
ignore:
- label
- defaultValue
props:
loading: true
defaultValue: true
label: Check me
---
::
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-code
---
@@ -103,7 +117,7 @@ ignore:
- defaultValue
props:
loading: true
loadingIcon: ''
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
defaultValue: true
label: Check me
---