vue-composable-ui 1.1.3 → 1.1.4

package/dist/composable-ui23.js

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

package/package.json

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