@quoreadmin/ui 1.6.6 → 1.6.8

package/dist/index102.js

@@ -1,7 +1,7 @@
 import { defineComponent as C, ref as n, computed as v } from "vue";
-import { useDropZone as b } from "./index161.js";
+import { useDropZone as b } from "./index162.js";
 import z from "./index54.js";
-import M from "./index181.js";
+import M from "./index182.js";
 import T from "./index6.js";
 import h from "./index30.js";
 import I from "./index34.js";

package/dist/index109.js

@@ -1,5 +1,5 @@
 import { defineComponent as c, onMounted as l, computed as n } from "vue";
-import s from "./index182.js";
+import s from "./index183.js";
 let t = !1;
 const i = "quore-svg-sprite-container";
 function o() {

package/dist/index113.js

@@ -1,7 +1,7 @@
 import { defineComponent as $, ref as a, computed as s, onMounted as Z, onUnmounted as q } from "vue";
-import { useSwipe as K } from "./index161.js";
+import { useSwipe as K } from "./index162.js";
 import { useI18n as X } from "vue-i18n";
-import J from "./index183.js";
+import J from "./index184.js";
 import Y from "./index6.js";
 import ee from "./index7.js";
 import te from "./index33.js";

package/dist/index117.js

@@ -1,9 +1,9 @@
 import { defineComponent as E, ref as a, computed as m, onMounted as P, onUnmounted as Q, nextTick as V } from "vue";
 import { filterData as C } from "./index53.js";
 import F from "./index6.js";
-import { useDrag as H } from "./index169.js";
-import { useMotionProperties as N, useMotionTransitions as U } from "./index170.js";
-import { useWindowScroll as q, useScroll as W } from "./index161.js";
+import { useDrag as H } from "./index170.js";
+import { useMotionProperties as N, useMotionTransitions as U } from "./index171.js";
+import { useWindowScroll as q, useScroll as W } from "./index162.js";
 import T from "./index54.js";
 const X = E({
   name: "QList",

package/dist/index129.js

@@ -1,5 +1,5 @@
 import { defineComponent as x, ref as s, onMounted as y, nextTick as P } from "vue";
-import { getDocument as C, version as k, GlobalWorkerOptions as E } from "./index184.js";
+import { getDocument as C, version as k, GlobalWorkerOptions as E } from "./index185.js";
 import D from "./index22.js";
 E.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${k}/legacy/build/pdf.worker.min.mjs`;
 const S = x({

package/dist/index131.js

@@ -1,6 +1,7 @@
-import { defineComponent as C, ref as g, computed as m } from "vue";
-import { onClickOutside as w } from "./index161.js";
-const R = C({
+import { defineComponent as L, ref as p, computed as C, onMounted as q, onUnmounted as z, watch as T, nextTick as k } from "vue";
+import { onClickOutside as H } from "./index162.js";
+import { useThrottleFn as $ } from "./index173.js";
+const X = L({
   name: "QPopover",
   props: {
     /** Aligns the popover accordingly with the trigger.
@@ -42,6 +43,16 @@ const R = C({
       type: String,
       default: "md"
     },
+    /** Set if the popover is teleported to the teleportTo element (escapes overflow clipping) */
+    teleport: {
+      type: Boolean,
+      default: !1
+    },
+    /** Target element for teleport */
+    teleportTo: {
+      type: String,
+      default: "body"
+    },
     /** Trigger popover on click, hover or both */
     trigger: {
       type: String,
@@ -49,86 +60,132 @@ const R = C({
     }
   },
   emits: ["update:modelValue"],
-  setup(n, { emit: c }) {
-    const l = g(!1), u = g(""), i = g(null), f = m(() => l.value === !0 && n.reposition === !0 ? s(n.align) : n.align), v = m(() => l.value === !0 && n.reposition === !0 ? h(n.position) : n.position), s = (e) => {
-      if (!i.value || d(i.value.children[1])) return e;
-      const t = i.value.children[0].getBoundingClientRect(), o = i.value.children[1].getBoundingClientRect();
-      if (e === "left" || e === "right" || e === "center") {
-        const r = t.left;
-        return window.innerWidth - r < o.width ? "right" : "left";
+  setup(n, { emit: s }) {
+    const f = p(!1), c = p(""), a = p(null), v = p({
+      top: "0",
+      left: "0",
+      transform: "none"
+    }), w = C(() => f.value === !0 && n.reposition === !0 ? y(n.align) : n.align), b = C(() => f.value === !0 && n.reposition === !0 ? S(n.position) : n.position), y = (t) => {
+      if (!a.value) return t;
+      const e = n.teleport ? document.querySelector(".q-popover.teleported") : a.value.children[1];
+      if (!e || g(e)) return t;
+      const i = a.value.children[0].getBoundingClientRect(), u = e.getBoundingClientRect();
+      if (t === "left" || t === "right" || t === "center") {
+        const o = i.left;
+        return window.innerWidth - o < u.width ? "right" : "left";
       } else {
-        const r = t.top;
-        return window.innerHeight - r < o.height ? "bottom" : "top";
+        const o = i.top;
+        return window.innerHeight - o < u.height ? "bottom" : "top";
       }
-    }, h = (e) => {
-      if (!i.value || d(i.value.children[1])) return e;
-      const t = i.value.children[0].getBoundingClientRect(), o = i.value.children[1].getBoundingClientRect();
-      if (e === "top" || e === "bottom") {
-        const r = t.top;
-        return window.innerHeight - r < o.height ? "top" : "bottom";
+    }, S = (t) => {
+      if (!a.value) return t;
+      const e = n.teleport ? document.querySelector(".q-popover.teleported") : a.value.children[1];
+      if (!e || g(e)) return t;
+      const i = a.value.children[0].getBoundingClientRect(), u = e.getBoundingClientRect();
+      if (t === "top" || t === "bottom") {
+        const o = i.top;
+        return window.innerHeight - o < u.height ? "top" : "bottom";
       } else {
-        const r = t.left;
-        return window.innerWidth - r < o.width ? "left" : "right";
+        const o = i.left;
+        return window.innerWidth - o < u.width ? "left" : "right";
       }
-    }, d = (e) => {
-      const t = e.getBoundingClientRect();
-      return t ? t.top >= 0 && t.left >= 0 && t.bottom <= (window.innerHeight || document.documentElement.clientHeight) && t.right <= (window.innerWidth || document.documentElement.clientWidth) : !1;
-    }, p = () => {
-      (n.trigger === "click" || n.trigger === "both") && c("update:modelValue", !n.modelValue);
-    }, b = () => {
-      n.trigger !== "click" && c("update:modelValue", !1);
-    }, k = () => {
-      n.trigger !== "click" && c("update:modelValue", !0);
-    }, H = () => {
-      const e = i.value?.children[0];
-      if (e) {
-        const t = e.clientWidth, o = e.clientHeight;
-        switch (f.value) {
+    }, g = (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;
+    }, R = () => {
+      (n.trigger === "click" || n.trigger === "both") && s("update:modelValue", !n.modelValue);
+    }, V = () => {
+      n.trigger !== "click" && s("update:modelValue", !1);
+    }, B = () => {
+      n.trigger !== "click" && s("update:modelValue", !0);
+    }, E = () => {
+      const t = a.value?.children[0];
+      if (t) {
+        const e = t.clientWidth, i = t.clientHeight;
+        switch (w.value) {
           case "left":
-            u.value = `margin-left: ${t / 2 - 10}px;`;
+            c.value = `margin-left: ${e / 2 - 10}px;`;
             break;
           case "right":
-            u.value = `margin-right: ${t / 2 - 10}px;`;
+            c.value = `margin-right: ${e / 2 - 10}px;`;
             break;
           case "top":
-            u.value = `margin-top: ${o / 2 - 10}px;`;
+            c.value = `margin-top: ${i / 2 - 10}px;`;
             break;
           case "bottom":
-            u.value = `margin-bottom: ${o / 2 - 10}px;`;
+            c.value = `margin-bottom: ${i / 2 - 10}px;`;
             break;
         }
       }
-    };
-    w(i, () => {
-      n.modelValue && c("update:modelValue", !1);
+    }, h = () => {
+      if (!a.value || !n.teleport) return;
+      const t = a.value.children[0];
+      if (!t) return;
+      const e = t.getBoundingClientRect(), i = 10, u = b.value, o = w.value;
+      let l = 0, d = 0, r = "none";
+      u === "bottom" ? (l = e.bottom + i, o === "left" ? (d = e.left - 40, r = "none") : o === "right" ? (d = e.right + 40, r = "translateX(-100%)") : o === "center" && (d = e.left + e.width / 2, r = "translateX(-50%)")) : u === "top" ? (l = e.top - i, r = "translateY(-100%)", o === "left" ? d = e.left - 40 : o === "right" ? (d = e.right + 40, r = "translate(-100%, -100%)") : o === "center" && (d = e.left + e.width / 2, r = "translate(-50%, -100%)")) : u === "left" ? (d = e.left - i, r = "translateX(-100%)", o === "top" ? l = e.top - 16 : o === "bottom" ? (l = e.bottom + 16, r = "translate(-100%, -100%)") : o === "middle" && (l = e.top + e.height / 2, r = "translate(-100%, -50%)")) : u === "right" && (d = e.right + i, o === "top" ? (l = e.top - 16, r = "none") : o === "bottom" ? (l = e.bottom + 16, r = "translateY(-100%)") : o === "middle" && (l = e.top + e.height / 2, r = "translateY(-50%)")), v.value = {
+        top: `${l}px`,
+        left: `${d}px`,
+        transform: r
+      };
+    }, m = $(
+      () => {
+        n.teleport && n.modelValue && h();
+      },
+      16,
+      !0
+    );
+    H(a, (t) => {
+      if (n.teleport) {
+        const e = document.querySelector(".q-popover.teleported");
+        if (e && e.contains(t.target))
+          return;
+      }
+      n.modelValue && s("update:modelValue", !1);
     });
     function W() {
-      l.value = !1;
+      f.value = !1;
     }
-    function y() {
-      l.value = !0, !d(i.value?.children[1]) && n.reposition === !0 && H();
+    function x() {
+      f.value = !0, n.teleport ? k(() => {
+        h();
+      }) : !g(a.value?.children[1]) && n.reposition === !0 && E();
     }
-    return {
+    return q(() => {
+      n.teleport && (window.addEventListener("resize", m), window.addEventListener("scroll", m, !0));
+    }), z(() => {
+      n.teleport && (window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0));
+    }), T(
+      () => n.modelValue,
+      (t) => {
+        n.teleport && t && k(() => {
+          h();
+        });
+      }
+    ), {
       // Refs
-      entered: l,
-      offsetStyle: u,
-      popover: i,
+      entered: f,
+      offsetStyle: c,
+      popover: a,
+      teleportedStyle: v,
       // Computed
-      alignment: f,
-      positioning: v,
+      alignment: w,
+      positioning: b,
       // Methods
-      getAlignment: s,
-      getPositioning: h,
-      isElementInView: d,
+      getAlignment: y,
+      getPositioning: S,
+      isElementInView: g,
       onAfterLeave: W,
-      onClick: p,
-      onClickOutside: w,
-      onEnter: y,
-      onMouseLeave: b,
-      onMouseOver: k
+      onClick: R,
+      onClickOutside: H,
+      onEnter: x,
+      onMouseLeave: V,
+      onMouseOver: B,
+      updateTeleportedPosition: h
     };
   }
 });
 export {
-  R as default
+  X as default
 };