arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 19:00:35 +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

12
playground/app/pages/components/accordion.vue
View File

@@ -1,29 +1,29 @@
<script setup lang="ts">
const items = [{
label: 'Getting Started',
icon: 'i-heroicons-information-circle',
icon: 'i-lucide-info',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Installation',
icon: 'i-heroicons-arrow-down-tray',
icon: 'i-lucide-download',
disabled: true,
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Theming',
icon: 'i-heroicons-eye-dropper',
icon: 'i-lucide-pipette',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Layouts',
icon: 'i-heroicons-rectangle-group',
icon: 'i-lucide-layout-dashboard',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Components',
icon: 'i-heroicons-square-3-stack-3d',
icon: 'i-lucide-layers-3',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Utilities',
slot: 'custom' as const,
icon: 'i-heroicons-wrench-screwdriver',
icon: 'i-lucide-wrench',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}]
</script>

2
playground/app/pages/components/alert.vue
View File

@@ -14,7 +14,7 @@ const actions = (color: string) => [{
const data = {
title: 'Heads up!',
description: 'You can change the primary color in your app config.',
icon: 'i-heroicons-command-line',
icon: 'i-lucide-terminal',
close: true
}
</script>

2
playground/app/pages/components/avatar.vue
View File

@@ -10,7 +10,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
<UAvatar v-for="size in sizes" :key="size" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" :size="size" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar v-for="size in sizes" :key="size" icon="i-heroicons-photo" :size="size" />
<UAvatar v-for="size in sizes" :key="size" icon="i-lucide-image" :size="size" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar v-for="size in sizes" :key="size" alt="Benjamin Canac" :size="size" />

6
playground/app/pages/components/badge.vue
View File

@@ -14,13 +14,13 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
</UBadge>
</div>
<div class="flex items-center gap-2">
<UBadge v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" :label="upperFirst(variant)" :variant="variant" />
<UBadge v-for="variant in variants" :key="variant" icon="i-lucide-rocket" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UBadge
v-for="variant in variants"
:key="variant"
icon="i-heroicons-rocket-launch"
icon="i-lucide-rocket"
:label="upperFirst(variant)"
:variant="variant"
color="neutral"
@@ -40,7 +40,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
<UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
</div>
<div class="flex items-center gap-2 ms-[-86px]">
<UBadge v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Badge" :size="size" />
<UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Badge" :size="size" />
</div>
<div class="flex items-center gap-2 ms-[-86px]">
<UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />

2
playground/app/pages/components/breadcrumb.vue
View File

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

14
playground/app/pages/components/button.vue
View File

@@ -47,13 +47,13 @@ function onClick() {
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" :label="upperFirst(variant)" :variant="variant" />
<UButton v-for="variant in variants" :key="variant" icon="i-lucide-rocket" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UButton
v-for="variant in variants"
:key="variant"
icon="i-heroicons-rocket-launch"
icon="i-lucide-rocket"
:label="upperFirst(variant)"
:variant="variant"
color="neutral"
@@ -73,7 +73,7 @@ function onClick() {
<UButton v-for="size in sizes" :key="size" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ms-[-171px]">
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="size" />
<UButton v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ms-[-171px]">
<UButton v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Button" :size="size" />
@@ -82,7 +82,7 @@ function onClick() {
<UButton
v-for="size in sizes"
:key="size"
icon="i-heroicons-rocket-launch"
icon="i-lucide-rocket"
label="Square"
square
:size="size"
@@ -99,7 +99,7 @@ function onClick() {
/>
</div>
<div class="flex items-center gap-2 ms-[-68px]">
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="size" />
<UButton v-for="size in sizes" :key="size" icon="i-lucide-rocket" :size="size" />
</div>
<div class="flex items-center gap-2 ms-[-68px]">
<UButton
@@ -112,10 +112,10 @@ function onClick() {
/>
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" label="Block" block />
<UButton icon="i-lucide-rocket" trailing-icon="i-lucide-chevron-down" label="Block" block />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-cloud-arrow-down" label="Button" class="group" :ui="{ leadingIcon: 'group-hover:animate-pulse' }" />
<UButton icon="i-lucide-cloud-download" label="Button" class="group" :ui="{ leadingIcon: 'group-hover:animate-pulse' }" />
</div>
</div>
</template>

2
playground/app/pages/components/checkbox.vue
View File

@@ -12,7 +12,7 @@ const checked = ref(true)
<UCheckbox v-model="checked" label="Primary" />
<UCheckbox label="Neutral" color="neutral" :default-value="true" />
<UCheckbox label="Error" color="error" :model-value="true" />
<UCheckbox label="Icon" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Icon" icon="i-lucide-heart" :model-value="true" />
<UCheckbox label="Default value" :default-value="true" />
<UCheckbox label="Indeterminate" indeterminate />
<UCheckbox label="Required" required />

6
playground/app/pages/components/chip.vue
View File

@@ -6,11 +6,11 @@ const positions = Object.keys(theme.variants.position) as Array<keyof typeof the
const items = [{
name: 'messages',
icon: 'i-heroicons-chat-bubble-oval-left',
icon: 'i-lucide-message-circle',
count: 3
}, {
name: 'notifications',
icon: 'i-heroicons-bell',
icon: 'i-lucide-bell',
count: 0
}]
</script>
@@ -19,7 +19,7 @@ const items = [{
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2">
<UChip v-for="position in positions" :key="position" :position="position">
<UButton icon="i-heroicons-inbox" color="neutral" variant="subtle" />
<UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
</UChip>
</div>

2
playground/app/pages/components/collapsible.vue
View File

@@ -9,7 +9,7 @@ const appConfig = useAppConfig()
<UCollapsible class="flex flex-col gap-2 w-48">
<UButton
class="group"
icon="i-heroicons-light-bulb"
icon="i-lucide-lightbulb"
:trailing-icon="appConfig.ui.icons.chevronDown"
color="neutral"
variant="outline"

8
playground/app/pages/components/command-palette.vue
View File

@@ -30,7 +30,7 @@ const groups = computed(() => [{
items: [{
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',
loading: loading.value,
onSelect(e: Event) {
e.preventDefault()
@@ -47,7 +47,7 @@ const groups = computed(() => [{
}, {
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',
onSelect(e: Event) {
e.preventDefault()
@@ -57,7 +57,7 @@ const groups = computed(() => [{
}, {
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-heroicons-hashtag',
icon: 'i-lucide-hash',
onSelect(e: Event) {
e.preventDefault()
@@ -67,7 +67,7 @@ const groups = computed(() => [{
}, {
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-heroicons-tag',
icon: 'i-lucide-tag',
onSelect(e: Event) {
e.preventDefault()

8
playground/app/pages/components/context-menu.vue
View File

@@ -15,13 +15,13 @@ const items = computed(() => [
label: 'Appearance',
children: [{
label: 'System',
icon: 'i-heroicons-computer-desktop'
icon: 'i-lucide-monitor'
}, {
label: 'Light',
icon: 'i-heroicons-sun'
icon: 'i-lucide-sun'
}, {
label: 'Dark',
icon: 'i-heroicons-moon'
icon: 'i-lucide-moon'
}]
}],
[{
@@ -88,7 +88,7 @@ const items = computed(() => [
const itemsWithColor = computed(() => Object.keys(theme.variants.color).map(color => ({
color: (color as keyof typeof theme.variants.color),
icon: 'i-heroicons-swatch',
icon: 'i-lucide-swatch-book',
label: color
})))

36
playground/app/pages/components/dropdown-menu.vue
View File

@@ -13,7 +13,7 @@ const items = computed(() => [
}],
[{
label: 'Profile',
icon: 'i-heroicons-user',
icon: 'i-lucide-user',
slot: 'custom' as const,
onSelect(e: Event) {
e.preventDefault()
@@ -21,30 +21,30 @@ const items = computed(() => [
}
}, {
label: 'Billing',
icon: 'i-heroicons-credit-card',
icon: 'i-lucide-credit-card',
kbds: ['meta', 'b'],
onSelect() {
console.log('Billing clicked')
}
}, {
label: 'Settings',
icon: 'i-heroicons-cog',
icon: 'i-lucide-cog',
kbds: ['?'],
onSelect() {
console.log('Settings clicked')
}
}], [{
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',
kbds: ['meta', 'i'],
onSelect(e: Event) {
e.preventDefault()
@@ -52,7 +52,7 @@ const items = computed(() => [
}
}], [{
label: 'More',
icon: 'i-heroicons-plus-circle',
icon: 'i-lucide-circle-plus',
children: [{
label: 'Import from Slack',
icon: 'i-simple-icons-slack',
@@ -80,7 +80,7 @@ const items = computed(() => [
}]]
}, {
label: 'New team',
icon: 'i-heroicons-plus',
icon: 'i-lucide-plus',
kbds: ['meta', 'n'],
loading: loading.value,
onSelect(e: Event) {
@@ -101,20 +101,20 @@ const items = computed(() => [
}
}, {
label: 'Support',
icon: 'i-heroicons-lifebuoy',
icon: 'i-lucide-life-buoy',
to: '/components/dropdown-menu'
}, {
type: 'separator' as const
}, {
label: 'Keyboard Shortcuts',
icon: 'i-heroicons-key'
icon: 'i-lucide-key-round'
}, {
label: 'API',
icon: 'i-heroicons-cube',
icon: 'i-lucide-box',
disabled: true
}], [{
label: 'Logout',
icon: 'i-heroicons-arrow-right-start-on-rectangle',
icon: 'i-lucide-log-out',
kbds: ['shift', 'meta', 'q'],
onSelect() {
console.log('Logout clicked')
@@ -124,7 +124,7 @@ const items = computed(() => [
const itemsWithColor = computed(() => Object.keys(theme.variants.color).map(color => ({
color: (color as keyof typeof theme.variants.color),
icon: 'i-heroicons-swatch',
icon: 'i-lucide-swatch-book',
label: color
})))
@@ -141,18 +141,18 @@ defineShortcuts(extractShortcuts(items.value))
<USelectMenu v-model="size" :items="sizes" placeholder="Size" />
<UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-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 #custom-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>
<UDropdownMenu :items="itemsWithColor" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
<UButton label="Color" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<UButton label="Color" color="neutral" variant="outline" icon="i-lucide-menu" />
<template #custom-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>
</div>

18
playground/app/pages/components/input-menu.vue
View File

@@ -15,19 +15,19 @@ const selectedItems = ref([fruits[0]!, vegetables[0]!])
const statuses = [{
label: 'Backlog',
icon: 'i-heroicons-question-mark-circle'
icon: 'i-lucide-circle-help'
}, {
label: 'Todo',
icon: 'i-heroicons-plus-circle'
icon: 'i-lucide-circle-plus'
}, {
label: 'In Progress',
icon: 'i-heroicons-arrow-up-circle'
icon: 'i-lucide-circle-arrow-up'
}, {
label: 'Done',
icon: 'i-heroicons-check-circle'
icon: 'i-lucide-circle-check'
}, {
label: 'Canceled',
icon: 'i-heroicons-x-circle'
icon: 'i-lucide-circle-x'
}]
const searchTerm = ref('')
@@ -102,8 +102,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:key="size"
:items="statuses"
placeholder="Search status..."
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
icon="i-lucide-search"
trailing-icon="i-lucide-chevrons-up-down"
:size="size"
class="w-48"
>
@@ -120,7 +120,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="Search users..."
:size="size"
class="w-48"
@@ -137,7 +137,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="items"
:model-value="[fruits[0]!]"
multiple
icon="i-heroicons-magnifying-glass"
icon="i-lucide-search"
placeholder="Search..."
:size="size"
class="w-48"

16
playground/app/pages/components/input.vue
View File

@@ -38,13 +38,13 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
<div class="flex flex-col gap-4 w-48">
<UInput placeholder="Disabled" disabled />
<UInput placeholder="Required" required />
<UInput file="i-heroicons-calculator" type="number" :model-value="10" />
<UInput icon="i-heroicons-folder" type="file" />
<UInput icon="i-heroicons-calendar" type="date" :model-value="new Date().toISOString().substring(0, 10)" />
<UInput icon="i-heroicons-lock-closed" type="password" model-value="password" />
<UInput file="i-lucide-calculator" type="number" :model-value="10" />
<UInput icon="i-lucide-folder" type="file" />
<UInput icon="i-lucide-calendar" type="date" :model-value="new Date().toISOString().substring(0, 10)" />
<UInput icon="i-lucide-lock" type="password" model-value="password" />
<UInput loading placeholder="Search..." />
<UInput loading trailing placeholder="Search..." />
<UInput loading icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-down" placeholder="Search..." />
<UInput loading icon="i-lucide-search" trailing-icon="i-lucide-chevron-down" placeholder="Search..." />
</div>
<div class="flex items-center gap-4">
<UInput
@@ -59,7 +59,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
<UInput
v-for="size in sizes"
:key="size"
icon="i-heroicons-magnifying-glass"
icon="i-lucide-search"
placeholder="Search..."
:size="size"
class="w-48"
@@ -69,7 +69,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
<UInput
v-for="size in sizes"
:key="size"
icon="i-heroicons-magnifying-glass"
icon="i-lucide-search"
trailing
placeholder="Search..."
:size="size"
@@ -81,7 +81,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
v-for="size in sizes"
:key="size"
:avatar="{ src: 'https://github.com/benjamincanac.png' }"
icon="i-heroicons-magnifying-glass"
icon="i-lucide-search"
trailing
placeholder="Search..."
:size="size"

26
playground/app/pages/components/navigation-menu.vue
View File

@@ -14,57 +14,57 @@ const highlight = ref(true)
const items = [
[{
label: 'Documentation',
icon: 'i-heroicons-book-open',
icon: 'i-lucide-book-open',
badge: 10,
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: 'Theming',
description: 'Learn how to customize the look and feel of the components.',
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
}, {
label: 'Shortcuts',
description: 'Learn how to display and define keyboard shortcuts in your app.',
icon: 'i-heroicons-computer-desktop'
icon: 'i-lucide-monitor'
}]
}, {
label: 'Components',
icon: 'i-heroicons-cube-transparent',
icon: 'i-lucide-box',
active: true,
children: [{
label: 'Link',
icon: 'i-heroicons-document',
icon: 'i-lucide-file',
description: 'Use NuxtLink with superpowers.',
to: '/components/link'
}, {
label: 'Modal',
icon: 'i-heroicons-document',
icon: 'i-lucide-file',
description: 'Display a modal within your application.',
to: '/components/modal'
}, {
label: 'NavigationMenu',
icon: 'i-heroicons-document',
icon: 'i-lucide-file',
description: 'Display a list of links.',
to: '/components/navigation-menu'
}, {
label: 'Pagination',
icon: 'i-heroicons-document',
icon: 'i-lucide-file',
description: 'Display a list of pages.',
to: '/components/pagination'
}, {
label: 'Popover',
icon: 'i-heroicons-document',
icon: 'i-lucide-file',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/components/popover'
}, {
label: 'Progress',
icon: 'i-heroicons-document',
icon: 'i-lucide-file',
description: 'Show a horizontal bar to indicate task progression.',
to: '/components/progress'
}]
@@ -75,7 +75,7 @@ const items = [
target: '_blank'
}, {
label: 'Help',
icon: 'i-heroicons-question-mark-circle',
icon: 'i-lucide-circle-help',
disabled: true
}]
]

2
playground/app/pages/components/popover.vue
View File

@@ -47,7 +47,7 @@ function send() {
<template #content>
<div class="flex justify-center gap-2 p-4 w-48">
<UButton label="Close" color="neutral" @click="open = false" />
<UButton label="Send" color="neutral" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
<UButton label="Send" color="neutral" trailing-icon="i-lucide-send-horizontal" :loading="loading" @click="send" />
</div>
</template>
</UPopover>

16
playground/app/pages/components/select-menu.vue
View File

@@ -16,23 +16,23 @@ const selectedItems = ref([fruits[0]!, vegetables[0]!])
const statuses = [{
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'
}, {
label: 'Canceled',
value: 'canceled',
icon: 'i-heroicons-x-circle'
icon: 'i-lucide-circle-x'
}]
const searchTerm = ref('')
@@ -107,8 +107,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:key="size"
:items="statuses"
placeholder="Search status..."
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
icon="i-lucide-search"
trailing-icon="i-lucide-chevrons-up-down"
:size="size"
class="w-48"
>
@@ -125,7 +125,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="Search users..."
:size="size"
class="w-48"

18
playground/app/pages/components/select.vue
View File

@@ -14,23 +14,23 @@ const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Veget
const statuses = [{
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'
}, {
label: 'Canceled',
value: 'canceled',
icon: 'i-heroicons-x-circle'
icon: 'i-lucide-circle-x'
}]
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
@@ -41,7 +41,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
})
function getStatusIcon(value: string): string {
return statuses.find(status => status.value === value)?.icon || 'i-heroicons-user'
return statuses.find(status => status.value === value)?.icon || 'i-lucide-user'
}
function getUserAvatar(value: string) {
@@ -108,8 +108,8 @@ function getUserAvatar(value: string) {
:key="size"
:items="statuses"
placeholder="Search status..."
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
icon="i-lucide-search"
trailing-icon="i-lucide-chevrons-up-down"
:size="size"
class="w-48"
>
@@ -124,7 +124,7 @@ function getUserAvatar(value: string) {
:key="size"
:items="users || []"
:loading="status === 'pending'"
icon="i-heroicons-user"
icon="i-lucide-user"
placeholder="Search users..."
:size="size"
class="w-48"

2
playground/app/pages/components/shortcuts.vue
View File

@@ -33,7 +33,7 @@
<h3 class="font-bold">
Logs
</h3>
<UButton icon="i-heroicons-trash" size="sm" color="neutral" class="-my-1" @click="logs = []" />
<UButton icon="i-lucide-trash" size="sm" color="neutral" class="-my-1" @click="logs = []" />
</div>
</template>

12
playground/app/pages/components/switch.vue
View File

@@ -25,8 +25,8 @@ const checked = ref(true)
:key="size"
:size="size"
label="Switch me"
unchecked-icon="i-heroicons-x-mark-20-solid"
checked-icon="i-heroicons-check-20-solid"
unchecked-icon="i-lucide-x"
checked-icon="i-lucide-check"
/>
</div>
<div class="flex items-center gap-4 ms-[-82px]">
@@ -35,8 +35,8 @@ const checked = ref(true)
:key="size"
:size="size"
label="Switch me"
unchecked-icon="i-heroicons-x-mark-20-solid"
checked-icon="i-heroicons-check-20-solid"
unchecked-icon="i-lucide-x"
checked-icon="i-lucide-check"
loading
/>
</div>
@@ -56,8 +56,8 @@ const checked = ref(true)
:size="size"
label="Switch me"
description="This is a description"
unchecked-icon="i-heroicons-x-mark-20-solid"
checked-icon="i-heroicons-check-20-solid"
unchecked-icon="i-lucide-x"
checked-icon="i-lucide-check"
/>
</div>
</div>

8
playground/app/pages/components/table.vue
View File

@@ -194,7 +194,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')
})
@@ -228,7 +228,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'
})
}
}, {
@@ -250,7 +250,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: 'ms-auto'
@@ -305,7 +305,7 @@ onMounted(() => {
label="Columns"
color="neutral"
variant="outline"
trailing-icon="i-heroicons-chevron-down-20-solid"
trailing-icon="i-lucide-chevron-down"
class="ms-auto"
/>
</UDropdownMenu>

4
playground/app/pages/components/tabs.vue
View File

@@ -19,11 +19,11 @@ const items = [{
content: 'This is the content shown for Tab1'
}, {
label: 'Tab2',
icon: 'i-heroicons-user',
icon: 'i-lucide-user',
content: 'And, this is the content for Tab2'
}, {
label: 'Tab3',
icon: 'i-heroicons-bell',
icon: 'i-lucide-bell',
content: 'Finally, this is the content for Tab3',
slot: 'custom' as const
}]

10
playground/app/pages/components/toast.vue
View File

@@ -20,13 +20,13 @@ const templates = (id: number) => [{
}, {
title: 'Toast',
description: `This is the toast ${id}`,
icon: 'i-heroicons-rocket-launch'
icon: 'i-lucide-rocket'
}, {
title: `Toast ${id}`,
icon: 'i-heroicons-rocket-launch'
icon: 'i-lucide-rocket'
}, {
description: `This is the toast ${id}`,
icon: 'i-heroicons-rocket-launch'
icon: 'i-lucide-rocket'
}, {
title: 'Toast',
description: `This is the toast ${id}`,
@@ -47,7 +47,7 @@ const templates = (id: number) => [{
}]
}, {
title: `Toast ${id}`,
icon: 'i-heroicons-rocket-launch',
icon: 'i-lucide-rocket',
actions: [{
label: 'Action 1',
color: 'neutral' as const,
@@ -64,7 +64,7 @@ const templates = (id: number) => [{
}]
}, {
description: `This is the toast ${id}`,
icon: 'i-heroicons-rocket-launch',
icon: 'i-lucide-rocket',
actions: [{
label: 'Action',
variant: 'outline' as const,