@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/error-page/ErrorPage.vue

@@ -10,32 +10,32 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<{
-    statusCode?: number | string;
-    label?: string;
-    title?: string;
-    message?: string;
-    actionLabel?: string;
-    showBackground?: boolean;
-    showDefaultAction?: boolean;
-    class?: HTMLAttributes['class'];
-    cardClass?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
-    footerClass?: HTMLAttributes['class'];
+	statusCode?: number | string;
+	label?: string;
+	title?: string;
+	message?: string;
+	actionLabel?: string;
+	showBackground?: boolean;
+	showDefaultAction?: boolean;
+	class?: HTMLAttributes['class'];
+	cardClass?: HTMLAttributes['class'];
+	contentClass?: HTMLAttributes['class'];
+	footerClass?: HTMLAttributes['class'];
 }>(), {
-    statusCode: 500,
-    title: undefined,
-    message: undefined,
-    showBackground: true,
-    showDefaultAction: true,
-    class: undefined,
-    cardClass: undefined,
-    contentClass: undefined,
-    footerClass: undefined
+	statusCode: 500,
+	title: undefined,
+	message: undefined,
+	showBackground: true,
+	showDefaultAction: true,
+	class: undefined,
+	cardClass: undefined,
+	contentClass: undefined,
+	footerClass: undefined
 });
 
 // Emits
 const emit = defineEmits<{
-    action: [];
+	action: [];
 }>();
 
 const { t } = useI18n();
@@ -45,73 +45,73 @@ const resolvedActionLabel = computed(() => props.actionLabel || t('uiVintage.but
 
 // Resolve the heading copy
 const resolvedTitle = computed(() => {
-    if (props.title) return props.title;
-    if (resolvedStatusCode.value === '404') return t('uiVintage.errorPage.notFound.title');
-    return t('uiVintage.errorPage.unexpected.title');
+	if (props.title) return props.title;
+	if (resolvedStatusCode.value === '404') return t('uiVintage.errorPage.notFound.title');
+	return t('uiVintage.errorPage.unexpected.title');
 });
 
 // Resolve the supporting message
 const resolvedMessage = computed(() => {
-    if (props.message) return props.message;
-    if (resolvedStatusCode.value === '404') return t('uiVintage.errorPage.notFound.message');
-    return t('uiVintage.errorPage.unexpected.message');
+	if (props.message) return props.message;
+	if (resolvedStatusCode.value === '404') return t('uiVintage.errorPage.notFound.message');
+	return t('uiVintage.errorPage.unexpected.message');
 });
 
 // Emit the default action
 const handleAction = () => {
-    emit('action');
+	emit('action');
 };
 </script>
 
 <template>
-    <div :class="cn('relative min-h-screen bg-background text-foreground', props.class)">
-        <!-- Decorative background -->
-        <BackgroundGrid v-if="props.showBackground" />
+	<div :class="cn('relative min-h-screen bg-background text-foreground', props.class)">
+		<!-- Decorative background -->
+		<BackgroundGrid v-if="props.showBackground" />
 
-        <!-- Main content -->
-        <main class="relative z-10 mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
-            <div class="w-full max-w-xl">
-                <!-- Toolbar -->
-                <div v-if="$slots.toolbar" class="mb-4 flex justify-end gap-3">
-                    <slot name="toolbar" />
-                </div>
+		<!-- Main content -->
+		<main class="relative z-10 mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
+			<div class="w-full max-w-xl">
+				<!-- Toolbar -->
+				<div v-if="$slots.toolbar" class="mb-4 flex justify-end gap-3">
+					<slot name="toolbar" />
+				</div>
 
-                <!-- Error card -->
-                <Card :class="props.cardClass">
-                    <CardContent :class="cn('space-y-8', props.contentClass)">
-                        <!-- Brand -->
-                        <slot name="brand" />
+				<!-- Error card -->
+				<Card :class="props.cardClass">
+					<CardContent :class="cn('space-y-8', props.contentClass)">
+						<!-- Brand -->
+						<slot name="brand" />
 
-                        <!-- Error copy -->
-                        <div>
-                            <!-- Status code -->
-                            <div class="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
-                                {{ resolvedLabel }} {{ resolvedStatusCode }}
-                            </div>
+						<!-- Error copy -->
+						<div>
+							<!-- Status code -->
+							<div class="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
+								{{ resolvedLabel }} {{ resolvedStatusCode }}
+							</div>
 
-                            <!-- Title -->
-                            <h1 class="mt-3 text-2xl font-semibold tracking-tight">
-                                {{ resolvedTitle }}
-                            </h1>
+							<!-- Title -->
+							<h1 class="mt-3 text-2xl font-semibold tracking-tight">
+								{{ resolvedTitle }}
+							</h1>
 
-                            <!-- Message -->
-                            <p class="text-sm leading-7 text-muted-foreground sm:text-base mt-4">
-                                {{ resolvedMessage }}
-                            </p>
-                        </div>
-                    </CardContent>
+							<!-- Message -->
+							<p class="text-sm leading-7 text-muted-foreground sm:text-base mt-4">
+								{{ resolvedMessage }}
+							</p>
+						</div>
+					</CardContent>
 
-                    <!-- Actions -->
-                    <CardFooter :class="cn('items-start flex-col gap-3 sm:flex-row sm:items-center', props.footerClass)">
-                        <slot name="actions" :on-action="handleAction">
-                            <Button v-if="props.showDefaultAction" variant="primary" @click="handleAction">
-                                <HugeiconsIcon :icon="ArrowLeft01Icon" :stroke-width="1.8" class="size-4" />
-                                {{ resolvedActionLabel }}
-                            </Button>
-                        </slot>
-                    </CardFooter>
-                </Card>
-            </div>
-        </main>
-    </div>
+					<!-- Actions -->
+					<CardFooter :class="cn('items-start flex-col gap-3 sm:flex-row sm:items-center', props.footerClass)">
+						<slot name="actions" :on-action="handleAction">
+							<Button v-if="props.showDefaultAction" variant="primary" @click="handleAction">
+								<HugeiconsIcon :icon="ArrowLeft01Icon" :stroke-width="1.8" class="size-4" />
+								{{ resolvedActionLabel }}
+							</Button>
+						</slot>
+					</CardFooter>
+				</Card>
+			</div>
+		</main>
+	</div>
 </template>

package/src/components/info-card/InfoCard.vue

@@ -6,43 +6,43 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    icon: HugeiconsIconDefinition;
-    title?: string;
-    description?: string | number;
-    class?: HTMLAttributes['class'];
+	icon: HugeiconsIconDefinition;
+	title?: string;
+	description?: string | number;
+	class?: HTMLAttributes['class'];
 }>(), {
-    title: '',
-    description: ''
+	title: '',
+	description: ''
 });
 </script>
 
 <template>
-    <Card :class="['flex flex-col items-center p-4! sm:flex-row', props.class]">
-        <CardContent class="flex w-full flex-col items-center gap-0 p-0! sm:flex-row">
-            <!-- Icon -->
-            <span aria-hidden="true" class="mb-3 flex size-10 shrink-0 items-center justify-center rounded border border-primary/30 text-primary sm:mb-0 sm:mr-4">
-                <HugeiconsIcon :icon="props.icon" class="size-4.5" />
-            </span>
+	<Card :class="['flex flex-col items-center p-4! sm:flex-row', props.class]">
+		<CardContent class="flex w-full flex-col items-center gap-0 p-0! sm:flex-row">
+			<!-- Icon -->
+			<span aria-hidden="true" class="mb-3 flex size-10 shrink-0 items-center justify-center rounded border border-primary/30 text-primary sm:mb-0 sm:mr-4">
+				<HugeiconsIcon :icon="props.icon" class="size-4.5" />
+			</span>
 
-            <!-- Content -->
-            <div class="flex w-full flex-1 items-center justify-between text-center sm:w-auto sm:text-left">
-                <div class="flex flex-col w-full gap-2 sm:gap-1">
-                    <!-- Title -->
-                    <span class="text-sm font-semibold text-foreground md:text-base">
-                        {{ props.title }}
-                    </span>
+			<!-- Content -->
+			<div class="flex w-full flex-1 items-center justify-between text-center sm:w-auto sm:text-left">
+				<div class="flex flex-col w-full gap-2 sm:gap-1">
+					<!-- Title -->
+					<span class="text-sm font-semibold text-foreground md:text-base">
+						{{ props.title }}
+					</span>
 
-                    <!-- Description -->
-                    <CardText v-if="props.description">
-                        {{ props.description }}
-                    </CardText>
-                </div>
+					<!-- Description -->
+					<CardText v-if="props.description">
+						{{ props.description }}
+					</CardText>
+				</div>
 
-                <!-- Right slot for custom elements -->
-                <div v-if="$slots.right" class="ml-4">
-                    <slot name="right" />
-                </div>
-            </div>
-        </CardContent>
-    </Card>
+				<!-- Right slot for custom elements -->
+				<div v-if="$slots.right" class="ml-4">
+					<slot name="right" />
+				</div>
+			</div>
+		</CardContent>
+	</Card>
 </template>

package/src/components/landing/landing-content/LandingContent.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div :class="cn('mx-auto w-full max-w-6xl px-3 py-6 sm:px-6 lg:px-8 lg:py-14', props.class)">
-        <slot />
-    </div>
+	<div :class="cn('mx-auto w-full max-w-6xl px-3 py-6 sm:px-6 lg:px-8 lg:py-14', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -8,49 +8,49 @@ import { cn } from '../../../lib/utils';
 import type { HeadingLevel } from '../../../lib/common-types';
 
 export interface LandingFooterLink {
-    id: string;
-    label: string;
-    href?: string;
-    to?: unknown;
-    newTab?: boolean;
+	id: string;
+	label: string;
+	href?: string;
+	to?: unknown;
+	newTab?: boolean;
 }
 
 export interface LandingFooterSection {
-    id: string;
-    title: string;
-    links: LandingFooterLink[];
+	id: string;
+	title: string;
+	links: LandingFooterLink[];
 }
 
 // Props
 const props = withDefaults(defineProps<{
-    appName: string;
-    appLogo?: string;
-    appLogoDark?: string;
-    appLinkTo?: string;
-    logoClass?: HTMLAttributes['class'];
-    appDescription?: string;
-    sections?: LandingFooterSection[];
-    linkComponent?: Component | string;
-    authorName?: string;
-    authorLink?: string;
-    year?: number;
-    showBottomBar?: boolean;
-    level?: HeadingLevel;
-    class?: HTMLAttributes['class'];
-    containerClass?: HTMLAttributes['class'];
-    brandClass?: HTMLAttributes['class'];
-    sectionsClass?: HTMLAttributes['class'];
-    bottomBarClass?: HTMLAttributes['class'];
+	appName: string;
+	appLogo?: string;
+	appLogoDark?: string;
+	appLinkTo?: string;
+	logoClass?: HTMLAttributes['class'];
+	appDescription?: string;
+	sections?: LandingFooterSection[];
+	linkComponent?: Component | string;
+	authorName?: string;
+	authorLink?: string;
+	year?: number;
+	showBottomBar?: boolean;
+	level?: HeadingLevel;
+	class?: HTMLAttributes['class'];
+	containerClass?: HTMLAttributes['class'];
+	brandClass?: HTMLAttributes['class'];
+	sectionsClass?: HTMLAttributes['class'];
+	bottomBarClass?: HTMLAttributes['class'];
 }>(), {
-    appLinkTo: '/',
-    appDescription: '',
-    sections: () => [],
-    linkComponent: 'a',
-    authorName: '',
-    authorLink: '',
-    year: () => new Date().getFullYear(),
-    showBottomBar: true,
-    level: 2
+	appLinkTo: '/',
+	appDescription: '',
+	sections: () => [],
+	linkComponent: 'a',
+	authorName: '',
+	authorLink: '',
+	year: () => new Date().getFullYear(),
+	showBottomBar: true,
+	level: 2
 });
 
 const { t } = useI18n();
@@ -59,21 +59,21 @@ const hasSingleSection = computed(() => props.sections.length === 1);
 
 // Get link props based on the type of link component and whether the link should open in a new tab
 const getLinkProps = (link: LandingFooterLink) => {
-    const sharedProps = link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-
-    // If the link component is an anchor, use href. Otherwise, use to for router links.
-    if (props.linkComponent === 'a') {
-        return {
-            href: link.href ?? '#',
-            ...sharedProps
-        };
-    }
-
-    // For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
-    return {
-        to: link.to ?? link.href ?? '/',
-        ...sharedProps
-    };
+	const sharedProps = link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+
+	// If the link component is an anchor, use href. Otherwise, use to for router links.
+	if (props.linkComponent === 'a') {
+		return {
+			href: link.href ?? '#',
+			...sharedProps
+		};
+	}
+
+	// For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
+	return {
+		to: link.to ?? link.href ?? '/',
+		...sharedProps
+	};
 };
 
 // Logo sources for each theme (either one falls back to the other)
@@ -83,82 +83,82 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 </script>
 
 <template>
-    <footer :class="cn('relative z-10 border-t border-border bg-card', props.class)">
-        <div :class="cn('mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8', props.containerClass)">
-            <div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
-                <!-- Brand section -->
-                <div :class="cn('max-w-md flex-1', props.brandClass)">
-                    <!-- App logo and name -->
-                    <a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity duration-150 hover:opacity-80">
-                        <template v-if="lightLogo">
-                            <NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
-                            <NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('hidden size-8 shrink-0 object-contain dark:block', props.logoClass)" />
-                        </template>
-                        <span>{{ props.appName }}</span>
-                    </a>
-
-                    <!-- App description -->
-                    <p v-if="props.appDescription" class="max-w-sm text-xs md:text-sm leading-relaxed text-muted-foreground">
-                        {{ props.appDescription }}
-                    </p>
-                </div>
-
-                <!-- Single link section -->
-                <div v-if="hasSingleSection" :class="cn('min-w-0 md:flex md:justify-end', props.sectionsClass)">
-                    <div class="md:text-right">
-                        <!-- Section title -->
-                        <component :is="`h${props.level}`" class="mb-4 font-semibold text-foreground">
-                            {{ props.sections[0]?.title }}
-                        </component>
-
-                        <!-- Section links -->
-                        <ul class="space-y-3 text-xs sm:text-sm">
-                            <li v-for="link in props.sections[0]?.links" :key="link.id">
-                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
-                                    {{ link.label }}
-                                </component>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-                <!-- Link sections -->
-                <div v-else class="flex flex-col gap-8 md:max-w-[60%] md:flex-row md:flex-wrap md:justify-end md:gap-16">
-                    <div v-for="section in props.sections" :key="section.id" :class="cn('min-w-28', props.sectionsClass)">
-                        <!-- Section title -->
-                        <component :is="`h${props.level}`" class="mb-4 font-semibold text-foreground">
-                            {{ section.title }}
-                        </component>
-
-                        <!-- Section links -->
-                        <ul class="space-y-3 text-xs sm:text-sm">
-                            <li v-for="link in section.links" :key="link.id">
-                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
-                                    {{ link.label }}
-                                </component>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Bottom bar -->
-            <div v-if="props.showBottomBar" :class="cn('mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-xs md:text-sm text-muted-foreground md:flex-row', props.bottomBarClass)">
-                <!-- Copyright -->
-                <div>
-                    &copy; {{ props.year }} {{ props.appName }}. {{ t('uiVintage.footer.allRightsReserved') }}
-                </div>
-
-                <!-- Author -->
-                <div v-if="props.authorName && props.authorLink" class="flex flex-wrap items-center justify-center gap-1.5 md:justify-end">
-                    <span>{{ t('uiVintage.footer.madeWith') }}</span>
-                    <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-destructive" />
-                    <span>{{ t('uiVintage.footer.by') }}</span>
-                    <a :href="props.authorLink" target="_blank" rel="noopener noreferrer" class="font-semibold text-foreground hover:underline">
-                        {{ props.authorName }}
-                    </a>
-                </div>
-            </div>
-        </div>
-    </footer>
+	<footer :class="cn('relative z-10 border-t border-border bg-card', props.class)">
+		<div :class="cn('mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8', props.containerClass)">
+			<div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
+				<!-- Brand section -->
+				<div :class="cn('max-w-md flex-1', props.brandClass)">
+					<!-- App logo and name -->
+					<a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity duration-150 hover:opacity-80">
+						<template v-if="lightLogo">
+							<NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
+							<NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('hidden size-8 shrink-0 object-contain dark:block', props.logoClass)" />
+						</template>
+						<span>{{ props.appName }}</span>
+					</a>
+
+					<!-- App description -->
+					<p v-if="props.appDescription" class="max-w-sm text-xs md:text-sm leading-relaxed text-muted-foreground">
+						{{ props.appDescription }}
+					</p>
+				</div>
+
+				<!-- Single link section -->
+				<div v-if="hasSingleSection" :class="cn('min-w-0 md:flex md:justify-end', props.sectionsClass)">
+					<div class="md:text-right">
+						<!-- Section title -->
+						<component :is="`h${props.level}`" class="mb-4 font-semibold text-foreground">
+							{{ props.sections[0]?.title }}
+						</component>
+
+						<!-- Section links -->
+						<ul class="space-y-3 text-xs sm:text-sm">
+							<li v-for="link in props.sections[0]?.links" :key="link.id">
+								<component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
+									{{ link.label }}
+								</component>
+							</li>
+						</ul>
+					</div>
+				</div>
+
+				<!-- Link sections -->
+				<div v-else class="flex flex-col gap-8 md:max-w-[60%] md:flex-row md:flex-wrap md:justify-end md:gap-16">
+					<div v-for="section in props.sections" :key="section.id" :class="cn('min-w-28', props.sectionsClass)">
+						<!-- Section title -->
+						<component :is="`h${props.level}`" class="mb-4 font-semibold text-foreground">
+							{{ section.title }}
+						</component>
+
+						<!-- Section links -->
+						<ul class="space-y-3 text-xs sm:text-sm">
+							<li v-for="link in section.links" :key="link.id">
+								<component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
+									{{ link.label }}
+								</component>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			<!-- Bottom bar -->
+			<div v-if="props.showBottomBar" :class="cn('mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-xs md:text-sm text-muted-foreground md:flex-row', props.bottomBarClass)">
+				<!-- Copyright -->
+				<div>
+					&copy; {{ props.year }} {{ props.appName }}. {{ t('uiVintage.footer.allRightsReserved') }}
+				</div>
+
+				<!-- Author -->
+				<div v-if="props.authorName && props.authorLink" class="flex flex-wrap items-center justify-center gap-1.5 md:justify-end">
+					<span>{{ t('uiVintage.footer.madeWith') }}</span>
+					<HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-destructive" />
+					<span>{{ t('uiVintage.footer.by') }}</span>
+					<a :href="props.authorLink" target="_blank" rel="noopener noreferrer" class="font-semibold text-foreground hover:underline">
+						{{ props.authorName }}
+					</a>
+				</div>
+			</div>
+		</div>
+	</footer>
 </template>