maz-ui 3.49.3 → 3.50.1

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 x, ref as g, watch as q, openBlock as C, createElementBlock as M, createElementVNode as T, renderSlot as u, createTextVNode as o, toDisplayString as r } from "vue";
-import './assets/MazAnimatedCounter.D9UJwqkf.css';function v() {
+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__ */ x({
+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 = g(0);
-    function i() {
-      return !v() || !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, c, w) {
-      const d = i();
-      if (!v()) {
-        t.value = n;
+    function g(e, o, d, _) {
+      const m = c();
+      if (!A()) {
+        r.value = o;
         return;
       }
-      t.value = e, setTimeout(() => {
-        const _ = performance.now(), m = (h = performance.now()) => {
-          const y = h - _, l = Math.min(y / c, 1), A = (p) => p * (2 - p);
-          t.value = Math.round(
-            e + (n - e) * A(l)
-          ), l < 1 && d(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);
         };
-        d(m);
-      }, w);
+        m(p);
+      }, _);
     }
-    return q(
-      () => 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) => (C(), M("span", V, [
-      T("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-9f3302af"]]);
+}), 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.XhNfpNyM.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.XhNfpNyM.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;

package/components/MazAnimatedText.mjs

@@ -1,39 +1,18 @@
-import { ref as l, defineComponent as A, computed as v, onMounted as z, openBlock as o, createElementBlock as u, createBlock as w, resolveDynamicComponent as g, mergeProps as k, withCtx as x, Fragment as _, renderList as D, createElementVNode as f, normalizeClass as $, normalizeStyle as h, toDisplayString as p, createCommentVNode as C, createTextVNode as b } from "vue";
-import './assets/MazAnimatedText.ztrJF5LY.css';function T(s, r, i) {
+import { defineComponent as C, computed as f, ref as p, onMounted as b, onBeforeUnmount as G, openBlock as o, createElementBlock as d, createBlock as g, resolveDynamicComponent as k, mergeProps as $, withCtx as _, Fragment as h, renderList as V, createElementVNode as u, normalizeClass as A, normalizeStyle as x, toDisplayString as c, createCommentVNode as z, createTextVNode as D } from "vue";
+import './assets/MazAnimatedText.B91Kt1PP.css';function B(s, i, r) {
   const t = {
     maxAttempts: 20,
     interval: 100,
-    ...i
+    ...r
   };
-  let a = 0;
+  let l = 0;
   function m() {
-    const n = s();
-    n != null ? t.expectedValue !== void 0 && n !== t.expectedValue ? a < t.maxAttempts ? (a++, setTimeout(m, t.interval)) : console.warn(t.errorMessage || `[maz-ui](checkAvailability) Nothing found after ${t.maxAttempts} attempts for ref ${n}`) : r(n) : a < t.maxAttempts ? (a++, setTimeout(m, t.interval)) : console.warn(t.errorMessage || `[maz-ui](checkAvailability) Nothing found or expected value after ${t.maxAttempts} attempts for ref ${n}`);
+    const a = s();
+    a != null ? t.expectedValue !== void 0 && a !== t.expectedValue ? l < t.maxAttempts ? (l++, setTimeout(m, t.interval)) : console.warn(t.errorMessage || `[maz-ui](checkAvailability) Nothing found after ${t.maxAttempts} attempts for ref ${a}`) : i(a) : l < t.maxAttempts ? (l++, setTimeout(m, t.interval)) : console.warn(t.errorMessage || `[maz-ui](checkAvailability) Nothing found or expected value after ${t.maxAttempts} attempts for ref ${a}`);
   }
   m();
 }
-l("system");
-l("system");
-const G = (s, r) => {
-  const i = s.__vccOpts || s;
-  for (const [t, a] of r)
-    i[t] = a;
-  return i;
-}, V = {
-  cancelText: "Cancel",
-  confirmText: "Confirm",
-  cancelButton: {
-    text: "Cancel",
-    color: "danger"
-  },
-  confirmButton: {
-    text: "Confirm",
-    color: "success"
-  }
-};
-l(V);
-l([]);
-const B = { class: "m-reset-css m-animated-text" }, M = { class: "m-animated-text__last-word-inner" }, N = { class: "m-animated-text__last-word-inner-text" }, W = /* @__PURE__ */ A({
+const M = { class: "m-reset-css m-animated-text" }, N = { class: "m-animated-text__last-word-inner" }, T = { class: "m-animated-text__last-word-inner-text" }, W = /* @__PURE__ */ C({
   inheritAttrs: !1,
   __name: "MazAnimatedText",
   props: {
@@ -45,47 +24,45 @@ const B = { class: "m-reset-css m-animated-text" }, M = { class: "m-animated-tex
     wordDelay: { default: 75 },
     columnGap: { default: 0.5 },
     rowGap: { default: 0 },
-    duration: { default: 2e3 }
+    duration: { default: 2e3 },
+    once: { type: Boolean, default: !0 }
   },
   setup(s) {
-    const r = v(() => s.text.split(" ")), i = v(() => r.value.length), t = l(!1), a = l(!1), m = v(() => t.value ? `maz-animate-slide-${s.direction}-blur` : "maz-invisible"), n = l();
-    return z(() => {
-      a.value = !0;
-      const e = new IntersectionObserver((d) => {
-        d.forEach((c) => {
-          c.isIntersecting && (t.value = !0);
-        });
-      });
-      T(() => n.value, (d) => {
-        e.observe(d);
+    const i = f(() => s.text.split(" ")), r = f(() => i.value.length), t = p(!1), l = p(!1), m = f(() => t.value ? `maz-animate-slide-${s.direction}-blur` : "maz-invisible"), a = p();
+    let n = null;
+    return b(() => {
+      l.value = !0, n = new IntersectionObserver(([e]) => {
+        t.value = e.isIntersecting, s.once && a.value && (n == null || n.unobserve(a.value));
+      }), B(() => a.value, (e) => {
+        n == null || n.observe(e);
       });
-    }), (e, d) => (o(), u("div", B, [
-      a.value ? (o(), w(g(e.tag), k({
+    }), G(() => n == null ? void 0 : n.disconnect()), (e, v) => (o(), d("div", M, [
+      l.value ? (o(), g(k(e.tag), $({
         key: 0,
         ref_key: "element",
-        ref: n
+        ref: a
       }, e.$attrs, {
         class: "m-animated-text__root",
         style: { columnGap: `${e.columnGap}rem`, rowGap: `${e.rowGap}rem` }
       }), {
-        default: x(() => [
-          (o(!0), u(
-            _,
+        default: _(() => [
+          (o(!0), d(
+            h,
             null,
-            D(r.value, (c, y) => (o(), u("span", {
-              key: c + y,
+            V(i.value, (y, w) => (o(), d("span", {
+              key: y + w,
               class: "m-animated-text__word"
             }, [
-              f(
+              u(
                 "span",
                 {
-                  class: $(["m-animated-text__word-inner", m.value]),
-                  style: h({
-                    animationDelay: `${e.delay + y * (e.wordDelay ?? 150)}ms`,
+                  class: A(["m-animated-text__word-inner", m.value]),
+                  style: x({
+                    animationDelay: `${e.delay + w * (e.wordDelay ?? 150)}ms`,
                     animationDuration: `${e.duration}ms`
                   })
                 },
-                p(c),
+                c(y),
                 7
                 /* TEXT, CLASS, STYLE */
               )
@@ -93,29 +70,29 @@ const B = { class: "m-reset-css m-animated-text" }, M = { class: "m-animated-tex
             128
             /* KEYED_FRAGMENT */
           )),
-          e.lastWord ? (o(), u(
+          e.lastWord ? (o(), d(
             "span",
             {
               key: 0,
-              class: $(["m-animated-text__last-word", m.value]),
-              style: h({
-                animationDelay: `${e.delay + i.value * (e.wordDelay ?? 150)}ms`,
+              class: A(["m-animated-text__last-word", m.value]),
+              style: x({
+                animationDelay: `${e.delay + r.value * (e.wordDelay ?? 150)}ms`,
                 animationDuration: `${e.duration}ms`
               })
             },
             [
-              f("span", M, [
-                d[0] || (d[0] = f(
+              u("span", N, [
+                v[0] || (v[0] = u(
                   "span",
                   { class: "m-animated-text__last-word-inner-gradient" },
                   null,
                   -1
                   /* HOISTED */
                 )),
-                f(
+                u(
                   "span",
-                  N,
-                  p(e.lastWord),
+                  T,
+                  c(e.lastWord),
                   1
                   /* TEXT */
                 )
@@ -123,33 +100,33 @@ const B = { class: "m-reset-css m-animated-text" }, M = { class: "m-animated-tex
             ],
             6
             /* CLASS, STYLE */
-          )) : C("v-if", !0)
+          )) : z("v-if", !0)
         ]),
         _: 1
         /* STABLE */
-      }, 16, ["style"])) : (o(), w(
-        g(e.tag),
-        k({ key: 1 }, e.$attrs, { class: "maz-invisible maz-inline-flex" }),
+      }, 16, ["style"])) : (o(), g(
+        k(e.tag),
+        $({ key: 1 }, e.$attrs, { class: "maz-invisible maz-inline-flex" }),
         {
-          default: x(() => [
-            b(
-              p(e.text) + " ",
+          default: _(() => [
+            D(
+              c(e.text) + " ",
               1
               /* TEXT */
             ),
-            e.lastWord ? (o(), u(
-              _,
+            e.lastWord ? (o(), d(
+              h,
               { key: 0 },
               [
-                b(
-                  p(e.lastWord),
+                D(
+                  c(e.lastWord),
                   1
                   /* TEXT */
                 )
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : C("v-if", !0)
+            )) : z("v-if", !0)
           ]),
           _: 1
           /* STABLE */
@@ -159,7 +136,12 @@ const B = { class: "m-reset-css m-animated-text" }, M = { class: "m-animated-tex
       ))
     ]));
   }
-}), I = /* @__PURE__ */ G(W, [["__scopeId", "data-v-face0b34"]]);
+}), I = (s, i) => {
+  const r = s.__vccOpts || s;
+  for (const [t, l] of i)
+    r[t] = l;
+  return r;
+}, O = /* @__PURE__ */ I(W, [["__scopeId", "data-v-13cab581"]]);
 export {
-  I as default
+  O as default
 };

package/components/MazCircularProgressBar.d.ts

@@ -15,6 +15,11 @@ type __VLS_Props = {
      * @default 1000
      */
     duration?: number;
+    /**
+     * Delay before the animation starts in milliseconds
+     * @default 100
+     */
+    delay?: number;
     /**
      * The color of the progress bar
      */
@@ -50,20 +55,28 @@ type __VLS_Props = {
      */
     stroke?: SVGAttributes['stroke'];
     /**
-     * The percentage value of the success color
+     * The percentage value of the success level
+     * @description The progress circle will be filled with the success color when the percentage is greater than or equal to this value
      * @default 100
      */
     successPercentage?: number;
     /**
-     * The percentage value of the warning color
+     * The percentage value of the warning level
+     * @description The progress circle will be filled with the warning color when the percentage is greater than or equal to this value
      * @default 50
      */
     warningPercentage?: number;
     /**
-     * The percentage value of the danger color
+     * The percentage value of the danger level
+     * @description The progress circle will be filled with the danger color when the percentage is greater than or equal to this value
      * @default 25
      */
     dangerPercentage?: number;
+    /**
+     * Play the animation only once
+     * @default true
+     */
+    once?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -72,7 +85,9 @@ declare function __VLS_template(): {
         prefix?(_: {}): any;
         suffix?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        circleRef: SVGSVGElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -80,6 +95,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     size: string;
     color: Color;
     duration: number;
+    once: boolean;
     prefix: string;
     suffix: string;
     stroke: string;