@maz-ui/nuxt 4.0.0-beta.16 → 4.0.0-beta.18

package/dist/module.d.mts

@@ -11,6 +11,12 @@ interface MazUiNuxtThemeOptions extends MazUiThemeOptions {
      * @default true
      */
     injectFullCSSOnServer?: boolean;
+    /**
+     * Spa mode
+     * @description Enable full CSS injection on client-side for app with SSR disabled on some pages
+     * @default false
+     */
+    spa?: boolean;
 }
 interface MazUiNuxtOptions {
     /**

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.18",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -98,7 +98,9 @@ const defaults = {
     preset: "maz-ui",
     strategy: "hybrid",
     darkModeStrategy: "class",
-    colorMode: "auto"
+    colorMode: "auto",
+    mode: "both",
+    spa: false
   },
   translations: {
     locale: "en",

package/dist/runtime/plugins/theme.js

@@ -6,7 +6,10 @@ import { MazUiTheme } from "@maz-ui/themes/plugin";
 import { getPreset } from "@maz-ui/themes/utils";
 import { generateCriticalCSS } from "@maz-ui/themes/utils/css-generator";
 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,36 +26,34 @@ function getServerInitialColorMode() {
   }
   return "auto";
 }
-function getServerIsDark(colorMode) {
-  return colorMode === "dark";
-}
 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",
+    colorMode: options.mode && options.mode !== "both" ? options.mode : options.colorMode ?? "auto",
+    mode: "both",
     injectFullCSSOnServer: true,
-    ...themeConfig,
+    ...options,
     preset
   };
-  const initialColorMode = config.colorMode === "auto" ? getServerInitialColorMode() : config.colorMode ?? "auto";
-  const serverIsDark = getServerIsDark(initialColorMode);
-  const initialIsDark = initialColorMode === "dark" || initialColorMode === "auto" && serverIsDark;
+  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";
   const themeState = {
     currentPreset: config.preset,
-    colorMode: initialColorMode,
-    isDark: initialIsDark,
+    colorMode,
+    mode: config.mode,
+    isDark,
     strategy: config.strategy,
     darkModeStrategy: config.darkModeStrategy
   };
   if (import.meta.server) {
     const cssOptions = {
-      mode: config.colorMode === "auto" ? "both" : config.colorMode,
+      mode: themeState.mode,
       darkSelectorStrategy: config.darkModeStrategy ?? "class",
       prefix: "maz"
     };
@@ -71,7 +72,7 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
         style: [{ innerHTML: fullCSS, id: "maz-theme-full" }]
       });
     }
-    if (initialIsDark && config.darkModeStrategy === "class") {
+    if (isDark && config.darkModeStrategy === "class") {
       useHead({
         htmlAttrs: {
           class: "dark"
@@ -85,7 +86,7 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
     colorMode: themeState.colorMode,
     strategy: themeState.strategy,
     darkModeStrategy: themeState.darkModeStrategy,
-    injectFullCSS: !config.injectFullCSSOnServer,
-    injectCriticalCSS: false
+    injectFullCSS: config.spa ? true : !config.injectFullCSSOnServer,
+    injectCriticalCSS: !!config.spa
   });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/nuxt",
   "type": "module",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.18",
   "description": "Nuxt module for Maz-UI",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -53,11 +53,11 @@
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@maz-ui/themes": "4.0.0-beta.16",
-    "@maz-ui/translations": "4.0.0-beta.16",
+    "@maz-ui/themes": "4.0.0-beta.18",
+    "@maz-ui/translations": "4.0.0-beta.18",
     "@nuxt/kit": "^3.17.4",
     "defu": "^6.1.4",
-    "maz-ui": "4.0.0-beta.16"
+    "maz-ui": "4.0.0-beta.18"
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.4.1",
@@ -72,5 +72,5 @@
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "584cad287faf5f51f5308ff1811f87f3305d5d46"
+  "gitHead": "f6939de42eb922cb28b30bdf310ad9d0fec972a8"
 }