@maz-ui/nuxt 4.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LouisMazel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,299 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# @maz-ui/nuxt
+
+✨ **The Ultimate Nuxt Module for Beautiful Vue.js Components** ✨
+
+Transform your Nuxt application with **Maz-UI** - a comprehensive Vue.js component library that makes building beautiful interfaces effortless!
+
+[![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?
+
+**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?
+
+- **🚀 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!)
+
+### Step 1: Install the module
+
+```bash
+# Choose your package manager
+npm install @maz-ui/nuxt
+# or
+pnpm add @maz-ui/nuxt
+# or
+yarn add @maz-ui/nuxt
+```
+
+### Step 2: Add to your Nuxt config
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@maz-ui/nuxt'],
+})
+```
+
+**That's it! 🎉** All components, composables, and features are now available in your app!
+
+### Step 3: Start using components
+
+```vue
+<script setup>
+// All composables are auto-imported too!
+const toast = useToast()
+const { isDark, toggleDarkMode } = useTheme()
+
+function showMessage() {
+  toast.success('Welcome to Maz-UI! 🎉')
+}
+</script>
+
+<template>
+  <div>
+    <!-- All components are auto-imported! -->
+    <MazBtn color="primary" @click="showMessage">
+      Click me!
+    </MazBtn>
+
+    <!-- Composables work everywhere -->
+    <MazCard class="mt-4">
+      <h2>Welcome to Maz-UI!</h2>
+      <p>Current theme: {{ isDark ? 'Dark' : 'Light' }}</p>
+    </MazCard>
+
+    <!-- Directives are ready to use -->
+    <div v-tooltip="'Hello World!'">
+      Hover me for tooltip
+    </div>
+  </div>
+</template>
+```
+
+## 🎨 What You Get Out of the Box
+
+### 🧩 50+ Beautiful Components
+
+- **Buttons**: `MazBtn`,
+- **Forms**: `MazInput`, `MazSelect`, `MazCheckbox`, `MazRadio`, `MazTextarea`, `MazInputPhoneNumber`
+- **Overlay**: `MazDropdown`, `MazPopover`
+- **Navigation**: `MazTabs`, `MazStepper`, `MazPagination`
+- **Data Display**: `MazTable`, `MazCard`, `MazBadge`, `MazAvatar`
+- **Media**: `MazCarousel`, `MazGallery`, `MazLazyImg`
+- **Feedback**: `MazDialog`, `MazToast`, `MazSpinner`, `MazLoadingBar`
+- **Charts**: `MazChart` (with Chart.js integration)
+- **And 30+ more!**
+
+### 🎪 20+ Powerful Composables
+
+- **`useTheme()`** - Theme management and dark mode
+- **`useToast()`** - Beautiful toast notifications
+- **`useDialog()`** - Modal dialogs made easy
+- **`useAos()`** - Smooth scroll animations
+- **`useTimer()`** - Countdown and timer functionality
+- **`useWindowSize()`** - Reactive window dimensions
+- **`useBreakpoints()`** - Responsive design helpers
+- **And many more!**
+
+### 🎯 Smart Directives
+
+- **`v-tooltip`** - Beautiful tooltips anywhere
+- **`v-lazy-img`** - Lazy load images automatically
+- **`v-zoom-img`** - Click to zoom images
+- **`v-click-outside`** - Detect outside clicks
+- **`v-fullscreen-img`** - Fullscreen image viewer
+
+## 🌈 Theming Made Simple
+
+Maz-UI comes with a powerful theming system that makes your app look professional instantly:
+
+```vue
+<script setup>
+// Switch between built-in themes
+const { updateTheme, toggleDarkMode } = useTheme()
+
+async function changeToOceanTheme() {
+  const { ocean } = await import('@maz-ui/themes')
+  updateTheme(ocean)
+}
+</script>
+
+<template>
+  <div>
+    <MazBtn @click="toggleDarkMode">
+      🌙 Toggle Dark Mode
+    </MazBtn>
+
+    <MazBtn @click="changeToOceanTheme">
+      🌊 Ocean Theme
+    </MazBtn>
+  </div>
+</template>
+```
+
+**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
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@maz-ui/nuxt'],
+  mazUi: {
+    // 🎛️ General Settings
+    general: {
+      autoImportPrefix: 'Maz', // useMazToast instead of useToast
+      defaultMazIconPath: '/icons', // Path to your SVG icons
+      devtools: true, // Enable DevTools integration
+    },
+
+    // 🎨 Theme System
+    theme: {
+      preset: 'ocean', // Choose: 'mazUi', 'ocean', 'pristine', 'obsidian'
+      strategy: 'hybrid', // 'runtime' | 'buildtime' | 'hybrid'
+      darkModeStrategy: 'class', // 'class' | 'media' | 'auto'
+    },
+
+    // 🌐 Translations
+    translations: {
+      locale: 'fr', // Default language
+      fallbackLocale: 'en',
+    },
+
+    // 🧩 Components (all enabled by default)
+    components: {
+      autoImport: true, // Auto-import all components globally
+    },
+
+    // 🎪 Composables (customize what you need)
+    composables: {
+      useTheme: true,
+      useToast: true,
+      useDialog: true,
+      useAos: {
+        injectCss: true, // Include AOS animations CSS
+        router: true, // Re-trigger on route change
+      },
+      // ... all others enabled by default
+    },
+
+    // 🎯 Directives
+    directives: {
+      vTooltip: true,
+      vLazyImg: { threshold: 0.1 }, // Custom intersection threshold
+      vClickOutside: true,
+      vFullscreenImg: true,
+      vZoomImg: true,
+    },
+  },
+})
+```
+
+## 🛠️ Advanced Features
+
+### Custom Theme Creation
+
+```ts
+import { definePreset } from '@maz-ui/themes'
+// themes/my-theme.ts
+export const myCustomTheme = definePreset({
+  base: 'maz-ui',
+  overrides: {
+    colors: {
+      primary: '350 100% 50%',
+      secondary: '350 14% 96%',
+      background: '0 0% 100%',
+      // ... more colors
+    },
+  },
+})
+```
+
+```ts
+// nuxt.config.ts
+import { myCustomTheme } from './themes/my-theme'
+
+export default defineNuxtConfig({
+  modules: ['@maz-ui/nuxt'],
+  mazUi: {
+    theme: {
+      preset: myCustomTheme,
+    },
+  },
+})
+```
+
+## 📱 SSR/SSG Support
+
+This module is built specifically for Nuxt with perfect SSR and SSG support:
+
+- ✅ **Server-Side Rendering** - Components render perfectly on the server
+- ✅ **Static Site Generation** - Works great with `nuxt generate`
+- ✅ **Hydration** - Smooth client-side takeover
+- ✅ **Theme Persistence** - Dark mode preference remembered
+- ✅ **No FOUC** - Flash of unstyled content prevented
+
+## 🎯 Why This Module vs Manual Setup?
+
+| Feature          | Manual Setup          | @maz-ui/nuxt Module           |
+| ---------------- | --------------------- | ----------------------------- |
+| **Setup Time**   | 30+ minutes           | 2 minutes                     |
+| **Auto Imports** | Manual imports needed | ✅ Everything auto-imported   |
+| **SSR Support**  | Complex configuration | ✅ Works out of the box       |
+| **Theme System** | Manual CSS management | ✅ Automatic theme switching  |
+| **Bundle Size**  | Full library imported | ✅ Tree-shaking optimized     |
+| **DevTools**     | No integration        | ✅ Nuxt DevTools support      |
+| **TypeScript**   | Manual type setup     | ✅ Perfect TypeScript support |
+
+## 📚 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)**
+
+## 🤝 Contributing
+
+We love contributions! Check out our [Contributing Guide](https://github.com/LouisMazel/maz-ui/blob/main/CONTRIBUTING.md).
+
+## 📄 License
+
+MIT License © 2025 [LouisMazel](https://github.com/LouisMazel)
+
+---
+
+<div align="center">
+
+**Built with ❤️ for the Vue.js and Nuxt community**
+
+[⭐ Give it a star on GitHub!](https://github.com/LouisMazel/maz-ui)
+
+</div>

package/dist/module.d.mts

@@ -0,0 +1,275 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { MazUiThemeOptions } from '@maz-ui/themes';
+import { MazTranslationsOptions } from '@maz-ui/translations';
+import { VLazyImgOptions, VFullscreenImgOptions, VTooltipOptions } from 'maz-ui/directives';
+import { AosOptions, ToastOptions, DialogOptions } 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
+     */
+    injectFullCSSOnServer?: boolean;
+}
+interface MazUiNuxtOptions {
+    /**
+     * General configuration
+     */
+    general?: {
+        /**
+         * Prefix for auto-imported composables and directives
+         * @description This prefix will be added after the `use` keyword and `v` keyword
+         * @example `autoImportPrefix: 'Maz'` will generate `useMazToast` instead of `useToast` and `vMazZoomImg` instead of `vZoomImg`
+         * @default ''
+         */
+        autoImportPrefix?: string;
+        /**
+         * Default path to public SVG icons folder for `<MazIcon />` component
+         * @description Relative path from the public directory
+         * @example '/icons' to access icons in `public/icons/`
+         * @default ''
+         */
+        defaultMazIconPath?: string;
+        /**
+         * Enable Nuxt DevTools integration
+         * @description Adds a Maz-UI tab in Nuxt development tools
+         * @default true
+         */
+        devtools?: boolean;
+    };
+    /**
+     * Theme system configuration
+     * @description If false, the theme system will be completely disabled
+     * @default {
+     *   preset: 'maz-ui',
+     *   strategy: 'hybrid',
+     *   darkModeStrategy: 'class',
+     *   prefix: 'maz',
+     *   colorMode: 'auto',
+     * }
+     */
+    theme?: MazUiNuxtThemeOptions;
+    /**
+     * Translations configuration
+     * @description If false, the translations system will be completely disabled
+     * @default {
+     *   locale: 'en',
+     * }
+     */
+    translations?: MazTranslationsOptions;
+    /**
+     * CSS and styles configuration
+     */
+    css?: {
+        /**
+         * Auto-import Maz-UI main CSS file
+         * @description Automatically injects Maz-UI base styles
+         * @default true
+         */
+        injectMainCss?: boolean;
+    };
+    /**
+     * Components configuration
+     */
+    components?: {
+        /**
+         * Auto-import all Maz-UI components
+         * @description Makes all Maz-UI components available globally without explicit imports
+         * @default true
+         */
+        autoImport?: boolean;
+    };
+    /**
+     * Composables configuration
+     */
+    composables?: {
+        /**
+         * Enable auto-import of useTranslations composable
+         * @description Provides translations functionality from `@maz-ui/translations` package
+         * @default true
+         */
+        useTranslations?: boolean;
+        /**
+         * Enable auto-import of useTheme composable
+         * @description Provides theme management functionality (toggle dark mode, change themes, etc.) from `@maz-ui/themes` package
+         * @default false
+         */
+        useTheme?: boolean;
+        /**
+         * Enable auto-import of useAos composable and install AOS plugin
+         * @description Animation On Scroll functionality with advanced configuration options
+         * @default true
+         */
+        useAos?: boolean | (Omit<AosOptions, 'router'> & {
+            /**
+             * Auto inject AOS CSS file
+             * @default true
+             */
+            injectCss?: boolean;
+            /**
+             * Re-run animations on page change (for SPA navigation)
+             * @default false
+             */
+            router?: boolean;
+        });
+        /**
+         * Enable auto-import of useToast composable and install Toast plugin
+         * @description Toast notifications functionality
+         * @default true
+         */
+        useToast?: boolean | ToastOptions;
+        /**
+         * Enable auto-import of useDialog composable and install Dialog plugin
+         * @description Modal dialogs functionality
+         * @default true
+         */
+        useDialog?: boolean | DialogOptions;
+        /**
+         * Enable auto-import of useWait composable and install Wait plugin
+         * @description Loading state management functionality
+         * @default true
+         */
+        useWait?: boolean;
+        /**
+         * Enable auto-import of useIdleTimeout composable
+         * @description Detect user idle state and execute callbacks
+         * @default true
+         */
+        useIdleTimeout?: boolean;
+        /**
+         * Enable auto-import of useReadingTime composable
+         * @description Calculate estimated reading time for text content
+         * @default true
+         */
+        useReadingTime?: boolean;
+        /**
+         * Enable auto-import of useWindowSize composable
+         * @description Reactive window dimensions tracking
+         * @default true
+         */
+        useWindowSize?: boolean;
+        /**
+         * Enable auto-import of useBreakpoints composable
+         * @description Responsive breakpoints detection and utilities
+         * @default true
+         */
+        useBreakpoints?: boolean;
+        /**
+         * Enable auto-import of useUserVisibility composable
+         * @description Detect when user is viewing the page (Page Visibility API)
+         * @default true
+         */
+        useUserVisibility?: boolean;
+        /**
+         * Enable auto-import of useStringMatching composable
+         * @description String matching and filtering utilities
+         * @default true
+         */
+        useStringMatching?: boolean;
+        /**
+         * Enable auto-import of useTimer composable
+         * @description Timer and countdown functionality
+         * @default true
+         */
+        useTimer?: boolean;
+        /**
+         * Enable auto-import of useFormField composable
+         * @description Form field management (should be used with useFormValidator)
+         * @default true
+         */
+        useFormField?: boolean;
+        /**
+         * Enable auto-import of useFormValidator and useFormField composables
+         * @description Form validation utilities and field management
+         * @default true
+         */
+        useFormValidator?: boolean;
+        /**
+         * Enable auto-import of useDisplayNames composable
+         * @description Get localized language display names
+         * @default true
+         */
+        useDisplayNames?: boolean;
+        /**
+         * Enable auto-import of useFreezeValue composable
+         * @description Freeze values to prevent mutation
+         * @default true
+         */
+        useFreezeValue?: boolean;
+        /**
+         * Enable auto-import of useInjectStrict composable
+         * @description Inject strict types for components
+         * @default true
+         */
+        useInjectStrict?: boolean;
+        /**
+         * Enable auto-import of useInstanceUniqId composable
+         * @description Generate unique IDs for components
+         * @default true
+         */
+        useInstanceUniqId?: boolean;
+        /**
+         * Enable auto-import of useMountComponent composable
+         * @description Mount components on the DOM
+         * @default true
+         */
+        useMountComponent?: boolean;
+        /**
+         * Enable auto-import of useSwipe composable
+         * @description Swipe gesture detection and handling
+         * @default true
+         */
+        useSwipe?: boolean;
+    };
+    /**
+     * Vue directives configuration
+     */
+    directives?: {
+        /**
+         * Install v-zoom-img directive globally
+         * @description Enables image zoom functionality on click
+         * @default false
+         */
+        vZoomImg?: boolean;
+        /**
+         * Install v-lazy-img directive globally
+         * @description Lazy loading for images with intersection observer
+         * @default false
+         */
+        vLazyImg?: boolean | VLazyImgOptions;
+        /**
+         * Install v-click-outside directive globally
+         * @description Detect clicks outside of an element
+         * @default false
+         */
+        vClickOutside?: boolean;
+        /**
+         * Install v-fullscreen-img directive globally
+         * @description Fullscreen image viewer functionality
+         * @default false
+         */
+        vFullscreenImg?: boolean | VFullscreenImgOptions;
+        /**
+         * Install v-tooltip directive globally
+         * @description Tooltip functionality for any element
+         * @default false
+         */
+        vTooltip?: boolean | VTooltipOptions;
+    };
+}
+
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        mazUi?: MazUiNuxtOptions;
+    }
+    interface NuxtOptions {
+        mazUi: MazUiNuxtOptions;
+    }
+    interface PublicRuntimeConfig {
+        mazUi: MazUiNuxtOptions;
+    }
+}
+declare const _default: _nuxt_schema.NuxtModule<MazUiNuxtOptions, MazUiNuxtOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "maz-ui",
+  "configKey": "mazUi",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "version": "4.0.0-beta.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
+  }
+}