maz-ui/components/chunks/MazSelect.CZ8-FJbx.mjs

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

import { computed as f, defineComponent as Le, defineAsyncComponent as $, ref as g, onBeforeMount as we, nextTick as W, withDirectives as Ce, openBlock as V, createElementBlock as I, normalizeClass as q, normalizeStyle as j, createVNode as N, mergeProps as Me, unref as L, withModifiers as M, withCtx as ie, createElementVNode as O, Transition as Ee, createBlock as se, createCommentVNode as Q, renderSlot as G, Fragment as ue, renderList as Te, toDisplayString as re } from "vue";
import { u as $e } from "./useInstanceUniqId.BkOfxhk8.mjs";
import ce from "./MazInput.CwPPyy_i.mjs";
import { _ as Ne } from "./MazTable.BtL5to1U.mjs";
import '../assets/MazSelect.DNrj4_e-.css';const Oe = {
  removeAccents: !0,
  caseSensitive: !1,
  replaceSpaces: !0,
  removeSpecialCharacters: !1,
  trim: !0,
  normalizeSpaces: !0,
  removeNumbers: !1,
  customNormalizationForms: ["NFC", "NFKD"]
};
function x(u, r) {
  const i = { ...Oe, ...r }, t = {
    À: "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 n = u.toString();
  if (i.trim && (n = n.trim()), i.normalizeSpaces && (n = n.replaceAll(/\s+/g, " ")), i.replaceSpaces && (n = n.replaceAll(" ", "-")), i.removeNumbers && (n = n.replaceAll(/\d/g, "")), i.removeAccents && (n = n.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (s) => t[s] || s), n = n.replaceAll(/[\u0300-\u036F]/g, "")), i.caseSensitive === !1 && (n = n.toLowerCase()), i.removeSpecialCharacters && (n = n.replaceAll(/[^\dA-Z-]/gi, "")), i.trim && (n = n.trim()), i.customNormalizationForms)
    for (const s of i.customNormalizationForms)
      n = n.normalize(s);
  return n;
}
function xe(u, r) {
  const i = u.length, t = r.length, n = [];
  for (let s = 0; s <= i; s++)
    n[s] = [s];
  for (let s = 0; s <= t; s++)
    n[0][s] = s;
  for (let s = 1; s <= i; s++)
    for (let m = 1; m <= t; m++) {
      const z = u[s - 1] === r[m - 1] ? 0 : 1;
      n[s][m] = Math.min(
        n[s - 1][m] + 1,
        n[s][m - 1] + 1,
        n[s - 1][m - 1] + z
      );
    }
  return n[i][t];
}
function de(u, r) {
  const i = xe(u, r), t = Math.max(u.length, r.length);
  return 1 - i / t;
}
function Be(u, r, i = 0.75) {
  return de(u, r) >= i;
}
function Z(u, r, i = 0.75) {
  const t = f(
    () => x(typeof u == "string" ? u : u.value)
  ), n = f(
    () => x(typeof r == "string" ? r : r.value)
  ), s = f(() => typeof i == "number" ? i : i.value), m = f(() => de(t.value, n.value));
  return {
    isMatching: f(
      () => Be(t.value, n.value, s.value)
    ),
    score: m
  };
}
function pe(u, r, i) {
  var m, z;
  u.stopPropagation();
  const t = typeof i.value == "function" ? i.value : i.value.handler, n = typeof i.value == "object" ? i.value.exclude : void 0;
  let s = !1;
  if (n && n.length > 0) {
    for (const E of n)
      if (!s && u.target instanceof HTMLElement) {
        const h = (m = document.querySelector(E)) == null ? void 0 : m.getAttribute("id");
        s = (u.target.getAttribute("id") === h || ((z = document.querySelector(E)) == null ? void 0 : z.contains(u.target))) ?? !1;
      }
  }
  !r.contains(u.target) && !s && (t == null || t(u));
}
function fe() {
  return document.ontouchstart === null ? "touchstart" : "click";
}
function De(u, r) {
  const i = fe();
  document.removeEventListener(i, (t) => pe(t, u, r));
}
function He(u, r) {
  if (typeof r.value != "function" && typeof r.value == "object" && typeof r.value.handler != "function") {
    console.error("[maz-ui](vClosable) v-closable directive requires a handler function");
    return;
  }
  const i = fe();
  document.addEventListener(i, (t) => pe(t, u, r));
}
const Fe = {
  mounted: He,
  unmounted: De
};
let R = null;
function Pe(u, r) {
  R && clearTimeout(R), R = setTimeout(u, r);
}
const Ue = ["aria-label"], We = { class: "m-select-list__no-results" }, qe = {
  key: 2,
  class: "m-select-list__scroll-wrapper",
  tabindex: "-1"
}, je = { class: "m-select-list-optgroup" }, Qe = ["onClick"], Ge = /* @__PURE__ */ Le({
  inheritAttrs: !1,
  __name: "MazSelect",
  props: {
    style: { default: void 0 },
    class: { default: void 0 },
    id: { default: void 0 },
    modelValue: { default: void 0 },
    options: { default: void 0 },
    optionValueKey: { default: "value" },
    optionLabelKey: { default: "label" },
    optionInputValueKey: { default: "label" },
    listPosition: { default: "bottom left" },
    itemHeight: { default: void 0 },
    maxListHeight: { default: 240 },
    maxListWidth: { default: void 0 },
    minListHeight: { default: void 0 },
    minListWidth: { default: void 0 },
    size: { default: "md" },
    color: { default: "primary" },
    search: { type: Boolean },
    searchPlaceholder: { default: "Search in options" },
    searchFunction: {},
    searchThreshold: { default: 0.75 },
    open: { type: Boolean },
    multiple: { type: Boolean, default: void 0 },
    required: { type: Boolean },
    disabled: { type: Boolean },
    block: { type: Boolean },
    excludeSelectors: { default: void 0 },
    autocomplete: { default: "off" }
  },
  emits: ["close", "open", "blur", "focus", "change", "input", "update:model-value", "selected-option"],
  setup(u, { expose: r, emit: i }) {
    const t = u, n = i, s = $(() => import("./MazCheckbox.CYeDQcMp.mjs")), m = $(() => import("./magnifying-glass.-nBiyXot.mjs")), z = $(() => import("./chevron-down.BkvtON3b.mjs")), E = $(() => import("./no-symbol.CIgKzsrB.mjs"));
    r({
      /** Method to open the option list */
      openList: C,
      /** Method to close the option list */
      closeList: A
    });
    const h = g(!1), d = g(), B = f(
      () => ["black", "transparent", "white"].includes(t.color)
    ), me = f(
      () => B.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
    ), ve = f(
      () => B.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
    ), ye = f(
      () => B.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
    ), b = f(() => h.value || t.open), he = $e({
      componentName: "MazSelect",
      providedId: t.id
    });
    function J(e) {
      return {
        [t.optionValueKey]: e,
        [t.optionLabelKey]: e,
        [t.optionInputValueKey]: e
      };
    }
    function X(e) {
      return {
        ...e,
        [t.optionValueKey]: e[t.optionValueKey],
        [t.optionLabelKey]: e[t.optionLabelKey],
        [t.optionInputValueKey]: e[t.optionInputValueKey]
      };
    }
    function Y(e) {
      const o = [];
      if (!(e != null && e.length))
        return [];
      for (const l of e)
        typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? o.push(J(l)) : typeof l == "object" && "options" in l && Array.isArray(l.options) ? o.push(
          { label: l.label, isOptGroup: !0 },
          ...l.options.map(
            (a) => typeof a == "string" || typeof a == "number" || typeof a == "boolean" ? J(a) : X(a)
          )
        ) : o.push(X(l));
      return o;
    }
    const w = f(() => Y(t.options ?? [])), T = f(
      () => {
        var e;
        return ((e = w.value) == null ? void 0 : e.filter((o) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(o[t.optionValueKey]) && !k(o[t.optionValueKey]) : !1 : t.modelValue === o[t.optionValueKey] && !k(o[t.optionValueKey]))) ?? [];
      }
    );
    we(() => {
      var e;
      (e = t.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), U();
    });
    const _ = g(), D = g(), ee = g(), te = g();
    function k(e) {
      return e == null;
    }
    function H(e) {
      var l;
      return (((l = T.value) == null ? void 0 : l.some(
        (a) => a[t.optionValueKey] === e[t.optionValueKey]
      )) ?? !1) && !k(e[t.optionValueKey]);
    }
    const be = f(() => {
      var o;
      if (t.multiple && t.modelValue && Array.isArray(t.modelValue))
        return t.modelValue.map(
          (l) => {
            var a, c;
            return (c = (a = w.value) == null ? void 0 : a.find((p) => p[t.optionValueKey] === l)) == null ? void 0 : c[t.optionInputValueKey];
          }
        ).join(", ");
      const e = (o = w.value) == null ? void 0 : o.find(
        (l) => l[t.optionValueKey] === t.modelValue
      );
      return k(t.modelValue) || e == null ? void 0 : e[t.optionInputValueKey];
    }), ge = f(
      () => t.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
    ), K = g(""), S = g("");
    function F(e, o) {
      return o && e && x(e).includes(x(o));
    }
    function oe(e) {
      var o;
      return e ? (o = w.value) == null ? void 0 : o.filter((l) => {
        const a = l[t.optionLabelKey], c = l[t.optionValueKey], p = l[t.optionInputValueKey], v = t.searchThreshold;
        return F(a, e) || F(p, e) || F(c, e) || typeof a == "string" && Z(a, e, v).isMatching.value || typeof p == "string" && Z(p, e, v).isMatching.value || typeof c == "string" && Z(c, e, v).isMatching.value;
      }) : w.value;
    }
    const y = f(() => t.searchFunction && t.search && K.value ? Y(t.searchFunction(K.value, t.options ?? []) ?? []) : oe(K.value));
    async function A(e) {
      var l, a;
      if (!b.value)
        return;
      if (e && ("relatedTarget" in e && ((l = _.value) != null && l.contains(e.relatedTarget)) || e.type === "keydown"))
        return e.preventDefault();
      const o = e && "relatedTarget" in e && e.relatedTarget instanceof HTMLElement && e.relatedTarget.getAttribute("id");
      if ((a = t.excludeSelectors) != null && a.includes(`#${o}`))
        return e == null ? void 0 : e.preventDefault();
      await W(), h.value = !1, d.value = 0, n("close", e);
    }
    async function C(e) {
      t.disabled || b.value || (e == null || e.preventDefault(), h.value = !0, await P(), n("focus", e), n("open", h.value));
    }
    function le() {
      var e, o;
      (o = ((e = D.value) == null ? void 0 : e.$el).querySelector("input")) == null || o.focus();
    }
    function Ve() {
      var e, o;
      (o = ((e = D.value) == null ? void 0 : e.$el).querySelector("input")) == null || o.dispatchEvent(new Event("input"));
    }
    function ze(e) {
      h.value ? A(e) : le();
    }
    function Ke(e) {
      var o, l;
      K.value = e, (l = ((o = ee.value) == null ? void 0 : o.$el).querySelector("input")) == null || l.focus();
    }
    function ke(e) {
      var l;
      e === "Backspace" && S.value.length > 0 ? S.value = S.value.slice(0, -1) : S.value += e;
      const o = oe(S.value);
      o != null && o.length && (d.value = (l = y.value) == null ? void 0 : l.findIndex(
        (a) => a[t.optionValueKey] === o[0][t.optionValueKey]
      ), typeof d.value == "number" && d.value >= 0 && P(d.value)), Pe(() => {
        S.value = "";
      }, 1e3);
    }
    function Se(e) {
      const o = e.key;
      /^[\dA-Za-z\u0400-\u04FF]$/.test(o) ? (e.preventDefault(), C(e), t.search ? Ke(o) : ke(o)) : ae(e);
    }
    function ae(e, o = !0) {
      const l = e.code, a = ["ArrowUp", "ArrowDown"].includes(l), c = (o ? ["Enter", "Space"] : ["Enter"]).includes(l), p = l === "Escape" && b.value;
      a ? Ae(e, d.value) : c ? Ie(e, d.value) : p && A(e);
    }
    function Ae(e, o) {
      var c;
      e.preventDefault();
      const l = e.code;
      b.value || C(e);
      const a = (c = y.value) == null ? void 0 : c.length;
      a && (typeof o == "number" ? o === a - 1 && l === "ArrowDown" ? d.value = 0 : o === 0 && l === "ArrowUp" ? d.value = a - 1 : d.value = l === "ArrowDown" ? o + 1 : o - 1 : d.value = l === "ArrowDown" ? 0 : a - 1, P(d.value));
    }
    function Ie(e, o) {
      var a, c, p;
      if (!b.value)
        return;
      e.preventDefault();
      const l = o ? ((a = y.value) == null ? void 0 : a[o]) ?? ((c = y.value) == null ? void 0 : c[0]) : (p = y.value) == null ? void 0 : p[0];
      k(l) || ne(l);
    }
    async function P(e) {
      var l, a;
      await W(), typeof e != "number" && U();
      const o = e ?? d.value;
      if (typeof o == "number" && o >= 0) {
        const c = (l = te.value) == null ? void 0 : l.querySelectorAll(".m-select-list-item");
        (a = c == null ? void 0 : c[o]) == null || a.scrollIntoView({
          behavior: "auto",
          block: "nearest",
          inline: "start"
        });
      }
    }
    function U(e) {
      var l;
      const o = (l = y.value) == null ? void 0 : l.findIndex((a) => {
        var c, p;
        return t.multiple && Array.isArray(t.modelValue) ? e ? e[t.optionValueKey] === a[t.optionValueKey] : [...t.modelValue].reverse()[0] === a[t.optionValueKey] : ((p = (c = T.value) == null ? void 0 : c[0]) == null ? void 0 : p[t.optionValueKey]) === a[t.optionValueKey];
      });
      d.value = o && o >= 0 ? o : 0;
    }
    function ne(e, o = !0) {
      var p;
      o && !t.multiple && W(() => A()), K.value = "";
      const l = (p = T.value) == null ? void 0 : p.some(
        (v) => v[t.optionValueKey] === e[t.optionValueKey]
      );
      let a = T.value;
      l && t.multiple ? a = a == null ? void 0 : a.filter(
        (v) => v[t.optionValueKey] !== e[t.optionValueKey]
      ) : t.multiple ? a.push(e) : a = [e];
      const c = a.map((v) => v[t.optionValueKey]);
      n("update:model-value", t.multiple ? c : c[0]), n("selected-option", e), Ve(), U(e), le();
    }
    return (e, o) => Ce((V(), I(
      "div",
      {
        ref_key: "mazSelectElement",
        ref: _,
        class: q(["m-select m-reset-css", [
          { "--is-open": b.value, "--disabled": e.disabled, "--block": e.block },
          t.class,
          `--${e.size}`
        ]]),
        style: j([e.style, { "--keyboard-selected-bg-color": ye.value, "--selected-bg-color": ve.value, "--selected-text-color": me.value }])
      },
      [
        N(ce, Me({
          id: L(he),
          ref_key: "mazInputComponent",
          ref: D,
          class: "m-select-input"
        }, e.$attrs, {
          required: e.required,
          "border-active": h.value,
          color: e.color,
          "model-value": be.value,
          size: e.size,
          block: "",
          autocomplete: e.autocomplete,
          disabled: e.disabled,
          onFocus: M(C, ["prevent", "stop"]),
          onBlur: M(A, ["prevent", "stop"]),
          onClick: M(C, ["prevent", "stop"]),
          onChange: o[0] || (o[0] = (l) => n("change", l)),
          onInput: o[1] || (o[1] = (l) => n("input", l)),
          onKeydown: Se
        }), {
          "right-icon": ie(() => [
            O("button", {
              tabindex: "-1",
              type: "button",
              class: "m-select-input__toggle-button maz-custom",
              "aria-label": `${b.value ? "collapse" : "expand"} list of options`,
              onClick: M(ze, ["stop"])
            }, [
              N(L(z), { class: "m-select-chevron maz-text-xl" })
            ], 8, Ue)
          ]),
          _: 1
          /* STABLE */
        }, 16, ["id", "required", "border-active", "color", "model-value", "size", "autocomplete", "disabled"]),
        N(Ee, { name: ge.value }, {
          default: ie(() => [
            b.value ? (V(), I(
              "div",
              {
                key: 0,
                ref_key: "optionListElement",
                ref: te,
                class: q(["m-select-list", {
                  "--top": e.listPosition.includes("top"),
                  "--left": e.listPosition.includes("left"),
                  "--right": e.listPosition.includes("right"),
                  "--bottom": e.listPosition.includes("bottom")
                }]),
                style: j({
                  maxHeight: `${e.maxListHeight}px`,
                  maxWidth: `${e.maxListWidth}px`,
                  minHeight: `${e.minListHeight}px`,
                  minWidth: `${e.minListWidth}px`
                })
              },
              [
                e.search ? (V(), se(ce, {
                  key: 0,
                  ref_key: "searchInputComponent",
                  ref: ee,
                  modelValue: K.value,
                  "onUpdate:modelValue": [
                    o[2] || (o[2] = (l) => K.value = l),
                    o[4] || (o[4] = (l) => d.value = 0)
                  ],
                  size: "sm",
                  color: e.color,
                  placeholder: e.searchPlaceholder,
                  name: "search",
                  inputmode: "search",
                  block: "",
                  autocomplete: "off",
                  tabindex: "-1",
                  class: "m-select-list__search-input maz-flex-none",
                  "left-icon": L(m),
                  onKeydown: o[3] || (o[3] = (l) => ae(l, !1))
                }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : Q("v-if", !0),
                !y.value || y.value.length <= 0 ? G(e.$slots, "no-results", { key: 1 }, () => [
                  O("span", We, [
                    N(L(E), { class: "maz-h-6 maz-w-6 maz-text-normal" })
                  ])
                ], !0) : (V(), I("div", qe, [
                  (V(!0), I(
                    ue,
                    null,
                    Te(y.value, (l, a) => (V(), I(
                      ue,
                      { key: a },
                      [
                        l.label && l.isOptGroup ? G(e.$slots, "optgroup", {
                          key: 0,
                          label: l.label
                        }, () => [
                          O(
                            "span",
                            je,
                            re(l.label),
                            1
                            /* TEXT */
                          )
                        ], !0) : (V(), I("button", {
                          key: 1,
                          tabindex: "-1",
                          type: "button",
                          class: q(["m-select-list-item maz-custom maz-flex-none", [
                            {
                              "--is-keyboard-selected": d.value === a,
                              "--is-selected": H(l),
                              "--is-none-value": k(l[e.optionValueKey])
                            }
                          ]]),
                          style: j(e.itemHeight ? { height: `${e.itemHeight}px` } : void 0),
                          onClick: M((c) => ne(l), ["prevent", "stop"])
                        }, [
                          e.multiple ? (V(), se(L(s), {
                            key: 0,
                            tabindex: "-1",
                            "model-value": H(l),
                            size: "sm",
                            color: e.color
                          }, null, 8, ["model-value", "color"])) : Q("v-if", !0),
                          G(e.$slots, "default", {
                            option: l,
                            isSelected: H(l)
                          }, () => [
                            O(
                              "span",
                              null,
                              re(l[e.optionLabelKey]),
                              1
                              /* TEXT */
                            )
                          ], !0)
                        ], 14, Qe))
                      ],
                      64
                      /* STABLE_FRAGMENT */
                    ))),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ]))
              ],
              6
              /* CLASS, STYLE */
            )) : Q("v-if", !0)
          ]),
          _: 3
          /* FORWARDED */
        }, 8, ["name"])
      ],
      6
      /* CLASS, STYLE */
    )), [
      [L(Fe), {
        exclude: e.excludeSelectors,
        handler: A
      }]
    ]);
  }
}), Ye = /* @__PURE__ */ Ne(Ge, [["__scopeId", "data-v-98157b75"]]);
export {
  Ye as default
};