@quoreadmin/ui 1.7.16 → 1.7.18

package/dist/index131.js

@@ -1,7 +1,7 @@
-import { defineComponent as z, ref as m, computed as H, onMounted as P, onUnmounted as M, watch as O, nextTick as V } from "vue";
-import { onClickOutside as k } from "./index163.js";
-import { useThrottleFn as B } from "./index174.js";
-const Q = z({
+import { defineComponent as M, ref as h, computed as H, onMounted as A, onUnmounted as Q, watch as F, nextTick as O } from "vue";
+import { onClickOutside as W } from "./index163.js";
+import { useThrottleFn as k } from "./index174.js";
+const G = M({
   name: "QPopover",
   props: {
     /** Aligns the popover accordingly with the trigger.
@@ -64,133 +64,194 @@ const Q = z({
     trigger: {
       type: String,
       default: "click"
+    },
+    /** Whether to close the popover when the trigger scrolls out of its scrollable parent.
+     * Useful for popovers inside scrollable containers to prevent orphaned popovers. */
+    closeOnScrollOutOfView: {
+      type: Boolean,
+      default: !1
+    },
+    /** Whether to scroll the page to bring the popover into view when it opens or content changes.
+     * Uses smooth scrolling and adds padding to ensure the popover isn't at the edge of the viewport. */
+    scrollIntoView: {
+      type: Boolean,
+      default: !1
+    },
+    /** Padding (in pixels) from viewport edge when scrolling popover into view. */
+    scrollIntoViewPadding: {
+      type: Number,
+      default: 20
     }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: g }) {
-    const d = m(!1), c = m(""), a = m(null), p = m({
+  setup(o, { emit: a }) {
+    const f = h(!1), d = h(""), u = h(null), g = h(null), V = h({
       top: "0",
       left: "0",
       transform: "none"
-    }), w = H(() => d.value === !0 && t.reposition === !0 ? b(t.align) : t.align), v = H(() => d.value === !0 && t.reposition === !0 ? y(t.position) : t.position), b = (n) => {
-      if (!a.value) return n;
-      const e = t.teleport ? document.querySelector(".q-popover.teleported") : a.value.children[1];
-      if (!e || h(e)) return n;
-      const l = a.value.children[0].getBoundingClientRect(), u = e.getBoundingClientRect();
-      if (n === "left" || n === "right" || n === "center") {
-        const o = l.left;
-        return window.innerWidth - o < u.width ? "right" : "left";
+    }), p = H(() => f.value === !0 && o.reposition === !0 ? S(o.align) : o.align), y = H(() => f.value === !0 && o.reposition === !0 ? R(o.position) : o.position), S = (t) => {
+      if (!u.value) return t;
+      const e = o.teleport ? document.querySelector(".q-popover.teleported") : u.value.children[1];
+      if (!e || w(e)) return t;
+      const n = u.value.children[0].getBoundingClientRect(), r = e.getBoundingClientRect();
+      if (t === "left" || t === "right" || t === "center") {
+        const l = n.left;
+        return window.innerWidth - l < r.width ? "right" : "left";
       } else {
-        const o = l.top;
-        return window.innerHeight - o < u.height ? "bottom" : "top";
+        const l = n.top;
+        return window.innerHeight - l < r.height ? "bottom" : "top";
       }
-    }, y = (n) => {
-      if (!a.value) return n;
-      const e = t.teleport ? document.querySelector(".q-popover.teleported") : a.value.children[1];
-      if (!e || h(e)) return n;
-      const l = a.value.children[0].getBoundingClientRect(), u = e.getBoundingClientRect();
-      if (n === "top" || n === "bottom") {
-        const o = l.top;
-        return window.innerHeight - o < u.height ? "top" : "bottom";
+    }, R = (t) => {
+      if (!u.value) return t;
+      const e = o.teleport ? document.querySelector(".q-popover.teleported") : u.value.children[1];
+      if (!e || w(e)) return t;
+      const n = u.value.children[0].getBoundingClientRect(), r = e.getBoundingClientRect();
+      if (t === "top" || t === "bottom") {
+        const l = n.top;
+        return window.innerHeight - l < r.height ? "top" : "bottom";
       } else {
-        const o = l.left;
-        return window.innerWidth - o < u.width ? "left" : "right";
+        const l = n.left;
+        return window.innerWidth - l < r.width ? "left" : "right";
       }
-    }, h = (n) => {
-      if (!n) return !1;
-      const e = n.getBoundingClientRect();
+    }, w = (t) => {
+      if (!t) return !1;
+      const e = t.getBoundingClientRect();
       return e ? e.top >= 0 && e.left >= 0 && e.bottom <= (window.innerHeight || document.documentElement.clientHeight) && e.right <= (window.innerWidth || document.documentElement.clientWidth) : !1;
-    }, E = () => {
-      (t.trigger === "click" || t.trigger === "both") && g("update:modelValue", !t.modelValue);
-    }, R = () => {
-      t.trigger !== "click" && g("update:modelValue", !1);
-    }, W = () => {
-      t.trigger !== "click" && g("update:modelValue", !0);
+    }, q = () => {
+      if (!u.value) return !0;
+      const t = u.value.children[0];
+      if (!t) return !0;
+      const e = t.getBoundingClientRect();
+      let n = t.parentElement;
+      for (; n; ) {
+        const r = getComputedStyle(n), l = r.overflowY, i = r.overflowX;
+        if (l === "auto" || l === "scroll" || (i === "auto" || i === "scroll")) {
+          const v = n.getBoundingClientRect();
+          if (!(e.bottom > v.top && e.top < v.bottom && e.right > v.left && e.left < v.right))
+            return !1;
+        }
+        n = n.parentElement;
+      }
+      return !0;
+    }, B = () => {
+      if (!o.teleport || !o.scrollIntoView || !o.modelValue) return;
+      const t = document.querySelector(".q-popover.teleported");
+      if (!t) return;
+      const e = t.getBoundingClientRect(), n = o.scrollIntoViewPadding, r = window.innerHeight, l = window.innerWidth;
+      let i = 0, c = 0;
+      e.bottom + n > r ? c = e.bottom + n - r : e.top - n < 0 && (c = e.top - n), e.right + n > l ? i = e.right + n - l : e.left - n < 0 && (i = e.left - n), (i !== 0 || c !== 0) && window.scrollBy({
+        top: c,
+        left: i,
+        behavior: "smooth"
+      });
+    }, z = () => {
+      if (!o.teleport || !o.scrollIntoView) return;
+      b();
+      const t = document.querySelector(".q-popover.teleported");
+      t && (g.value = new ResizeObserver(() => {
+        setTimeout(B, 50);
+      }), g.value.observe(t));
+    }, b = () => {
+      g.value && (g.value.disconnect(), g.value = null);
+    }, I = () => {
+      (o.trigger === "click" || o.trigger === "both") && a("update:modelValue", !o.modelValue);
+    }, P = () => {
+      o.trigger !== "click" && a("update:modelValue", !1);
+    }, T = () => {
+      o.trigger !== "click" && a("update:modelValue", !0);
     }, x = () => {
-      const n = a.value?.children[0];
-      if (n) {
-        const e = n.clientWidth, l = n.clientHeight;
-        switch (w.value) {
+      const t = u.value?.children[0];
+      if (t) {
+        const e = t.clientWidth, n = t.clientHeight;
+        switch (p.value) {
           case "left":
-            c.value = `margin-left: ${e / 2 - 10}px;`;
+            d.value = `margin-left: ${e / 2 - 10}px;`;
             break;
           case "right":
-            c.value = `margin-right: ${e / 2 - 10}px;`;
+            d.value = `margin-right: ${e / 2 - 10}px;`;
             break;
           case "top":
-            c.value = `margin-top: ${l / 2 - 10}px;`;
+            d.value = `margin-top: ${n / 2 - 10}px;`;
             break;
           case "bottom":
-            c.value = `margin-bottom: ${l / 2 - 10}px;`;
+            d.value = `margin-bottom: ${n / 2 - 10}px;`;
             break;
         }
       }
-    }, s = () => {
-      if (!a.value || !t.teleport) return;
-      const n = a.value.children[0];
-      if (!n) return;
-      const e = n.getBoundingClientRect(), l = 10, u = v.value, o = w.value;
-      let i = 0, f = 0, r = "none";
-      u === "bottom" ? (i = e.bottom + l, o === "left" ? (f = e.left, r = "none") : o === "right" ? (f = e.right, r = "translateX(-100%)") : o === "center" && (f = e.left + e.width / 2, r = "translateX(-50%)")) : u === "top" ? (i = e.top - l, r = "translateY(-100%)", o === "left" ? f = e.left : o === "right" ? (f = e.right, r = "translate(-100%, -100%)") : o === "center" && (f = e.left + e.width / 2, r = "translate(-50%, -100%)")) : u === "left" ? (f = e.left - l, r = "translateX(-100%)", o === "top" ? i = e.top : o === "bottom" ? (i = e.bottom, r = "translate(-100%, -100%)") : o === "middle" && (i = e.top + e.height / 2, r = "translate(-100%, -50%)")) : u === "right" && (f = e.right + l, o === "top" ? (i = e.top, r = "none") : o === "bottom" ? (i = e.bottom, r = "translateY(-100%)") : o === "middle" && (i = e.top + e.height / 2, r = "translateY(-50%)")), p.value = {
+    }, m = () => {
+      if (!u.value || !o.teleport) return;
+      const t = u.value.children[0];
+      if (!t) return;
+      const e = t.getBoundingClientRect(), n = 10, r = y.value, l = p.value;
+      let i = 0, c = 0, s = "none";
+      r === "bottom" ? (i = e.bottom + n, l === "left" ? (c = e.left, s = "none") : l === "right" ? (c = e.right, s = "translateX(-100%)") : l === "center" && (c = e.left + e.width / 2, s = "translateX(-50%)")) : r === "top" ? (i = e.top - n, s = "translateY(-100%)", l === "left" ? c = e.left : l === "right" ? (c = e.right, s = "translate(-100%, -100%)") : l === "center" && (c = e.left + e.width / 2, s = "translate(-50%, -100%)")) : r === "left" ? (c = e.left - n, s = "translateX(-100%)", l === "top" ? i = e.top : l === "bottom" ? (i = e.bottom, s = "translate(-100%, -100%)") : l === "middle" && (i = e.top + e.height / 2, s = "translate(-100%, -50%)")) : r === "right" && (c = e.right + n, l === "top" ? (i = e.top, s = "none") : l === "bottom" ? (i = e.bottom, s = "translateY(-100%)") : l === "middle" && (i = e.top + e.height / 2, s = "translateY(-50%)")), V.value = {
         top: `${i}px`,
-        left: `${f}px`,
-        transform: r
+        left: `${c}px`,
+        transform: s
       };
     }, L = () => {
-      t.teleport && t.modelValue && s();
-    }, q = () => {
-      t.teleport && t.modelValue && t.followScroll && s();
-    }, S = B(L, 16, !0), C = B(q, 16, !0);
-    k(a, (n) => {
-      if (t.teleport) {
+      o.teleport && o.modelValue && m();
+    }, X = () => {
+      if (o.teleport && o.modelValue) {
+        if (o.closeOnScrollOutOfView && !q()) {
+          a("update:modelValue", !1);
+          return;
+        }
+        o.followScroll && m();
+      }
+    }, C = k(L, 16, !0), E = k(X, 16, !0);
+    W(u, (t) => {
+      if (o.teleport) {
         const e = document.querySelector(".q-popover.teleported");
-        if (e && e.contains(n.target))
+        if (e && e.contains(t.target))
           return;
       }
-      t.modelValue && g("update:modelValue", !1);
+      o.modelValue && a("update:modelValue", !1);
     });
-    function T() {
-      d.value = !1;
+    function Y() {
+      f.value = !1, b();
     }
     function $() {
-      d.value = !0, t.teleport ? V(() => {
-        s();
-      }) : !h(a.value?.children[1]) && t.reposition === !0 && x();
+      f.value = !0, o.teleport ? O(() => {
+        m(), o.scrollIntoView && setTimeout(() => {
+          z(), B();
+        }, 100);
+      }) : !w(u.value?.children[1]) && o.reposition === !0 && x();
     }
-    return P(() => {
-      t.teleport && (window.addEventListener("resize", S), window.addEventListener("scroll", C, !0));
-    }), M(() => {
-      t.teleport && (window.removeEventListener("resize", S), window.removeEventListener("scroll", C, !0));
-    }), O(
-      () => t.modelValue,
-      (n) => {
-        t.teleport && n && V(() => {
-          s();
+    return A(() => {
+      o.teleport && (window.addEventListener("resize", C), window.addEventListener("scroll", E, !0));
+    }), Q(() => {
+      o.teleport && (window.removeEventListener("resize", C), window.removeEventListener("scroll", E, !0)), b();
+    }), F(
+      () => o.modelValue,
+      (t) => {
+        o.teleport && t && O(() => {
+          m();
         });
       }
     ), {
       // Refs
-      entered: d,
-      offsetStyle: c,
-      popover: a,
-      teleportedStyle: p,
+      entered: f,
+      offsetStyle: d,
+      popover: u,
+      teleportedStyle: V,
       // Computed
-      alignment: w,
-      positioning: v,
+      alignment: p,
+      positioning: y,
       // Methods
-      getAlignment: b,
-      getPositioning: y,
-      isElementInView: h,
-      onAfterLeave: T,
-      onClick: E,
-      onClickOutside: k,
+      getAlignment: S,
+      getPositioning: R,
+      isElementInView: w,
+      onAfterLeave: Y,
+      onClick: I,
+      onClickOutside: W,
       onEnter: $,
-      onMouseLeave: R,
-      onMouseOver: W,
-      updateTeleportedPosition: s
+      onMouseLeave: P,
+      onMouseOver: T,
+      updateTeleportedPosition: m
     };
   }
 });
 export {
-  Q as default
+  G as default
 };