@nmorph/nmorph-ui-kit 2.2.39 → 2.2.41

package/dist/hooks/use-placement.js

@@ -1,89 +1,93 @@
-import { ref as b, unref as n, inject as T, watch as F, onMounted as U, onUnmounted as X, nextTick as S } from "vue";
-const G = (j) => {
-  const { initialPlacement: g, relativeElement: y, contentDOMElement: u, yOffset: L = 0, xOffset: O = 0, enabled: h } = j, R = b(n(g)), C = b({ x: "0px", y: "0px" }), v = b(!1), k = T("nmorph"), P = { passive: !0, capture: !0 };
+import { ref as b, unref as i, inject as U, watch as X, onMounted as J, onUnmounted as K, nextTick as $ } from "vue";
+const F = 4, Z = (H) => {
+  const { initialPlacement: p, relativeElement: O, contentDOMElement: d, yOffset: R = 0, xOffset: M = 0, enabled: g } = H, y = b(i(p)), L = b({ x: "0px", y: "0px" }), m = b(!1), I = U("nmorph"), P = { passive: !0, capture: !0 };
   let w = null;
-  F(
-    () => k?.browser,
+  X(
+    () => I?.browser,
     () => {
-      o();
+      r();
     },
     { deep: !0 }
-  ), U(() => {
-    o(), V(), window.addEventListener("resize", o, { passive: !0 }), w = new MutationObserver(() => {
-      M();
-    }), w.observe(document.body, { childList: !0, subtree: !0 }), M();
-  }), X(() => {
-    W(), window.removeEventListener("resize", o), w?.disconnect();
-  }), F(
-    () => [n(g), n(y), n(O), n(L), n(h)],
+  ), J(() => {
+    r(), Y(), window.addEventListener("resize", r, { passive: !0 }), w = new MutationObserver(() => {
+      C();
+    }), w.observe(document.body, { childList: !0, subtree: !0 }), C();
+  }), K(() => {
+    _(), window.removeEventListener("resize", r), w?.disconnect();
+  }), X(
+    () => [i(p), i(O), i(M), i(R), i(g)],
     () => {
-      o();
+      r();
     },
     { flush: "post" }
   );
-  const M = () => {
-    S(() => {
-      u.value && o();
+  const C = () => {
+    $(() => {
+      d.value && r();
     });
-  }, A = () => h === void 0 || n(h) !== !1, q = (e) => {
-    const [s, t] = e.split("-");
+  }, W = () => g === void 0 || i(g) !== !1, N = (t) => {
+    const [n, e] = t.split("-");
     return {
-      side: s,
-      align: t || "start",
-      hasAlign: !!t
+      side: n,
+      align: e || "start",
+      hasAlign: !!e
     };
-  }, z = (e, s, t) => t ? `${e}-${s}` : e, B = () => n(y), H = (e, s, t, l, d, r, i) => e === "top" && t - i < 0 ? "bottom" : e === "bottom" && t + d + i > window.innerHeight ? "top" : e === "left" && s - r < 0 ? "right" : e === "right" && s + l + r > window.innerWidth ? "left" : e, V = () => {
-    window.addEventListener("scroll", o, P);
-  }, W = () => {
-    window.removeEventListener("scroll", o, P);
-  }, o = () => {
-    S(() => {
+  }, S = (t, n, e) => e ? `${t}-${n}` : t, A = () => i(O), B = (t, n, e) => {
+    const o = F, a = Math.max(e - n - F, o);
+    return Math.min(Math.max(t, o), a);
+  }, T = (t, n, e, o, a, s, l) => t === "top" && e - l < 0 ? "bottom" : t === "bottom" && e + a + l > window.innerHeight ? "top" : t === "left" && n - s < 0 ? "right" : t === "right" && n + o + s > window.innerWidth ? "left" : t, Y = () => {
+    window.addEventListener("scroll", r, P);
+  }, _ = () => {
+    window.removeEventListener("scroll", r, P);
+  }, r = () => {
+    $(() => {
       if (typeof window > "u") return;
-      if (!A()) {
-        v.value = !1;
+      if (!W()) {
+        m.value = !1;
         return;
       }
-      const e = B();
-      if (!u.value || !e) {
-        v.value = !1;
+      const t = A();
+      if (!d.value || !t) {
+        m.value = !1;
         return;
       }
-      const s = u.value.getBoundingClientRect(), t = s.width, l = s.height, d = e.getBoundingClientRect(), { x: r, y: i } = d, m = d.width, p = d.height, D = n(O) || 0, N = n(L) || 0, f = q(n(g)), a = H(
+      const n = d.value.getBoundingClientRect(), e = n.width, o = n.height, a = t.getBoundingClientRect(), { x: s, y: l } = a, v = a.width, h = a.height, j = i(M) || 0, k = i(R) || 0, f = N(i(p)), c = T(
         f.side,
-        r,
-        i,
-        m,
-        p,
-        t,
-        l
+        s,
+        l,
+        v,
+        h,
+        e,
+        o
       );
-      let E = r, x = i;
-      if (a === "top" || a === "bottom") {
-        const c = {
-          start: r,
-          center: r + m / 2 - t / 2,
-          end: r + m - t
+      let x = s, E = l;
+      if (c === "top" || c === "bottom") {
+        const u = {
+          start: s,
+          center: s + v / 2 - e / 2,
+          end: s + v - e
         };
-        E = c[f.align] ?? c.start, x = a === "top" ? i - l : i + p;
+        x = u[f.align] ?? u.start, E = c === "top" ? l - o : l + h;
       }
-      if (a === "left" || a === "right") {
-        const c = {
-          start: i,
-          center: i + p / 2 - l / 2,
-          end: i + p - l
+      if (c === "left" || c === "right") {
+        const u = {
+          start: l,
+          center: l + h / 2 - o / 2,
+          end: l + h - o
         };
-        E = a === "left" ? r - t : r + m, x = c[f.align] ?? c.start;
+        x = c === "left" ? s - e : s + v, E = u[f.align] ?? u.start;
       }
-      R.value = z(a, f.align, f.hasAlign), C.value = { x: `${E + D}px`, y: `${x + N}px` }, v.value = !0, typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
-        const c = B();
-        if (!u.value || !c || !A()) return;
-        const $ = u.value.getBoundingClientRect();
-        ($.width !== t || $.height !== l) && o();
+      const q = x + j, z = E + k, D = B(q, e, window.innerWidth), G = B(z, o, window.innerHeight);
+      y.value = S(c, f.align, f.hasAlign), L.value = { x: `${D}px`, y: `${G}px` }, m.value = !0, typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
+        const u = A();
+        if (!d.value || !u || !W()) return;
+        const V = d.value.getBoundingClientRect();
+        (V.width !== e || V.height !== o) && r();
       });
     });
   };
-  return { placement: R, placementCoords: C, placementReady: v, adjustPlacement: o };
+  return { placement: y, placementCoords: L, placementReady: m, adjustPlacement: r };
 };
 export {
-  G as usePlacement
+  Z as usePlacement
 };