@maz-ui/nuxt 4.0.0-beta.3 → 4.0.0-beta.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -16,20 +16,20 @@ Transform your Nuxt application with **Maz-UI** - a comprehensive Vue.js compone
16
16
  [![npm version](https://badge.fury.io/js/%40maz-ui%2Fnuxt.svg)](https://badge.fury.io/js/%40maz-ui%2Fnuxt)
17
17
  [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
18
18
 
19
- ## 🎯 What is Maz-UI?
19
+ ## What is Maz-UI?
20
20
 
21
21
  **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!
22
22
 
23
- ### 🌟 Why Choose Maz-UI for Your Nuxt App?
23
+ ### Why Choose Maz-UI for Your Nuxt App?
24
24
 
25
- - **🚀 Zero Configuration** - Works instantly with sensible defaults
26
- - **🎨 Beautiful by Default** - Professional design with dark mode included
27
- - **📦 Everything Auto-Imported** - No more import statements needed
28
- - **⚡ Super Fast** - Optimized for performance with tree-shaking
29
- - **🛠️ Developer Friendly** - TypeScript support and great DevTools
30
- - **🎯 Production Ready** - Perfect SSR/SSG support
25
+ - **Zero Configuration** - Works instantly with sensible defaults
26
+ - **Beautiful by Default** - Professional design with dark mode included
27
+ - **Everything Auto-Imported** - No more import statements needed
28
+ - **Super Fast** - Optimized for performance with tree-shaking
29
+ - **Developer Friendly** - TypeScript support and great DevTools
30
+ - **Production Ready** - Perfect SSR/SSG support
31
31
 
32
- ## 🚀 Quick Start (2 minutes!)
32
+ ## Quick Start (2 minutes!)
33
33
 
34
34
  ### Step 1: Install the module
35
35
 
@@ -87,9 +87,9 @@ function showMessage() {
87
87
  </template>
88
88
  ```
89
89
 
90
- ## 🎨 What You Get Out of the Box
90
+ ## What You Get Out of the Box
91
91
 
92
- ### 🧩 50+ Beautiful Components
92
+ ### 50+ Beautiful Components
93
93
 
94
94
  - **Buttons**: `MazBtn`,
95
95
  - **Forms**: `MazInput`, `MazSelect`, `MazCheckbox`, `MazRadio`, `MazTextarea`, `MazInputPhoneNumber`
@@ -101,7 +101,7 @@ function showMessage() {
101
101
  - **Charts**: `MazChart` (with Chart.js integration)
102
102
  - **And 30+ more!**
103
103
 
104
- ### 🎪 20+ Powerful Composables
104
+ ### 20+ Powerful Composables
105
105
 
106
106
  - **`useTheme()`** - Theme management and dark mode
107
107
  - **`useToast()`** - Beautiful toast notifications
@@ -112,7 +112,7 @@ function showMessage() {
112
112
  - **`useBreakpoints()`** - Responsive design helpers
113
113
  - **And many more!**
114
114
 
115
- ### 🎯 Smart Directives
115
+ ### Smart Directives
116
116
 
117
117
  - **`v-tooltip`** - Beautiful tooltips anywhere
118
118
  - **`v-lazy-img`** - Lazy load images automatically
@@ -120,7 +120,7 @@ function showMessage() {
120
120
  - **`v-click-outside`** - Detect outside clicks
121
121
  - **`v-fullscreen-img`** - Fullscreen image viewer
122
122
 
123
- ## 🌈 Theming Made Simple
123
+ ## Theming Made Simple
124
124
 
125
125
  Maz-UI comes with a powerful theming system that makes your app look professional instantly:
126
126
 
@@ -150,7 +150,7 @@ async function changeToOceanTheme() {
150
150
 
151
151
  **Built-in themes**: `mazUi`, `ocean`, `pristine`, `obsidian` + create your own!
152
152
 
153
- ## ⚙️ Configuration Options
153
+ ## Configuration Options
154
154
 
155
155
  ### Minimal Setup (Recommended)
156
156
 
@@ -169,32 +169,32 @@ export default defineNuxtConfig({
169
169
  export default defineNuxtConfig({
170
170
  modules: ['@maz-ui/nuxt'],
171
171
  mazUi: {
172
- // 🎛️ General Settings
172
+ // General Settings
173
173
  general: {
174
174
  autoImportPrefix: 'Maz', // useMazToast instead of useToast
175
175
  defaultMazIconPath: '/icons', // Path to your SVG icons
176
176
  devtools: true, // Enable DevTools integration
177
177
  },
178
178
 
179
- // 🎨 Theme System
179
+ // Theme System
180
180
  theme: {
181
181
  preset: 'ocean', // Choose: 'mazUi', 'ocean', 'pristine', 'obsidian'
182
182
  strategy: 'hybrid', // 'runtime' | 'buildtime' | 'hybrid'
183
183
  darkModeStrategy: 'class', // 'class' | 'media' | 'auto'
184
184
  },
185
185
 
186
- // 🌐 Translations
186
+ // Translations
187
187
  translations: {
188
188
  locale: 'fr', // Default language
189
189
  fallbackLocale: 'en',
190
190
  },
191
191
 
192
- // 🧩 Components (all enabled by default)
192
+ // Components (all enabled by default)
193
193
  components: {
194
194
  autoImport: true, // Auto-import all components globally
195
195
  },
196
196
 
197
- // 🎪 Composables (customize what you need)
197
+ // Composables (customize what you need)
198
198
  composables: {
199
199
  useTheme: true,
200
200
  useToast: true,
@@ -206,7 +206,7 @@ export default defineNuxtConfig({
206
206
  // ... all others enabled by default
207
207
  },
208
208
 
209
- // 🎯 Directives
209
+ // Directives
210
210
  directives: {
211
211
  vTooltip: true,
212
212
  vLazyImg: { threshold: 0.1 }, // Custom intersection threshold
@@ -218,7 +218,7 @@ export default defineNuxtConfig({
218
218
  })
219
219
  ```
220
220
 
221
- ## 🛠️ Advanced Features
221
+ ## Advanced Features
222
222
 
223
223
  ### Custom Theme Creation
224
224
 
@@ -252,7 +252,7 @@ export default defineNuxtConfig({
252
252
  })
253
253
  ```
254
254
 
255
- ## 📱 SSR/SSG Support
255
+ ## SSR/SSG Support
256
256
 
257
257
  This module is built specifically for Nuxt with perfect SSR and SSG support:
258
258
 
@@ -262,7 +262,7 @@ This module is built specifically for Nuxt with perfect SSR and SSG support:
262
262
  - ✅ **Theme Persistence** - Dark mode preference remembered
263
263
  - ✅ **No FOUC** - Flash of unstyled content prevented
264
264
 
265
- ## 🎯 Why This Module vs Manual Setup?
265
+ ## Why This Module vs Manual Setup?
266
266
 
267
267
  | Feature | Manual Setup | @maz-ui/nuxt Module |
268
268
  | ---------------- | --------------------- | ----------------------------- |
@@ -274,17 +274,17 @@ This module is built specifically for Nuxt with perfect SSR and SSG support:
274
274
  | **DevTools** | No integration | ✅ Nuxt DevTools support |
275
275
  | **TypeScript** | Manual type setup | ✅ Perfect TypeScript support |
276
276
 
277
- ## 📚 Learn More
277
+ ## Learn More
278
278
 
279
- - 📖 **[Full Documentation](https://maz-ui.com/guide/nuxt)**
280
- - 🐛 **[Report Issues](https://github.com/LouisMazel/maz-ui/issues)**
281
- - 💬 **[Discussions](https://github.com/LouisMazel/maz-ui/discussions)**
279
+ - **[Full Documentation](https://maz-ui.com/guide/nuxt)**
280
+ - **[Report Issues](https://github.com/LouisMazel/maz-ui/issues)**
281
+ - **[Discussions](https://github.com/LouisMazel/maz-ui/discussions)**
282
282
 
283
- ## 🤝 Contributing
283
+ ## Contributing
284
284
 
285
285
  We love contributions! Check out our [Contributing Guide](https://github.com/LouisMazel/maz-ui/blob/main/CONTRIBUTING.md).
286
286
 
287
- ## 📄 License
287
+ ## License
288
288
 
289
289
  MIT License © 2025 [LouisMazel](https://github.com/LouisMazel)
290
290
 
package/dist/module.d.mts CHANGED
@@ -2,7 +2,7 @@ import * as _nuxt_schema from '@nuxt/schema';
2
2
  import { MazUiThemeOptions } from '@maz-ui/themes';
3
3
  import { MazTranslationsOptions } from '@maz-ui/translations';
4
4
  import { VLazyImgOptions, VFullscreenImgOptions, VTooltipOptions } from 'maz-ui/directives';
5
- import { AosOptions, ToastOptions, DialogOptions } from 'maz-ui/plugins';
5
+ import { AosOptions, DialogOptions, ToastOptions } from 'maz-ui/plugins';
6
6
 
7
7
  interface MazUiNuxtThemeOptions extends MazUiThemeOptions {
8
8
  /**
@@ -10,7 +10,7 @@ interface MazUiNuxtThemeOptions extends MazUiThemeOptions {
10
10
  * @description Inject full CSS on server-side to prevent FOUC on client-side
11
11
  * @default true
12
12
  */
13
- injectFullCSSOnServer?: boolean;
13
+ injectAllCSSOnServer?: boolean;
14
14
  }
15
15
  interface MazUiNuxtOptions {
16
16
  /**
@@ -81,27 +81,15 @@ interface MazUiNuxtOptions {
81
81
  autoImport?: boolean;
82
82
  };
83
83
  /**
84
- * Composables configuration
84
+ * Plugins configuration
85
85
  */
86
- composables?: {
87
- /**
88
- * Enable auto-import of useTranslations composable
89
- * @description Provides translations functionality from `@maz-ui/translations` package
90
- * @default true
91
- */
92
- useTranslations?: boolean;
93
- /**
94
- * Enable auto-import of useTheme composable
95
- * @description Provides theme management functionality (toggle dark mode, change themes, etc.) from `@maz-ui/themes` package
96
- * @default false
97
- */
98
- useTheme?: boolean;
86
+ plugins?: {
99
87
  /**
100
88
  * Enable auto-import of useAos composable and install AOS plugin
101
89
  * @description Animation On Scroll functionality with advanced configuration options
102
- * @default true
90
+ * @default false
103
91
  */
104
- useAos?: boolean | (Omit<AosOptions, 'router'> & {
92
+ aos?: boolean | (Omit<AosOptions, 'router'> & {
105
93
  /**
106
94
  * Auto inject AOS CSS file
107
95
  * @default true
@@ -113,24 +101,41 @@ interface MazUiNuxtOptions {
113
101
  */
114
102
  router?: boolean;
115
103
  });
116
- /**
117
- * Enable auto-import of useToast composable and install Toast plugin
118
- * @description Toast notifications functionality
119
- * @default true
120
- */
121
- useToast?: boolean | ToastOptions;
122
104
  /**
123
105
  * Enable auto-import of useDialog composable and install Dialog plugin
124
106
  * @description Modal dialogs functionality
125
- * @default true
107
+ * @default false
126
108
  */
127
- useDialog?: boolean | DialogOptions;
109
+ dialog?: boolean | DialogOptions;
110
+ /**
111
+ * Enable auto-import of useToast composable and install Toast plugin
112
+ * @description Toast notifications functionality
113
+ * @default false
114
+ */
115
+ toast?: boolean | ToastOptions;
128
116
  /**
129
117
  * Enable auto-import of useWait composable and install Wait plugin
130
118
  * @description Loading state management functionality
119
+ * @default false
120
+ */
121
+ wait?: boolean;
122
+ };
123
+ /**
124
+ * Composables configuration
125
+ */
126
+ composables?: {
127
+ /**
128
+ * Enable auto-import of useTranslations composable
129
+ * @description Provides translations functionality from `@maz-ui/translations` package
131
130
  * @default true
132
131
  */
133
- useWait?: boolean;
132
+ useTranslations?: boolean;
133
+ /**
134
+ * Enable auto-import of useTheme composable
135
+ * @description Provides theme management functionality (toggle dark mode, change themes, etc.) from `@maz-ui/themes` package
136
+ * @default false
137
+ */
138
+ useTheme?: boolean;
134
139
  /**
135
140
  * Enable auto-import of useIdleTimeout composable
136
141
  * @description Detect user idle state and execute callbacks
@@ -267,7 +272,7 @@ declare module '@nuxt/schema' {
267
272
  mazUi: MazUiNuxtOptions;
268
273
  }
269
274
  interface PublicRuntimeConfig {
270
- mazUi: MazUiNuxtOptions;
275
+ mazUi: Required<MazUiNuxtOptions>;
271
276
  }
272
277
  }
273
278
  declare const _default: _nuxt_schema.NuxtModule<MazUiNuxtOptions, MazUiNuxtOptions, false>;
package/dist/module.json CHANGED
@@ -4,9 +4,9 @@
4
4
  "compatibility": {
5
5
  "nuxt": ">=3.0.0"
6
6
  },
7
- "version": "4.0.0-beta.3",
7
+ "version": "4.0.0-beta.33",
8
8
  "builder": {
9
- "@nuxt/module-builder": "1.0.1",
10
- "unbuild": "3.5.0"
9
+ "@nuxt/module-builder": "1.0.2",
10
+ "unbuild": "3.6.0"
11
11
  }
12
12
  }
package/dist/module.mjs CHANGED
@@ -22,7 +22,7 @@ const COMPONENT_NAMES = {
22
22
  MazChecklist: true,
23
23
  MazCircularProgressBar: true,
24
24
  MazDialog: true,
25
- MazDialogPromise: true,
25
+ MazDialogConfirm: true,
26
26
  MazDrawer: true,
27
27
  MazDropdown: true,
28
28
  MazDropzone: true,
@@ -63,6 +63,28 @@ const COMPONENT_NAMES = {
63
63
  MazPopover: true
64
64
  };
65
65
  const _dirname = dirname(fileURLToPath(import.meta.url));
66
+ const pluginComposables = {
67
+ useTheme: true,
68
+ useTranslations: true
69
+ };
70
+ const mazUiComposables = {
71
+ useIdleTimeout: true,
72
+ useReadingTime: true,
73
+ useFormField: true,
74
+ useWindowSize: true,
75
+ useBreakpoints: true,
76
+ useUserVisibility: true,
77
+ useStringMatching: true,
78
+ useTimer: true,
79
+ useFormValidator: true,
80
+ useDisplayNames: true,
81
+ useFreezeValue: true,
82
+ useInjectStrict: true,
83
+ useDropzone: true,
84
+ useInstanceUniqId: true,
85
+ useMountComponent: true,
86
+ useSwipe: true
87
+ };
66
88
  const defaults = {
67
89
  general: {
68
90
  autoImportPrefix: "",
@@ -76,37 +98,26 @@ const defaults = {
76
98
  preset: "maz-ui",
77
99
  strategy: "hybrid",
78
100
  darkModeStrategy: "class",
79
- prefix: "maz",
80
- colorMode: "auto"
101
+ colorMode: "auto",
102
+ mode: "both"
81
103
  },
82
104
  translations: {
83
- locale: "en"
105
+ locale: "en",
106
+ fallbackLocale: "en",
107
+ preloadFallback: true
84
108
  },
85
109
  components: {
86
110
  autoImport: true
87
111
  },
112
+ plugins: {
113
+ aos: false,
114
+ dialog: false,
115
+ toast: false,
116
+ wait: false
117
+ },
88
118
  composables: {
89
- useTheme: true,
90
- useAos: true,
91
- useToast: true,
92
- useDialog: true,
93
- useWait: true,
94
- useIdleTimeout: true,
95
- useReadingTime: true,
96
- useTranslations: true,
97
- useFormField: true,
98
- useWindowSize: true,
99
- useBreakpoints: true,
100
- useUserVisibility: true,
101
- useStringMatching: true,
102
- useTimer: true,
103
- useFormValidator: true,
104
- useDisplayNames: true,
105
- useFreezeValue: true,
106
- useInjectStrict: true,
107
- useInstanceUniqId: true,
108
- useMountComponent: true,
109
- useSwipe: true
119
+ ...pluginComposables,
120
+ ...mazUiComposables
110
121
  },
111
122
  directives: {
112
123
  vZoomImg: false,
@@ -116,7 +127,7 @@ const defaults = {
116
127
  vTooltip: false
117
128
  }
118
129
  };
119
- function addComposableImport({
130
+ function addMazUiComposableImport({
120
131
  name,
121
132
  from,
122
133
  prefix = ""
@@ -124,7 +135,7 @@ function addComposableImport({
124
135
  addImports({
125
136
  from,
126
137
  name,
127
- // typeFrom: `maz-ui/dist/types/composables/${name}.d.ts`,
138
+ typeFrom: `maz-ui/dist/types/composables/${name}.d.ts`,
128
139
  as: `use${capitalize(prefix)}${name.replace("use", "")}`
129
140
  });
130
141
  }
@@ -140,8 +151,16 @@ const module = defineNuxtModule({
140
151
  /* eslint-disable complexity, sonarjs/cognitive-complexity */
141
152
  setup(options, nuxt) {
142
153
  const { resolve } = createResolver(import.meta.url);
143
- nuxt.options.build.transpile = ["maz-ui", "@maz-ui/themes", ...nuxt.options.build.transpile];
144
- const moduleOptions = defu(nuxt.options.runtimeConfig.public.mazUi, options, defaults);
154
+ nuxt.options.build.transpile = [
155
+ "maz-ui",
156
+ "@maz-ui/themes",
157
+ ...nuxt.options.build.transpile
158
+ ];
159
+ const moduleOptions = defu(
160
+ nuxt.options.runtimeConfig.public.mazUi,
161
+ options,
162
+ defaults
163
+ );
145
164
  nuxt.options.runtimeConfig.public.mazUi = moduleOptions;
146
165
  if (moduleOptions.css.injectMainCss) {
147
166
  nuxt.options.css = ["maz-ui/dist/css/main.css", ...nuxt.options.css];
@@ -156,174 +175,78 @@ const module = defineNuxtModule({
156
175
  });
157
176
  }
158
177
  }
159
- if (moduleOptions.composables.useAos) {
178
+ const autoImportPrefix = moduleOptions.general.autoImportPrefix;
179
+ if (moduleOptions.plugins.aos) {
160
180
  addPlugin(resolve(_dirname, "./runtime/plugins/aos"));
161
- addComposableImport({
181
+ addImports({
162
182
  name: "useAos",
163
183
  from: resolve(_dirname, "./runtime/composables/useAos"),
164
- prefix: moduleOptions.general?.autoImportPrefix
184
+ as: `use${capitalize(autoImportPrefix)}Aos`
165
185
  });
166
- const injectAosCSS = typeof moduleOptions.composables.useAos === "object" && typeof moduleOptions.composables.useAos.injectCss === "boolean" ? moduleOptions.composables.useAos.injectCss : true;
186
+ const injectAosCSS = typeof moduleOptions.plugins.aos === "object" && typeof moduleOptions.plugins.aos.injectCss === "boolean" ? moduleOptions.plugins.aos.injectCss : true;
167
187
  if (injectAosCSS) {
168
188
  nuxt.options.css = ["maz-ui/aos-styles", ...nuxt.options.css];
169
189
  }
170
190
  }
171
- if (moduleOptions.directives.vZoomImg) {
172
- addPlugin(resolve(_dirname, "./runtime/plugins/v-zoom-img"));
173
- }
174
- if (moduleOptions.directives.vLazyImg) {
175
- addPlugin(resolve(_dirname, "./runtime/plugins/v-lazy-img"));
176
- }
177
- if (moduleOptions.directives.vClickOutside) {
178
- addPlugin(resolve(_dirname, "./runtime/plugins/v-click-outside"));
179
- }
180
- if (moduleOptions.directives.vFullscreenImg) {
181
- addPlugin(resolve(_dirname, "./runtime/plugins/v-fullscreen-img"));
182
- }
183
- if (moduleOptions.directives.vTooltip) {
184
- addPlugin(resolve(_dirname, "./runtime/plugins/v-tooltip"));
185
- }
186
- if (moduleOptions.composables.useToast) {
191
+ if (moduleOptions.plugins.toast) {
187
192
  addPlugin(resolve(_dirname, "./runtime/plugins/toast"));
188
- addComposableImport({
193
+ addImports({
189
194
  name: "useToast",
190
195
  from: resolve(_dirname, "./runtime/composables/useToast"),
191
- prefix: moduleOptions.general?.autoImportPrefix
196
+ as: `use${capitalize(autoImportPrefix)}Toast`
192
197
  });
193
198
  }
194
- if (moduleOptions.composables.useDialog) {
199
+ if (moduleOptions.plugins.dialog) {
195
200
  addPlugin(resolve(_dirname, "./runtime/plugins/dialog"));
196
- addComposableImport({
201
+ addImports({
197
202
  name: "useDialog",
198
203
  from: resolve(_dirname, "./runtime/composables/useDialog"),
199
- prefix: moduleOptions.general?.autoImportPrefix
204
+ as: `use${capitalize(autoImportPrefix)}Dialog`
200
205
  });
201
206
  }
202
- if (moduleOptions.composables.useWait) {
207
+ if (moduleOptions.plugins.wait) {
203
208
  addPlugin(resolve(_dirname, "./runtime/plugins/wait"));
204
- addComposableImport({
209
+ addImports({
205
210
  name: "useWait",
206
211
  from: resolve(_dirname, "./runtime/composables/useWait"),
207
- prefix: moduleOptions.general?.autoImportPrefix
208
- });
209
- }
210
- if (moduleOptions.composables.useIdleTimeout) {
211
- addComposableImport({
212
- name: "useIdleTimeout",
213
- from: "maz-ui/composables/useIdleTimeout",
214
- prefix: moduleOptions.general?.autoImportPrefix
215
- });
216
- }
217
- if (moduleOptions.composables.useReadingTime) {
218
- addComposableImport({
219
- name: "useReadingTime",
220
- from: "maz-ui/composables/useReadingTime",
221
- prefix: moduleOptions.general?.autoImportPrefix
222
- });
223
- }
224
- if (moduleOptions.composables.useWindowSize) {
225
- addComposableImport({
226
- name: "useWindowSize",
227
- from: "maz-ui/composables/useWindowSize",
228
- prefix: moduleOptions.general?.autoImportPrefix
229
- });
230
- }
231
- if (moduleOptions.composables.useBreakpoints) {
232
- addImports({
233
- from: "maz-ui/composables/useBreakpoints",
234
- name: "useBreakpoints",
235
- as: "useBreakpoints"
236
- });
237
- }
238
- if (moduleOptions.composables.useUserVisibility) {
239
- addComposableImport({
240
- name: "useUserVisibility",
241
- from: "maz-ui/composables/useUserVisibility",
242
- prefix: moduleOptions.general?.autoImportPrefix
243
- });
244
- }
245
- if (moduleOptions.composables.useStringMatching) {
246
- addComposableImport({
247
- name: "useStringMatching",
248
- from: "maz-ui/composables/useStringMatching",
249
- prefix: moduleOptions.general?.autoImportPrefix
250
- });
251
- }
252
- if (moduleOptions.composables.useTimer) {
253
- addComposableImport({
254
- name: "useTimer",
255
- from: "maz-ui/composables/useTimer",
256
- prefix: moduleOptions.general?.autoImportPrefix
212
+ as: `use${capitalize(autoImportPrefix)}Wait`
257
213
  });
258
214
  }
259
- if (moduleOptions.composables.useFreezeValue) {
260
- addComposableImport({
261
- name: "useFreezeValue",
262
- from: "maz-ui/composables/useFreezeValue",
263
- prefix: moduleOptions.general?.autoImportPrefix
264
- });
265
- }
266
- if (moduleOptions.composables.useInjectStrict) {
267
- addComposableImport({
268
- name: "useInjectStrict",
269
- from: "maz-ui/composables/useInjectStrict",
270
- prefix: moduleOptions.general?.autoImportPrefix
271
- });
272
- }
273
- if (moduleOptions.composables.useInstanceUniqId) {
274
- addComposableImport({
275
- name: "useInstanceUniqId",
276
- from: "maz-ui/composables/useInstanceUniqId",
277
- prefix: moduleOptions.general?.autoImportPrefix
278
- });
215
+ if (moduleOptions.directives.vZoomImg) {
216
+ addPlugin(resolve(_dirname, "./runtime/plugins/v-zoom-img"));
279
217
  }
280
- if (moduleOptions.composables.useMountComponent) {
281
- addComposableImport({
282
- name: "useMountComponent",
283
- from: "maz-ui/composables/useMountComponent",
284
- prefix: moduleOptions.general?.autoImportPrefix
285
- });
218
+ if (moduleOptions.directives.vLazyImg) {
219
+ addPlugin(resolve(_dirname, "./runtime/plugins/v-lazy-img"));
286
220
  }
287
- if (moduleOptions.composables.useSwipe) {
288
- addComposableImport({
289
- name: "useSwipe",
290
- from: "maz-ui/composables/useSwipe",
291
- prefix: moduleOptions.general?.autoImportPrefix
292
- });
221
+ if (moduleOptions.directives.vClickOutside) {
222
+ addPlugin(resolve(_dirname, "./runtime/plugins/v-click-outside"));
293
223
  }
294
- if (moduleOptions.composables.useFormValidator) {
295
- addComposableImport({
296
- name: "useFormValidator",
297
- from: "maz-ui/composables/useFormValidator",
298
- prefix: moduleOptions.general?.autoImportPrefix
299
- });
224
+ if (moduleOptions.directives.vFullscreenImg) {
225
+ addPlugin(resolve(_dirname, "./runtime/plugins/v-fullscreen-img"));
300
226
  }
301
- if (moduleOptions.composables.useFormField) {
302
- addComposableImport({
303
- name: "useFormField",
304
- from: "maz-ui/composables/useFormField",
305
- prefix: moduleOptions.general?.autoImportPrefix
306
- });
227
+ if (moduleOptions.directives.vTooltip) {
228
+ addPlugin(resolve(_dirname, "./runtime/plugins/v-tooltip"));
307
229
  }
308
- if (moduleOptions.composables.useDisplayNames) {
309
- addComposableImport({
310
- name: "useDisplayNames",
311
- from: "maz-ui/composables/useDisplayNames",
312
- prefix: moduleOptions.general?.autoImportPrefix
230
+ const allowedMazUiComposables = Object.keys(moduleOptions.composables).filter((composable) => mazUiComposables[composable]);
231
+ for (const composable of allowedMazUiComposables) {
232
+ addMazUiComposableImport({
233
+ name: composable,
234
+ from: `maz-ui/composables`,
235
+ prefix: autoImportPrefix
313
236
  });
314
237
  }
315
238
  if (moduleOptions.composables.useTheme) {
316
- addComposableImport({
239
+ addImports({
317
240
  name: "useTheme",
318
- from: "@maz-ui/themes/composables/useTheme",
319
- prefix: moduleOptions.general?.autoImportPrefix
241
+ from: "@maz-ui/themes",
242
+ as: `use${capitalize(autoImportPrefix)}Theme`
320
243
  });
321
244
  }
322
245
  if (moduleOptions.composables.useTranslations) {
323
- addComposableImport({
246
+ addImports({
324
247
  name: "useTranslations",
325
248
  from: "@maz-ui/translations",
326
- prefix: moduleOptions.general?.autoImportPrefix
249
+ as: `use${capitalize(autoImportPrefix)}Translations`
327
250
  });
328
251
  }
329
252
  if (moduleOptions.general.defaultMazIconPath) {
@@ -1,2 +0,0 @@
1
- import type { AosHandler } from 'maz-ui/plugins/aos';
2
- export declare function useAos(): AosHandler;
@@ -1,2 +0,0 @@
1
- import type { DialogHandler } from 'maz-ui/plugins/dialog';
2
- export declare function useDialog(): DialogHandler;
@@ -1,2 +0,0 @@
1
- import type { ToastHandler } from 'maz-ui/plugins/toast';
2
- export declare function useToast(): ToastHandler;
@@ -1,2 +0,0 @@
1
- import type { WaitHandler } from 'maz-ui/plugins/wait';
2
- export declare function useWait(): WaitHandler;
@@ -1,12 +0,0 @@
1
- import { AosHandler } from 'maz-ui/plugins/aos';
2
- declare const _default: import("#app").Plugin<{
3
- mazAos: AosHandler;
4
- }> & import("#app").ObjectPlugin<{
5
- mazAos: AosHandler;
6
- }>;
7
- export default _default;
8
- declare module '#app' {
9
- interface NuxtApp {
10
- $mazAos: AosHandler;
11
- }
12
- }
@@ -1,7 +1,7 @@
1
1
  import { AosHandler, AosPlugin } from "maz-ui/plugins/aos";
2
2
  import { defineNuxtPlugin, useRouter } from "nuxt/app";
3
3
  export default defineNuxtPlugin(({ $config, vueApp }) => {
4
- const aosOptions = $config.public.mazUi?.composables?.useAos;
4
+ const aosOptions = $config.public.mazUi?.plugins?.aos;
5
5
  const options = typeof aosOptions === "object" ? { ...aosOptions, router: aosOptions.router ? useRouter() : void 0 } : {};
6
6
  vueApp.use(AosPlugin, options);
7
7
  return {
@@ -1,12 +0,0 @@
1
- import { DialogHandler } from 'maz-ui/plugins/dialog';
2
- declare const _default: import("#app").Plugin<{
3
- mazDialog: DialogHandler;
4
- }> & import("#app").ObjectPlugin<{
5
- mazDialog: DialogHandler;
6
- }>;
7
- export default _default;
8
- declare module '#app' {
9
- interface NuxtApp {
10
- $mazDialog: DialogHandler;
11
- }
12
- }
@@ -1,7 +1,7 @@
1
1
  import { DialogHandler } from "maz-ui/plugins/dialog";
2
2
  import { defineNuxtPlugin } from "nuxt/app";
3
3
  export default defineNuxtPlugin(({ vueApp, $config }) => {
4
- const dialogOptions = $config.public.mazUi?.composables?.useDialog;
4
+ const dialogOptions = $config.public.mazUi?.plugins?.dialog;
5
5
  const options = typeof dialogOptions === "object" ? dialogOptions : void 0;
6
6
  const instance = new DialogHandler(vueApp, options);
7
7
  const dialogServer = {
@@ -1,11 +0,0 @@
1
- declare const _default: import("#app").Plugin<{
2
- mazIconPath: any;
3
- }> & import("#app").ObjectPlugin<{
4
- mazIconPath: any;
5
- }>;
6
- export default _default;
7
- declare module '#app' {
8
- interface NuxtApp {
9
- $mazIconPath: string;
10
- }
11
- }
@@ -1,8 +0,0 @@
1
- import { type ThemeState } from '@maz-ui/themes';
2
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
3
- export default _default;
4
- declare module '#app' {
5
- interface NuxtApp {
6
- $mazThemeState: ThemeState;
7
- }
8
- }
@@ -1,12 +1,10 @@
1
- import {
2
- generateFullCSS,
3
- mergePresets
4
- } from "@maz-ui/themes";
5
1
  import { MazUiTheme } from "@maz-ui/themes/plugin";
6
- import { getPreset } from "@maz-ui/themes/utils";
7
- import { generateCriticalCSS } from "@maz-ui/themes/utils/css-generator";
2
+ import { CSS_IDS, generateCriticalCSS, generateFullCSS, getPreset, mergePresets } from "@maz-ui/themes/utils";
8
3
  import { defineNuxtPlugin, useCookie, useHead, useRequestHeaders } from "nuxt/app";
9
- function getServerInitialColorMode() {
4
+ function getServerInitialColorMode(colorMode) {
5
+ if (colorMode !== "auto") {
6
+ return colorMode;
7
+ }
10
8
  const colorModeCookie = useCookie("maz-color-mode");
11
9
  if (colorModeCookie.value && ["light", "dark", "auto"].includes(colorModeCookie.value)) {
12
10
  return colorModeCookie.value;
@@ -23,70 +21,81 @@ function getServerInitialColorMode() {
23
21
  }
24
22
  return "auto";
25
23
  }
26
- function getServerIsDark(colorMode) {
27
- return colorMode === "dark";
24
+ function injectThemeCSS({
25
+ mode,
26
+ preset,
27
+ config
28
+ }) {
29
+ const cssOptions = {
30
+ mode,
31
+ darkSelectorStrategy: config.darkModeStrategy ?? "class",
32
+ prefix: "maz"
33
+ };
34
+ if (config.injectCriticalCSS) {
35
+ const criticalCSS = generateCriticalCSS(preset, cssOptions);
36
+ useHead({
37
+ style: [{ innerHTML: criticalCSS, id: CSS_IDS.CRITICAL }]
38
+ });
39
+ }
40
+ if (config.injectAllCSSOnServer) {
41
+ const fullCSS = generateFullCSS(preset, cssOptions);
42
+ useHead({
43
+ style: [{ innerHTML: fullCSS, id: CSS_IDS.FULL }]
44
+ });
45
+ }
46
+ }
47
+ function getInjectCSSStates(config) {
48
+ const criticalCSSAlreadyInjected = import.meta.client && !!document.getElementById(CSS_IDS.CRITICAL);
49
+ const shouldInjectCriticalCSSOnClient = !!config.injectCriticalCSS && import.meta.client && !criticalCSSAlreadyInjected;
50
+ const fullCSSAlreadyInjected = import.meta.client && !!document.getElementById(CSS_IDS.FULL);
51
+ const shouldInjectFullCSSOnClient = !!config.injectFullCSS && import.meta.client && !fullCSSAlreadyInjected;
52
+ return {
53
+ shouldInjectCriticalCSSOnClient,
54
+ shouldInjectFullCSSOnClient
55
+ };
28
56
  }
29
57
  export default defineNuxtPlugin(async ({ vueApp, $config }) => {
30
- const themeConfig = $config.public.mazUi?.theme;
31
- let preset = await getPreset(themeConfig?.preset);
32
- if (themeConfig?.overrides) {
33
- preset = mergePresets(preset, themeConfig.overrides);
58
+ const options = $config.public.mazUi.theme;
59
+ let preset = await getPreset(options?.preset);
60
+ if (options?.overrides) {
61
+ preset = mergePresets(preset, options.overrides);
34
62
  }
35
63
  const config = {
36
64
  strategy: "hybrid",
37
65
  darkModeStrategy: "class",
38
- prefix: "maz",
39
- colorMode: "auto",
40
- injectFullCSSOnServer: true,
41
- ...themeConfig,
66
+ colorMode: options.mode && options.mode !== "both" ? options.mode : options.colorMode ?? "auto",
67
+ mode: "both",
68
+ injectAllCSSOnServer: false,
69
+ injectCriticalCSS: true,
70
+ injectFullCSS: true,
71
+ overrides: {},
72
+ ...options,
42
73
  preset
43
74
  };
44
- const initialColorMode = config.colorMode === "auto" ? getServerInitialColorMode() : config.colorMode ?? "auto";
45
- const serverIsDark = getServerIsDark(initialColorMode);
46
- const initialIsDark = initialColorMode === "dark" || initialColorMode === "auto" && serverIsDark;
47
- const themeState = {
48
- currentPreset: config.preset,
49
- colorMode: initialColorMode,
50
- isDark: initialIsDark,
51
- strategy: config.strategy,
52
- darkModeStrategy: config.darkModeStrategy
53
- };
54
- if (import.meta.server) {
55
- const cssOptions = {
56
- mode: config.colorMode === "auto" ? "both" : config.colorMode,
57
- darkSelectorStrategy: config.darkModeStrategy ?? "class",
58
- prefix: config.prefix
59
- };
60
- const criticalCSS = generateCriticalCSS(themeState.currentPreset, cssOptions);
75
+ const colorMode = config.mode !== "both" ? config.mode : getServerInitialColorMode(config.colorMode);
76
+ const isDark = colorMode === "auto" && config.mode === "both" ? getServerInitialColorMode(config.colorMode) === "dark" : colorMode === "dark" || config.mode === "dark";
77
+ if (isDark && config.darkModeStrategy === "class") {
61
78
  useHead({
62
- style: [
63
- {
64
- innerHTML: criticalCSS,
65
- id: "maz-theme-critical"
66
- }
67
- ]
79
+ htmlAttrs: {
80
+ class: "dark"
81
+ }
82
+ });
83
+ }
84
+ const { shouldInjectCriticalCSSOnClient, shouldInjectFullCSSOnClient } = getInjectCSSStates(config);
85
+ if (import.meta.server) {
86
+ injectThemeCSS({
87
+ mode: config.mode,
88
+ preset: config.preset,
89
+ config
68
90
  });
69
- if (config.injectFullCSSOnServer) {
70
- const fullCSS = generateFullCSS(themeState.currentPreset, cssOptions);
71
- useHead({
72
- style: [{ innerHTML: fullCSS, id: "maz-theme-full" }]
73
- });
74
- }
75
- if (initialIsDark && config.darkModeStrategy === "class") {
76
- useHead({
77
- htmlAttrs: {
78
- class: "dark"
79
- }
80
- });
81
- }
82
91
  }
83
92
  MazUiTheme.install(vueApp, {
84
- ...config,
85
- preset: themeState.currentPreset,
86
- colorMode: themeState.colorMode,
87
- strategy: themeState.strategy,
88
- darkModeStrategy: themeState.darkModeStrategy,
89
- injectFullCSS: !config.injectFullCSSOnServer,
90
- injectCriticalCSS: false
93
+ colorMode,
94
+ preset: config.preset,
95
+ strategy: config.strategy,
96
+ darkModeStrategy: config.darkModeStrategy,
97
+ mode: config.mode,
98
+ injectFullCSS: shouldInjectFullCSSOnClient,
99
+ injectCriticalCSS: shouldInjectCriticalCSSOnClient
91
100
  });
92
101
  });
@@ -1,12 +0,0 @@
1
- import { ToastHandler } from 'maz-ui/plugins/toast';
2
- declare const _default: import("#app").Plugin<{
3
- mazToast: ToastHandler;
4
- }> & import("#app").ObjectPlugin<{
5
- mazToast: ToastHandler;
6
- }>;
7
- export default _default;
8
- declare module '#app' {
9
- interface NuxtApp {
10
- $mazToast: ToastHandler;
11
- }
12
- }
@@ -1,7 +1,7 @@
1
1
  import { ToastHandler } from "maz-ui/plugins/toast";
2
2
  import { defineNuxtPlugin } from "nuxt/app";
3
3
  export default defineNuxtPlugin(({ vueApp, $config }) => {
4
- const toastOptions = $config.public.mazUi?.composables?.useToast;
4
+ const toastOptions = $config.public.mazUi?.plugins?.toast;
5
5
  const options = typeof toastOptions === "object" ? toastOptions : void 0;
6
6
  const instance = new ToastHandler(vueApp, options);
7
7
  const toastServer = {
@@ -1,8 +0,0 @@
1
- import { type MazTranslationsInstance } from '@maz-ui/translations';
2
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
3
- export default _default;
4
- declare module '#app' {
5
- interface NuxtApp {
6
- $mazTranslations: MazTranslationsInstance;
7
- }
8
- }
@@ -1,6 +1,19 @@
1
1
  import { MazTranslations } from "@maz-ui/translations";
2
2
  import { defineNuxtPlugin } from "nuxt/app";
3
3
  export default defineNuxtPlugin(async ({ vueApp, $config }) => {
4
- const translationsOptions = $config.public.mazUi?.translations;
5
- await MazTranslations.install(vueApp, translationsOptions);
4
+ const translationsOptions = $config.public.mazUi.translations || {};
5
+ const i18n = MazTranslations.install(vueApp, translationsOptions);
6
+ if (import.meta.server) {
7
+ const locale = translationsOptions.locale || "en";
8
+ const fallbackLocale = translationsOptions.fallbackLocale || "en";
9
+ try {
10
+ await i18n.setLocale(locale);
11
+ if (locale !== fallbackLocale && translationsOptions.preloadFallback !== false) {
12
+ await i18n.setLocale(fallbackLocale);
13
+ await i18n.setLocale(locale);
14
+ }
15
+ } catch (error) {
16
+ console.warn("Failed to preload locale:", error);
17
+ }
18
+ }
6
19
  });
@@ -1,2 +0,0 @@
1
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
2
- export default _default;
@@ -1,4 +1,6 @@
1
- import { vFullscreenImgInstall } from "maz-ui/directives/vFullscreenImg";
1
+ import {
2
+ vFullscreenImgInstall
3
+ } from "maz-ui/directives/vFullscreenImg";
2
4
  import { defineNuxtPlugin } from "nuxt/app";
3
5
  export default defineNuxtPlugin(({ vueApp }) => {
4
6
  vueApp.use(vFullscreenImgInstall);
@@ -1,2 +0,0 @@
1
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
2
- export default _default;
@@ -1,12 +0,0 @@
1
- import { WaitHandler } from 'maz-ui/plugins/wait';
2
- declare const _default: import("#app").Plugin<{
3
- mazWait: WaitHandler;
4
- }> & import("#app").ObjectPlugin<{
5
- mazWait: WaitHandler;
6
- }>;
7
- export default _default;
8
- declare module '#app' {
9
- interface NuxtApp {
10
- $mazWait: WaitHandler;
11
- }
12
- }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maz-ui/nuxt",
3
3
  "type": "module",
4
- "version": "4.0.0-beta.3",
4
+ "version": "4.0.0-beta.33",
5
5
  "description": "Nuxt module for Maz-UI",
6
6
  "author": "Louis Mazel <me@loicmazuel.com>",
7
7
  "license": "MIT",
@@ -46,35 +46,34 @@
46
46
  ],
47
47
  "scripts": {
48
48
  "prepack": "nuxt-module-build build",
49
- "build": "pnpm prepare && nuxt-module-build build",
50
- "prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
51
- "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
49
+ "build": "pnpm dev && nuxt-module-build build",
50
+ "dev": "nuxt-module-build build --stub && nuxt-module-build prepare",
52
51
  "lint": "cross-env NODE_ENV=production eslint .",
53
52
  "lint:fix": "pnpm lint --fix",
54
- "format": "prettier --ignore-path .gitignore . --write",
55
- "typecheck": "vue-tsc --noEmit --skipLibCheck --project tsconfig.check.json",
56
- "release": "npm run lint && npm run prepack && changelogen --release && npm publish && git push --follow-tags"
53
+ "typecheck": "nuxi typecheck"
54
+ },
55
+ "peerDependencies": {
56
+ "nuxt": ">=3.4.0 <5.0.0"
57
57
  },
58
58
  "dependencies": {
59
- "@maz-ui/themes": "4.0.0-beta.3",
60
- "@maz-ui/translations": "4.0.0-beta.3",
61
- "@nuxt/kit": "^3.17.4",
59
+ "@maz-ui/themes": "4.0.0-beta.27",
60
+ "@maz-ui/translations": "4.0.0-beta.27",
61
+ "@nuxt/kit": "^4.0.3",
62
62
  "defu": "^6.1.4",
63
- "maz-ui": "4.0.0-beta.3"
63
+ "maz-ui": "4.0.0-beta.33"
64
64
  },
65
65
  "devDependencies": {
66
- "@nuxt/devtools": "^2.4.1",
67
- "@nuxt/eslint-config": "^1.4.1",
68
- "@nuxt/module-builder": "^1.0.1",
69
- "@nuxt/schema": "^3.17.4",
70
- "@nuxt/test-utils": "^3.19.1",
71
- "nuxt": "^3.17.4",
72
- "typescript": "~5.8.3",
66
+ "@nuxt/devtools": "^2.6.2",
67
+ "@nuxt/eslint-config": "^1.7.1",
68
+ "@nuxt/module-builder": "^1.0.2",
69
+ "@nuxt/schema": "^4.0.3",
70
+ "@nuxt/test-utils": "^3.19.2",
71
+ "nuxt": "^4.0.3",
72
+ "typescript": "~5.9.2",
73
73
  "vitest": "^3.2.4"
74
74
  },
75
75
  "lint-staged": {
76
- "*": "prettier -w -u",
77
- "*.{js,ts,mjs,mts,cjs,md}": "cross-env NODE_ENV=production eslint --fix"
76
+ "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
78
77
  },
79
- "gitHead": "f244a338c386a818da90b083800e0fe5f37bf655"
78
+ "gitHead": "9642333b9fdbd396ba03b613b74b209174ba1b7b"
80
79
  }