bitboss-ui 2.0.37 → 2.0.39

package/dist/index39.js

@@ -1,127 +1,308 @@
-import { defineComponent as I, ref as p, computed as n, watch as S, openBlock as h, createElementBlock as f, normalizeProps as r, guardReactiveProps as c, mergeProps as y, createCommentVNode as q, createElementVNode as l, renderSlot as A } from "vue";
-import { isCssColor as d } from "./index216.js";
-import { when as F } from "./index217.js";
-const N = { class: "bb-base-switch-container" }, x = /* @__PURE__ */ l("span", { class: "bb-base-switch-container__icon-thumb" }, null, -1), J = [
-  x
-], L = /* @__PURE__ */ I({
-  __name: "BaseSwitch",
+import { defineComponent as U, ref as d, computed as h, onMounted as W, watch as Z, openBlock as g, createElementBlock as w, mergeProps as T, renderSlot as f, createElementVNode as c, Fragment as ee, renderList as ae, createCommentVNode as H, normalizeProps as re, guardReactiveProps as te, unref as b, normalizeClass as F, normalizeStyle as I } from "vue";
+import { clamp as le } from "./index204.js";
+import { head as O } from "./index240.js";
+import { isCssColor as Y } from "./index212.js";
+import { isNil as P } from "./index129.js";
+import { isNotNil as ne } from "./index134.js";
+import { transposeValue as y } from "./index130.js";
+import { hash as J } from "./index231.js";
+const oe = { class: "bb-base-slider__slider-container" }, ie = {
+  key: 0,
+  class: "bb-base-slider__ticks-container"
+}, se = ["id", "disabled", "name", "readonly", "required", "value"], ue = ["aria-describedby", "aria-readonly", "aria-valuemax", "aria-valuemin", "aria-valuenow", "tabindex"], de = ["aria-describedby", "aria-readonly", "aria-valuemax", "aria-valuemin", "aria-valuenow", "tabindex"], we = /* @__PURE__ */ U({
+  __name: "BaseSlider",
   props: {
     ariaDescribedby: {},
     autofocus: {},
-    checked: { type: [Boolean, String] },
     color: {},
     disabled: { type: Boolean },
-    falseValue: { default: !1 },
     hasErrors: { type: Boolean },
     id: {},
-    indeterminate: {},
+    max: { default: 100 },
+    min: { default: 0 },
+    modelValue: { default: 0 },
     name: {},
+    range: { type: Boolean },
     readonly: {},
     required: { type: Boolean },
-    submitWhenFalse: { type: Boolean },
-    trueValue: { default: !0 },
-    modelValue: {}
+    step: { default: 1 },
+    ticks: { type: Boolean },
+    thumbTranslate: { type: Boolean, default: !0 }
   },
-  emits: ["blur", "change", "click", "focus", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
-  setup(V, { emit: v }) {
-    const e = V, a = v, u = p(null), s = n(() => e.checked ? !0 : JSON.stringify(e.trueValue) === JSON.stringify(e.modelValue)), i = p(!1), k = n(() => {
-      const o = {
-        class: {
-          "bb-base-switch": !0,
-          "bb-base-switch--disabled": e.disabled,
-          "bb-base-switch--errors": e.hasErrors,
-          "bb-base-switch--indeterminate": e.indeterminate,
-          "bb-base-switch--readonly": e.readonly,
-          [`bb-base-switch--${e.color}`]: e.color && !d(e.color)
-        }
-      };
-      return e.color && d(e.color) && (o.style = `--color: ${e.color}`), o;
-    }), b = F(
-      (o) => typeof o != "string",
-      JSON.stringify
-    ), w = n(() => {
-      const o = b(e.falseValue);
-      return {
-        disabled: e.disabled,
-        name: e.name,
-        type: "hidden",
-        value: o
-      };
-    }), m = n(() => {
-      const o = b(e.trueValue), C = {
-        onBlur: (t) => {
-          i.value = !1, a("blur", t);
-        },
-        onChange: (t) => {
-          if (t.target instanceof HTMLInputElement) {
-            let E = t.target.checked ? e.trueValue : e.falseValue;
-            a("change", t), a("update:modelValue", E);
-          }
-        },
-        onClick: (t) => a("click", t),
-        onFocus: (t) => {
-          i.value = !0, a("focus", t);
-        },
-        onInput: (t) => a("input", t),
-        onKeydown: (t) => a("keydown", t),
-        onMousedown: (t) => a("mousedown", t),
-        onMouseup: (t) => a("mouseup", t)
+  emits: ["click", "focus", "active", "inactive", "keydown", "pointerdown", "pointermove", "pointerup", "update:modelValue"],
+  setup(K, { emit: j }) {
+    const a = K, u = j, C = d(), B = d(), _ = d(), v = d(), n = d(0), o = d(0), E = h(() => Array.isArray(a.modelValue) ? O(a.modelValue) ?? void 0 : P(a.modelValue) ? void 0 : Number(a.modelValue)), $ = h(() => Array.isArray(a.modelValue) ? O(a.modelValue) ?? void 0 : P(a.modelValue) ? void 0 : Number(a.modelValue)), L = h(() => [n.value, o.value].sort(
+      (e, r) => e - r
+    )), p = y({
+      value: a.min + a.step,
+      originalBounds: { min: a.min, max: a.max },
+      targetBounds: { min: 0, max: 100 },
+      step: 1
+    }), A = d(!1);
+    if (a.range && !Array.isArray(a.modelValue))
+      throw new TypeError(
+        "BaseSlider mode is set as range but modelValue is not an array"
+      );
+    W(() => {
+      var e;
+      a.autofocus && ((e = v.value) == null || e.focus());
+    }), Z(
+      () => a.modelValue,
+      (e) => {
+        let r;
+        if (a.range) {
+          const [s = a.min, m = a.min] = e;
+          r = [s, m];
+        } else
+          r = [a.min, ne(e) ? Number(e) : a.min];
+        const [l, i] = r.map((s) => {
+          let m = P(s) ? a.min : Number(s);
+          return y({
+            value: m,
+            targetBounds: { min: 0, max: 100 },
+            originalBounds: { min: a.min, max: a.max },
+            step: 1
+          });
+        });
+        n.value = l, o.value = i;
+      },
+      { immediate: !0 }
+    );
+    let N = d(!1), t = d(null);
+    const S = (e) => {
+      if (v.value && v.value.contains(e.target))
+        return "higher";
+      if (_.value && _.value.contains(e.target))
+        return "lower";
+      throw new Error("Could not identify target thumb");
+    }, G = (e) => {
+      a.disabled || a.readonly || (t.value || (t.value = S(e)), N.value = !0, document.addEventListener("pointermove", x), document.addEventListener("pointerup", z), u("pointerdown", e));
+    };
+    let M = h(() => N.value ? {} : { onPointerdown: G });
+    const x = (e) => {
+      if (!(a.disabled || a.readonly) && B.value) {
+        const r = B.value.getBoundingClientRect(), l = e.clientX, i = r.left, s = r.width;
+        e instanceof PointerEvent ? u("pointermove", e) : u("click", e);
+        const m = y({
+          value: le(l, i, i + s),
+          originalBounds: { min: i, max: i + s },
+          targetBounds: { min: 0, max: 100 },
+          step: p
+        });
+        t.value === "higher" ? o.value = m : t.value === "lower" && (n.value = m);
+      }
+    }, k = () => {
+      const [e, r] = [n.value, o.value].sort(
+        (i, s) => i - s
+      ), l = [e, r].map(
+        (i) => y({
+          value: i,
+          originalBounds: { min: 0, max: 100 },
+          targetBounds: { min: a.min, max: a.max },
+          step: a.step
+        })
+      );
+      return a.range ? l : l[1];
+    }, z = (e) => {
+      N.value = !1, t.value = null, document.removeEventListener("pointermove", x), document.removeEventListener("pointerup", z), u("pointerup", e), u("update:modelValue", k());
+    }, X = (e) => {
+      u("keydown", e), !(a.disabled || a.readonly || e.key !== "ArrowLeft" && e.key !== "ArrowRight") && (e.key === "ArrowLeft" ? t.value === "higher" || document.activeElement === v.value ? o.value = Math.max(
+        o.value - p,
+        n.value
+      ) : t.value === "lower" && (n.value = Math.max(
+        n.value - p,
+        0
+      )) : e.key === "ArrowRight" && (t.value === "higher" || document.activeElement === v.value ? o.value = Math.min(
+        o.value + p,
+        100
+      ) : t.value === "lower" && (n.value = Math.min(
+        n.value + p,
+        o.value
+      ))), u("update:modelValue", k()));
+    }, q = (e) => {
+      u("focus", e);
+      const r = S(e);
+      r && (t.value = r), A.value || (A.value = !0, u("active"), document.addEventListener("focusin", V), document.addEventListener("click", V));
+    }, V = (e) => {
+      var r;
+      e.target instanceof HTMLElement && ((r = C.value) != null && r.contains(e.target) || (A.value = !1, t.value = null, u("inactive"), document.removeEventListener("focusin", V), document.removeEventListener("click", V)));
+    }, D = {
+      class: {
+        "bb-base-slider": !0,
+        "bb-base-slider--disabled": a.disabled,
+        "bb-base-slider--errors": a.hasErrors,
+        "bb-base-slider--readonly": a.readonly,
+        [`bb-base-slider--${a.color}`]: a.color && !Y(a.color)
+      },
+      onClick: (e) => {
+        var l;
+        if (a.range) return;
+        (l = v.value) == null || l.focus(), x(e);
+        const r = k();
+        J(r) !== J(a.modelValue) && u("update:modelValue", k());
+      },
+      style: {}
+    };
+    a.color && Y(a.color) && (D.style["--color"] = a.color);
+    const Q = h(() => {
+      const e = "bb-base-slider__track-background", r = {
+        width: `${L.value[1] - L.value[0]}%`,
+        left: `${L.value[0]}%`
       };
       return {
-        "aria-describedby": e.ariaDescribedby,
-        autofocus: e.autofocus,
-        checked: s.value,
-        // There is no such thing as readonly checkbox so we disable and style it with css
-        disabled: e.disabled || e.readonly,
-        id: e.id,
-        indeterminate: e.indeterminate,
-        name: e.name,
-        required: e.required,
-        tabindex: e.disabled ? -1 : void 0,
-        type: "checkbox",
-        value: o,
-        class: "sr-only",
-        ...C
+        class: e,
+        style: r
       };
-    }), _ = n(() => ({
-      checked: s.value,
-      disabled: e.disabled,
-      falseValue: e.falseValue,
-      focused: i.value,
-      hasErrors: e.hasErrors,
-      id: e.id,
-      name: e.name,
-      parsedValue: m.value.value,
-      readonly: e.readonly,
-      required: e.required,
-      trueValue: e.trueValue,
-      value: s.value ? e.trueValue : e.falseValue
-    })), g = n(() => {
-      let o = {};
-      return e.color && d(e.color) && (o.color = e.color), {
-        class: "bb-base-switch-container__icon",
-        style: o
-      };
-    });
-    return S(
-      () => [e.modelValue, e.checked, e.indeterminate],
-      () => {
-        u.value && (u.value.indeterminate = !!e.indeterminate);
+    }), R = h(() => {
+      if (!a.ticks) return [];
+      let e = [], r = a.min;
+      for (; r <= a.max; ) {
+        let l = r, i = y({
+          value: l,
+          originalBounds: { min: a.min, max: a.max },
+          targetBounds: { min: 0, max: 100 },
+          step: p
+        }), s = y({
+          value: r,
+          originalBounds: { min: a.min, max: a.max },
+          targetBounds: { min: 0, max: 100 },
+          step: a.step
+        });
+        const m = s >= n.value && s <= o.value;
+        e.push({
+          value: l,
+          percent: i,
+          active: m
+        }), r += a.step;
       }
-    ), (o, B) => (h(), f("span", r(c(k.value)), [
-      !s.value && o.submitWhenFalse ? (h(), f("input", r(y({ key: 0 }, w.value)), null, 16)) : q("", !0),
-      l("input", y(m.value, {
-        ref_key: "checkboxInput",
-        ref: u
-      }), null, 16),
-      l("span", N, [
-        A(o.$slots, "icon", r(c(_.value)), () => [
-          l("span", r(c(g.value)), J, 16)
-        ])
-      ])
+      return e;
+    });
+    return (e, r) => (g(), w("span", T(D, {
+      ref_key: "container",
+      ref: C
+    }), [
+      f(e.$slots, "prepend"),
+      c("span", oe, [
+        R.value.length ? (g(), w("span", ie, [
+          (g(!0), w(ee, null, ae(R.value, (l) => (g(), w("span", {
+            key: l.value,
+            class: "bb-base-slider__tick"
+          }, [
+            f(e.$slots, "tick", {
+              active: l.active,
+              percent: l.percent,
+              value: l.value
+            })
+          ]))), 128))
+        ])) : H("", !0),
+        c("input", {
+          id: e.id,
+          class: "sr-only",
+          disabled: e.disabled,
+          name: e.name,
+          readonly: e.readonly,
+          required: e.required,
+          tabindex: -1,
+          type: "number",
+          value: JSON.stringify(e.modelValue)
+        }, null, 8, se),
+        c("span", {
+          ref_key: "track",
+          ref: B,
+          class: "bb-base-slider__track-container"
+        }, [
+          r[0] || (r[0] = c("span", { class: "bb-base-slider__track-fill" }, null, -1)),
+          c("span", re(te(Q.value)), null, 16)
+        ], 512),
+        a.range ? (g(), w("span", T({ key: 1 }, b(M), {
+          key: "thumblower",
+          ref_key: "thumblower",
+          ref: _,
+          "aria-describedby": e.ariaDescribedby,
+          "aria-orientation": "horizontal",
+          "aria-readonly": !e.readonly,
+          "aria-valuemax": e.max,
+          "aria-valuemin": e.min,
+          "aria-valuenow": E.value,
+          class: "bb-base-slider__thumb-container",
+          "data-thumb": "lower",
+          role: "slider",
+          style: { left: `${n.value}%` },
+          tabindex: e.disabled ? -1 : 0,
+          onFocus: q,
+          onKeydown: X
+        }), [
+          c("span", {
+            class: F({
+              "bb-base-slider__thumb": !0,
+              "bb-base-slider__thumb--lower": !0,
+              "bb-base-slider__thumb--focused": b(t) === "lower"
+            }),
+            style: I({
+              transform: `translateY(-50%) ${e.thumbTranslate ? `translateX(-${n.value}%)` : "translateX(-50%)"}`,
+              left: `${n.value}%`
+            })
+          }, [
+            f(e.$slots, "thumb:lower", {
+              focused: b(t) === "lower",
+              percent: n.value,
+              value: E.value
+            }, () => [
+              f(e.$slots, "thumb", {
+                focused: b(t) === "lower",
+                percent: n.value,
+                value: E.value
+              })
+            ])
+          ], 6)
+        ], 16, ue)) : H("", !0),
+        c("span", T(b(M), {
+          key: "thumbhigher",
+          ref_key: "thumbhigher",
+          ref: v,
+          "aria-describedby": e.ariaDescribedby,
+          "aria-orientation": "horizontal",
+          "aria-readonly": !e.readonly,
+          "aria-valuemax": e.max,
+          "aria-valuemin": e.min,
+          "aria-valuenow": $.value,
+          class: "bb-base-slider__thumb-container",
+          "data-thumb": "higher",
+          role: "slider",
+          style: { left: `${o.value}%` },
+          tabindex: e.disabled ? -1 : 0,
+          onFocus: q,
+          onKeydown: X
+        }), [
+          c("span", {
+            class: F({
+              "bb-base-slider__thumb": !0,
+              "bb-base-slider__thumb--higher": !0,
+              "bb-base-slider__thumb--focused": b(t) === "higher"
+            }),
+            style: I({
+              transform: `translateY(-50%) ${e.thumbTranslate ? `translateX(-${o.value}%)` : "translateX(-50%)"}`,
+              left: `${o.value}%`
+            })
+          }, [
+            f(e.$slots, "thumb:higher", {
+              focused: b(t) === "higher",
+              percent: o.value,
+              value: $.value
+            }, () => [
+              f(e.$slots, "thumb", {
+                focused: b(t) === "higher",
+                percent: o.value,
+                value: $.value
+              })
+            ])
+          ], 6)
+        ], 16, de)
+      ]),
+      f(e.$slots, "append")
     ], 16));
   }
 });
 export {
-  L as default
+  we as default
 };