@brumaombra/ui-vintage 0.6.7 → 0.7.1

package/README.md

@@ -1,75 +1,85 @@
-<div align="center">
+# UI Vintage
 
-# 🎛️ UI Vintage
+`@brumaombra/ui-vintage` is a source-published Nuxt runtime package. Instead of building a separate component library output, it ships the actual `src` files and lets the consuming Nuxt app compile them as part of its own runtime.
 
-### Reusable Vue 3 UI components with dedicated imports and shared theme tokens.
+## Features
 
-`@brumaombra/ui-vintage` is a Vue 3 component library built with Vite and TypeScript.
+- Nuxt module entrypoint for stylesheet, i18n, and Nuxt runtime integration
+- automatic stylesheet injection from `src/styles.css`
+- explicit source-based subpath imports for components and helpers
+- built-in locale merge for the library messages when `vue-i18n` is present
+- real Nuxt integrations, including `@nuxt/image` components inside the shared source
 
-<p>
-	<a href="https://github.com/brumaombra/ui-vintage"><img alt="GitHub Repo" src="https://img.shields.io/badge/github-brumaombra%2Fui--vintage-111111?logo=github"></a>
-	<a href="https://www.npmjs.com/package/%40brumaombra%2Fui-vintage"><img alt="npm" src="https://img.shields.io/npm/v/%40brumaombra%2Fui-vintage?logo=npm&color=CB3837"></a>
-	<img alt="Vue 3.5" src="https://img.shields.io/badge/vue-3.5-42B883?logo=vue.js&logoColor=white">
-	<img alt="License MIT" src="https://img.shields.io/badge/license-MIT-2563EB">
-</p>
+## Nuxt Only
 
-<p>
-	🧩 UI primitives • 🎭 dialogs and overlays • 🧱 dashboard helpers • 🎨 shared styles
-</p>
+This package is intentionally Nuxt-specific. The shared components use Nuxt runtime features such as `#components`, `NuxtImg`, and module-driven app integration. If you need framework-agnostic Vue components, this package is the wrong shape.
 
-<p>
-	<a href="#features"><strong>Features</strong></a> •
-	<a href="#install"><strong>Install</strong></a> •
-	<a href="#usage"><strong>Usage</strong></a> •
-	<a href="#license"><strong>License</strong></a>
-</p>
+## Install
 
-</div>
+```bash
+npm install @brumaombra/ui-vintage @nuxt/image vue-i18n
+```
 
-<a id="features"></a>
-## ✨ Features
+Register the module in your Nuxt app:
 
-- Vue 3 components for common app interfaces
-- dedicated subpath imports such as `@brumaombra/ui-vintage/button`
-- shared stylesheet at `@brumaombra/ui-vintage/style.css`
-- higher-level helpers like `DashboardShell`, `showConfirmDialog`, `showMessageDialog`, and `setBusy`
+```ts
+export default defineNuxtConfig({
+    modules: ['@brumaombra/ui-vintage']
+})
+```
 
-<a id="install"></a>
-## 📦 Install
+The module only handles shared runtime integration: styles, library locale messages, source transpilation, and `@nuxt/image` installation when needed. Components and helpers are always imported explicitly.
 
-```bash
-npm install @brumaombra/ui-vintage
-```
+## Usage
 
-<a id="usage"></a>
-## 🚀 Usage
+Once the module is installed:
 
-Import the shared stylesheet once in your app:
+- the shared stylesheet is injected automatically
+- components are imported from explicit subpaths such as `@brumaombra/ui-vintage/button`
+- helpers are imported from explicit subpaths such as `@brumaombra/ui-vintage/message-dialog`
 
-```ts
-import "@brumaombra/ui-vintage/style.css";
-```
+Example:
 
-Import each component from its dedicated entrypoint:
+```vue
+<script setup lang="ts">
+import { Button } from '@brumaombra/ui-vintage/button'
+import { Card, CardContent } from '@brumaombra/ui-vintage/card'
+</script>
 
-```ts
-import { Button } from "@brumaombra/ui-vintage/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@brumaombra/ui-vintage/card";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@brumaombra/ui-vintage/dialog";
+<template>
+    <Button>Save</Button>
+    <Card>
+        <CardContent>Reusable content</CardContent>
+    </Card>
+</template>
 ```
 
-Import helpers and higher-level components from their own paths:
-
 ```ts
-import { DashboardShell } from "@brumaombra/ui-vintage/dashboard-shell";
-import { setBusy } from "@brumaombra/ui-vintage/busy-indicator";
-import { showConfirmDialog } from "@brumaombra/ui-vintage/confirm-dialog";
-import { showMessageDialog } from "@brumaombra/ui-vintage/message-dialog";
+import { setBusy } from '@brumaombra/ui-vintage/busy-indicator'
+import { showConfirmDialog } from '@brumaombra/ui-vintage/confirm-dialog'
+
+await showConfirmDialog({
+    title: 'Delete item?',
+    description: 'This action cannot be undone.'
+})
+
+setBusy({
+    title: 'Loading data',
+    description: 'Please wait while the dashboard refreshes.'
+})
 ```
 
-There is no global barrel export. Use the dedicated subpath entrypoints for each component or helper.
+## Publish Model
+
+The npm package publishes `module.mjs` and `src/` directly. There is no required `dist` build step for publishing anymore.
+
+## Requirements
+
+- Nuxt 4
+- `@nuxt/image`
+- Vue 3
+- `vue-i18n`
 
-<a id="license"></a>
-## ⚖️ License
+## License
 
 MIT

package/module.mjs

@@ -0,0 +1,75 @@
+import { createRequire } from 'node:module';
+import { resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const moduleRequire = createRequire(import.meta.url);
+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 { }
+
+        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 { }
+    }
+
+    // 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, installModule } = await loadNuxtKit();
+const resolver = createResolver(import.meta.url);
+const sourceRoot = resolver.resolve('src');
+const stylesPath = resolver.resolve('src/styles.css');
+
+// Check whether the consuming app already has a specific module installed
+const hasModuleInstalled = (modules, moduleName) => {
+    return modules.some((entry) => {
+        if (typeof entry === 'string') return entry === moduleName;
+        if (Array.isArray(entry)) return entry[0] === moduleName;
+        return false;
+    });
+};
+
+export default defineNuxtModule({
+    // Module meta information
+    meta: {
+        name: '@brumaombra/ui-vintage',
+        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);
+        }
+
+        // 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 (!hasModuleInstalled(nuxt.options.modules, '@nuxt/image')) {
+            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.js')
+        });
+    }
+});

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.6.7",
-    "description": "Vue 3 component library with shadcn-style primitives, app shells, dialogs, and shared theme tokens.",
+    "version": "0.7.1",
+    "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
     "license": "MIT",
@@ -14,282 +14,103 @@
         "url": "https://github.com/brumaombra/ui-vintage/issues"
     },
     "keywords": [
-        "vue",
-        "vue3",
-        "components",
-        "component-library",
-        "vite",
-        "typescript",
-        "shadcn-vue",
         "nuxt",
-        "ui"
+        "nuxt4",
+        "nuxt-module",
+        "components",
+        "ui",
+        "shared-runtime",
+        "nuxt-image"
     ],
     "type": "module",
     "publishConfig": {
         "access": "public"
     },
     "files": [
-        "dist"
+        "src",
+        "module.mjs"
     ],
     "exports": {
-        "./alert": {
-            "types": "./dist/components/ui/alert/index.d.ts",
-            "import": "./dist/alert.js"
-        },
-        "./alert-dialog": {
-            "types": "./dist/components/ui/alert-dialog/index.d.ts",
-            "import": "./dist/alert-dialog.js"
-        },
-        "./background-grid": {
-            "types": "./dist/components/background-grid/index.d.ts",
-            "import": "./dist/background-grid.js"
-        },
-        "./badge": {
-            "types": "./dist/components/ui/badge/index.d.ts",
-            "import": "./dist/badge.js"
-        },
-        "./busy": {
-            "types": "./dist/components/ui/busy/index.d.ts",
-            "import": "./dist/busy.js"
-        },
-        "./busy-indicator": {
-            "types": "./dist/components/busy-indicator/index.d.ts",
-            "import": "./dist/busy-indicator.js"
-        },
-        "./button": {
-            "types": "./dist/components/ui/button/index.d.ts",
-            "import": "./dist/button.js"
-        },
-        "./breadcrumb": {
-            "types": "./dist/components/ui/breadcrumb/index.d.ts",
-            "import": "./dist/breadcrumb.js"
-        },
-        "./calendar": {
-            "types": "./dist/components/ui/calendar/index.d.ts",
-            "import": "./dist/calendar.js"
-        },
-        "./card": {
-            "types": "./dist/components/ui/card/index.d.ts",
-            "import": "./dist/card.js"
-        },
-        "./chip": {
-            "types": "./dist/components/chip/index.d.ts",
-            "import": "./dist/chip.js"
-        },
-        "./command": {
-            "types": "./dist/components/ui/command/index.d.ts",
-            "import": "./dist/command.js"
-        },
-        "./date-picker": {
-            "types": "./dist/components/ui/date-picker/index.d.ts",
-            "import": "./dist/date-picker.js"
-        },
-        "./data-list": {
-            "types": "./dist/components/data-list/index.d.ts",
-            "import": "./dist/data-list.js"
-        },
-        "./date-time-picker": {
-            "types": "./dist/components/ui/date-time-picker/index.d.ts",
-            "import": "./dist/date-time-picker.js"
-        },
-        "./dashboard-shell": {
-            "types": "./dist/components/dashboard-shell/index.d.ts",
-            "import": "./dist/dashboard-shell.js"
-        },
-        "./error-page": {
-            "types": "./dist/components/error-page/index.d.ts",
-            "import": "./dist/error-page.js"
-        },
-        "./dialog": {
-            "types": "./dist/components/ui/dialog/index.d.ts",
-            "import": "./dist/dialog.js"
-        },
-        "./card-grid": {
-            "types": "./dist/components/card-grid/index.d.ts",
-            "import": "./dist/card-grid.js"
-        },
-        "./empty-state-card": {
-            "types": "./dist/components/empty-state-card/index.d.ts",
-            "import": "./dist/empty-state-card.js"
-        },
-        "./confirm-dialog": {
-            "types": "./dist/components/confirm-dialog/index.d.ts",
-            "import": "./dist/confirm-dialog.js"
-        },
-        "./message-dialog": {
-            "types": "./dist/components/message-dialog/index.d.ts",
-            "import": "./dist/message-dialog.js"
-        },
-        "./message-toast": {
-            "types": "./dist/components/message-toast/index.d.ts",
-            "import": "./dist/message-toast.js"
-        },
-        "./native-select": {
-            "types": "./dist/components/ui/native-select/index.d.ts",
-            "import": "./dist/native-select.js"
-        },
-        "./field": {
-            "types": "./dist/components/ui/field/index.d.ts",
-            "import": "./dist/field.js"
-        },
-        "./input": {
-            "types": "./dist/components/ui/input/index.d.ts",
-            "import": "./dist/input.js"
-        },
-        "./info-card": {
-            "types": "./dist/components/info-card/index.d.ts",
-            "import": "./dist/info-card.js"
-        },
-        "./label": {
-            "types": "./dist/components/ui/label/index.d.ts",
-            "import": "./dist/label.js"
-        },
-        "./i18n": {
-            "types": "./dist/lib/i18n.d.ts",
-            "import": "./dist/i18n.js"
-        },
-        "./language-flag": {
-            "types": "./dist/components/language-flag/index.d.ts",
-            "import": "./dist/language-flag.js"
-        },
-        "./language-selector": {
-            "types": "./dist/components/language-selector/index.d.ts",
-            "import": "./dist/language-selector.js"
-        },
-        "./load-more-button": {
-            "types": "./dist/components/load-more-button/index.d.ts",
-            "import": "./dist/load-more-button.js"
-        },
-        "./loading-state-card": {
-            "types": "./dist/components/loading-state-card/index.d.ts",
-            "import": "./dist/loading-state-card.js"
-        },
-        "./landing": {
-            "types": "./dist/components/landing/index.d.ts",
-            "import": "./dist/landing.js"
-        },
-        "./landing-content": {
-            "types": "./dist/components/landing/landing-content/index.d.ts",
-            "import": "./dist/landing-content.js"
-        },
-        "./landing-footer": {
-            "types": "./dist/components/landing/landing-footer/index.d.ts",
-            "import": "./dist/landing-footer.js"
-        },
-        "./landing-navbar": {
-            "types": "./dist/components/landing/landing-navbar/index.d.ts",
-            "import": "./dist/landing-navbar.js"
-        },
-        "./landing-shell": {
-            "types": "./dist/components/landing/landing-shell/index.d.ts",
-            "import": "./dist/landing-shell.js"
-        },
-        "./popover": {
-            "types": "./dist/components/ui/popover/index.d.ts",
-            "import": "./dist/popover.js"
-        },
-        "./progress": {
-            "types": "./dist/components/ui/progress/index.d.ts",
-            "import": "./dist/progress.js"
-        },
-        "./progress-component": {
-            "types": "./dist/components/progress-component/index.d.ts",
-            "import": "./dist/progress-component.js"
-        },
-        "./page-header": {
-            "types": "./dist/components/page-header/index.d.ts",
-            "import": "./dist/page-header.js"
-        },
-        "./select": {
-            "types": "./dist/components/ui/select/index.d.ts",
-            "import": "./dist/select.js"
-        },
-        "./scroll-area": {
-            "types": "./dist/components/ui/scroll-area/index.d.ts",
-            "import": "./dist/scroll-area.js"
-        },
-        "./separator": {
-            "types": "./dist/components/ui/separator/index.d.ts",
-            "import": "./dist/separator.js"
-        },
-        "./single-value-card": {
-            "types": "./dist/components/single-value-card/index.d.ts",
-            "import": "./dist/single-value-card.js"
-        },
-        "./sheet": {
-            "types": "./dist/components/ui/sheet/index.d.ts",
-            "import": "./dist/sheet.js"
-        },
-        "./sidebar": {
-            "types": "./dist/components/ui/sidebar/index.d.ts",
-            "import": "./dist/sidebar.js"
-        },
-        "./skeleton": {
-            "types": "./dist/components/ui/skeleton/index.d.ts",
-            "import": "./dist/skeleton.js"
-        },
-        "./slider": {
-            "types": "./dist/components/ui/slider/index.d.ts",
-            "import": "./dist/slider.js"
-        },
-        "./slider-form-component": {
-            "types": "./dist/components/slider-form-component/index.d.ts",
-            "import": "./dist/slider-form-component.js"
-        },
-        "./switch": {
-            "types": "./dist/components/ui/switch/index.d.ts",
-            "import": "./dist/switch.js"
-        },
-        "./switch-form-component": {
-            "types": "./dist/components/switch-form-component/index.d.ts",
-            "import": "./dist/switch-form-component.js"
-        },
-        "./tabs": {
-            "types": "./dist/components/ui/tabs/index.d.ts",
-            "import": "./dist/tabs.js"
-        },
-        "./table": {
-            "types": "./dist/components/ui/table/index.d.ts",
-            "import": "./dist/table.js"
-        },
-        "./text-link": {
-            "types": "./dist/components/text-link/index.d.ts",
-            "import": "./dist/text-link.js"
-        },
-        "./textarea": {
-            "types": "./dist/components/ui/textarea/index.d.ts",
-            "import": "./dist/textarea.js"
-        },
-        "./theme-selector": {
-            "types": "./dist/components/theme-selector/index.d.ts",
-            "import": "./dist/theme-selector.js"
-        },
-        "./time-picker": {
-            "types": "./dist/components/ui/time-picker/index.d.ts",
-            "import": "./dist/time-picker.js"
-        },
-        "./tooltip": {
-            "types": "./dist/components/ui/tooltip/index.d.ts",
-            "import": "./dist/tooltip.js"
-        },
-        "./utils": {
-            "types": "./dist/lib/utils.d.ts",
-            "import": "./dist/utils.js"
-        },
-        "./style.css": "./dist/style.css"
+        ".": {
+            "import": "./module.mjs"
+        },
+        "./alert": "./src/components/ui/alert/index.ts",
+        "./alert-dialog": "./src/components/ui/alert-dialog/index.ts",
+        "./background-grid": "./src/components/background-grid/index.ts",
+        "./badge": "./src/components/ui/badge/index.ts",
+        "./blog": "./src/components/blog/index.ts",
+        "./busy": "./src/components/ui/busy/index.ts",
+        "./busy-indicator": "./src/components/busy-indicator/index.ts",
+        "./breadcrumb": "./src/components/ui/breadcrumb/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",
+        "./chip": "./src/components/chip/index.ts",
+        "./command": "./src/components/ui/command/index.ts",
+        "./confirm-dialog": "./src/components/confirm-dialog/index.ts",
+        "./content": "./src/components/content/index.ts",
+        "./dashboard-shell": "./src/components/dashboard-shell/index.ts",
+        "./data-list": "./src/components/data-list/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",
+        "./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",
+        "./info-card": "./src/components/info-card/index.ts",
+        "./input": "./src/components/ui/input/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",
+        "./page-header": "./src/components/page-header/index.ts",
+        "./popover": "./src/components/ui/popover/index.ts",
+        "./progress": "./src/components/ui/progress/index.ts",
+        "./progress-component": "./src/components/progress-component/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",
+        "./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",
+        "./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",
+        "./tooltip": "./src/components/ui/tooltip/index.ts",
+        "./utils": "./src/lib/utils.ts"
     },
     "sideEffects": [
         "**/*.css"
     ],
     "scripts": {
-        "build": "vue-tsc --noEmit && vite build",
         "typecheck": "vue-tsc --noEmit"
     },
     "peerDependencies": {
+        "@nuxt/image": "^2.0.0",
+        "nuxt": "^4.0.0",
         "vue": "^3.5.0",
         "vue-i18n": "^9.0.0 || ^10.0.0"
     },
     "dependencies": {
+        "@nuxt/kit": "^4.4.4",
         "@hugeicons/core-free-icons": "4.1.1",
         "@hugeicons/vue": "1.0.5",
         "@internationalized/date": "3.10.0",
@@ -297,17 +118,13 @@
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "reka-ui": "2.9.2",
-        "tailwind-merge": "3.5.0"
+        "tailwind-merge": "3.5.0",
+        "tailwindcss": "4.1.3",
+        "tw-animate-css": "1.4.0"
     },
     "devDependencies": {
-        "@tailwindcss/vite": "4.2.2",
         "@types/node": "24.0.0",
-        "@vitejs/plugin-vue": "5.2.4",
-        "tailwindcss": "4.1.3",
-        "tw-animate-css": "1.4.0",
         "typescript": "5.9.3",
-        "vite": "5.4.18",
-        "vite-plugin-dts": "4.5.4",
         "vue": "3.5.13",
         "vue-tsc": "2.2.10"
     }

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

@@ -0,0 +1,5 @@
+<template>
+    <div class="pointer-events-none absolute inset-0 z-0 overflow-hidden">
+        <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/background-grid/index.ts

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