vue-composable-ui 1.0.1 → 1.0.2

package/dist/composable-ui.js

@@ -1,1114 +1,49 @@
-import { ref as S, watch as oe, nextTick as H, onMounted as ae, onBeforeUnmount as G, shallowRef as pe, computed as E, provide as U, readonly as J, shallowReadonly as me, triggerRef as ce, unref as s, inject as B, onBeforeMount as be, defineComponent as A, mergeModels as ie, useModel as W, openBlock as _, createElementBlock as y, renderSlot as O, createCommentVNode as N, useSlots as Ie, Fragment as z, createBlock as te, Teleport as we, mergeProps as de, createTextVNode as he, toDisplayString as _e, renderList as fe, withDirectives as ge, vModelDynamic as ye } from "vue";
-function R(i) {
-  return typeof i == "string" ? S(document.querySelector(i) || void 0) : i instanceof HTMLElement ? S(i) : i;
-}
-function Q(i, e, {
-  direction: t = "down",
-  align: o = "left",
-  position: n = "fixed",
-  closeOnOutsideClick: r = !0,
-  closeOnInsideClick: f = !1
-} = {}) {
-  const a = S(!1);
-  function c() {
-    const v = R(i);
-    if (!v.value) throw new Error("Activator element is undefined");
-    return v.value;
-  }
-  function u() {
-    const v = R(e);
-    if (!v.value) throw new Error("Popover element is undefined");
-    return v.value;
-  }
-  function m({ focus: v = !0 } = {}) {
-    a.value = !0, v && H(() => {
-      u().focus();
-    });
-  }
-  function b({ focus: v = !0 } = {}) {
-    a.value = !1, v && c().focus();
-  }
-  function d(v) {
-    a.value ? b(v) : m(v);
-  }
-  function w() {
-    if (!a.value) return;
-    const v = c(), $ = u();
-    $.style.position = n;
-    const {
-      top: j,
-      right: l,
-      bottom: p,
-      left: h,
-      width: x,
-      height: I
-    } = v.getBoundingClientRect(), L = $.offsetHeight, F = $.offsetWidth, K = document.documentElement.clientHeight, q = document.documentElement.clientWidth;
-    let P = t;
-    t == "up" ? j - L < 0 && (P = "down") : t == "down" ? p + L > K && (P = "up") : t == "right" ? l + F > q && (P = "left") : t == "left" && h - F < 0 && (P = "right");
-    let M = o;
-    o == "left" ? h + F > q && (M = "right") : o == "right" ? l - F < 0 && (M = "left") : o == "top" ? j + L > K && (M = "bottom") : o == "bottom" && p - L < 0 && (M = "top");
-    const V = {
-      top: "auto",
-      bottom: "auto",
-      left: "auto",
-      right: "auto",
-      width: "auto"
-    }, T = n === "fixed";
-    P == "up" ? V.bottom = `${I + (T ? K - p : 0)}px` : P == "down" ? V.top = `${I + (T ? j : 0)}px` : P == "right" ? V.left = `${x + (T ? h : 0)}px` : P == "left" && (V.right = `${x + (T ? q - l : 0)}px`), ["up", "down"].includes(P) ? M == "right" ? V.right = `${T ? q - l : 0}px` : M == "left" || M == "stretch" ? V.left = `${T ? h : 0}px` : M == "center" && (V.left = `${(T ? h : 0) - (F - x) / 2}px`) : M == "bottom" ? V.bottom = `${T ? K - p : 0}px` : M == "top" ? V.top = `${T ? j : 0}px` : M == "center" && (V.top = `${(T ? j : 0) - (L - I) / 2}px`), ["up", "down"].includes(P) && M === "stretch" && (V.width = x + "px");
-    for (const le in V)
-      $.style[le] = V[le];
-  }
-  oe(
-    a,
-    (v) => {
-      v && H(() => {
-        w();
-      });
-    },
-    { flush: "pre" }
-  );
-  function C(v) {
-    const $ = v.target;
-    if (!c().contains($))
-      try {
-        u().contains($) ? f && b() : r && (a.value = !1);
-      } catch {
-      }
-  }
-  const g = new ResizeObserver(w), k = new AbortController();
-  return ae(() => {
-    window.addEventListener("resize", w, {
-      passive: !0,
-      signal: k.signal
-    }), window.addEventListener("scroll", w, {
-      passive: !0,
-      //capture: true,
-      signal: k.signal
-    }), window.addEventListener("click", C, {
-      passive: !0,
-      signal: k.signal
-    }), g.observe(c());
-  }), G(() => {
-    k.abort(), g.disconnect();
-  }), {
-    isOpen: a,
-    open: m,
-    close: b,
-    toggle: d
-  };
-}
-const ne = Symbol();
-function ee(i, e) {
-  const [t, o] = [s(i), s(e)];
-  return typeof t == "object" ? typeof o == "object" ? JSON.stringify(t) === JSON.stringify(o) : !1 : t === o;
-}
-function X(i) {
-  let e = 0;
-  const t = pe([]), o = S(), n = E(() => Array.isArray(i.value));
-  function r(l) {
-    const p = t.value.find((h) => h.id === l);
-    if (!p) throw new Error(`Item not found: (${l})`);
-    return p;
-  }
-  function f(l) {
-    const p = s(l.element);
-    if (p)
-      return p.focus(), p;
-  }
-  function a(l, { focus: p = !1 } = {}) {
-    o.value = (l == null ? void 0 : l.id) ?? void 0, l !== void 0 && p && f(l);
-  }
-  function c(l, { focus: p = !1 } = {}) {
-    const h = r(l);
-    return a(h, { focus: p });
-  }
-  function u(l) {
-    return o.value === l;
-  }
-  function m(l, p, h = !1) {
-    const x = R(l), I = e++;
-    return t.value.push({
-      id: I,
-      value: p,
-      element: x,
-      disabled: h
-    }), ce(t), I;
-  }
-  function b(l) {
-    u(l) && a();
-    const p = r(l), h = t.value.indexOf(p);
-    t.value.splice(h, 1), ce(t);
-  }
-  function d(l) {
-    const p = r(l);
-    if (s(p.disabled)) return;
-    const h = s(p.value);
-    if (h !== void 0) {
-      if (s(n)) {
-        const x = i.value.findIndex(
-          (I) => ee(h, I)
-        );
-        x > -1 ? i.value.splice(x, 1) : i.value = [...i.value, h];
-      } else
-        i.value = h;
-      a(p);
-    }
-  }
-  function w(l) {
-    return s(n) ? !!i.value.find(
-      (p) => ee(l.value, p)
-    ) : ee(i, l.value);
-  }
-  function C(l) {
-    try {
-      const p = r(l);
-      return w(p);
-    } catch {
-      return !1;
-    }
-  }
-  function g({ focus: l = !1 } = {}) {
-    for (let p of t.value)
-      if (w(p))
-        return a(p, { focus: l });
-  }
-  function k({ focus: l = !1 } = {}) {
-    if (t.value.length)
-      return a(t.value[0], { focus: l });
-  }
-  function v({ focus: l = !1 } = {}) {
-    if (t.value.length)
-      return a(t.value[t.value.length - 1], { focus: l });
-  }
-  function $({
-    focus: l = !1,
-    loop: p = !1
-  } = {}) {
-    if (o.value === void 0) return k({ focus: l });
-    const h = r(o.value), x = t.value.indexOf(h);
-    let I;
-    if (x + 1 < t.value.length)
-      I = t.value[x + 1];
-    else if (p)
-      I = t.value[0];
-    else
-      return;
-    return a(I, { focus: l });
-  }
-  function j({
-    focus: l = !1,
-    loop: p = !1
-  } = {}) {
-    if (o.value === void 0) return v({ focus: l });
-    const h = r(o.value), x = t.value.indexOf(h);
-    let I;
-    if (x - 1 > -1)
-      I = t.value[x - 1];
-    else if (p)
-      I = t.value[t.value.length - 1];
-    else
-      return;
-    return a(I, { focus: l });
-  }
-  return U(ne, {
-    value: J(i),
-    selectItem: d,
-    activateItem: c,
-    isSelected: C,
-    isActive: u,
-    addItem: m,
-    removeItem: b
-  }), {
-    items: me(t),
-    isMultiselectable: J(n),
-    activeItem: E(
-      () => o.value !== void 0 ? r(o.value) : void 0
-    ),
-    selectActiveItem: () => {
-      o.value !== void 0 && d(o.value);
-    },
-    activateSelectedItem: g,
-    activateFirstItem: k,
-    activateLastItem: v,
-    activateNextItem: $,
-    activatePrevItem: j
-  };
-}
-function Y(i, e, t) {
-  const o = B(ne);
-  if (!o)
-    throw new Error("List injectable context is not provided");
-  const n = S(-1), r = E(() => o.isSelected(n.value)), f = E(() => o.isActive(n.value));
-  function a() {
-    o.selectItem(n.value);
-  }
-  function c({ focus: u = !0 } = {}) {
-    s(t) || o.activateItem(n.value, { focus: u });
-  }
-  return be(() => {
-    n.value = o.addItem(i, e, t);
-  }), G(() => {
-    o.removeItem(n.value);
-  }), {
-    isSelected: r,
-    isActive: f,
-    select: a,
-    activate: c
-  };
-}
-function Te(i, e = [], t = !0) {
-  const o = S(!1), n = S(!0), r = S(), f = S("");
-  let a, c;
-  function u() {
-    a == null || a.focus();
-  }
-  function m() {
-    n.value = a.validity.valid, r.value = a.validity, f.value = a.validationMessage;
-  }
-  function b() {
-    if (!a) throw new Error("Form element is undefined");
-    if (a.setCustomValidity(""), a.validity.valid) {
-      const g = a.value;
-      for (const k of s(e)) {
-        const v = k(g);
-        if (v !== !0) {
-          a.setCustomValidity(v);
-          break;
-        }
-      }
-    }
-    return m(), n.value;
-  }
-  function d(g) {
-    m(), s(t) || g.preventDefault();
-  }
-  function w() {
-    b(), o.value = c !== a.value;
-  }
-  let C = new AbortController();
-  return ae(() => {
-    if (a = R(i).value, !a) throw new Error("Form element is undefined");
-    c = a.value, a.addEventListener("change", w, {
-      signal: C.signal,
-      passive: !0
-    }), a.addEventListener("invalid", d, {
-      signal: C.signal
-    }), a != null && a.autofocus && u();
-  }), G(() => {
-    C.abort();
-  }), {
-    focus: u,
-    validate: b,
-    isValid: n,
-    validity: J(r),
-    validationMessage: J(f),
-    isChanged: o
-  };
-}
-let ke = 0;
-function D(i = "id") {
-  return `${i}-${++ke}`;
-}
-const se = Symbol(), ve = Symbol(), re = Symbol(), Z = Symbol(), xe = ["aria-activedescendant", "aria-orientation", "aria-multiselectable"], Be = /* @__PURE__ */ A({
-  __name: "listbox",
-  props: /* @__PURE__ */ ie({
-    orientation: { default: "vertical" },
-    loop: { type: Boolean, default: !1 }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(i) {
-    const e = i, t = W(i, "modelValue"), {
-      isMultiselectable: o,
-      activeItem: n,
-      selectActiveItem: r,
-      activateFirstItem: f,
-      activateLastItem: a,
-      activateNextItem: c,
-      activatePrevItem: u
-    } = X(t), m = E(() => {
-      var d, w;
-      return (w = (d = n.value) == null ? void 0 : d.element.value) == null ? void 0 : w.id;
-    });
-    function b(d) {
-      switch (d.code) {
-        case "Space":
-          r();
-          break;
-        case "ArrowUp":
-          if (e.orientation === "horizontal") return;
-          u({ focus: !1, loop: e.loop }), o.value || r();
-          break;
-        case "ArrowDown":
-          if (e.orientation === "horizontal") return;
-          c({ focus: !1, loop: e.loop }), o.value || r();
-          break;
-        case "ArrowLeft":
-          if (e.orientation === "vertical") return;
-          u({ focus: !1, loop: e.loop }), o.value || r();
-          break;
-        case "ArrowRight":
-          if (e.orientation === "vertical") return;
-          c({ focus: !1, loop: e.loop }), o.value || r();
-          break;
-        case "Home":
-          f({ focus: !1 });
-          break;
-        case "End":
-          a({ focus: !1 });
-          break;
-        default:
-          return;
-      }
-      d.preventDefault();
-    }
-    return (d, w) => (_(), y("div", {
-      onKeydown: b,
-      "aria-activedescendant": m.value,
-      "aria-orientation": d.orientation,
-      "aria-multiselectable": s(o),
-      role: "listbox",
-      tabindex: "0"
-    }, [
-      O(d.$slots, "default")
-    ], 40, xe));
-  }
-}), $e = ["id", "aria-disabled", "aria-selected", "data-active"], Fe = /* @__PURE__ */ A({
-  __name: "listboxOption",
-  props: {
-    id: {},
-    value: {},
-    disabled: { type: Boolean }
-  },
-  setup(i) {
-    const e = i, t = e.id ?? D("list-option"), o = S(), { isSelected: n, isActive: r, select: f } = Y(
-      o,
-      e.value,
-      e.disabled
-    );
-    return (a, c) => (_(), y("div", {
-      ref_key: "itemEl",
-      ref: o,
-      id: s(t),
-      onClick: c[0] || (c[0] = //@ts-ignore
-      (...u) => s(f) && s(f)(...u)),
-      "aria-disabled": a.disabled,
-      "aria-selected": s(n),
-      "data-active": s(r),
-      role: "option",
-      tabindex: "-1"
-    }, [
-      O(a.$slots, "default", {
-        isSelected: s(n),
-        isActive: s(r)
-      })
-    ], 8, $e));
-  }
-}), He = /* @__PURE__ */ A({
-  __name: "tabContainer",
-  props: {
-    modelValue: {},
-    modelModifiers: {}
-  },
-  emits: ["update:modelValue"],
-  setup(i) {
-    const e = W(i, "modelValue"), {
-      items: t,
-      selectActiveItem: o,
-      activateFirstItem: n,
-      activateLastItem: r,
-      activateNextItem: f,
-      activatePrevItem: a
-    } = X(e);
-    return U(se, {
-      getIds: (c) => E(() => {
-        var m, b;
-        const u = t.value.find((d) => d.value === c);
-        return {
-          tabId: ((m = u == null ? void 0 : u.element.value) == null ? void 0 : m.getAttribute("id")) || void 0,
-          panelId: ((b = u == null ? void 0 : u.element.value) == null ? void 0 : b.getAttribute("aria-controls")) || void 0
-        };
-      }),
-      selectActiveItem: o,
-      activateFirstItem: n,
-      activateLastItem: r,
-      activateNextItem: f,
-      activatePrevItem: a
-    }), (c, u) => (_(), y("div", null, [
-      O(c.$slots, "default")
-    ]));
-  }
-}), Ae = ["aria-orientation"], Ke = /* @__PURE__ */ A({
-  __name: "tabList",
-  props: {
-    orientation: { default: "horizontal" }
-  },
-  setup(i) {
-    const e = i, t = B(se);
-    if (!t)
-      throw new Error("Tabs injectable context is not provided");
-    function o(n) {
-      switch (n.code) {
-        case "ArrowUp":
-          e.orientation === "vertical" && t.activatePrevItem({ focus: !0, loop: !0 });
-          break;
-        case "ArrowDown":
-          e.orientation === "vertical" && t.activateNextItem({ focus: !0, loop: !0 });
-          break;
-        case "ArrowLeft":
-          e.orientation === "horizontal" && t.activatePrevItem({ focus: !0, loop: !0 });
-          break;
-        case "ArrowRight":
-          e.orientation === "horizontal" && t.activateNextItem({ focus: !0, loop: !0 });
-          break;
-        case "Home":
-          t.activateFirstItem({ focus: !0 });
-          break;
-        case "End":
-          t.activateLastItem({ focus: !0 });
-          break;
-        default:
-          return;
-      }
-      t.selectActiveItem(), n.preventDefault();
-    }
-    return (n, r) => (_(), y("div", {
-      onKeydown: o,
-      "aria-orientation": e.orientation,
-      role: "tablist"
-    }, [
-      O(n.$slots, "default")
-    ], 40, Ae));
-  }
-}), Ee = ["id", "aria-selected", "aria-controls", "tabindex"], Ne = /* @__PURE__ */ A({
-  __name: "tab",
-  props: {
-    id: {},
-    ariaControls: {},
-    value: {}
-  },
-  setup(i) {
-    const e = i, t = S(), { isSelected: o, select: n } = Y(t, e.value), r = e.id ?? D("tab"), f = e.ariaControls ?? D("tab-panel");
-    return (a, c) => (_(), y("button", {
-      ref_key: "tab",
-      ref: t,
-      onClick: c[0] || (c[0] = //@ts-ignore
-      (...u) => s(n) && s(n)(...u)),
-      id: s(r),
-      "aria-selected": s(o),
-      "aria-controls": s(f),
-      tabindex: s(o) ? 0 : -1,
-      role: "tab"
-    }, [
-      O(a.$slots, "default")
-    ], 8, Ee));
-  }
-}), Oe = ["id", "aria-labelledby"], ze = /* @__PURE__ */ A({
-  __name: "tabPanel",
-  props: {
-    value: {}
-  },
-  setup(i) {
-    const e = i, t = B(ne);
-    if (!t)
-      throw new Error("List injectable context is not provided");
-    const o = B(se);
-    if (!o)
-      throw new Error("Tabs injectable context is not provided");
-    const n = E(() => e.value === t.value.value), r = o.getIds(e.value);
-    return (f, a) => n.value ? (_(), y("div", {
-      key: 0,
-      id: s(r).panelId,
-      "aria-labelledby": s(r).tabId,
-      tabindex: "0",
-      role: "tabpanel"
-    }, [
-      O(f.$slots, "default")
-    ], 8, Oe)) : N("", !0);
-  }
-}), Re = /* @__PURE__ */ A({
-  __name: "popover",
-  props: {
-    id: {},
-    activatorId: {},
-    direction: { default: "down" },
-    align: { default: "left" },
-    position: { default: "fixed" },
-    closeOnOutsideClick: { type: Boolean, default: !0 },
-    closeOnInsideClick: { type: Boolean, default: !1 },
-    role: { default: "dialog" }
-  },
-  setup(i) {
-    const e = i, t = e.id ?? D("popover"), o = e.activatorId ?? D("popover-activator"), { isOpen: n, toggle: r, open: f, close: a } = Q(
-      `#${o}`,
-      `#${t}`,
-      {
-        direction: e.direction,
-        align: e.align,
-        position: e.position,
-        closeOnOutsideClick: e.closeOnOutsideClick,
-        closeOnInsideClick: e.closeOnInsideClick
-      }
-    ), c = E(() => ({
-      id: o,
-      "aria-controls": n.value ? e.id : void 0,
-      "aria-haspopup": e.role,
-      "aria-expanded": n.value
-    }));
-    return U(ve, {
-      popoverId: t,
-      activatorId: o,
-      role: e.role,
-      isOpen: n,
-      close: a
-    }), (u, m) => O(u.$slots, "default", {
-      attrs: c.value,
-      isOpen: s(n),
-      toggle: s(r),
-      open: s(f),
-      close: s(a)
-    });
-  }
-}), Ce = ["id", "role", "aria-labelledby"], Ue = /* @__PURE__ */ A({
-  __name: "popoverDialog",
-  setup(i) {
-    const e = B(ve);
-    if (!e)
-      throw new Error("Popover injectable context is not provided");
-    function t(o) {
-      switch (o.code) {
-        case "Escape":
-          e.close();
-          break;
-        default:
-          return;
-      }
-      o.preventDefault();
-    }
-    return (o, n) => s(e).isOpen.value ? (_(), y("div", {
-      key: 0,
-      onKeydown: t,
-      id: s(e).popoverId,
-      role: s(e).role,
-      "aria-labelledby": s(e).activatorId,
-      tabindex: "-1"
-    }, [
-      O(o.$slots, "default")
-    ], 40, Ce)) : N("", !0);
-  }
-}), Se = ["id"], We = /* @__PURE__ */ A({
-  inheritAttrs: !1,
-  __name: "tooltip",
-  props: {
-    id: {},
-    text: {},
-    delay: {},
-    direction: { default: "up" }
-  },
-  setup(i) {
-    const e = i, t = Ie(), o = S();
-    let n;
-    const r = e.id ?? D("tooltip"), { isOpen: f } = Q(`[aria-describedby=${r}]`, o, {
-      direction: e.direction,
-      align: "center"
-    });
-    function a() {
-      n = setTimeout(
-        () => {
-          f.value = !0;
-        },
-        typeof e.delay == "string" ? parseInt(e.delay) : e.delay
-      );
-    }
-    function c() {
-      f.value = !1, clearTimeout(n);
-    }
-    function u(d) {
-      d.key === "Escape" && c();
-    }
-    const m = {
-      "aria-describedby": r,
-      onmouseenter: a,
-      onmouseleave: c,
-      onfocus: a,
-      onblur: c,
-      onkeydown: u
-    }, b = new AbortController();
-    return ae(() => {
-      if (t.default) return;
-      const d = document.querySelector(
-        `[aria-describedby=${r}]`
-      );
-      if (!d)
-        throw new Error(`Tooltip activator not found: ${r}`);
-      d.addEventListener("mouseenter", a, {
-        signal: b.signal,
-        passive: !0
-      }), d.addEventListener("mouseleave", c, {
-        signal: b.signal,
-        passive: !0
-      }), d.addEventListener("focus", a, {
-        signal: b.signal,
-        passive: !0
-      }), d.addEventListener("blur", c, {
-        signal: b.signal,
-        passive: !0
-      }), d.addEventListener("keydown", u, {
-        signal: b.signal,
-        passive: !0
-      });
-    }), G(() => {
-      b.abort();
-    }), (d, w) => (_(), y(z, null, [
-      O(d.$slots, "default", { attrs: m }),
-      (_(), te(we, { to: "body" }, [
-        s(f) ? (_(), y("div", de({
-          key: 0,
-          ref_key: "popupEl",
-          ref: o,
-          id: s(r)
-        }, d.$attrs, { role: "tooltip" }), [
-          O(d.$slots, "content", {}, () => [
-            he(_e(d.text), 1)
-          ])
-        ], 16, Se)) : N("", !0)
-      ]))
-    ], 64));
-  }
-}), qe = /* @__PURE__ */ A({
-  __name: "menu",
-  props: /* @__PURE__ */ ie({
-    id: {},
-    activatorId: {},
-    direction: { default: "down" },
-    align: { default: "left" },
-    position: { default: "fixed" }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(i) {
-    const e = i, t = e.id ?? D("menu"), o = e.activatorId ?? D("menu-activator"), n = W(i, "modelValue"), {
-      isMultiselectable: r,
-      activeItem: f,
-      activateFirstItem: a,
-      activateLastItem: c,
-      activateNextItem: u,
-      activatePrevItem: m
-    } = X(n), { isOpen: b, toggle: d, open: w, close: C } = Q(
-      `#${o}`,
-      `#${t}`,
-      {
-        direction: e.direction,
-        align: e.align,
-        position: e.position,
-        closeOnOutsideClick: !0,
-        closeOnInsideClick: !1
-      }
-    );
-    function g(v) {
-      switch (v.code) {
-        case "Space":
-        case "Enter":
-          d(), b.value && H(a);
-          break;
-        case "ArrowUp":
-          w(), H(c);
-          break;
-        case "ArrowDown":
-          w(), H(a);
-          break;
-        default:
-          return;
-      }
-      v.preventDefault();
-    }
-    const k = E(() => ({
-      id: o,
-      "aria-controls": b.value ? t : void 0,
-      "aria-haspopup": "menu",
-      "aria-expanded": b.value,
-      onclick: d,
-      onkeydown: g,
-      tabindex: 0
-    }));
-    return U(re, {
-      menuId: t,
-      activatorId: o,
-      isOpen: b,
-      close: C,
-      isMultiselectable: r,
-      activeItemId: E(() => {
-        var v, $;
-        return ($ = (v = f.value) == null ? void 0 : v.element.value) == null ? void 0 : $.id;
-      }),
-      activateFirstItem: a,
-      activateLastItem: c,
-      activateNextItem: u,
-      activatePrevItem: m
-    }), (v, $) => O(v.$slots, "default", { attrs: k.value });
-  }
-}), Ve = ["id", "aria-activedescendant", "aria-labelledby"], Je = /* @__PURE__ */ A({
-  __name: "menuItems",
-  setup(i) {
-    const e = B(re);
-    if (!e)
-      throw new Error("Menu injectable context is not provided");
-    function t(o) {
-      switch (o.code) {
-        case "ArrowUp":
-          e.activatePrevItem({ focus: !0, loop: !1 });
-          break;
-        case "ArrowDown":
-          e.activateNextItem({ focus: !0, loop: !1 });
-          break;
-        case "Home":
-          e.activateFirstItem({ focus: !0 });
-          break;
-        case "End":
-          e.activateLastItem({ focus: !0 });
-          break;
-        case "Escape":
-          e.close();
-          break;
-        case "Tab":
-          e.isOpen.value = !1;
-          return;
-        default:
-          return;
-      }
-      o.preventDefault();
-    }
-    return (o, n) => s(e).isOpen.value ? (_(), y("div", {
-      key: 0,
-      onKeydown: t,
-      id: s(e).menuId,
-      "aria-activedescendant": s(e).activeItemId.value,
-      "aria-labelledby": s(e).activatorId,
-      role: "menu",
-      tabindex: "-1"
-    }, [
-      O(o.$slots, "default")
-    ], 40, Ve)) : N("", !0);
-  }
-}), Le = ["id", "data-active", "role", "aria-checked", "aria-disabled"], Ge = /* @__PURE__ */ A({
-  __name: "menuItem",
-  props: {
-    id: {},
-    value: {},
-    disabled: { type: Boolean }
-  },
-  emits: ["select"],
-  setup(i, { emit: e }) {
-    const t = i, o = e, n = t.id ?? D("menu-item"), r = S(), { isSelected: f, isActive: a, select: c, activate: u } = Y(
-      r,
-      t.value,
-      t.disabled
-    ), m = B(re);
-    if (!m)
-      throw new Error("Menu injectable context is not provided");
-    const b = E(() => t.value !== void 0 ? m.isMultiselectable.value ? "menuitemcheckbox" : "menuitemradio" : "menuitem");
-    function d() {
-      c(), o("select", t.value);
-    }
-    function w() {
-      d(), (t.value === void 0 || !(m != null && m.isMultiselectable.value)) && m.close();
-    }
-    function C(g) {
-      switch (g.code) {
-        case "Space":
-          d(), t.value === void 0 && m.close();
-          break;
-        case "Enter":
-          d(), m.close();
-          break;
-        default:
-          return;
-      }
-      g.preventDefault();
-    }
-    return (g, k) => (_(), y("div", {
-      ref_key: "itemEl",
-      ref: r,
-      id: s(n),
-      onClick: w,
-      onKeydown: C,
-      onMouseenter: k[0] || (k[0] = (v) => s(u)({ focus: !1 })),
-      "data-active": s(a),
-      role: b.value,
-      "aria-checked": g.value !== void 0 ? s(f) : void 0,
-      "aria-disabled": g.disabled || void 0,
-      tabindex: "-1"
-    }, [
-      O(g.$slots, "default", {
-        isSelected: s(f),
-        isActive: s(a)
-      })
-    ], 40, Le));
-  }
-}), Me = ["name", "value"], ue = /* @__PURE__ */ A({
-  __name: "comboboxHiddenInput",
-  props: {
-    name: {},
-    value: {}
-  },
-  setup(i) {
-    const e = i, t = E(() => {
-      if (typeof e.value == "object") {
-        const o = {};
-        for (const [n, r] of Object.entries(e.value))
-          o[`${e.name}[${n}]`] = r;
-        return o;
-      } else
-        return {
-          [e.name]: e.value
-        };
-    });
-    return (o, n) => (_(!0), y(z, null, fe(t.value, (r, f) => (_(), y("input", {
-      name: f,
-      value: r,
-      type: "hidden"
-    }, null, 8, Me))), 256));
-  }
-}), Qe = /* @__PURE__ */ A({
-  inheritAttrs: !1,
-  __name: "combobox",
-  props: /* @__PURE__ */ ie({
-    displayValue: { type: Function, default: (i) => Array.isArray(i) ? i.map((e) => e.toString()).join(", ") : i.toString() },
-    id: {},
-    activatorId: {},
-    name: {},
-    formValue: { type: Function, default: (i) => i }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(i) {
-    const e = i, t = E(() => w.value ? o.value.map((I) => e.formValue(I)) : e.formValue(o.value)), o = W(i, "modelValue"), n = e.id ?? D("combobox"), r = e.activatorId ?? n, f = `${n}-popover`, { isOpen: a, toggle: c, open: u, close: m } = Q(
-      `#${r}`,
-      `#${f}`,
-      {
-        direction: "down",
-        align: "stretch",
-        position: "fixed",
-        closeOnOutsideClick: !0,
-        closeOnInsideClick: !1
-      }
-    ), {
-      items: b,
-      activeItem: d,
-      isMultiselectable: w,
-      selectActiveItem: C,
-      activateSelectedItem: g,
-      activateFirstItem: k,
-      activateLastItem: v,
-      activateNextItem: $,
-      activatePrevItem: j
-    } = X(o), l = E(() => e.displayValue(o.value));
-    oe(b, () => {
-      !d.value && b.value.length && (g({ focus: !1 }), d.value || k({ focus: !1 }));
-    });
-    function p() {
-      var L;
-      (L = R(`#${r}`).value) == null || L.focus();
-    }
-    function h(I) {
-      if (a.value)
-        switch (I.code) {
-          case "Space":
-            C(), w.value || m({ focus: !0 });
-            break;
-          case "Enter":
-            C(), m({ focus: !0 });
-            break;
-          case "Tab":
-            C(), m({ focus: !0 });
-            return;
-          case "ArrowUp":
-            j({ focus: !1, loop: !1 });
-            break;
-          case "ArrowDown":
-            $({ focus: !1, loop: !1 });
-            break;
-          case "Home":
-            k({ focus: !1 });
-            break;
-          case "End":
-            v({ focus: !1 });
-            break;
-          case "Escape":
-            m({ focus: !0 });
-            break;
-          default:
-            return;
-        }
-      else
-        switch (I.code) {
-          case "Space":
-          case "Enter":
-            u({ focus: !1 });
-            break;
-          case "End":
-          case "ArrowUp":
-            u({ focus: !1 }), H(() => v({ focus: !1 }));
-            break;
-          case "Home":
-          case "ArrowDown":
-            u({ focus: !1 }), H(() => k({ focus: !1 }));
-            break;
-          default:
-            return;
-        }
-      I.preventDefault();
-    }
-    const x = E(() => {
-      var I, L;
-      return {
-        onkeydown: h,
-        onclick: () => u({ focus: !1 }),
-        id: n,
-        "aria-controls": a.value ? f : void 0,
-        "aria-expanded": a.value,
-        "aria-activedescendant": (L = (I = d.value) == null ? void 0 : I.element.value) == null ? void 0 : L.id,
-        "aria-haspopup": "listbox",
-        role: "combobox"
-      };
-    });
-    return U(Z, {
-      displayValue: l,
-      popoverId: f,
-      isOpen: a,
-      open: u,
-      close: m,
-      focus: p,
-      isMultiselectable: w,
-      activatorAttrs: x
-    }), (I, L) => (_(), y(z, null, [
-      I.name ? (_(), y(z, { key: 0 }, [
-        s(w) ? (_(!0), y(z, { key: 0 }, fe(t.value, (F, K) => (_(), te(ue, {
-          name: `${I.name}[${K}]`,
-          value: F
-        }, null, 8, ["name", "value"]))), 256)) : (_(), te(ue, {
-          key: 1,
-          name: I.name,
-          value: t.value
-        }, null, 8, ["name", "value"]))
-      ], 64)) : N("", !0),
-      O(I.$slots, "default", {
-        popoverId: f,
-        isOpen: s(a),
-        toggle: s(c),
-        displayValue: l.value,
-        attrs: x.value
-      })
-    ], 64));
-  }
-}), Xe = /* @__PURE__ */ A({
-  __name: "comboboxInput",
-  props: {
-    modelValue: {},
-    modelModifiers: {}
-  },
-  emits: ["update:modelValue"],
-  setup(i) {
-    const e = B(Z);
-    if (!e)
-      throw new Error("Combobox injectable context is not provided");
-    const t = W(i, "modelValue");
-    function o() {
-      t.value = e.displayValue.value;
-    }
-    oe(e.displayValue, o, { immediate: !0 });
-    const n = E(() => ({
-      oninput: () => e.open({ focus: !0 }),
-      onchange: o,
-      ...e.activatorAttrs.value
-    }));
-    return (r, f) => ge((_(), y("input", de({
-      "onUpdate:modelValue": f[0] || (f[0] = (a) => t.value = a)
-    }, n.value, { autocomplete: "off" }), null, 16)), [
-      [ye, t.value]
-    ]);
-  }
-}), De = ["id"], Ye = /* @__PURE__ */ A({
-  __name: "comboboxOptions",
-  setup(i) {
-    const e = B(Z);
-    if (!e)
-      throw new Error("Combobox injectable context is not provided");
-    return (t, o) => s(e).isOpen.value ? (_(), y("div", {
-      key: 0,
-      id: s(e).popoverId,
-      role: "listbox"
-    }, [
-      O(t.$slots, "default")
-    ], 8, De)) : N("", !0);
-  }
-}), je = ["id", "data-active", "aria-selected", "aria-disabled"], Ze = /* @__PURE__ */ A({
-  __name: "comboboxOption",
-  props: {
-    id: {},
-    value: {},
-    disabled: { type: Boolean }
-  },
-  setup(i) {
-    const e = i, t = e.id ?? D("combobox-option"), o = S(), { isSelected: n, isActive: r, activate: f, select: a } = Y(
-      o,
-      e.value,
-      e.disabled
-    ), c = B(Z);
-    if (!c)
-      throw new Error("Combobox injectable context is not provided");
-    function u() {
-      a(), c.isMultiselectable.value ? c.focus() : c.close({ focus: !0 });
-    }
-    return (m, b) => (_(), y("div", {
-      ref_key: "itemEl",
-      ref: o,
-      id: s(t),
-      onClick: u,
-      onMouseenter: b[0] || (b[0] = (d) => s(f)({ focus: !1 })),
-      "data-active": s(r),
-      "aria-selected": s(n),
-      "aria-disabled": m.disabled || void 0,
-      role: "option"
-    }, [
-      O(m.$slots, "default", {
-        isSelected: s(n),
-        isActive: s(r)
-      })
-    ], 40, je));
-  }
-});
+import { usePopover as e } from "./composable-ui21.js";
+import { useList as p } from "./composable-ui22.js";
+import { useListOption as s } from "./composable-ui17.js";
+import { useFormControl as a } from "./composable-ui2.js";
+import { useHTMLElement as n } from "./composable-ui23.js";
+import { injectCombobox as i, injectMenu as _, injectPopover as u, injectTabs as C } from "./composable-ui24.js";
+import { _ as L } from "./listbox.vue_vue_type_script_setup_true_lang-Bj1ZXiBX.js";
+import { _ as M } from "./listboxOption.vue_vue_type_script_setup_true_lang-B_yRptJm.js";
+import { _ as c } from "./tabContainer.vue_vue_type_script_setup_true_lang-fPpLno2Z.js";
+import { _ as v } from "./tabList.vue_vue_type_script_setup_true_lang-CZyqGCuj.js";
+import { _ as I } from "./tab.vue_vue_type_script_setup_true_lang-Y5OFGqMB.js";
+import { _ as D } from "./tabPanel.vue_vue_type_script_setup_true_lang-CGhP6SHR.js";
+import { _ as F } from "./popover.vue_vue_type_script_setup_true_lang-DhKF7_nY.js";
+import { _ as d } from "./popoverDialog.vue_vue_type_script_setup_true_lang-CDXUO7wZ.js";
+import { _ as k } from "./tooltip.vue_vue_type_script_setup_true_lang-DVKYJyfL.js";
+import { _ as w } from "./menu.vue_vue_type_script_setup_true_lang-Ci7q2rOg.js";
+import { _ as z } from "./menuItems.vue_vue_type_script_setup_true_lang-p9vftREy.js";
+import { _ as B } from "./menuItem.vue_vue_type_script_setup_true_lang-mXtMa4gO.js";
+import { _ as J } from "./combobox.vue_vue_type_script_setup_true_lang-BhVMcx67.js";
+import { _ as N } from "./comboboxInput.vue_vue_type_script_setup_true_lang-DzRfJ5ke.js";
+import { _ as R } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-Doy6MfEQ.js";
+import { _ as U } from "./comboboxOption.vue_vue_type_script_setup_true_lang-OyJxB4Jk.js";
 export {
-  Qe as Combobox,
-  Xe as ComboboxInput,
-  Ze as ComboboxOption,
-  Ye as ComboboxOptions,
-  Be as Listbox,
-  Fe as ListboxOption,
-  qe as Menu,
-  Ge as MenuItem,
-  Je as MenuItems,
-  Re as Popover,
-  Ue as PopoverDialog,
-  Ne as Tab,
-  He as TabContainer,
-  Ke as TabList,
-  ze as TabPanel,
-  We as Tooltip,
-  Z as injectCombobox,
-  re as injectMenu,
-  ve as injectPopover,
-  se as injectTabs,
-  Te as useFormControl,
-  R as useHTMLElement,
-  X as useList,
-  Y as useListOption,
-  Q as usePopover,
-  D as useSequentialId
+  J as Combobox,
+  N as ComboboxInput,
+  U as ComboboxOption,
+  R as ComboboxOptions,
+  L as Listbox,
+  M as ListboxOption,
+  w as Menu,
+  B as MenuItem,
+  z as MenuItems,
+  F as Popover,
+  d as PopoverDialog,
+  I as Tab,
+  c as TabContainer,
+  v as TabList,
+  D as TabPanel,
+  k as Tooltip,
+  i as injectCombobox,
+  _ as injectMenu,
+  u as injectPopover,
+  C as injectTabs,
+  a as useFormControl,
+  n as useHTMLElement,
+  p as useList,
+  s as useListOption,
+  e as usePopover
 };