maz-ui 3.46.1-beta.6 → 3.47.1

package/components/chunks/MazChecklist-BLxsNHMP.mjs

@@ -0,0 +1,484 @@
+import { defineComponent as O, useCssVars as j, ref as A, computed as f, onMounted as K, onUnmounted as P, openBlock as p, createElementBlock as v, normalizeClass as $, normalizeStyle as N, createElementVNode as m, renderSlot as C, withDirectives as q, vShow as F, useId as T, unref as V, mergeProps as D, createVNode as x, createTextVNode as B, toDisplayString as I, createCommentVNode as b, defineAsyncComponent as _, watch as H, withCtx as Z, Fragment as G, renderList as J } from "vue";
+import '../assets/MazChecklist.css';const W = {
+  removeAccents: !0,
+  caseSensitive: !1,
+  replaceSpaces: !0,
+  removeSpecialCharacters: !1,
+  trim: !0,
+  normalizeSpaces: !0,
+  removeNumbers: !1,
+  customNormalizationForms: ["NFC", "NFKD"]
+};
+function U(c, r) {
+  const e = { ...W, ...r }, s = {
+    À: "A",
+    Á: "A",
+    Â: "A",
+    Ã: "A",
+    Ä: "A",
+    Å: "A",
+    à: "a",
+    á: "a",
+    â: "a",
+    ã: "a",
+    ä: "a",
+    å: "a",
+    È: "E",
+    É: "E",
+    Ê: "E",
+    Ë: "E",
+    è: "e",
+    é: "e",
+    ê: "e",
+    ë: "e",
+    Î: "I",
+    Ï: "I",
+    í: "I",
+    î: "i",
+    ï: "i",
+    Ô: "O",
+    Õ: "O",
+    Ö: "O",
+    Ø: "O",
+    ô: "o",
+    õ: "o",
+    ö: "o",
+    ø: "o",
+    Ù: "U",
+    Ú: "U",
+    Û: "U",
+    Ü: "U",
+    ù: "u",
+    ú: "u",
+    û: "u",
+    ü: "u",
+    Ç: "C",
+    ç: "c",
+    ÿ: "y",
+    Ñ: "N",
+    ñ: "n",
+    ó: "o"
+  };
+  let a = c.toString();
+  if (e.trim && (a = a.trim()), e.normalizeSpaces && (a = a.replaceAll(/\s+/g, " ")), e.replaceSpaces && (a = a.replaceAll(" ", "-")), e.removeNumbers && (a = a.replaceAll(/\d/g, "")), e.removeAccents && (a = a.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (u) => s[u] || u), a = a.replaceAll(/[\u0300-\u036F]/g, "")), e.caseSensitive === !1 && (a = a.toLowerCase()), e.removeSpecialCharacters && (a = a.replaceAll(/[^\dA-Z-]/gi, "")), e.trim && (a = a.trim()), e.customNormalizationForms)
+    for (const u of e.customNormalizationForms)
+      a = a.normalize(u);
+  return a;
+}
+const X = { class: "inner" }, Y = /* @__PURE__ */ O({
+  __name: "MazCardSpotlight",
+  props: {
+    color: { default: "primary" },
+    noElevation: { type: Boolean, default: !1 },
+    padding: { type: Boolean, default: !0 },
+    contentClass: { default: void 0 },
+    contentStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
+    innerOpacity: { default: 0.95 }
+  },
+  setup(c) {
+    j((i) => ({
+      "4f499add": i.innerOpacity,
+      "2e65a0ad": y.value
+    }));
+    const r = c, e = A(), s = A(), a = A(!1);
+    function u({ clientX: i, clientY: g }) {
+      var n, d, z;
+      a.value = !0;
+      const t = (n = s.value) == null ? void 0 : n.getBoundingClientRect();
+      t && ((z = (d = e.value) == null ? void 0 : d.animate) == null || z.call(
+        d,
+        [
+          {
+            transform: `translate(${i - t.left - t.width / 2}px,${g - t.top - t.height / 2}px)`
+          }
+        ],
+        {
+          duration: 300,
+          fill: "forwards"
+        }
+      ));
+    }
+    const y = f(() => `var(--maz-color-${r.color}-alpha)`), h = f(() => `var(--maz-color-${r.color}-alpha-20)`);
+    return K(() => {
+      window.addEventListener("mousemove", u);
+    }), P(() => {
+      window.removeEventListener("mousemove", u);
+    }), (i, g) => (p(), v(
+      "div",
+      {
+        class: $(["m-card-spotlight", { "maz-elevation": !i.noElevation }]),
+        style: N({ backgroundColor: h.value })
+      },
+      [
+        m("div", X, [
+          m(
+            "div",
+            {
+              class: $(["content", [{ "maz-p-4": i.padding }, i.contentClass]])
+            },
+            [
+              C(i.$slots, "default", {}, void 0, !0)
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        q(m(
+          "div",
+          {
+            ref_key: "blobElement",
+            ref: e,
+            class: "blob",
+            style: N({ backgroundColor: y.value })
+          },
+          null,
+          4
+          /* STYLE */
+        ), [
+          [F, a.value]
+        ]),
+        q(m(
+          "div",
+          {
+            ref_key: "fakeblobElement",
+            ref: s,
+            class: "fakeblob"
+          },
+          null,
+          512
+          /* NEED_PATCH */
+        ), [
+          [F, a.value]
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), L = (c, r) => {
+  const e = c.__vccOpts || c;
+  for (const [s, a] of r)
+    e[s] = a;
+  return e;
+}, ee = /* @__PURE__ */ L(Y, [["__scopeId", "data-v-31abf9ff"]]);
+function oe({
+  componentName: c,
+  providedId: r
+}) {
+  const e = T();
+  return f(() => r ?? `${c}-${e}`);
+}
+const te = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+function R(c, r) {
+  return p(), v("svg", te, r[0] || (r[0] = [
+    m(
+      "path",
+      {
+        stroke: "currentColor",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "1.5",
+        d: "m4.5 12.75 6 6 9-13.5"
+      },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const Q = { render: R }, ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Q,
+  render: R
+}, Symbol.toStringTag, { value: "Module" })), ae = ["for", "aria-checked"], le = ["id", "checked", "disabled", "name"], re = { class: "m-checkbox__text" }, se = /* @__PURE__ */ O({
+  inheritAttrs: !1,
+  __name: "MazCheckbox",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    id: { default: void 0 },
+    color: { default: "primary" },
+    value: { type: [String, Number, Boolean], default: void 0 },
+    name: { default: "m-checkbox" },
+    size: { default: "md" },
+    label: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    error: { type: Boolean },
+    success: { type: Boolean },
+    warning: { type: Boolean },
+    hint: {}
+  },
+  emits: ["update:model-value", "change", "blur", "focus"],
+  setup(c, { emit: r }) {
+    j((o) => ({
+      b7df6194: i.value,
+      "89a0ef50": y.value,
+      "199d7f11": g.value,
+      b0e1d658: t.value
+    }));
+    const e = c, s = r, a = oe({
+      componentName: "MazCheckbox",
+      providedId: e.id
+    }), u = f(
+      () => typeof e.value != "boolean" && Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : typeof e.modelValue == "boolean" ? e.modelValue : !1
+    ), y = f(() => {
+      switch (e.size) {
+        case "xl":
+          return "2rem";
+        case "lg":
+          return "1.75rem";
+        case "sm":
+          return "1.25rem";
+        case "xs":
+          return "1rem";
+        case "mini":
+          return "0.75rem";
+        default:
+          return "1.5rem";
+      }
+    }), h = f(() => {
+      switch (e.size) {
+        case "xl":
+          return "maz-text-2xl";
+        case "lg":
+          return "maz-text-xl";
+        case "sm":
+          return "maz-text-base";
+        case "xs":
+          return "maz-text-sm";
+        case "mini":
+          return "maz-text-xs";
+        default:
+          return "maz-text-lg";
+      }
+    }), i = f(() => e.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${e.color}-contrast)`), g = f(() => e.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${e.color})`), t = f(() => e.error ? "var(--maz-color-danger)" : e.warning ? "var(--maz-color-warning)" : e.success ? "var(--maz-color-success)" : ["black", "transparent", "theme"].includes(e.color) ? "var(--maz-color-muted)" : `var(--maz-color-${e.color}-alpha)`);
+    function n(o) {
+      ["Space"].includes(o.code) && (o.preventDefault(), z(e.value ?? !e.modelValue));
+    }
+    function d(o) {
+      return typeof o == "boolean" && (typeof e.modelValue == "boolean" || e.modelValue === void 0 || e.modelValue === null) ? !e.modelValue : Array.isArray(e.modelValue) && typeof o != "boolean" ? e.modelValue.includes(o) ? e.modelValue.filter((l) => l !== o) : [...e.modelValue, o] : [o];
+    }
+    function z(o) {
+      const l = d(o);
+      s("update:model-value", l), s("change", l);
+    }
+    const k = A();
+    function E(o) {
+      var l;
+      (l = k.value) == null || l.dispatchEvent(new Event("blur")), s("blur", o);
+    }
+    function w(o) {
+      var l;
+      (l = k.value) == null || l.dispatchEvent(new Event("focus")), s("focus", o);
+    }
+    return (o, l) => (p(), v("label", {
+      for: V(a),
+      class: $(["m-checkbox", [{ "--disabled": o.disabled, "--error": o.error, "--warning": o.warning, "--success": o.success }, e.class]]),
+      tabindex: "0",
+      style: N(o.style),
+      role: "checkbox",
+      "aria-checked": u.value,
+      onKeydown: n,
+      onBlur: E,
+      onFocus: w
+    }, [
+      m("input", D({
+        id: V(a),
+        ref_key: "inputRef",
+        ref: k,
+        checked: u.value
+      }, o.$attrs, {
+        tabindex: "-1",
+        disabled: o.disabled,
+        name: o.name,
+        type: "checkbox",
+        onChange: l[0] || (l[0] = (S) => {
+          var M;
+          return z(o.value ?? ((M = S == null ? void 0 : S.target) == null ? void 0 : M.checked));
+        })
+      }), null, 16, le),
+      m("span", null, [
+        x(V(Q), {
+          class: $(["check-icon", h.value])
+        }, null, 8, ["class"])
+      ]),
+      m("div", re, [
+        C(o.$slots, "default", { value: o.value }, () => [
+          B(
+            I(o.label),
+            1
+            /* TEXT */
+          )
+        ], !0),
+        o.hint ? (p(), v(
+          "span",
+          {
+            key: 0,
+            class: $(["m-checkbox__hint", {
+              "--error": o.error,
+              "--success": o.success,
+              "--warning": o.warning
+            }])
+          },
+          I(o.hint),
+          3
+          /* TEXT, CLASS */
+        )) : b("v-if", !0)
+      ])
+    ], 46, ae));
+  }
+}), ne = /* @__PURE__ */ L(se, [["__scopeId", "data-v-178c6a46"]]), ce = { class: "m-checklist maz-flex maz-flex-col maz-gap-4" }, ie = {
+  key: 0,
+  for: "query",
+  class: "maz-flex maz-items-center maz-justify-between maz-gap-4"
+}, ue = {
+  key: 0,
+  class: "maz-flex-none maz-truncate"
+}, de = {
+  key: 0,
+  class: "maz-flex maz-h-full maz-flex-center"
+}, me = { class: "maz-flex maz-h-full maz-flex-col maz-gap-3 maz-flex-center" }, fe = { class: "maz-text-muted" }, pe = ["for"], ve = { class: "cap-f" }, be = /* @__PURE__ */ O({
+  __name: "MazChecklist",
+  props: {
+    modelValue: { default: void 0 },
+    query: { default: void 0 },
+    items: { default: void 0 },
+    title: { default: void 0 },
+    elevation: { type: Boolean, default: !1 },
+    search: { default: () => ({
+      enabled: !1
+    }) },
+    searchOptions: {},
+    color: { default: "primary" }
+  },
+  emits: ["update:query", "update:model-value"],
+  setup(c, { emit: r }) {
+    const e = c, s = r, a = _(() => import("./MazInput-Dx2cCzFS.mjs")), u = _(
+      () => import("./magnifying-glass--nBiyXot.mjs")
+    ), y = _(
+      () => import("./no-symbol-CIgKzsrB.mjs")
+    ), h = A(e.query);
+    H(
+      () => e.query,
+      (t) => {
+        h.value = t;
+      }
+    );
+    const i = f(() => {
+      var n;
+      if (!h.value)
+        return e.items;
+      const t = U(h.value, e.searchOptions);
+      return (n = e.items) == null ? void 0 : n.filter(
+        ({ label: d }) => U(d, e.searchOptions).includes(t)
+      );
+    });
+    function g(t) {
+      h.value = t, s("update:query", t);
+    }
+    return (t, n) => {
+      var d, z, k, E;
+      return p(), v("div", ce, [
+        (d = t.search) != null && d.enabled ? (p(), v("label", ie, [
+          t.$slots.title || t.title ? (p(), v("span", ue, [
+            b(" @slot use this slot to customize the title "),
+            C(t.$slots, "title", {}, () => [
+              B(
+                I(t.title),
+                1
+                /* TEXT */
+              )
+            ])
+          ])) : b("v-if", !0),
+          x(V(a), D({
+            id: "query",
+            "model-value": h.value
+          }, t.search, {
+            color: t.color,
+            "left-icon": t.search.leftIcon ?? V(u),
+            debounce: t.search.debounce ?? 300,
+            label: (z = t.search) == null ? void 0 : z.label,
+            name: ((k = t.search) == null ? void 0 : k.name) ?? "search",
+            placeholder: (E = t.search) == null ? void 0 : E.placeholder,
+            "onUpdate:modelValue": n[0] || (n[0] = (w) => g(w))
+          }), null, 16, ["model-value", "color", "left-icon", "debounce", "label", "name", "placeholder"])
+        ])) : b("v-if", !0),
+        x(ee, {
+          color: t.color,
+          "no-elevation": !t.elevation,
+          padding: !1,
+          "content-class": "maz-flex maz-flex-col maz-maz-gap-2 maz-overflow-y-auto maz-bg-color maz-px-3 maz-py-2"
+        }, {
+          default: Z(() => {
+            var w;
+            return [
+              ((w = i.value) == null ? void 0 : w.length) === 0 ? (p(), v("div", de, [
+                b(" @slot use this slot to customize the no results area "),
+                C(t.$slots, "no-results", {}, () => [
+                  m("div", me, [
+                    x(V(y), { class: "maz-text-3xl maz-text-muted" }),
+                    m("span", fe, [
+                      b(" @slot use this slot to customize the no results message "),
+                      C(t.$slots, "no-results-text", {}, () => [
+                        n[2] || (n[2] = B(" No results found "))
+                      ])
+                    ])
+                  ])
+                ])
+              ])) : b("v-if", !0),
+              (p(!0), v(
+                G,
+                null,
+                J(i.value, ({ label: o, value: l }) => (p(), v("label", {
+                  key: l,
+                  for: l,
+                  class: "m-checklist-item maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-color-light"
+                }, [
+                  x(ne, {
+                    id: l,
+                    "model-value": e.modelValue,
+                    value: l,
+                    color: t.color,
+                    "onUpdate:modelValue": n[1] || (n[1] = (S) => s("update:model-value", S))
+                  }, null, 8, ["id", "model-value", "value", "color"]),
+                  b(` @slot use this slot to customize the item
+        @binding { label: string, value: string }
+         `),
+                  C(t.$slots, "item", {
+                    selectedValues: t.modelValue,
+                    item: { label: o, value: l }
+                  }, () => [
+                    m(
+                      "span",
+                      ve,
+                      I(o),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ], 8, pe))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ];
+          }),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["color", "no-elevation"])
+      ]);
+    };
+  }
+});
+export {
+  L as _,
+  be as a,
+  ze as c,
+  oe as u
+};