@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/busy-indicator/BusyIndicator.vue

@@ -4,11 +4,11 @@ import { busyIndicatorState } from './busy-indicator-state';
 </script>
 
 <template>
-    <!-- Busy overlay -->
-    <Busy
-        :show="busyIndicatorState.show"
-        :label="busyIndicatorState.label"
-        :class="busyIndicatorState.class"
-        :overlay-class="busyIndicatorState.overlayClass"
-    />
+	<!-- Busy overlay -->
+	<Busy
+		:show="busyIndicatorState.show"
+		:label="busyIndicatorState.label"
+		:class="busyIndicatorState.class"
+		:overlay-class="busyIndicatorState.overlayClass"
+	/>
 </template>

package/src/components/busy-indicator/busy-indicator-state.ts

@@ -2,16 +2,16 @@ import { h, reactive, render, type HTMLAttributes } from 'vue';
 import { getUiVintageRuntimeMessage } from '../../lib/i18n';
 
 export interface SetBusyOptions {
-    label?: string;
-    class?: HTMLAttributes['class'];
-    overlayClass?: HTMLAttributes['class'];
+	label?: string;
+	class?: HTMLAttributes['class'];
+	overlayClass?: HTMLAttributes['class'];
 }
 
 interface BusyIndicatorState {
-    show: boolean;
-    label: string;
-    class: HTMLAttributes['class'];
-    overlayClass: HTMLAttributes['class'];
+	show: boolean;
+	label: string;
+	class: HTMLAttributes['class'];
+	overlayClass: HTMLAttributes['class'];
 }
 
 const BUSY_INDICATOR_ROOT_ID = 'ui-vintage-busy-indicator-root';
@@ -20,69 +20,69 @@ let busyIndicatorMountPromise: Promise<void> | null = null;
 
 // Shared busy state
 export const busyIndicatorState: BusyIndicatorState = reactive({
-    show: false,
-    label: getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...'),
-    class: undefined,
-    overlayClass: undefined
+	show: false,
+	label: getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...'),
+	class: undefined,
+	overlayClass: undefined
 });
 
 // Mount the busy indicator once on demand
 const ensureBusyIndicatorMounted = () => {
-    // Skip mounting during SSR
-    if (typeof document === 'undefined') {
-        return Promise.resolve();
-    }
+	// Skip mounting during SSR
+	if (typeof document === 'undefined') {
+		return Promise.resolve();
+	}
 
-    // Reuse the existing mount root
-    const existingRoot = document.getElementById(BUSY_INDICATOR_ROOT_ID);
-    if (existingRoot) {
-        return Promise.resolve();
-    }
+	// Reuse the existing mount root
+	const existingRoot = document.getElementById(BUSY_INDICATOR_ROOT_ID);
+	if (existingRoot) {
+		return Promise.resolve();
+	}
 
-    // Reuse the in-flight mount
-    if (busyIndicatorMountPromise) {
-        return busyIndicatorMountPromise;
-    }
+	// Reuse the in-flight mount
+	if (busyIndicatorMountPromise) {
+		return busyIndicatorMountPromise;
+	}
 
-    // Start the lazy mount
-    busyIndicatorMountPromise = (async () => {
-        // Load the component only when needed
-        const { default: BusyIndicator } = await import('./BusyIndicator.vue');
+	// Start the lazy mount
+	busyIndicatorMountPromise = (async () => {
+		// Load the component only when needed
+		const { default: BusyIndicator } = await import('./BusyIndicator.vue');
 
-        // Guard against a concurrent mount
-        if (document.getElementById(BUSY_INDICATOR_ROOT_ID)) {
-            return;
-        }
+		// Guard against a concurrent mount
+		if (document.getElementById(BUSY_INDICATOR_ROOT_ID)) {
+			return;
+		}
 
-        // Create the host element and render the component
-        const container = document.createElement('div');
-        container.id = BUSY_INDICATOR_ROOT_ID;
-        document.body.appendChild(container);
-        render(h(BusyIndicator), container);
-    })().finally(() => {
-        busyIndicatorMountPromise = null;
-    });
+		// Create the host element and render the component
+		const container = document.createElement('div');
+		container.id = BUSY_INDICATOR_ROOT_ID;
+		document.body.appendChild(container);
+		render(h(BusyIndicator), container);
+	})().finally(() => {
+		busyIndicatorMountPromise = null;
+	});
 
-    // Let callers await the mount
-    return busyIndicatorMountPromise;
+	// Let callers await the mount
+	return busyIndicatorMountPromise;
 };
 
 // Toggle the global busy overlay
 export const setBusy = (show: boolean, options: SetBusyOptions = {}) => {
-    // Prepare the overlay before showing it
-    if (show) {
-        busyIndicatorState.label = options.label ?? getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...');
-        busyIndicatorState.class = options.class;
-        busyIndicatorState.overlayClass = options.overlayClass;
-        void ensureBusyIndicatorMounted();
-    }
+	// Prepare the overlay before showing it
+	if (show) {
+		busyIndicatorState.label = options.label ?? getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...');
+		busyIndicatorState.class = options.class;
+		busyIndicatorState.overlayClass = options.overlayClass;
+		void ensureBusyIndicatorMounted();
+	}
 
-    // Toggle the overlay visibility
-    busyIndicatorState.show = show;
+	// Toggle the overlay visibility
+	busyIndicatorState.show = show;
 
-    // Reset transient styling after hiding
-    if (!show) {
-        busyIndicatorState.class = undefined;
-        busyIndicatorState.overlayClass = undefined;
-    }
+	// Reset transient styling after hiding
+	if (!show) {
+		busyIndicatorState.class = undefined;
+		busyIndicatorState.overlayClass = undefined;
+	}
 };

package/src/components/card-grid/CardGrid.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends { id: PropertyKey }">
-import { PackageIcon } from '@hugeicons/core-free-icons';
+import PackageIcon from '@hugeicons/core-free-icons/PackageIcon';
 import { EmptyStateCard } from '../empty-state-card';
 import { LoadMoreButton } from '../load-more-button';
 import { LoadingStateCard } from '../loading-state-card';
@@ -7,55 +7,55 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    items?: T[];
-    busy?: boolean;
-    loadMoreBusy?: boolean;
-    hasMore?: boolean;
-    emptyMessage: string;
-    emptyIcon?: HugeiconsIconDefinition;
+	items?: T[];
+	busy?: boolean;
+	loadMoreBusy?: boolean;
+	hasMore?: boolean;
+	emptyMessage: string;
+	emptyIcon?: HugeiconsIconDefinition;
 }>(), {
-    items: () => [],
-    busy: false,
-    loadMoreBusy: false,
-    hasMore: false,
-    emptyIcon: () => PackageIcon
+	items: () => [],
+	busy: false,
+	loadMoreBusy: false,
+	hasMore: false,
+	emptyIcon: () => PackageIcon
 });
 
 // Emits
 const emits = defineEmits<{
-    'load-more': [];
+	'load-more': [];
 }>();
 
 // Slots
 defineSlots<{
-    card(props: { item: T; key?: PropertyKey }): unknown;
+	card(props: { item: T; key?: PropertyKey }): unknown;
 }>();
 
 // Handle load more
 const handleLoadMore = () => {
-    emits('load-more');
+	emits('load-more');
 };
 </script>
 
 <template>
-    <div>
-        <!-- Busy state for initial loading -->
-        <LoadingStateCard v-if="props.busy" />
-
-        <!-- Empty state -->
-        <EmptyStateCard v-else-if="props.items.length === 0"
-            :description="props.emptyMessage"
-            :icon="props.emptyIcon" />
-
-        <!-- Cards grid -->
-        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 xl:gap-4">
-            <slot name="card" v-for="item in props.items" :item="item" :key="item.id" />
-        </div>
-
-        <!-- Load more button (only under a grid, never under the loading or empty state) -->
-        <div v-if="!props.busy && props.items.length > 0 && (props.hasMore || props.loadMoreBusy)" class="flex justify-center mt-6">
-            <LoadMoreButton :busy="props.loadMoreBusy"
-                @load-more="handleLoadMore" />
-        </div>
-    </div>
+	<div>
+		<!-- Busy state for initial loading -->
+		<LoadingStateCard v-if="props.busy" />
+
+		<!-- Empty state -->
+		<EmptyStateCard v-else-if="props.items.length === 0"
+			:description="props.emptyMessage"
+			:icon="props.emptyIcon" />
+
+		<!-- Cards grid -->
+		<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 xl:gap-4">
+			<slot name="card" v-for="item in props.items" :item="item" :key="item.id" />
+		</div>
+
+		<!-- Load more button (only under a grid, never under the loading or empty state) -->
+		<div v-if="!props.busy && props.items.length > 0 && (props.hasMore || props.loadMoreBusy)" class="flex justify-center mt-6">
+			<LoadMoreButton :busy="props.loadMoreBusy"
+				@load-more="handleLoadMore" />
+		</div>
+	</div>
 </template>

package/src/components/chip/Chip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
@@ -9,12 +9,12 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<{
-    text: string;
-    color?: ToneColor;
-    removeLabel?: string;
-    class?: HTMLAttributes['class'];
+	text: string;
+	color?: ToneColor;
+	removeLabel?: string;
+	class?: HTMLAttributes['class'];
 }>(), {
-    color: 'gray'
+	color: 'gray'
 });
 
 const { t } = useI18n();
@@ -22,23 +22,23 @@ const resolvedRemoveLabel = computed(() => props.removeLabel || t('uiVintage.but
 
 // Emits
 const emits = defineEmits<{
-    remove: []
+	remove: []
 }>();
 
 // Handle remove button click
 const handleRemove = () => {
-    emits('remove');
+	emits('remove');
 };
 </script>
 
 <template>
-    <div data-slot="chip" :class="cn('inline-flex items-center gap-2 rounded border px-3 py-2 text-sm font-semibold transition-colors duration-150', getSurfaceToneClasses(props.color), props.class)">
-        <!-- Text content -->
-        <span class="leading-none">{{ props.text }}</span>
+	<div data-slot="chip" :class="cn('inline-flex items-center gap-2 rounded border px-3 py-2 text-sm font-semibold transition-colors duration-150', getSurfaceToneClasses(props.color), props.class)">
+		<!-- Text content -->
+		<span class="leading-none">{{ props.text }}</span>
 
-        <!-- Remove button -->
-        <button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded-sm opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
-            <HugeiconsIcon :icon="Cancel01Icon" class="size-3 transition-transform duration-300 ease-spring group-hover/remove:rotate-90" />
-        </button>
-    </div>
+		<!-- Remove button -->
+		<button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded-sm opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
+			<HugeiconsIcon :icon="Cancel01Icon" class="size-3 transition-transform duration-300 ease-spring group-hover/remove:rotate-90" />
+		</button>
+	</div>
 </template>

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, ref } from 'vue';
-import { InformationCircleIcon } from '@hugeicons/core-free-icons';
+import InformationCircleIcon from '@hugeicons/core-free-icons/InformationCircleIcon';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';
 import { Button } from '../ui/button';
 import { cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState } from './confirm-dialog-state';
@@ -11,66 +11,66 @@ const pendingAction = ref<'confirm' | 'cancel' | null>(null);
 
 // Run an action while showing a spinner on the button that triggered it
 const runAction = async (action: 'confirm' | 'cancel') => {
-    // Ignore clicks while another action is still running
-    if (pendingAction.value) {
-        return;
-    }
+	// Ignore clicks while another action is still running
+	if (pendingAction.value) {
+		return;
+	}
 
-    pendingAction.value = action;
-    try {
-        await (action === 'confirm' ? confirmActiveDialog() : cancelActiveConfirmDialog());
-    } finally {
-        pendingAction.value = null;
-    }
+	pendingAction.value = action;
+	try {
+		await (action === 'confirm' ? confirmActiveDialog() : cancelActiveConfirmDialog());
+	} finally {
+		pendingAction.value = null;
+	}
 };
 
 // Close the dialog when the shell requests it
 const handleOpenChange = (open: boolean) => {
-    if (!open) {
-        closeConfirmDialog();
-    }
+	if (!open) {
+		closeConfirmDialog();
+	}
 };
 </script>
 
 <template>
-    <!-- Dialog shell -->
-    <AlertDialog :open="confirmDialogState.isOpen" @update:open="handleOpenChange">
-        <!-- Dialog content -->
-        <AlertDialogContent v-if="currentDialog">
-            <div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
-                <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
-                    <!-- Dialog icon -->
-                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-primary/30 bg-primary/10 sm:size-10 sm:self-start">
-                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
-                        <HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
-                    </div>
+	<!-- Dialog shell -->
+	<AlertDialog :open="confirmDialogState.isOpen" @update:open="handleOpenChange">
+		<!-- Dialog content -->
+		<AlertDialogContent v-if="currentDialog">
+			<div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
+				<div class="flex flex-col gap-4 sm:flex-row sm:items-start">
+					<!-- Dialog icon -->
+					<div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-primary/30 bg-primary/10 sm:size-10 sm:self-start">
+						<HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
+						<HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
+					</div>
 
-                    <!-- Dialog header -->
-                    <AlertDialogHeader class="sm:pt-0">
-                        <AlertDialogTitle>
-                            {{ currentDialog.options.title }}
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {{ currentDialog.options.message }}
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                </div>
-            </div>
+					<!-- Dialog header -->
+					<AlertDialogHeader class="sm:pt-0">
+						<AlertDialogTitle>
+							{{ currentDialog.options.title }}
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							{{ currentDialog.options.message }}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+				</div>
+			</div>
 
-            <!-- Dialog actions -->
-            <AlertDialogFooter>
-                <!-- Cancel button -->
-                <Button :variant="currentDialog.options.cancelButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'cancel'" :loading="pendingAction === 'cancel'" @click="runAction('cancel')">
-                    <HugeiconsIcon v-if="currentDialog.options.cancelButtonIcon" :icon="currentDialog.options.cancelButtonIcon" class="size-4" />
-                    {{ currentDialog.options.cancelText }}
-                </Button>
+			<!-- Dialog actions -->
+			<AlertDialogFooter>
+				<!-- Cancel button -->
+				<Button :variant="currentDialog.options.cancelButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'cancel'" :loading="pendingAction === 'cancel'" @click="runAction('cancel')">
+					<HugeiconsIcon v-if="currentDialog.options.cancelButtonIcon" :icon="currentDialog.options.cancelButtonIcon" class="size-4" />
+					{{ currentDialog.options.cancelText }}
+				</Button>
 
-                <!-- Confirm button -->
-                <Button :variant="currentDialog.options.confirmButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'confirm'" :loading="pendingAction === 'confirm'" @click="runAction('confirm')">
-                    <HugeiconsIcon v-if="currentDialog.options.confirmButtonIcon" :icon="currentDialog.options.confirmButtonIcon" class="size-4" />
-                    {{ currentDialog.options.confirmText }}
-                </Button>
-            </AlertDialogFooter>
-        </AlertDialogContent>
-    </AlertDialog>
+				<!-- Confirm button -->
+				<Button :variant="currentDialog.options.confirmButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'confirm'" :loading="pendingAction === 'confirm'" @click="runAction('confirm')">
+					<HugeiconsIcon v-if="currentDialog.options.confirmButtonIcon" :icon="currentDialog.options.confirmButtonIcon" class="size-4" />
+					{{ currentDialog.options.confirmText }}
+				</Button>
+			</AlertDialogFooter>
+		</AlertDialogContent>
+	</AlertDialog>
 </template>