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

fix(components): improve generic types (#3331)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2025-03-24 21:38:13 +01:00
committed by GitHub
parent 370054b20c
commit b9983549a4
106 changed files with 1203 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { AccordionItem } from '@nuxt/ui'
const items: AccordionItem[] = [
{
label: 'Icons',
icon: 'i-lucide-smile'

4
docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { AccordionItem } from '@nuxt/ui'
const items: AccordionItem[] = [
{
label: 'Icons',
icon: 'i-lucide-smile'

6
docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
const items = [
{
label: 'Icons',
@@ -8,7 +10,7 @@ const items = [
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
slot: 'colors',
slot: 'colors' as const,
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
@@ -16,7 +18,7 @@ const items = [
icon: 'i-lucide-box',
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
] satisfies AccordionItem[]
</script>
<template>

4
docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { AccordionItem } from '@nuxt/ui'
const items: AccordionItem[] = [
{
label: 'Icons',
icon: 'i-lucide-smile',

6
docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui'
const items = [{
label: 'Home',
to: '/'
}, {
slot: 'dropdown',
slot: 'dropdown' as const,
icon: 'i-lucide-ellipsis',
children: [{
label: 'Documentation'
@@ -18,7 +20,7 @@ const items = [{
}, {
label: 'Breadcrumb',
to: '/components/breadcrumb'
}]
}] satisfies BreadcrumbItem[]
</script>
<template>

4
docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [{
import type { BreadcrumbItem } from '@nuxt/ui'
const items: BreadcrumbItem[] = [{
label: 'Home',
to: '/'
}, {

4
docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [{
import type { DropdownMenuItem } from '@nuxt/ui'
const items: DropdownMenuItem[] = [{
label: 'Team',
icon: 'i-lucide-users'
}, {

4
docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
View File

@@ -11,7 +11,7 @@ const groups = [{
label: 'Billing',
icon: 'i-lucide-credit-card',
kbds: ['meta', 'B'],
slot: 'billing'
slot: 'billing' as const
},
{
label: 'Notifications',
@@ -25,7 +25,7 @@ const groups = [{
}, {
id: 'users',
label: 'Users',
slot: 'users',
slot: 'users' as const,
items: [
{
label: 'Benjamin Canac',

4
docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue
View File

@@ -1,8 +1,10 @@
<script setup lang="ts">
import type { ContextMenuItem } from '@nuxt/ui'
const showSidebar = ref(true)
const showToolbar = ref(false)
const items = computed(() => [{
const items = computed<ContextMenuItem[]>(() => [{
label: 'View',
type: 'label' as const
}, {

4
docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { ContextMenuItem } from '@nuxt/ui'
const items: ContextMenuItem[][] = [
[
{
label: 'View',

4
docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
View File

@@ -1,7 +1,9 @@
<script setup lang="ts">
import type { ContextMenuItem } from '@nuxt/ui'
const loading = ref(true)
const items = [{
const items: ContextMenuItem[] = [{
label: 'Refresh the Page',
slot: 'refresh'
}, {

4
docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
const showBookmarks = ref(true)
const showHistory = ref(false)
const showDownloads = ref(false)
@@ -36,7 +38,7 @@ const items = computed(() => [{
onUpdateChecked(checked: boolean) {
showDownloads.value = checked
}
}])
}] satisfies DropdownMenuItem[])
</script>
<template>

10
docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { DropdownMenuItem } from '@nuxt/ui'
const items: DropdownMenuItem[][] = [
[
{
label: 'View',
@@ -17,7 +19,7 @@ const items = [
[
{
label: 'Delete',
color: 'error' as const,
color: 'error',
icon: 'i-lucide-trash'
}
]
@@ -27,9 +29,5 @@ const items = [
<template>
<UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
<UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
<template #profile-trailing>
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-(--ui-primary)" />
</template>
</UDropdownMenu>
</template>

26
docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
View File

@@ -1,15 +1,19 @@
<script setup lang="ts">
const items = [{
label: 'Profile',
icon: 'i-lucide-user',
slot: 'profile'
}, {
label: 'Billing',
icon: 'i-lucide-credit-card'
}, {
label: 'Settings',
icon: 'i-lucide-cog'
}]
import type { DropdownMenuItem } from '@nuxt/ui'
const items = [
{
label: 'Profile',
icon: 'i-lucide-user',
slot: 'profile' as const
}, {
label: 'Billing',
icon: 'i-lucide-credit-card'
}, {
label: 'Settings',
icon: 'i-lucide-cog'
}
] satisfies DropdownMenuItem[]
</script>
<template>

24
docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue
View File

@@ -1,20 +1,24 @@
<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
const open = ref(false)
defineShortcuts({
o: () => open.value = !open.value
})
const items = [{
label: 'Profile',
icon: 'i-lucide-user'
}, {
label: 'Billing',
icon: 'i-lucide-credit-card'
}, {
label: 'Settings',
icon: 'i-lucide-cog'
}]
const items: DropdownMenuItem[] = [
{
label: 'Profile',
icon: 'i-lucide-user'
}, {
label: 'Billing',
icon: 'i-lucide-credit-card'
}, {
label: 'Settings',
icon: 'i-lucide-cog'
}
]
</script>
<template>

2
docs/app/components/content/examples/input-menu/InputMenuCountriesExample.vue
View File

@@ -16,7 +16,7 @@ function onOpen() {
<template>
<UInputMenu
:items="countries || []"
:items="countries"
:loading="status === 'pending'"
label-key="name"
:search-input="{ icon: 'i-lucide-search' }"

8
docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users',
transform: (data: { id: number, name: string }[]) => {
@@ -6,7 +8,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
}))
},
lazy: true
})
@@ -14,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<UInputMenu
:items="users || []"
:items="users"
:loading="status === 'pending'"
icon="i-lucide-user"
placeholder="Select user"
@@ -23,7 +25,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.leadingAvatarSize()"
:size="(ui.leadingAvatarSize() as AvatarProps['size'])"
:class="ui.leadingAvatar()"
/>
</template>

8
docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users-email',
transform: (data: { id: number, name: string, email: string }[]) => {
@@ -7,7 +9,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
email: user.email,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
}))
},
lazy: true
})
@@ -15,7 +17,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<UInputMenu
:items="users || []"
:items="users"
:loading="status === 'pending'"
:filter-fields="['label', 'email']"
icon="i-lucide-user"
@@ -26,7 +28,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.leadingAvatarSize()"
:size="(ui.leadingAvatarSize() as AvatarProps['size'])"
:class="ui.leadingAvatar()"
/>
</template>

8
docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)
@@ -10,7 +12,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
}))
},
lazy: true
})
@@ -19,7 +21,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<UInputMenu
v-model:search-term="searchTerm"
:items="users || []"
:items="users"
:loading="status === 'pending'"
ignore-filter
icon="i-lucide-user"
@@ -29,7 +31,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.leadingAvatarSize()"
:size="(ui.leadingAvatarSize() as AvatarProps['size'])"
:class="ui.leadingAvatar()"
/>
</template>

12
docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { InputMenuItem } from '@nuxt/ui'
const items = ref([
{
label: 'benjamincanac',
@@ -23,8 +25,16 @@ const items = ref([
src: 'https://github.com/noook.png',
alt: 'noook'
}
},
{
label: 'sandros94',
value: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
alt: 'sandros94'
}
}
])
] satisfies InputMenuItem[])
const value = ref(items.value[0])
</script>

13
docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue
View File

@@ -1,27 +1,30 @@
<script setup lang="ts">
import type { InputMenuItem, ChipProps } from '@nuxt/ui'
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'error' as const
color: 'error'
}
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'success' as const
color: 'success'
}
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'info' as const
color: 'info'
}
}
])
] satisfies InputMenuItem[])
const value = ref(items.value[0])
</script>
@@ -33,7 +36,7 @@ const value = ref(items.value[0])
v-bind="modelValue.chip"
inset
standalone
:size="ui.itemLeadingChipSize()"
:size="(ui.itemLeadingChipSize() as ChipProps['size'])"
:class="ui.itemLeadingChip()"
/>
</template>

5
docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { InputMenuItem } from '@nuxt/ui'
const items = ref([
{
label: 'Backlog',
@@ -20,7 +22,8 @@ const items = ref([
value: 'done',
icon: 'i-lucide-circle-check'
}
])
] satisfies InputMenuItem[])
const value = ref(items.value[0])
</script>

8
docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = [
{
label: 'Docs',
icon: 'i-lucide-book-open',
slot: 'docs',
slot: 'docs' as const,
children: [
{
label: 'Icons',
@@ -22,7 +24,7 @@ const items = [
{
label: 'Components',
icon: 'i-lucide-box',
slot: 'components',
slot: 'components' as const,
children: [
{
label: 'Link',
@@ -54,7 +56,7 @@ const items = [
label: 'GitHub',
icon: 'i-simple-icons-github'
}
]
] satisfies NavigationMenuItem[]
</script>
<template>

4
docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { NavigationMenuItem } from '@nuxt/ui'
const items: NavigationMenuItem[] = [
{
label: 'Guide',
icon: 'i-lucide-book-open'

4
docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { NavigationMenuItem } from '@nuxt/ui'
const items: NavigationMenuItem[] = [
{
label: 'Guide',
icon: 'i-lucide-book-open',

3
docs/app/components/content/examples/select-menu/SelectMenuCountriesExample.vue
View File

@@ -4,8 +4,7 @@ const { data: countries, status, execute } = await useLazyFetch<{
code: string
emoji: string
}[]>('/api/countries.json', {
immediate: false,
default: () => []
immediate: false
})
function onOpen() {

8
docs/app/components/content/examples/select-menu/SelectMenuFetchExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users',
transform: (data: { id: number, name: string }[]) => {
@@ -6,7 +8,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
}))
},
lazy: true
})
@@ -14,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<USelectMenu
:items="users || []"
:items="users"
:loading="status === 'pending'"
icon="i-lucide-user"
placeholder="Select user"
@@ -24,7 +26,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.leadingAvatarSize()"
:size="(ui.leadingAvatarSize() as AvatarProps['size'])"
:class="ui.leadingAvatar()"
/>
</template>

8
docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users-email',
transform: (data: { id: number, name: string, email: string }[]) => {
@@ -7,7 +9,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
email: user.email,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
}))
},
lazy: true
})
@@ -15,7 +17,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<USelectMenu
:items="users || []"
:items="users"
:loading="status === 'pending'"
:filter-fields="['label', 'email']"
icon="i-lucide-user"
@@ -26,7 +28,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.leadingAvatarSize()"
:size="(ui.leadingAvatarSize() as AvatarProps['size'])"
:class="ui.leadingAvatar()"
/>
</template>

8
docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)
@@ -10,7 +12,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
}))
},
lazy: true
})
@@ -19,7 +21,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<USelectMenu
v-model:search-term="searchTerm"
:items="users || []"
:items="users"
:loading="status === 'pending'"
ignore-filter
icon="i-lucide-user"
@@ -30,7 +32,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="ui.leadingAvatarSize()"
:size="(ui.leadingAvatarSize() as AvatarProps['size'])"
:class="ui.leadingAvatar()"
/>
</template>

12
docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { SelectMenuItem } from '@nuxt/ui'
const items = ref([
{
label: 'benjamincanac',
@@ -23,8 +25,16 @@ const items = ref([
src: 'https://github.com/noook.png',
alt: 'noook'
}
},
{
label: 'sandros94',
value: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
alt: 'sandros94'
}
}
])
] satisfies SelectMenuItem[])
const value = ref(items.value[0])
</script>

12
docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
View File

@@ -1,27 +1,29 @@
<script setup lang="ts">
import type { SelectMenuItem, ChipProps } from '@nuxt/ui'
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'error' as const
color: 'error'
}
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'success' as const
color: 'success'
}
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'info' as const
color: 'info'
}
}
])
] satisfies SelectMenuItem[])
const value = ref(items.value[0])
</script>
@@ -33,7 +35,7 @@ const value = ref(items.value[0])
v-bind="modelValue.chip"
inset
standalone
:size="ui.itemLeadingChipSize()"
:size="(ui.itemLeadingChipSize() as ChipProps['size'])"
:class="ui.itemLeadingChip()"
/>
</template>

4
docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { SelectMenuItem } from '@nuxt/ui'
const items = ref([
{
label: 'Backlog',
@@ -20,7 +22,7 @@ const items = ref([
value: 'done',
icon: 'i-lucide-circle-check'
}
])
] satisfies SelectMenuItem[])
const value = ref(items.value[0])
</script>

11
docs/app/components/content/examples/select/SelectFetchExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users',
transform: (data: { id: number, name: string }[]) => {
@@ -6,7 +8,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
})) || []
}))
},
lazy: true
})
@@ -18,17 +20,18 @@ function getUserAvatar(value: string) {
<template>
<USelect
:items="users || []"
:items="users"
:loading="status === 'pending'"
icon="i-lucide-user"
placeholder="Select user"
class="w-48"
value-key="value"
>
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="getUserAvatar(modelValue as string)"
:size="ui.leadingAvatarSize()"
v-bind="getUserAvatar(modelValue)"
:size="(ui.leadingAvatarSize() as AvatarProps['size'])"
:class="ui.leadingAvatar()"
/>
</template>

14
docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { SelectItem } from '@nuxt/ui'
const items = ref([
{
label: 'benjamincanac',
@@ -23,13 +25,21 @@ const items = ref([
src: 'https://github.com/noook.png',
alt: 'noook'
}
},
{
label: 'sandros94',
value: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
alt: 'sandros94'
}
}
])
] satisfies SelectItem[])
const value = ref(items.value[0]?.value)
const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
</script>
<template>
<USelect v-model="value" :avatar="avatar" :items="items" class="w-48" />
<USelect v-model="value" :items="items" value-key="value" :avatar="avatar" class="w-48" />
</template>

17
docs/app/components/content/examples/select/SelectItemsChipExample.vue
View File

@@ -1,27 +1,30 @@
<script setup lang="ts">
import type { SelectItem, ChipProps } from '@nuxt/ui'
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'error' as const
color: 'error'
}
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'success' as const
color: 'success'
}
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'info' as const
color: 'info'
}
}
])
] satisfies SelectItem[])
const value = ref(items.value[0]?.value)
function getChip(value: string) {
@@ -30,14 +33,14 @@ function getChip(value: string) {
</script>
<template>
<USelect v-model="value" :items="items" class="w-48">
<USelect v-model="value" :items="items" value-key="value" class="w-48">
<template #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"
v-bind="getChip(modelValue as string)"
v-bind="getChip(modelValue)"
inset
standalone
:size="ui.itemLeadingChipSize()"
:size="(ui.itemLeadingChipSize() as ChipProps['size'])"
:class="ui.itemLeadingChip()"
/>
</template>

6
docs/app/components/content/examples/select/SelectItemsIconExample.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { SelectItem } from '@nuxt/ui'
const items = ref([
{
label: 'Backlog',
@@ -20,12 +22,12 @@ const items = ref([
value: 'done',
icon: 'i-lucide-circle-check'
}
])
] satisfies SelectItem[])
const value = ref(items.value[0]?.value)
const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
</script>
<template>
<USelect v-model="value" :icon="icon" :items="items" class="w-48" />
<USelect v-model="value" :items="items" value-key="value" :icon="icon" class="w-48" />
</template>

4
docs/app/components/content/examples/stepper/StepperContentSlotExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { StepperItem } from '@nuxt/ui'
const items: StepperItem[] = [
{
title: 'Address',
description: 'Add your address here',

4
docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { StepperItem } from '@nuxt/ui'
const items: StepperItem[] = [
{
slot: 'address',
title: 'Address',

3
docs/app/components/content/examples/stepper/StepperModelValueExample.vue
View File

@@ -1,7 +1,8 @@
<script setup lang="ts">
import type { StepperItem } from '@nuxt/ui'
import { onMounted, ref } from 'vue'
const items = [
const items: StepperItem[] = [
{
title: 'Address',
description: 'Add your address here',

4
docs/app/components/content/examples/stepper/StepperWithControlsExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { StepperItem } from '@nuxt/ui'
const items: StepperItem[] = [
{
slot: 'address',
title: 'Address',

4
docs/app/components/content/examples/tabs/TabsContentSlotExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { TabsItem } from '@nuxt/ui'
const items: TabsItem[] = [
{
label: 'Account',
icon: 'i-lucide-user'

8
docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
View File

@@ -1,18 +1,20 @@
<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'
const items = [
{
label: 'Account',
description: 'Make changes to your account here. Click save when you\'re done.',
icon: 'i-lucide-user',
slot: 'account'
slot: 'account' as const
},
{
label: 'Password',
description: 'Change your password here. After saving, you\'ll be logged out.',
icon: 'i-lucide-lock',
slot: 'password'
slot: 'password' as const
}
]
] satisfies TabsItem[]
const state = reactive({
name: 'Benjamin Canac',

4
docs/app/components/content/examples/tabs/TabsModelValueExample.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const items = [
import type { TabsItem } from '@nuxt/ui'
const items: TabsItem[] = [
{
label: 'Account'
},

6
docs/app/components/content/examples/tree/TreeCustomSlotExample.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import type { TreeItem } from '@nuxt/ui'
const items: TreeItem[] = [
const items = [
{
label: 'app/',
slot: 'app',
slot: 'app' as const,
defaultExpanded: true,
children: [{
label: 'composables/',
@@ -24,7 +24,7 @@ const items: TreeItem[] = [
},
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
]
] satisfies TreeItem[]
</script>
<template>

2
docs/app/components/content/examples/tree/TreeModelValueExample.vue
View File

@@ -25,7 +25,7 @@ const items: TreeItem[] = [
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
]
const value = ref(items[items.length - 1])
const value = ref()
</script>
<template>