vue-composable-ui 1.1.5 → 1.3.0

package/dist/combobox.vue_vue_type_script_setup_true_lang-CFyb8irG.js

@@ -0,0 +1,144 @@
+import { defineComponent as R, computed as o, useModel as T, useId as U, shallowRef as _, ref as q, watch as z, provide as G, openBlock as c, createElementBlock as p, Fragment as b, unref as k, renderList as J, createBlock as x, createCommentVNode as Q, renderSlot as W, mergeModels as X, nextTick as A } from "vue";
+import { toElement as O } from "./composable-ui24.js";
+import { usePopover as Y } from "./composable-ui23.js";
+import { useList as Z } from "./composable-ui22.js";
+import { _ as S } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-BtODyQnH.js";
+import { injectCombobox as ee } from "./composable-ui19.js";
+const ne = /* @__PURE__ */ R({
+  inheritAttrs: !1,
+  __name: "combobox",
+  props: /* @__PURE__ */ X({
+    displayValue: { type: Function, default: (e) => Array.isArray(e) ? e.map((a) => a.toString()).join(", ") : e?.toString() },
+    id: {},
+    activator: {},
+    name: {},
+    formValue: { type: Function, default: (e) => e }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = e, I = o(() => i.value ? r.value.map((t) => a.formValue(t)) : a.formValue(r.value)), r = T(e, "modelValue"), w = a.id ?? U(), f = `${w}-popover`, m = _(
+      null
+    ), y = q(null), C = o(() => a.activator ?? O(m)), { isOpen: l, toggle: D, open: n, close: s } = Y(C, y, {
+      direction: "down",
+      align: "stretch",
+      position: "fixed",
+      closeOnOutsideClick: !0,
+      closeOnInsideClick: !1
+    }), {
+      items: E,
+      activeItem: u,
+      selectedItem: $,
+      isMultiselectable: i,
+      selectActiveItem: d,
+      activateSelectedItem: F,
+      activateFirstItem: v,
+      activateLastItem: V,
+      activateNextItem: M,
+      activatePrevItem: B
+    } = Z(r), g = o(() => a.displayValue(r.value)), L = o(() => u.value?.element.value ?? null), j = o(
+      () => $.value?.element.value ?? null
+    );
+    z(E, () => {
+      !u.value && E.value.length && (F({ focus: !1 }), u.value || v({ focus: !1 }));
+    });
+    function H() {
+      O(m)?.focus();
+    }
+    function K(t) {
+      if (l.value)
+        switch (t.code) {
+          case "Space":
+            d(), i.value || s({ focus: !0 });
+            break;
+          case "Enter":
+            d(), s({ focus: !0 });
+            break;
+          case "Tab":
+            d(), s({ focus: !0 });
+            return;
+          case "ArrowUp":
+            B({ focus: !1, loop: !1 });
+            break;
+          case "ArrowDown":
+            M({ focus: !1, loop: !1 });
+            break;
+          case "Home":
+            v({ focus: !1 });
+            break;
+          case "End":
+            V({ focus: !1 });
+            break;
+          case "Escape":
+            s({ focus: !0 });
+            break;
+          default:
+            return;
+        }
+      else
+        switch (t.code) {
+          case "Space":
+          case "Enter":
+            n({ focus: !1 });
+            break;
+          case "End":
+          case "ArrowUp":
+            n({ focus: !1 }), A(() => V({ focus: !1 }));
+            break;
+          case "Home":
+          case "ArrowDown":
+            n({ focus: !1 }), A(() => v({ focus: !1 }));
+            break;
+          default:
+            return;
+        }
+      t.preventDefault();
+    }
+    const h = o(() => ({
+      ref: m,
+      id: w,
+      "aria-controls": l.value ? f : void 0,
+      "aria-expanded": l.value,
+      "aria-activedescendant": u.value?.element.value?.id,
+      "aria-haspopup": "listbox",
+      role: "combobox"
+    }));
+    return G(ee, {
+      displayValue: g,
+      popoverId: f,
+      popoverRef: y,
+      activeItemEl: L,
+      selectedItemEl: j,
+      isOpen: l,
+      open: n,
+      close: s,
+      focus: H,
+      isMultiselectable: i,
+      activatorAttrs: h,
+      activatorOnKeyDown: K
+    }), (t, ae) => (c(), p(b, null, [
+      e.name ? (c(), p(b, { key: 0 }, [
+        k(i) ? (c(!0), p(b, { key: 0 }, J(I.value, (N, P) => (c(), x(S, {
+          name: `${e.name}[${P}]`,
+          value: N
+        }, null, 8, ["name", "value"]))), 256)) : (c(), x(S, {
+          key: 1,
+          name: e.name,
+          value: I.value
+        }, null, 8, ["name", "value"]))
+      ], 64)) : Q("", !0),
+      W(t.$slots, "default", {
+        popoverId: f,
+        isOpen: k(l),
+        toggle: () => k(D)(),
+        displayValue: g.value,
+        attrs: h.value
+      })
+    ], 64));
+  }
+});
+export {
+  ne as _
+};

package/dist/comboboxOptions.vue_vue_type_script_setup_true_lang-DZuDsRZX.js

@@ -0,0 +1,21 @@
+import { defineComponent as r, inject as n, unref as e, openBlock as i, createElementBlock as c, renderSlot as p, createCommentVNode as m } from "vue";
+import { injectCombobox as s } from "./composable-ui19.js";
+const d = ["id"], f = /* @__PURE__ */ r({
+  __name: "comboboxOptions",
+  setup(b) {
+    const o = n(s);
+    if (!o)
+      throw new Error("Combobox injectable context is not provided");
+    return (t, l) => e(o).isOpen.value ? (i(), c("div", {
+      key: 0,
+      ref: e(o).popoverRef,
+      id: e(o).popoverId,
+      role: "listbox"
+    }, [
+      p(t.$slots, "default")
+    ], 8, d)) : m("", !0);
+  }
+});
+export {
+  f as _
+};

package/dist/composable-ui.js

@@ -1,51 +1,51 @@
 import { usePopover as e } from "./composable-ui23.js";
 import { useList as p } from "./composable-ui22.js";
-import { useListOption as s } from "./composable-ui21.js";
+import { useListOption as x } from "./composable-ui21.js";
 import { useFormControl as a } from "./composable-ui20.js";
-import { useHTMLElement as n } from "./composable-ui24.js";
+import { toElement as n } from "./composable-ui24.js";
 import { useValidation as b } from "./composable-ui25.js";
-import { injectCombobox as u, injectMenu as C, injectPopover as T, injectTabs as l } from "./composable-ui19.js";
-import { _ as M } from "./listbox.vue_vue_type_script_setup_true_lang-OvzuliPQ.js";
-import { _ as c } from "./listboxOption.vue_vue_type_script_setup_true_lang-BhQm7GxW.js";
-import { _ as v } from "./tabContainer.vue_vue_type_script_setup_true_lang-yqy32Zx5.js";
+import { injectCombobox as u, injectMenu as C, injectPopover as l, injectTabs as T } from "./composable-ui19.js";
+import { _ as P } from "./listbox.vue_vue_type_script_setup_true_lang-OvzuliPQ.js";
+import { _ as j } from "./listboxOption.vue_vue_type_script_setup_true_lang-BhQm7GxW.js";
+import { _ as M } from "./tabContainer.vue_vue_type_script_setup_true_lang-B65gXNdp.js";
 import { _ as I } from "./tabList.vue_vue_type_script_setup_true_lang-BjKRcoyi.js";
 import { _ as g } from "./tab.vue_vue_type_script_setup_true_lang-C12uJKqo.js";
 import { _ as E } from "./tabPanel.vue_vue_type_script_setup_true_lang-DwEwu3p7.js";
-import { _ as H } from "./popover.vue_vue_type_script_setup_true_lang-D1gc6B-4.js";
-import { _ as h } from "./popoverDialog.vue_vue_type_script_setup_true_lang-ApsJsSDN.js";
-import { _ as q } from "./tooltip.vue_vue_type_script_setup_true_lang-kslDnoRH.js";
-import { _ as y } from "./menu.vue_vue_type_script_setup_true_lang-B0Jm9v_v.js";
-import { _ as A } from "./menuItems.vue_vue_type_script_setup_true_lang-DQV-lU_A.js";
-import { _ as G } from "./menuItem.vue_vue_type_script_setup_true_lang-IZgj64N4.js";
-import { _ as K } from "./combobox.vue_vue_type_script_setup_true_lang-sMngTuXu.js";
+import { _ as V } from "./popover.vue_vue_type_script_setup_true_lang-2uGxM2x-.js";
+import { _ as k } from "./popoverDialog.vue_vue_type_script_setup_true_lang-C_cJy27S.js";
+import { _ as w } from "./tooltip.vue_vue_type_script_setup_true_lang-DX78jdaW.js";
+import { _ as z } from "./menu.vue_vue_type_script_setup_true_lang-CXMH_Siw.js";
+import { _ as B } from "./menuItems.vue_vue_type_script_setup_true_lang-C7feROa2.js";
+import { _ as H } from "./menuItem.vue_vue_type_script_setup_true_lang-IZgj64N4.js";
+import { _ as K } from "./combobox.vue_vue_type_script_setup_true_lang-CFyb8irG.js";
 import { _ as Q } from "./comboboxInput.vue_vue_type_script_setup_true_lang-BTDqx7mj.js";
-import { _ as S } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-DN0tz5dv.js";
+import { _ as S } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-DZuDsRZX.js";
 import { _ as W } from "./comboboxOption.vue_vue_type_script_setup_true_lang-DmF_EaqI.js";
 export {
   K as Combobox,
   Q as ComboboxInput,
   W as ComboboxOption,
   S as ComboboxOptions,
-  M as Listbox,
-  c as ListboxOption,
-  y as Menu,
-  G as MenuItem,
-  A as MenuItems,
-  H as Popover,
-  h as PopoverDialog,
+  P as Listbox,
+  j as ListboxOption,
+  z as Menu,
+  H as MenuItem,
+  B as MenuItems,
+  V as Popover,
+  k as PopoverDialog,
   g as Tab,
-  v as TabContainer,
+  M as TabContainer,
   I as TabList,
   E as TabPanel,
-  q as Tooltip,
+  w as Tooltip,
   u as injectCombobox,
   C as injectMenu,
-  T as injectPopover,
-  l as injectTabs,
+  l as injectPopover,
+  T as injectTabs,
+  n as toElement,
   a as useFormControl,
-  n as useHTMLElement,
   p as useList,
-  s as useListOption,
+  x as useListOption,
   e as usePopover,
   b as useValidation
 };

package/dist/composable-ui11.js

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

package/dist/composable-ui12.js

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

package/dist/composable-ui13.js

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

package/dist/composable-ui15.js

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

package/dist/composable-ui18.js

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

package/dist/composable-ui2.js

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

package/dist/composable-ui20.js

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

package/dist/composable-ui22.js

@@ -1,144 +1,156 @@
-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-ui24.js";
-const q = /* @__PURE__ */ 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;
+import { shallowRef as F, ref as J, computed as d, provide as T, readonly as b, shallowReadonly as q, triggerRef as E, unref as f } from "vue";
+import { toElement as C } from "./composable-ui24.js";
+const G = /* @__PURE__ */ Symbol();
+function w(u, s) {
+  return !!(u.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_FOLLOWING);
 }
-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 h(u, s) {
+  const [t, i] = [f(u), f(s)];
+  return typeof t == "object" ? typeof i == "object" ? JSON.stringify(t) === JSON.stringify(i) : !1 : t === i;
+}
+function W(u) {
+  let s = 0;
+  const t = F([]), i = J(), m = d(() => Array.isArray(u.value));
+  function c(e) {
+    const n = t.value.find((l) => l.id === e);
+    if (!n) throw new Error(`Item not found: (${e})`);
+    return n;
   }
-  function b(e) {
-    const t = s(e.element);
-    if (t)
-      return t.focus(), t;
+  function L(e) {
+    const n = e.element.value;
+    if (n)
+      return n.focus(), n;
   }
-  function f(e, { focus: t = !1 } = {}) {
-    l.value = e?.id ?? void 0, e !== void 0 && t && b(e);
+  function o(e, { focus: n = !1 } = {}) {
+    i.value = e?.id ?? void 0, e !== void 0 && n && L(e);
   }
-  function O(e, { focus: t = !1 } = {}) {
-    const i = o(e);
-    return f(i, { focus: t });
+  function A(e, { focus: n = !1 } = {}) {
+    const l = c(e);
+    return o(l, { focus: n });
   }
-  function m(e) {
-    return l.value === e;
+  function x(e) {
+    return i.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 _(e, n, l = !1) {
+    const r = s++, a = {
+      id: r,
+      value: n,
+      // Derived rather than captured: the ref is re-read on every access, so
+      // an option that remounts — a filtered list re-rendering, say — is
+      // still the element the list focuses and reads its id from, and one
+      // registered through a component resolves to that component's root.
+      element: d(() => C(e)),
+      disabled: l
+    }, g = a.element.value, S = t.value[t.value.length - 1]?.element.value;
+    let v = t.value.length;
+    return g && S && !w(S, g) && (v = t.value.findIndex((D) => {
+      const N = D.element.value;
+      return !!N && w(g, N);
+    }), v === -1 && (v = t.value.length)), t.value.splice(v, 0, a), E(t), r;
   }
-  function A(e) {
-    m(e) && f();
-    const t = o(e), i = n.value.indexOf(t);
-    n.value.splice(i, 1), S(n);
+  function j(e) {
+    x(e) && o();
+    const n = c(e), l = t.value.indexOf(n);
+    t.value.splice(l, 1), E(t);
   }
-  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)
+  function p(e) {
+    const n = c(e);
+    if (f(n.disabled)) return;
+    const l = f(n.value);
+    if (l !== void 0) {
+      if (f(m)) {
+        const r = u.value.findIndex(
+          (a) => h(l, a)
         );
-        a > -1 ? r.value.splice(a, 1) : r.value = [...r.value, i];
+        r > -1 ? u.value.splice(r, 1) : u.value = [...u.value, l];
       } else
-        r.value = i;
-      f(t);
+        u.value = l;
+      o(n);
     }
   }
-  function y(e) {
-    return s(v) ? !!r.value.find(
-      (t) => d(e.value, t)
-    ) : d(r, e.value);
+  function I(e) {
+    return f(m) ? !!u.value.find(
+      (n) => h(e.value, n)
+    ) : h(u, e.value);
   }
-  function L(e) {
+  function M(e) {
     try {
-      const t = o(e);
-      return y(t);
+      const n = c(e);
+      return I(n);
     } 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 } = {}) {
+    for (let n of t.value)
+      if (I(n))
+        return o(n, { focus: e });
   }
-  function p({ focus: e = !1 } = {}) {
-    if (n.value.length)
-      return f(n.value[0], { focus: e });
+  function y({ focus: e = !1 } = {}) {
+    if (t.value.length)
+      return o(t.value[0], { focus: e });
   }
-  function x({ focus: e = !1 } = {}) {
-    if (n.value.length)
-      return f(n.value[n.value.length - 1], { focus: e });
+  function O({ focus: e = !1 } = {}) {
+    if (t.value.length)
+      return o(t.value[t.value.length - 1], { focus: e });
   }
-  function E({
+  function R({
     focus: e = !1,
-    loop: t = !1
+    loop: n = !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];
+    if (i.value === void 0) return y({ focus: e });
+    const l = c(i.value), r = t.value.indexOf(l);
+    let a;
+    if (r + 1 < t.value.length)
+      a = t.value[r + 1];
+    else if (n)
+      a = t.value[0];
     else
       return;
-    return f(u, { focus: e });
+    return o(a, { focus: e });
   }
-  function M({
+  function B({
     focus: e = !1,
-    loop: t = !1
+    loop: n = !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];
+    if (i.value === void 0) return O({ focus: e });
+    const l = c(i.value), r = t.value.indexOf(l);
+    let a;
+    if (r - 1 > -1)
+      a = t.value[r - 1];
+    else if (n)
+      a = t.value[t.value.length - 1];
     else
       return;
-    return f(u, { focus: e });
+    return o(a, { focus: e });
   }
-  return B(q, {
-    value: h(r),
-    selectItem: I,
-    activateItem: O,
-    deactivateItem: () => f(),
-    isSelected: L,
-    isActive: m,
-    addItem: w,
-    removeItem: A
+  return T(G, {
+    value: b(u),
+    selectItem: p,
+    activateItem: A,
+    deactivateItem: () => o(),
+    isSelected: M,
+    isActive: x,
+    addItem: _,
+    removeItem: j
   }), {
-    items: J(n),
-    isMultiselectable: h(v),
-    activeItem: g(
-      () => l.value !== void 0 ? o(l.value) : void 0
+    items: q(t),
+    isMultiselectable: b(m),
+    activeItem: d(
+      () => i.value !== void 0 ? c(i.value) : void 0
     ),
+    selectedItem: d(() => t.value.find(I)),
     selectActiveItem: () => {
-      l.value !== void 0 && I(l.value);
+      i.value !== void 0 && p(i.value);
     },
-    activateSelectedItem: j,
-    activateFirstItem: p,
-    activateLastItem: x,
-    activateNextItem: E,
-    activatePrevItem: M
+    activateSelectedItem: P,
+    activateFirstItem: y,
+    activateLastItem: O,
+    activateNextItem: R,
+    activatePrevItem: B
   };
 }
 export {
-  q as injectList,
-  P as useList
+  G as injectList,
+  W as useList
 };