@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/message-toast/message-toast-state.ts

@@ -4,47 +4,47 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 export type MessageToastType = 'success' | 'info' | 'warning' | 'error';
 
 export interface MessageToastAction {
-    label: string;
-    onClick: () => void | Promise<void>;
+	label: string;
+	onClick: () => void | Promise<void>;
 }
 
 export interface ShowMessageToastOptions {
-    message: string;
-    type?: MessageToastType;
-    duration?: number;
-    title?: string;
-    icon?: HugeiconsIconDefinition | null;
-    action?: MessageToastAction | null;
-    dismissible?: boolean;
+	message: string;
+	type?: MessageToastType;
+	duration?: number;
+	title?: string;
+	icon?: HugeiconsIconDefinition | null;
+	action?: MessageToastAction | null;
+	dismissible?: boolean;
 }
 
 export interface MessageToastItem {
-    id: number;
-    message: string;
-    type: MessageToastType;
-    title: string;
-    icon: HugeiconsIconDefinition | null;
-    action: MessageToastAction | null;
-    dismissible: boolean;
-    duration: number;
+	id: number;
+	message: string;
+	type: MessageToastType;
+	title: string;
+	icon: HugeiconsIconDefinition | null;
+	action: MessageToastAction | null;
+	dismissible: boolean;
+	duration: number;
 }
 
 interface MessageToastContent {
-    message: string;
-    type: MessageToastType;
+	message: string;
+	type: MessageToastType;
 }
 
 interface MessageToastState {
-    current: MessageToastContent | null;
-    isOpen: boolean;
-    toasts: MessageToastItem[];
-    paused: boolean;
+	current: MessageToastContent | null;
+	isOpen: boolean;
+	toasts: MessageToastItem[];
+	paused: boolean;
 }
 
 interface ToastTimer {
-    handle: ReturnType<typeof setTimeout> | null;
-    remaining: number;
-    startedAt: number;
+	handle: ReturnType<typeof setTimeout> | null;
+	remaining: number;
+	startedAt: number;
 }
 
 const DEFAULT_TOAST_DURATION_MS = 5000;
@@ -58,156 +58,156 @@ let nextToastId = 0;
 
 // Shared message toast state (current/isOpen are kept for backward compatibility)
 export const messageToastState: MessageToastState = reactive({
-    current: null,
-    isOpen: false,
-    toasts: [],
-    paused: false
+	current: null,
+	isOpen: false,
+	toasts: [],
+	paused: false
 });
 
 // Keep the legacy single-toast fields in sync with the stack
 const syncLegacyState = () => {
-    const latest = messageToastState.toasts[0];
-    messageToastState.current = latest ? { message: latest.message, type: latest.type } : null;
-    messageToastState.isOpen = Boolean(latest);
+	const latest = messageToastState.toasts[0];
+	messageToastState.current = latest ? { message: latest.message, type: latest.type } : null;
+	messageToastState.isOpen = Boolean(latest);
 };
 
 // Mount the toaster once on demand
 const ensureMessageToastMounted = () => {
-    // Skip mounting during SSR
-    if (typeof document === 'undefined') {
-        return Promise.resolve();
-    }
-
-    // Reuse the existing mount root
-    if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
-        return Promise.resolve();
-    }
-
-    // Reuse the in-flight mount
-    if (messageToastMountPromise) {
-        return messageToastMountPromise;
-    }
-
-    // Start the lazy mount
-    messageToastMountPromise = (async () => {
-        // Load the component only when needed
-        const { default: MessageToast } = await import('./MessageToast.vue');
-
-        // Guard against a concurrent mount
-        if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
-            return;
-        }
-
-        // Create the host element and render the component
-        const container = document.createElement('div');
-        container.id = MESSAGE_TOAST_ROOT_ID;
-        document.body.appendChild(container);
-        render(h(MessageToast), container);
-    })().finally(() => {
-        messageToastMountPromise = null;
-    });
-
-    // Let callers await the mount
-    return messageToastMountPromise;
+	// Skip mounting during SSR
+	if (typeof document === 'undefined') {
+		return Promise.resolve();
+	}
+
+	// Reuse the existing mount root
+	if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
+		return Promise.resolve();
+	}
+
+	// Reuse the in-flight mount
+	if (messageToastMountPromise) {
+		return messageToastMountPromise;
+	}
+
+	// Start the lazy mount
+	messageToastMountPromise = (async () => {
+		// Load the component only when needed
+		const { default: MessageToast } = await import('./MessageToast.vue');
+
+		// Guard against a concurrent mount
+		if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
+			return;
+		}
+
+		// Create the host element and render the component
+		const container = document.createElement('div');
+		container.id = MESSAGE_TOAST_ROOT_ID;
+		document.body.appendChild(container);
+		render(h(MessageToast), container);
+	})().finally(() => {
+		messageToastMountPromise = null;
+	});
+
+	// Let callers await the mount
+	return messageToastMountPromise;
 };
 
 // Start (or restart) the auto-dismiss countdown of a toast
 const startToastTimer = (id: number) => {
-    const timer = toastTimers.get(id);
-    if (!timer || timer.handle || messageToastState.paused) return;
-    timer.startedAt = Date.now();
-    timer.handle = setTimeout(() => closeMessageToast(id), timer.remaining);
+	const timer = toastTimers.get(id);
+	if (!timer || timer.handle || messageToastState.paused) return;
+	timer.startedAt = Date.now();
+	timer.handle = setTimeout(() => closeMessageToast(id), timer.remaining);
 };
 
 // Stop the countdown of a toast and remember how much time is left
 const stopToastTimer = (id: number) => {
-    const timer = toastTimers.get(id);
-    if (!timer?.handle) return;
-    clearTimeout(timer.handle);
-    timer.handle = null;
-    timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
+	const timer = toastTimers.get(id);
+	if (!timer?.handle) return;
+	clearTimeout(timer.handle);
+	timer.handle = null;
+	timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
 };
 
 // Pause every countdown (used while the toaster is hovered or focused)
 export const pauseMessageToasts = () => {
-    messageToastState.paused = true;
-    toastTimers.forEach((_, id) => stopToastTimer(id));
+	messageToastState.paused = true;
+	toastTimers.forEach((_, id) => stopToastTimer(id));
 };
 
 // Resume every countdown
 export const resumeMessageToasts = () => {
-    messageToastState.paused = false;
-    toastTimers.forEach((_, id) => startToastTimer(id));
+	messageToastState.paused = false;
+	toastTimers.forEach((_, id) => startToastTimer(id));
 };
 
 // Dismiss one toast by id, or every toast when no id is passed
 export const closeMessageToast = (id?: number) => {
-    const ids = id === undefined ? messageToastState.toasts.map(toast => toast.id) : [id];
-
-    // Cancel toasts that were requested but are still waiting for the toaster to mount
-    if (id === undefined) {
-        pendingToastIds.clear();
-    } else {
-        pendingToastIds.delete(id);
-    }
-
-    // Clear timers and remove the toasts from the stack
-    for (const toastId of ids) {
-        stopToastTimer(toastId);
-        toastTimers.delete(toastId);
-    }
-    messageToastState.toasts = messageToastState.toasts.filter(toast => !ids.includes(toast.id));
-    syncLegacyState();
+	const ids = id === undefined ? messageToastState.toasts.map(toast => toast.id) : [id];
+
+	// Cancel toasts that were requested but are still waiting for the toaster to mount
+	if (id === undefined) {
+		pendingToastIds.clear();
+	} else {
+		pendingToastIds.delete(id);
+	}
+
+	// Clear timers and remove the toasts from the stack
+	for (const toastId of ids) {
+		stopToastTimer(toastId);
+		toastTimers.delete(toastId);
+	}
+	messageToastState.toasts = messageToastState.toasts.filter(toast => !ids.includes(toast.id));
+	syncLegacyState();
 };
 
 // Show a message toast and optionally auto-dismiss it; returns the toast id
 export const showMessageToast = (options: ShowMessageToastOptions) => {
-    nextToastId += 1;
-    const id = nextToastId;
-    const duration = options.duration ?? DEFAULT_TOAST_DURATION_MS;
-
-    // Build the toast item
-    const toast: MessageToastItem = {
-        id,
-        message: options.message,
-        type: options.type ?? 'success',
-        title: options.title ?? '',
-        icon: options.icon ? markRaw(options.icon) : null,
-        action: options.action ?? null,
-        dismissible: options.dismissible ?? true,
-        duration
-    };
-
-    // Toasts are client-only: never store them in the module state shared across server requests
-    if (typeof document === 'undefined') {
-        return id;
-    }
-
-    // Expose the newest toast synchronously, as the single-toast API always did
-    messageToastState.current = { message: toast.message, type: toast.type };
-
-    // Mount first so the enter transition runs once the renderer exists
-    pendingToastIds.add(id);
-    void ensureMessageToastMounted().then(() => {
-        // Skip toasts that were closed before the toaster finished mounting
-        if (!pendingToastIds.delete(id)) {
-            syncLegacyState();
-            return;
-        }
-
-        // Push the newest toast on top and trim the overflow
-        messageToastState.toasts = [toast, ...messageToastState.toasts];
-        for (const overflow of messageToastState.toasts.slice(MAX_TOASTS)) {
-            closeMessageToast(overflow.id);
-        }
-        syncLegacyState();
-
-        // Auto-dismiss the toast after the specified duration
-        if (duration > 0) {
-            toastTimers.set(id, { handle: null, remaining: duration, startedAt: Date.now() });
-            startToastTimer(id);
-        }
-    });
-
-    return id;
+	nextToastId += 1;
+	const id = nextToastId;
+	const duration = options.duration ?? DEFAULT_TOAST_DURATION_MS;
+
+	// Build the toast item
+	const toast: MessageToastItem = {
+		id,
+		message: options.message,
+		type: options.type ?? 'success',
+		title: options.title ?? '',
+		icon: options.icon ? markRaw(options.icon) : null,
+		action: options.action ?? null,
+		dismissible: options.dismissible ?? true,
+		duration
+	};
+
+	// Toasts are client-only: never store them in the module state shared across server requests
+	if (typeof document === 'undefined') {
+		return id;
+	}
+
+	// Expose the newest toast synchronously, as the single-toast API always did
+	messageToastState.current = { message: toast.message, type: toast.type };
+
+	// Mount first so the enter transition runs once the renderer exists
+	pendingToastIds.add(id);
+	void ensureMessageToastMounted().then(() => {
+		// Skip toasts that were closed before the toaster finished mounting
+		if (!pendingToastIds.delete(id)) {
+			syncLegacyState();
+			return;
+		}
+
+		// Push the newest toast on top and trim the overflow
+		messageToastState.toasts = [toast, ...messageToastState.toasts];
+		for (const overflow of messageToastState.toasts.slice(MAX_TOASTS)) {
+			closeMessageToast(overflow.id);
+		}
+		syncLegacyState();
+
+		// Auto-dismiss the toast after the specified duration
+		if (duration > 0) {
+			toastTimers.set(id, { handle: null, remaining: duration, startedAt: Date.now() });
+			startToastTimer(id);
+		}
+	});
+
+	return id;
 };

package/src/components/page-header/PageHeader.vue

@@ -3,53 +3,53 @@ import { Comment, Text, computed, useSlots, type VNode } from 'vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    title: string;
-    headingLevel?: number;
-    size?: 'small' | 'medium' | 'large';
+	title: string;
+	headingLevel?: number;
+	size?: 'small' | 'medium' | 'large';
 }>(), {
-    headingLevel: 1,
-    size: 'large'
+	headingLevel: 1,
+	size: 'large'
 });
 
 const slots = useSlots();
 
 // Check if there is content in the default slot
 const hasSlotContent = computed(() => {
-    if (!slots.default) return false;
-
-    // Check if the slot has any non-empty content
-    return slots.default({}).some((vnode: VNode) => {
-        if (vnode.type === Comment) return false;
-        if (vnode.type === Text && typeof vnode.children === 'string' && !vnode.children.trim()) return false;
-        return true;
-    });
+	if (!slots.default) return false;
+
+	// Check if the slot has any non-empty content
+	return slots.default({}).some((vnode: VNode) => {
+		if (vnode.type === Comment) return false;
+		if (vnode.type === Text && typeof vnode.children === 'string' && !vnode.children.trim()) return false;
+		return true;
+	});
 });
 
 // Get size classes based on size prop
 const getSizeClasses = (size: string) => {
-    const baseClasses = 'font-semibold tracking-tight text-foreground';
-
-    // Return classes based on size
-    switch (size) {
-        case 'small':
-            return `${baseClasses} text-base md:text-xl`;
-        case 'medium':
-            return `${baseClasses} text-lg md:text-2xl`;
-        case 'large':
-        default:
-            return `${baseClasses} text-xl md:text-3xl`;
-    }
+	const baseClasses = 'font-semibold tracking-tight text-foreground';
+
+	// Return classes based on size
+	switch (size) {
+		case 'small':
+			return `${baseClasses} text-base md:text-xl`;
+		case 'medium':
+			return `${baseClasses} text-lg md:text-2xl`;
+		case 'large':
+		default:
+			return `${baseClasses} text-xl md:text-3xl`;
+	}
 };
 </script>
 
 <template>
-    <div class="flex flex-col gap-3 mb-6 sm:flex-row sm:justify-between sm:items-center sm:min-h-12 sm:gap-0">
-        <!-- Title -->
-        <component :is="`h${headingLevel}`" :class="getSizeClasses(props.size)">{{ props.title }}</component>
-
-        <!-- Right section -->
-        <div v-if="hasSlotContent" class="w-full sm:w-auto">
-            <slot />
-        </div>
-    </div>
+	<div class="flex flex-col gap-3 mb-6 sm:flex-row sm:justify-between sm:items-center sm:min-h-12 sm:gap-0">
+		<!-- Title -->
+		<component :is="`h${headingLevel}`" :class="getSizeClasses(props.size)">{{ props.title }}</component>
+
+		<!-- Right section -->
+		<div v-if="hasSlotContent" class="w-full sm:w-auto">
+			<slot />
+		</div>
+	</div>
 </template>

package/src/components/progress-component/ProgressComponent.vue

@@ -4,14 +4,14 @@ import { Progress } from '../ui/progress';
 
 // Props
 const props = withDefaults(defineProps<{
-    title: string;
-    bottomLeftLabel?: string;
-    bottomRightLabel?: string;
-    value: number;
-    max: number;
+	title: string;
+	bottomLeftLabel?: string;
+	bottomRightLabel?: string;
+	value: number;
+	max: number;
 }>(), {
-    bottomLeftLabel: '',
-    bottomRightLabel: ''
+	bottomLeftLabel: '',
+	bottomRightLabel: ''
 });
 
 // Name the progress bar after the visible title
@@ -19,34 +19,34 @@ const titleId = useId();
 </script>
 
 <template>
-    <div class="space-y-3">
-        <!-- Header with label and value -->
-        <div class="flex items-center justify-between">
-            <!-- Title of the progress bar -->
-            <span :id="titleId" class="text-sm font-semibold text-foreground">
-                {{ props.title }}
-            </span>
+	<div class="space-y-3">
+		<!-- Header with label and value -->
+		<div class="flex items-center justify-between">
+			<!-- Title of the progress bar -->
+			<span :id="titleId" class="text-sm font-semibold text-foreground">
+				{{ props.title }}
+			</span>
 
-            <!-- Current value / max -->
-            <span class="text-sm font-semibold text-foreground">
-                {{ props.value }} / {{ props.max }}
-            </span>
-        </div>
+			<!-- Current value / max -->
+			<span class="text-sm font-semibold text-foreground">
+				{{ props.value }} / {{ props.max }}
+			</span>
+		</div>
 
-        <!-- Progress bar -->
-        <Progress :model-value="props.value" :max="props.max" :aria-labelledby="titleId" />
+		<!-- Progress bar -->
+		<Progress :model-value="props.value" :max="props.max" :aria-labelledby="titleId" />
 
-        <!-- Bottom labels -->
-        <div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">
-            <!-- Bottom left label -->
-            <span v-if="props.bottomLeftLabel" class="text-muted-foreground">
-                {{ props.bottomLeftLabel }}
-            </span>
+		<!-- Bottom labels -->
+		<div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">
+			<!-- Bottom left label -->
+			<span v-if="props.bottomLeftLabel" class="text-muted-foreground">
+				{{ props.bottomLeftLabel }}
+			</span>
 
-            <!-- Bottom right label -->
-            <span v-if="props.bottomRightLabel" class="text-muted-foreground">
-                {{ props.bottomRightLabel }}
-            </span>
-        </div>
-    </div>
+			<!-- Bottom right label -->
+			<span v-if="props.bottomRightLabel" class="text-muted-foreground">
+				{{ props.bottomRightLabel }}
+			</span>
+		</div>
+	</div>
 </template>

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

@@ -11,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
@@ -53,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>