maz-ui/components/chunks/MazChecklist.CCPcVVKg.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as F, ref as A, computed as p, onMounted as Q, onUnmounted as K, openBlock as v, createElementBlock as h, normalizeClass as $, normalizeStyle as w, createElementVNode as m, renderSlot as C, withDirectives as x, vShow as j, useId as P, unref as S, mergeProps as D, createVNode as V, createTextVNode as M, toDisplayString as _, createCommentVNode as E, defineAsyncComponent as B, watch as T, withCtx as H, Fragment as Z, renderList as G } from "vue";
import '../assets/MazChecklist.B4K89N7e.css';const J = {
  removeAccents: !0,
  caseSensitive: !1,
  replaceSpaces: !0,
  removeSpecialCharacters: !1,
  trim: !0,
  normalizeSpaces: !0,
  removeNumbers: !1,
  customNormalizationForms: ["NFC", "NFKD"]
};
function O(c, a) {
  const e = { ...J, ...a }, 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 t = c.toString();
  if (e.trim && (t = t.trim()), e.normalizeSpaces && (t = t.replaceAll(/\s+/g, " ")), e.replaceSpaces && (t = t.replaceAll(" ", "-")), e.removeNumbers && (t = t.replaceAll(/\d/g, "")), e.removeAccents && (t = t.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (u) => s[u] || u), t = t.replaceAll(/[\u0300-\u036F]/g, "")), e.caseSensitive === !1 && (t = t.toLowerCase()), e.removeSpecialCharacters && (t = t.replaceAll(/[^\dA-Z-]/gi, "")), e.trim && (t = t.trim()), e.customNormalizationForms)
    for (const u of e.customNormalizationForms)
      t = t.normalize(u);
  return t;
}
const W = { class: "inner" }, X = /* @__PURE__ */ F({
  __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) {
    const a = c, e = A(), s = A(), t = A(!1);
    function u({ clientX: i, clientY: g }) {
      var n, d, f;
      t.value = !0;
      const l = (n = s.value) == null ? void 0 : n.getBoundingClientRect();
      l && ((f = (d = e.value) == null ? void 0 : d.animate) == null || f.call(
        d,
        [
          {
            transform: `translate(${i - l.left - l.width / 2}px,${g - l.top - l.height / 2}px)`
          }
        ],
        {
          duration: 300,
          fill: "forwards"
        }
      ));
    }
    const y = p(() => `var(--maz-color-${a.color}-alpha)`), b = p(() => `var(--maz-color-${a.color}-alpha-20)`);
    return Q(() => {
      window.addEventListener("mousemove", u);
    }), K(() => {
      window.removeEventListener("mousemove", u);
    }), (i, g) => (v(), h(
      "div",
      {
        class: $(["m-card-spotlight m-reset-css", { "maz-elevation": !i.noElevation }]),
        style: w({ backgroundColor: b.value, "--inner-opacity": i.innerOpacity })
      },
      [
        m("div", W, [
          m(
            "div",
            {
              class: $(["content", [{ "maz-p-4": i.padding }, i.contentClass]])
            },
            [
              C(i.$slots, "default", {}, void 0, !0)
            ],
            2
            /* CLASS */
          )
        ]),
        x(m(
          "div",
          {
            ref_key: "blobElement",
            ref: e,
            class: "blob",
            style: w({ backgroundColor: y.value })
          },
          null,
          4
          /* STYLE */
        ), [
          [j, t.value]
        ]),
        x(m(
          "div",
          {
            ref_key: "fakeblobElement",
            ref: s,
            class: "fakeblob"
          },
          null,
          512
          /* NEED_PATCH */
        ), [
          [j, t.value]
        ])
      ],
      6
      /* CLASS, STYLE */
    ));
  }
}), q = (c, a) => {
  const e = c.__vccOpts || c;
  for (const [s, t] of a)
    e[s] = t;
  return e;
}, Y = /* @__PURE__ */ q(X, [["__scopeId", "data-v-4f773edc"]]);
function ee({
  componentName: c,
  providedId: a
}) {
  return p(() => a ?? `${c}-${P().replace(/:/g, "")}`);
}
const oe = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "1em",
  height: "1em",
  fill: "none",
  viewBox: "0 0 24 24"
};
function L(c, a) {
  return v(), h("svg", oe, a[0] || (a[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 R = { render: L }, be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: R,
  render: L
}, Symbol.toStringTag, { value: "Module" })), le = ["for", "aria-checked"], te = ["id", "checked", "disabled", "name"], ae = { class: "m-checkbox__text" }, re = /* @__PURE__ */ F({
  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: a }) {
    const e = c, s = a, t = ee({
      componentName: "MazCheckbox",
      providedId: e.id
    }), u = p(
      () => typeof e.value != "boolean" && Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : typeof e.modelValue == "boolean" ? e.modelValue : !1
    ), y = p(() => {
      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";
      }
    }), b = p(() => {
      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 = p(() => e.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${e.color}-contrast)`), g = p(() => e.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${e.color})`), l = p(() => 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(), f(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((r) => r !== o) : [...e.modelValue, o] : [o];
    }
    function f(o) {
      const r = d(o);
      s("update:model-value", r), s("change", r);
    }
    const k = A();
    function I(o) {
      var r;
      (r = k.value) == null || r.dispatchEvent(new Event("blur")), s("blur", o);
    }
    function z(o) {
      var r;
      (r = k.value) == null || r.dispatchEvent(new Event("focus")), s("focus", o);
    }
    return (o, r) => (v(), h("label", {
      for: S(t),
      class: $(["m-checkbox m-reset-css", [{ "--disabled": o.disabled, "--error": o.error, "--warning": o.warning, "--success": o.success }, e.class]]),
      tabindex: "0",
      style: w([o.style, { "--checkbox-selected-color": g.value, "--checkbox-box-shadow-color": l.value }]),
      role: "checkbox",
      "aria-checked": u.value,
      onKeydown: n,
      onBlur: I,
      onFocus: z
    }, [
      m("input", D({
        id: S(t),
        ref_key: "inputRef",
        ref: k,
        checked: u.value
      }, o.$attrs, {
        tabindex: "-1",
        disabled: o.disabled,
        name: o.name,
        type: "checkbox",
        onChange: r[0] || (r[0] = (N) => {
          var U;
          return f(o.value ?? ((U = N == null ? void 0 : N.target) == null ? void 0 : U.checked));
        })
      }), null, 16, te),
      m(
        "span",
        {
          style: w({ width: y.value, height: y.value })
        },
        [
          V(S(R), {
            class: $(["check-icon", b.value]),
            style: w({ color: i.value })
          }, null, 8, ["class", "style"])
        ],
        4
        /* STYLE */
      ),
      m("div", ae, [
        C(o.$slots, "default", { value: o.value }, () => [
          M(
            _(o.label),
            1
            /* TEXT */
          )
        ], !0),
        o.hint ? (v(), h(
          "span",
          {
            key: 0,
            class: $(["m-checkbox__hint", {
              "--error": o.error,
              "--success": o.success,
              "--warning": o.warning
            }]),
            style: w({ boxShadow: `0 0 0 0.125rem ${l.value}` })
          },
          _(o.hint),
          7
          /* TEXT, CLASS, STYLE */
        )) : E("v-if", !0)
      ])
    ], 46, le));
  }
}), se = /* @__PURE__ */ q(re, [["__scopeId", "data-v-66c21eaf"]]), ne = { class: "m-checklist m-reset-css" }, ce = {
  key: 0,
  for: "query",
  class: "search-label"
}, ue = {
  key: 0,
  class: "title"
}, ie = {
  key: 0,
  class: "no-results"
}, de = { class: "no-results-content" }, me = { class: "no-results-text" }, fe = ["for"], pe = { class: "item-label" }, ve = /* @__PURE__ */ F({
  __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: {},
    searchFunction: {},
    color: { default: "primary" }
  },
  emits: ["update:query", "update:model-value"],
  setup(c, { emit: a }) {
    const e = c, s = a, t = B(() => import("./MazInput.5Zn7f5zz.mjs")), u = B(
      () => import("./magnifying-glass.-nBiyXot.mjs")
    ), y = B(
      () => import("./no-symbol.CIgKzsrB.mjs")
    ), b = A(e.query);
    T(
      () => e.query,
      (l) => {
        b.value = l;
      }
    );
    const i = p(() => {
      var n;
      if (!b.value || !e.search.enabled)
        return e.items;
      const l = O(b.value, e.searchOptions);
      return e.searchFunction ? e.searchFunction(l, e.items ?? []) : (n = e.items) == null ? void 0 : n.filter(
        ({ label: d, value: f }) => O(d, e.searchOptions).includes(l) || O(f, e.searchOptions).includes(l)
      );
    });
    function g(l) {
      b.value = l, s("update:query", l);
    }
    return (l, n) => {
      var d, f, k, I;
      return v(), h("div", ne, [
        (d = l.search) != null && d.enabled ? (v(), h("label", ce, [
          l.$slots.title || l.title ? (v(), h("span", ue, [
            C(l.$slots, "title", {}, () => [
              M(
                _(l.title),
                1
                /* TEXT */
              )
            ], !0)
          ])) : E("v-if", !0),
          V(S(t), D({
            id: "query",
            "model-value": b.value
          }, l.search, {
            color: l.color,
            "left-icon": l.search.leftIcon ?? S(u),
            debounce: l.search.debounce ?? 300,
            label: (f = l.search) == null ? void 0 : f.label,
            name: ((k = l.search) == null ? void 0 : k.name) ?? "search",
            placeholder: (I = l.search) == null ? void 0 : I.placeholder,
            "onUpdate:modelValue": n[0] || (n[0] = (z) => g(z))
          }), null, 16, ["model-value", "color", "left-icon", "debounce", "label", "name", "placeholder"])
        ])) : E("v-if", !0),
        V(Y, {
          color: l.color,
          "no-elevation": !l.elevation,
          padding: !1,
          "content-class": "card-content"
        }, {
          default: H(() => {
            var z;
            return [
              ((z = i.value) == null ? void 0 : z.length) === 0 ? (v(), h("div", ie, [
                C(l.$slots, "no-results", {}, () => [
                  m("div", de, [
                    V(S(y), { class: "no-results-icon" }),
                    m("span", me, [
                      C(l.$slots, "no-results-text", {}, () => [
                        n[2] || (n[2] = M(" No results found "))
                      ], !0)
                    ])
                  ])
                ], !0)
              ])) : E("v-if", !0),
              (v(!0), h(
                Z,
                null,
                G(i.value, (o) => (v(), h("label", {
                  key: o.value,
                  for: o.value,
                  class: "m-checklist-item m-reset-css"
                }, [
                  V(se, {
                    id: o.value,
                    "model-value": e.modelValue,
                    value: o.value,
                    color: l.color,
                    "onUpdate:modelValue": n[1] || (n[1] = (r) => s("update:model-value", r))
                  }, null, 8, ["id", "model-value", "value", "color"]),
                  C(l.$slots, "item", {
                    selectedValues: l.modelValue,
                    item: o
                  }, () => [
                    m(
                      "span",
                      pe,
                      _(o.label),
                      1
                      /* TEXT */
                    )
                  ], !0)
                ], 8, fe))),
                128
                /* KEYED_FRAGMENT */
              ))
            ];
          }),
          _: 3
          /* FORWARDED */
        }, 8, ["color", "no-elevation"])
      ]);
    };
  }
}), ye = /* @__PURE__ */ q(ve, [["__scopeId", "data-v-193c5df9"]]);
export {
  ye as M,
  q as _,
  be as c,
  ee as u
};