bitboss-ui 2.0.37 → 2.0.39

package/dist/index37.js

@@ -1,308 +1,385 @@
-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 b, Fragment as ee, renderList as ae, createCommentVNode as H, normalizeProps as re, guardReactiveProps as te, unref as c, normalizeClass as F, normalizeStyle as I } from "vue";
-import { clamp as le } from "./index198.js";
-import { head as O } from "./index240.js";
-import { isCssColor as Y } from "./index216.js";
-import { isNil as P } from "./index125.js";
-import { isNotNil as ne } from "./index130.js";
-import { transposeValue as y } from "./index126.js";
-import { hash as J } from "./index224.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 = /* @__PURE__ */ b("span", { class: "bb-base-slider__track-fill" }, null, -1), de = ["aria-describedby", "aria-readonly", "aria-valuemax", "aria-valuemin", "aria-valuenow", "tabindex"], me = ["aria-describedby", "aria-readonly", "aria-valuemax", "aria-valuemin", "aria-valuenow", "tabindex"], ke = /* @__PURE__ */ U({
-  __name: "BaseSlider",
+import { defineComponent as Me, defineAsyncComponent as Ne, ref as m, computed as y, toRef as I, openBlock as h, createBlock as $, normalizeClass as _, withCtx as r, renderSlot as p, unref as s, createVNode as F, createElementVNode as T, createElementBlock as M, Fragment as R, createCommentVNode as J, withDirectives as xe, isRef as He, withModifiers as d, withKeys as g, vModelDynamic as Pe, renderList as ze, mergeProps as Y, Teleport as Qe, normalizeStyle as Ke, nextTick as Ue } from "vue";
+/* empty css       */
+/* empty css       */
+import { useId as We } from "./index8.js";
+import { useMobile as _e } from "./index9.js";
+import Re from "./index127.js";
+/* empty css         */
+import { isNotNil as Je } from "./index134.js";
+import { last as Ye } from "./index222.js";
+import { matchAnyKey as j } from "./index242.js";
+import { useFloating as je } from "./index215.js";
+import { useIntersectionObserver as Ge } from "./index132.js";
+import { useLogger as Xe } from "./index228.js";
+import { useOptions as Ze } from "./index209.js";
+import { wait as S } from "./index131.js";
+import { when as et } from "./index213.js";
+import tt from "./index243.js";
+/* empty css         */
+import ot from "./index245.js";
+/* empty css         */
+import nt from "./index206.js";
+/* empty css         */
+import lt from "./index208.js";
+import { waitFor as at } from "./index225.js";
+import { autoUpdate as it, flip as rt, offset as st, shift as ut } from "./index227.js";
+const pt = { class: "bb-base-select__input-container" }, dt = ["id", "aria-controls", "aria-describedby", "aria-expanded", "autocomplete", "autofocus", "disabled", "inputmode", "placeholder", "readonly", "required", "onKeydown"], Nt = /* @__PURE__ */ Me({
+  __name: "BaseSelect",
   props: {
+    addOptions: { type: Boolean },
+    allowWriting: { type: [Boolean, String], default: !0 },
+    "append:icon": {},
     ariaDescribedby: {},
+    autocomplete: {},
     autofocus: {},
-    color: {},
+    comma: { type: Boolean },
+    dependencies: { default: () => [] },
+    depsDebounceTime: { default: 0 },
     disabled: { type: Boolean },
+    enforceCoherence: { type: Boolean },
+    filterBy: { type: [String, Array, Boolean, Function, null], default: () => [] },
     hasErrors: { type: Boolean },
     id: {},
-    max: { default: 100 },
-    min: { default: 0 },
-    modelValue: { default: 0 },
+    items: {},
+    itemText: {},
+    itemValue: {},
+    loading: { type: Boolean },
+    loadingText: { default: "Caricamento..." },
+    modelValue: {},
+    modelValueDebounceTime: { default: 0 },
+    multiple: { type: Boolean },
     name: {},
-    range: { type: Boolean },
-    readonly: {},
+    noDataText: { default: "Nessun elemento da visualizzare" },
+    placeholder: {},
+    prefill: { type: [Boolean, String], default: "focus" },
+    "prepend:icon": {},
+    queryDebounceTime: { default: 500 },
+    readonly: { type: Boolean },
     required: { type: Boolean },
-    step: { default: 1 },
-    ticks: { type: Boolean },
-    thumbTranslate: { type: Boolean, default: !0 }
+    resetQueryOnOptionSelected: { type: Boolean },
+    stash: { type: Boolean },
+    transitionDuration: { default: 300 },
+    updateOnAnimationFrame: { type: Boolean, default: !1 }
   },
-  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;
+  emits: ["blur", "change", "click", "focus", "inactive", "input", "update:modelValue"],
+  setup(G, { emit: X }) {
+    const t = G, b = X;
+    if (t.multiple && !Array.isArray(t.modelValue))
+      throw new Error('Multiple is set to "true" but modelValue is not an array.');
+    const Z = Ne(() => import("./index241.js")), A = m(null), B = m(null), a = m(null), N = m(null), x = m(null), u = y(
+      () => t.comma ? N.value : x.value
+    ), { isMobile: ee } = _e(), te = y(
+      () => t.allowWriting === "not-mobile" && ee.value ? "none" : void 0
+    ), H = t.id || We().id.value;
+    Ge(
+      B,
+      ([{ intersectionRatio: e }]) => {
+        e !== 1 && O();
       },
-      { immediate: !0 }
+      { threshold: [0, 1] }
     );
-    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);
+    const { floatingStyles: oe } = je(
+      B,
+      a,
+      {
+        placement: "bottom",
+        whileElementsMounted: it,
+        middleware: [rt(), st(5), ut()]
       }
-    }, 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]}%`
+    ), ne = y(() => {
+      var o;
+      const e = {
+        ...oe.value,
+        zIndex: "10"
       };
+      return B.value && (e.width = `${(o = B.value) == null ? void 0 : o.$el.clientWidth}px`), e;
+    }), q = m(null), E = () => {
+      q.value instanceof HTMLInputElement && q.value.focus();
+    }, le = async (e) => {
+      b("focus", e), Ae(), document.addEventListener("click", k), document.addEventListener("focusin", k);
+    }, ae = () => {
+      t.prefill === "focus" && !Oe.value && !Ce.value && Be();
+    }, ie = async (e) => {
+      b("blur", e);
+    }, re = (e) => b("change", e), se = (e) => {
+      var o;
+      b("input", e), l.value === "" && (t.multiple || ke(null)), (o = u.value) == null || o.blur(), Ie();
+    }, k = async (e) => {
+      if (e.target instanceof Node && A.value && a.value && !A.value.$el.contains(e.target) && !a.value.$el.contains(e.target)) {
+        O(), qe(), document.removeEventListener("click", k), document.removeEventListener("focusin", k), await S(t.transitionDuration), be();
+        return;
+      }
+    }, w = y(() => !(t.readonly || t.disabled || D.value || !u.value && t.multiple)), ue = async () => {
+      var e, o, n;
+      w.value && ((e = u.value) == null || e.blur(), c.value ? (o = a.value) == null || o.focusPrevious() : (await V(), await S(t.transitionDuration), (n = a.value) == null || n.focusLastSelected()));
+    }, pe = async () => {
+      var e, o, n;
+      w.value && ((e = u.value) == null || e.blur(), c.value ? (o = a.value) == null || o.focusNext() : (await V(), await S(t.transitionDuration), (n = a.value) == null || n.focusFirstSelected()));
+    }, de = (e) => {
+      var n, i, f, C;
+      if (!w.value || !t.multiple || l.value || (e.preventDefault(), (n = a.value) == null || n.blur(), !v.value.length)) return;
+      (i = u.value) == null || i.focusPrevious();
+      const o = (f = u.value) == null ? void 0 : f.getHighlighted();
+      o && ((C = a.value) == null || C.focusByHash(o.valueHash));
+    }, ce = (e) => {
+      var n, i, f, C;
+      if (!w.value || !t.multiple || l.value || (e.preventDefault(), (n = a.value) == null || n.blur(), !v.value.length)) return;
+      (i = u.value) == null || i.focusNext();
+      const o = (f = u.value) == null ? void 0 : f.getHighlighted();
+      o && ((C = a.value) == null || C.focusByHash(o.valueHash));
+    }, fe = async () => {
+      var e, o;
+      if (w.value) {
+        if (!c.value)
+          await V(), await S(t.transitionDuration), v.value.length && ((e = a.value) == null || e.focusFirstSelected());
+        else if ((o = a.value) != null && o.getHighlighted())
+          a.value.confirmOption();
+        else if (t.addOptions) {
+          if (t.itemText || t.itemValue) {
+            const { error: i } = Xe();
+            i(
+              `Adding an option for mapped items is not supported. You can't create an option while passing "item-text" or "item-value".`
+            );
+            return;
+          }
+          const n = l.value.trim();
+          if (De(n)) return;
+          he(), Q(Ye(Ve.value));
+        }
+      }
+    }, me = async () => {
+      c.value && await O();
+    }, ve = async () => {
+      var e, o;
+      !w.value || l.value || !v.value.length || ((e = u.value) != null && e.getHighlighted() && u.value.confirmOption(), await Ue(), (o = u.value) == null || o.focusPrevious());
+    }, ye = t.prefill === !0 || !t.multiple && Je(t.modelValue) || t.multiple && !!t.modelValue.length, {
+      query: l,
+      alignQueryToState: be,
+      addCurrentQueryToManualItems: he,
+      innerLoading: P,
+      options: z,
+      selectedOptions: v,
+      selectOption: ge,
+      unselectOption: we,
+      prefillItems: Be,
+      isPrefilling: Oe,
+      hasPrefilled: Ce,
+      updateModelValue: ke,
+      valueIsSelected: De,
+      manualItems: Ve,
+      searchByQuery: Ie
+    } = Ze({
+      emit: b,
+      itemText: t.itemText,
+      itemValue: t.itemValue,
+      modelValue: I(t, "modelValue"),
+      multiple: t.multiple,
+      resetQueryOnOptionSelected: t.resetQueryOnOptionSelected,
+      stash: t.stash,
+      items: I(t, "items"),
+      enforceCoherence: t.enforceCoherence,
+      prefill: ye,
+      modelValueDebounceTime: t.modelValueDebounceTime,
+      dependencies: I(t, "dependencies"),
+      depsDebounceTime: t.depsDebounceTime,
+      queryDebounceTime: t.queryDebounceTime,
+      disabled: I(t, "disabled")
+    }), $e = y(() => v.value.length ? "" : t.placeholder), D = y(() => !!(P.value || t.loading)), Te = y(() => {
+      let e = [];
+      const o = v.value.some(
+        (i) => i.text === l.value
+      );
+      return (t.multiple && l.value || l.value && !o && !t.multiple) && t.filterBy ? e = z.value.filter((i) => {
+        let f = !1;
+        return typeof t.filterBy == "function" ? f = t.filterBy(i.value, i.item) : Array.isArray(t.filterBy) && t.filterBy.length && (f = f || j(i.item, t.filterBy, l.value.trim())), f || j(i, ["text"], l.value.trim());
+      }) : e = z.value, e;
+    }), Q = (e) => {
+      ge(e), E(), t.multiple || O();
+    }, K = (e) => {
+      we(e), E();
+    }, c = m(!1), U = m(!0), W = m(!1), V = async () => {
+      W.value = !0, await at(() => !!a.value), U.value = !1, c.value = !0;
+    }, O = async () => {
+      var e;
+      c.value = !1, U.value = !0, (e = u.value) == null || e.blur();
+    }, Se = () => c.value ? O() : V(), L = m(!1), Ae = () => {
+      L.value = !0;
+    }, qe = () => {
+      L.value = !1, b("inactive");
+    }, Ee = (e) => {
+      e.preventDefault(), b("click", e), !(t.disabled || t.readonly) && (E(), Se());
+    }, Le = et(
+      (e) => typeof e != "string",
+      JSON.stringify
+    ), Fe = y(() => [].concat(t.modelValue).map((e) => {
+      const o = Le(e);
       return {
-        class: e,
-        style: r
+        disabled: t.disabled,
+        name: t.name,
+        type: "hidden",
+        value: o
       };
-    }), 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;
-      }
-      return e;
-    });
-    return (e, r) => (g(), w("span", T(D, {
-      ref_key: "container",
-      ref: C
-    }), [
-      f(e.$slots, "prepend"),
-      b("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),
-        b("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),
-        b("span", {
-          ref_key: "track",
+    }));
+    return (e, o) => (h(), $(lt, {
+      ref_key: "outerContainer",
+      ref: A,
+      class: _({
+        "bb-base-select": !0,
+        "bb-base-select--active": L.value,
+        "bb-base-select--shown": c.value,
+        "bb-base-select--loading": D.value,
+        "bb-base-select--disabled": e.disabled,
+        "bb-base-select--errors": e.hasErrors,
+        "bb-base-select--readonly": e.readonly
+      }),
+      onClick: Ee
+    }, {
+      "prepend-outer": r(() => [
+        p(e.$slots, "prepend-outer", { query: s(l) })
+      ]),
+      "append-outer": r(() => [
+        p(e.$slots, "append-outer", { query: s(l) })
+      ]),
+      default: r(() => [
+        F(nt, {
+          ref_key: "innerContainer",
           ref: B,
-          class: "bb-base-slider__track-container"
-        }, [
-          ue,
-          b("span", re(te(Q.value)), null, 16)
-        ], 512),
-        a.range ? (g(), w("span", T({ key: 1 }, c(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
-        }), [
-          b("span", {
-            class: F({
-              "bb-base-slider__thumb": !0,
-              "bb-base-slider__thumb--lower": !0,
-              "bb-base-slider__thumb--focused": c(t) === "lower"
+          "append:icon": t["append:icon"],
+          "prepend:icon": t["prepend:icon"],
+          "prevent-focus": !0
+        }, {
+          prepend: r(() => [
+            p(e.$slots, "prepend", { query: s(l) })
+          ]),
+          prefix: r(() => [
+            p(e.$slots, "prefix")
+          ]),
+          append: r(() => [
+            p(e.$slots, "append", { query: s(l) })
+          ]),
+          suffix: r(() => [
+            p(e.$slots, "suffix")
+          ]),
+          default: r(() => [
+            F(s(Re), { tag: "span" }, {
+              default: r(() => [
+                T("span", pt, [
+                  e.multiple ? (h(), M(R, { key: 0 }, [
+                    e.comma ? (h(), $(ot, {
+                      key: 0,
+                      ref_key: "commaBox",
+                      ref: N,
+                      options: s(v)
+                    }, null, 8, ["options"])) : (h(), $(tt, {
+                      key: 1,
+                      ref_key: "chipsBox",
+                      ref: x,
+                      options: s(v),
+                      "onOption:unselected": K
+                    }, null, 8, ["options"]))
+                  ], 64)) : J("", !0),
+                  xe(T("input", {
+                    id: s(H),
+                    ref_key: "input",
+                    ref: q,
+                    "onUpdate:modelValue": o[0] || (o[0] = (n) => He(l) ? l.value = n : null),
+                    "aria-autocomplete": "list",
+                    "aria-controls": `${s(H)}_listbox`,
+                    "aria-describedby": e.ariaDescribedby,
+                    "aria-expanded": c.value,
+                    autocomplete: e.autocomplete,
+                    autofocus: e.autofocus,
+                    class: _("bb-base-select__text-input"),
+                    disabled: e.disabled,
+                    inputmode: te.value,
+                    placeholder: $e.value,
+                    readonly: e.readonly || !e.allowWriting,
+                    required: e.required && !e.multiple || e.multiple && !e.modelValue.length,
+                    role: "combobox",
+                    type: "text",
+                    onBlur: d(ie, ["stop"]),
+                    onChange: d(re, ["stop"]),
+                    onFocusOnce: d(ae, ["stop"]),
+                    onFocus: d(le, ["stop"]),
+                    onInput: d(se, ["stop"]),
+                    onKeydown: [
+                      g(d(ve, ["stop"]), ["delete"]),
+                      g(d(de, ["stop"]), ["left"]),
+                      g(d(pe, ["stop", "prevent"]), ["down"]),
+                      g(d(fe, ["stop", "prevent"]), ["enter"]),
+                      g(d(me, ["stop", "prevent"]), ["esc"]),
+                      g(d(ue, ["stop", "prevent"]), ["up"]),
+                      g(d(ce, ["stop"]), ["right"])
+                    ]
+                  }, null, 40, dt), [
+                    [Pe, s(l)]
+                  ])
+                ])
+              ]),
+              _: 1
             }),
-            style: I({
-              transform: `translateY(-50%) ${e.thumbTranslate ? `translateX(-${n.value}%)` : "translateX(-50%)"}`,
-              left: `${n.value}%`
-            })
-          }, [
-            f(e.$slots, "thumb:lower", {
-              focused: c(t) === "lower",
-              percent: n.value,
-              value: E.value
+            p(e.$slots, "chevron", {
+              loading: !!s(P),
+              shown: c.value
             }, () => [
-              f(e.$slots, "thumb", {
-                focused: c(t) === "lower",
-                percent: n.value,
-                value: E.value
-              })
+              o[1] || (o[1] = T("svg", {
+                class: "bb-base-select__chevron",
+                viewBox: "0 0 24 24",
+                xmlns: "http://www.w3.org/2000/svg"
+              }, [
+                T("path", {
+                  d: "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z",
+                  fill: "currentColor"
+                })
+              ], -1))
             ])
-          ], 6)
-        ], 16, de)) : H("", !0),
-        b("span", T(c(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
-        }), [
-          b("span", {
-            class: F({
-              "bb-base-slider__thumb": !0,
-              "bb-base-slider__thumb--higher": !0,
-              "bb-base-slider__thumb--focused": c(t) === "higher"
-            }),
-            style: I({
-              transform: `translateY(-50%) ${e.thumbTranslate ? `translateX(-${o.value}%)` : "translateX(-50%)"}`,
-              left: `${o.value}%`
-            })
-          }, [
-            f(e.$slots, "thumb:higher", {
-              focused: c(t) === "higher",
-              percent: o.value,
-              value: $.value
-            }, () => [
-              f(e.$slots, "thumb", {
-                focused: c(t) === "higher",
-                percent: o.value,
-                value: $.value
-              })
-            ])
-          ], 6)
-        ], 16, me)
+          ]),
+          _: 3
+        }, 8, ["append:icon", "prepend:icon"]),
+        (h(!0), M(R, null, ze(Fe.value, (n) => (h(), M("input", Y({
+          key: n.value,
+          ref_for: !0
+        }, n), null, 16))), 128)),
+        W.value ? (h(), $(Qe, {
+          key: 0,
+          to: "body"
+        }, [
+          F(s(Z), {
+            ref_key: "optionsContainer",
+            ref: a,
+            loading: D.value,
+            open: c.value,
+            options: Te.value,
+            style: Ke(ne.value),
+            "onOption:selected": Q,
+            "onOption:unselected": K
+          }, {
+            "options:prepend": r(() => [
+              p(e.$slots, "options:prepend")
+            ]),
+            loading: r(() => [
+              p(e.$slots, "loading", { query: s(l) })
+            ]),
+            "no-data": r(() => [
+              p(e.$slots, "no-data", { query: s(l) })
+            ]),
+            "options:append": r(() => [
+              p(e.$slots, "options:append")
+            ]),
+            option: r((n) => [
+              p(e.$slots, "option", Y({
+                hasErrors: e.hasErrors,
+                loading: D.value
+              }, n))
+            ]),
+            _: 3
+          }, 8, ["loading", "open", "options", "style"])
+        ])) : J("", !0)
       ]),
-      f(e.$slots, "append")
-    ], 16));
+      _: 3
+    }, 8, ["class"]));
   }
 });
 export {
-  ke as default
+  Nt as default
 };