@maz-ui/nuxt 5.0.0-beta.5 → 5.0.0-beta.51

package/README.md

@@ -182,6 +182,13 @@ export default defineNuxtConfig({
       autoImport: true, // Auto-import all components globally
     },
 
+    // Global component defaults (instance prop > defaults[Component] > defaults.global > library default)
+    defaults: {
+      global: { roundedSize: 'lg' }, // cross-cutting (roundedSize, size)
+      MazBtn: { roundedSize: 'full' }, // per-component, wins over global
+      MazCard: { bordered: false, elevation: true },
+    },
+
     // Composables (customize what you need)
     composables: {
       useTheme: true,
@@ -264,7 +271,7 @@ This module is built specifically for Nuxt with perfect SSR and SSG support:
 
 ## Learn More
 
-- **[Full Documentation](https://maz-ui.com/guide/nuxt)**
+- **[Full Documentation](https://maz-ui.com/ecosystem/nuxt)**
 - **[Report Issues](https://github.com/LouisMazel/maz-ui/issues)**
 - **[Discussions](https://github.com/LouisMazel/maz-ui/discussions)**
 

package/dist/module.d.mts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { MazUiThemeOptions, ThemePreset, ThemePresetName } from '@maz-ui/themes';
 import { MazUiTranslationsOptions } from '@maz-ui/translations';
+import { MazUiDefaultsOptions } from 'maz-ui/composables/useGlobalConfig';
 import { VLazyImgOptions, VFullscreenImgOptions, VTooltipOptions } from 'maz-ui/directives';
 import { AosOptions, DialogOptions, ToastOptions } from 'maz-ui/plugins';
 
@@ -55,6 +56,31 @@ interface MazUiNuxtOptions {
      * }
      */
     translations?: MazUiTranslationsOptions;
+    /**
+     * Global default prop values for components
+     * @description Set default prop values once for every component, with the priority:
+     * instance prop > `defaults[Component]` > `defaults.global` > library default.
+     * A global default never wins over a prop set on the component instance.
+     * @default {}
+     * @example {
+     *   global: { roundedSize: 'lg' },
+     *   MazBtn: { roundedSize: 'full' },
+     *   MazCard: { bordered: false, elevation: true },
+     * }
+     */
+    defaults?: MazUiDefaultsOptions;
+    /**
+     * Source of the country flags of `MazSelectCountry` and `MazInputPhoneNumber`
+     * @description
+     * - `'cdn'`: images of the flagcdn.com CDN
+     * - `'local'`: square flags of `@maz-ui/icons`, one chunk per flag, loaded only when visible, without any request to a third party (works offline)
+     * - a URL template of your own files, with `{code}` (lowercase) or `{CODE}` (uppercase): `'/flags/{code}.svg'`
+     *
+     * Sets the default of the `flag-src` prop (`defaults.global.flagSrc`): a `flag-src` set on a component wins.
+     * Nothing is added to the build of the app unless this option is `'local'`.
+     * @default 'cdn'
+     */
+    flags?: 'cdn' | 'local' | (string & {});
     /**
      * CSS and styles configuration
      */
@@ -223,6 +249,12 @@ interface MazUiNuxtOptions {
          * @default true
          */
         useSwipe?: boolean;
+        /**
+         * Enable auto-import of usePullToRefresh composable
+         * @description Headless pull to refresh gesture on a scroll container
+         * @default true
+         */
+        usePullToRefresh?: boolean;
     };
     /**
      * Vue directives configuration

package/dist/module.json

@@ -2,11 +2,11 @@
   "name": "maz-ui",
   "configKey": "mazUi",
   "compatibility": {
-    "nuxt": ">=3.0.0"
+    "nuxt": ">=3.4.0 <5.0.0"
   },
-  "version": "5.0.0-beta.5",
+  "version": "5.0.0-beta.51",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
-    "unbuild": "3.6.1"
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -25,6 +25,7 @@ const COMPONENT_NAMES = {
   MazChecklist: true,
   MazContainer: true,
   MazCircularProgressBar: true,
+  MazCodeHighlight: true,
   MazDialog: true,
   MazDialogConfirm: true,
   MazDrawer: true,
@@ -43,6 +44,7 @@ const COMPONENT_NAMES = {
   MazLazyImg: true,
   MazLink: true,
   MazLoadingBar: true,
+  MazMarkdownEditor: true,
   MazPagination: true,
   MazDatePicker: true,
   MazPullToRefresh: true,
@@ -57,6 +59,17 @@ const COMPONENT_NAMES = {
   MazSpinner: true,
   MazStepper: true,
   MazSwitch: true,
+  MazSidebar: true,
+  MazSidebarMenu: true,
+  MazSidebarMenuItem: true,
+  MazSidebarMenuSub: true,
+  MazSidebarFooter: true,
+  MazSidebarHeader: true,
+  MazSidebarContent: true,
+  MazSidebarGroup: true,
+  MazSidebarMenuButton: true,
+  MazSidebarSeparator: true,
+  MazSidebarTrigger: true,
   MazTable: true,
   MazTableCell: true,
   MazTableRow: true,
@@ -69,6 +82,7 @@ const COMPONENT_NAMES = {
   MazTimeline: true,
   MazTextarea: true,
   MazUiProvider: true,
+  MazWindowMockup: true,
   MazPopover: true
 };
 const _dirname = dirname(fileURLToPath(import.meta.url));
@@ -78,6 +92,7 @@ const pluginComposables = {
 };
 const mazUiComposables = {
   useIdleTimeout: true,
+  useDrag: true,
   useReadingTime: true,
   useFormField: true,
   useWindowSize: true,
@@ -93,7 +108,9 @@ const mazUiComposables = {
   useInstanceUniqId: true,
   useMountComponent: true,
   useSwipe: true,
-  useMutationObserver: true
+  usePullToRefresh: true,
+  useMutationObserver: true,
+  useSidebar: true
 };
 const defaults = {
   general: {
@@ -116,6 +133,8 @@ const defaults = {
     fallbackLocale: "en",
     preloadFallback: true
   },
+  defaults: {},
+  flags: "cdn",
   components: {
     autoImport: true
   },
@@ -153,7 +172,7 @@ const module$1 = defineNuxtModule({
     name: "maz-ui",
     configKey: "mazUi",
     compatibility: {
-      nuxt: ">=3.0.0"
+      nuxt: ">=3.4.0 <5.0.0"
     }
   },
   defaults,
@@ -170,9 +189,28 @@ const module$1 = defineNuxtModule({
     if (moduleOptions.css.injectCss) {
       nuxt.options.css.unshift("maz-ui/style.css");
     }
+    nuxt.options.postcss ??= { plugins: {}, order: [] };
+    nuxt.options.postcss.plugins ??= {};
+    const postcssPlugins = nuxt.options.postcss.plugins;
+    if (postcssPlugins.cssnano !== false) {
+      const current = typeof postcssPlugins.cssnano === "object" && postcssPlugins.cssnano !== null ? postcssPlugins.cssnano : {};
+      postcssPlugins.cssnano = { ...current, preset: ["default", { calc: false }] };
+    }
     addPlugin(resolve(_dirname, "./runtime/plugins/theme"));
     addPlugin(resolve(_dirname, "./runtime/plugins/translations"));
     addPlugin(resolve(_dirname, "./runtime/plugins/maz-link-component"));
+    const flags = moduleOptions.flags;
+    if (flags && flags !== "cdn" && flags !== "local") {
+      moduleOptions.defaults = {
+        ...moduleOptions.defaults,
+        global: { flagSrc: flags, ...moduleOptions.defaults.global }
+      };
+    }
+    if (flags === "local") {
+      addPlugin(resolve(_dirname, "./runtime/plugins/local-flags"));
+    } else if (Object.keys(moduleOptions.defaults).length > 0) {
+      addPlugin(resolve(_dirname, "./runtime/plugins/defaults"));
+    }
     if (moduleOptions.components.autoImport) {
       for (const name of Object.keys(COMPONENT_NAMES)) {
         addComponent({

package/dist/runtime/plugins/defaults.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/defaults.js

@@ -0,0 +1,8 @@
+import { GLOBAL_CONFIG_INJECTION_KEY } from "maz-ui/composables/useGlobalConfig";
+import { defineNuxtPlugin } from "nuxt/app";
+export default defineNuxtPlugin(({ vueApp, $config }) => {
+  const defaults = $config.public.mazUi?.defaults;
+  if (defaults && Object.keys(defaults).length > 0) {
+    vueApp.provide(GLOBAL_CONFIG_INJECTION_KEY, defaults);
+  }
+});

package/dist/runtime/plugins/local-flags.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/local-flags.js

@@ -0,0 +1,13 @@
+import { GLOBAL_CONFIG_INJECTION_KEY } from "maz-ui/composables/useGlobalConfig";
+import { defineNuxtPlugin } from "nuxt/app";
+async function loadCountryFlag(code) {
+  const { loadCountryFlag: loadCountryFlag2 } = await import("maz-ui/country-flags");
+  return loadCountryFlag2(code);
+}
+export default defineNuxtPlugin(({ vueApp, $config }) => {
+  const defaults = $config.public.mazUi?.defaults ?? {};
+  vueApp.provide(GLOBAL_CONFIG_INJECTION_KEY, {
+    ...defaults,
+    global: { flagSrc: loadCountryFlag, ...defaults.global }
+  });
+});

package/dist/runtime/plugins/theme.js

@@ -1,5 +1,5 @@
 import { MazUiTheme } from "@maz-ui/themes/plugin";
-import { CSS_ID, generateCSS, getPreset, mergePresets } from "@maz-ui/themes/utils";
+import { CSS_ID, generateCSS, getPreset, mergePresets, resolveColorSchemeContent } from "@maz-ui/themes/utils";
 import { getSystemColorMode } from "@maz-ui/themes/utils/get-color-mode";
 import { defineNuxtPlugin, useCookie, useHead, useRequestHeaders } from "nuxt/app";
 function getSavedColorMode() {
@@ -17,11 +17,11 @@ function getSavedResolvedColorMode() {
   return void 0;
 }
 function getInitialColorMode() {
-  const resolvedColorMode = getSavedResolvedColorMode();
-  if (resolvedColorMode) {
-    return resolvedColorMode;
-  }
   if (import.meta.server) {
+    const resolvedColorMode = getSavedResolvedColorMode();
+    if (resolvedColorMode) {
+      return resolvedColorMode;
+    }
     const headers = useRequestHeaders();
     if (headers["sec-ch-prefers-color-scheme"] === "dark") {
       return "dark";
@@ -30,13 +30,9 @@ function getInitialColorMode() {
     if (userAgent?.includes("dark")) {
       return "dark";
     }
-  } else {
-    const systemColorMode = getSystemColorMode();
-    if (systemColorMode === "dark") {
-      return "dark";
-    }
+    return "auto";
   }
-  return "auto";
+  return getSystemColorMode();
 }
 function getColorModeBlockingScript(config) {
   const darkClass = config.darkClass;
@@ -51,7 +47,7 @@ function injectThemeCSS(config) {
     darkSelectorStrategy: config.darkModeStrategy,
     prefix: "maz",
     darkClass: config.darkClass,
-    scaleColorVariables: true
+    lightClass: config.lightClass
   });
   useHead({
     style: [{
@@ -60,26 +56,39 @@ function injectThemeCSS(config) {
     }]
   });
 }
+function parseSavedPreset(raw) {
+  if (!raw) {
+    return null;
+  }
+  const separatorIndex = raw.indexOf(":");
+  if (separatorIndex === -1) {
+    return null;
+  }
+  const base = raw.slice(0, separatorIndex);
+  const active = raw.slice(separatorIndex + 1);
+  return base && active ? { base, active } : null;
+}
 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;
+  const saved = persistPreset ? parseSavedPreset(useCookie("maz-preset").value) : null;
+  const basePreset = presetObject ?? await getPreset(options?.preset);
+  const baseName = basePreset.name;
+  if (!persistPreset) {
+    return { preset: basePreset, baseName };
   }
-  if (savedName) {
+  if (saved && saved.base === baseName && saved.active !== baseName) {
     try {
-      return await getPreset(savedName);
+      return { preset: await getPreset(saved.active), baseName };
     } catch {
-      presetCookie.value = null;
     }
   }
-  return getPreset(options?.preset);
+  return { preset: basePreset, baseName };
 }
 export default defineNuxtPlugin(async ({ vueApp, $config }) => {
   const options = $config.public.mazUi.theme;
   const persistPreset = options?.persistPreset !== false;
-  let preset = await resolvePreset(options, persistPreset);
+  const resolved = await resolvePreset(options, persistPreset);
+  let preset = resolved.preset;
   if (options?.overrides) {
     preset = mergePresets(preset, options.overrides);
   }
@@ -89,13 +98,15 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
       sameSite: "lax",
       path: "/"
     });
-    if (presetCookie.value !== preset.name) {
-      presetCookie.value = preset.name;
+    const value = `${resolved.baseName}:${preset.name}`;
+    if (presetCookie.value !== value) {
+      presetCookie.value = value;
     }
   }
   const config = {
     strategy: "runtime",
     darkClass: "dark",
+    lightClass: "light",
     darkModeStrategy: "class",
     mode: "both",
     overrides: {},
@@ -105,15 +116,22 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
     preset
   };
   const isDark = config.colorMode === "auto" && config.mode === "both" ? getInitialColorMode() === "dark" : config.colorMode === "dark" || config.mode === "dark";
-  if (isDark && config.darkModeStrategy === "class") {
-    useHead({
-      htmlAttrs: {
-        class: config.darkClass
-      }
-    });
-  }
   if (import.meta.server) {
+    if (isDark && config.darkModeStrategy === "class") {
+      useHead({
+        htmlAttrs: {
+          class: config.darkClass
+        }
+      });
+    }
     injectThemeCSS(config);
+    useHead({
+      meta: [{
+        name: "color-scheme",
+        content: resolveColorSchemeContent(config.mode, config.colorMode),
+        id: "maz-color-scheme"
+      }]
+    });
     if (config.colorMode === "auto" && config.mode === "both" && config.darkModeStrategy === "class") {
       useHead({
         script: [{ innerHTML: getColorModeBlockingScript(config), tagPosition: "head", id: "maz-color-mode-blocking" }],

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@maz-ui/nuxt",
   "type": "module",
-  "version": "5.0.0-beta.5",
+  "version": "5.0.0-beta.51",
   "description": "Nuxt module for Maz-UI",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
-  "homepage": "https://maz-ui.com/guide/nuxt",
+  "homepage": "https://maz-ui.com/ecosystem/nuxt",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/LouisMazel/maz-ui.git"
@@ -33,7 +33,8 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
-      "import": "./dist/module.mjs"
+      "import": "./dist/module.mjs",
+      "default": "./dist/module.mjs"
     }
   },
   "main": "./dist/module.mjs",
@@ -47,28 +48,28 @@
     "nuxt": ">=3.4.0 <5.0.0"
   },
   "dependencies": {
+    "@maz-ui/themes": "5.0.0-beta.46",
+    "@maz-ui/translations": "5.0.0-beta.50",
+    "@maz-ui/utils": "5.0.0-beta.46",
     "@nuxt/devtools-kit": "^3.2.3",
-    "@nuxt/kit": "^4.4.4",
+    "@nuxt/kit": "^4.5.2",
     "defu": "^6.1.7",
-    "@maz-ui/themes": "5.0.0-beta.5",
-    "@maz-ui/utils": "5.0.0-beta.5",
-    "@maz-ui/translations": "5.0.0-beta.5",
-    "maz-ui": "5.0.0-beta.5"
+    "maz-ui": "5.0.0-beta.51"
   },
   "devDependencies": {
+    "@maz-ui/eslint-config": "5.0.0-beta.47",
     "@nuxt/devtools": "^3.2.3",
-    "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.4.4",
-    "@nuxt/test-utils": "^4.0.3",
-    "nuxt": "^4.4.4"
+    "@nuxt/module-builder": "^1.0.3",
+    "@nuxt/schema": "^4.5.2",
+    "@nuxt/test-utils": "^4.3.3",
+    "nuxt": "^4.5.2"
   },
   "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",
+    "build": "pnpm dev && pnpm prepack",
+    "dev": "pnpm prepack --stub && nuxt-module-build prepare",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest watch",
     "test:unit:coverage": "vitest run --coverage",