@maz-ui/nuxt 4.9.2 → 5.0.0-beta.0

package/README.md

@@ -167,7 +167,7 @@ export default defineNuxtConfig({
     // Theme System
     theme: {
       preset: 'ocean', // Choose: 'mazUi', 'ocean', 'pristine', 'obsidian'
-      strategy: 'hybrid', // 'runtime' | 'buildtime' | 'hybrid'
+      strategy: 'runtime', // 'runtime' | 'buildtime'
       darkModeStrategy: 'class', // 'class' | 'media' | 'auto'
     },
 

package/dist/module.d.mts

@@ -4,14 +4,6 @@ import { MazUiTranslationsOptions } from '@maz-ui/translations';
 import { VLazyImgOptions, VFullscreenImgOptions, VTooltipOptions } from 'maz-ui/directives';
 import { AosOptions, DialogOptions, ToastOptions } from 'maz-ui/plugins';
 
-interface MazUiNuxtThemeOptions extends MazUiThemeOptions {
-    /**
-     * Inject full CSS on server-side
-     * @description Inject full CSS on server-side to prevent FOUC on client-side
-     * @default true
-     */
-    injectAllCSSOnServer?: boolean;
-}
 interface MazUiNuxtOptions {
     /**
      * General configuration
@@ -43,13 +35,13 @@ interface MazUiNuxtOptions {
      * @description If false, the theme system will be completely disabled
      * @default {
      *   preset: 'maz-ui',
-     *   strategy: 'hybrid',
+     *   strategy: 'runtime',
      *   darkModeStrategy: 'class',
      *   prefix: 'maz',
      *   colorMode: 'auto',
      * }
      */
-    theme?: Omit<MazUiNuxtThemeOptions, 'preset'> & {
+    theme?: Omit<MazUiThemeOptions, 'preset'> & {
         /**
          * @default 'maz-ui'
          */
@@ -72,7 +64,7 @@ interface MazUiNuxtOptions {
          * @description Automatically injects Maz-UI base styles
          * @default true
          */
-        injectMainCss?: boolean;
+        injectCss?: boolean;
     };
     /**
      * Components configuration
@@ -269,7 +261,7 @@ interface MazUiNuxtOptions {
     };
 }
 
-declare module '@nuxt/schema' {
+declare module 'nuxt/schema' {
     interface NuxtConfig {
         mazUi?: MazUiNuxtOptions;
     }

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "4.9.2",
+  "version": "5.0.0-beta.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -102,11 +102,11 @@ const defaults = {
     devtools: true
   },
   css: {
-    injectMainCss: true
+    injectCss: true
   },
   theme: {
     preset: "maz-ui",
-    strategy: "hybrid",
+    strategy: "runtime",
     darkModeStrategy: "class",
     colorMode: "auto",
     mode: "both"
@@ -167,8 +167,8 @@ const module$1 = defineNuxtModule({
       defaults
     );
     nuxt.options.runtimeConfig.public.mazUi = moduleOptions;
-    if (moduleOptions.css.injectMainCss) {
-      nuxt.options.css.unshift("maz-ui/dist/css/main.css");
+    if (moduleOptions.css.injectCss) {
+      nuxt.options.css.unshift("maz-ui/style.css");
     }
     addPlugin(resolve(_dirname, "./runtime/plugins/theme"));
     addPlugin(resolve(_dirname, "./runtime/plugins/translations"));
@@ -191,7 +191,7 @@ const module$1 = defineNuxtModule({
       });
       const injectAosCSS = typeof moduleOptions.plugins.aos === "object" && typeof moduleOptions.plugins.aos.injectCss === "boolean" ? moduleOptions.plugins.aos.injectCss : true;
       if (injectAosCSS) {
-        nuxt.options.css = ["maz-ui/aos-styles", ...nuxt.options.css];
+        nuxt.options.css = ["maz-ui/aos.css", ...nuxt.options.css];
       }
     }
     if (moduleOptions.plugins.toast) {

package/dist/runtime/plugins/theme.js

@@ -44,43 +44,61 @@ function getColorModeBlockingScript(config) {
   return `(function(){try{var d=document.documentElement,m='${config.mode}',dc='${darkClass}';if(m==='light')return;var c=(document.cookie.match(/maz-color-mode=([^;]+)/)||[])[1];if(c==='light')return;if(c==='dark'||m==='dark'){d.classList.add(dc);return}var r=(document.cookie.match(/maz-resolved-color-mode=([^;]+)/)||[])[1];if(r==='light')return;if(r==='dark'){d.classList.add(dc);return}if(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches){d.classList.add(dc);document.cookie='maz-resolved-color-mode=dark;path=/;max-age=${cookieMaxAge};SameSite=Lax'}else{document.cookie='maz-resolved-color-mode=light;path=/;max-age=${cookieMaxAge};SameSite=Lax'}}catch(e){}})()`;
 }
 function injectThemeCSS(config) {
-  const cssOptions = {
+  if (config.strategy === "buildtime")
+    return;
+  const css = generateCSS(config.preset, {
     mode: config.mode,
-    darkSelectorStrategy: config.darkModeStrategy ?? "class",
+    darkSelectorStrategy: config.darkModeStrategy,
     prefix: "maz",
-    darkClass: config.darkClass ?? "dark"
-  };
-  if (config.injectCriticalCSS && !config.injectAllCSSOnServer) {
-    const criticalCSS = generateCSS(config.preset, {
-      ...cssOptions,
-      onlyCritical: true
-    });
-    useHead({
-      style: [{ innerHTML: criticalCSS, id: CSS_ID }]
-    });
+    darkClass: config.darkClass
+  });
+  useHead({
+    style: [{
+      innerHTML: css,
+      id: CSS_ID
+    }]
+  });
+}
+async function resolvePreset(options, persistPreset) {
+  const presetCookie = useCookie("maz-preset");
+  const savedName = persistPreset ? presetCookie.value : void 0;
+  const presetObject = options?.preset && typeof options.preset !== "string" ? options.preset : void 0;
+  if (savedName && presetObject && savedName === presetObject.name) {
+    return presetObject;
   }
-  if (config.injectAllCSSOnServer) {
-    const fullCSS = generateCSS(config.preset, cssOptions);
-    useHead({
-      style: [{ innerHTML: fullCSS, id: CSS_ID }]
-    });
+  if (savedName) {
+    try {
+      return await getPreset(savedName);
+    } catch {
+      presetCookie.value = null;
+    }
   }
+  return getPreset(options?.preset);
 }
 export default defineNuxtPlugin(async ({ vueApp, $config }) => {
   const options = $config.public.mazUi.theme;
-  let preset = await getPreset(options?.preset);
+  const persistPreset = options?.persistPreset !== false;
+  let preset = await resolvePreset(options, persistPreset);
   if (options?.overrides) {
     preset = mergePresets(preset, options.overrides);
   }
+  if (persistPreset) {
+    const presetCookie = useCookie("maz-preset", {
+      maxAge: 60 * 60 * 24 * 365,
+      sameSite: "lax",
+      path: "/"
+    });
+    if (presetCookie.value !== preset.name) {
+      presetCookie.value = preset.name;
+    }
+  }
   const config = {
-    strategy: "hybrid",
+    strategy: "runtime",
     darkClass: "dark",
     darkModeStrategy: "class",
     mode: "both",
-    injectAllCSSOnServer: false,
-    injectCriticalCSS: true,
-    injectFullCSS: true,
     overrides: {},
+    persistPreset: true,
     ...options,
     colorMode: getSavedColorMode() ?? options?.colorMode ?? "auto",
     preset
@@ -107,7 +125,5 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
     colorMode: getSavedColorMode() ?? config.colorMode,
     // @ts-expect-error _isDark is a private property
     _isDark: isDark
-    // injectFullCSS: !config.injectAllCSSOnServer || shouldInjectCSSOnClient,
-    // injectCriticalCSS: shouldInjectCSSOnClient,
   });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/nuxt",
   "type": "module",
-  "version": "4.9.2",
+  "version": "5.0.0-beta.0",
   "description": "Nuxt module for Maz-UI",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -48,24 +48,25 @@
   },
   "dependencies": {
     "@nuxt/devtools-kit": "^3.2.3",
-    "@nuxt/kit": "^4.4.2",
+    "@nuxt/kit": "^4.4.4",
     "defu": "^6.1.7",
-    "maz-ui": "4.9.2",
-    "@maz-ui/translations": "4.9.2",
-    "@maz-ui/themes": "4.9.2",
-    "@maz-ui/utils": "4.7.6"
+    "@maz-ui/themes": "5.0.0-beta.0",
+    "@maz-ui/translations": "5.0.0-beta.0",
+    "@maz-ui/utils": "5.0.0-beta.0",
+    "maz-ui": "5.0.0-beta.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.2.3",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.4.2",
-    "@nuxt/test-utils": "^4.0.2",
-    "nuxt": "^4.4.2"
+    "@nuxt/schema": "^4.4.4",
+    "@nuxt/test-utils": "^4.0.3",
+    "nuxt": "^4.4.4"
   },
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
   "scripts": {
+    "codegen": "nx dev",
     "build": "pnpm dev && nuxt-module-build build",
     "dev": "nuxt-module-build build --stub && nuxt-module-build prepare",
     "test:unit": "vitest run",