@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/module.mjs

@@ -7,25 +7,25 @@ const consumerRequire = createRequire(resolve(process.cwd(), 'package.json'));
 
 // Resolve Nuxt Kit from either the consumer app or the package itself
 const loadNuxtKit = async () => {
-    // Attempt to load Nuxt Kit
-    for (const specifier of ['@nuxt/kit', 'nuxt/node_modules/@nuxt/kit']) {
-        try {
-            return await import(specifier);
-        } catch { }
+	// Attempt to load Nuxt Kit
+	for (const specifier of ['@nuxt/kit', 'nuxt/node_modules/@nuxt/kit']) {
+		try {
+			return await import(specifier);
+		} catch { }
 
-        try {
-            const resolvedPath = consumerRequire.resolve(specifier);
-            return await import(pathToFileURL(resolvedPath).href);
-        } catch { }
+		try {
+			const resolvedPath = consumerRequire.resolve(specifier);
+			return await import(pathToFileURL(resolvedPath).href);
+		} catch { }
 
-        try {
-            const resolvedPath = moduleRequire.resolve(specifier);
-            return await import(pathToFileURL(resolvedPath).href);
-        } catch { }
-    }
+		try {
+			const resolvedPath = moduleRequire.resolve(specifier);
+			return await import(pathToFileURL(resolvedPath).href);
+		} catch { }
+	}
 
-    // Throw an error if Nuxt Kit cannot be resolved
-    throw new Error('Unable to resolve @nuxt/kit for @brumaombra/ui-vintage. Install the package dependencies or add Nuxt to the consuming app.');
+	// Throw an error if Nuxt Kit cannot be resolved
+	throw new Error('Unable to resolve @nuxt/kit for @brumaombra/ui-vintage. Install the package dependencies or add Nuxt to the consuming app.');
 };
 
 const { addPlugin, createResolver, defineNuxtModule, hasNuxtModule, installModule } = await loadNuxtKit();
@@ -35,35 +35,35 @@ const sourceRoot = resolver.resolve('src');
 const stylesPath = resolver.resolve('src/styles.css');
 
 export default defineNuxtModule({
-    // Module meta information
-    meta: {
-        name: '@brumaombra/ui-vintage',
-        configKey: 'uiVintage',
-        version,
-        compatibility: {
-            nuxt: '>=4.0.0'
-        }
-    },
+	// Module meta information
+	meta: {
+		name: '@brumaombra/ui-vintage',
+		configKey: 'uiVintage',
+		version,
+		compatibility: {
+			nuxt: '>=4.0.0'
+		}
+	},
 
-    // Module main function
-    async setup(_, nuxt) {
-        // Inject the shared library stylesheet once
-        if (!nuxt.options.css.includes(stylesPath)) {
-            nuxt.options.css.push(stylesPath);
-        }
+	// Module main function
+	async setup(_, nuxt) {
+		// Inject the shared library stylesheet once
+		if (!nuxt.options.css.includes(stylesPath)) {
+			nuxt.options.css.push(stylesPath);
+		}
 
-        // Transpile the published source so consuming apps can import it directly
-        const cleanSourceRoot = sourceRoot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        nuxt.options.build.transpile.push(new RegExp(`^${cleanSourceRoot}`));
+		// Transpile the published source so consuming apps can import it directly
+		const cleanSourceRoot = sourceRoot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		nuxt.options.build.transpile.push(new RegExp(`^${cleanSourceRoot}`));
 
-        // Ensure Nuxt Image is available for components that render NuxtImg
-        if (!hasNuxtModule('@nuxt/image', nuxt)) {
-            await installModule('@nuxt/image');
-        }
+		// Ensure Nuxt Image is available for components that render NuxtImg
+		if (!hasNuxtModule('@nuxt/image', nuxt)) {
+			await installModule('@nuxt/image');
+		}
 
-        // Add the plugin to merge the library translations into the app i18n instance at runtime
-        addPlugin({
-            src: resolver.resolve('src/runtime/ui-vintage-i18n-plugin.ts')
-        });
-    }
+		// Add the plugin to merge the library translations into the app i18n instance at runtime
+		addPlugin({
+			src: resolver.resolve('src/runtime/ui-vintage-i18n-plugin.ts')
+		});
+	}
 });

package/package.json

@@ -1,176 +1,176 @@
 {
-    "name": "@brumaombra/ui-vintage",
-    "version": "0.9.1",
-    "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
-    "private": false,
-    "author": "Mauro Brambilla",
-    "license": "MIT",
-    "homepage": "https://github.com/brumaombra/ui-vintage#readme",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/brumaombra/ui-vintage.git"
-    },
-    "bugs": {
-        "url": "https://github.com/brumaombra/ui-vintage/issues"
-    },
-    "keywords": [
-        "nuxt",
-        "nuxt4",
-        "nuxt-module",
-        "components",
-        "ui",
-        "shared-runtime",
-        "nuxt-image"
-    ],
-    "type": "module",
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "src",
-        "module.mjs",
-        "COMPONENTS.md",
-        "AGENTS.md"
-    ],
-    "exports": {
-        ".": {
-            "import": "./module.mjs",
-            "default": "./module.mjs"
-        },
-        "./package.json": "./package.json",
-        "./style.css": "./src/styles.css",
-        "./accordion": "./src/components/ui/accordion/index.ts",
-        "./alert": "./src/components/ui/alert/index.ts",
-        "./alert-dialog": "./src/components/ui/alert-dialog/index.ts",
-        "./animated-number": "./src/components/ui/animated-number/index.ts",
-        "./avatar": "./src/components/ui/avatar/index.ts",
-        "./background-grid": "./src/components/background-grid/index.ts",
-        "./badge": "./src/components/ui/badge/index.ts",
-        "./blog": "./src/components/blog/index.ts",
-        "./breadcrumb": "./src/components/ui/breadcrumb/index.ts",
-        "./busy": "./src/components/ui/busy/index.ts",
-        "./busy-indicator": "./src/components/busy-indicator/index.ts",
-        "./button": "./src/components/ui/button/index.ts",
-        "./calendar": "./src/components/ui/calendar/index.ts",
-        "./card": "./src/components/ui/card/index.ts",
-        "./card-grid": "./src/components/card-grid/index.ts",
-        "./checkbox": "./src/components/ui/checkbox/index.ts",
-        "./chip": "./src/components/chip/index.ts",
-        "./collapsible": "./src/components/ui/collapsible/index.ts",
-        "./combobox": "./src/components/ui/combobox/index.ts",
-        "./command": "./src/components/ui/command/index.ts",
-        "./common-types": "./src/lib/common-types.ts",
-        "./confirm-dialog": "./src/components/confirm-dialog/index.ts",
-        "./cookie-consent": "./src/components/cookie-consent/index.ts",
-        "./content": "./src/components/content/index.ts",
-        "./dashboard-shell": "./src/components/dashboard-shell/index.ts",
-        "./data-list": "./src/components/data-list/index.ts",
-        "./data-table": "./src/components/ui/data-table/index.ts",
-        "./date-picker": "./src/components/ui/date-picker/index.ts",
-        "./date-time-picker": "./src/components/ui/date-time-picker/index.ts",
-        "./dialog": "./src/components/ui/dialog/index.ts",
-        "./dropdown-menu": "./src/components/ui/dropdown-menu/index.ts",
-        "./empty-state-card": "./src/components/empty-state-card/index.ts",
-        "./error-page": "./src/components/error-page/index.ts",
-        "./field": "./src/components/ui/field/index.ts",
-        "./file-dropzone": "./src/components/ui/file-dropzone/index.ts",
-        "./hover-card": "./src/components/ui/hover-card/index.ts",
-        "./info-card": "./src/components/info-card/index.ts",
-        "./input": "./src/components/ui/input/index.ts",
-        "./kbd": "./src/components/ui/kbd/index.ts",
-        "./label": "./src/components/ui/label/index.ts",
-        "./landing": "./src/components/landing/index.ts",
-        "./landing-content": "./src/components/landing/landing-content/index.ts",
-        "./landing-footer": "./src/components/landing/landing-footer/index.ts",
-        "./landing-navbar": "./src/components/landing/landing-navbar/index.ts",
-        "./landing-shell": "./src/components/landing/landing-shell/index.ts",
-        "./language-flag": "./src/components/language-flag/index.ts",
-        "./language-selector": "./src/components/language-selector/index.ts",
-        "./load-more-button": "./src/components/load-more-button/index.ts",
-        "./loading-state-card": "./src/components/loading-state-card/index.ts",
-        "./message-dialog": "./src/components/message-dialog/index.ts",
-        "./message-toast": "./src/components/message-toast/index.ts",
-        "./native-select": "./src/components/ui/native-select/index.ts",
-        "./number-field": "./src/components/ui/number-field/index.ts",
-        "./page-header": "./src/components/page-header/index.ts",
-        "./pagination": "./src/components/ui/pagination/index.ts",
-        "./pin-input": "./src/components/ui/pin-input/index.ts",
-        "./popover": "./src/components/ui/popover/index.ts",
-        "./progress": "./src/components/ui/progress/index.ts",
-        "./progress-component": "./src/components/progress-component/index.ts",
-        "./radio-group": "./src/components/ui/radio-group/index.ts",
-        "./scroll-area": "./src/components/ui/scroll-area/index.ts",
-        "./select": "./src/components/ui/select/index.ts",
-        "./separator": "./src/components/ui/separator/index.ts",
-        "./sheet": "./src/components/ui/sheet/index.ts",
-        "./sidebar": "./src/components/ui/sidebar/index.ts",
-        "./single-value-card": "./src/components/single-value-card/index.ts",
-        "./skeleton": "./src/components/ui/skeleton/index.ts",
-        "./slider": "./src/components/ui/slider/index.ts",
-        "./slider-form-component": "./src/components/slider-form-component/index.ts",
-        "./spinner": "./src/components/ui/spinner/index.ts",
-        "./stat-strip": "./src/components/stat-strip/index.ts",
-        "./stepper": "./src/components/ui/stepper/index.ts",
-        "./switch": "./src/components/ui/switch/index.ts",
-        "./switch-form-component": "./src/components/switch-form-component/index.ts",
-        "./table": "./src/components/ui/table/index.ts",
-        "./tabs": "./src/components/ui/tabs/index.ts",
-        "./tags-input": "./src/components/ui/tags-input/index.ts",
-        "./text-link": "./src/components/text-link/index.ts",
-        "./textarea": "./src/components/ui/textarea/index.ts",
-        "./theme-selector": "./src/components/theme-selector/index.ts",
-        "./time-picker": "./src/components/ui/time-picker/index.ts",
-        "./toggle-group": "./src/components/ui/toggle-group/index.ts",
-        "./tooltip": "./src/components/ui/tooltip/index.ts",
-        "./utils": "./src/lib/utils.ts"
-    },
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "scripts": {
-        "typecheck": "vue-tsc --noEmit",
-        "docs:components": "node scripts/generate-components-doc.mjs",
-        "docs:components:check": "node scripts/generate-components-doc.mjs --check",
-        "test": "npm --prefix demo-app run test"
-    },
-    "peerDependencies": {
-        "@hugeicons/core-free-icons": "^4.3.0",
-        "@hugeicons/vue": "^1.0.0",
-        "@nuxt/content": "^3.0.0",
-        "@nuxt/image": "^2.0.0",
-        "nuxt": "^4.0.0",
-        "tailwindcss": "^4.0.0",
-        "vue": "^3.5.0",
-        "vue-i18n": "^9.0.0 || ^10.0.0 || ^11.0.0"
-    },
-    "peerDependenciesMeta": {
-        "@nuxt/content": {
-            "optional": true
-        }
-    },
-    "dependencies": {
-        "@internationalized/date": "3.10.0",
-        "@nuxt/kit": "4.5.2",
-        "@vueuse/core": "14.2.1",
-        "class-variance-authority": "0.7.1",
-        "clsx": "2.1.1",
-        "reka-ui": "2.9.2",
-        "shiki": "4.4.3",
-        "tailwind-merge": "3.5.0"
-    },
-    "devDependencies": {
-        "@hugeicons/core-free-icons": "4.3.5",
-        "@hugeicons/vue": "1.0.8",
-        "nuxt": "4.5.2",
-        "tailwindcss": "4.2.4",
-        "typescript": "5.9.3",
-        "vue": "3.5.42",
-        "vue-i18n": "11.4.13",
-        "vue-tsc": "2.2.10"
-    },
-    "overrides": {
-        "archiver-utils": {
-            "glob": "13.0.6"
-        }
-    }
-}
+	"name": "@brumaombra/ui-vintage",
+	"version": "0.9.2",
+	"description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
+	"private": false,
+	"author": "Mauro Brambilla",
+	"license": "MIT",
+	"homepage": "https://github.com/brumaombra/ui-vintage#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/brumaombra/ui-vintage.git"
+	},
+	"bugs": {
+		"url": "https://github.com/brumaombra/ui-vintage/issues"
+	},
+	"keywords": [
+		"nuxt",
+		"nuxt4",
+		"nuxt-module",
+		"components",
+		"ui",
+		"shared-runtime",
+		"nuxt-image"
+	],
+	"type": "module",
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"module.mjs",
+		"COMPONENTS.md",
+		"AGENTS.md"
+	],
+	"exports": {
+		".": {
+			"import": "./module.mjs",
+			"default": "./module.mjs"
+		},
+		"./package.json": "./package.json",
+		"./style.css": "./src/styles.css",
+		"./accordion": "./src/components/ui/accordion/index.ts",
+		"./alert": "./src/components/ui/alert/index.ts",
+		"./alert-dialog": "./src/components/ui/alert-dialog/index.ts",
+		"./animated-number": "./src/components/ui/animated-number/index.ts",
+		"./avatar": "./src/components/ui/avatar/index.ts",
+		"./background-grid": "./src/components/background-grid/index.ts",
+		"./badge": "./src/components/ui/badge/index.ts",
+		"./blog": "./src/components/blog/index.ts",
+		"./breadcrumb": "./src/components/ui/breadcrumb/index.ts",
+		"./busy": "./src/components/ui/busy/index.ts",
+		"./busy-indicator": "./src/components/busy-indicator/index.ts",
+		"./button": "./src/components/ui/button/index.ts",
+		"./calendar": "./src/components/ui/calendar/index.ts",
+		"./card": "./src/components/ui/card/index.ts",
+		"./card-grid": "./src/components/card-grid/index.ts",
+		"./checkbox": "./src/components/ui/checkbox/index.ts",
+		"./chip": "./src/components/chip/index.ts",
+		"./collapsible": "./src/components/ui/collapsible/index.ts",
+		"./combobox": "./src/components/ui/combobox/index.ts",
+		"./command": "./src/components/ui/command/index.ts",
+		"./common-types": "./src/lib/common-types.ts",
+		"./confirm-dialog": "./src/components/confirm-dialog/index.ts",
+		"./cookie-consent": "./src/components/cookie-consent/index.ts",
+		"./content": "./src/components/content/index.ts",
+		"./dashboard-shell": "./src/components/dashboard-shell/index.ts",
+		"./data-list": "./src/components/data-list/index.ts",
+		"./data-table": "./src/components/ui/data-table/index.ts",
+		"./date-picker": "./src/components/ui/date-picker/index.ts",
+		"./date-time-picker": "./src/components/ui/date-time-picker/index.ts",
+		"./dialog": "./src/components/ui/dialog/index.ts",
+		"./dropdown-menu": "./src/components/ui/dropdown-menu/index.ts",
+		"./empty-state-card": "./src/components/empty-state-card/index.ts",
+		"./error-page": "./src/components/error-page/index.ts",
+		"./field": "./src/components/ui/field/index.ts",
+		"./file-dropzone": "./src/components/ui/file-dropzone/index.ts",
+		"./hover-card": "./src/components/ui/hover-card/index.ts",
+		"./info-card": "./src/components/info-card/index.ts",
+		"./input": "./src/components/ui/input/index.ts",
+		"./kbd": "./src/components/ui/kbd/index.ts",
+		"./label": "./src/components/ui/label/index.ts",
+		"./landing": "./src/components/landing/index.ts",
+		"./landing-content": "./src/components/landing/landing-content/index.ts",
+		"./landing-footer": "./src/components/landing/landing-footer/index.ts",
+		"./landing-navbar": "./src/components/landing/landing-navbar/index.ts",
+		"./landing-shell": "./src/components/landing/landing-shell/index.ts",
+		"./language-flag": "./src/components/language-flag/index.ts",
+		"./language-selector": "./src/components/language-selector/index.ts",
+		"./load-more-button": "./src/components/load-more-button/index.ts",
+		"./loading-state-card": "./src/components/loading-state-card/index.ts",
+		"./message-dialog": "./src/components/message-dialog/index.ts",
+		"./message-toast": "./src/components/message-toast/index.ts",
+		"./native-select": "./src/components/ui/native-select/index.ts",
+		"./number-field": "./src/components/ui/number-field/index.ts",
+		"./page-header": "./src/components/page-header/index.ts",
+		"./pagination": "./src/components/ui/pagination/index.ts",
+		"./pin-input": "./src/components/ui/pin-input/index.ts",
+		"./popover": "./src/components/ui/popover/index.ts",
+		"./progress": "./src/components/ui/progress/index.ts",
+		"./progress-component": "./src/components/progress-component/index.ts",
+		"./radio-group": "./src/components/ui/radio-group/index.ts",
+		"./scroll-area": "./src/components/ui/scroll-area/index.ts",
+		"./select": "./src/components/ui/select/index.ts",
+		"./separator": "./src/components/ui/separator/index.ts",
+		"./sheet": "./src/components/ui/sheet/index.ts",
+		"./sidebar": "./src/components/ui/sidebar/index.ts",
+		"./single-value-card": "./src/components/single-value-card/index.ts",
+		"./skeleton": "./src/components/ui/skeleton/index.ts",
+		"./slider": "./src/components/ui/slider/index.ts",
+		"./slider-form-component": "./src/components/slider-form-component/index.ts",
+		"./spinner": "./src/components/ui/spinner/index.ts",
+		"./stat-strip": "./src/components/stat-strip/index.ts",
+		"./stepper": "./src/components/ui/stepper/index.ts",
+		"./switch": "./src/components/ui/switch/index.ts",
+		"./switch-form-component": "./src/components/switch-form-component/index.ts",
+		"./table": "./src/components/ui/table/index.ts",
+		"./tabs": "./src/components/ui/tabs/index.ts",
+		"./tags-input": "./src/components/ui/tags-input/index.ts",
+		"./text-link": "./src/components/text-link/index.ts",
+		"./textarea": "./src/components/ui/textarea/index.ts",
+		"./theme-selector": "./src/components/theme-selector/index.ts",
+		"./time-picker": "./src/components/ui/time-picker/index.ts",
+		"./toggle-group": "./src/components/ui/toggle-group/index.ts",
+		"./tooltip": "./src/components/ui/tooltip/index.ts",
+		"./utils": "./src/lib/utils.ts"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"scripts": {
+		"typecheck": "vue-tsc --noEmit",
+		"docs:components": "node scripts/generate-components-doc.mjs",
+		"docs:components:check": "node scripts/generate-components-doc.mjs --check",
+		"test": "npm --prefix demo-app run test"
+	},
+	"peerDependencies": {
+		"@hugeicons/core-free-icons": "^4.3.0",
+		"@hugeicons/vue": "^1.0.0",
+		"@nuxt/content": "^3.0.0",
+		"@nuxt/image": "^2.0.0",
+		"nuxt": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"vue": "^3.5.0",
+		"vue-i18n": "^9.0.0 || ^10.0.0 || ^11.0.0"
+	},
+	"peerDependenciesMeta": {
+		"@nuxt/content": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"@internationalized/date": "3.10.0",
+		"@nuxt/kit": "4.5.2",
+		"@vueuse/core": "14.2.1",
+		"class-variance-authority": "0.7.1",
+		"clsx": "2.1.1",
+		"reka-ui": "2.9.2",
+		"shiki": "4.4.3",
+		"tailwind-merge": "3.5.0"
+	},
+	"devDependencies": {
+		"@hugeicons/core-free-icons": "4.3.5",
+		"@hugeicons/vue": "1.0.8",
+		"nuxt": "4.5.2",
+		"tailwindcss": "4.2.4",
+		"typescript": "5.9.3",
+		"vue": "3.5.42",
+		"vue-i18n": "11.4.13",
+		"vue-tsc": "2.2.10"
+	},
+	"overrides": {
+		"archiver-utils": {
+			"glob": "13.0.6"
+		}
+	}
+}

package/src/components/background-grid/BackgroundGrid.vue

@@ -3,12 +3,12 @@ import type { HTMLAttributes } from 'vue';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div :class="['pointer-events-none absolute inset-0 z-0 overflow-hidden', props.class]">
-        <div class="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[20px_20px] dark:bg-[linear-gradient(to_right,#ffffff0d_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0d_1px,transparent_1px)]" />
-    </div>
+	<div :class="['pointer-events-none absolute inset-0 z-0 overflow-hidden', props.class]">
+		<div class="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[20px_20px] dark:bg-[linear-gradient(to_right,#ffffff0d_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0d_1px,transparent_1px)]" />
+	</div>
 </template>

package/src/components/blog/AllPostsSection.vue

@@ -8,38 +8,38 @@ const { t } = useI18n();
 
 // Props
 const props = withDefaults(defineProps<{
-    posts?: Array<{
-        path: string;
-        title: string;
-        description?: string;
-        image?: string;
-        categoryText?: string;
-        categoryPath?: string;
-    }>;
-    currentPage?: number;
-    postsPerPage?: number;
-    totalPosts?: number;
-    hasMorePosts?: boolean;
-    isLoading?: boolean;
+	posts?: Array<{
+		path: string;
+		title: string;
+		description?: string;
+		image?: string;
+		categoryText?: string;
+		categoryPath?: string;
+	}>;
+	currentPage?: number;
+	postsPerPage?: number;
+	totalPosts?: number;
+	hasMorePosts?: boolean;
+	isLoading?: boolean;
 }>(), {
-    posts: () => [],
-    currentPage: 1,
-    postsPerPage: 9,
-    totalPosts: 0,
-    hasMorePosts: false,
-    isLoading: false
+	posts: () => [],
+	currentPage: 1,
+	postsPerPage: 9,
+	totalPosts: 0,
+	hasMorePosts: false,
+	isLoading: false
 });
 
 // Emits
 const emits = defineEmits<{
-    'load-more': [];
+	'load-more': [];
 }>();
 
 // Handle load more posts
 const handleLoadMorePosts = () => {
-    if (!props.isLoading) {
-        emits('load-more');
-    }
+	if (!props.isLoading) {
+		emits('load-more');
+	}
 };
 
 // Number of currently visible posts
@@ -47,15 +47,15 @@ const visiblePostsCount = computed(() => Math.min(props.posts.length, props.tota
 </script>
 
 <template>
-    <div>
-        <!-- Blog posts grid -->
-        <PostsList :posts="props.posts" />
+	<div>
+		<!-- Blog posts grid -->
+		<PostsList :posts="props.posts" />
 
-        <!-- Load more button -->
-        <LoadMoreButton v-if="props.hasMorePosts"
-            :busy="props.isLoading"
-            :text="t('uiVintage.blog.loadMoreWithNumbers', { current: visiblePostsCount, total: props.totalPosts })"
-            @load-more="handleLoadMorePosts"
-            class="mt-8" />
-    </div>
+		<!-- Load more button -->
+		<LoadMoreButton v-if="props.hasMorePosts"
+			:busy="props.isLoading"
+			:text="t('uiVintage.blog.loadMoreWithNumbers', { current: visiblePostsCount, total: props.totalPosts })"
+			@load-more="handleLoadMorePosts"
+			class="mt-8" />
+	</div>
 </template>