@brumaombra/ui-vintage 0.7.8 → 0.7.9

package/src/components/empty-state-card/EmptyStateCard.vue

@@ -4,23 +4,33 @@ import { useI18n } from 'vue-i18n';
 import { PackageIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: [Object, Array], default: () => PackageIcon },
-    title: { type: String, default: '' },
-    description: { type: String, default: '' },
-    titleKey: { type: String, default: '' },
-    descriptionKey: { type: String, default: '' }
+const props = withDefaults(defineProps<{
+    icon?: HugeiconsIconDefinition;
+    title?: string;
+    description?: string;
+    titleKey?: string;
+    descriptionKey?: string;
+}>(), {
+    icon: () => PackageIcon,
+    title: '',
+    description: '',
+    titleKey: '',
+    descriptionKey: ''
 });
 
 const { t } = useI18n();
-
 const hasCustomCopy = computed(() => Boolean(props.title || props.description || props.titleKey || props.descriptionKey));
+
+// Title
 const resolvedTitle = computed(() => props.title
     || (props.titleKey ? t(props.titleKey) : '')
     || (!hasCustomCopy.value ? t('uiVintage.common.empty.title') : '')
     || (!hasCustomCopy.value ? 'Nothing here yet' : ''));
+
+// Description
 const resolvedDescription = computed(() => props.description
     || (props.descriptionKey ? t(props.descriptionKey) : '')
     || (!hasCustomCopy.value ? t('uiVintage.common.empty.description') : '')
@@ -29,19 +39,19 @@ const resolvedDescription = computed(() => props.description
 
 <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">
+        <CardContent class="flex flex-col items-center justify-center p-0! text-center">
             <!-- Icon -->
-            <div class="flex items-center justify-center text-4xl text-[var(--text-secondary-light)] opacity-40 dark:text-[var(--text-secondary-dark)]">
+            <div class="flex items-center justify-center text-4xl text-(--text-secondary-light) opacity-40 dark:text-(--text-secondary-dark)">
                 <HugeiconsIcon :icon="props.icon" class="size-10" />
             </div>
 
             <!-- Title -->
-            <h3 v-if="resolvedTitle" class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] md:text-lg">
+            <h3 v-if="resolvedTitle" class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) md:text-lg">
                 {{ resolvedTitle }}
             </h3>
 
             <!-- Description -->
-            <p v-if="resolvedDescription" class="max-w-md text-xs text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] md:text-sm">
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
                 {{ resolvedDescription }}
             </p>
 

package/src/components/error-page/ErrorPage.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import BackgroundGrid from "../background-grid/BackgroundGrid.vue";
-import { Button } from "../ui/button";
-import { Card, CardContent, CardFooter } from "../ui/card";
-import { cn } from "../../lib/utils";
+import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, type HTMLAttributes } from 'vue';
+import BackgroundGrid from '../background-grid/BackgroundGrid.vue';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardFooter } from '../ui/card';
+import { cn } from '../../lib/utils';
 
-interface ErrorPageProps {
+// Props
+const props = withDefaults(defineProps<{
     statusCode?: number | string;
     label?: string;
     title?: string;
@@ -16,19 +16,16 @@ interface ErrorPageProps {
     actionLabel?: string;
     showBackground?: boolean;
     showDefaultAction?: boolean;
-    class?: HTMLAttributes["class"];
-    cardClass?: HTMLAttributes["class"];
-    contentClass?: HTMLAttributes["class"];
-    footerClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<ErrorPageProps>(), {
+    class?: HTMLAttributes['class'];
+    cardClass?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
+    footerClass?: HTMLAttributes['class'];
+}>(), {
     statusCode: 500,
-    label: "Error",
+    label: 'Error',
     title: undefined,
     message: undefined,
-    actionLabel: "Go back",
+    actionLabel: 'Go back',
     showBackground: true,
     showDefaultAction: true,
     class: undefined,
@@ -47,25 +44,25 @@ const resolvedStatusCode = computed(() => String(props.statusCode ?? 500));
 // Resolve the heading copy.
 const resolvedTitle = computed(() => {
     if (props.title) return props.title;
-    if (resolvedStatusCode.value === "404") return "Page not found";
-    return "Something went wrong";
+    if (resolvedStatusCode.value === '404') return 'Page not found';
+    return 'Something went wrong';
 });
 
 // Resolve the supporting message.
 const resolvedMessage = computed(() => {
     if (props.message) return props.message;
-    if (resolvedStatusCode.value === "404") return "The page you requested could not be found or may have been moved.";
-    return "An unexpected error interrupted the current flow. Please try again or go back to a safe page.";
+    if (resolvedStatusCode.value === '404') return 'The page you requested could not be found or may have been moved.';
+    return 'An unexpected error interrupted the current flow. Please try again or go back to a safe page.';
 });
 
 // Emit the default action.
 const handleAction = () => {
-    emit("action");
+    emit('action');
 };
 </script>
 
 <template>
-    <div :class="cn('relative min-h-screen bg-[var(--bg-main-light)] text-[var(--text-primary-light)] dark:bg-[var(--bg-main-dark)] dark:text-[var(--text-primary-dark)]', props.class)">
+    <div :class="cn('relative min-h-screen bg-(--bg-main-light) text-(--text-primary-light) dark:bg-(--bg-main-dark) dark:text-(--text-primary-dark)', props.class)">
         <!-- Decorative background -->
         <BackgroundGrid v-if="props.showBackground" />
 
@@ -86,7 +83,7 @@ const handleAction = () => {
                         <!-- Error copy -->
                         <div>
                             <!-- Status code -->
-                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-[var(--button-primary-light)] dark:text-[var(--button-primary-dark)]">
+                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-(--button-primary-light) dark:text-(--button-primary-dark)">
                                 {{ props.label }} {{ resolvedStatusCode }}
                             </div>
 
@@ -96,7 +93,7 @@ const handleAction = () => {
                             </h1>
 
                             <!-- Message -->
-                            <p class="text-sm leading-7 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] sm:text-base mt-4">
+                            <p class="text-sm leading-7 text-(--text-secondary-light) dark:text-(--text-secondary-dark) sm:text-base mt-4">
                                 {{ resolvedMessage }}
                             </p>
                         </div>

package/src/components/error-page/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./ErrorPage.vue";
-export { default as ErrorPage } from "./ErrorPage.vue";
+export { default } from './ErrorPage.vue';
+export { default as ErrorPage } from './ErrorPage.vue';

package/src/components/info-card/InfoCard.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { Card, CardContent, CardText } from "../ui/card"
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HTMLAttributes } from 'vue';
+import { Card, CardContent, CardText } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: Object, required: true },
-    title: { type: String, default: "" },
-    description: { type: [String, Number], default: "" }
-})
+const props = withDefaults(defineProps<{
+    icon: HugeiconsIconDefinition;
+    title?: string;
+    description?: string | number;
+    class?: HTMLAttributes['class'];
+}>(), {
+    title: '',
+    description: ''
+});
 </script>
 
 <template>
-    <Card class="flex flex-col items-center !p-4 sm:flex-row">
-        <CardContent class="flex w-full flex-col items-center gap-0 !p-0 sm:flex-row">
+    <Card :class="['flex flex-col items-center p-4! sm:flex-row', props.class]">
+        <CardContent class="flex w-full flex-col items-center gap-0 p-0! sm:flex-row">
             <!-- Icon -->
-            <Card color="gray" class="mb-3 mr-0 flex h-12 w-12 flex-shrink-0 items-center justify-center !p-0 sm:mb-0 sm:mr-4">
+            <Card color="gray" class="mb-3 mr-0 flex h-12 w-12 shrink-0 items-center justify-center p-0! sm:mb-0 sm:mr-4">
                 <HugeiconsIcon :icon="props.icon" class="size-5" />
             </Card>
 
@@ -22,7 +28,7 @@ const props = defineProps({
             <div class="flex w-full flex-1 items-center justify-between text-center sm:w-auto sm:text-left">
                 <div class="flex flex-col w-full gap-2 sm:gap-1">
                     <!-- Title -->
-                    <span class="text-base font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+                    <span class="text-base font-bold text-(--text-primary-light) dark:text-(--text-primary-dark)">
                         {{ props.title }}
                     </span>
 

package/src/components/landing/index.ts

@@ -1,6 +1,6 @@
-export { default } from "./landing-navbar";
-export { default as LandingContent } from "./landing-content";
-export { default as LandingShell } from "./landing-shell";
-export { default as LandingNavbar } from "./landing-navbar";
-export { default as LandingFooter } from "./landing-footer";
-export type { LandingFooterLink, LandingFooterSection } from "./landing-footer";
+export { default } from './landing-navbar';
+export { default as LandingContent } from './landing-content';
+export { default as LandingShell } from './landing-shell';
+export { default as LandingNavbar } from './landing-navbar';
+export { default as LandingFooter } from './landing-footer';
+export type { LandingFooterLink, LandingFooterSection } from './landing-footer';

package/src/components/landing/landing-content/LandingContent.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../../lib/utils";
-
-interface LandingContentProps {
-    class?: HTMLAttributes["class"];
-}
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
 // Props
-const props = defineProps<LandingContentProps>();
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>

package/src/components/landing/landing-content/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./LandingContent.vue";
-export { default as LandingContent } from "./LandingContent.vue";
+export { default } from './LandingContent.vue';
+export { default as LandingContent } from './LandingContent.vue';

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { NuxtImg } from "#components";
-import type { Component, HTMLAttributes } from "vue";
-import { FavouriteIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { cn } from "../../../lib/utils";
+import { NuxtImg } from '#components';
+import { FavouriteIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, type Component, type HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
 
 export interface LandingFooterLink {
     id: string;
@@ -21,7 +20,8 @@ export interface LandingFooterSection {
     links: LandingFooterLink[];
 }
 
-interface LandingFooterProps {
+// Props
+const props = withDefaults(defineProps<{
     appName: string;
     appLogo?: string;
     appLinkTo?: string;
@@ -32,21 +32,18 @@ interface LandingFooterProps {
     authorLink?: string;
     year?: number;
     showBottomBar?: boolean;
-    class?: HTMLAttributes["class"];
-    containerClass?: HTMLAttributes["class"];
-    brandClass?: HTMLAttributes["class"];
-    sectionsClass?: HTMLAttributes["class"];
-    bottomBarClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<LandingFooterProps>(), {
-    appLinkTo: "/",
-    appDescription: "",
+    class?: HTMLAttributes['class'];
+    containerClass?: HTMLAttributes['class'];
+    brandClass?: HTMLAttributes['class'];
+    sectionsClass?: HTMLAttributes['class'];
+    bottomBarClass?: HTMLAttributes['class'];
+}>(), {
+    appLinkTo: '/',
+    appDescription: '',
     sections: () => [],
-    linkComponent: "a",
-    authorName: "",
-    authorLink: "",
+    linkComponent: 'a',
+    authorName: '',
+    authorLink: '',
     year: () => new Date().getFullYear(),
     showBottomBar: true
 });
@@ -56,19 +53,19 @@ const hasSingleSection = computed(() => props.sections.length === 1);
 
 // Get link props based on the type of link component and whether the link should open in a new tab
 const getLinkProps = (link: LandingFooterLink) => {
-    const sharedProps = link.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+    const sharedProps = link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
 
     // If the link component is an anchor, use href. Otherwise, use to for router links.
-    if (props.linkComponent === "a") {
+    if (props.linkComponent === 'a') {
         return {
-            href: link.href ?? "#",
+            href: link.href ?? '#',
             ...sharedProps
         };
     }
 
     // For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
     return {
-        to: link.to ?? link.href ?? "/",
+        to: link.to ?? link.href ?? '/',
         ...sharedProps
     };
 };
@@ -135,14 +132,14 @@ const getLinkProps = (link: LandingFooterLink) => {
             <div v-if="props.showBottomBar" :class="cn('mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-xs md:text-sm text-muted-foreground md:flex-row', props.bottomBarClass)">
                 <!-- Copyright -->
                 <div>
-                    &copy; {{ props.year }} {{ props.appName }}. {{ t("uiVintage.footer.allRightsReserved") }}
+                    &copy; {{ props.year }} {{ props.appName }}. {{ t('uiVintage.footer.allRightsReserved') }}
                 </div>
 
                 <!-- Author -->
                 <div v-if="props.authorName && props.authorLink" class="flex flex-wrap items-center justify-center gap-1.5 md:justify-end">
-                    <span>{{ t("uiVintage.footer.madeWith") }}</span>
+                    <span>{{ t('uiVintage.footer.madeWith') }}</span>
                     <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-red-700 dark:text-red-400" />
-                    <span>{{ t("uiVintage.footer.by") }}</span>
+                    <span>{{ t('uiVintage.footer.by') }}</span>
                     <a :href="props.authorLink" target="_blank" rel="noopener noreferrer" class="font-semibold text-foreground hover:underline">
                         {{ props.authorName }}
                     </a>

package/src/components/landing/landing-footer/index.ts

@@ -1,3 +1,3 @@
-export { default } from "./LandingFooter.vue";
-export { default as LandingFooter } from "./LandingFooter.vue";
-export type { LandingFooterLink, LandingFooterSection } from "./LandingFooter.vue";
+export { default } from './LandingFooter.vue';
+export { default as LandingFooter } from './LandingFooter.vue';
+export type { LandingFooterLink, LandingFooterSection } from './LandingFooter.vue';

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { NuxtImg } from "#components";
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../../lib/utils";
+import { NuxtImg } from '#components';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
-interface LandingNavbarProps {
+// Props
+const props = withDefaults(defineProps<{
     appName?: string;
     appLogo?: string;
     appLinkTo?: string;
-    logoClass?: HTMLAttributes["class"];
-    class?: HTMLAttributes["class"];
-    containerClass?: HTMLAttributes["class"];
-    leftClass?: HTMLAttributes["class"];
-    rightClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<LandingNavbarProps>(), {
-    appName: "",
-    appLogo: "",
-    appLinkTo: "/"
+    logoClass?: HTMLAttributes['class'];
+    class?: HTMLAttributes['class'];
+    containerClass?: HTMLAttributes['class'];
+    leftClass?: HTMLAttributes['class'];
+    rightClass?: HTMLAttributes['class'];
+}>(), {
+    appName: '',
+    appLogo: '',
+    appLinkTo: '/'
 });
 </script>
 
@@ -33,7 +31,7 @@ const props = withDefaults(defineProps<LandingNavbarProps>(), {
                         <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', props.logoClass)" />
 
                         <!-- App name -->
-                        <span v-if="props.appName" class="hidden sm:!inline text-xl font-bold tracking-tight text-foreground">
+                        <span v-if="props.appName" class="hidden sm:inline! text-xl font-bold tracking-tight text-foreground">
                             {{ props.appName }}
                         </span>
                     </a>

package/src/components/landing/landing-navbar/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./LandingNavbar.vue";
-export { default as LandingNavbar } from "./LandingNavbar.vue";
+export { default } from './LandingNavbar.vue';
+export { default as LandingNavbar } from './LandingNavbar.vue';

package/src/components/landing/landing-shell/LandingShell.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { computed, useSlots } from "vue";
-import BackgroundGrid from "../../background-grid/BackgroundGrid.vue";
-import { cn } from "../../../lib/utils";
-
-interface LandingShellProps {
-    showBackground?: boolean;
-    rootClass?: HTMLAttributes["class"];
-    navbarClass?: HTMLAttributes["class"];
-    mainClass?: HTMLAttributes["class"];
-    footerClass?: HTMLAttributes["class"];
-}
+import { computed, useSlots, type HTMLAttributes } from 'vue';
+import BackgroundGrid from '../../background-grid/BackgroundGrid.vue';
+import { cn } from '../../../lib/utils';
 
 // Props
-const props = withDefaults(defineProps<LandingShellProps>(), {
+const props = withDefaults(defineProps<{
+    showBackground?: boolean;
+    rootClass?: HTMLAttributes['class'];
+    navbarClass?: HTMLAttributes['class'];
+    mainClass?: HTMLAttributes['class'];
+    footerClass?: HTMLAttributes['class'];
+}>(), {
     showBackground: true
 });
 

package/src/components/landing/landing-shell/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./LandingShell.vue";
-export { default as LandingShell } from "./LandingShell.vue";
+export { default } from './LandingShell.vue';
+export { default as LandingShell } from './LandingShell.vue';

package/src/components/language-flag/LanguageFlag.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { Component } from 'vue';
-import { computed, defineAsyncComponent } from 'vue';
+import { computed, defineAsyncComponent, type Component } from 'vue';
 
 // Single source of truth for supported flag component loaders
 const supportedFlagLoaders = {
@@ -15,7 +14,7 @@ const supportedFlagLoaders = {
     ru: () => import('./flags/RussianFlag.vue')
 } as const;
 
-type SupportedLanguageCode = keyof typeof supportedFlagLoaders;
+export type SupportedLanguageCode = keyof typeof supportedFlagLoaders;
 const asyncFlagComponentCache = new Map<SupportedLanguageCode, Component>();
 
 // Type guard to ensure a code is one of the supported flag codes
@@ -38,8 +37,10 @@ const getAsyncFlagComponent = (code: SupportedLanguageCode) => {
 };
 
 // Props
-const props = defineProps({
-    code: { type: String, default: 'en' }
+const props = withDefaults(defineProps<{
+    code?: SupportedLanguageCode;
+}>(), {
+    code: 'en'
 });
 
 // Get the appropriate flag component based on the code prop

package/src/components/language-flag/index.ts

@@ -1,5 +1,6 @@
 export { default } from './LanguageFlag.vue';
 export { default as LanguageFlag } from './LanguageFlag.vue';
+export type { SupportedLanguageCode } from './LanguageFlag.vue';
 export { default as EnglishFlag } from './flags/EnglishFlag.vue';
 export { default as FrenchFlag } from './flags/FrenchFlag.vue';
 export { default as GermanFlag } from './flags/GermanFlag.vue';

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { Component, PropType } from 'vue';
-import { computed, defineAsyncComponent, ref } from 'vue';
+import { computed, defineAsyncComponent, ref, type Component } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Tick02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
@@ -10,6 +9,24 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 
 export type LanguageSelectorCode = string;
 
+// Props
+const props = withDefaults(defineProps<{
+    modelValue?: string;
+    languages?: LanguageSelectorCode[];
+}>(), {
+    modelValue: '',
+    languages: () => ['en', 'it']
+});
+
+// Emits
+const emits = defineEmits<{
+    'update:modelValue': [value: string];
+    select: [value: string];
+}>();
+
+const { locale, t } = useI18n();
+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') },
@@ -51,24 +68,6 @@ const getAsyncFlagComponent = (code: SupportedLanguageCode) => {
     return asyncComponent;
 };
 
-// Props
-const props = defineProps({
-    modelValue: { type: String, default: '' },
-    languages: {
-        type: Array as PropType<LanguageSelectorCode[]>,
-        default: () => ['en', 'it']
-    }
-});
-
-// Emits
-const emits = defineEmits<{
-    'update:modelValue': [value: string];
-    select: [value: string];
-}>();
-
-const { locale, t } = useI18n();
-const isOpen = ref(false);
-
 // 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;
@@ -137,7 +136,7 @@ const handleSelectLanguage = (language: string) => {
         </PopoverTrigger>
 
         <!-- Popover content with language options -->
-        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 !p-0">
+        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
             <Command :model-value="props.modelValue">
                 <CommandList>
                     <CommandGroup :heading="t('uiVintage.language.title')">

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

@@ -5,19 +5,27 @@ import { ArrowDown01Icon, RefreshIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 
-const props = defineProps({
-    busy: { type: Boolean, default: false },
-    text: { type: String, default: '' },
-    loadingText: { type: String, default: '' }
+// Props
+const props = withDefaults(defineProps<{
+    busy?: boolean;
+    text?: string;
+    loadingText?: string;
+}>(), {
+    busy: false,
+    text: '',
+    loadingText: ''
 });
 
-const emits = defineEmits(['load-more']);
+// Emits
+const emits = defineEmits<{
+    'load-more': [];
+}>();
 
 const { t } = useI18n();
-
 const resolvedText = computed(() => props.text || t('uiVintage.buttons.loadMore') || 'Load more');
 const resolvedLoadingText = computed(() => props.loadingText || t('uiVintage.buttons.loading') || 'Loading');
 
+// Handle click event
 const handleClick = () => {
     emits('load-more');
 };
@@ -25,18 +33,14 @@ const handleClick = () => {
 
 <template>
     <div class="flex justify-center">
-        <Button v-if="props.busy"
-            variant="secondary"
-            class="w-full md:w-auto"
-            :disabled="true">
+        <!-- Loading button -->
+        <Button v-if="props.busy" variant="secondary" class="w-full md:w-auto" :disabled="true">
             <HugeiconsIcon :icon="RefreshIcon" class="size-4 animate-spin" />
             {{ resolvedLoadingText }}
         </Button>
 
-        <Button v-else
-            variant="secondary"
-            class="w-full md:w-auto"
-            @click="handleClick">
+        <!-- Load more button -->
+        <Button v-else variant="secondary" class="w-full md:w-auto" @click="handleClick">
             <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4" />
             {{ resolvedText }}
         </Button>