vue-composable-ui 1.0.3 → 1.0.5

package/dist/{combobox.vue_vue_type_script_setup_true_lang-DpM6lN_3.js → combobox.vue_vue_type_script_setup_true_lang-CAbgDlD9.js}

@@ -8,7 +8,7 @@ const ae = /* @__PURE__ */ B({
   inheritAttrs: !1,
   __name: "combobox",
   props: /* @__PURE__ */ H({
-    displayValue: { type: Function, default: (e) => Array.isArray(e) ? e.map((t) => t.toString()).join(", ") : e.toString() },
+    displayValue: { type: Function, default: (e) => e && Array.isArray(e) ? e.map((o) => o.toString()).join(", ") : e.toString() || void 0 },
     id: {},
     activatorId: {},
     name: {},
@@ -19,7 +19,7 @@ const ae = /* @__PURE__ */ B({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, I = p(() => u.value ? l.value.map((a) => t.formValue(a)) : t.formValue(l.value)), l = T(e, "modelValue"), i = t.id ?? j(), y = t.activatorId ?? i, n = `${i}-popover`, { isOpen: o, toggle: E, open: s, close: c } = z(
+    const o = e, I = p(() => u.value ? l.value.map((a) => o.formValue(a)) : o.formValue(l.value)), l = T(e, "modelValue"), i = o.id ?? j(), y = o.activatorId ?? i, n = `${i}-popover`, { isOpen: t, toggle: E, open: s, close: c } = z(
       `#${y}`,
       `#${n}`,
       {
@@ -39,7 +39,7 @@ const ae = /* @__PURE__ */ B({
       activateLastItem: V,
       activateNextItem: C,
       activatePrevItem: M
-    } = G(l), g = p(() => t.displayValue(l.value));
+    } = G(l), g = p(() => o.displayValue(l.value));
     N(w, () => {
       !f.value && w.value.length && (S({ focus: !1 }), f.value || d({ focus: !1 }));
     });
@@ -47,7 +47,7 @@ const ae = /* @__PURE__ */ B({
       q(`#${y}`).value?.focus();
     }
     function D(a) {
-      if (o.value)
+      if (t.value)
         switch (a.code) {
           case "Space":
             m(), u.value || c({ focus: !0 });
@@ -99,8 +99,8 @@ const ae = /* @__PURE__ */ B({
       onkeydown: D,
       onclick: () => s({ focus: !1 }),
       id: i,
-      "aria-controls": o.value ? n : void 0,
-      "aria-expanded": o.value,
+      "aria-controls": t.value ? n : void 0,
+      "aria-expanded": t.value,
       "aria-activedescendant": f.value?.element.value?.id,
       "aria-haspopup": "listbox",
       role: "combobox"
@@ -108,7 +108,7 @@ const ae = /* @__PURE__ */ B({
     return P(J, {
       displayValue: g,
       popoverId: n,
-      isOpen: o,
+      isOpen: t,
       open: s,
       close: c,
       focus: O,
@@ -127,7 +127,7 @@ const ae = /* @__PURE__ */ B({
       ], 64)) : U("", !0),
       K(a.$slots, "default", {
         popoverId: n,
-        isOpen: k(o),
+        isOpen: k(t),
         toggle: () => k(E)(),
         displayValue: g.value,
         attrs: x.value

package/dist/composable-ui.js

@@ -16,7 +16,7 @@ import { _ as k } from "./tooltip.vue_vue_type_script_setup_true_lang-D4uAZmQb.j
 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-ezPw3j-i.js";
-import { _ as J } from "./combobox.vue_vue_type_script_setup_true_lang-DpM6lN_3.js";
+import { _ as J } from "./combobox.vue_vue_type_script_setup_true_lang-CAbgDlD9.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-DPEArk3M.js";

package/dist/composable-ui20.js

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

package/dist/composable-ui21.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-composable-ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "repository": {
     "type": "git",