@maz-ui/nuxt 4.0.0-beta.9 → 4.0.1

package/README.md

@@ -16,20 +16,20 @@ Transform your Nuxt application with **Maz-UI** - a comprehensive Vue.js compone
 [![npm version](https://badge.fury.io/js/%40maz-ui%2Fnuxt.svg)](https://badge.fury.io/js/%40maz-ui%2Fnuxt)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
 
-## 🎯 What is Maz-UI?
+## What is Maz-UI?
 
 **Maz-UI** is a powerful Vue.js component library with **50+ beautiful components**, **20+ useful composables**, and **smart directives** that work perfectly with Nuxt. Think of it as your design system in a box!
 
-### 🌟 Why Choose Maz-UI for Your Nuxt App?
+### Why Choose Maz-UI for Your Nuxt App?
 
-- **🚀 Zero Configuration** - Works instantly with sensible defaults
-- **🎨 Beautiful by Default** - Professional design with dark mode included
-- **📦 Everything Auto-Imported** - No more import statements needed
-- **⚡ Super Fast** - Optimized for performance with tree-shaking
-- **🛠️ Developer Friendly** - TypeScript support and great DevTools
-- **🎯 Production Ready** - Perfect SSR/SSG support
+- **Zero Configuration** - Works instantly with sensible defaults
+- **Beautiful by Default** - Professional design with dark mode included
+- **Everything Auto-Imported** - No more import statements needed
+- **Super Fast** - Optimized for performance with tree-shaking
+- **Developer Friendly** - TypeScript support and great DevTools
+- **Production Ready** - Perfect SSR/SSG support
 
-## 🚀 Quick Start (2 minutes!)
+## Quick Start (2 minutes!)
 
 ### Step 1: Install the module
 
@@ -87,9 +87,9 @@ function showMessage() {
 </template>
 ```
 
-## 🎨 What You Get Out of the Box
+## What You Get Out of the Box
 
-### 🧩 50+ Beautiful Components
+### 50+ Beautiful Components
 
 - **Buttons**: `MazBtn`,
 - **Forms**: `MazInput`, `MazSelect`, `MazCheckbox`, `MazRadio`, `MazTextarea`, `MazInputPhoneNumber`
@@ -101,7 +101,7 @@ function showMessage() {
 - **Charts**: `MazChart` (with Chart.js integration)
 - **And 30+ more!**
 
-### 🎪 20+ Powerful Composables
+### 20+ Powerful Composables
 
 - **`useTheme()`** - Theme management and dark mode
 - **`useToast()`** - Beautiful toast notifications
@@ -112,7 +112,7 @@ function showMessage() {
 - **`useBreakpoints()`** - Responsive design helpers
 - **And many more!**
 
-### 🎯 Smart Directives
+### Smart Directives
 
 - **`v-tooltip`** - Beautiful tooltips anywhere
 - **`v-lazy-img`** - Lazy load images automatically
@@ -120,7 +120,7 @@ function showMessage() {
 - **`v-click-outside`** - Detect outside clicks
 - **`v-fullscreen-img`** - Fullscreen image viewer
 
-## 🌈 Theming Made Simple
+## Theming Made Simple
 
 Maz-UI comes with a powerful theming system that makes your app look professional instantly:
 
@@ -150,51 +150,39 @@ async function changeToOceanTheme() {
 
 **Built-in themes**: `mazUi`, `ocean`, `pristine`, `obsidian` + create your own!
 
-## ⚙️ Configuration Options
-
-### Minimal Setup (Recommended)
-
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['@maz-ui/nuxt'],
-  // That's all you need! 🎉
-})
-```
-
-### Full Configuration Example
+## Configuration Options
 
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
   modules: ['@maz-ui/nuxt'],
   mazUi: {
-    // 🎛️ General Settings
+    // General Settings
     general: {
       autoImportPrefix: 'Maz', // useMazToast instead of useToast
       defaultMazIconPath: '/icons', // Path to your SVG icons
       devtools: true, // Enable DevTools integration
     },
 
-    // 🎨 Theme System
+    // Theme System
     theme: {
       preset: 'ocean', // Choose: 'mazUi', 'ocean', 'pristine', 'obsidian'
       strategy: 'hybrid', // 'runtime' | 'buildtime' | 'hybrid'
       darkModeStrategy: 'class', // 'class' | 'media' | 'auto'
     },
 
-    // 🌐 Translations
+    // Translations
     translations: {
       locale: 'fr', // Default language
       fallbackLocale: 'en',
     },
 
-    // 🧩 Components (all enabled by default)
+    // Components (all enabled by default)
     components: {
       autoImport: true, // Auto-import all components globally
     },
 
-    // 🎪 Composables (customize what you need)
+    // Composables (customize what you need)
     composables: {
       useTheme: true,
       useToast: true,
@@ -206,7 +194,7 @@ export default defineNuxtConfig({
       // ... all others enabled by default
     },
 
-    // 🎯 Directives
+    // Directives
     directives: {
       vTooltip: true,
       vLazyImg: { threshold: 0.1 }, // Custom intersection threshold
@@ -218,7 +206,7 @@ export default defineNuxtConfig({
 })
 ```
 
-## 🛠️ Advanced Features
+## Advanced Features
 
 ### Custom Theme Creation
 
@@ -252,7 +240,7 @@ export default defineNuxtConfig({
 })
 ```
 
-## 📱 SSR/SSG Support
+## SSR/SSG Support
 
 This module is built specifically for Nuxt with perfect SSR and SSG support:
 
@@ -262,7 +250,7 @@ This module is built specifically for Nuxt with perfect SSR and SSG support:
 - ✅ **Theme Persistence** - Dark mode preference remembered
 - ✅ **No FOUC** - Flash of unstyled content prevented
 
-## 🎯 Why This Module vs Manual Setup?
+## Why This Module vs Manual Setup?
 
 | Feature          | Manual Setup          | @maz-ui/nuxt Module           |
 | ---------------- | --------------------- | ----------------------------- |
@@ -274,17 +262,17 @@ This module is built specifically for Nuxt with perfect SSR and SSG support:
 | **DevTools**     | No integration        | ✅ Nuxt DevTools support      |
 | **TypeScript**   | Manual type setup     | ✅ Perfect TypeScript support |
 
-## 📚 Learn More
+## Learn More
 
-- 📖 **[Full Documentation](https://maz-ui.com/guide/nuxt)**
-- 🐛 **[Report Issues](https://github.com/LouisMazel/maz-ui/issues)**
-- 💬 **[Discussions](https://github.com/LouisMazel/maz-ui/discussions)**
+- **[Full Documentation](https://maz-ui.com/guide/nuxt)**
+- **[Report Issues](https://github.com/LouisMazel/maz-ui/issues)**
+- **[Discussions](https://github.com/LouisMazel/maz-ui/discussions)**
 
-## 🤝 Contributing
+## Contributing
 
 We love contributions! Check out our [Contributing Guide](https://github.com/LouisMazel/maz-ui/blob/main/CONTRIBUTING.md).
 
-## 📄 License
+## License
 
 MIT License © 2025 [LouisMazel](https://github.com/LouisMazel)
 

package/dist/module.d.mts

@@ -1,6 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { MazUiThemeOptions } from '@maz-ui/themes';
-import { MazTranslationsOptions } from '@maz-ui/translations';
+import { MazUiThemeOptions, ThemePreset, ThemePresetName } from '@maz-ui/themes';
+import { MazUiTranslationsOptions } from '@maz-ui/translations';
 import { VLazyImgOptions, VFullscreenImgOptions, VTooltipOptions } from 'maz-ui/directives';
 import { AosOptions, DialogOptions, ToastOptions } from 'maz-ui/plugins';
 
@@ -10,7 +10,7 @@ interface MazUiNuxtThemeOptions extends MazUiThemeOptions {
      * @description Inject full CSS on server-side to prevent FOUC on client-side
      * @default true
      */
-    injectFullCSSOnServer?: boolean;
+    injectAllCSSOnServer?: boolean;
 }
 interface MazUiNuxtOptions {
     /**
@@ -49,7 +49,9 @@ interface MazUiNuxtOptions {
      *   colorMode: 'auto',
      * }
      */
-    theme?: MazUiNuxtThemeOptions;
+    theme?: Omit<MazUiNuxtThemeOptions, 'preset'> & {
+        preset?: ThemePreset | ThemePresetName;
+    };
     /**
      * Translations configuration
      * @description If false, the translations system will be completely disabled
@@ -57,7 +59,7 @@ interface MazUiNuxtOptions {
      *   locale: 'en',
      * }
      */
-    translations?: MazTranslationsOptions;
+    translations?: MazUiTranslationsOptions;
     /**
      * CSS and styles configuration
      */

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "4.0.0-beta.9",
+  "version": "4.0.1",
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
-    "unbuild": "3.5.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -80,6 +80,7 @@ const mazUiComposables = {
   useDisplayNames: true,
   useFreezeValue: true,
   useInjectStrict: true,
+  useDropzone: true,
   useInstanceUniqId: true,
   useMountComponent: true,
   useSwipe: true
@@ -97,7 +98,8 @@ const defaults = {
     preset: "maz-ui",
     strategy: "hybrid",
     darkModeStrategy: "class",
-    colorMode: "auto"
+    colorMode: "auto",
+    mode: "both"
   },
   translations: {
     locale: "en",
@@ -133,7 +135,6 @@ function addMazUiComposableImport({
   addImports({
     from,
     name,
-    typeFrom: "maz-ui/dist/types/composables/index.d.ts",
     as: `use${capitalize(prefix)}${name.replace("use", "")}`
   });
 }
@@ -149,11 +150,7 @@ const module = defineNuxtModule({
   /* eslint-disable complexity, sonarjs/cognitive-complexity */
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    nuxt.options.build.transpile = [
-      "maz-ui",
-      "@maz-ui/themes",
-      ...nuxt.options.build.transpile
-    ];
+    nuxt.options.build.transpile.push("maz-ui", "@maz-ui/themes", "@maz-ui/translations");
     const moduleOptions = defu(
       nuxt.options.runtimeConfig.public.mazUi,
       options,
@@ -176,10 +173,10 @@ const module = defineNuxtModule({
     const autoImportPrefix = moduleOptions.general.autoImportPrefix;
     if (moduleOptions.plugins.aos) {
       addPlugin(resolve(_dirname, "./runtime/plugins/aos"));
-      addMazUiComposableImport({
+      addImports({
         name: "useAos",
         from: resolve(_dirname, "./runtime/composables/useAos"),
-        prefix: autoImportPrefix
+        as: `use${capitalize(autoImportPrefix)}Aos`
       });
       const injectAosCSS = typeof moduleOptions.plugins.aos === "object" && typeof moduleOptions.plugins.aos.injectCss === "boolean" ? moduleOptions.plugins.aos.injectCss : true;
       if (injectAosCSS) {
@@ -188,26 +185,26 @@ const module = defineNuxtModule({
     }
     if (moduleOptions.plugins.toast) {
       addPlugin(resolve(_dirname, "./runtime/plugins/toast"));
-      addMazUiComposableImport({
+      addImports({
         name: "useToast",
         from: resolve(_dirname, "./runtime/composables/useToast"),
-        prefix: autoImportPrefix
+        as: `use${capitalize(autoImportPrefix)}Toast`
       });
     }
     if (moduleOptions.plugins.dialog) {
       addPlugin(resolve(_dirname, "./runtime/plugins/dialog"));
-      addMazUiComposableImport({
+      addImports({
         name: "useDialog",
         from: resolve(_dirname, "./runtime/composables/useDialog"),
-        prefix: autoImportPrefix
+        as: `use${capitalize(autoImportPrefix)}Dialog`
       });
     }
     if (moduleOptions.plugins.wait) {
       addPlugin(resolve(_dirname, "./runtime/plugins/wait"));
-      addMazUiComposableImport({
+      addImports({
         name: "useWait",
         from: resolve(_dirname, "./runtime/composables/useWait"),
-        prefix: autoImportPrefix
+        as: `use${capitalize(autoImportPrefix)}Wait`
       });
     }
     if (moduleOptions.directives.vZoomImg) {
@@ -229,7 +226,7 @@ const module = defineNuxtModule({
     for (const composable of allowedMazUiComposables) {
       addMazUiComposableImport({
         name: composable,
-        from: `maz-ui/composables`,
+        from: `maz-ui/composables/${composable}`,
         prefix: autoImportPrefix
       });
     }

package/dist/runtime/plugins/theme.js

@@ -1,12 +1,10 @@
-import {
-  generateFullCSS,
-  mergePresets
-} from "@maz-ui/themes";
 import { MazUiTheme } from "@maz-ui/themes/plugin";
-import { getPreset } from "@maz-ui/themes/utils";
-import { generateCriticalCSS } from "@maz-ui/themes/utils/css-generator";
+import { CSS_IDS, generateCriticalCSS, generateFullCSS, getPreset, mergePresets } from "@maz-ui/themes/utils";
 import { defineNuxtPlugin, useCookie, useHead, useRequestHeaders } from "nuxt/app";
-function getServerInitialColorMode() {
+function getServerInitialColorMode(colorMode) {
+  if (colorMode !== "auto") {
+    return colorMode;
+  }
   const colorModeCookie = useCookie("maz-color-mode");
   if (colorModeCookie.value && ["light", "dark", "auto"].includes(colorModeCookie.value)) {
     return colorModeCookie.value;
@@ -23,69 +21,81 @@ function getServerInitialColorMode() {
   }
   return "auto";
 }
-function getServerIsDark(colorMode) {
-  return colorMode === "dark";
+function injectThemeCSS({
+  mode,
+  preset,
+  config
+}) {
+  const cssOptions = {
+    mode,
+    darkSelectorStrategy: config.darkModeStrategy ?? "class",
+    prefix: "maz"
+  };
+  if (config.injectCriticalCSS) {
+    const criticalCSS = generateCriticalCSS(preset, cssOptions);
+    useHead({
+      style: [{ innerHTML: criticalCSS, id: CSS_IDS.CRITICAL }]
+    });
+  }
+  if (config.injectAllCSSOnServer) {
+    const fullCSS = generateFullCSS(preset, cssOptions);
+    useHead({
+      style: [{ innerHTML: fullCSS, id: CSS_IDS.FULL }]
+    });
+  }
+}
+function getInjectCSSStates(config) {
+  const criticalCSSAlreadyInjected = import.meta.client && !!document.getElementById(CSS_IDS.CRITICAL);
+  const shouldInjectCriticalCSSOnClient = !!config.injectCriticalCSS && import.meta.client && !criticalCSSAlreadyInjected;
+  const fullCSSAlreadyInjected = import.meta.client && !!document.getElementById(CSS_IDS.FULL);
+  const shouldInjectFullCSSOnClient = !!config.injectFullCSS && import.meta.client && !fullCSSAlreadyInjected;
+  return {
+    shouldInjectCriticalCSSOnClient,
+    shouldInjectFullCSSOnClient
+  };
 }
 export default defineNuxtPlugin(async ({ vueApp, $config }) => {
-  const themeConfig = $config.public.mazUi?.theme;
-  let preset = await getPreset(themeConfig?.preset);
-  if (themeConfig?.overrides) {
-    preset = mergePresets(preset, themeConfig.overrides);
+  const options = $config.public.mazUi.theme;
+  let preset = await getPreset(options?.preset);
+  if (options?.overrides) {
+    preset = mergePresets(preset, options.overrides);
   }
   const config = {
     strategy: "hybrid",
     darkModeStrategy: "class",
-    colorMode: "auto",
-    injectFullCSSOnServer: true,
-    ...themeConfig,
+    colorMode: options.mode && options.mode !== "both" ? options.mode : options.colorMode ?? "auto",
+    mode: "both",
+    injectAllCSSOnServer: false,
+    injectCriticalCSS: true,
+    injectFullCSS: true,
+    overrides: {},
+    ...options,
     preset
   };
-  const initialColorMode = config.colorMode === "auto" ? getServerInitialColorMode() : config.colorMode ?? "auto";
-  const serverIsDark = getServerIsDark(initialColorMode);
-  const initialIsDark = initialColorMode === "dark" || initialColorMode === "auto" && serverIsDark;
-  const themeState = {
-    currentPreset: config.preset,
-    colorMode: initialColorMode,
-    isDark: initialIsDark,
-    strategy: config.strategy,
-    darkModeStrategy: config.darkModeStrategy
-  };
-  if (import.meta.server) {
-    const cssOptions = {
-      mode: config.colorMode === "auto" ? "both" : config.colorMode,
-      darkSelectorStrategy: config.darkModeStrategy ?? "class",
-      prefix: "maz"
-    };
-    const criticalCSS = generateCriticalCSS(themeState.currentPreset, cssOptions);
+  const colorMode = config.mode !== "both" ? config.mode : getServerInitialColorMode(config.colorMode);
+  const isDark = colorMode === "auto" && config.mode === "both" ? getServerInitialColorMode(config.colorMode) === "dark" : colorMode === "dark" || config.mode === "dark";
+  if (isDark && config.darkModeStrategy === "class") {
     useHead({
-      style: [
-        {
-          innerHTML: criticalCSS,
-          id: "maz-theme-critical"
-        }
-      ]
+      htmlAttrs: {
+        class: "dark"
+      }
     });
-    if (config.injectFullCSSOnServer) {
-      const fullCSS = generateFullCSS(themeState.currentPreset, cssOptions);
-      useHead({
-        style: [{ innerHTML: fullCSS, id: "maz-theme-full" }]
-      });
-    }
-    if (initialIsDark && config.darkModeStrategy === "class") {
-      useHead({
-        htmlAttrs: {
-          class: "dark"
-        }
-      });
-    }
   }
-  MazUiTheme.install(vueApp, {
-    ...config,
-    preset: themeState.currentPreset,
-    colorMode: themeState.colorMode,
-    strategy: themeState.strategy,
-    darkModeStrategy: themeState.darkModeStrategy,
-    injectFullCSS: !config.injectFullCSSOnServer,
-    injectCriticalCSS: false
+  const { shouldInjectCriticalCSSOnClient, shouldInjectFullCSSOnClient } = getInjectCSSStates(config);
+  if (import.meta.server) {
+    injectThemeCSS({
+      mode: config.mode,
+      preset: config.preset,
+      config
+    });
+  }
+  MazUiTheme.install?.(vueApp, {
+    colorMode,
+    preset: config.preset,
+    strategy: config.strategy,
+    darkModeStrategy: config.darkModeStrategy,
+    mode: config.mode,
+    injectFullCSS: shouldInjectFullCSSOnClient,
+    injectCriticalCSS: shouldInjectCriticalCSSOnClient
   });
 });

package/dist/runtime/plugins/translations.js

@@ -1,11 +1,9 @@
-import {
-  MazTranslations
-} from "@maz-ui/translations";
+import { MazUiTranslations } from "@maz-ui/translations";
 import { defineNuxtPlugin } from "nuxt/app";
 export default defineNuxtPlugin(async ({ vueApp, $config }) => {
   const translationsOptions = $config.public.mazUi.translations || {};
-  const i18n = MazTranslations.install(vueApp, translationsOptions);
-  if (process.server) {
+  const i18n = MazUiTranslations.install?.(vueApp, translationsOptions);
+  if (import.meta.server) {
     const locale = translationsOptions.locale || "en";
     const fallbackLocale = translationsOptions.fallbackLocale || "en";
     try {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/nuxt",
   "type": "module",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.1",
   "description": "Nuxt module for Maz-UI",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -34,8 +34,7 @@
     ".": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
-    },
-    "./*": "./*"
+    }
   },
   "main": "./dist/module.mjs",
   "types": "./dist/types.d.mts",
@@ -50,27 +49,29 @@
     "dev": "nuxt-module-build build --stub && nuxt-module-build prepare",
     "lint": "cross-env NODE_ENV=production eslint .",
     "lint:fix": "pnpm lint --fix",
-    "typecheck": "vue-tsc --noEmit --skipLibCheck"
+    "typecheck": "nuxi typecheck"
+  },
+  "peerDependencies": {
+    "nuxt": ">=3.4.0 <5.0.0"
   },
   "dependencies": {
-    "@maz-ui/themes": "4.0.0-beta.8",
-    "@maz-ui/translations": "4.0.0-beta.8",
-    "@nuxt/kit": "^3.17.4",
+    "@maz-ui/themes": "4.0.1",
+    "@maz-ui/translations": "4.0.0",
+    "@nuxt/kit": "^4.0.3",
     "defu": "^6.1.4",
-    "maz-ui": "4.0.0-beta.9"
+    "maz-ui": "4.0.1"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^2.4.1",
-    "@nuxt/eslint-config": "^1.4.1",
-    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.17.4",
-    "@nuxt/test-utils": "^3.19.1",
-    "nuxt": "^3.17.4",
-    "typescript": "~5.8.3",
+    "@nuxt/devtools": "^2.6.2",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.0.3",
+    "@nuxt/test-utils": "^3.19.2",
+    "nuxt": "^4.0.3",
+    "typescript": "~5.9.2",
     "vitest": "^3.2.4"
   },
   "lint-staged": {
-    "*.{js,ts,mjs,mts,cjs,md}": "cross-env NODE_ENV=production eslint --fix"
+    "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "ec1d8c7e40465514adb2f7f5aac64b04274a90f8"
+  "gitHead": "39f013f863dab2a784450b73aa0da3fdda6c56d8"
 }