vue-composable-ui 1.0.1 → 1.0.2

package/dist/composable-ui10.js

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

package/dist/composable-ui11.js

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

package/dist/composable-ui12.js

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

package/dist/composable-ui13.js

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

package/dist/composable-ui14.js

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

package/dist/composable-ui15.js

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

package/dist/composable-ui16.js

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

package/dist/composable-ui17.js

@@ -0,0 +1,31 @@
+import { inject as l, ref as d, computed as n, onMounted as f, onUnmounted as p, unref as I } from "vue";
+import { injectList as j } from "./composable-ui22.js";
+function S(c, o, i) {
+  const e = l(j);
+  if (!e)
+    throw new Error("List injectable context is not provided");
+  const t = d(-1), r = n(() => e.isSelected(t.value)), u = n(() => e.isActive(t.value));
+  function s() {
+    e.selectItem(t.value);
+  }
+  function a({ focus: m = !0 } = {}) {
+    I(i) || e.activateItem(t.value, { focus: m });
+  }
+  function v() {
+    e.deactivateItem();
+  }
+  return f(() => {
+    t.value = e.addItem(c, o, i);
+  }), p(() => {
+    e.removeItem(t.value);
+  }), {
+    isSelected: r,
+    isActive: u,
+    select: s,
+    activate: a,
+    deactivate: v
+  };
+}
+export {
+  S as useListOption
+};

package/dist/composable-ui18.js

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

package/dist/composable-ui19.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js";
+export {
+  f as default
+};

package/dist/composable-ui2.js

@@ -0,0 +1,55 @@
+import { ref as t, onMounted as V, onBeforeUnmount as M, readonly as m, unref as g } from "vue";
+import { useHTMLElement as b } from "./composable-ui23.js";
+function k(y, h = [], w = !0) {
+  const a = t(!1), n = t(!0), l = t(), r = t("");
+  let e, u;
+  function s() {
+    e?.focus();
+  }
+  function d() {
+    n.value = e.validity.valid, l.value = e.validity, r.value = e.validationMessage;
+  }
+  function f() {
+    if (!e) throw new Error("Form element is undefined");
+    const o = e.value;
+    for (const p of g(h)) {
+      const c = p(o);
+      if (c !== !0) {
+        e.setCustomValidity(c);
+        break;
+      }
+    }
+  }
+  function v() {
+    if (!e) throw new Error("Form element is undefined");
+    return e.setCustomValidity(""), e.validity.valid && f(), d(), n.value;
+  }
+  function C(o) {
+    d(), g(w) || o.preventDefault();
+  }
+  function E() {
+    v(), a.value = u !== e.value;
+  }
+  let i = new AbortController();
+  return V(() => {
+    if (e = b(y).value, !e) throw new Error("Form element is undefined");
+    f(), u = e.value, e.addEventListener("change", E, {
+      signal: i.signal,
+      passive: !0
+    }), e.addEventListener("invalid", C, {
+      signal: i.signal
+    }), e?.autofocus && s();
+  }), M(() => {
+    i.abort();
+  }), {
+    focus: s,
+    validate: v,
+    isValid: n,
+    validity: m(l),
+    validationMessage: m(r),
+    isChanged: a
+  };
+}
+export {
+  k as useFormControl
+};

package/dist/composable-ui20.js

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

package/dist/composable-ui21.js

@@ -0,0 +1,100 @@
+import { ref as _, watch as M, nextTick as k, onMounted as F, onBeforeUnmount as U } from "vue";
+import { useHTMLElement as y } from "./composable-ui23.js";
+function D(z, A, {
+  direction: c = "down",
+  align: p = "left",
+  position: W = "fixed",
+  closeOnOutsideClick: B = !0,
+  closeOnInsideClick: O = !1
+} = {}) {
+  const s = _(!1);
+  function v() {
+    const t = y(z);
+    if (!t.value) throw new Error("Activator element is undefined");
+    return t.value;
+  }
+  function $() {
+    const t = y(A);
+    if (!t.value) throw new Error("Popover element is undefined");
+    return t.value;
+  }
+  function L({ focus: t = !0 } = {}) {
+    s.value = !0, t && k(() => {
+      $().focus();
+    });
+  }
+  function E({ focus: t = !0 } = {}) {
+    s.value = !1, t && v().focus();
+  }
+  function R(t) {
+    s.value ? E(t) : L(t);
+  }
+  function h() {
+    if (!s.value) return;
+    const t = v(), r = $();
+    r.style.position = W;
+    const {
+      top: f,
+      right: l,
+      bottom: w,
+      left: u,
+      width: m,
+      height: H
+    } = t.getBoundingClientRect(), a = r.offsetHeight, d = r.offsetWidth, x = document.documentElement.clientHeight, b = document.documentElement.clientWidth;
+    let i = c;
+    c == "up" ? f - a < 0 && (i = "down") : c == "down" ? w + a > x && (i = "up") : c == "right" ? l + d > b && (i = "left") : c == "left" && u - d < 0 && (i = "right");
+    let o = p;
+    p == "left" ? u + d > b && (o = "right") : p == "right" ? l - d < 0 && (o = "left") : p == "top" ? f + a > x && (o = "bottom") : p == "bottom" && w - a < 0 && (o = "top");
+    const e = {
+      top: "auto",
+      bottom: "auto",
+      left: "auto",
+      right: "auto",
+      width: "auto"
+    }, n = W === "fixed";
+    i == "up" ? e.bottom = `${H + (n ? x - w : 0)}px` : i == "down" ? e.top = `${H + (n ? f : 0)}px` : i == "right" ? e.left = `${m + (n ? u : 0)}px` : i == "left" && (e.right = `${m + (n ? b - l : 0)}px`), ["up", "down"].includes(i) ? o == "right" ? e.right = `${n ? b - l : 0}px` : o == "left" || o == "stretch" ? e.left = `${n ? u : 0}px` : o == "center" && (e.left = `${(n ? u : 0) - (d - m) / 2}px`) : o == "bottom" ? e.bottom = `${n ? x - w : 0}px` : o == "top" ? e.top = `${n ? f : 0}px` : o == "center" && (e.top = `${(n ? f : 0) - (a - H) / 2}px`), ["up", "down"].includes(i) && o === "stretch" && (e.width = m + "px");
+    for (const P in e)
+      r.style[P] = e[P];
+  }
+  M(
+    s,
+    (t) => {
+      t && k(() => {
+        h();
+      });
+    },
+    { flush: "pre" }
+  );
+  function T(t) {
+    const r = t.target;
+    if (!v().contains(r))
+      try {
+        $().contains(r) ? O && E() : B && (s.value = !1);
+      } catch {
+      }
+  }
+  const C = new ResizeObserver(h), g = new AbortController();
+  return F(() => {
+    window.addEventListener("resize", h, {
+      passive: !0,
+      signal: g.signal
+    }), window.addEventListener("scroll", h, {
+      passive: !0,
+      //capture: true,
+      signal: g.signal
+    }), window.addEventListener("click", T, {
+      passive: !0,
+      signal: g.signal
+    }), C.observe(v());
+  }), U(() => {
+    g.abort(), C.disconnect();
+  }), {
+    isOpen: s,
+    open: L,
+    close: E,
+    toggle: R
+  };
+}
+export {
+  D as usePopover
+};

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 _
+};