maz-ui 3.50.0 → 4.0.0-alpha.2

package/dist/components/MazReadingProgressBar.js

@@ -0,0 +1,67 @@
+import { defineComponent as m, computed as p, ref as a, watch as v, onMounted as g, onBeforeUnmount as h, openBlock as w, createBlock as b, Teleport as S, createElementVNode as i, mergeProps as y, normalizeClass as _, normalizeStyle as B, nextTick as C } from "vue";
+import { throttle as z } from "../helpers/throttle.js";
+import { _ as k } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazReadingProgressBar.CbqVvC8N.css';const E = /* @__PURE__ */ m({
+  __name: "MazReadingProgressBar",
+  props: {
+    height: { default: "4px" },
+    color: { default: "primary" },
+    teleportSelector: { default: "body" },
+    contentSelector: { default: "body" },
+    offset: { default: 0 },
+    barClass: { default: void 0 },
+    distance: { default: void 0 }
+  },
+  emits: ["begin", "complete"],
+  setup(c, { emit: d }) {
+    const t = c, l = d, u = p(() => `var(--maz-color-${t.color})`), r = a(), o = a(0);
+    v(
+      () => t.distance,
+      (e) => {
+        e && (o.value = e);
+      },
+      {
+        immediate: !0
+      }
+    );
+    const s = z(() => {
+      const e = window.scrollY;
+      if (e >= 0 && e <= o.value) {
+        const n = e / o.value * 100;
+        r.value = `${n}%`;
+      } else e <= 0 ? (r.value = "0%", l("begin")) : e > o.value ? (r.value = "100%", l("complete")) : r.value = "0%";
+    }, 15);
+    async function f() {
+      if (o.value === 0) {
+        const e = document.querySelector(t.contentSelector);
+        if (!e) {
+          console.error(`HTML Element with selector "${t.contentSelector}" not found.`);
+          return;
+        }
+        await C(), o.value = e.offsetHeight + e.offsetTop + t.offset - window.innerHeight;
+      }
+      window.addEventListener("scroll", s, {
+        passive: !0
+      });
+    }
+    return g(() => {
+      f();
+    }), h(() => {
+      window.removeEventListener("scroll", s);
+    }), (e, n) => (w(), b(S, { to: e.teleportSelector }, [
+      i("div", y({ class: "m-reading-progress-bar m-reset-css" }, e.$attrs), [
+        i("div", {
+          class: _(e.barClass),
+          style: B({
+            width: r.value ?? "0px",
+            height: e.height,
+            backgroundColor: u.value
+          })
+        }, null, 6)
+      ], 16)
+    ], 8, ["to"]));
+  }
+}), T = /* @__PURE__ */ k(E, [["__scopeId", "data-v-ff830232"]]);
+export {
+  T as default
+};

package/dist/components/MazSelect.js

@@ -0,0 +1,377 @@
+import { defineComponent as ke, defineAsyncComponent as w, ref as p, computed as r, onBeforeMount as Ie, nextTick as D, withDirectives as Se, openBlock as m, createElementBlock as g, normalizeClass as E, normalizeStyle as P, createVNode as L, mergeProps as we, unref as z, withModifiers as I, withCtx as X, createElementVNode as C, Transition as Le, createBlock as Y, createCommentVNode as N, renderSlot as O, Fragment as _, renderList as Ce, toDisplayString as ee } from "vue";
+import le from "./MazInput.js";
+import { useInstanceUniqId as Ae } from "../composables/useInstanceUniqId.js";
+import { useStringMatching as F } from "../composables/useStringMatching.js";
+import { vClosable as $e } from "../directives/vClosable.js";
+import { debounceCallback as Me } from "../helpers/debounceCallback.js";
+import { normalizeString as oe } from "../helpers/normalizeString.js";
+import { _ as Te } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazSelect.CH_76PSg.css';const Be = ["aria-label"], He = { class: "m-select-list__no-results" }, De = {
+  key: 2,
+  class: "m-select-list__scroll-wrapper",
+  tabindex: "-1"
+}, Ee = { class: "m-select-list-optgroup" }, Pe = ["onClick"], Ne = /* @__PURE__ */ ke({
+  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(te, { expose: ae, emit: ne }) {
+    const t = te, f = ne, ie = w(() => import("./MazCheckbox.js")), se = w(() => import("../chunks/magnifying-glass.6EkSEo-G.js")), ue = w(() => import("../chunks/chevron-down.CWWH3GZ1.js")), re = w(() => import("../chunks/no-symbol.DqVEpOgn.js"));
+    ae({
+      /** Method to open the option list */
+      openList: k,
+      /** Method to close the option list */
+      closeList: V
+    });
+    const v = p(!1), i = p(), A = r(
+      () => ["black", "transparent", "white"].includes(t.color)
+    ), ce = r(
+      () => A.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
+    ), de = r(
+      () => A.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
+    ), pe = r(
+      () => A.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
+    ), d = r(() => v.value || t.open), me = Ae({
+      componentName: "MazSelect",
+      providedId: t.id
+    });
+    function W(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 U(e) {
+      const l = [];
+      if (!(e != null && e.length))
+        return [];
+      for (const o of e)
+        typeof o == "string" || typeof o == "number" || typeof o == "boolean" ? l.push(W(o)) : typeof o == "object" && "options" in o && Array.isArray(o.options) ? l.push(
+          { label: o.label, isOptGroup: !0 },
+          ...o.options.map(
+            (a) => typeof a == "string" || typeof a == "number" || typeof a == "boolean" ? W(a) : x(a)
+          )
+        ) : l.push(x(o));
+      return l;
+    }
+    const K = r(() => U(t.options ?? [])), S = r(
+      () => {
+        var e;
+        return ((e = K.value) == null ? void 0 : e.filter((l) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(l[t.optionValueKey]) && !h(l[t.optionValueKey]) : !1 : t.modelValue === l[t.optionValueKey] && !h(l[t.optionValueKey]))) ?? [];
+      }
+    );
+    Ie(() => {
+      var e;
+      (e = t.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), H();
+    });
+    const Q = p(), $ = p(), q = p(), j = p();
+    function h(e) {
+      return e == null;
+    }
+    function M(e) {
+      var o;
+      return (((o = S.value) == null ? void 0 : o.some(
+        (a) => a[t.optionValueKey] === e[t.optionValueKey]
+      )) ?? !1) && !h(e[t.optionValueKey]);
+    }
+    const fe = r(() => {
+      var l;
+      if (t.multiple && t.modelValue && Array.isArray(t.modelValue))
+        return t.modelValue.map(
+          (o) => {
+            var a, n;
+            return (n = (a = K.value) == null ? void 0 : a.find((s) => s[t.optionValueKey] === o)) == null ? void 0 : n[t.optionInputValueKey];
+          }
+        ).join(", ");
+      const e = (l = K.value) == null ? void 0 : l.find(
+        (o) => o[t.optionValueKey] === t.modelValue
+      );
+      return h(t.modelValue) || e == null ? void 0 : e[t.optionInputValueKey];
+    }), ye = r(
+      () => t.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
+    ), y = p(""), b = p("");
+    function T(e, l) {
+      return l && e && oe(e).includes(oe(l));
+    }
+    function G(e) {
+      var l;
+      return e ? (l = K.value) == null ? void 0 : l.filter((o) => {
+        const a = o[t.optionLabelKey], n = o[t.optionValueKey], s = o[t.optionInputValueKey], u = t.searchThreshold;
+        return T(a, e) || T(s, e) || T(n, e) || typeof a == "string" && F(a, e, u).isMatching.value || typeof s == "string" && F(s, e, u).isMatching.value || typeof n == "string" && F(n, e, u).isMatching.value;
+      }) : K.value;
+    }
+    const c = r(() => t.searchFunction && t.search && y.value ? U(t.searchFunction(y.value, t.options ?? []) ?? []) : G(y.value));
+    async function V(e) {
+      var o, a;
+      if (!d.value)
+        return;
+      if (e && ("relatedTarget" in e && ((o = Q.value) != null && o.contains(e.relatedTarget)) || e.type === "keydown"))
+        return e.preventDefault();
+      const l = e && "relatedTarget" in e && e.relatedTarget instanceof HTMLElement && e.relatedTarget.getAttribute("id");
+      if ((a = t.excludeSelectors) != null && a.includes(`#${l}`))
+        return e == null ? void 0 : e.preventDefault();
+      await D(), v.value = !1, i.value = 0, f("close", e);
+    }
+    async function k(e) {
+      t.disabled || d.value || (e == null || e.preventDefault(), v.value = !0, await B(), f("focus", e), f("open", v.value));
+    }
+    function Z() {
+      var e, l;
+      (l = ((e = $.value) == null ? void 0 : e.$el).querySelector("input")) == null || l.focus();
+    }
+    function ve() {
+      var e, l;
+      (l = ((e = $.value) == null ? void 0 : e.$el).querySelector("input")) == null || l.dispatchEvent(new Event("input"));
+    }
+    function he(e) {
+      v.value ? V(e) : Z();
+    }
+    function be(e) {
+      var l, o;
+      y.value = e, (o = ((l = q.value) == null ? void 0 : l.$el).querySelector("input")) == null || o.focus();
+    }
+    function Ve(e) {
+      var o;
+      e === "Backspace" && b.value.length > 0 ? b.value = b.value.slice(0, -1) : b.value += e;
+      const l = G(b.value);
+      l != null && l.length && (i.value = (o = c.value) == null ? void 0 : o.findIndex(
+        (a) => a[t.optionValueKey] === l[0][t.optionValueKey]
+      ), typeof i.value == "number" && i.value >= 0 && B(i.value)), Me(() => {
+        b.value = "";
+      }, 1e3);
+    }
+    function ge(e) {
+      const l = e.key;
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(l) ? (e.preventDefault(), k(e), t.search ? be(l) : Ve(l)) : J(e);
+    }
+    function J(e, l = !0) {
+      const o = e.code, a = ["ArrowUp", "ArrowDown"].includes(o), n = (l ? ["Enter", "Space"] : ["Enter"]).includes(o), s = o === "Escape" && d.value;
+      a ? ze(e, i.value) : n ? Ke(e, i.value) : s && V(e);
+    }
+    function ze(e, l) {
+      var n;
+      e.preventDefault();
+      const o = e.code;
+      d.value || k(e);
+      const a = (n = c.value) == null ? void 0 : n.length;
+      a && (typeof l == "number" ? l === a - 1 && o === "ArrowDown" ? i.value = 0 : l === 0 && o === "ArrowUp" ? i.value = a - 1 : i.value = o === "ArrowDown" ? l + 1 : l - 1 : i.value = o === "ArrowDown" ? 0 : a - 1, B(i.value));
+    }
+    function Ke(e, l) {
+      var a, n, s;
+      if (!d.value)
+        return;
+      e.preventDefault();
+      const o = l ? ((a = c.value) == null ? void 0 : a[l]) ?? ((n = c.value) == null ? void 0 : n[0]) : (s = c.value) == null ? void 0 : s[0];
+      h(o) || R(o);
+    }
+    async function B(e) {
+      var o, a;
+      await D(), typeof e != "number" && H();
+      const l = e ?? i.value;
+      if (typeof l == "number" && l >= 0) {
+        const n = (o = j.value) == null ? void 0 : o.querySelectorAll(".m-select-list-item");
+        (a = n == null ? void 0 : n[l]) == null || a.scrollIntoView({
+          behavior: "auto",
+          block: "nearest",
+          inline: "start"
+        });
+      }
+    }
+    function H(e) {
+      var o;
+      const l = (o = c.value) == null ? void 0 : o.findIndex((a) => {
+        var n, s;
+        return t.multiple && Array.isArray(t.modelValue) ? e ? e[t.optionValueKey] === a[t.optionValueKey] : [...t.modelValue].reverse()[0] === a[t.optionValueKey] : ((s = (n = S.value) == null ? void 0 : n[0]) == null ? void 0 : s[t.optionValueKey]) === a[t.optionValueKey];
+      });
+      i.value = l && l >= 0 ? l : 0;
+    }
+    function R(e, l = !0) {
+      var s;
+      l && !t.multiple && D(() => V()), y.value = "";
+      const o = (s = S.value) == null ? void 0 : s.some(
+        (u) => u[t.optionValueKey] === e[t.optionValueKey]
+      );
+      let a = S.value;
+      o && t.multiple ? a = a == null ? void 0 : a.filter(
+        (u) => u[t.optionValueKey] !== e[t.optionValueKey]
+      ) : t.multiple ? a.push(e) : a = [e];
+      const n = a.map((u) => u[t.optionValueKey]);
+      f("update:model-value", t.multiple ? n : n[0]), f("selected-option", e), ve(), H(e), Z();
+    }
+    return (e, l) => Se((m(), g("div", {
+      ref_key: "mazSelectElement",
+      ref: Q,
+      class: E(["m-select m-reset-css", [
+        { "--is-open": d.value, "--disabled": e.disabled, "--block": e.block },
+        t.class,
+        `--${e.size}`
+      ]]),
+      style: P([e.style, { "--keyboard-selected-bg-color": pe.value, "--selected-bg-color": de.value, "--selected-text-color": ce.value }])
+    }, [
+      L(le, we({
+        id: z(me),
+        ref_key: "mazInputComponent",
+        ref: $,
+        class: "m-select-input"
+      }, e.$attrs, {
+        required: e.required,
+        "border-active": v.value,
+        color: e.color,
+        "model-value": fe.value,
+        size: e.size,
+        block: "",
+        autocomplete: e.autocomplete,
+        disabled: e.disabled,
+        onFocus: I(k, ["prevent", "stop"]),
+        onBlur: I(V, ["prevent", "stop"]),
+        onClick: I(k, ["prevent", "stop"]),
+        onChange: l[0] || (l[0] = (o) => f("change", o)),
+        onInput: l[1] || (l[1] = (o) => f("input", o)),
+        onKeydown: ge
+      }), {
+        "right-icon": X(() => [
+          C("button", {
+            tabindex: "-1",
+            type: "button",
+            class: "m-select-input__toggle-button maz-custom",
+            "aria-label": `${d.value ? "collapse" : "expand"} list of options`,
+            onClick: I(he, ["stop"])
+          }, [
+            L(z(ue), { class: "m-select-chevron maz-text-xl" })
+          ], 8, Be)
+        ]),
+        _: 1
+      }, 16, ["id", "required", "border-active", "color", "model-value", "size", "autocomplete", "disabled"]),
+      L(Le, { name: ye.value }, {
+        default: X(() => [
+          d.value ? (m(), g("div", {
+            key: 0,
+            ref_key: "optionListElement",
+            ref: j,
+            class: E(["m-select-list", {
+              "--top": e.listPosition.includes("top"),
+              "--left": e.listPosition.includes("left"),
+              "--right": e.listPosition.includes("right"),
+              "--bottom": e.listPosition.includes("bottom")
+            }]),
+            style: P({
+              maxHeight: `${e.maxListHeight}px`,
+              maxWidth: `${e.maxListWidth}px`,
+              minHeight: `${e.minListHeight}px`,
+              minWidth: `${e.minListWidth}px`
+            })
+          }, [
+            e.search ? (m(), Y(le, {
+              key: 0,
+              ref_key: "searchInputComponent",
+              ref: q,
+              modelValue: y.value,
+              "onUpdate:modelValue": [
+                l[2] || (l[2] = (o) => y.value = o),
+                l[4] || (l[4] = (o) => i.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": z(se),
+              onKeydown: l[3] || (l[3] = (o) => J(o, !1))
+            }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : N("", !0),
+            !c.value || c.value.length <= 0 ? O(e.$slots, "no-results", { key: 1 }, () => [
+              C("span", He, [
+                L(z(re), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+              ])
+            ], !0) : (m(), g("div", De, [
+              (m(!0), g(_, null, Ce(c.value, (o, a) => (m(), g(_, { key: a }, [
+                o.label && o.isOptGroup ? O(e.$slots, "optgroup", {
+                  key: 0,
+                  label: o.label
+                }, () => [
+                  C("span", Ee, ee(o.label), 1)
+                ], !0) : (m(), g("button", {
+                  key: 1,
+                  tabindex: "-1",
+                  type: "button",
+                  class: E(["m-select-list-item maz-custom maz-flex-none", [
+                    {
+                      "--is-keyboard-selected": i.value === a,
+                      "--is-selected": M(o),
+                      "--is-none-value": h(o[e.optionValueKey])
+                    }
+                  ]]),
+                  style: P(e.itemHeight ? { height: `${e.itemHeight}px` } : void 0),
+                  onClick: I((n) => R(o), ["prevent", "stop"])
+                }, [
+                  e.multiple ? (m(), Y(z(ie), {
+                    key: 0,
+                    tabindex: "-1",
+                    "model-value": M(o),
+                    size: "sm",
+                    color: e.color
+                  }, null, 8, ["model-value", "color"])) : N("", !0),
+                  O(e.$slots, "default", {
+                    option: o,
+                    isSelected: M(o)
+                  }, () => [
+                    C("span", null, ee(o[e.optionLabelKey]), 1)
+                  ], !0)
+                ], 14, Pe))
+              ], 64))), 128))
+            ]))
+          ], 6)) : N("", !0)
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 6)), [
+      [z($e), {
+        exclude: e.excludeSelectors,
+        handler: V
+      }]
+    ]);
+  }
+}), Ge = /* @__PURE__ */ Te(Ne, [["__scopeId", "data-v-ec4fe90d"]]);
+export {
+  Ge as default
+};

package/dist/components/MazSlider.js

@@ -0,0 +1,230 @@
+import { defineComponent as te, ref as p, computed as f, watch as O, onMounted as ne, onBeforeUnmount as oe, nextTick as b, openBlock as g, createElementBlock as w, normalizeStyle as T, normalizeClass as F, createElementVNode as N, Fragment as K, renderList as j, toDisplayString as ae } from "vue";
+import { debounce as ue } from "../helpers/debounce.js";
+import { _ as le } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazSlider.D08gO9DD.css';function se(a) {
+  const i = document.documentElement, o = document.body, d = a.getBoundingClientRect();
+  return {
+    y: d.top + (window.pageYOffset || i.scrollTop) - (i.clientTop || o.clientTop || 0),
+    x: d.left + (window.pageXOffset || i.scrollLeft) - (i.clientLeft || o.clientLeft || 0)
+  };
+}
+function re(a, i, o = !1) {
+  const d = "targetTouches" in a ? a.targetTouches[0] : a, v = se(i), r = {
+    x: d.pageX - v.x,
+    y: d.pageY - v.y
+  };
+  return {
+    x: o ? i.offsetWidth - r.x : r.x,
+    y: o ? i.offsetHeight - r.y : r.y
+  };
+}
+function q(a, i, o, d) {
+  return d === "minus" ? i ? a >= i : !0 : o ? a <= o : !0;
+}
+function I(a, i, o) {
+  const d = a + 1, r = i < d ? d - i : i - d;
+  return 100 / o * r / 100;
+}
+const ie = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], ce = ["data-label", "onMousedownPassive", "onTouchstartPassive", "onFocusPassive", "onBlurPassive", "onTouchendPassive", "onKeydownPassive"], de = /* @__PURE__ */ te({
+  __name: "MazSlider",
+  props: {
+    /** Array of cursors values */
+    modelValue: {
+      type: [Number, Array],
+      required: !0,
+      validator: (a) => ["number"].includes(typeof a) || Array.isArray(a) || a === null
+    },
+    /** array of cursors label */
+    labels: { type: Array, default: void 0 },
+    /** min value of sliders */
+    min: { type: Number, default: 0 },
+    /** max value of sliders */
+    max: { type: Number, default: 100 },
+    /** height size of slider bar */
+    size: { type: String, default: void 0 },
+    /** remove div in different colors */
+    noDivider: { type: Boolean, default: !1 },
+    /** become a logarithmic slider (exponential) */
+    log: { type: Boolean, default: !1 },
+    /** main slider color */
+    color: {
+      type: String,
+      default: "primary"
+    },
+    /** disables cursor animation when active */
+    noCursorAnim: { type: Boolean, default: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(a, { emit: i }) {
+    const o = a, d = i, v = p(), r = p(), m = p(), c = p(), B = p([]), _ = p([]), y = f(() => typeof o.modelValue == "number" ? [o.modelValue] : o.modelValue ? o.modelValue : [0]), M = f(() => Math.log(o.min || 1)), X = f(() => Math.log(o.max)), C = f(() => {
+      const { min: e, max: t } = o;
+      return (X.value - M.value) / (t - e);
+    }), L = f(() => {
+      const { min: e, max: t } = o;
+      return t - e;
+    }), Y = f(() => ({
+      paddingTop: o.labels ? "2.5em" : "1em"
+    })), H = f(() => Array.isArray(o.modelValue));
+    O(
+      () => o.modelValue,
+      () => c.value = y.value,
+      { immediate: !0 }
+    ), O(
+      () => [y.value, o.min, o.max, o.log].join(","),
+      () => z(!0)
+    );
+    const k = ue(() => z(), 300);
+    ne(() => {
+      z(!0), window.addEventListener("resize", k);
+    }), oe(() => {
+      window.removeEventListener("resize", k);
+    });
+    async function z(e) {
+      e === !0 && U(), await Q(), await b();
+      for (const [t] of y.value.entries())
+        P(t);
+    }
+    function R(e, t) {
+      e.key === "ArrowLeft" ? c.value && q(c.value[t] - 1, c.value[t - 1], c.value[t + 1], "minus") && (c.value[t]--, x(c.value)) : e.key === "ArrowRight" && c.value && q(c.value[t] + 1, c.value[t - 1], c.value[t + 1], "plus") && (c.value[t]++, x(c.value));
+    }
+    function A(e) {
+      r.value = void 0, $(e);
+    }
+    function U() {
+      const { min: e, max: t } = o, s = y.value.map(
+        (n) => n < e ? e : n > t ? t : n
+      );
+      x(s), c.value = s;
+    }
+    function x(e) {
+      const t = H.value ? [...e] : e[0];
+      d("update:model-value", t);
+    }
+    function G(e) {
+      const { labels: t } = o;
+      return t ? t[e] : void 0;
+    }
+    function P(e) {
+      $(e), o.noDivider || J();
+    }
+    async function $(e) {
+      var s;
+      await b();
+      const t = document.querySelectorAll(".m-slider .m-slider__btn");
+      if (t) {
+        const n = t[e], u = (n == null ? void 0 : n.clientWidth) + 16, l = {
+          left: typeof ((s = m.value) == null ? void 0 : s[e]) == "number" ? `${m.value[e] - u / 2 || 1}px` : ""
+        };
+        B.value[e] = l;
+      }
+    }
+    function J() {
+      if (m.value) {
+        const e = [...m.value];
+        e.push(0);
+        const t = e.length, s = Math.round(t / 2);
+        _.value = e.map((n, u) => ({
+          left: u === 0 ? 0 : `${e[u - 1]}px`,
+          // ATTENTION: buttonPositions.value[i - 1]
+          right: u + 1 === t ? 0 : `calc( 100% - ${n}px )`,
+          backgroundColor: s === u + 1 ? void 0 : u < s ? `rgba(255, 255, 255, ${I(u, s, t)})` : `rgba(0, 0, 0, ${I(u, s, t)})`
+          // darken
+        }));
+      }
+    }
+    async function Q() {
+      var u, l;
+      await b();
+      const { min: e, max: t, log: s } = o, n = (u = v.value) == null ? void 0 : u.clientWidth;
+      typeof n == "number" ? m.value = (l = c.value) == null ? void 0 : l.map(
+        (h) => s ? n / t * (e + (Math.log(h) - M.value) / C.value) : n / L.value * (h - e)
+      ) : console.warn("[maz-ui][MazSlider] ref component not found");
+    }
+    async function W() {
+      var u, l, h;
+      await b();
+      const { max: e, min: t, log: s } = o, n = (u = v.value) == null ? void 0 : u.clientWidth;
+      if (typeof n == "number")
+        return s ? (l = m.value) == null ? void 0 : l.map((V) => {
+          const Z = V / (n / e), ee = Math.exp((Z - t) * C.value + M.value);
+          return Math.round(ee);
+        }) : (h = m.value) == null ? void 0 : h.map(
+          (V) => Math.round(V / (n / L.value)) + t
+        );
+      console.warn("[maz-ui][MazSlider] ref component not found");
+    }
+    function S(e, t) {
+      r.value === void 0 && (r.value = t, P(t));
+    }
+    async function D() {
+      if (r.value === void 0)
+        return;
+      const e = await W();
+      e && x(e), r.value = void 0;
+    }
+    async function E(e) {
+      var s;
+      if (await b(), r.value === void 0)
+        return;
+      const t = (s = v.value) == null ? void 0 : s.clientWidth;
+      if (m.value) {
+        const n = m.value[r.value - 1] || 0, u = m.value[r.value + 1] || t;
+        if (!v.value)
+          return console.error("[maz-ui](MazSlider/handleMousemove) MazSlider not available");
+        m.value[r.value] = (() => {
+          const l = re(e, v.value).x;
+          return l < n ? n : u && l > u ? u : l;
+        })(), c.value = await W(), P(r.value);
+      }
+    }
+    return (e, t) => (g(), w("div", {
+      style: T([Y.value, { fontSize: a.size }]),
+      class: F(["m-slider m-reset-css", [`m-slider--${a.color}`]]),
+      role: "button",
+      tabindex: "-1",
+      onMousemovePassive: E,
+      onMouseupPassive: D,
+      onMouseleavePassive: D,
+      onTouchmovePassive: E
+    }, [
+      N("div", {
+        ref_key: "MazSlider",
+        ref: v,
+        class: "m-slider__bar",
+        role: "slider",
+        "aria-valuenow": a.modelValue.toString(),
+        "aria-valuemin": a.min,
+        "aria-valuemax": a.max
+      }, [
+        (g(!0), w(K, null, j(_.value, (s, n) => (g(), w("div", {
+          key: `divider-${n}`,
+          style: T([s]),
+          class: "m-slider__divider"
+        }, null, 4))), 128)),
+        (g(!0), w(K, null, j(y.value, (s, n) => {
+          var u;
+          return g(), w("button", {
+            key: `cursor-${n}`,
+            type: "button",
+            "data-label": G(n),
+            class: F(["m-slider__btn", {
+              "active-cursor": n === r.value && !a.noCursorAnim
+            }]),
+            style: T([B.value[n]]),
+            onMousedownPassive: (l) => S(l, n),
+            onTouchstartPassive: (l) => S(l, n),
+            onFocusPassive: (l) => S(l, n),
+            onBlurPassive: (l) => A(n),
+            onTouchendPassive: (l) => A(n),
+            onKeydownPassive: (l) => R(l, n)
+          }, [
+            N("span", null, ae((u = c.value) == null ? void 0 : u[n]), 1)
+          ], 46, ce);
+        }), 128))
+      ], 8, ie)
+    ], 38));
+  }
+}), pe = /* @__PURE__ */ le(de, [["__scopeId", "data-v-0ba9f676"]]);
+export {
+  pe as default
+};