@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/single-value-card/SingleValueCard.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
-import { ArrowDownRight01Icon, ArrowUpRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowDownRight01Icon from '@hugeicons/core-free-icons/ArrowDownRight01Icon';
+import ArrowUpRight01Icon from '@hugeicons/core-free-icons/ArrowUpRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { AnimatedNumber } from '../ui/animated-number';
 import { Card } from '../ui/card';
@@ -10,37 +11,37 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    value: string | number;
-    label: string;
-    icon: HugeiconsIconDefinition;
-    valueColor?: 'default' | 'green' | 'red' | 'gray';
-    trend?: number | null;
-    trendLabel?: string;
-    description?: string;
-    animate?: boolean;
-    formatOptions?: Intl.NumberFormatOptions;
-    class?: HTMLAttributes['class'];
+	value: string | number;
+	label: string;
+	icon: HugeiconsIconDefinition;
+	valueColor?: 'default' | 'green' | 'red' | 'gray';
+	trend?: number | null;
+	trendLabel?: string;
+	description?: string;
+	animate?: boolean;
+	formatOptions?: Intl.NumberFormatOptions;
+	class?: HTMLAttributes['class'];
 }>(), {
-    valueColor: 'default',
-    trend: null,
-    trendLabel: '',
-    description: '',
-    animate: true,
-    formatOptions: undefined
+	valueColor: 'default',
+	trend: null,
+	trendLabel: '',
+	description: '',
+	animate: true,
+	formatOptions: undefined
 });
 
 // Value classes
 const valueClass = computed(() => {
-    switch (props.valueColor) {
-        case 'green':
-            return 'text-success';
-        case 'red':
-            return 'text-destructive';
-        case 'gray':
-            return 'text-muted-foreground';
-        default:
-            return 'text-foreground';
-    }
+	switch (props.valueColor) {
+		case 'green':
+			return 'text-success';
+		case 'red':
+			return 'text-destructive';
+		case 'gray':
+			return 'text-muted-foreground';
+		default:
+			return 'text-foreground';
+	}
 });
 
 // Trend badge presentation
@@ -52,37 +53,37 @@ const staticValue = computed(() => typeof props.value === 'number' && props.form
 </script>
 
 <template>
-    <Card :class="cn('gap-0! p-4!', props.class)">
-        <!-- Label and icon -->
-        <div class="flex items-start justify-between gap-3">
-            <span class="min-w-0 text-[11px] font-semibold leading-5 tracking-wider text-muted-foreground uppercase">
-                {{ props.label }}
-            </span>
-            <span aria-hidden="true" class="flex size-8 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
-                <HugeiconsIcon :icon="props.icon" class="size-4" />
-            </span>
-        </div>
+	<Card :class="cn('gap-0! p-4!', props.class)">
+		<!-- Label and icon -->
+		<div class="flex items-start justify-between gap-3">
+			<span class="min-w-0 text-[11px] font-semibold leading-5 tracking-wider text-muted-foreground uppercase">
+				{{ props.label }}
+			</span>
+			<span aria-hidden="true" class="flex size-8 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+				<HugeiconsIcon :icon="props.icon" class="size-4" />
+			</span>
+		</div>
 
-        <!-- Value and trend -->
-        <div class="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1">
-            <span :class="['text-2xl font-semibold tracking-tight tabular-nums', valueClass]">
-                <AnimatedNumber v-if="props.animate && typeof props.value === 'number'" :value="props.value" :format-options="props.formatOptions" />
-                <template v-else>{{ staticValue }}</template>
-            </span>
+		<!-- Value and trend -->
+		<div class="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1">
+			<span :class="['text-2xl font-semibold tracking-tight tabular-nums', valueClass]">
+				<AnimatedNumber v-if="props.animate && typeof props.value === 'number'" :value="props.value" :format-options="props.formatOptions" />
+				<template v-else>{{ staticValue }}</template>
+			</span>
 
-            <!-- Trend badge -->
-            <span v-if="props.trend !== null" :class="cn('inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-semibold tabular-nums', trendIsPositive ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive')">
-                <HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
-                {{ formattedTrend }}
-            </span>
-            <span v-if="props.trend !== null && props.trendLabel" class="text-[11px] text-muted-foreground">
-                {{ props.trendLabel }}
-            </span>
-        </div>
+			<!-- Trend badge -->
+			<span v-if="props.trend !== null" :class="cn('inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-semibold tabular-nums', trendIsPositive ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive')">
+				<HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
+				{{ formattedTrend }}
+			</span>
+			<span v-if="props.trend !== null && props.trendLabel" class="text-[11px] text-muted-foreground">
+				{{ props.trendLabel }}
+			</span>
+		</div>
 
-        <!-- Description -->
-        <span v-if="props.description" class="mt-1 text-xs leading-5 text-muted-foreground">
-            {{ props.description }}
-        </span>
-    </Card>
-</template>
+		<!-- Description -->
+		<span v-if="props.description" class="mt-1 text-xs leading-5 text-muted-foreground">
+			{{ props.description }}
+		</span>
+	</Card>
+</template>

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -5,26 +5,26 @@ import { Slider } from '../ui/slider';
 
 // Props
 const props = withDefaults(defineProps<{
-    id?: string;
-    label: string;
-    description?: string;
-    modelValue: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    valueText?: string;
+	id?: string;
+	label: string;
+	description?: string;
+	modelValue: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	valueText?: string;
 }>(), {
-    id: undefined,
-    description: '',
-    min: 0,
-    max: 100,
-    step: 1,
-    valueText: ''
+	id: undefined,
+	description: '',
+	min: 0,
+	max: 100,
+	step: 1,
+	valueText: ''
 });
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', value: number): void;
+	(e: 'update:modelValue', value: number): void;
 }>();
 
 const sliderValue = computed(() => [props.modelValue]);
@@ -32,31 +32,31 @@ const resolvedValueText = computed(() => props.valueText || String(props.modelVa
 
 // Emit the first slider value back to the parent
 const handleUpdateModelValue = (value?: number[]) => {
-    emits('update:modelValue', value?.[0] ?? props.min);
+	emits('update:modelValue', value?.[0] ?? props.min);
 };
 </script>
 
 <template>
-    <Card class="px-4 py-4">
-        <!-- Slider header -->
-        <div class="flex items-center justify-between gap-3">
-            <!-- Label and description block -->
-            <div class="space-y-2">
-                <div class="text-sm font-semibold">
-                    {{ props.label }}
-                </div>
-                <div v-if="props.description" class="text-xs text-muted-foreground">
-                    {{ props.description }}
-                </div>
-            </div>
+	<Card class="px-4 py-4">
+		<!-- Slider header -->
+		<div class="flex items-center justify-between gap-3">
+			<!-- Label and description block -->
+			<div class="space-y-2">
+				<div class="text-sm font-semibold">
+					{{ props.label }}
+				</div>
+				<div v-if="props.description" class="text-xs text-muted-foreground">
+					{{ props.description }}
+				</div>
+			</div>
 
-            <!-- Current slider value display -->
-            <span class="rounded border border-border bg-background px-2 py-1 text-xs font-semibold">
-                {{ resolvedValueText }}
-            </span>
-        </div>
+			<!-- Current slider value display -->
+			<span class="rounded border border-border bg-background px-2 py-1 text-xs font-semibold">
+				{{ resolvedValueText }}
+			</span>
+		</div>
 
-        <!-- Slider control -->
-        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" :thumb-label="props.label" @update:model-value="handleUpdateModelValue" />
-    </Card>
+		<!-- Slider control -->
+		<Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" :thumb-label="props.label" @update:model-value="handleUpdateModelValue" />
+	</Card>
 </template>

package/src/components/stat-strip/StatStrip.vue

@@ -7,30 +7,30 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    items: Array<{
-        label: string;
-        value: string | number;
-        icon?: HugeiconsIconDefinition;
-        formatOptions?: Intl.NumberFormatOptions;
-    }>;
-    animate?: boolean;
-    class?: HTMLAttributes['class'];
+	items: Array<{
+		label: string;
+		value: string | number;
+		icon?: HugeiconsIconDefinition;
+		formatOptions?: Intl.NumberFormatOptions;
+	}>;
+	animate?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    animate: true
+	animate: true
 });
 </script>
 
 <template>
-    <!-- Compact row of stats in one bordered strip -->
-    <ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
-        <li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
-            <HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
-            <span class="font-semibold text-foreground tabular-nums">
-                <AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />
-                <template v-else-if="typeof item.value === 'number'">{{ new Intl.NumberFormat(undefined, item.formatOptions).format(item.value) }}</template>
-                <template v-else>{{ item.value }}</template>
-            </span>
-            <span class="text-muted-foreground">{{ item.label }}</span>
-        </li>
-    </ul>
-</template>
+	<!-- Compact row of stats in one bordered strip -->
+	<ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
+		<li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
+			<HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
+			<span class="font-semibold text-foreground tabular-nums">
+				<AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />
+				<template v-else-if="typeof item.value === 'number'">{{ new Intl.NumberFormat(undefined, item.formatOptions).format(item.value) }}</template>
+				<template v-else>{{ item.value }}</template>
+			</span>
+			<span class="text-muted-foreground">{{ item.label }}</span>
+		</li>
+	</ul>
+</template>

package/src/components/switch-form-component/SwitchFormComponent.vue

@@ -4,34 +4,34 @@ import { Switch } from '../ui/switch';
 
 // Props
 const props = defineProps<{
-    id: string;
-    label: string;
-    description: string;
-    modelValue: boolean;
+	id: string;
+	label: string;
+	description: string;
+	modelValue: boolean;
 }>();
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void;
+	(e: 'update:modelValue', value: boolean): void;
 }>();
 </script>
 
 <template>
-    <Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
-        <!-- Switch label and control -->
-        <div class="flex items-center justify-between gap-4">
-            <!-- Switch label (names the switch and toggles it on click) -->
-            <label :for="props.id" class="cursor-pointer text-sm font-semibold">
-                {{ props.label }}
-            </label>
+	<Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
+		<!-- Switch label and control -->
+		<div class="flex items-center justify-between gap-4">
+			<!-- Switch label (names the switch and toggles it on click) -->
+			<label :for="props.id" class="cursor-pointer text-sm font-semibold">
+				{{ props.label }}
+			</label>
 
-            <!-- Switch control -->
-            <Switch :id="props.id" :aria-describedby="`${props.id}-description`" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
-        </div>
+			<!-- Switch control -->
+			<Switch :id="props.id" :aria-describedby="`${props.id}-description`" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
+		</div>
 
-        <!-- Description -->
-        <div :id="`${props.id}-description`" class="text-xs text-muted-foreground">
-            {{ props.description }}
-        </div>
-    </Card>
+		<!-- Description -->
+		<div :id="`${props.id}-description`" class="text-xs text-muted-foreground">
+			{{ props.description }}
+		</div>
+	</Card>
 </template>

package/src/components/text-link/TextLink.vue

@@ -3,35 +3,35 @@ import type { Component } from 'vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    to: string;
-    text: string;
-    linkComponent?: Component | string;
+	to: string;
+	text: string;
+	linkComponent?: Component | string;
 }>(), {
-    linkComponent: 'a'
+	linkComponent: 'a'
 });
 
 // Emits
 const emits = defineEmits<{
-    click: [event: MouseEvent];
+	click: [event: MouseEvent];
 }>();
 
 // Get link props based on the type of link component
 const getLinkProps = () => {
-    if (props.linkComponent === 'a') {
-        return { href: props.to };
-    } else {
-        return { to: props.to };
-    }
+	if (props.linkComponent === 'a') {
+		return { href: props.to };
+	} else {
+		return { to: props.to };
+	}
 };
 
 // Handle click
 const handleClick = (event: MouseEvent) => {
-    emits('click', event);
+	emits('click', event);
 };
 </script>
 
 <template>
-    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
-        {{ props.text }}
-    </component>
+	<component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
+		{{ props.text }}
+	</component>
 </template>

package/src/components/theme-selector/ThemeSelector.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { LaptopIcon, Moon01Icon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import LaptopIcon from '@hugeicons/core-free-icons/LaptopIcon';
+import Moon01Icon from '@hugeicons/core-free-icons/Moon01Icon';
+import Sun01Icon from '@hugeicons/core-free-icons/Sun01Icon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
@@ -17,97 +20,97 @@ let handleSystemThemeChange: (() => void) | undefined;
 
 // Resolve the icon for each theme mode
 const getThemeIcon = (theme: string) => {
-    if (theme === 'light') {
-        return Sun01Icon;
-    } else if (theme === 'dark') {
-        return Moon01Icon;
-    } else {
-        return LaptopIcon;
-    }
+	if (theme === 'light') {
+		return Sun01Icon;
+	} else if (theme === 'dark') {
+		return Moon01Icon;
+	} else {
+		return LaptopIcon;
+	}
 };
 
 // Available themes
 const themes = computed(() => [
-    { id: 'light' as const, label: t('uiVintage.theme.light') },
-    { id: 'dark' as const, label: t('uiVintage.theme.dark') },
-    { id: 'auto' as const, label: t('uiVintage.theme.auto') }
+	{ id: 'light' as const, label: t('uiVintage.theme.light') },
+	{ id: 'dark' as const, label: t('uiVintage.theme.dark') },
+	{ id: 'auto' as const, label: t('uiVintage.theme.auto') }
 ]);
 
 // Handle theme selection from the menu
 const handleSelectTheme = async (theme: ThemeMode) => {
-    currentTheme.value = theme;
-    isOpen.value = false;
+	currentTheme.value = theme;
+	isOpen.value = false;
 
-    // Reveal the new theme from the trigger button once the menu has closed
-    await nextTick();
-    const triggerElement = (triggerRef.value as { $el?: Element } | null)?.$el ?? null;
-    await applyThemeWithTransition(theme, triggerElement);
+	// Reveal the new theme from the trigger button once the menu has closed
+	await nextTick();
+	const triggerElement = (triggerRef.value as { $el?: Element } | null)?.$el ?? null;
+	await applyThemeWithTransition(theme, triggerElement);
 };
 
 // Compute the icon for the currently selected theme
 const currentThemeIcon = computed(() => {
-    return getThemeIcon(currentTheme.value);
+	return getThemeIcon(currentTheme.value);
 });
 
 // Theme options for the menu
 const themeOptions = computed(() => {
-    return themes.value.map(theme => ({
-        key: theme.id,
-        label: theme.label,
-        icon: getThemeIcon(theme.id)
-    }));
+	return themes.value.map(theme => ({
+		key: theme.id,
+		label: theme.label,
+		icon: getThemeIcon(theme.id)
+	}));
 });
 
 // On component mounted
 onMounted(() => {
-    const savedTheme = getStoredTheme();
-    currentTheme.value = savedTheme;
-    applyTheme(savedTheme);
-    mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+	const savedTheme = getStoredTheme();
+	currentTheme.value = savedTheme;
+	applyTheme(savedTheme);
+	mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
 
-    // Handler to update the theme
-    handleSystemThemeChange = () => {
-        if (currentTheme.value === 'auto') {
-            void applyThemeWithTransition('auto');
-        }
-    };
+	// Handler to update the theme
+	handleSystemThemeChange = () => {
+		if (currentTheme.value === 'auto') {
+			void applyThemeWithTransition('auto');
+		}
+	};
 
-    // Listen for changes in system theme preference
-    mediaQueryList.addEventListener('change', handleSystemThemeChange);
+	// Listen for changes in system theme preference
+	mediaQueryList.addEventListener('change', handleSystemThemeChange);
 });
 
 // Cleanup system preference listener
 onUnmounted(() => {
-    if (mediaQueryList && handleSystemThemeChange) {
-        mediaQueryList.removeEventListener('change', handleSystemThemeChange);
-    }
+	if (mediaQueryList && handleSystemThemeChange) {
+		mediaQueryList.removeEventListener('change', handleSystemThemeChange);
+	}
 });
 </script>
 
 <template>
-    <Popover v-model:open="isOpen">
-        <!-- Trigger button showing the current theme icon -->
-        <PopoverTrigger as-child>
-            <Button ref="triggerRef" variant="secondary" size="icon" :aria-label="t('uiVintage.theme.ariaLabel')">
-                <Transition mode="out-in" enter-active-class="transition-[rotate,scale,opacity] duration-[420ms] ease-bounce" enter-from-class="-rotate-90 scale-50 opacity-0" leave-active-class="transition-[rotate,scale,opacity] duration-150 ease-snappy" leave-to-class="rotate-90 scale-50 opacity-0">
-                    <HugeiconsIcon :key="currentTheme" :icon="currentThemeIcon" class="h-5 w-5" />
-                </Transition>
-            </Button>
-        </PopoverTrigger>
+	<Popover v-model:open="isOpen">
+		<!-- Trigger button showing the current theme icon -->
+		<PopoverTrigger as-child>
+			<Button ref="triggerRef" variant="secondary" size="icon" :aria-label="t('uiVintage.theme.ariaLabel')">
+				<Transition mode="out-in" enter-active-class="transition-[rotate,scale,opacity] duration-[420ms] ease-bounce" enter-from-class="-rotate-90 scale-50 opacity-0" leave-active-class="transition-[rotate,scale,opacity] duration-150 ease-snappy" leave-to-class="rotate-90 scale-50 opacity-0">
+					<HugeiconsIcon :key="currentTheme" :icon="currentThemeIcon" class="h-5 w-5" />
+				</Transition>
+			</Button>
+		</PopoverTrigger>
 
-        <!-- Theme options -->
-        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
-            <Command :model-value="currentTheme">
-                <CommandList :aria-label="t('uiVintage.theme.title')">
-                    <CommandGroup :heading="t('uiVintage.theme.title')" stagger>
-                        <CommandItem v-for="option in themeOptions" :key="option.key" :value="option.key" @select="handleSelectTheme(option.key)">
-                            <HugeiconsIcon :icon="option.icon" class="size-4" />
-                            <span class="flex-1">{{ option.label }}</span>
-                            <HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0 text-primary! transition-[opacity,scale] duration-300 ease-bounce" :class="currentTheme === option.key ? 'scale-100 opacity-100' : 'scale-50 opacity-0'" />
-                        </CommandItem>
-                    </CommandGroup>
-                </CommandList>
-            </Command>
-        </PopoverContent>
-    </Popover>
+		<!-- Theme options -->
+		<PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
+			<Command :model-value="currentTheme">
+				<CommandList :aria-label="t('uiVintage.theme.title')">
+					<CommandGroup :heading="t('uiVintage.theme.title')" stagger>
+						<CommandItem v-for="option in themeOptions" :key="option.key" :value="option.key" @select="handleSelectTheme(option.key)">
+							<HugeiconsIcon :icon="option.icon" class="size-4" />
+							<span class="flex-1">{{ option.label }}</span>
+							<HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0 text-primary! transition-[opacity,scale] duration-300 ease-bounce" :class="currentTheme === option.key ? 'scale-100 opacity-100' : 'scale-50 opacity-0'" />
+						</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</Command>
+		</PopoverContent>
+	</Popover>
 </template>