@quoreadmin/ui 1.9.3 → 1.10.1

package/dist/index131.js

@@ -0,0 +1,272 @@
+import { defineComponent as N, useSlots as O, ref as p, computed as n, onMounted as R, onUnmounted as A, resolveComponent as D, openBlock as g, createElementBlock as h, normalizeClass as l, createElementVNode as r, normalizeStyle as y, renderSlot as i, unref as k, createCommentVNode as T, createVNode as U } from "vue";
+import u from "./index57.js";
+const _ = { class: "flex-grow m-0 font-bold sm-down:text-md md:text-lg leading-none text-left" }, G = "4.5rem", I = "4.8125rem", P = /* @__PURE__ */ N({
+  __name: "page-layout",
+  props: {
+    headerBackgroundColor: { default: "green-20" },
+    headerColor: { default: "white" },
+    headerFixed: { type: Boolean, default: void 0 },
+    headerHideOnScroll: { type: Boolean, default: !0 },
+    headerHideScrollThreshold: { default: 100 },
+    headerTop: { default: 0 },
+    headerShowShadow: { type: Boolean, default: !1 },
+    headerBarClass: { default: "" },
+    sidebarCollapsible: { type: Boolean, default: !1 },
+    sidebarCollapsed: { type: Boolean, default: !1 },
+    sidebarWidth: { default: "md:w-[19rem] lg:w-[23rem]" },
+    sidebarCollapsedWidth: { default: "md:!w-12 lg:!w-12" },
+    sidebarClass: { default: "" },
+    contentClass: { default: "" },
+    mainClass: { default: "" },
+    maxContentWidth: { default: "max-w-[72rem]" },
+    footerBackgroundColor: { default: "white" },
+    footerBarClass: { default: "" },
+    footerVisible: { type: Boolean, default: void 0 },
+    containerBackgroundColor: { default: "gray-00" }
+  },
+  emits: ["update:sidebarCollapsed"],
+  setup(o, { expose: Y, emit: L }) {
+    const t = o, M = L, q = O(), w = p(null), c = p(!0), s = p(!1), m = p(!1), $ = p(!1);
+    let C = 0, x = !1;
+    const v = n(() => !!q.sidebar), f = n(() => t.headerFixed !== void 0 ? t.headerFixed : v.value), d = n({
+      get: () => t.sidebarCollapsed,
+      set: (e) => M("update:sidebarCollapsed", e)
+    }), j = n(
+      () => v.value && t.sidebarCollapsible && u.md
+    ), S = n(() => `${t.headerTop + 80}px`), z = n(
+      () => `calc(100vh - ${t.headerTop + 80}px)`
+    ), H = n(
+      () => d.value ? t.sidebarCollapsedWidth : t.sidebarWidth
+    ), E = () => {
+      const e = w.value, a = !u.md && e;
+      return {
+        scrollY: a ? e.scrollTop : window.scrollY,
+        atTop: a ? e.scrollTop <= 0 : window.scrollY <= 0,
+        atBottom: a ? e.scrollTop + e.clientHeight >= e.scrollHeight : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight
+      };
+    }, B = () => {
+      x || (window.requestAnimationFrame(() => {
+        const { scrollY: e, atTop: a, atBottom: b } = E();
+        if (c.value = a, s.value = b, t.headerHideOnScroll && (f.value || !u.md)) {
+          if (e <= t.headerHideScrollThreshold) {
+            m.value = !1, C = e, x = !1;
+            return;
+          }
+          const V = e - C;
+          Math.abs(V) > 5 && (m.value = V > 0, C = e);
+        } else
+          m.value = !1;
+        x = !1;
+      }), x = !0);
+    }, F = () => {
+      d.value = !d.value;
+    };
+    return R(() => {
+      window.addEventListener("scroll", B, { passive: !0 }), w.value && w.value.addEventListener("scroll", B, {
+        passive: !0
+      });
+      const { scrollY: e, atTop: a, atBottom: b } = E();
+      C = e, c.value = a, s.value = b;
+    }), A(() => {
+      window.removeEventListener("scroll", B), w.value?.removeEventListener("scroll", B);
+    }), Y({ scrolledToTop: c, scrolledToBottom: s, headerHidden: m }), (e, a) => {
+      const b = D("q-icon");
+      return g(), h("div", {
+        class: l([
+          "page-layout",
+          `bg-${o.containerBackgroundColor}`,
+          "sm-down:absolute sm-down:inset-x-0 sm-down:top-0 sm-down:bottom-0"
+        ])
+      }, [
+        r("div", {
+          class: l([
+            "page-layout__header",
+            "flex items-center justify-center",
+            `md:bg-${o.containerBackgroundColor}`,
+            f.value ? "fixed left-0 w-full sm-down:z-50 md:z-[45] md:pt-6 md:px-6" : "md:mb-4 relative sm-down:absolute sm-down:top-0 sm-down:inset-x-0 sm-down:z-50",
+            { "page-layout__header--hidden": m.value }
+          ]),
+          style: y(f.value ? { top: `${o.headerTop}px` } : void 0)
+        }, [
+          r("div", {
+            class: l([
+              "page-layout__header-bar",
+              "flex items-center text-left md:rounded-lg",
+              `md:h-[3.5rem] ${o.maxContentWidth} w-full p-4 md:pl-6`,
+              "sm-down:py-6 sm-down:h-[4.5rem]",
+              `bg-${o.headerBackgroundColor}`,
+              `text-${o.headerColor}`,
+              o.headerBarClass,
+              {
+                "md:shadow-[0_0.375rem_0.5rem_0_rgba(0,0,0,0.05)] md:shadow-gray-20": f.value && (!c.value || o.headerShowShadow)
+              }
+            ])
+          }, [
+            r("h1", _, [
+              i(e.$slots, "header", {
+                scrolledToTop: c.value,
+                scrolledToBottom: s.value
+              }, void 0, !0)
+            ]),
+            i(e.$slots, "header-actions", {}, void 0, !0)
+          ], 2)
+        ], 6),
+        r("div", {
+          ref_key: "contentRef",
+          ref: w,
+          class: l([
+            "page-layout__content",
+            "sm-down:absolute sm-down:left-0 sm-down:right-0",
+            "sm-down:overflow-y-auto sm-down:scroll-smooth sm-down:overscroll-none",
+            { "md:pt-[4.5rem]": f.value },
+            { "md:mb-[0.5rem]": f.value && t.footerVisible },
+            o.contentClass
+          ]),
+          style: y({
+            "--sm-top": m.value ? "0px" : G,
+            "--sm-bottom": t.footerVisible ? I : "0px"
+          })
+        }, [
+          r("div", {
+            class: l([
+              "page-layout__content-inner",
+              { "md:flex md:gap-4": v.value }
+            ])
+          }, [
+            v.value && k(u).md ? (g(), h("div", {
+              key: 0,
+              class: l([
+                "page-layout__sidebar",
+                "shrink-0 flex flex-col gap-4",
+                "md:transition-[width] md:duration-300",
+                H.value,
+                { "!overflow-hidden": d.value },
+                o.sidebarClass
+              ]),
+              onMouseenter: a[0] || (a[0] = (W) => $.value = !0),
+              onMouseleave: a[1] || (a[1] = (W) => $.value = !1)
+            }, [
+              r("div", {
+                class: l([
+                  "page-layout__sidebar-inner",
+                  "fixed z-10 md:pb-6 md:pt-4 overflow-y-auto",
+                  `bg-${o.containerBackgroundColor}`,
+                  H.value,
+                  { "!overflow-hidden": d.value }
+                ]),
+                style: y({
+                  top: S.value,
+                  height: z.value
+                })
+              }, [
+                i(e.$slots, "sidebar", {}, void 0, !0)
+              ], 6),
+              d.value ? (g(), h("div", {
+                key: 0,
+                class: "fixed cursor-pointer w-12 rounded-lg bg-white z-10",
+                style: y({
+                  top: `calc(${S.value} + 1rem)`,
+                  height: `calc(${z.value} - 2rem)`
+                }),
+                onClick: F
+              }, null, 4)) : T("", !0),
+              j.value && ($.value || d.value) ? (g(), h("div", {
+                key: 1,
+                class: l([
+                  "page-layout__sidebar-toggle",
+                  "cursor-pointer fixed z-30",
+                  "bg-white rounded border border-gray-10",
+                  "transition-all duration-300 ease-in-out",
+                  {
+                    "page-layout__sidebar-toggle--collapsed": d.value
+                  }
+                ]),
+                style: y({
+                  top: "calc(50vh + 97px)",
+                  marginLeft: d.value ? "0.875rem" : k(u).lg ? "22.125rem" : "18.125rem"
+                }),
+                onClick: F
+              }, [
+                U(b, {
+                  icon: "double-chevron-right ",
+                  type: "",
+                  color: "inkwell-30",
+                  class: l([
+                    "page-layout__sidebar-toggle-icon",
+                    "w-6 h-6 p-1 text-inkwell-30",
+                    { "rotate-180": d.value }
+                  ])
+                }, null, 8, ["class"])
+              ], 6)) : T("", !0)
+            ], 34)) : T("", !0),
+            r("div", {
+              class: l([
+                "page-layout__main",
+                "block w-full grow leading-normal",
+                { "md:mb-4": v.value },
+                o.mainClass
+              ])
+            }, [
+              i(e.$slots, "default", {
+                sidebarCollapsed: d.value,
+                scrolledToTop: c.value,
+                scrolledToBottom: s.value
+              }, void 0, !0)
+            ], 2)
+          ], 2)
+        ], 6),
+        i(e.$slots, "overlay", {}, void 0, !0),
+        t.footerVisible ? (g(), h("div", {
+          key: 0,
+          class: l([
+            "page-layout__footer",
+            "fixed bottom-0 left-0 right-0 z-20 justify-center",
+            `bg-${o.footerBackgroundColor}`,
+            k(u).md ? "overflow-visible h-0 w-full px-6 flex" : "py-6 px-4 bg-white border-t border-gray-20 flex gap-4 sm-down:absolute sm-down:!py-4"
+          ])
+        }, [
+          k(u).md ? (g(), h("div", {
+            key: 0,
+            class: l([
+              "flex gap-4 items-end h-0 overflow-visible margin-x-auto w-full",
+              o.maxContentWidth
+            ])
+          }, [
+            r("div", {
+              class: l([
+                "shrink-0 w-0 transition-[width] duration-300",
+                v.value ? H.value : "hidden"
+              ])
+            }, null, 2),
+            r("div", {
+              class: l([
+                "grow pb-6 rounded-t-lg",
+                `bg-${o.containerBackgroundColor}`
+              ])
+            }, [
+              r("div", {
+                class: l([
+                  "page-layout__footer-bar",
+                  "flex items-center justify-center gap-4",
+                  "left-auto right-auto py-4",
+                  "rounded-lg shadow-[0_-2px_5px_0_rgba(0,0,0,0.05)] shadow-gray-10",
+                  `bg-${o.footerBackgroundColor}`,
+                  { "shadow-none": s.value },
+                  o.footerBarClass
+                ])
+              }, [
+                i(e.$slots, "footer", { scrolledToBottom: s.value }, void 0, !0)
+              ], 2)
+            ], 2)
+          ], 2)) : i(e.$slots, "footer", {
+            key: 1,
+            scrolledToBottom: s.value
+          }, void 0, !0)
+        ], 2)) : T("", !0)
+      ], 2);
+    };
+  }
+});
+export {
+  P as default
+};

package/dist/index134.js

@@ -1,257 +1,16 @@
-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 "./index169.js";
-import { useThrottleFn as k } from "./index180.js";
-const G = M({
-  name: "QPopover",
+import { defineComponent as e } from "vue";
+const a = e({
+  name: "QPageNavigation",
   props: {
-    /** Aligns the popover accordingly with the trigger.
-     * i.e. bottom, center, left, middle, right, top.
-     * Right, left or middle align goes with bottom or top position
-     * Top, bottom or center align goes with right or left position */
-    align: {
-      type: String,
-      default: "left"
-    },
-    /** Specifies whether to have a caret pointer or not. */
-    hasCaret: {
-      type: Boolean,
-      default: !0
-    },
-    /**  Toggles the content from the parent component. i.e. false, true. */
-    modelValue: {
-      type: Boolean,
-      default: !1
-    },
-    /** Positions the popover to the specified side of the trigger.
-     * i.e. bottom, left, right, top.
-     * Bottom or top position goes with right, left or middle align
-     * Right or left position goes with top, bottom or center align */
-    position: {
-      type: String,
-      default: "bottom"
-    },
-    /** Should the popover be repositioned and realigned automatically if it is outside viewport.
-     *  Moving element position from left to right, and top to bottom
-     * and alignment from right to left or top to bottom.
-    */
-    reposition: {
-      type: Boolean,
-      default: !0
-    },
-    /** Specifies the size of the popover. sm, md, lg, or filter-sm, filter-md, filter-lg for filter-style popovers. */
-    size: {
-      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"
-    },
-    /** Whether the teleported popover should follow the trigger on scroll.
-     * When true (default), popover repositions as user scrolls.
-     * When false, popover stays fixed at its initial opened position. */
-    followScroll: {
-      type: Boolean,
-      default: !0
-    },
-    /** Trigger popover on click, hover or both */
-    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: {
+    fixedTopOffset: {
       type: Number,
-      default: 20
+      default: 0
     }
   },
-  emits: ["update:modelValue"],
-  setup(o, { emit: a }) {
-    const f = h(!1), d = h(""), u = h(null), g = h(null), V = h({
-      top: "0",
-      left: "0",
-      transform: "none"
-    }), 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 l = n.top;
-        return window.innerHeight - l < r.height ? "bottom" : "top";
-      }
-    }, 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 l = n.left;
-        return window.innerWidth - l < r.width ? "left" : "right";
-      }
-    }, 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;
-    }, 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 t = u.value?.children[0];
-      if (t) {
-        const e = t.clientWidth, n = t.clientHeight;
-        switch (p.value) {
-          case "left":
-            d.value = `margin-left: ${e / 2 - 10}px;`;
-            break;
-          case "right":
-            d.value = `margin-right: ${e / 2 - 10}px;`;
-            break;
-          case "top":
-            d.value = `margin-top: ${n / 2 - 10}px;`;
-            break;
-          case "bottom":
-            d.value = `margin-bottom: ${n / 2 - 10}px;`;
-            break;
-        }
-      }
-    }, 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: `${c}px`,
-        transform: s
-      };
-    }, L = () => {
-      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(t.target))
-          return;
-      }
-      o.modelValue && a("update:modelValue", !1);
-    });
-    function Y() {
-      f.value = !1, b();
-    }
-    function $() {
-      f.value = !0, o.teleport ? O(() => {
-        m(), o.scrollIntoView && setTimeout(() => {
-          z(), B();
-        }, 100);
-      }) : !w(u.value?.children[1]) && o.reposition === !0 && x();
-    }
-    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: f,
-      offsetStyle: d,
-      popover: u,
-      teleportedStyle: V,
-      // Computed
-      alignment: p,
-      positioning: y,
-      // Methods
-      getAlignment: S,
-      getPositioning: R,
-      isElementInView: w,
-      onAfterLeave: Y,
-      onClick: I,
-      onClickOutside: W,
-      onEnter: $,
-      onMouseLeave: P,
-      onMouseOver: T,
-      updateTeleportedPosition: m
-    };
+  setup() {
+    return {};
   }
 });
 export {
-  G as default
+  a as default
 };

package/dist/{index132.js → index136.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 "./index192.js";
+import { getDocument as C, version as k, GlobalWorkerOptions as E } from "./index196.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({