@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/language-selector/LanguageSelector.vue

@@ -11,17 +11,17 @@ export type LanguageSelectorCode = string;
 
 // Props
 const props = withDefaults(defineProps<{
-    modelValue?: string;
-    languages?: LanguageSelectorCode[];
+	modelValue?: string;
+	languages?: LanguageSelectorCode[];
 }>(), {
-    modelValue: '',
-    languages: () => ['en', 'it']
+	modelValue: '',
+	languages: () => ['en', 'it']
 });
 
 // Emits
 const emits = defineEmits<{
-    'update:modelValue': [value: string];
-    select: [value: string];
+	'update:modelValue': [value: string];
+	select: [value: string];
 }>();
 
 const { locale, t } = useI18n();
@@ -29,15 +29,15 @@ const isOpen = ref(false);
 
 // Single source of truth for supported language codes, labels, and flag loaders
 const supportedLanguages = [
-    { code: 'en', label: 'English', loadFlag: () => import('../language-flag/flags/EnglishFlag.vue') },
-    { code: 'it', label: 'Italiano', loadFlag: () => import('../language-flag/flags/ItalianFlag.vue') },
-    { code: 'fr', label: 'Français', loadFlag: () => import('../language-flag/flags/FrenchFlag.vue') },
-    { code: 'es', label: 'Español', loadFlag: () => import('../language-flag/flags/SpanishFlag.vue') },
-    { code: 'de', label: 'Deutsch', loadFlag: () => import('../language-flag/flags/GermanFlag.vue') },
-    { code: 'pt', label: 'Português', loadFlag: () => import('../language-flag/flags/PortugueseFlag.vue') },
-    { code: 'zh', label: '中文', loadFlag: () => import('../language-flag/flags/ChineseFlag.vue') },
-    { code: 'ja', label: '日本語', loadFlag: () => import('../language-flag/flags/JapaneseFlag.vue') },
-    { code: 'ru', label: 'Русский', loadFlag: () => import('../language-flag/flags/RussianFlag.vue') }
+	{ code: 'en', label: 'English', loadFlag: () => import('../language-flag/flags/EnglishFlag.vue') },
+	{ code: 'it', label: 'Italiano', loadFlag: () => import('../language-flag/flags/ItalianFlag.vue') },
+	{ code: 'fr', label: 'Français', loadFlag: () => import('../language-flag/flags/FrenchFlag.vue') },
+	{ code: 'es', label: 'Español', loadFlag: () => import('../language-flag/flags/SpanishFlag.vue') },
+	{ code: 'de', label: 'Deutsch', loadFlag: () => import('../language-flag/flags/GermanFlag.vue') },
+	{ code: 'pt', label: 'Português', loadFlag: () => import('../language-flag/flags/PortugueseFlag.vue') },
+	{ code: 'zh', label: '中文', loadFlag: () => import('../language-flag/flags/ChineseFlag.vue') },
+	{ code: 'ja', label: '日本語', loadFlag: () => import('../language-flag/flags/JapaneseFlag.vue') },
+	{ code: 'ru', label: 'Русский', loadFlag: () => import('../language-flag/flags/RussianFlag.vue') }
 ] as const;
 
 type SupportedLanguage = (typeof supportedLanguages)[number];
@@ -46,31 +46,31 @@ const asyncFlagComponentCache = new Map<SupportedLanguageCode, Component>();
 
 // Type guard to ensure a code is one of the supported flag codes
 const isSupportedLanguageCode = (code: string): code is SupportedLanguageCode => {
-    return supportedLanguages.some((language) => language.code === code);
+	return supportedLanguages.some((language) => language.code === code);
 };
 
 // Get the supported language object for a given code
 const getSupportedLanguage = (code: SupportedLanguageCode) => {
-    return supportedLanguages.find((language) => language.code === code)!;
+	return supportedLanguages.find((language) => language.code === code)!;
 };
 
 // Load and cache the async component for a given supported language code
 const getAsyncFlagComponent = (code: SupportedLanguageCode) => {
-    // Check cache first
-    const cachedComponent = asyncFlagComponentCache.get(code);
-    if (cachedComponent) {
-        return cachedComponent;
-    }
-
-    // Load the async component and cache it
-    const asyncComponent = defineAsyncComponent(getSupportedLanguage(code).loadFlag);
-    asyncFlagComponentCache.set(code, asyncComponent);
-    return asyncComponent;
+	// Check cache first
+	const cachedComponent = asyncFlagComponentCache.get(code);
+	if (cachedComponent) {
+		return cachedComponent;
+	}
+
+	// Load the async component and cache it
+	const asyncComponent = defineAsyncComponent(getSupportedLanguage(code).loadFlag);
+	asyncFlagComponentCache.set(code, asyncComponent);
+	return asyncComponent;
 };
 
 // Build localized language labels from the provided language codes
 const languageDisplayNames = computed(() => {
-    return typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale.value], { type: 'language' }) : null;
+	return typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale.value], { type: 'language' }) : null;
 });
 
 // Base language of a code ('it-IT' and 'it_IT' become 'it')
@@ -78,84 +78,84 @@ const getBaseLanguageCode = (code: string) => code.toLowerCase().split(/[-_]/)[0
 
 // Supported flag code for a language code, including regional codes
 const getFlagCode = (code: string) => {
-    const languageCode = getBaseLanguageCode(code);
-    return isSupportedLanguageCode(languageCode) ? languageCode : null;
+	const languageCode = getBaseLanguageCode(code);
+	return isSupportedLanguageCode(languageCode) ? languageCode : null;
 };
 
 // Get the display label for a given language code
 const getLanguageLabel = (code: string) => {
-    const languageCode = getBaseLanguageCode(code);
-    const supportedLanguage = isSupportedLanguageCode(languageCode) ? getSupportedLanguage(languageCode) : null;
-    return supportedLanguage?.label || languageDisplayNames.value?.of(languageCode) || code.toUpperCase();
+	const languageCode = getBaseLanguageCode(code);
+	const supportedLanguage = isSupportedLanguageCode(languageCode) ? getSupportedLanguage(languageCode) : null;
+	return supportedLanguage?.label || languageDisplayNames.value?.of(languageCode) || code.toUpperCase();
 };
 
 // Normalize languages to pair each language code with its label
 const normalizedLanguages = computed(() => {
-    return props.languages.map(code => ({
-        code,
-        label: getLanguageLabel(code)
-    }));
+	return props.languages.map(code => ({
+		code,
+		label: getLanguageLabel(code)
+	}));
 });
 
 // Compute the available flag codes based on the provided language list
 const availableFlagCodes = computed<SupportedLanguageCode[]>(() => {
-    // Extract supported language codes from the normalized list
-    const supportedCodes = normalizedLanguages.value.map(language => getFlagCode(language.code)).filter((code): code is SupportedLanguageCode => code !== null);
-    if (supportedCodes.length > 0) {
-        return [...new Set(supportedCodes)];
-    }
-
-    // If no valid codes are provided, default to English
-    return ['en'];
+	// Extract supported language codes from the normalized list
+	const supportedCodes = normalizedLanguages.value.map(language => getFlagCode(language.code)).filter((code): code is SupportedLanguageCode => code !== null);
+	if (supportedCodes.length > 0) {
+		return [...new Set(supportedCodes)];
+	}
+
+	// If no valid codes are provided, default to English
+	return ['en'];
 });
 
 // Resolve the flag component for a specific code, falling back to the first available code
 const resolveFlagComponent = (code?: string) => {
-    const flagCode = code ? getFlagCode(code) : null;
-    const resolvedCode = flagCode && availableFlagCodes.value.includes(flagCode) ? flagCode : availableFlagCodes.value[0];
-    return getAsyncFlagComponent(resolvedCode);
+	const flagCode = code ? getFlagCode(code) : null;
+	const resolvedCode = flagCode && availableFlagCodes.value.includes(flagCode) ? flagCode : availableFlagCodes.value[0];
+	return getAsyncFlagComponent(resolvedCode);
 };
 
 // Get the currently selected language based on modelValue
 const currentLanguage = computed(() => {
-    return normalizedLanguages.value.find(language => language.code === props.modelValue) || normalizedLanguages.value[0] || null;
+	return normalizedLanguages.value.find(language => language.code === props.modelValue) || normalizedLanguages.value[0] || null;
 });
 
 // Resolve the async flag component for the currently selected language
 const currentFlagComponent = computed(() => {
-    return currentLanguage.value ? resolveFlagComponent(currentLanguage.value.code) : null;
+	return currentLanguage.value ? resolveFlagComponent(currentLanguage.value.code) : null;
 });
 
 // Handle language selection
 const handleSelectLanguage = (language: string) => {
-    emits('update:modelValue', language);
-    emits('select', language);
-    isOpen.value = false;
+	emits('update:modelValue', language);
+	emits('select', language);
+	isOpen.value = false;
 };
 </script>
 
 <template>
-    <Popover v-model:open="isOpen">
-        <!-- Trigger button showing the current language flag -->
-        <PopoverTrigger as-child>
-            <Button variant="secondary" size="icon" :aria-label="t('uiVintage.language.ariaLabel')">
-                <component :is="currentFlagComponent" v-if="currentFlagComponent" class="h-4 w-[1.35rem] rounded-[2px]" />
-            </Button>
-        </PopoverTrigger>
-
-        <!-- Popover content with language options -->
-        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
-            <Command :model-value="props.modelValue">
-                <CommandList :aria-label="t('uiVintage.language.title')">
-                    <CommandGroup :heading="t('uiVintage.language.title')" stagger>
-                        <CommandItem v-for="option in normalizedLanguages" :key="option.code" :value="option.code" @select="handleSelectLanguage(option.code)">
-                            <component :is="resolveFlagComponent(option.code)" class="h-4 w-[1.35rem] rounded-[2px]" />
-                            <span class="flex-1">{{ option.label }}</span>
-                            <HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0" :class="props.modelValue === option.code ? 'opacity-100' : 'opacity-0'" />
-                        </CommandItem>
-                    </CommandGroup>
-                </CommandList>
-            </Command>
-        </PopoverContent>
-    </Popover>
+	<Popover v-model:open="isOpen">
+		<!-- Trigger button showing the current language flag -->
+		<PopoverTrigger as-child>
+			<Button variant="secondary" size="icon" :aria-label="t('uiVintage.language.ariaLabel')">
+				<component :is="currentFlagComponent" v-if="currentFlagComponent" class="h-4 w-[1.35rem] rounded-[2px]" />
+			</Button>
+		</PopoverTrigger>
+
+		<!-- Popover content with language options -->
+		<PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
+			<Command :model-value="props.modelValue">
+				<CommandList :aria-label="t('uiVintage.language.title')">
+					<CommandGroup :heading="t('uiVintage.language.title')" stagger>
+						<CommandItem v-for="option in normalizedLanguages" :key="option.code" :value="option.code" @select="handleSelectLanguage(option.code)">
+							<component :is="resolveFlagComponent(option.code)" class="h-4 w-[1.35rem] rounded-[2px]" />
+							<span class="flex-1">{{ option.label }}</span>
+							<HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0" :class="props.modelValue === option.code ? 'opacity-100' : 'opacity-0'" />
+						</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</Command>
+		</PopoverContent>
+	</Popover>
 </template>

package/src/components/load-more-button/LoadMoreButton.vue

@@ -8,18 +8,18 @@ import { Button } from '../ui/button';
 
 // Props
 const props = withDefaults(defineProps<{
-    busy?: boolean;
-    text?: string;
-    loadingText?: string;
+	busy?: boolean;
+	text?: string;
+	loadingText?: string;
 }>(), {
-    busy: false,
-    text: '',
-    loadingText: ''
+	busy: false,
+	text: '',
+	loadingText: ''
 });
 
 // Emits
 const emits = defineEmits<{
-    'load-more': [];
+	'load-more': [];
 }>();
 
 const { t } = useI18n();
@@ -28,17 +28,17 @@ const resolvedLoadingText = computed(() => props.loadingText || t('uiVintage.but
 
 // Handle click event (ignored while loading, so the button stays focusable without firing twice)
 const handleClick = () => {
-    if (props.busy) return;
-    emits('load-more');
+	if (props.busy) return;
+	emits('load-more');
 };
 </script>
 
 <template>
-    <div class="flex justify-center">
-        <!-- A single button for both states keeps keyboard focus on it while the next page loads -->
-        <Button variant="secondary" :class="['w-full md:w-auto', props.busy && 'cursor-wait']" :aria-disabled="props.busy || undefined" :aria-busy="props.busy || undefined" @click="handleClick">
-            <HugeiconsIcon :icon="props.busy ? RefreshIcon : ArrowDown01Icon" :class="['size-4', props.busy && 'animate-spin']" />
-            {{ props.busy ? resolvedLoadingText : resolvedText }}
-        </Button>
-    </div>
-</template>
+	<div class="flex justify-center">
+		<!-- A single button for both states keeps keyboard focus on it while the next page loads -->
+		<Button variant="secondary" :class="['w-full md:w-auto', props.busy && 'cursor-wait']" :aria-disabled="props.busy || undefined" :aria-busy="props.busy || undefined" @click="handleClick">
+			<HugeiconsIcon :icon="props.busy ? RefreshIcon : ArrowDown01Icon" :class="['size-4', props.busy && 'animate-spin']" />
+			{{ props.busy ? resolvedLoadingText : resolvedText }}
+		</Button>
+	</div>
+</template>

package/src/components/loading-state-card/LoadingStateCard.vue

@@ -8,15 +8,15 @@ import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-typ
 
 // Props
 const props = withDefaults(defineProps<{
-    icon?: HugeiconsIconDefinition;
-    title?: string;
-    description?: string;
-    level?: HeadingLevel;
+	icon?: HugeiconsIconDefinition;
+	title?: string;
+	description?: string;
+	level?: HeadingLevel;
 }>(), {
-    icon: () => Loading03Icon,
-    title: '',
-    description: '',
-    level: 3
+	icon: () => Loading03Icon,
+	title: '',
+	description: '',
+	level: 3
 });
 
 const { t } = useI18n();
@@ -25,27 +25,27 @@ const resolvedDescription = computed(() => props.description || t('uiVintage.com
 </script>
 
 <template>
-    <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
-        <CardContent class="flex flex-col items-center justify-center p-0! text-center">
-            <!-- Loading spinner icon -->
-            <div aria-hidden="true" class="flex items-center justify-center text-4xl text-muted-foreground opacity-60">
-                <HugeiconsIcon :icon="props.icon" class="size-10 animate-spin" />
-            </div>
+	<Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
+		<CardContent class="flex flex-col items-center justify-center p-0! text-center">
+			<!-- Loading spinner icon -->
+			<div aria-hidden="true" class="flex items-center justify-center text-4xl text-muted-foreground opacity-60">
+				<HugeiconsIcon :icon="props.icon" class="size-10 animate-spin" />
+			</div>
 
-            <!-- Title -->
-            <component :is="`h${props.level}`"
-                v-if="resolvedTitle"
-                class="text-sm font-semibold text-foreground md:text-base">
-                {{ resolvedTitle }}
-            </component>
+			<!-- Title -->
+			<component :is="`h${props.level}`"
+				v-if="resolvedTitle"
+				class="text-sm font-semibold text-foreground md:text-base">
+				{{ resolvedTitle }}
+			</component>
 
-            <!-- Description -->
-            <p v-if="resolvedDescription" class="max-w-md text-xs text-muted-foreground md:text-sm">
-                {{ resolvedDescription }}
-            </p>
+			<!-- Description -->
+			<p v-if="resolvedDescription" class="max-w-md text-xs text-muted-foreground md:text-sm">
+				{{ resolvedDescription }}
+			</p>
 
-            <!-- Slot for additional content -->
-            <slot />
-        </CardContent>
-    </Card>
+			<!-- Slot for additional content -->
+			<slot />
+		</CardContent>
+	</Card>
 </template>

package/src/components/message-dialog/MessageDialog.vue

@@ -14,90 +14,90 @@ const currentDialog = computed(() => messageDialogState.current);
 
 // Resolve the title
 const resolvedTitle = computed(() => {
-    const current = currentDialog.value;
-    if (!current) return '';
-    return current.options.title || getUiVintageRuntimeMessage(`uiVintage.messageDialog.${current.options.type}`, '');
+	const current = currentDialog.value;
+	if (!current) return '';
+	return current.options.title || getUiVintageRuntimeMessage(`uiVintage.messageDialog.${current.options.type}`, '');
 });
 
 // Resolve the close button text
 const resolvedCloseText = computed(() => {
-    const current = currentDialog.value;
-    if (!current) return getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close');
-    return current.options.closeText || getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close');
+	const current = currentDialog.value;
+	if (!current) return getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close');
+	return current.options.closeText || getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close');
 });
 
 // Resolved fallback icon for the current message type
 const defaultMessageIcon = computed(() => {
-    const current = currentDialog.value;
-    if (!current) return InformationCircleIcon;
-    if (current.options.type === 'error' || current.options.type === 'warning') return AlertCircleIcon;
-    if (current.options.type === 'success') return Tick02Icon;
-    return InformationCircleIcon;
+	const current = currentDialog.value;
+	if (!current) return InformationCircleIcon;
+	if (current.options.type === 'error' || current.options.type === 'warning') return AlertCircleIcon;
+	if (current.options.type === 'success') return Tick02Icon;
+	return InformationCircleIcon;
 });
 
 // Resolved container classes for the message icon
 const messageIconClasses = computed(() => {
-    const current = currentDialog.value;
-    if (!current) return 'border-border bg-surface';
-    if (current.options.type === 'error') return 'border-destructive/25 bg-destructive/10';
-    if (current.options.type === 'warning') return 'border-warning/25 bg-warning/10';
-    if (current.options.type === 'success') return 'border-success/25 bg-success/10';
-    return 'border-border bg-surface';
+	const current = currentDialog.value;
+	if (!current) return 'border-border bg-surface';
+	if (current.options.type === 'error') return 'border-destructive/25 bg-destructive/10';
+	if (current.options.type === 'warning') return 'border-warning/25 bg-warning/10';
+	if (current.options.type === 'success') return 'border-success/25 bg-success/10';
+	return 'border-border bg-surface';
 });
 
 // Resolved glyph color classes
 const messageGlyphClasses = computed(() => {
-    const current = currentDialog.value;
-    if (!current) return 'text-info';
-    if (current.options.type === 'error') return 'text-destructive';
-    if (current.options.type === 'warning') return 'text-warning';
-    if (current.options.type === 'success') return 'text-success';
-    return 'text-info';
+	const current = currentDialog.value;
+	if (!current) return 'text-info';
+	if (current.options.type === 'error') return 'text-destructive';
+	if (current.options.type === 'warning') return 'text-warning';
+	if (current.options.type === 'success') return 'text-success';
+	return 'text-info';
 });
 
 // Close the dialog when the shell requests it
 const handleOpenChange = (open: boolean) => {
-    if (!open) {
-        closeMessageDialog();
-    }
+	if (!open) {
+		closeMessageDialog();
+	}
 };
 </script>
 
 <template>
-    <!-- Dialog shell -->
-    <AlertDialog :open="messageDialogState.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 sm:size-10 sm:self-start" :class="messageIconClasses">
-                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop [animation-delay:140ms]" :class="messageGlyphClasses" />
-                        <HugeiconsIcon v-else :icon="defaultMessageIcon" :stroke-width="1.8" class="size-6 animate-uv-pop [animation-delay:140ms]" :class="messageGlyphClasses" />
-                    </div>
+	<!-- Dialog shell -->
+	<AlertDialog :open="messageDialogState.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 sm:size-10 sm:self-start" :class="messageIconClasses">
+						<HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop [animation-delay:140ms]" :class="messageGlyphClasses" />
+						<HugeiconsIcon v-else :icon="defaultMessageIcon" :stroke-width="1.8" class="size-6 animate-uv-pop [animation-delay:140ms]" :class="messageGlyphClasses" />
+					</div>
 
-                    <!-- Dialog header -->
-                    <AlertDialogHeader class="sm:pt-0">
-                        <!-- Title -->
-                        <AlertDialogTitle>
-                            {{ resolvedTitle }}
-                        </AlertDialogTitle>
+					<!-- Dialog header -->
+					<AlertDialogHeader class="sm:pt-0">
+						<!-- Title -->
+						<AlertDialogTitle>
+							{{ resolvedTitle }}
+						</AlertDialogTitle>
 
-                        <!-- Message -->
-                        <AlertDialogDescription>
-                            {{ currentDialog.options.message }}
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                </div>
-            </div>
+						<!-- Message -->
+						<AlertDialogDescription>
+							{{ currentDialog.options.message }}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+				</div>
+			</div>
 
-            <!-- Dialog actions -->
-            <AlertDialogFooter class="items-end">
-                <Button variant="secondary" @click="resolveActiveMessageDialog">
-                    <HugeiconsIcon v-if="currentDialog.options.closeButtonIcon" :icon="currentDialog.options.closeButtonIcon" class="size-4" />
-                    {{ resolvedCloseText }}
-                </Button>
-            </AlertDialogFooter>
-        </AlertDialogContent>
-    </AlertDialog>
+			<!-- Dialog actions -->
+			<AlertDialogFooter class="items-end">
+				<Button variant="secondary" @click="resolveActiveMessageDialog">
+					<HugeiconsIcon v-if="currentDialog.options.closeButtonIcon" :icon="currentDialog.options.closeButtonIcon" class="size-4" />
+					{{ resolvedCloseText }}
+				</Button>
+			</AlertDialogFooter>
+		</AlertDialogContent>
+	</AlertDialog>
 </template>