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

feat(theme)!: migrate from heroicons to lucide (#2540)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
2024-11-06 16:59:19 +05:00
committed by GitHub
parent e3092b6b40
commit a6c1a6c587
177 changed files with 2245 additions and 2245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,15 +2,15 @@
const items = [
{
label: 'Icons',
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
},
{
label: 'Colors',
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
}
]
</script>

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

@@ -2,15 +2,15 @@
const items = [
{
label: 'Icons',
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
},
{
label: 'Colors',
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
}
]
</script>

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

@@ -2,18 +2,18 @@
const items = [
{
label: 'Icons',
icon: 'i-heroicons-face-smile',
icon: 'i-lucide-smile',
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-heroicons-swatch',
icon: 'i-lucide-swatch-book',
slot: 'colors',
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent',
icon: 'i-lucide-box',
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]

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

@@ -2,17 +2,17 @@
const items = [
{
label: 'Icons',
icon: 'i-heroicons-face-smile',
icon: 'i-lucide-smile',
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-heroicons-swatch',
icon: 'i-lucide-swatch-book',
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent',
icon: 'i-lucide-box',
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]

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

@@ -4,7 +4,7 @@ const items = [{
to: '/'
}, {
slot: 'dropdown',
icon: 'i-heroicons-ellipsis-horizontal',
icon: 'i-lucide-ellipsis',
children: [{
label: 'Documentation'
}, {

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

@@ -1,20 +1,20 @@
<script setup lang="ts">
const items = [{
label: 'Team',
icon: 'i-heroicons-users'
icon: 'i-lucide-users'
}, {
label: 'Invite users',
icon: 'i-heroicons-user-plus',
icon: 'i-lucide-user-plus',
children: [{
label: 'Invite by email',
icon: 'i-heroicons-paper-airplane'
icon: 'i-lucide-send-horizontal'
}, {
label: 'Invite by link',
icon: 'i-heroicons-link'
icon: 'i-lucide-link'
}]
}, {
label: 'New team',
icon: 'i-heroicons-plus'
icon: 'i-lucide-plus'
}]
</script>
@@ -26,7 +26,7 @@ const items = [{
<UButton
color="neutral"
variant="outline"
icon="i-heroicons-chevron-down-20-solid"
icon="i-lucide-chevron-down"
/>
</UDropdownMenu>
</UButtonGroup>

2
docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue
View File

@@ -6,7 +6,7 @@
<UButton
color="neutral"
variant="subtle"
icon="i-heroicons-clipboard-document"
icon="i-lucide-clipboard"
/>
</UTooltip>
</UButtonGroup>

2
docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
View File

@@ -5,7 +5,7 @@
label="Open"
color="neutral"
variant="subtle"
trailing-icon="i-heroicons-chevron-down-20-solid"
trailing-icon="i-lucide-chevron-down"
:ui="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
}"

2
docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
View File

@@ -12,7 +12,7 @@ defineShortcuts({
label="Open"
color="neutral"
variant="subtle"
trailing-icon="i-heroicons-chevron-down-20-solid"
trailing-icon="i-lucide-chevron-down"
block
/>

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

@@ -4,22 +4,22 @@ const groups = [{
items: [
{
label: 'Profile',
icon: 'i-heroicons-user',
icon: 'i-lucide-user',
kbds: ['meta', 'P']
},
{
label: 'Billing',
icon: 'i-heroicons-credit-card',
icon: 'i-lucide-credit-card',
kbds: ['meta', 'B'],
slot: 'billing'
},
{
label: 'Notifications',
icon: 'i-heroicons-bell'
icon: 'i-lucide-bell'
},
{
label: 'Security',
icon: 'i-heroicons-lock-closed'
icon: 'i-lucide-lock'
}
]
}, {

2
docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
View File

@@ -60,7 +60,7 @@ const users = [
label="Search users..."
color="neutral"
variant="subtle"
icon="i-heroicons-magnifying-glass"
icon="i-lucide-search"
/>
<template #content>

8
docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue
View File

@@ -84,7 +84,7 @@ const groups = ref([
{
label: 'Add new file',
suffix: 'Create a new file in the current directory or workspace.',
icon: 'i-heroicons-document-plus',
icon: 'i-lucide-file-plus',
kbds: [
'meta',
'N'
@@ -96,7 +96,7 @@ const groups = ref([
{
label: 'Add new folder',
suffix: 'Create a new folder in the current directory or workspace.',
icon: 'i-heroicons-folder-plus',
icon: 'i-lucide-folder-plus',
kbds: [
'meta',
'F'
@@ -108,7 +108,7 @@ const groups = ref([
{
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-heroicons-hashtag',
icon: 'i-lucide-hash',
kbds: [
'meta',
'H'
@@ -120,7 +120,7 @@ const groups = ref([
{
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-heroicons-tag',
icon: 'i-lucide-tag',
kbds: [
'meta',
'L'

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

@@ -3,22 +3,22 @@ const items = [
[
{
label: 'View',
icon: 'i-heroicons-eye'
icon: 'i-lucide-eye'
},
{
label: 'Copy',
icon: 'i-heroicons-document-duplicate'
icon: 'i-lucide-copy'
},
{
label: 'Edit',
icon: 'i-heroicons-pencil'
icon: 'i-lucide-pencil'
}
],
[
{
label: 'Delete',
color: 'error' as const,
icon: 'i-heroicons-trash'
icon: 'i-lucide-trash'
}
]
]

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

@@ -22,7 +22,7 @@ const items = [{
</template>
<template #refresh-trailing>
<UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
<UIcon v-if="loading" name="i-lucide-refresh-ccw" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
</template>
</UContextMenu>
</template>

2
docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
View File

@@ -23,7 +23,7 @@ const groups = computed(() => [{
label="Search users..."
color="neutral"
variant="subtle"
icon="i-heroicons-magnifying-glass"
icon="i-lucide-search"
/>
<template #content>

2
docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue
View File

@@ -4,7 +4,7 @@ const open = ref(false)
<template>
<UDrawer v-model:open="open" title="Drawer with footer" description="This is useful when you want a form in a Drawer." :ui="{ container: 'max-w-xl mx-auto' }">
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
<template #body>
<Placeholder class="h-48" />

2
docs/app/components/content/examples/drawer/DrawerOpenExample.vue
View File

@@ -8,7 +8,7 @@ defineShortcuts({
<template>
<UDrawer v-model:open="open">
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
<template #content>
<Placeholder class="h-48 m-4" />

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

@@ -5,13 +5,13 @@ const showDownloads = ref(false)
const items = computed(() => [{
label: 'Interface',
icon: 'i-heroicons-window',
icon: 'i-lucide-app-window',
type: 'label' as const
}, {
type: 'separator' as const
}, {
label: 'Show Bookmarks',
icon: 'i-heroicons-bookmark',
icon: 'i-lucide-bookmark',
type: 'checkbox' as const,
checked: showBookmarks.value,
onUpdateChecked(checked: boolean) {
@@ -22,7 +22,7 @@ const items = computed(() => [{
}
}, {
label: 'Show History',
icon: 'i-heroicons-clock',
icon: 'i-lucide-clock',
type: 'checkbox' as const,
checked: showHistory.value,
onUpdateChecked(checked: boolean) {
@@ -30,7 +30,7 @@ const items = computed(() => [{
}
}, {
label: 'Show Downloads',
icon: 'i-heroicons-arrow-down-on-square',
icon: 'i-lucide-download',
type: 'checkbox' as const,
checked: showDownloads.value,
onUpdateChecked(checked: boolean) {
@@ -41,6 +41,6 @@ const items = computed(() => [{
<template>
<UDropdownMenu :items="items" :content="{ align: 'start' }" class="w-48">
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
</UDropdownMenu>
</template>

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

@@ -3,22 +3,22 @@ const items = [
[
{
label: 'View',
icon: 'i-heroicons-eye'
icon: 'i-lucide-eye'
},
{
label: 'Copy',
icon: 'i-heroicons-document-duplicate'
icon: 'i-lucide-copy'
},
{
label: 'Edit',
icon: 'i-heroicons-pencil'
icon: 'i-lucide-pencil'
}
],
[
{
label: 'Delete',
color: 'error' as const,
icon: 'i-heroicons-trash'
icon: 'i-lucide-trash'
}
]
]
@@ -26,10 +26,10 @@ const items = [
<template>
<UDropdownMenu :items="items" class="w-48">
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
<template #profile-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-[var(--ui-primary)]" />
</template>
</UDropdownMenu>
</template>

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

@@ -1,23 +1,23 @@
<script setup lang="ts">
const items = [{
label: 'Profile',
icon: 'i-heroicons-user',
icon: 'i-lucide-user',
slot: 'profile'
}, {
label: 'Billing',
icon: 'i-heroicons-credit-card'
icon: 'i-lucide-credit-card'
}, {
label: 'Settings',
icon: 'i-heroicons-cog'
icon: 'i-lucide-cog'
}]
</script>
<template>
<UDropdownMenu :items="items" class="w-48">
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
<template #profile-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
<UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-[var(--ui-primary)]" />
</template>
</UDropdownMenu>
</template>

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

@@ -7,18 +7,18 @@ defineShortcuts({
const items = [{
label: 'Profile',
icon: 'i-heroicons-user'
icon: 'i-lucide-user'
}, {
label: 'Billing',
icon: 'i-heroicons-credit-card'
icon: 'i-lucide-credit-card'
}, {
label: 'Settings',
icon: 'i-heroicons-cog'
icon: 'i-lucide-cog'
}]
</script>
<template>
<UDropdownMenu v-model:open="open" :items="items" class="w-48">
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
</UDropdownMenu>
</template>

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

@@ -15,7 +15,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UInputMenu
:items="users || []"
:loading="status === 'pending'"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Select user"
>
<template #leading="{ modelValue, ui }">

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

@@ -21,7 +21,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="users || []"
:loading="status === 'pending'"
:filter="false"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Select user"
>
<template #leading="{ modelValue, ui }">

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

@@ -17,7 +17,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="users || []"
:loading="status === 'pending'"
:filter="['name', 'email']"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Select user"
class="w-80"
>

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

@@ -3,22 +3,22 @@ const items = ref([
{
label: 'Backlog',
value: 'backlog',
icon: 'i-heroicons-question-mark-circle'
icon: 'i-lucide-circle-help'
},
{
label: 'Todo',
value: 'todo',
icon: 'i-heroicons-plus-circle'
icon: 'i-lucide-circle-plus'
},
{
label: 'In Progress',
value: 'in_progress',
icon: 'i-heroicons-arrow-up-circle'
icon: 'i-lucide-circle-arrow-up'
},
{
label: 'Done',
value: 'done',
icon: 'i-heroicons-check-circle'
icon: 'i-lucide-circle-check'
}
])
const value = ref(items.value[0])

2
docs/app/components/content/examples/input/InputClearButtonExample.vue
View File

@@ -13,7 +13,7 @@ const value = ref('Click to clear')
color="neutral"
variant="link"
size="sm"
icon="i-heroicons-x-circle"
icon="i-lucide-circle-x"
aria-label="Clear input"
@click="value = ''"
/>

2
docs/app/components/content/examples/input/InputFormFieldExample.vue
View File

@@ -4,6 +4,6 @@ const email = ref('')
<template>
<UFormField label="Email" help="We won't share your email." required>
<UInput v-model="email" placeholder="Enter your email" icon="i-heroicons-at-symbol" />
<UInput v-model="email" placeholder="Enter your email" icon="i-lucide-at-sign" />
</UFormField>
</template>

4
docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
View File

@@ -50,7 +50,7 @@ const text = computed(() => {
color="neutral"
variant="link"
size="sm"
:icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
:icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
aria-label="show ? 'Hide password' : 'Show password'"
:aria-pressed="show"
aria-controls="password"
@@ -79,7 +79,7 @@ const text = computed(() => {
class="flex items-center gap-0.5"
:class="req.met ? 'text-[var(--ui-success)]' : 'text-[var(--ui-text-muted)]'"
>
<UIcon :name="req.met ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" class="size-4 shrink-0" />
<UIcon :name="req.met ? 'i-lucide-circle-check' : 'i-lucide-circle-x'" class="size-4 shrink-0" />
<span class="text-xs font-light">
{{ req.text }}

2
docs/app/components/content/examples/input/InputPasswordToggleExample.vue
View File

@@ -15,7 +15,7 @@ const password = ref('password')
color="neutral"
variant="link"
size="sm"
:icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
:icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
aria-label="show ? 'Hide password' : 'Show password'"
:aria-pressed="show"
aria-controls="password"

2
docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue
View File

@@ -23,7 +23,7 @@ const groups = computed(() => [{
label="Search users..."
color="neutral"
variant="subtle"
icon="i-heroicons-magnifying-glass"
icon="i-lucide-search"
/>
<template #content>

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

@@ -2,7 +2,7 @@
const items = [
{
label: 'Docs',
icon: 'i-heroicons-book-open',
icon: 'i-lucide-book-open',
slot: 'docs',
children: [
{
@@ -21,7 +21,7 @@ const items = [
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent',
icon: 'i-lucide-box',
slot: 'components',
children: [
{

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

@@ -2,17 +2,17 @@
const items = [
{
label: 'Guide',
icon: 'i-heroicons-book-open'
icon: 'i-lucide-book-open'
},
{
label: 'Composables',
icon: 'i-heroicons-circle-stack'
icon: 'i-lucide-database'
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent',
icon: 'i-lucide-box',
slot: 'components'
}
]

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

@@ -2,93 +2,93 @@
const items = [
{
label: 'Guide',
icon: 'i-heroicons-book-open',
icon: 'i-lucide-book-open',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-heroicons-home'
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-heroicons-cloud-arrow-down'
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-heroicons-face-smile',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-heroicons-swatch',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-heroicons-cog',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-heroicons-circle-stack',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.'
},
{
label: 'useModal',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.'
},
{
label: 'useSlideover',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Display a slideover within your application.'
},
{
label: 'useToast',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.'
}
]
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent',
icon: 'i-lucide-box',
children: [
{
label: 'Link',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.'
},
{
label: 'Modal',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.'
},
{
label: 'NavigationMenu',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Display a list of links.'
},
{
label: 'Pagination',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.'
},
{
label: 'Popover',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.'
},
{
label: 'Progress',
icon: 'i-heroicons-document-text',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.'
}
]

2
docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue
View File

@@ -28,7 +28,7 @@ const label = ref([])
<template>
<UPopover :content="{ side: 'right', align: 'start' }">
<UButton
icon="i-heroicons-tag"
icon="i-lucide-tag"
label="Select labels"
color="neutral"
variant="subtle"

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

@@ -15,7 +15,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<USelectMenu
:items="users || []"
:loading="status === 'pending'"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Select user"
class="w-48"
>

2
docs/app/components/content/examples/select-menu/SelectMenuFilterExample.vue
View File

@@ -21,7 +21,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="users || []"
:loading="status === 'pending'"
:filter="false"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Select user"
class="w-48"
>

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

@@ -17,7 +17,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="users || []"
:loading="status === 'pending'"
:filter="['name', 'email']"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Select user"
class="w-80"
>

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

@@ -3,22 +3,22 @@ const items = ref([
{
label: 'Backlog',
value: 'backlog',
icon: 'i-heroicons-question-mark-circle'
icon: 'i-lucide-circle-help'
},
{
label: 'Todo',
value: 'todo',
icon: 'i-heroicons-plus-circle'
icon: 'i-lucide-circle-plus'
},
{
label: 'In Progress',
value: 'in_progress',
icon: 'i-heroicons-arrow-up-circle'
icon: 'i-lucide-circle-arrow-up'
},
{
label: 'Done',
value: 'done',
icon: 'i-heroicons-check-circle'
icon: 'i-lucide-circle-check'
}
])
const value = ref(items.value[0])

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

@@ -19,7 +19,7 @@ function getUserAvatar(value: string) {
<USelect
:items="users || []"
:loading="status === 'pending'"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Select user"
class="w-48"
>

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

@@ -3,22 +3,22 @@ const items = ref([
{
label: 'Backlog',
value: 'backlog',
icon: 'i-heroicons-question-mark-circle'
icon: 'i-lucide-circle-help'
},
{
label: 'Todo',
value: 'todo',
icon: 'i-heroicons-plus-circle'
icon: 'i-lucide-circle-plus'
},
{
label: 'In Progress',
value: 'in_progress',
icon: 'i-heroicons-arrow-up-circle'
icon: 'i-lucide-circle-arrow-up'
},
{
label: 'Done',
value: 'done',
icon: 'i-heroicons-check-circle'
icon: 'i-lucide-circle-check'
}
])
const value = ref(items.value[0]?.value)

2
docs/app/components/content/examples/table/TableColumnPinningExample.vue
View File

@@ -90,7 +90,7 @@ function getHeader(column: Column<Payment>, label: string, position: 'left' | 'r
color: 'neutral',
variant: 'ghost',
label,
icon: isPinned ? 'i-heroicons-star-20-solid' : 'i-heroicons-star',
icon: isPinned ? 'i-lucide-pin-off' : 'i-lucide-pin',
class: '-mx-2.5',
onClick() {
column.pin(isPinned === position ? false : position)

2
docs/app/components/content/examples/table/TableColumnSortingExample.vue
View File

@@ -82,7 +82,7 @@ const columns: TableColumn<Payment>[] = [{
color: 'neutral',
variant: 'ghost',
label: 'Email',
icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
class: '-mx-2.5',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
})

6
docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue
View File

@@ -103,7 +103,7 @@ function getHeader(column: Column<Payment>, label: string) {
items: [{
label: 'Asc',
type: 'checkbox',
icon: 'i-heroicons-bars-arrow-up-20-solid',
icon: 'i-lucide-arrow-up-narrow-wide',
checked: isSorted === 'asc',
onSelect: () => {
if (isSorted === 'asc') {
@@ -114,7 +114,7 @@ function getHeader(column: Column<Payment>, label: string) {
}
}, {
label: 'Desc',
icon: 'i-heroicons-bars-arrow-down-20-solid',
icon: 'i-lucide-arrow-down-wide-narrow',
type: 'checkbox',
checked: isSorted === 'desc',
onSelect: () => {
@@ -129,7 +129,7 @@ function getHeader(column: Column<Payment>, label: string) {
color: 'neutral',
variant: 'ghost',
label,
icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
class: '-mx-2.5 data-[state=open]:bg-[var(--ui-bg-elevated)]'
}))
}

2
docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
View File

@@ -119,7 +119,7 @@ const columnVisibility = ref({
label="Columns"
color="neutral"
variant="outline"
trailing-icon="i-heroicons-chevron-down-20-solid"
trailing-icon="i-lucide-chevron-down"
/>
</UDropdownMenu>
</div>

8
docs/app/components/content/examples/table/TableExample.vue
View File

@@ -192,7 +192,7 @@ const columns: TableColumn<Payment>[] = [{
color: 'neutral',
variant: 'ghost',
label: 'Email',
icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
class: '-mx-2.5',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
})
@@ -226,7 +226,7 @@ const columns: TableColumn<Payment>[] = [{
toast.add({
title: 'Payment ID copied to clipboard!',
color: 'success',
icon: 'i-heroicons-check-circle'
icon: 'i-lucide-circle-check'
})
}
}, {
@@ -248,7 +248,7 @@ const columns: TableColumn<Payment>[] = [{
},
items
}, () => h(UButton, {
icon: 'i-heroicons-ellipsis-vertical-20-solid',
icon: 'i-lucide-ellipsis-vertical',
color: 'neutral',
variant: 'ghost',
class: 'ml-auto'
@@ -293,7 +293,7 @@ function randomize() {
label="Columns"
color="neutral"
variant="outline"
trailing-icon="i-heroicons-chevron-down-20-solid"
trailing-icon="i-lucide-chevron-down"
class="ml-auto"
/>
</UDropdownMenu>

4
docs/app/components/content/examples/table/TableRowActionsExample.vue
View File

@@ -102,7 +102,7 @@ const columns: TableColumn<Payment>[] = [{
},
items: getRowItems(row)
}, () => h(UButton, {
icon: 'i-heroicons-ellipsis-vertical-20-solid',
icon: 'i-lucide-ellipsis-vertical',
color: 'neutral',
variant: 'ghost',
class: 'ml-auto'
@@ -122,7 +122,7 @@ function getRowItems(row: Row<Payment>) {
toast.add({
title: 'Payment ID copied to clipboard!',
color: 'success',
icon: 'i-heroicons-check-circle'
icon: 'i-lucide-circle-check'
})
}
}, {

2
docs/app/components/content/examples/table/TableRowExpandableExample.vue
View File

@@ -50,7 +50,7 @@ const columns: TableColumn<Payment>[] = [{
cell: ({ row }) => h(UButton, {
color: 'neutral',
variant: 'ghost',
icon: 'i-heroicons-chevron-down-20-solid',
icon: 'i-lucide-chevron-down',
square: true,
ui: {
leadingIcon: ['transition-transform', row.getIsExpanded() ? 'duration-200 rotate-180' : '']

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

@@ -2,11 +2,11 @@
const items = [
{
label: 'Account',
icon: 'i-heroicons-user'
icon: 'i-lucide-user'
},
{
label: 'Password',
icon: 'i-heroicons-lock-closed'
icon: 'i-lucide-lock'
}
]
</script>

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

@@ -3,13 +3,13 @@ const items = [
{
label: 'Account',
description: 'Make changes to your account here. Click save when you\'re done.',
icon: 'i-heroicons-user',
icon: 'i-lucide-user',
slot: 'account'
},
{
label: 'Password',
description: 'Change your password here. After saving, you\'ll be logged out.',
icon: 'i-heroicons-lock-closed',
icon: 'i-lucide-lock',
slot: 'password'
}
]

2
docs/app/components/content/examples/toast/ToastActionsExample.vue
View File

@@ -10,7 +10,7 @@ function showToast() {
title: 'Uh oh! Something went wrong.',
description: props.description,
actions: [{
icon: 'i-heroicons-arrow-path-20-solid',
icon: 'i-lucide-refresh-ccw',
label: 'Retry',
color: 'neutral',
variant: 'outline',

2
docs/app/components/content/examples/toast/ToastCloseExample.vue
View File

@@ -5,7 +5,7 @@ function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
icon: 'i-heroicons-wifi',
icon: 'i-lucide-wifi',
close: {
color: 'primary',
variant: 'outline',

2
docs/app/components/content/examples/toast/ToastColorExample.vue
View File

@@ -11,7 +11,7 @@ function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
icon: 'i-heroicons-wifi',
icon: 'i-lucide-wifi',
color: props.color
})
}

4
docs/app/components/content/examples/toast/ToastExample.vue
View File

@@ -8,11 +8,11 @@ function addToCalendar() {
toast.add({
title: 'Event added to calendar',
description: `This event is scheduled for ${formattedDate}.`,
icon: 'i-heroicons-calendar-days'
icon: 'i-lucide-calendar-days'
})
}
</script>
<template>
<UButton label="Add to calendar" color="neutral" variant="outline" icon="i-heroicons-plus" @click="addToCalendar" />
<UButton label="Add to calendar" color="neutral" variant="outline" icon="i-lucide-plus" @click="addToCalendar" />
</template>