vue-composable-ui 1.0.3 → 1.0.4

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.4",
   "type": "module",
   "repository": {
     "type": "git",