vue-composable-ui 0.0.1 → 1.0.2

package/dist/composable-ui22.js

@@ -0,0 +1,144 @@
+import { shallowRef as N, ref as R, computed as g, provide as B, readonly as h, shallowReadonly as J, triggerRef as S, unref as s } from "vue";
+import { useHTMLElement as _ } from "./composable-ui23.js";
+const q = Symbol();
+function d(r, c) {
+  const [n, l] = [s(r), s(c)];
+  return typeof n == "object" ? typeof l == "object" ? JSON.stringify(n) === JSON.stringify(l) : !1 : n === l;
+}
+function P(r) {
+  let c = 0;
+  const n = N([]), l = R(), v = g(() => Array.isArray(r.value));
+  function o(e) {
+    const t = n.value.find((i) => i.id === e);
+    if (!t) throw new Error(`Item not found: (${e})`);
+    return t;
+  }
+  function b(e) {
+    const t = s(e.element);
+    if (t)
+      return t.focus(), t;
+  }
+  function f(e, { focus: t = !1 } = {}) {
+    l.value = e?.id ?? void 0, e !== void 0 && t && b(e);
+  }
+  function O(e, { focus: t = !1 } = {}) {
+    const i = o(e);
+    return f(i, { focus: t });
+  }
+  function m(e) {
+    return l.value === e;
+  }
+  function w(e, t, i = !1) {
+    const a = _(e), u = c++;
+    return n.value.push({
+      id: u,
+      value: t,
+      element: a,
+      disabled: i
+    }), S(n), u;
+  }
+  function A(e) {
+    m(e) && f();
+    const t = o(e), i = n.value.indexOf(t);
+    n.value.splice(i, 1), S(n);
+  }
+  function I(e) {
+    const t = o(e);
+    if (s(t.disabled)) return;
+    const i = s(t.value);
+    if (i !== void 0) {
+      if (s(v)) {
+        const a = r.value.findIndex(
+          (u) => d(i, u)
+        );
+        a > -1 ? r.value.splice(a, 1) : r.value = [...r.value, i];
+      } else
+        r.value = i;
+      f(t);
+    }
+  }
+  function y(e) {
+    return s(v) ? !!r.value.find(
+      (t) => d(e.value, t)
+    ) : d(r, e.value);
+  }
+  function L(e) {
+    try {
+      const t = o(e);
+      return y(t);
+    } catch {
+      return !1;
+    }
+  }
+  function j({ focus: e = !1 } = {}) {
+    for (let t of n.value)
+      if (y(t))
+        return f(t, { focus: e });
+  }
+  function p({ focus: e = !1 } = {}) {
+    if (n.value.length)
+      return f(n.value[0], { focus: e });
+  }
+  function x({ focus: e = !1 } = {}) {
+    if (n.value.length)
+      return f(n.value[n.value.length - 1], { focus: e });
+  }
+  function E({
+    focus: e = !1,
+    loop: t = !1
+  } = {}) {
+    if (l.value === void 0) return p({ focus: e });
+    const i = o(l.value), a = n.value.indexOf(i);
+    let u;
+    if (a + 1 < n.value.length)
+      u = n.value[a + 1];
+    else if (t)
+      u = n.value[0];
+    else
+      return;
+    return f(u, { focus: e });
+  }
+  function M({
+    focus: e = !1,
+    loop: t = !1
+  } = {}) {
+    if (l.value === void 0) return x({ focus: e });
+    const i = o(l.value), a = n.value.indexOf(i);
+    let u;
+    if (a - 1 > -1)
+      u = n.value[a - 1];
+    else if (t)
+      u = n.value[n.value.length - 1];
+    else
+      return;
+    return f(u, { focus: e });
+  }
+  return B(q, {
+    value: h(r),
+    selectItem: I,
+    activateItem: O,
+    deactivateItem: () => f(),
+    isSelected: L,
+    isActive: m,
+    addItem: w,
+    removeItem: A
+  }), {
+    items: J(n),
+    isMultiselectable: h(v),
+    activeItem: g(
+      () => l.value !== void 0 ? o(l.value) : void 0
+    ),
+    selectActiveItem: () => {
+      l.value !== void 0 && I(l.value);
+    },
+    activateSelectedItem: j,
+    activateFirstItem: p,
+    activateLastItem: x,
+    activateNextItem: E,
+    activatePrevItem: M
+  };
+}
+export {
+  q as injectList,
+  P as useList
+};

package/dist/composable-ui23.js

@@ -0,0 +1,7 @@
+import { ref as r } from "vue";
+function n(e) {
+  return typeof e == "string" ? r(document.querySelector(e)) : e instanceof HTMLElement ? r(e) : e;
+}
+export {
+  n as useHTMLElement
+};

package/dist/composable-ui24.js

@@ -0,0 +1,7 @@
+const o = Symbol(), n = Symbol(), t = Symbol(), c = Symbol();
+export {
+  c as injectCombobox,
+  t as injectMenu,
+  n as injectPopover,
+  o as injectTabs
+};

package/dist/composable-ui3.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./tooltip.vue_vue_type_script_setup_true_lang-DVKYJyfL.js";
+export {
+  f as default
+};

package/dist/composable-ui4.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./tabPanel.vue_vue_type_script_setup_true_lang-CGhP6SHR.js";
+export {
+  f as default
+};

package/dist/composable-ui5.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./tabList.vue_vue_type_script_setup_true_lang-CZyqGCuj.js";
+export {
+  f as default
+};

package/dist/composable-ui6.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./tabContainer.vue_vue_type_script_setup_true_lang-fPpLno2Z.js";
+export {
+  f as default
+};

package/dist/composable-ui7.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./tab.vue_vue_type_script_setup_true_lang-Y5OFGqMB.js";
+export {
+  f as default
+};

package/dist/composable-ui8.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./popoverDialog.vue_vue_type_script_setup_true_lang-CDXUO7wZ.js";
+export {
+  f as default
+};

package/dist/composable-ui9.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./popover.vue_vue_type_script_setup_true_lang-DhKF7_nY.js";
+export {
+  f as default
+};

package/dist/listbox.vue_vue_type_script_setup_true_lang-Bj1ZXiBX.js

@@ -0,0 +1,69 @@
+import { defineComponent as m, mergeModels as p, useModel as v, computed as b, createElementBlock as k, openBlock as w, unref as I, renderSlot as h } from "vue";
+import { useList as A } from "./composable-ui22.js";
+const _ = ["aria-activedescendant", "aria-orientation", "aria-multiselectable"], B = /* @__PURE__ */ m({
+  __name: "listbox",
+  props: /* @__PURE__ */ p({
+    orientation: { default: "vertical" },
+    loop: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = i, n = v(i, "modelValue"), {
+      isMultiselectable: t,
+      activeItem: s,
+      selectActiveItem: o,
+      activateFirstItem: c,
+      activateLastItem: u,
+      activateNextItem: r,
+      activatePrevItem: l
+    } = A(n), f = b(() => s.value?.element.value?.id);
+    function d(a) {
+      switch (a.code) {
+        case "Space":
+          o();
+          break;
+        case "ArrowUp":
+          if (e.orientation === "horizontal") return;
+          l({ focus: !1, loop: e.loop }), t.value || o();
+          break;
+        case "ArrowDown":
+          if (e.orientation === "horizontal") return;
+          r({ focus: !1, loop: e.loop }), t.value || o();
+          break;
+        case "ArrowLeft":
+          if (e.orientation === "vertical") return;
+          l({ focus: !1, loop: e.loop }), t.value || o();
+          break;
+        case "ArrowRight":
+          if (e.orientation === "vertical") return;
+          r({ focus: !1, loop: e.loop }), t.value || o();
+          break;
+        case "Home":
+          c({ focus: !1 });
+          break;
+        case "End":
+          u({ focus: !1 });
+          break;
+        default:
+          return;
+      }
+      a.preventDefault();
+    }
+    return (a, x) => (w(), k("div", {
+      onKeydown: d,
+      "aria-activedescendant": f.value,
+      "aria-orientation": a.orientation,
+      "aria-multiselectable": I(t),
+      role: "listbox",
+      tabindex: "0"
+    }, [
+      h(a.$slots, "default")
+    ], 40, _));
+  }
+});
+export {
+  B as _
+};

package/dist/listboxOption.vue_vue_type_script_setup_true_lang-B_yRptJm.js

@@ -0,0 +1,37 @@
+import { defineComponent as p, useId as m, useTemplateRef as u, createElementBlock as f, openBlock as b, unref as e, renderSlot as v } from "vue";
+import { useListOption as _ } from "./composable-ui17.js";
+const k = ["id", "aria-disabled", "aria-selected", "data-active"], S = /* @__PURE__ */ p({
+  __name: "listboxOption",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean }
+  },
+  setup(n) {
+    const t = n, r = t.id ?? m(), i = u("itemEl"), { isSelected: s, isActive: o, select: a } = _(
+      i,
+      t.value,
+      t.disabled
+    );
+    return (d, l) => (b(), f("div", {
+      ref_key: "itemEl",
+      ref: i,
+      id: e(r),
+      onClick: l[0] || (l[0] = //@ts-ignore
+      (...c) => e(a) && e(a)(...c)),
+      "aria-disabled": d.disabled,
+      "aria-selected": e(s),
+      "data-active": e(o),
+      role: "option",
+      tabindex: "-1"
+    }, [
+      v(d.$slots, "default", {
+        isSelected: e(s),
+        isActive: e(o)
+      })
+    ], 8, k));
+  }
+});
+export {
+  S as _
+};

package/dist/menu.vue_vue_type_script_setup_true_lang-Ci7q2rOg.js

@@ -0,0 +1,82 @@
+import { defineComponent as b, mergeModels as M, useId as u, useModel as O, computed as m, provide as A, renderSlot as _, unref as h, nextTick as r } from "vue";
+import { usePopover as C } from "./composable-ui21.js";
+import { useList as D } from "./composable-ui22.js";
+import { injectMenu as V } from "./composable-ui24.js";
+const j = /* @__PURE__ */ b({
+  __name: "menu",
+  props: /* @__PURE__ */ M({
+    id: {},
+    activatorId: {},
+    direction: { default: "down" },
+    align: { default: "left" },
+    position: { default: "fixed" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(s) {
+    const e = s, a = e.id ?? u(), i = e.activatorId ?? u(), p = O(s, "modelValue"), {
+      isMultiselectable: v,
+      activeItem: f,
+      activateFirstItem: n,
+      activateLastItem: c,
+      activateNextItem: I,
+      activatePrevItem: k
+    } = D(p), { isOpen: t, toggle: d, open: l, close: w } = C(
+      `#${i}`,
+      `#${a}`,
+      {
+        direction: e.direction,
+        align: e.align,
+        position: e.position,
+        closeOnOutsideClick: !0,
+        closeOnInsideClick: !1
+      }
+    );
+    function g(o) {
+      switch (o.code) {
+        case "Space":
+        case "Enter":
+          d(), t.value && r(n);
+          break;
+        case "ArrowUp":
+          l(), r(c);
+          break;
+        case "ArrowDown":
+          l(), r(n);
+          break;
+        default:
+          return;
+      }
+      o.preventDefault();
+    }
+    const x = m(() => ({
+      id: i,
+      "aria-controls": t.value ? a : void 0,
+      "aria-haspopup": "menu",
+      "aria-expanded": t.value,
+      onclick: () => d(),
+      onkeydown: g,
+      tabindex: 0
+    }));
+    return A(V, {
+      menuId: a,
+      activatorId: i,
+      isOpen: t,
+      close: w,
+      isMultiselectable: v,
+      activeItemId: m(() => f.value?.element.value?.id),
+      activateFirstItem: n,
+      activateLastItem: c,
+      activateNextItem: I,
+      activatePrevItem: k
+    }), (o, $) => _(o.$slots, "default", {
+      attrs: x.value,
+      isOpen: h(t)
+    });
+  }
+});
+export {
+  j as _
+};

package/dist/menuItem.vue_vue_type_script_setup_true_lang-mXtMa4gO.js

@@ -0,0 +1,63 @@
+import { defineComponent as w, useId as y, useTemplateRef as S, inject as h, computed as j, createElementBlock as A, openBlock as B, unref as t, renderSlot as I } from "vue";
+import { useListOption as _ } from "./composable-ui17.js";
+import { injectMenu as $ } from "./composable-ui24.js";
+const x = ["id", "data-active", "role", "aria-checked", "aria-disabled"], L = /* @__PURE__ */ w({
+  __name: "menuItem",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["select"],
+  setup(d, { emit: r }) {
+    const e = d, u = r, m = e.id ?? y(), l = S("itemEl"), { isSelected: s, isActive: c, select: v, activate: f, deactivate: p } = _(
+      l,
+      e.value,
+      e.disabled
+    ), i = h($);
+    if (!i)
+      throw new Error("Menu injectable context is not provided");
+    const b = j(() => e.value !== void 0 ? i.isMultiselectable.value ? "menuitemcheckbox" : "menuitemradio" : "menuitem");
+    function a() {
+      v(), u("select", e.value);
+    }
+    function k() {
+      a(), (e.value === void 0 || !i?.isMultiselectable.value) && i.close();
+    }
+    function E(o) {
+      switch (o.code) {
+        case "Space":
+          a(), e.value === void 0 && i.close();
+          break;
+        case "Enter":
+          a(), i.close();
+          break;
+        default:
+          return;
+      }
+      o.preventDefault();
+    }
+    return (o, n) => (B(), A("div", {
+      ref_key: "itemEl",
+      ref: l,
+      id: t(m),
+      onClick: k,
+      onKeydown: E,
+      onMouseenter: n[0] || (n[0] = (M) => t(f)({ focus: !1 })),
+      onMouseleave: n[1] || (n[1] = (M) => t(p)()),
+      "data-active": t(c),
+      role: b.value,
+      "aria-checked": o.value !== void 0 ? t(s) : void 0,
+      "aria-disabled": o.disabled || void 0,
+      tabindex: "-1"
+    }, [
+      I(o.$slots, "default", {
+        isSelected: t(s),
+        isActive: t(c)
+      })
+    ], 40, x));
+  }
+});
+export {
+  L as _
+};

package/dist/menuItems.vue_vue_type_script_setup_true_lang-p9vftREy.js

@@ -0,0 +1,49 @@
+import { defineComponent as n, inject as o, createElementBlock as c, createCommentVNode as s, unref as a, openBlock as i, renderSlot as u } from "vue";
+import { injectMenu as l } from "./composable-ui24.js";
+const d = ["id", "aria-activedescendant", "aria-labelledby"], b = /* @__PURE__ */ n({
+  __name: "menuItems",
+  setup(m) {
+    const e = o(l);
+    if (!e)
+      throw new Error("Menu injectable context is not provided");
+    function r(t) {
+      switch (t.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;
+      }
+      t.preventDefault();
+    }
+    return (t, f) => a(e).isOpen.value ? (i(), c("div", {
+      key: 0,
+      onKeydown: r,
+      id: a(e).menuId,
+      "aria-activedescendant": a(e).activeItemId.value,
+      "aria-labelledby": a(e).activatorId,
+      role: "menu",
+      tabindex: "-1"
+    }, [
+      u(t.$slots, "default")
+    ], 40, d)) : s("", !0);
+  }
+});
+export {
+  b as _
+};

package/dist/popover.vue_vue_type_script_setup_true_lang-DhKF7_nY.js

@@ -0,0 +1,50 @@
+import { defineComponent as u, useId as r, computed as f, provide as v, renderSlot as O, unref as t } from "vue";
+import { usePopover as m } from "./composable-ui21.js";
+import { injectPopover as g } from "./composable-ui24.js";
+const x = /* @__PURE__ */ u({
+  __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(s) {
+    const e = s, n = e.id ?? r(), i = e.activatorId ?? r(), { isOpen: o, toggle: a, open: d, close: l } = m(
+      `#${i}`,
+      `#${n}`,
+      {
+        direction: e.direction,
+        align: e.align,
+        position: e.position,
+        closeOnOutsideClick: e.closeOnOutsideClick,
+        closeOnInsideClick: e.closeOnInsideClick
+      }
+    ), c = f(() => ({
+      id: i,
+      "aria-controls": o.value ? e.id : void 0,
+      "aria-haspopup": e.role,
+      "aria-expanded": o.value
+    }));
+    return v(g, {
+      popoverId: n,
+      activatorId: i,
+      role: e.role,
+      isOpen: o,
+      close: l
+    }), (p, I) => O(p.$slots, "default", {
+      attrs: c.value,
+      isOpen: t(o),
+      toggle: () => t(a)(),
+      open: () => t(d)(),
+      close: () => t(l)()
+    });
+  }
+});
+export {
+  x as _
+};

package/dist/popoverDialog.vue_vue_type_script_setup_true_lang-CDXUO7wZ.js

@@ -0,0 +1,33 @@
+import { defineComponent as n, inject as a, createElementBlock as i, createCommentVNode as c, unref as r, openBlock as l, renderSlot as p } from "vue";
+import { injectPopover as d } from "./composable-ui24.js";
+const s = ["id", "role", "aria-labelledby"], v = /* @__PURE__ */ n({
+  __name: "popoverDialog",
+  setup(u) {
+    const e = a(d);
+    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, f) => r(e).isOpen.value ? (l(), i("div", {
+      key: 0,
+      onKeydown: t,
+      id: r(e).popoverId,
+      role: r(e).role,
+      "aria-labelledby": r(e).activatorId,
+      tabindex: "-1"
+    }, [
+      p(o.$slots, "default")
+    ], 40, s)) : c("", !0);
+  }
+});
+export {
+  v as _
+};

package/dist/tab.vue_vue_type_script_setup_true_lang-Y5OFGqMB.js

@@ -0,0 +1,29 @@
+import { defineComponent as u, useTemplateRef as b, useId as s, createElementBlock as f, openBlock as m, unref as e, renderSlot as _ } from "vue";
+import { useListOption as k } from "./composable-ui17.js";
+const C = ["id", "aria-selected", "aria-controls", "tabindex"], v = /* @__PURE__ */ u({
+  __name: "tab",
+  props: {
+    id: {},
+    ariaControls: {},
+    value: {}
+  },
+  setup(i) {
+    const t = i, o = b("tab"), { isSelected: a, select: n } = k(o, t.value), l = t.id ?? s(), c = t.ariaControls ?? s();
+    return (d, r) => (m(), f("button", {
+      ref_key: "tab",
+      ref: o,
+      onClick: r[0] || (r[0] = //@ts-ignore
+      (...p) => e(n) && e(n)(...p)),
+      id: e(l),
+      "aria-selected": e(a),
+      "aria-controls": e(c),
+      tabindex: e(a) ? 0 : -1,
+      role: "tab"
+    }, [
+      _(d.$slots, "default")
+    ], 8, C));
+  }
+});
+export {
+  v as _
+};

package/dist/tabContainer.vue_vue_type_script_setup_true_lang-fPpLno2Z.js

@@ -0,0 +1,40 @@
+import { defineComponent as c, useModel as u, provide as v, computed as p, createElementBlock as f, openBlock as I, renderSlot as _ } from "vue";
+import { useList as b } from "./composable-ui22.js";
+import { injectTabs as g } from "./composable-ui24.js";
+const x = /* @__PURE__ */ c({
+  __name: "tabContainer",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(o) {
+    const a = u(o, "modelValue"), {
+      items: i,
+      selectActiveItem: l,
+      activateFirstItem: m,
+      activateLastItem: r,
+      activateNextItem: n,
+      activatePrevItem: s
+    } = b(a);
+    return v(g, {
+      getIds: (e) => p(() => {
+        const t = i.value.find((d) => d.value === e);
+        return {
+          tabId: t?.element.value?.getAttribute("id") || void 0,
+          panelId: t?.element.value?.getAttribute("aria-controls") || void 0
+        };
+      }),
+      selectActiveItem: l,
+      activateFirstItem: m,
+      activateLastItem: r,
+      activateNextItem: n,
+      activatePrevItem: s
+    }), (e, t) => (I(), f("div", null, [
+      _(e.$slots, "default")
+    ]));
+  }
+});
+export {
+  x as _
+};