maz-ui 3.50.1 → 4.0.0-alpha.2

package/dist/chunks/utils.Cg8nbVpk.js

@@ -0,0 +1,321 @@
+import { debounceId as w } from "../helpers/debounceId.js";
+import { freezeValue as I } from "../helpers/freezeValue.js";
+import { isEqual as V } from "../helpers/isEqual.js";
+import { throttleId as T } from "../helpers/throttleId.js";
+import { nextTick as h, getCurrentInstance as j, inject as A } from "vue";
+const u = {
+  mode: "lazy",
+  scrollToErrorSelector: ".has-field-error",
+  debounceTime: 300,
+  throttleTime: 1e3
+};
+function x(n, r) {
+  return Object.keys(r).includes(n);
+}
+function D(n = u.scrollToErrorSelector) {
+  const r = document.querySelector(n);
+  r && r.scrollIntoView({ behavior: "smooth", block: "center" });
+}
+function $(n, r) {
+  const t = {};
+  for (const [e, s] of Object.entries(n)) {
+    const o = s;
+    t[e] = r[e].error && o[0] ? o[0].message : void 0;
+  }
+  return t;
+}
+function m(n) {
+  return n == null || n === "";
+}
+function M({
+  name: n,
+  hasValidation: r,
+  debouncedFields: t,
+  throttledFields: e
+}) {
+  if (!r)
+    return;
+  const s = String(n);
+  if (t != null && t[s] && (e != null && e[s]))
+    throw new Error(`The field "${s}" cannot be both debounced and throttled`);
+  return t != null && t[s] ? w(
+    s,
+    c,
+    typeof t[s] == "number" ? t[s] : u.debounceTime
+  ) : e != null && e[s] ? T(
+    s,
+    c,
+    typeof e[s] == "number" ? e[s] : u.throttleTime
+  ) : c;
+}
+function d({
+  name: n,
+  schema: r,
+  initialValue: t,
+  fieldState: e,
+  options: s
+}) {
+  const o = r ? x(n, r) : !1, a = M({
+    name: n,
+    hasValidation: o,
+    debouncedFields: s == null ? void 0 : s.debouncedFields,
+    throttledFields: s == null ? void 0 : s.throttledFields
+  });
+  return {
+    blurred: !1,
+    dirty: !1,
+    errors: [],
+    error: !1,
+    valid: !o,
+    validating: !1,
+    validated: !1,
+    initialValue: I(t),
+    validateFunction: a,
+    mode: o ? (s == null ? void 0 : s.mode) ?? (e == null ? void 0 : e.mode) ?? u.mode : void 0
+  };
+}
+function p({
+  schema: n,
+  payload: r,
+  options: t
+}) {
+  const e = {};
+  for (const s in n) {
+    const o = s;
+    e[o] = d({
+      name: o,
+      schema: n,
+      options: t,
+      fieldState: e[o],
+      initialValue: r == null ? void 0 : r[o]
+    });
+  }
+  return e;
+}
+function B({
+  fieldsStates: n,
+  payload: r,
+  schema: t,
+  options: e,
+  updateMode: s = !1
+}) {
+  for (const o in t) {
+    const a = o;
+    n[a] = z({
+      name: a,
+      fieldState: n[a],
+      payload: r,
+      schema: t,
+      options: e,
+      updateMode: s
+    });
+  }
+}
+function z({
+  name: n,
+  fieldState: r,
+  payload: t,
+  schema: e,
+  options: s,
+  updateMode: o = !0
+}) {
+  const { initialValue: a, mode: i, ...l } = d({
+    name: n,
+    schema: e,
+    initialValue: s.defaultValue ?? t[n],
+    fieldState: r,
+    options: s
+  }), g = o ? i ?? r.mode ?? u.mode : r.mode;
+  return {
+    ...r,
+    initialValue: a,
+    mode: g,
+    ...r != null && r.mode && g !== r.mode ? l : {}
+  };
+}
+function F(n) {
+  const r = {};
+  for (const [t, { errors: e }] of Object.entries(n))
+    r[t] = e;
+  return r;
+}
+function G(n) {
+  return n instanceof HTMLInputElement || n instanceof HTMLSelectElement || n instanceof HTMLTextAreaElement ? [n] : n.querySelectorAll(
+    "input, select, textarea"
+  );
+}
+function R({
+  interactiveElements: n,
+  onBlur: r,
+  mode: t
+}) {
+  n.forEach((e) => {
+    v(["eager", "blur", "progressive"], t) && e.addEventListener("blur", r);
+  });
+}
+function J({
+  interactiveElements: n,
+  onBlur: r
+}) {
+  n.forEach((t) => {
+    t.removeEventListener("blur", r);
+  });
+}
+async function k(n, r, t) {
+  const e = await L(r), o = await (await y("safeParseAsync"))(e.entries[n], t ?? "");
+  return {
+    result: o,
+    isValid: o.success
+  };
+}
+async function c({
+  name: n,
+  fieldState: r,
+  schema: t,
+  payload: e,
+  setError: s = !0,
+  setErrorIfInvalidAndNotEmpty: o = !1
+}) {
+  if (await h(), r.validating = !0, !t[n]) {
+    r.valid = !0, r.validating = !1, r.validated = !0, r.errors = [], r.error = !1;
+    return;
+  }
+  const { result: a, isValid: i } = await k(n, t, e[n]);
+  r.valid = i, (s || o && !i && !m(e[n])) && (r.error = !i), r.errors = a.issues ?? [], r.validating = !1, r.validated = !0;
+}
+function E({
+  name: n,
+  fieldState: r,
+  payload: t,
+  schema: e
+}) {
+  var o;
+  const s = {
+    name: n,
+    fieldState: r,
+    payload: t,
+    schema: e,
+    setError: r.mode === "progressive" ? r.valid || r.blurred : !0
+  };
+  return (o = r.validateFunction) == null ? void 0 : o.call(r, s);
+}
+function K({
+  fieldsStates: n,
+  payload: r,
+  showErrors: t = !0,
+  schema: e
+}) {
+  return Promise.all(
+    Object.keys(n).map(
+      (s) => c({
+        name: s,
+        setError: t,
+        fieldState: n[s],
+        payload: r,
+        schema: e,
+        setErrorIfInvalidAndNotEmpty: n[s].mode === "lazy"
+      })
+    )
+  );
+}
+function b({
+  eventName: n,
+  fieldState: r,
+  isSubmitted: t
+}) {
+  const { dirty: e, blurred: s, mode: o, valid: a } = r;
+  return n === "blur" && (v(["lazy", "aggressive"], o) || a) || n === "input" && o === "blur" || !o ? !1 : t || o === "eager" && s || o === "blur" && s || o === "aggressive" && e || o === "lazy" && e || o === "progressive";
+}
+function Q({
+  name: n,
+  force: r = !1,
+  payload: t,
+  fieldState: e,
+  schema: s,
+  isSubmitted: o
+}) {
+  const a = t[n], i = !m(a) && !V(a, e.initialValue);
+  if (e.dirty = i, e.blurred = e.blurred || (e.mode === "eager" ? i : !0), !!(r || b({ eventName: "blur", fieldState: e, isSubmitted: o })))
+    return E({
+      name: n,
+      fieldState: e,
+      schema: s,
+      payload: t
+    });
+}
+function U({
+  name: n,
+  payload: r,
+  fieldState: t,
+  schema: e,
+  isSubmitted: s,
+  forceValidation: o = !1
+}) {
+  const a = r[n];
+  t.validated = !1;
+  const i = !m(a) && !V(a, t.initialValue);
+  if (t.dirty = i, !!(o || b({ eventName: "input", fieldState: t, isSubmitted: s })))
+    return E({
+      name: n,
+      fieldState: t,
+      schema: e,
+      payload: r
+    });
+}
+function C(n) {
+  const r = j();
+  if (!r)
+    throw new Error(`${n} must be called within setup()`);
+  return r;
+}
+function W(n, r) {
+  var s;
+  const e = ((s = C(r).formContexts) == null ? void 0 : s.get(n)) ?? A(n);
+  if (!e)
+    throw new Error("useFormField must be used within a form (useFormValidator)");
+  return e;
+}
+function X({
+  ref: n,
+  fieldState: r,
+  onBlur: t
+}) {
+  if (!(n || v(["aggressive", "lazy"], r.mode)))
+    return {
+      onBlur: t
+    };
+}
+const f = {};
+async function y(n) {
+  if (f[n])
+    return f[n];
+  const r = await import("valibot");
+  return f[n] = r[n], r[n];
+}
+async function L(n) {
+  return (await y("objectAsync"))(n);
+}
+function v(n, r) {
+  return r ? n.includes(r) : !1;
+}
+export {
+  u as C,
+  p as a,
+  F as b,
+  $ as c,
+  v as d,
+  W as e,
+  x as f,
+  C as g,
+  U as h,
+  z as i,
+  c as j,
+  X as k,
+  Q as l,
+  G as m,
+  R as n,
+  J as r,
+  D as s,
+  B as u,
+  K as v
+};

package/dist/chunks/x-mark.DTWA3lfG.js

@@ -0,0 +1,24 @@
+import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+function l(i, e) {
+  return o(), t("svg", r, e[0] || (e[0] = [
+    n("path", {
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.5",
+      d: "M6 18 18 6M6 6l12 12"
+    }, null, -1)
+  ]));
+}
+const d = { render: l };
+export {
+  d as default,
+  l as render
+};

package/dist/components/MazAccordion.js

@@ -0,0 +1,84 @@
+import { defineComponent as g, useSlots as z, computed as u, ref as I, openBlock as d, createElementBlock as m, Fragment as M, renderList as S, createBlock as V, withCtx as p, createElementVNode as f, unref as n, renderSlot as i, createVNode as v, normalizeClass as _ } from "vue";
+import O from "./MazCardSpotlight.js";
+import y from "./MazExpandAnimation.js";
+import { useInstanceUniqId as A } from "../composables/useInstanceUniqId.js";
+import B from "../chunks/plus.CNCGxFPJ.js";
+import { _ as E } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazAccordion.DaqF3ZAX.css';const N = {
+  class: "m-accordion m-reset-css",
+  role: "presentation"
+}, j = ["id", "aria-controls", "aria-expanded", "onClick"], q = /* @__PURE__ */ g({
+  __name: "MazAccordion",
+  props: {
+    id: { default: void 0 },
+    modelValue: { default: 0 },
+    contentClass: { default: void 0 }
+  },
+  emits: ["update:model-value"],
+  setup($, { emit: h }) {
+    const l = $, r = h, s = A({
+      componentName: "MazAccordion",
+      providedId: l.id
+    }), C = z(), b = u(
+      () => Object.keys(C).filter((e) => e.startsWith("title-")).length
+    ), a = I(l.modelValue), c = u({
+      get: () => l.modelValue || a.value,
+      set: (e) => {
+        a.value = e, r("update:model-value", e);
+      }
+    });
+    function t(e) {
+      return c.value === e;
+    }
+    function k(e) {
+      c.value === e ? (a.value = 0, r("update:model-value", 0)) : (a.value = e, r("update:model-value", e));
+    }
+    return (e, w) => (d(), m("div", N, [
+      (d(!0), m(M, null, S(b.value, (o) => (d(), V(O, {
+        key: o,
+        class: "m-accordion__spotlight",
+        padding: !1
+      }, {
+        default: p(() => [
+          f("button", {
+            id: `step-${o}-${n(s)}`,
+            class: "m-accordion__header",
+            "aria-controls": `step-${o}-${n(s)}`,
+            "aria-expanded": t(o),
+            onClick: (x) => k(o)
+          }, [
+            i(e.$slots, `title-${o}`, {
+              isOpen: t(o)
+            }, void 0, !0),
+            v(n(B), {
+              class: _(["header-icon", { "--rotate": t(o) }])
+            }, null, 8, ["class"])
+          ], 8, j),
+          v(y, {
+            "animation-duration": "300ms",
+            "model-value": t(o),
+            "aria-labelledby": `step-${o}-${n(s)}`
+          }, {
+            default: p(() => [
+              f("div", {
+                class: _(["m-accordion__content", e.contentClass])
+              }, [
+                i(e.$slots, "content", {
+                  isOpen: t(o)
+                }, void 0, !0),
+                i(e.$slots, `content-${o}`, {
+                  isOpen: t(o)
+                }, void 0, !0)
+              ], 2)
+            ]),
+            _: 2
+          }, 1032, ["model-value", "aria-labelledby"])
+        ]),
+        _: 2
+      }, 1024))), 128))
+    ]));
+  }
+}), G = /* @__PURE__ */ E(q, [["__scopeId", "data-v-3b47b4cd"]]);
+export {
+  G as default
+};

package/dist/components/MazAnimatedCounter.js

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

package/dist/components/MazAnimatedElement.js

@@ -0,0 +1,33 @@
+import { defineComponent as l, computed as s, ref as o, onMounted as d, onBeforeUnmount as m, openBlock as r, createElementBlock as c, normalizeStyle as u, renderSlot as f } from "vue";
+import { _ as v } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazAnimatedElement.BIRRN8k1.css';const p = /* @__PURE__ */ l({
+  __name: "MazAnimatedElement",
+  props: {
+    direction: { default: "up" },
+    delay: { default: 0 },
+    duration: { default: 2e3 },
+    once: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    const i = s(() => `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(i.value), a.once === !0 && (t == null || t.unobserve(e.target))) : a.once === !1 && (e.target.classList.add("--invisible"), e.target.classList.remove(i.value));
+      }), n.value && t.observe(n.value);
+    }), m(() => t == null ? void 0 : t.disconnect()), (e, g) => (r(), c("div", {
+      ref_key: "element",
+      ref: n,
+      class: "m-animated-element m-reset-css --invisible",
+      style: u({
+        animationDuration: `${e.duration}ms`,
+        animationDelay: `${e.delay}ms`
+      })
+    }, [
+      f(e.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+}), B = /* @__PURE__ */ v(p, [["__scopeId", "data-v-ce70833e"]]);
+export {
+  B as default
+};

package/dist/components/MazAnimatedText.js

@@ -0,0 +1,79 @@
+import { defineComponent as B, computed as r, ref as d, onMounted as W, onBeforeUnmount as b, openBlock as a, createElementBlock as n, createBlock as w, resolveDynamicComponent as _, mergeProps as k, withCtx as g, Fragment as D, renderList as A, createElementVNode as s, normalizeClass as $, normalizeStyle as z, toDisplayString as o, createCommentVNode as C, createTextVNode as h } from "vue";
+import { checkAvailability as V } from "../helpers/checkAvailability.js";
+import { _ as I } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazAnimatedText.Dk4QO4xF.css';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" }, x = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "MazAnimatedText",
+  props: {
+    text: {},
+    lastWord: {},
+    delay: { default: 0 },
+    direction: { default: "up" },
+    tag: { default: "span" },
+    wordDelay: { default: 75 },
+    columnGap: { default: 0.5 },
+    rowGap: { default: 0 },
+    duration: { default: 2e3 },
+    once: { type: Boolean, default: !0 }
+  },
+  setup(i) {
+    const m = r(() => i.text.split(" ")), G = r(() => m.value.length), u = d(!1), c = d(!1), p = r(() => u.value ? `maz-animate-slide-${i.direction}-blur` : "maz-invisible"), l = d();
+    let t = null;
+    return W(() => {
+      c.value = !0, t = new IntersectionObserver(([e]) => {
+        u.value = e.isIntersecting, i.once && l.value && (t == null || t.unobserve(l.value));
+      }), V(() => l.value, (e) => {
+        t == null || t.observe(e);
+      });
+    }), b(() => t == null ? void 0 : t.disconnect()), (e, f) => (a(), n("div", M, [
+      c.value ? (a(), w(_(e.tag), k({
+        key: 0,
+        ref_key: "element",
+        ref: l
+      }, e.$attrs, {
+        class: "m-animated-text__root",
+        style: { columnGap: `${e.columnGap}rem`, rowGap: `${e.rowGap}rem` }
+      }), {
+        default: g(() => [
+          (a(!0), n(D, null, A(m.value, (y, v) => (a(), n("span", {
+            key: y + v,
+            class: "m-animated-text__word"
+          }, [
+            s("span", {
+              class: $(["m-animated-text__word-inner", p.value]),
+              style: z({
+                animationDelay: `${e.delay + v * (e.wordDelay ?? 150)}ms`,
+                animationDuration: `${e.duration}ms`
+              })
+            }, o(y), 7)
+          ]))), 128)),
+          e.lastWord ? (a(), n("span", {
+            key: 0,
+            class: $(["m-animated-text__last-word", p.value]),
+            style: z({
+              animationDelay: `${e.delay + G.value * (e.wordDelay ?? 150)}ms`,
+              animationDuration: `${e.duration}ms`
+            })
+          }, [
+            s("span", N, [
+              f[0] || (f[0] = s("span", { class: "m-animated-text__last-word-inner-gradient" }, null, -1)),
+              s("span", T, o(e.lastWord), 1)
+            ])
+          ], 6)) : C("", !0)
+        ]),
+        _: 1
+      }, 16, ["style"])) : (a(), w(_(e.tag), k({ key: 1 }, e.$attrs, { class: "maz-invisible maz-inline-flex" }), {
+        default: g(() => [
+          h(o(e.text) + " ", 1),
+          e.lastWord ? (a(), n(D, { key: 0 }, [
+            h(o(e.lastWord), 1)
+          ], 64)) : C("", !0)
+        ]),
+        _: 1
+      }, 16))
+    ]));
+  }
+}), L = /* @__PURE__ */ I(x, [["__scopeId", "data-v-429dbc75"]]);
+export {
+  L as default
+};