@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/dashboard-shell/DashboardShell.vue

@@ -13,64 +13,64 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    appName?: string;
-    appLogo?: string;
-    appLogoDark?: string;
-    appLinkTo?: string;
-    title?: string;
-    description?: string;
-    collapsible?: 'offcanvas' | 'icon' | 'none';
-    compact?: boolean;
-    sidebarSections?: Array<{
-        id: string;
-        label?: string;
-        items: Array<{
-            id: string;
-            label: string;
-            description?: string;
-            icon?: HugeiconsIconDefinition | null;
-            href?: string;
-            to?: unknown;
-            active?: boolean;
-            newTab?: boolean;
-        }>;
-    }>;
-    sidebarLinkComponent?: Component | string;
-    showBackground?: boolean;
-    insetClass?: HTMLAttributes['class'];
-    topbarClass?: HTMLAttributes['class'];
-    contentContainerClass?: HTMLAttributes['class'];
+	appName?: string;
+	appLogo?: string;
+	appLogoDark?: string;
+	appLinkTo?: string;
+	title?: string;
+	description?: string;
+	collapsible?: 'offcanvas' | 'icon' | 'none';
+	compact?: boolean;
+	sidebarSections?: Array<{
+		id: string;
+		label?: string;
+		items: Array<{
+			id: string;
+			label: string;
+			description?: string;
+			icon?: HugeiconsIconDefinition | null;
+			href?: string;
+			to?: unknown;
+			active?: boolean;
+			newTab?: boolean;
+		}>;
+	}>;
+	sidebarLinkComponent?: Component | string;
+	showBackground?: boolean;
+	insetClass?: HTMLAttributes['class'];
+	topbarClass?: HTMLAttributes['class'];
+	contentContainerClass?: HTMLAttributes['class'];
 }>(), {
-    appName: '',
-    appLogo: '',
-    appLogoDark: '',
-    appLinkTo: '/',
-    title: '',
-    description: '',
-    collapsible: 'offcanvas',
-    compact: false,
-    sidebarSections: () => [],
-    sidebarLinkComponent: 'a',
-    showBackground: true
+	appName: '',
+	appLogo: '',
+	appLogoDark: '',
+	appLinkTo: '/',
+	title: '',
+	description: '',
+	collapsible: 'offcanvas',
+	compact: false,
+	sidebarSections: () => [],
+	sidebarLinkComponent: 'a',
+	showBackground: true
 });
 
 // Resolve link props for sidebar items
 const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>[number]['items'][number]) => {
-    const sharedProps = item.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-
-    // If the link component is an anchor, use href. Otherwise, use to for router links.
-    if (props.sidebarLinkComponent === 'a') {
-        return {
-            href: item.href ?? '#',
-            ...sharedProps
-        };
-    }
-
-    // For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
-    return {
-        to: item.to ?? item.href ?? '/',
-        ...sharedProps
-    };
+	const sharedProps = item.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+
+	// If the link component is an anchor, use href. Otherwise, use to for router links.
+	if (props.sidebarLinkComponent === 'a') {
+		return {
+			href: item.href ?? '#',
+			...sharedProps
+		};
+	}
+
+	// For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
+	return {
+		to: item.to ?? item.href ?? '/',
+		...sharedProps
+	};
 };
 
 const { t } = useI18n();
@@ -85,122 +85,122 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 </script>
 
 <template>
-    <SidebarProvider>
-        <!-- Sidebar -->
-        <Sidebar :collapsible="props.collapsible" :compact="props.compact">
-            <!-- Sidebar header -->
-            <SidebarHeader v-if="props.appName || lightLogo || $slots['sidebar-header']" class="h-16 justify-center border-b border-sidebar-border">
-                <slot name="sidebar-header">
-                    <SidebarMenu>
-                        <SidebarMenuItem>
-                            <SidebarMenuButton as-child size="lg">
-                                <a :href="props.appLinkTo" class="inline-flex items-center gap-2">
-                                    <div class="inline-flex items-center gap-2">
-                                        <!-- App logo -->
-                                        <template v-if="lightLogo">
-                                            <NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" :class="['size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden']" />
-                                            <NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" class="hidden size-8 shrink-0 object-contain dark:block" />
-                                        </template>
-
-                                        <!-- App name -->
-                                        <span v-if="props.appName" class="text-xl font-semibold tracking-tight text-foreground">{{ props.appName }}</span>
-                                    </div>
-                                </a>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                    </SidebarMenu>
-                </slot>
-            </SidebarHeader>
-
-            <!-- Sidebar sections -->
-            <SidebarContent v-if="props.sidebarSections.length">
-                <SidebarGroup v-for="section in props.sidebarSections" :key="section.id" class="space-y-1">
-                    <!-- Section label -->
-                    <SidebarGroupLabel v-if="section.label">
-                        {{ section.label }}
-                    </SidebarGroupLabel>
-
-                    <!-- Section content -->
-                    <SidebarGroupContent>
-                        <SidebarMenu :class="cn('gap-1', props.compact && 'gap-0.5')">
-                            <SidebarMenuItem v-for="item in section.items" :key="item.id">
-                                <SidebarMenuButton as-child :is-active="item.active" :class="cn('group/nav relative h-auto min-h-11 overflow-hidden rounded px-3 py-2.5 text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-foreground sm:px-3.5', 'before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:origin-center before:scale-y-0 before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-[active=true]:before:scale-y-100', item.description ? 'items-start' : 'items-center')">
-                                    <component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
-                                        <!-- Icon -->
-                                        <HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />
-
-                                        <!-- Label and optional description -->
-                                        <div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">
-                                            <!-- Label -->
-                                            <span class="truncate font-semibold">{{ item.label }}</span>
-
-                                            <!-- Description -->
-                                            <span v-if="item.description" class="mt-0.5 text-[11px] leading-4 text-sidebar-foreground/65">
-                                                {{ item.description }}
-                                            </span>
-                                        </div>
-                                    </component>
-                                </SidebarMenuButton>
-                            </SidebarMenuItem>
-                        </SidebarMenu>
-                    </SidebarGroupContent>
-                </SidebarGroup>
-            </SidebarContent>
-
-            <!-- Sidebar footer -->
-            <SidebarFooter class="border-t border-sidebar-border">
-                <slot name="sidebar-footer">
-                    <div class="flex items-center gap-2">
-                        <ThemeSelector />
-                    </div>
-                </slot>
-            </SidebarFooter>
-        </Sidebar>
-
-        <!-- Main shell -->
-        <SidebarInset :class="cn('relative min-h-screen min-w-0 bg-background text-foreground', props.insetClass)">
-            <!-- Background -->
-            <BackgroundGrid v-if="props.showBackground" />
-
-            <!-- Topbar -->
-            <header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar/80 px-4 backdrop-blur-md backdrop-saturate-150', props.topbarClass)">
-                <!-- Sidebar trigger -->
-                <SidebarTrigger class="-ml-1" />
-
-                <!-- Vertical separator -->
-                <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
-
-                <!-- Optional custom content on the leading side of the topbar -->
-                <slot name="topbar-leading" />
-
-                <!-- Title and description -->
-                <div class="min-w-0 flex-1">
-                    <!-- Title -->
-                    <div class="truncate text-sm font-semibold">
-                        {{ props.title }}
-                    </div>
-
-                    <!-- Description -->
-                    <div v-if="props.description" class="truncate text-xs text-muted-foreground">
-                        {{ props.description }}
-                    </div>
-                </div>
-
-                <!-- Optional custom content on the trailing side of the topbar -->
-                <slot name="topbar-trailing" />
-            </header>
-
-            <!-- Main content -->
-            <main class="relative z-10 min-w-0 flex-1">
-                <div :class="cn('mx-auto flex w-full min-w-0 max-w-7xl flex-col gap-6 px-3 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8', props.contentContainerClass)">
-                    <slot />
-                </div>
-            </main>
-
-            <!-- Full-width footer -->
-            <footer v-if="$slots.footer" class="relative z-10 mt-auto">
-                <slot name="footer" />
-            </footer>
-        </SidebarInset>
-    </SidebarProvider>
+	<SidebarProvider>
+		<!-- Sidebar -->
+		<Sidebar :collapsible="props.collapsible" :compact="props.compact">
+			<!-- Sidebar header -->
+			<SidebarHeader v-if="props.appName || lightLogo || $slots['sidebar-header']" class="h-16 justify-center border-b border-sidebar-border">
+				<slot name="sidebar-header">
+					<SidebarMenu>
+						<SidebarMenuItem>
+							<SidebarMenuButton as-child size="lg">
+								<a :href="props.appLinkTo" class="inline-flex items-center gap-2">
+									<div class="inline-flex items-center gap-2">
+										<!-- App logo -->
+										<template v-if="lightLogo">
+											<NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" :class="['size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden']" />
+											<NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" class="hidden size-8 shrink-0 object-contain dark:block" />
+										</template>
+
+										<!-- App name -->
+										<span v-if="props.appName" class="text-xl font-semibold tracking-tight text-foreground">{{ props.appName }}</span>
+									</div>
+								</a>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					</SidebarMenu>
+				</slot>
+			</SidebarHeader>
+
+			<!-- Sidebar sections -->
+			<SidebarContent v-if="props.sidebarSections.length">
+				<SidebarGroup v-for="section in props.sidebarSections" :key="section.id" class="space-y-1">
+					<!-- Section label -->
+					<SidebarGroupLabel v-if="section.label">
+						{{ section.label }}
+					</SidebarGroupLabel>
+
+					<!-- Section content -->
+					<SidebarGroupContent>
+						<SidebarMenu :class="cn('gap-1', props.compact && 'gap-0.5')">
+							<SidebarMenuItem v-for="item in section.items" :key="item.id">
+								<SidebarMenuButton as-child :is-active="item.active" :class="cn('group/nav relative h-auto min-h-11 overflow-hidden rounded px-3 py-2.5 text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-foreground sm:px-3.5', 'before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:origin-center before:scale-y-0 before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-[active=true]:before:scale-y-100', item.description ? 'items-start' : 'items-center')">
+									<component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
+										<!-- Icon -->
+										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />
+
+										<!-- Label and optional description -->
+										<div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">
+											<!-- Label -->
+											<span class="truncate font-semibold">{{ item.label }}</span>
+
+											<!-- Description -->
+											<span v-if="item.description" class="mt-0.5 text-[11px] leading-4 text-sidebar-foreground/65">
+												{{ item.description }}
+											</span>
+										</div>
+									</component>
+								</SidebarMenuButton>
+							</SidebarMenuItem>
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</SidebarGroup>
+			</SidebarContent>
+
+			<!-- Sidebar footer -->
+			<SidebarFooter class="border-t border-sidebar-border">
+				<slot name="sidebar-footer">
+					<div class="flex items-center gap-2">
+						<ThemeSelector />
+					</div>
+				</slot>
+			</SidebarFooter>
+		</Sidebar>
+
+		<!-- Main shell -->
+		<SidebarInset :class="cn('relative min-h-screen min-w-0 bg-background text-foreground', props.insetClass)">
+			<!-- Background -->
+			<BackgroundGrid v-if="props.showBackground" />
+
+			<!-- Topbar -->
+			<header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar/80 px-4 backdrop-blur-md backdrop-saturate-150', props.topbarClass)">
+				<!-- Sidebar trigger -->
+				<SidebarTrigger class="-ml-1" />
+
+				<!-- Vertical separator -->
+				<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
+
+				<!-- Optional custom content on the leading side of the topbar -->
+				<slot name="topbar-leading" />
+
+				<!-- Title and description -->
+				<div class="min-w-0 flex-1">
+					<!-- Title -->
+					<div class="truncate text-sm font-semibold">
+						{{ props.title }}
+					</div>
+
+					<!-- Description -->
+					<div v-if="props.description" class="truncate text-xs text-muted-foreground">
+						{{ props.description }}
+					</div>
+				</div>
+
+				<!-- Optional custom content on the trailing side of the topbar -->
+				<slot name="topbar-trailing" />
+			</header>
+
+			<!-- Main content -->
+			<main class="relative z-10 min-w-0 flex-1">
+				<div :class="cn('mx-auto flex w-full min-w-0 max-w-7xl flex-col gap-6 px-3 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8', props.contentContainerClass)">
+					<slot />
+				</div>
+			</main>
+
+			<!-- Full-width footer -->
+			<footer v-if="$slots.footer" class="relative z-10 mt-auto">
+				<slot name="footer" />
+			</footer>
+		</SidebarInset>
+	</SidebarProvider>
 </template>

package/src/components/data-list/DataList.vue

@@ -4,14 +4,14 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <table data-slot="data-list" :class="cn('w-full text-left text-xs md:text-sm', props.class)">
-        <tbody class="border-y border-border">
-            <slot />
-        </tbody>
-    </table>
+	<table data-slot="data-list" :class="cn('w-full text-left text-xs md:text-sm', props.class)">
+		<tbody class="border-y border-border">
+			<slot />
+		</tbody>
+	</table>
 </template>

package/src/components/data-list/DataListItem.vue

@@ -4,12 +4,12 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <tr data-slot="data-list-item" :class="cn('border-b border-border last:border-b-0', props.class)">
-        <slot />
-    </tr>
+	<tr data-slot="data-list-item" :class="cn('border-b border-border last:border-b-0', props.class)">
+		<slot />
+	</tr>
 </template>

package/src/components/data-list/DataListLabel.vue

@@ -4,12 +4,12 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <td data-slot="data-list-label" :class="cn('py-3 align-top text-muted-foreground', props.class)">
-        <slot />
-    </td>
+	<td data-slot="data-list-label" :class="cn('py-3 align-top text-muted-foreground', props.class)">
+		<slot />
+	</td>
 </template>

package/src/components/data-list/DataListText.vue

@@ -4,12 +4,12 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="data-list-text" :class="cn('line-clamp-3', props.class)">
-        <slot />
-    </div>
+	<div data-slot="data-list-text" :class="cn('line-clamp-3', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/data-list/DataListValue.vue

@@ -4,12 +4,12 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <td data-slot="data-list-value" :class="cn('py-3 pl-2 align-top text-right font-semibold text-foreground', props.class)">
-        <slot />
-    </td>
+	<td data-slot="data-list-value" :class="cn('py-3 pl-2 align-top text-right font-semibold text-foreground', props.class)">
+		<slot />
+	</td>
 </template>

package/src/components/empty-state-card/EmptyStateCard.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { PackageIcon } from '@hugeicons/core-free-icons';
+import PackageIcon from '@hugeicons/core-free-icons/PackageIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    icon?: HugeiconsIconDefinition;
-    title?: string;
-    description?: string;
-    titleKey?: string;
-    descriptionKey?: string;
-    level?: HeadingLevel;
+	icon?: HugeiconsIconDefinition;
+	title?: string;
+	description?: string;
+	titleKey?: string;
+	descriptionKey?: string;
+	level?: HeadingLevel;
 }>(), {
-    icon: () => PackageIcon,
-    title: '',
-    description: '',
-    titleKey: '',
-    descriptionKey: '',
-    level: 3
+	icon: () => PackageIcon,
+	title: '',
+	description: '',
+	titleKey: '',
+	descriptionKey: '',
+	level: 3
 });
 
 const { t } = useI18n();
@@ -28,41 +28,41 @@ const hasCustomCopy = computed(() => Boolean(props.title || props.description ||
 
 // Title
 const resolvedTitle = computed(() => props.title
-    || (props.titleKey ? t(props.titleKey) : '')
-    || (!hasCustomCopy.value ? t('uiVintage.common.empty.title') : '')
-    || (!hasCustomCopy.value ? 'Nothing here yet' : ''));
+	|| (props.titleKey ? t(props.titleKey) : '')
+	|| (!hasCustomCopy.value ? t('uiVintage.common.empty.title') : '')
+	|| (!hasCustomCopy.value ? 'Nothing here yet' : ''));
 
 // Description
 const resolvedDescription = computed(() => props.description
-    || (props.descriptionKey ? t(props.descriptionKey) : '')
-    || (!hasCustomCopy.value ? t('uiVintage.common.empty.description') : '')
-    || (!hasCustomCopy.value ? 'There is no content to show right now.' : ''));
+	|| (props.descriptionKey ? t(props.descriptionKey) : '')
+	|| (!hasCustomCopy.value ? t('uiVintage.common.empty.description') : '')
+	|| (!hasCustomCopy.value ? 'There is no content to show right now.' : ''));
 </script>
 
 <template>
-    <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
-        <CardContent class="flex flex-col items-center justify-center p-0! text-center">
-            <!-- Icon -->
-            <div aria-hidden="true" class="flex items-center justify-center text-4xl text-muted-foreground opacity-40">
-                <HugeiconsIcon :icon="props.icon" class="size-10 animate-uv-float" />
-            </div>
+	<Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
+		<CardContent class="flex flex-col items-center justify-center p-0! text-center">
+			<!-- Icon -->
+			<div aria-hidden="true" class="flex items-center justify-center text-4xl text-muted-foreground opacity-40">
+				<HugeiconsIcon :icon="props.icon" class="size-10 animate-uv-float" />
+			</div>
 
-            <!-- Title -->
-            <component :is="`h${props.level}`"
-                v-if="resolvedTitle"
-                class="text-sm font-semibold text-foreground md:text-base">
-                {{ resolvedTitle }}
-            </component>
+			<!-- Title -->
+			<component :is="`h${props.level}`"
+				v-if="resolvedTitle"
+				class="text-sm font-semibold text-foreground md:text-base">
+				{{ resolvedTitle }}
+			</component>
 
-            <!-- Description -->
-            <p v-if="resolvedDescription" class="max-w-md text-xs text-muted-foreground md:text-sm">
-                {{ resolvedDescription }}
-            </p>
+			<!-- Description -->
+			<p v-if="resolvedDescription" class="max-w-md text-xs text-muted-foreground md:text-sm">
+				{{ resolvedDescription }}
+			</p>
 
-            <!-- Action slot -->
-            <div v-if="$slots.action">
-                <slot name="action" />
-            </div>
-        </CardContent>
-    </Card>
+			<!-- Action slot -->
+			<div v-if="$slots.action">
+				<slot name="action" />
+			</div>
+		</CardContent>
+	</Card>
 </template>