maz-ui 3.22.3 → 3.23.0

package/components/MazSlider.mjs

@@ -1,57 +1,39 @@
 import "./assets/MazSlider.css";
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, normalizeStyle, normalizeClass, renderList, toDisplayString } from "vue";
-function debounce(fn, delay) {
-  let timeout;
-  return function(...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      fn.apply(this, args);
-    }, delay);
+import { defineComponent as te, ref as y, computed as f, watch as F, onMounted as ne, onBeforeUnmount as oe, nextTick as g, openBlock as b, createElementBlock as w, Fragment as V, createCommentVNode as ae, createElementVNode as T, normalizeStyle as B, normalizeClass as j, renderList as K, toDisplayString as se } from "vue";
+function le(a, l) {
+  let n;
+  return function(...c) {
+    clearTimeout(n), n = setTimeout(() => {
+      a.apply(this, c);
+    }, l);
   };
 }
-const getOffset = (elem) => {
-  const doc = document.documentElement;
-  const body = document.body;
-  const rect = elem.getBoundingClientRect();
-  const offset = {
-    y: rect.top + (window.pageYOffset || doc.scrollTop) - (doc.clientTop || body.clientTop || 0),
-    x: rect.left + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || body.clientLeft || 0)
+const ue = (a) => {
+  const l = document.documentElement, n = document.body, c = a.getBoundingClientRect();
+  return {
+    y: c.top + (window.pageYOffset || l.scrollTop) - (l.clientTop || n.clientTop || 0),
+    x: c.left + (window.pageXOffset || l.scrollLeft) - (l.clientLeft || n.clientLeft || 0)
   };
-  return offset;
-};
-const getPos = (e, elem, isReverse = false) => {
-  const event = "targetTouches" in e ? e.targetTouches[0] : e;
-  const offset = getOffset(elem);
-  const posObj = {
-    x: event.pageX - offset.x,
-    y: event.pageY - offset.y
+}, re = (a, l, n = !1) => {
+  const c = "targetTouches" in a ? a.targetTouches[0] : a, v = ue(l), i = {
+    x: c.pageX - v.x,
+    y: c.pageY - v.y
   };
   return {
-    x: isReverse ? elem.offsetWidth - posObj.x : posObj.x,
-    y: isReverse ? elem.offsetHeight - posObj.y : posObj.y
+    x: n ? l.offsetWidth - i.x : i.x,
+    y: n ? l.offsetHeight - i.y : i.y
   };
-};
-const isBetween = (value, prev, next, direction) => {
-  return direction === "minus" ? prev ? value >= prev : true : next ? value <= next : true;
-};
-const getOpacityCoeff = (index, middle, length) => {
-  const currentIndex = index + 1;
-  const isBiggerThanMiddle = middle < currentIndex;
-  const deviation = isBiggerThanMiddle ? currentIndex - middle : middle - currentIndex;
-  return 100 / length * deviation / 100;
-};
-const _hoisted_1 = ["aria-valuenow", "aria-valuemin", "aria-valuemax"];
-const _hoisted_2 = ["data-label", "onMousedownPassive", "onTouchstartPassive", "onFocusPassive", "onBlurPassive", "onTouchendPassive", "onKeydownPassive"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, q = (a, l, n, c) => c === "minus" ? l ? a >= l : !0 : n ? a <= n : !0, I = (a, l, n) => {
+  const c = a + 1, i = l < c ? c - l : l - c;
+  return 100 / n * i / 100;
+}, 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: true,
-      validator: (value) => {
-        return ["number"].includes(typeof value) || Array.isArray(value) || value === null;
-      }
+      required: !0,
+      validator: (a) => ["number"].includes(typeof a) || Array.isArray(a) || a === null
     },
     // array of cursors label
     labels: { type: Array, default: void 0 },
@@ -62,319 +44,225 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     // height size of slider bar
     size: { type: String, default: void 0 },
     // remove div in different colors
-    noDivider: { type: Boolean, default: false },
+    noDivider: { type: Boolean, default: !1 },
     // become a logarithmic slider (exponential)
-    log: { type: Boolean, default: false },
+    log: { type: Boolean, default: !1 },
     // main slider color
     color: {
       type: String,
       default: "primary"
     },
     // disables cursor animation when active
-    noCursorAnim: { type: Boolean, default: false }
+    noCursorAnim: { type: Boolean, default: !1 }
   },
   emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const MazSlider2 = ref();
-    const activeCursor = ref();
-    const buttonPositions = ref();
-    const tmpValues = ref();
-    const buttonStyles = ref([]);
-    const dividers = ref([]);
-    const computedValue = computed(() => {
-      if (typeof props.modelValue === "number") {
-        return [props.modelValue];
-      } else if (props.modelValue) {
-        return props.modelValue;
-      } else {
-        return [0];
-      }
-    });
-    const minLog = computed(() => {
-      return Math.log(props.min || 1);
-    });
-    const maxLog = computed(() => {
-      return Math.log(props.max);
-    });
-    const scale = computed(() => {
-      const { min, max } = props;
-      return (maxLog.value - minLog.value) / (max - min);
-    });
-    const range = computed(() => {
-      const { min, max } = props;
-      return max - min;
-    });
-    const wrapperStyle = computed(() => {
-      return {
-        paddingTop: props.labels ? `2.5em` : `1em`
-      };
-    });
-    const hasMultipleValues = computed(() => Array.isArray(props.modelValue));
-    watch(
-      () => props.modelValue,
-      () => tmpValues.value = computedValue.value,
-      { immediate: true }
+  setup(a, { emit: l }) {
+    const n = a, c = l, v = y(), i = y(), m = y(), d = y(), C = y([]), k = y([]), p = f(() => typeof n.modelValue == "number" ? [n.modelValue] : n.modelValue ? n.modelValue : [0]), M = f(() => Math.log(n.min || 1)), X = f(() => Math.log(n.max)), L = f(() => {
+      const { min: e, max: t } = n;
+      return (X.value - M.value) / (t - e);
+    }), A = f(() => {
+      const { min: e, max: t } = n;
+      return t - e;
+    }), Y = f(() => ({
+      paddingTop: n.labels ? "2.5em" : "1em"
+    })), H = f(() => Array.isArray(n.modelValue));
+    F(
+      () => n.modelValue,
+      () => d.value = p.value,
+      { immediate: !0 }
+    ), F(
+      () => [p.value, n.min, n.max, n.log].join(","),
+      () => _(!0)
     );
-    watch(
-      () => [computedValue.value, props.min, props.max, props.log].join(","),
-      () => buildComponent(true)
-    );
-    const resizeListenerFunction = debounce(() => buildComponent(), 300);
-    onMounted(() => {
-      buildComponent(true);
-      window.addEventListener("resize", resizeListenerFunction);
-    });
-    onBeforeUnmount(() => {
-      window.removeEventListener("resize", resizeListenerFunction);
+    const $ = le(() => _(), 300);
+    ne(() => {
+      _(!0), window.addEventListener("resize", $);
+    }), oe(() => {
+      window.removeEventListener("resize", $);
     });
-    const buildComponent = async (emitValue2) => {
-      if (emitValue2 === true)
-        checkValues();
-      await calcPos();
-      await nextTick();
-      for (const [index, _value] of computedValue.value.entries()) {
-        setBtnDividers(index);
-      }
-    };
-    const cursorKeyDown = (event, i) => {
-      if (event.key === "ArrowLeft") {
-        if (tmpValues.value && isBetween(tmpValues.value[i] - 1, tmpValues.value[i - 1], tmpValues.value[i + 1], "minus")) {
-          tmpValues.value[i]--;
-          emitValue(tmpValues.value);
-        }
-      } else if (event.key === "ArrowRight" && tmpValues.value && isBetween(tmpValues.value[i] + 1, tmpValues.value[i - 1], tmpValues.value[i + 1], "plus")) {
-        tmpValues.value[i]++;
-        emitValue(tmpValues.value);
-      }
-    };
-    const blurCursor = (i) => {
-      activeCursor.value = void 0;
-      setBtnStyle(i);
-    };
-    const checkValues = () => {
-      const { min, max } = props;
-      const valuesChecked = computedValue.value.map(
-        (v) => v < min ? min : v > max ? max : v
+    const _ = async (e) => {
+      e === !0 && U(), await Q(), await g();
+      for (const [t, u] of p.value.entries())
+        z(t);
+    }, R = (e, t) => {
+      e.key === "ArrowLeft" ? d.value && q(d.value[t] - 1, d.value[t - 1], d.value[t + 1], "minus") && (d.value[t]--, x(d.value)) : e.key === "ArrowRight" && d.value && q(d.value[t] + 1, d.value[t - 1], d.value[t + 1], "plus") && (d.value[t]++, x(d.value));
+    }, W = (e) => {
+      i.value = void 0, D(e);
+    }, U = () => {
+      const { min: e, max: t } = n, u = p.value.map(
+        (o) => o < e ? e : o > t ? t : o
       );
-      emitValue(valuesChecked);
-      tmpValues.value = valuesChecked;
-    };
-    const emitValue = (values) => {
-      const valueToEmit = hasMultipleValues.value ? [...values] : values[0];
-      emits("update:model-value", valueToEmit);
-    };
-    const getLabel = (i) => {
-      const { labels } = props;
-      return labels ? labels[i] : void 0;
-    };
-    const setBtnDividers = (i) => {
-      setBtnStyle(i);
-      if (!props.noDivider)
-        setDividers();
-    };
-    const setBtnStyle = async (i) => {
-      var _a;
-      await nextTick();
-      const currentCursor = document.querySelectorAll(".m-slider .m-slider__btn");
-      if (currentCursor) {
-        const cursor = currentCursor[i];
-        const width = (cursor == null ? void 0 : cursor.clientWidth) + 16;
-        const btnStyle = {
-          left: typeof ((_a = buttonPositions.value) == null ? void 0 : _a[i]) === "number" ? `${buttonPositions.value[i] - width / 2}px` : ""
+      x(u), d.value = u;
+    }, x = (e) => {
+      const t = H.value ? [...e] : e[0];
+      c("update:model-value", t);
+    }, G = (e) => {
+      const { labels: t } = n;
+      return t ? t[e] : void 0;
+    }, z = (e) => {
+      D(e), n.noDivider || J();
+    }, D = async (e) => {
+      var u;
+      await g();
+      const t = document.querySelectorAll(".m-slider .m-slider__btn");
+      if (t) {
+        const o = t[e], s = (o == null ? void 0 : o.clientWidth) + 16, r = {
+          left: typeof ((u = m.value) == null ? void 0 : u[e]) == "number" ? `${m.value[e] - s / 2}px` : ""
         };
-        buttonStyles.value[i] = btnStyle;
+        C.value[e] = r;
       }
-    };
-    const setDividers = () => {
-      if (buttonPositions.value) {
-        const base = [...buttonPositions.value];
-        base.push(0);
-        const baseLength = base.length;
-        const middle = Math.round(baseLength / 2);
-        dividers.value = base.map((pos, i) => ({
-          left: `${i === 0 ? 0 : base[i - 1]}px`,
+    }, J = () => {
+      if (m.value) {
+        const e = [...m.value];
+        e.push(0);
+        const t = e.length, u = Math.round(t / 2);
+        k.value = e.map((o, s) => ({
+          left: `${s === 0 ? 0 : e[s - 1]}px`,
           // ATTENTION: buttonPositions.value[i - 1]
-          right: `${i + 1 === baseLength ? 0 : "calc( 100% - " + pos + "px )"}`,
-          backgroundColor: middle === i + 1 ? void 0 : i < middle ? (
+          right: `${s + 1 === t ? 0 : "calc( 100% - " + o + "px )"}`,
+          backgroundColor: u === s + 1 ? void 0 : s < u ? (
             // ligthen
-            `rgba(255, 255, 255, ${getOpacityCoeff(i, middle, baseLength)})`
+            `rgba(255, 255, 255, ${I(s, u, t)})`
           ) : (
             // darken
-            `rgba(0, 0, 0, ${getOpacityCoeff(i, middle, baseLength)})`
+            `rgba(0, 0, 0, ${I(s, u, t)})`
           )
         }));
       }
-    };
-    const calcPos = async () => {
-      var _a, _b;
-      await nextTick();
-      const { min, max, log } = props;
-      const barWidth = (_a = MazSlider2.value) == null ? void 0 : _a.clientWidth;
-      if (barWidth) {
-        buttonPositions.value = (_b = tmpValues.value) == null ? void 0 : _b.map(
-          (v) => log ? barWidth / max * (min + (Math.log(v) - minLog.value) / scale.value) : barWidth / range.value * (v - min)
+    }, Q = async () => {
+      var s, r;
+      await g();
+      const { min: e, max: t, log: u } = n, o = (s = v.value) == null ? void 0 : s.clientWidth;
+      o ? m.value = (r = d.value) == null ? void 0 : r.map(
+        (h) => u ? o / t * (e + (Math.log(h) - M.value) / L.value) : o / A.value * (h - e)
+      ) : console.warn("[maz-ui][MazSlider] ref component not found");
+    }, E = async () => {
+      var s, r, h;
+      await g();
+      const { max: e, min: t, log: u } = n, o = (s = v.value) == null ? void 0 : s.clientWidth;
+      if (o)
+        return u ? (r = m.value) == null ? void 0 : r.map((P) => {
+          const Z = P / (o / e), ee = Math.exp((Z - t) * L.value + M.value);
+          return Math.round(ee);
+        }) : (h = m.value) == null ? void 0 : h.map(
+          (P) => Math.round(P / (o / A.value)) + t
         );
-      } else {
-        console.warn("[maz-ui][MazSlider] ref component not found");
-      }
-    };
-    const getCursorsValues = async () => {
-      var _a, _b, _c;
-      await nextTick();
-      const { max, min, log } = props;
-      const barWidth = (_a = MazSlider2.value) == null ? void 0 : _a.clientWidth;
-      if (barWidth) {
-        return log ? (_b = buttonPositions.value) == null ? void 0 : _b.map((pos) => {
-          const position = pos / (barWidth / max);
-          const value = Math.exp((position - min) * scale.value + minLog.value);
-          return Math.round(value);
-        }) : (_c = buttonPositions.value) == null ? void 0 : _c.map(
-          (pos) => Math.round(pos / (barWidth / range.value)) + min
-        );
-      } else {
-        console.warn("[maz-ui][MazSlider] ref component not found");
-      }
-    };
-    const handleMousedown = (_event, i) => {
-      if (activeCursor.value !== void 0)
+      console.warn("[maz-ui][MazSlider] ref component not found");
+    }, S = (e, t) => {
+      i.value === void 0 && (i.value = t, z(t));
+    }, O = async () => {
+      if (i.value === void 0)
         return;
-      activeCursor.value = i;
-      setBtnDividers(i);
-    };
-    const handleMouseup = async () => {
-      if (activeCursor.value === void 0)
+      const e = await E();
+      e && x(e), i.value = void 0;
+    }, N = async (e) => {
+      var u;
+      if (await g(), i.value === void 0)
         return;
-      const values = await getCursorsValues();
-      if (values)
-        emitValue(values);
-      activeCursor.value = void 0;
-    };
-    const handleMousemove = async (event) => {
-      var _a;
-      await nextTick();
-      if (activeCursor.value === void 0)
-        return;
-      const barWidth = (_a = MazSlider2.value) == null ? void 0 : _a.clientWidth;
-      if (buttonPositions.value) {
-        const prevValue = buttonPositions.value[activeCursor.value - 1] || 0;
-        const nextValue = buttonPositions.value[activeCursor.value + 1] || barWidth;
-        if (!MazSlider2.value)
+      const t = (u = v.value) == null ? void 0 : u.clientWidth;
+      if (m.value) {
+        const o = m.value[i.value - 1] || 0, s = m.value[i.value + 1] || t;
+        if (!v.value)
           return console.error("[maz-ui](MazSlider/handleMousemove) MazSlider not available");
-        buttonPositions.value[activeCursor.value] = (() => {
-          const movement = getPos(event, MazSlider2.value).x;
-          if (movement < prevValue) {
-            return prevValue;
-          } else if (nextValue && movement > nextValue) {
-            return nextValue;
-          }
-          return movement;
-        })();
-        tmpValues.value = await getCursorsValues();
-        setBtnDividers(activeCursor.value);
+        m.value[i.value] = (() => {
+          const r = re(e, v.value).x;
+          return r < o ? o : s && r > s ? s : r;
+        })(), d.value = await E(), z(i.value);
       }
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        Fragment,
-        null,
-        [
-          createCommentVNode(" eslint-disable vuejs-accessibility/mouse-events-have-key-events "),
-          createElementVNode(
-            "div",
-            {
-              style: normalizeStyle([wrapperStyle.value, { fontSize: __props.size }]),
-              class: normalizeClass(["m-slider", [`m-slider--${__props.color}`]]),
-              role: "button",
-              tabindex: "-1",
-              onMousemovePassive: handleMousemove,
-              onMouseupPassive: handleMouseup,
-              onMouseleavePassive: handleMouseup,
-              onTouchmovePassive: handleMousemove
-            },
-            [
-              createElementVNode("div", {
-                ref_key: "MazSlider",
-                ref: MazSlider2,
-                class: "m-slider__bar",
-                role: "slider",
-                "aria-valuenow": __props.modelValue.toString(),
-                "aria-valuemin": __props.min,
-                "aria-valuemax": __props.max
-              }, [
-                (openBlock(true), createElementBlock(
-                  Fragment,
+    return (e, t) => (b(), w(
+      V,
+      null,
+      [
+        ae(" eslint-disable vuejs-accessibility/mouse-events-have-key-events "),
+        T(
+          "div",
+          {
+            style: B([Y.value, { fontSize: a.size }]),
+            class: j(["m-slider", [`m-slider--${a.color}`]]),
+            role: "button",
+            tabindex: "-1",
+            onMousemovePassive: N,
+            onMouseupPassive: O,
+            onMouseleavePassive: O,
+            onTouchmovePassive: N
+          },
+          [
+            T("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
+            }, [
+              (b(!0), w(
+                V,
+                null,
+                K(k.value, (u, o) => (b(), w(
+                  "div",
+                  {
+                    key: `divider-${o}`,
+                    style: B([u]),
+                    class: "m-slider__divider"
+                  },
                   null,
-                  renderList(dividers.value, (div, i) => {
-                    return openBlock(), createElementBlock(
-                      "div",
-                      {
-                        key: `divider-${i}`,
-                        style: normalizeStyle([div]),
-                        class: "m-slider__divider"
-                      },
+                  4
+                  /* STYLE */
+                ))),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              (b(!0), w(
+                V,
+                null,
+                K(p.value, (u, o) => {
+                  var s;
+                  return b(), w("button", {
+                    key: `cursor-${o}`,
+                    type: "button",
+                    "data-label": G(o),
+                    class: j(["m-slider__btn", {
+                      "active-cursor": o === i.value && !a.noCursorAnim
+                    }]),
+                    style: B([C.value[o]]),
+                    onMousedownPassive: (r) => S(r, o),
+                    onTouchstartPassive: (r) => S(r, o),
+                    onFocusPassive: (r) => S(r, o),
+                    onBlurPassive: (r) => W(o),
+                    onTouchendPassive: (r) => W(o),
+                    onKeydownPassive: (r) => R(r, o)
+                  }, [
+                    T(
+                      "span",
                       null,
-                      4
-                      /* STYLE */
-                    );
-                  }),
-                  128
-                  /* KEYED_FRAGMENT */
-                )),
-                (openBlock(true), createElementBlock(
-                  Fragment,
-                  null,
-                  renderList(computedValue.value, (_btn, i) => {
-                    var _a;
-                    return openBlock(), createElementBlock("button", {
-                      key: `cursor-${i}`,
-                      type: "button",
-                      "data-label": getLabel(i),
-                      class: normalizeClass(["m-slider__btn", {
-                        "active-cursor": i === activeCursor.value && !__props.noCursorAnim
-                      }]),
-                      style: normalizeStyle([buttonStyles.value[i]]),
-                      onMousedownPassive: ($event) => handleMousedown($event, i),
-                      onTouchstartPassive: ($event) => handleMousedown($event, i),
-                      onFocusPassive: ($event) => handleMousedown($event, i),
-                      onBlurPassive: ($event) => blurCursor(i),
-                      onTouchendPassive: ($event) => blurCursor(i),
-                      onKeydownPassive: ($event) => cursorKeyDown($event, i)
-                    }, [
-                      createElementVNode(
-                        "span",
-                        null,
-                        toDisplayString((_a = tmpValues.value) == null ? void 0 : _a[i]),
-                        1
-                        /* TEXT */
-                      )
-                    ], 46, _hoisted_2);
-                  }),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
-              ], 8, _hoisted_1)
-            ],
-            38
-            /* CLASS, STYLE, HYDRATE_EVENTS */
-          )
-        ],
-        2112
-        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-      );
-    };
+                      se((s = d.value) == null ? void 0 : s[o]),
+                      1
+                      /* TEXT */
+                    )
+                  ], 46, ce);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ], 8, ie)
+          ],
+          38
+          /* CLASS, STYLE, HYDRATE_EVENTS */
+        )
+      ],
+      2112
+      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+    ));
   }
 });
-const MazSlider_vue_vue_type_style_index_0_scoped_22612f85_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const MazSlider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22612f85"]]);
+const ve = (a, l) => {
+  const n = a.__vccOpts || a;
+  for (const [c, v] of l)
+    n[c] = v;
+  return n;
+}, ye = /* @__PURE__ */ ve(de, [["__scopeId", "data-v-22612f85"]]);
 export {
-  MazSlider as default
+  ye as default
 };