maz-ui 3.49.2 → 3.50.0

package/README.md

@@ -1,71 +1,151 @@
-# maz-ui
+<div align="center">
+  <img src="https://maz-ui.com/img/logo.svg" alt="Maz UI Logo" width="100">
+
+  <h1>Maz UI</h1>
+  <p>
+    <strong>
+      Lightweight and efficient library for Vue 3 & Nuxt 3
+    </strong>
+  </p>
+</div>
+
+<p align="center">
+  <a href="https://vuejs.org"><img src="https://img.shields.io/badge/vue-3-42b983.svg" alt="vue 3"></a>
+  <a href="https://v3.nuxtjs.org"><img src="https://img.shields.io/badge/nuxt-3-42b983.svg" alt="nuxt 3"></a>
+  <a href="https://www.npmjs.com/package/maz-ui"><img src="https://img.shields.io/npm/v/maz-ui/latest.svg" alt="npm"></a>
+  <a href="https://www.npmjs.com/package/maz-ui"><img src="https://badgen.net/npm/types/maz-ui" alt="types"></a>
+  <a href="https://npm-stat.com/charts.html?package=maz-ui"><img src="https://badgen.net/npm/dm/maz-ui" alt="Downloads"></a>
+</p>
+
+<p align="center">
+  <a href="https://codeclimate.com/github/LouisMazel/maz-ui/maintainability"><img src="https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/maintainability" alt="maintainability"></a>
+  <a href="https://codeclimate.com/github/LouisMazel/maz-ui/test_coverage"><img src="https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage" alt="test coverage"></a>
+  <img src="https://github.com/LouisMazel/maz-ui/actions/workflows/lib-test-unit.yml/badge.svg" alt="github actions test unit">
+</p>
+
+<h3 align="center">
+  <a href="https://maz-ui.com">Documentation</a>
+  <span> · </span>
+  <a href="https://maz-ui.com/guide/getting-started">Getting Started</a>
+  <span> · </span>
+  <a href="https://maz-ui.com/made-with-maz-ui">Showcase</a>
+</h3>
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./resources/dashboard-dark.png">
+    <img src="./resources/dashboard-light.png" alt="Maz UI Demo Dashboard" width="100%" style="border-radius: 1rem;">
+  </picture>
+  <br>
+  <sub><i>Example of a dashboard built with Maz UI components</i></sub>
+</p>
+
+## ✨ Features
+
+- 🎯 **Cherry-pick components** - Use only what you need
+- 🌙 **Dark mode** - Built-in dark mode support
+- 🎨 **Themeable** - Easy to customize with CSS variables
+- 📱 **Responsive** - Mobile-first design approach
+- 🔧 **TypeScript** - Full type support included
+- ⚡️ **Lightweight** - Tree-shakeable, no bloat
+- 🔍 **SSR** - Server-side rendering ready
+
+## 🚀 Quick Start
 
-[![vue 3](https://img.shields.io/badge/vue-3-42b983.svg)](https://vuejs.org)
-[![nuxt 3](https://img.shields.io/badge/nuxt-3-42b983.svg)](https://v3.nuxtjs.org/)
-
-[![types](https://badgen.net/npm/types/maz-ui)](https://www.npmjs.com/package/maz-ui)
-[![npm](https://img.shields.io/npm/v/maz-ui/latest.svg)](https://www.npmjs.com/package/maz-ui)
-[![license](https://badgen.net/npm/license/lodash)](https://www.npmjs.com/package/maz-ui)
-[![Downloads](https://badgen.net/npm/dm/maz-ui)](https://npm-stat.com/charts.html?package=maz-ui)
-
-<!-- [![bundlephobia_tree](https://badgen.net/bundlephobia/tree-shaking/maz-ui)](https://bundlephobia.com/package/maz-ui)
-[![bundlephobia_zip](https://badgen.net/bundlephobia/min/maz-ui)](https://bundlephobia.com/package/maz-ui)
-[![bundlephobia_zip](https://badgen.net/bundlephobia/minzip/maz-ui)](https://bundlephobia.com/package/maz-ui)
-[![bundlephobia_deps](https://badgen.net/bundlephobia/dependency-count/maz-ui)](https://bundlephobia.com/package/maz-ui) -->
+```bash
+npm install maz-ui
+```
 
-[![maintainability](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/maintainability)](https://codeclimate.com/github/LouisMazel/maz-ui/maintainability)
-[![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/LouisMazel/maz-ui/test_coverage)
-![github-actions-test-unit](https://github.com/LouisMazel/maz-ui/actions/workflows/lib-test-unit.yml/badge.svg)
+### Vue 3
 
-> [maz-ui](https://maz-ui.com/) is a standalone components library and tools for [Vue.JS](https://vuejs.org) & [Nuxt.JS](https://nuxtjs.org/) (v3.x)
+```ts
+// main.ts
+import 'maz-ui/styles'
+```
 
-## Documentation & Components
+#### 💡 Usage
 
-[Documentation & Components](https://maz-ui.com/)
+Then, import and use only the components, composables, and more you need:
 
-## Install
+```vue
+<template>
+  <MazBtn>Click me!</MazBtn>
+</template>
 
-### maz-ui
+<script setup lang="ts">
+  import MazBtn from 'maz-ui/components/MazBtn'
+</script>
+```
 
-[Getting Started](https://maz-ui.com/guide/getting-started)
+Use provided resolvers to enjoy auto-imports and TypeScript support: [Resolvers documentation](https://maz-ui.com/guide/getting-started#recommendations)
 
-```bash
-npm install maz-ui
-```
+### Nuxt 3
 
-### Nuxt Module
+The Nuxt module automatically:
 
-[Documentation](https://maz-ui.com/guide/nuxt)
+- Imports all components, plugins, composables and directives on-demand (auto-imports)
+- Includes required styles
+- Provides TypeScript support out of the box
 
-```bash
-npm install maz-ui
-```
+[See options and more in the documentation](https://maz-ui.com/guide/nuxt)
 
 ```ts
-// nuxt.config.js
-
+// nuxt.config.ts
 export default defineNuxtConfig({
   modules: ['maz-ui/nuxt'],
-  mazUi: {
-    // Options
-  },
 })
 ```
 
-All options of the module are available [here](https://maz-ui.com/guide/nuxt)
+#### 💡 Usage
 
-### @mazui/cli (theme generator)
+No need to import components, plugins, composables or directives, they are all auto-imported.
 
-[Documentation & Commands](https://maz-ui.com/guide/cli)
+```vue
+<template>
+  <MazBtn @click="toast.success('Hello Maz UI!')"> Click me! </MazBtn>
+</template>
+
+<script setup lang="ts">
+  const toast = useToast()
+</script>
+```
+
+## 🎨 Theming Made Easy
+
+Customize Maz UI to match your brand with our dedicated CLI tool:
 
 ```bash
-npm install @mazui/cli
+# Install the CLI
+npm install -g @mazui/cli
+
+# Generate your theme
+maz generate-css-vars
 ```
 
-## Contributing
+The CLI will automatically:
+
+- Generate all color variations
+- Create dark mode variables
+- Output a ready-to-use CSS file
+
+To know how configure the CLI, check [theming options](https://maz-ui.com/guide/theme) in our documentation.
+
+## 🧰 What's included?
+
+- 🧩 [Components](https://maz-ui.com/components/maz-btn) - Beautiful, accessible UI components
+- 🔌 [Plugins](https://maz-ui.com/plugins/dialog) - Powerful plugins for common use cases
+- 🎣 [Composables](https://maz-ui.com/composables/use-form-validator) - Reusable composition functions
+- 📏 [Directives](https://maz-ui.com/directives/fullscreen-img) - Useful Vue directives
+- 🛠️ [Helpers](https://maz-ui.com/helpers/currency) - Useful utilities for common tasks
+
+## 🤝 Contributing
+
+We're always looking for contributors! Check out our [contribution guide](./CONTRIBUTING.md) to get started.
 
-Please follow this [documentation](./CONTRIBUTING.md)
+## 📄 License
 
-## LICENSE
+[MIT](./LICENSE)
 
-[MIT](LICENSE)
+<div align="center">
+  <sub>Built with ❤️ by <a href="https://github.com/LouisMazel">Louis Mazel</a></sub>
+</div>

package/components/MazAccordion.mjs

@@ -1,5 +1,5 @@
 import { openBlock as p, createElementBlock as g, createElementVNode as u, computed as $, useId as V, defineComponent as w, ref as f, onMounted as O, onUnmounted as B, normalizeClass as b, normalizeStyle as k, renderSlot as h, withDirectives as E, vShow as z, mergeModels as A, useModel as x, mergeProps as I, useSlots as L, Fragment as j, renderList as F, createBlock as N, withCtx as M, unref as y, createVNode as S } from "vue";
-import './assets/MazAccordion.css';const R = {
+import './assets/MazAccordion.DHZxplwt.css';const R = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",

package/components/MazAnimatedCounter.d.ts

@@ -21,6 +21,11 @@ type __VLS_Props = {
      * @default 100
      */
     delay?: number;
+    /**
+     * Play the animation only once
+     * @default true
+     */
+    once?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -30,13 +35,16 @@ declare function __VLS_template(): {
         suffix?(_: {}): any;
         suffix?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        elementRef: HTMLSpanElement;
+    };
     rootEl: HTMLSpanElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     delay: number;
     duration: number;
+    once: boolean;
     prefix: string;
     suffix: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLSpanElement>;

package/components/MazAnimatedCounter.mjs

@@ -1,94 +1,113 @@
-import { defineComponent as A, ref as x, watch as g, openBlock as q, createElementBlock as C, createElementVNode as M, renderSlot as u, createTextVNode as o, toDisplayString as r } from "vue";
-import './assets/MazAnimatedCounter.css';function T() {
+import { defineComponent as q, ref as y, onMounted as B, onBeforeUnmount as C, watch as T, openBlock as V, createElementBlock as $, createElementVNode as z, renderSlot as f, createTextVNode as u, toDisplayString as s } from "vue";
+import './assets/MazAnimatedCounter.DTzaNX_Y.css';function A() {
   return typeof document < "u";
 }
-const V = { class: "m-animated-counter m-reset-css" }, $ = { class: "maz-sr-only" }, k = /* @__PURE__ */ A({
+const F = { class: "maz-sr-only" }, I = /* @__PURE__ */ q({
   __name: "MazAnimatedCounter",
   props: {
     count: {},
     duration: { default: 1e3 },
     prefix: { default: void 0 },
     suffix: { default: void 0 },
-    delay: { default: 100 }
+    delay: { default: 100 },
+    once: { type: Boolean, default: !0 }
   },
-  setup(a) {
-    const s = a, t = x(0);
-    function i() {
-      return typeof window > "u" || !window.requestAnimationFrame ? (e) => (setTimeout(e, 1e3 / 60), 0) : window.requestAnimationFrame.bind(window);
+  setup(i) {
+    const t = i, r = y(0), a = y(null);
+    function c() {
+      return !A() || !window.requestAnimationFrame ? (e) => (setTimeout(e, 1e3 / 60), 0) : window.requestAnimationFrame.bind(window);
     }
-    function f(e, n, d, w) {
-      const c = i();
-      if (!T()) {
-        t.value = n;
+    function g(e, o, d, _) {
+      const m = c();
+      if (!A()) {
+        r.value = o;
         return;
       }
-      t.value = e, setTimeout(() => {
-        const v = performance.now(), m = (y = performance.now()) => {
-          const _ = y - v, l = Math.min(_ / d, 1), h = (p) => p * (2 - p);
-          t.value = Math.round(
-            e + (n - e) * h(l)
-          ), l < 1 && c(m);
+      r.value = e, setTimeout(() => {
+        const h = performance.now(), p = (x = performance.now()) => {
+          const M = x - h, v = Math.min(M / d, 1), k = (w) => w * (2 - w);
+          r.value = Math.round(
+            e + (o - e) * k(v)
+          ), v < 1 && m(p);
         };
-        c(m);
-      }, w);
+        m(p);
+      }, _);
     }
-    return g(
-      () => s.count,
-      (e, n) => {
-        if (e === n)
+    function l(e, o) {
+      g(e, o, t.duration, t.delay);
+    }
+    let n = null;
+    return B(() => {
+      t.once || (n = new IntersectionObserver(([e]) => {
+        e.isIntersecting && (l(0, t.count), t.once && (n == null || n.unobserve(e.target)));
+      }), a.value && n.observe(a.value));
+    }), C(() => n == null ? void 0 : n.disconnect()), T(
+      () => t.count,
+      (e, o) => {
+        if (e === o)
           return;
-        f(n ?? 0, e, s.duration, s.delay);
+        l(o ?? 0, e);
       },
       { immediate: !0 }
-    ), (e, n) => (q(), C("span", V, [
-      M("span", $, [
-        u(e.$slots, "prefix", {}, () => [
-          o(
-            r(e.prefix),
+    ), (e, o) => (V(), $(
+      "span",
+      {
+        ref_key: "elementRef",
+        ref: a,
+        class: "m-animated-counter m-reset-css"
+      },
+      [
+        z("span", F, [
+          f(e.$slots, "prefix", {}, () => [
+            u(
+              s(e.prefix),
+              1
+              /* TEXT */
+            )
+          ], !0),
+          u(
+            s(e.count),
+            1
+            /* TEXT */
+          ),
+          f(e.$slots, "suffix", {}, () => [
+            u(
+              s(e.suffix),
+              1
+              /* TEXT */
+            )
+          ], !0)
+        ]),
+        f(e.$slots, "prefix", {}, () => [
+          u(
+            s(e.prefix),
             1
             /* TEXT */
           )
         ], !0),
-        o(
-          r(e.count),
+        u(
+          s(r.value),
           1
           /* TEXT */
         ),
-        u(e.$slots, "suffix", {}, () => [
-          o(
-            r(e.suffix),
+        f(e.$slots, "suffix", {}, () => [
+          u(
+            s(e.suffix),
             1
             /* TEXT */
           )
         ], !0)
-      ]),
-      u(e.$slots, "prefix", {}, () => [
-        o(
-          r(e.prefix),
-          1
-          /* TEXT */
-        )
-      ], !0),
-      o(
-        r(t.value),
-        1
-        /* TEXT */
-      ),
-      u(e.$slots, "suffix", {}, () => [
-        o(
-          r(e.suffix),
-          1
-          /* TEXT */
-        )
-      ], !0)
-    ]));
+      ],
+      512
+      /* NEED_PATCH */
+    ));
   }
-}), z = (a, s) => {
-  const t = a.__vccOpts || a;
-  for (const [i, f] of s)
-    t[i] = f;
-  return t;
-}, B = /* @__PURE__ */ z(k, [["__scopeId", "data-v-793ffe65"]]);
+}), O = (i, t) => {
+  const r = i.__vccOpts || i;
+  for (const [a, c] of t)
+    r[a] = c;
+  return r;
+}, E = /* @__PURE__ */ O(I, [["__scopeId", "data-v-fc76f127"]]);
 export {
-  B as default
+  E as default
 };

package/components/MazAnimatedElement.d.ts

@@ -15,6 +15,11 @@ interface MazAnimatedElementProps {
      * @default 2000
      */
     duration?: number;
+    /**
+     * Play the animation only once
+     * @default true
+     */
+    once?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/components/MazAnimatedElement.mjs

@@ -1,25 +1,24 @@
-import { defineComponent as r, computed as i, ref as l, onMounted as c, openBlock as d, createElementBlock as m, normalizeStyle as u, renderSlot as f } from "vue";
-import './assets/MazAnimatedElement.css';const v = /* @__PURE__ */ r({
+import { defineComponent as i, computed as l, ref as o, onMounted as d, onBeforeUnmount as r, openBlock as c, createElementBlock as m, normalizeStyle as u, renderSlot as f } from "vue";
+import './assets/MazAnimatedElement.BkcmWrHr.css';const v = /* @__PURE__ */ i({
   __name: "MazAnimatedElement",
   props: {
     direction: { default: "up" },
     delay: { default: 0 },
-    duration: { default: 2e3 }
+    duration: { default: 2e3 },
+    once: { type: Boolean, default: !0 }
   },
   setup(a) {
-    const o = i(() => `animate-slide-${a.direction}-blur`), t = l();
-    return c(() => {
-      const e = new IntersectionObserver((n) => {
-        n.forEach((s) => {
-          s.isIntersecting && (s.target.classList.remove("--invisible"), s.target.classList.add(o.value), e.unobserve(s.target));
-        });
-      });
-      t.value && e.observe(t.value);
-    }), (e, n) => (d(), m(
+    const s = l(() => `animate-slide-${a.direction}-blur`), n = o();
+    let t = null;
+    return d(() => {
+      t = new IntersectionObserver(([e]) => {
+        e.isIntersecting ? (e.target.classList.remove("--invisible"), e.target.classList.add(s.value), a.once === !0 && (t == null || t.unobserve(e.target))) : a.once === !1 && (e.target.classList.add("--invisible"), e.target.classList.remove(s.value));
+      }), n.value && t.observe(n.value);
+    }), r(() => t == null ? void 0 : t.disconnect()), (e, g) => (c(), m(
       "div",
       {
         ref_key: "element",
-        ref: t,
+        ref: n,
         class: "m-animated-element m-reset-css --invisible",
         style: u({
           animationDuration: `${e.duration}ms`,
@@ -33,12 +32,12 @@ import './assets/MazAnimatedElement.css';const v = /* @__PURE__ */ r({
       /* STYLE */
     ));
   }
-}), p = (a, o) => {
-  const t = a.__vccOpts || a;
-  for (const [e, n] of o)
-    t[e] = n;
-  return t;
-}, b = /* @__PURE__ */ p(v, [["__scopeId", "data-v-3cbee84b"]]);
+}), p = (a, s) => {
+  const n = a.__vccOpts || a;
+  for (const [t, e] of s)
+    n[t] = e;
+  return n;
+}, b = /* @__PURE__ */ p(v, [["__scopeId", "data-v-d3a853a6"]]);
 export {
   b as default
 };

package/components/MazAnimatedText.d.ts

@@ -45,6 +45,11 @@ interface MazAnimatedTextProps {
      * @default 2000
      */
     duration?: number;
+    /**
+     * Play the animation only once
+     * @default true
+     */
+    once?: boolean;
 }
 declare const _default: import("vue").DefineComponent<MazAnimatedTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MazAnimatedTextProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;