@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/confirm-dialog/confirm-dialog-state.ts

@@ -7,35 +7,35 @@ export type DialogButtonVariant = NonNullable<ButtonVariants['variant']>;
 export type { HugeiconsIconDefinition };
 
 export interface ShowConfirmDialogOptions {
-    title?: string;
-    message: string;
-    confirmText?: string;
-    cancelText?: string;
-    confirmButtonType?: DialogButtonVariant;
-    cancelButtonType?: DialogButtonVariant;
-    icon?: HugeiconsIconDefinition | null;
-    confirmButtonIcon?: HugeiconsIconDefinition | null;
-    cancelButtonIcon?: HugeiconsIconDefinition | null;
-    onConfirm?: (() => void | Promise<void>) | null;
-    onCancel?: (() => void | Promise<void>) | null;
+	title?: string;
+	message: string;
+	confirmText?: string;
+	cancelText?: string;
+	confirmButtonType?: DialogButtonVariant;
+	cancelButtonType?: DialogButtonVariant;
+	icon?: HugeiconsIconDefinition | null;
+	confirmButtonIcon?: HugeiconsIconDefinition | null;
+	cancelButtonIcon?: HugeiconsIconDefinition | null;
+	onConfirm?: (() => void | Promise<void>) | null;
+	onCancel?: (() => void | Promise<void>) | null;
 }
 
 interface ConfirmDialogRequest {
-    id: number;
-    options: Required<Omit<ShowConfirmDialogOptions, 'icon' | 'confirmButtonIcon' | 'cancelButtonIcon' | 'onConfirm' | 'onCancel'>> & {
-        icon: HugeiconsIconDefinition | null;
-        confirmButtonIcon: HugeiconsIconDefinition | null;
-        cancelButtonIcon: HugeiconsIconDefinition | null;
-        onConfirm: (() => void | Promise<void>) | null;
-        onCancel: (() => void | Promise<void>) | null;
-    };
-    resolve: (value: boolean) => void;
+	id: number;
+	options: Required<Omit<ShowConfirmDialogOptions, 'icon' | 'confirmButtonIcon' | 'cancelButtonIcon' | 'onConfirm' | 'onCancel'>> & {
+		icon: HugeiconsIconDefinition | null;
+		confirmButtonIcon: HugeiconsIconDefinition | null;
+		cancelButtonIcon: HugeiconsIconDefinition | null;
+		onConfirm: (() => void | Promise<void>) | null;
+		onCancel: (() => void | Promise<void>) | null;
+	};
+	resolve: (value: boolean) => void;
 }
 
 interface ConfirmDialogState {
-    current: ConfirmDialogRequest | null;
-    busy: boolean;
-    isOpen: boolean;
+	current: ConfirmDialogRequest | null;
+	busy: boolean;
+	isOpen: boolean;
 }
 
 const confirmDialogQueue: ConfirmDialogRequest[] = [];
@@ -48,9 +48,9 @@ const CONFIRM_DIALOG_ROOT_ID = 'ui-vintage-confirm-dialog-root';
 
 // Shared confirm dialog state
 export const confirmDialogState: ConfirmDialogState = reactive({
-    current: null,
-    busy: false,
-    isOpen: false
+	current: null,
+	busy: false,
+	isOpen: false
 });
 
 // Keep icon definitions non-reactive
@@ -58,145 +58,145 @@ const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? ma
 
 // Mount the dialog once on demand
 const ensureConfirmDialogMounted = () => {
-    // Skip mounting during SSR
-    if (typeof document === 'undefined') {
-        return Promise.resolve();
-    }
-
-    // Reuse the existing mount root
-    const existingRoot = document.getElementById(CONFIRM_DIALOG_ROOT_ID);
-    if (existingRoot) {
-        return Promise.resolve();
-    }
-
-    // Reuse the in-flight mount
-    if (confirmDialogMountPromise) {
-        return confirmDialogMountPromise;
-    }
-
-    // Start the lazy mount
-    confirmDialogMountPromise = (async () => {
-        // Load the component only when needed
-        const { default: ConfirmDialog } = await import('./ConfirmDialog.vue');
-
-        // Guard against a concurrent mount
-        if (document.getElementById(CONFIRM_DIALOG_ROOT_ID)) {
-            return;
-        }
-
-        // Create the host element and render the component
-        const container = document.createElement('div');
-        container.id = CONFIRM_DIALOG_ROOT_ID;
-        document.body.appendChild(container);
-        render(h(ConfirmDialog), container);
-    })().finally(() => {
-        confirmDialogMountPromise = null;
-    });
-
-    // Let callers await the mount
-    return confirmDialogMountPromise;
+	// Skip mounting during SSR
+	if (typeof document === 'undefined') {
+		return Promise.resolve();
+	}
+
+	// Reuse the existing mount root
+	const existingRoot = document.getElementById(CONFIRM_DIALOG_ROOT_ID);
+	if (existingRoot) {
+		return Promise.resolve();
+	}
+
+	// Reuse the in-flight mount
+	if (confirmDialogMountPromise) {
+		return confirmDialogMountPromise;
+	}
+
+	// Start the lazy mount
+	confirmDialogMountPromise = (async () => {
+		// Load the component only when needed
+		const { default: ConfirmDialog } = await import('./ConfirmDialog.vue');
+
+		// Guard against a concurrent mount
+		if (document.getElementById(CONFIRM_DIALOG_ROOT_ID)) {
+			return;
+		}
+
+		// Create the host element and render the component
+		const container = document.createElement('div');
+		container.id = CONFIRM_DIALOG_ROOT_ID;
+		document.body.appendChild(container);
+		render(h(ConfirmDialog), container);
+	})().finally(() => {
+		confirmDialogMountPromise = null;
+	});
+
+	// Let callers await the mount
+	return confirmDialogMountPromise;
 };
 
 // Show the next queued dialog
 const openNextConfirmDialog = () => {
-    const nextDialog = confirmDialogQueue.shift() ?? null;
-    confirmDialogState.current = nextDialog;
-    confirmDialogState.isOpen = Boolean(nextDialog);
+	const nextDialog = confirmDialogQueue.shift() ?? null;
+	confirmDialogState.current = nextDialog;
+	confirmDialogState.isOpen = Boolean(nextDialog);
 };
 
 // Queue a new dialog request
 const enqueueConfirmDialog = (request: ConfirmDialogRequest) => {
-    confirmDialogQueue.push(request);
-    if (!confirmDialogState.current) {
-        openNextConfirmDialog();
-    }
+	confirmDialogQueue.push(request);
+	if (!confirmDialogState.current) {
+		openNextConfirmDialog();
+	}
 };
 
 // Clear the active dialog and continue the queue
 const clearCurrentConfirmDialog = () => {
-    confirmDialogState.busy = false;
-    confirmDialogState.isOpen = false;
-    confirmDialogState.current = null;
-    openNextConfirmDialog();
+	confirmDialogState.busy = false;
+	confirmDialogState.isOpen = false;
+	confirmDialogState.current = null;
+	openNextConfirmDialog();
 };
 
 // Close the current dialog after the leave transition (only if it is still the given request)
 const scheduleCloseCurrentConfirmDialog = (request: ConfirmDialogRequest) => {
-    // Guard against missing, replaced, or already closed dialogs
-    if (confirmDialogState.current !== request || !confirmDialogState.isOpen) return;
-    confirmDialogState.isOpen = false;
-
-    // Clear any existing close timer to avoid racing conditions
-    if (closeTimer) {
-        clearTimeout(closeTimer);
-    }
-
-    // Schedule the dialog to be cleared after the leave transition
-    closeTimer = setTimeout(() => {
-        closeTimer = null;
-        clearCurrentConfirmDialog();
-    }, DIALOG_CLOSE_DURATION_MS);
+	// Guard against missing, replaced, or already closed dialogs
+	if (confirmDialogState.current !== request || !confirmDialogState.isOpen) return;
+	confirmDialogState.isOpen = false;
+
+	// Clear any existing close timer to avoid racing conditions
+	if (closeTimer) {
+		clearTimeout(closeTimer);
+	}
+
+	// Schedule the dialog to be cleared after the leave transition
+	closeTimer = setTimeout(() => {
+		closeTimer = null;
+		clearCurrentConfirmDialog();
+	}, DIALOG_CLOSE_DURATION_MS);
 };
 
 // Resolve the dialog as cancelled (ignored while a confirm or cancel handler is still running)
 export const closeConfirmDialog = () => {
-    const current = confirmDialogState.current;
-    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
-    current.resolve(false);
-    scheduleCloseCurrentConfirmDialog(current);
+	const current = confirmDialogState.current;
+	if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
+	current.resolve(false);
+	scheduleCloseCurrentConfirmDialog(current);
 };
 
 // Run a dialog handler, then resolve and close the dialog it belongs to
 const runConfirmDialogHandler = async (handler: (() => void | Promise<void>) | null, result: boolean) => {
-    const current = confirmDialogState.current;
-    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
-    confirmDialogState.busy = true;
-
-    try {
-        await handler?.();
-        current.resolve(result);
-    } catch (error) {
-        // Settle the caller's promise even when the handler throws, then surface the error
-        current.resolve(false);
-        throw error;
-    } finally {
-        scheduleCloseCurrentConfirmDialog(current);
-    }
+	const current = confirmDialogState.current;
+	if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
+	confirmDialogState.busy = true;
+
+	try {
+		await handler?.();
+		current.resolve(result);
+	} catch (error) {
+		// Settle the caller's promise even when the handler throws, then surface the error
+		current.resolve(false);
+		throw error;
+	} finally {
+		scheduleCloseCurrentConfirmDialog(current);
+	}
 };
 
 // Run the cancel handler for the active dialog
 export const cancelActiveConfirmDialog = async () => {
-    await runConfirmDialogHandler(confirmDialogState.current?.options.onCancel ?? null, false);
+	await runConfirmDialogHandler(confirmDialogState.current?.options.onCancel ?? null, false);
 };
 
 // Run the confirm handler for the active dialog
 export const confirmActiveDialog = async () => {
-    await runConfirmDialogHandler(confirmDialogState.current?.options.onConfirm ?? null, true);
+	await runConfirmDialogHandler(confirmDialogState.current?.options.onConfirm ?? null, true);
 };
 
 // Queue and show a confirm dialog
 export const showConfirmDialog = (options: ShowConfirmDialogOptions) => {
-    // Ensure the renderer exists before queuing work
-    void ensureConfirmDialogMounted();
-
-    // Return a promise that resolves with the user's choice
-    return new Promise<boolean>((resolve) => {
-        enqueueConfirmDialog({
-            id: nextConfirmDialogId += 1,
-            options: {
-                title: options.title ?? getUiVintageRuntimeMessage('uiVintage.messageDialog.confirm', 'Confirm'),
-                message: options.message,
-                confirmText: options.confirmText ?? getUiVintageRuntimeMessage('uiVintage.buttons.confirm', 'Confirm'),
-                cancelText: options.cancelText ?? getUiVintageRuntimeMessage('uiVintage.buttons.cancel', 'Cancel'),
-                confirmButtonType: options.confirmButtonType ?? 'primary',
-                cancelButtonType: options.cancelButtonType ?? 'secondary',
-                icon: markIcon(options.icon),
-                confirmButtonIcon: markIcon(options.confirmButtonIcon),
-                cancelButtonIcon: markIcon(options.cancelButtonIcon),
-                onConfirm: options.onConfirm ?? null,
-                onCancel: options.onCancel ?? null
-            },
-            resolve
-        });
-    });
+	// Ensure the renderer exists before queuing work
+	void ensureConfirmDialogMounted();
+
+	// Return a promise that resolves with the user's choice
+	return new Promise<boolean>((resolve) => {
+		enqueueConfirmDialog({
+			id: nextConfirmDialogId += 1,
+			options: {
+				title: options.title ?? getUiVintageRuntimeMessage('uiVintage.messageDialog.confirm', 'Confirm'),
+				message: options.message,
+				confirmText: options.confirmText ?? getUiVintageRuntimeMessage('uiVintage.buttons.confirm', 'Confirm'),
+				cancelText: options.cancelText ?? getUiVintageRuntimeMessage('uiVintage.buttons.cancel', 'Cancel'),
+				confirmButtonType: options.confirmButtonType ?? 'primary',
+				cancelButtonType: options.cancelButtonType ?? 'secondary',
+				icon: markIcon(options.icon),
+				confirmButtonIcon: markIcon(options.confirmButtonIcon),
+				cancelButtonIcon: markIcon(options.cancelButtonIcon),
+				onConfirm: options.onConfirm ?? null,
+				onCancel: options.onCancel ?? null
+			},
+			resolve
+		});
+	});
 };

package/src/components/content/BlogList.vue

@@ -1,51 +1,52 @@
 <script setup lang="ts">
-import { Cancel01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../ui/card';
 
 // Props
 const props = withDefaults(defineProps<{
-    items?: string[];
-    variant?: 'circle' | 'checkmark' | 'numbered' | 'cross';
+	items?: string[];
+	variant?: 'circle' | 'checkmark' | 'numbered' | 'cross';
 }>(), {
-    items: () => [],
-    variant: 'checkmark'
+	items: () => [],
+	variant: 'checkmark'
 });
 
 // Marker classes
 const getMarkerClasses = () => {
-    const toneClasses = {
-        checkmark: 'rounded bg-success/10 text-success',
-        cross: 'rounded bg-destructive/10 text-destructive',
-        numbered: 'text-[11px] font-semibold tabular-nums text-primary',
-        circle: ''
-    };
-    return ['mt-px flex size-5 shrink-0 items-center justify-center', toneClasses[props.variant]];
+	const toneClasses = {
+		checkmark: 'rounded bg-success/10 text-success',
+		cross: 'rounded bg-destructive/10 text-destructive',
+		numbered: 'text-[11px] font-semibold tabular-nums text-primary',
+		circle: ''
+	};
+	return ['mt-px flex size-5 shrink-0 items-center justify-center', toneClasses[props.variant]];
 };
 
 // Format the item number with a leading zero
 const formatNumber = (index: number) => {
-    return String(index + 1).padStart(2, '0');
+	return String(index + 1).padStart(2, '0');
 };
 </script>
 
 <template>
-    <div class="not-prose my-6 sm:my-8">
-        <Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
-            <ul class="divide-y divide-border">
-                <li v-for="(item, index) in props.items" :key="index" data-aos="blur-up" :data-aos-delay="100 + index * 80" class="flex items-start gap-3 px-4 py-3.5 text-xs leading-relaxed text-foreground sm:px-5 md:text-sm">
-                    <!-- Marker -->
-                    <span aria-hidden="true" :class="getMarkerClasses()">
-                        <HugeiconsIcon v-if="props.variant === 'checkmark'" :icon="Tick02Icon" :stroke-width="2.5" class="size-3" />
-                        <HugeiconsIcon v-else-if="props.variant === 'cross'" :icon="Cancel01Icon" :stroke-width="2.5" class="size-3" />
-                        <template v-else-if="props.variant === 'numbered'">{{ formatNumber(index) }}</template>
-                        <span v-else class="size-1.5 rounded-full bg-primary" />
-                    </span>
+	<div class="not-prose my-6 sm:my-8">
+		<Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
+			<ul class="divide-y divide-border">
+				<li v-for="(item, index) in props.items" :key="index" data-aos="blur-up" :data-aos-delay="100 + index * 80" class="flex items-start gap-3 px-4 py-3.5 text-xs leading-relaxed text-foreground sm:px-5 md:text-sm">
+					<!-- Marker -->
+					<span aria-hidden="true" :class="getMarkerClasses()">
+						<HugeiconsIcon v-if="props.variant === 'checkmark'" :icon="Tick02Icon" :stroke-width="2.5" class="size-3" />
+						<HugeiconsIcon v-else-if="props.variant === 'cross'" :icon="Cancel01Icon" :stroke-width="2.5" class="size-3" />
+						<template v-else-if="props.variant === 'numbered'">{{ formatNumber(index) }}</template>
+						<span v-else class="size-1.5 rounded-full bg-primary" />
+					</span>
 
-                    <!-- Content -->
-                    <span class="flex-1">{{ item }}</span>
-                </li>
-            </ul>
-        </Card>
-    </div>
-</template>
+					<!-- Content -->
+					<span class="flex-1">{{ item }}</span>
+				</li>
+			</ul>
+		</Card>
+	</div>
+</template>

package/src/components/content/BlogTable.vue

@@ -4,53 +4,53 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '.
 
 // Props
 const props = withDefaults(defineProps<{
-    headers?: string[];
-    rows?: string[][];
-    highlightCol?: number;
+	headers?: string[];
+	rows?: string[][];
+	highlightCol?: number;
 }>(), {
-    headers: () => [],
-    rows: () => [],
-    highlightCol: -1
+	headers: () => [],
+	rows: () => [],
+	highlightCol: -1
 });
 
 // Header cell classes
 const getHeaderClasses = (colIndex: number) => {
-    const baseClasses = 'h-10 px-4 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:px-5';
-    const highlightClass = props.highlightCol === colIndex ? 'text-primary shadow-[inset_0_-2px_0_var(--primary)]' : '';
-    return [baseClasses, highlightClass];
+	const baseClasses = 'h-10 px-4 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:px-5';
+	const highlightClass = props.highlightCol === colIndex ? 'text-primary shadow-[inset_0_-2px_0_var(--primary)]' : '';
+	return [baseClasses, highlightClass];
 };
 
 // Body cell classes
 const getCellClasses = (colIndex: number) => {
-    const baseClasses = 'min-w-32 px-4 py-3 align-top leading-relaxed whitespace-normal sm:px-5';
-    const firstColClass = colIndex === 0 ? 'font-medium text-foreground' : 'text-muted-foreground';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-primary/5 text-foreground' : '';
-    return [baseClasses, firstColClass, highlightClass];
+	const baseClasses = 'min-w-32 px-4 py-3 align-top leading-relaxed whitespace-normal sm:px-5';
+	const firstColClass = colIndex === 0 ? 'font-medium text-foreground' : 'text-muted-foreground';
+	const highlightClass = props.highlightCol === colIndex ? 'bg-primary/5 text-foreground' : '';
+	return [baseClasses, firstColClass, highlightClass];
 };
 </script>
 
 <template>
-    <div class="not-prose my-6 sm:my-8">
-        <Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
-            <Table class="w-full text-left text-sm">
-                <!-- Table header -->
-                <TableHeader>
-                    <TableRow class="bg-surface hover:bg-surface">
-                        <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
-                            {{ header }}
-                        </TableHead>
-                    </TableRow>
-                </TableHeader>
+	<div class="not-prose my-6 sm:my-8">
+		<Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
+			<Table class="w-full text-left text-sm">
+				<!-- Table header -->
+				<TableHeader>
+					<TableRow class="bg-surface hover:bg-surface">
+						<TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
+							{{ header }}
+						</TableHead>
+					</TableRow>
+				</TableHeader>
 
-                <!-- Table body -->
-                <TableBody>
-                    <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="last:border-b-0 hover:bg-surface/60">
-                        <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
-                            {{ cell }}
-                        </TableCell>
-                    </TableRow>
-                </TableBody>
-            </Table>
-        </Card>
-    </div>
-</template>
+				<!-- Table body -->
+				<TableBody>
+					<TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="last:border-b-0 hover:bg-surface/60">
+						<TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
+							{{ cell }}
+						</TableCell>
+					</TableRow>
+				</TableBody>
+			</Table>
+		</Card>
+	</div>
+</template>