@quoreadmin/ui 1.10.24 → 1.10.25

package/dist/index131.js

@@ -1,7 +1,7 @@
-import { defineComponent as te, useSlots as le, ref as n, computed as i, onMounted as ae, nextTick as _, onUnmounted as re, resolveComponent as se, openBlock as p, createElementBlock as b, normalizeClass as r, createElementVNode as d, normalizeStyle as S, unref as T, renderSlot as v, createCommentVNode as E, createVNode as ne } from "vue";
+import { defineComponent as ae, useSlots as re, ref as n, computed as c, watch as se, nextTick as q, onMounted as ne, onUnmounted as de, resolveComponent as ie, openBlock as C, createElementBlock as x, normalizeClass as s, createElementVNode as d, normalizeStyle as z, unref as B, renderSlot as m, createCommentVNode as L, createVNode as ue } from "vue";
 import u from "./index57.js";
-import de from "./index58.js";
-const ie = { class: "flex-grow m-0 font-bold sm-down:text-md md:text-lg leading-none text-left" }, ue = 100, ce = "4.5rem", ve = "4.8125rem", W = 80, me = 24, we = /* @__PURE__ */ te({
+import ce from "./index58.js";
+const ve = { class: "flex-grow m-0 font-bold sm-down:text-md md:text-lg leading-none text-left" }, me = 100, fe = "4.5rem", he = "4.8125rem", A = 80, ge = 24, ye = /* @__PURE__ */ ae({
   __name: "page-layout",
   props: {
     headerBackgroundColor: { default: "green-20" },
@@ -27,288 +27,302 @@ const ie = { class: "flex-grow m-0 font-bold sm-down:text-md md:text-lg leading-
     adjustForKeyboard: { type: Boolean, default: !1 }
   },
   emits: ["update:sidebarCollapsed"],
-  setup(t, { expose: I, emit: P }) {
-    const l = t, U = P, { deviceType: G } = de(), J = le(), k = n(null), y = n(null), R = n(null), C = n(null), m = n(!0), c = n(!1), f = n(!1), z = n(!1), B = n(0), V = n(0), D = n({
+  setup(o, { expose: P, emit: U }) {
+    const a = o, G = U, { deviceType: J } = ce(), Q = re(), $ = n(null), T = n(null), M = n(null), h = n(null), H = n(null), g = n(!0), v = n(!1), w = n(!1), V = n(!1), S = n(0), F = n(0), I = n({
       top: "50vh",
       left: "24px",
       transform: "translate(-50%, -50%)"
     });
-    let x = 0, H = !1, F = 0, M = 0, L = null;
-    const g = i(() => !!J.sidebar), h = i(() => l.headerFixed !== void 0 ? l.headerFixed : g.value), a = i({
-      get: () => l.sidebarCollapsed,
-      set: (e) => U("update:sidebarCollapsed", e)
-    }), Q = i(() => G.value === "desktop"), X = i(
-      () => g.value && l.sidebarCollapsible && u.md
-    ), Z = i(
-      () => `${l.headerTop + W}px`
-    ), ee = i(
-      () => `calc(100vh - ${l.headerTop + W}px)`
-    ), Y = i(
-      () => a.value ? l.sidebarCollapsedWidth : l.sidebarWidth
-    ), oe = i(() => {
-      const e = l.headerTop + W, o = window.innerHeight / 2 + 97, w = e + 16 + V.value / 2;
-      return `${Math.min(o, w)}px`;
+    let p = 0, k = !1, Y = 0, O = 0, W = null;
+    const f = c(() => !!Q.sidebar), b = c(() => a.headerFixed !== void 0 ? a.headerFixed : f.value), t = c({
+      get: () => a.sidebarCollapsed,
+      set: (e) => G("update:sidebarCollapsed", e)
+    }), X = c(() => J.value === "desktop"), Z = c(
+      () => f.value && a.sidebarCollapsible && u.md
+    ), ee = c(
+      () => `${a.headerTop + A}px`
+    ), oe = c(
+      () => `calc(100vh - ${a.headerTop + A}px)`
+    ), D = c(
+      () => t.value ? a.sidebarCollapsedWidth : a.sidebarWidth
+    ), te = c(() => {
+      const e = a.headerTop + A, l = window.innerHeight / 2 + 97, i = e + 16 + F.value / 2;
+      return `${Math.min(l, i)}px`;
     }), j = () => {
-      const e = y.value, o = !u.md && e;
-      return {
-        scrollY: o ? e.scrollTop : window.scrollY,
-        atTop: o ? e.scrollTop <= 0 : window.scrollY <= 0,
-        atBottom: o ? e.scrollTop + e.clientHeight >= e.scrollHeight : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight
-      };
-    }, $ = () => {
-      H || (window.requestAnimationFrame(() => {
-        const { scrollY: e, atTop: o, atBottom: s } = j();
-        if (m.value = o, c.value = s, l.headerHideOnScroll && (h.value || !u.md)) {
-          if (e <= l.headerHideScrollThreshold) {
-            f.value = !1, x = e, H = !1;
+      const e = T.value;
+      if (!u.md && e)
+        return {
+          scrollY: e.scrollTop,
+          atTop: e.scrollTop <= 0,
+          atBottom: e.scrollTop + e.clientHeight >= e.scrollHeight
+        };
+      const r = window.scrollY;
+      let i = 0;
+      f.value && u.md && !t.value && h.value && (i = h.value.scrollTop);
+      const E = Math.max(r, i), R = r <= 0 && i <= 0, le = r + window.innerHeight >= document.documentElement.scrollHeight;
+      return { scrollY: E, atTop: R, atBottom: le };
+    }, y = () => {
+      k || (k = !0, window.requestAnimationFrame(() => {
+        const { scrollY: e, atTop: l, atBottom: r } = j();
+        if (g.value = l, v.value = r, a.headerHideOnScroll && (b.value || !u.md)) {
+          if (e <= a.headerHideScrollThreshold) {
+            w.value = !1, p = e, k = !1;
             return;
           }
-          if (s) {
-            x = e, H = !1;
+          if (r) {
+            p = e, k = !1;
             return;
           }
-          const K = Math.max(0, e), N = K - x;
-          Math.abs(N) > 15 && (f.value = N > 0, x = K);
+          const E = Math.max(0, e), R = E - p;
+          Math.abs(R) > 15 && (w.value = R > 0, p = E);
         } else
-          f.value = !1;
-        O(), H = !1;
-      }), H = !0);
-    }, q = () => {
-      a.value = !a.value, _(O);
-    }, O = () => {
-      if (!a.value || !R.value) return;
-      const e = R.value.getBoundingClientRect(), o = Math.max(0, e.top), s = Math.min(window.innerHeight, e.bottom);
-      s <= o || (D.value = {
-        top: `${(o + s) / 2}px`,
-        left: `${e.left + me}px`,
+          w.value = !1;
+        _(), k = !1;
+      }));
+    }, K = () => {
+      t.value = !t.value, q(_);
+    }, _ = () => {
+      if (!t.value || !M.value) return;
+      const e = M.value.getBoundingClientRect(), l = Math.max(0, e.top), r = Math.min(window.innerHeight, e.bottom);
+      r <= l || (I.value = {
+        top: `${(l + r) / 2}px`,
+        left: `${e.left + ge}px`,
         transform: "translate(-50%, -50%)"
       });
-    }, A = () => {
-      if (!l.adjustForKeyboard || u.md) return;
-      const e = window.visualViewport?.height ?? window.innerHeight, o = F - e;
-      if (o <= ue)
-        F = window.innerHeight, M = k.value?.clientHeight ?? window.innerHeight, B.value = 0;
+    }, N = () => {
+      if (!a.adjustForKeyboard || u.md) return;
+      const e = window.visualViewport?.height ?? window.innerHeight, l = Y - e;
+      if (l <= me)
+        Y = window.innerHeight, O = $.value?.clientHeight ?? window.innerHeight, S.value = 0;
       else {
-        const s = k.value?.clientHeight ?? window.innerHeight, w = Math.max(0, M - s);
-        B.value = Math.max(0, o - w);
+        const r = $.value?.clientHeight ?? window.innerHeight, i = Math.max(0, O - r);
+        S.value = Math.max(0, l - i);
       }
     };
-    return ae(() => {
-      F = window.innerHeight, M = k.value?.clientHeight ?? window.innerHeight, window.addEventListener("scroll", $, { passive: !0 }), y.value && y.value.addEventListener("scroll", $, {
+    return se(t, () => {
+      q(() => {
+        p = j().scrollY;
+      });
+    }), ne(() => {
+      Y = window.innerHeight, O = $.value?.clientHeight ?? window.innerHeight, window.addEventListener("scroll", y, { passive: !0 }), T.value && T.value.addEventListener("scroll", y, {
+        passive: !0
+      }), h.value && h.value.addEventListener("scroll", y, {
         passive: !0
       });
-      const { scrollY: e, atTop: o, atBottom: s } = j();
-      x = e, m.value = o, c.value = s, l.adjustForKeyboard && window.visualViewport?.addEventListener("resize", A), _(O), C.value && (L = new ResizeObserver(() => {
-        V.value = C.value?.offsetHeight ?? 0;
-      }), L.observe(C.value), V.value = C.value.offsetHeight);
-    }), re(() => {
-      window.removeEventListener("scroll", $), y.value?.removeEventListener("scroll", $), window.visualViewport?.removeEventListener("resize", A), L?.disconnect();
-    }), I({ scrolledToTop: m, scrolledToBottom: c, headerHidden: f, keyboardOffset: B }), (e, o) => {
-      const s = se("q-icon");
-      return p(), b("div", {
+      const { scrollY: e, atTop: l, atBottom: r } = j();
+      p = e, g.value = l, v.value = r, a.adjustForKeyboard && window.visualViewport?.addEventListener("resize", N), q(_), H.value && (W = new ResizeObserver(() => {
+        F.value = H.value?.offsetHeight ?? 0;
+      }), W.observe(H.value), F.value = H.value.offsetHeight);
+    }), de(() => {
+      window.removeEventListener("scroll", y), T.value?.removeEventListener("scroll", y), h.value?.removeEventListener("scroll", y), window.visualViewport?.removeEventListener("resize", N), W?.disconnect();
+    }), P({ scrolledToTop: g, scrolledToBottom: v, headerHidden: w, keyboardOffset: S }), (e, l) => {
+      const r = ie("q-icon");
+      return C(), x("div", {
         ref_key: "rootRef",
-        ref: k,
-        class: r([
+        ref: $,
+        class: s([
           "page-layout",
-          `bg-${t.containerBackgroundColor}`,
+          `bg-${o.containerBackgroundColor}`,
           "sm-down:absolute sm-down:inset-x-0 sm-down:top-0 sm-down:bottom-0"
         ])
       }, [
         d("div", {
-          class: r([
+          class: s([
             "page-layout__header",
             "flex items-center justify-center",
-            T(u).md ? `bg-${t.containerBackgroundColor}` : "",
-            h.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": f.value }
+            B(u).md ? `bg-${o.containerBackgroundColor}` : "",
+            b.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": w.value }
           ]),
-          style: S(h.value ? { top: `${t.headerTop}px` } : void 0)
+          style: z(b.value ? { top: `${o.headerTop}px` } : void 0)
         }, [
           d("div", {
-            class: r([
+            class: s([
               "page-layout__header-bar",
               "flex items-center text-left md:rounded-lg",
-              `md:h-[3.5rem] ${t.maxContentWidth} w-full p-4 md:pl-6`,
+              `md:h-[3.5rem] ${o.maxContentWidth} w-full p-4 md:pl-6`,
               "sm-down:py-6 sm-down:h-[4.5rem]",
-              `bg-${t.headerBackgroundColor}`,
-              `text-${t.headerColor}`,
-              t.headerBarClass,
+              `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": h.value && (!m.value || t.headerShowShadow)
+                "md:shadow-[0_0.375rem_0.5rem_0_rgba(0,0,0,0.05)] md:shadow-gray-20": b.value && (!g.value || o.headerShowShadow)
               }
             ])
           }, [
-            d("h1", ie, [
-              v(e.$slots, "header", {
-                scrolledToTop: m.value,
-                scrolledToBottom: c.value
+            d("h1", ve, [
+              m(e.$slots, "header", {
+                scrolledToTop: g.value,
+                scrolledToBottom: v.value
               }, void 0, !0)
             ]),
-            v(e.$slots, "header-actions", {}, void 0, !0)
+            m(e.$slots, "header-actions", {}, void 0, !0)
           ], 2)
         ], 6),
         d("div", {
           ref_key: "contentRef",
-          ref: y,
-          class: r([
+          ref: T,
+          class: s([
             "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]": h.value },
-            { "md:mb-[0.5rem]": h.value && l.footerVisible },
-            t.contentClass
+            { "md:pt-[4.5rem]": b.value },
+            { "md:mb-[0.5rem]": b.value && a.footerVisible },
+            o.contentClass
           ]),
-          style: S({
-            "--sm-top": f.value ? "0px" : ce,
-            "--sm-bottom": l.footerVisible ? ve : "0px",
-            "--keyboard-offset": `${B.value}px`
+          style: z({
+            "--sm-top": w.value ? "0px" : fe,
+            "--sm-bottom": a.footerVisible ? he : "0px",
+            "--keyboard-offset": `${S.value}px`
           })
         }, [
           d("div", {
-            class: r([
+            class: s([
               "page-layout__content-inner",
-              { "md:flex md:gap-4": g.value }
+              { "md:flex md:gap-4": f.value }
             ])
           }, [
-            g.value && T(u).md ? (p(), b("div", {
+            f.value && B(u).md ? (C(), x("div", {
               key: 0,
               ref_key: "sidebarRef",
-              ref: R,
-              class: r([
+              ref: M,
+              class: s([
                 "page-layout__sidebar",
                 "relative shrink-0 flex flex-col gap-4",
                 "md:transition-[width] md:duration-300",
-                Y.value,
-                { "!overflow-hidden": a.value },
-                t.sidebarClass
+                D.value,
+                { "!overflow-hidden": t.value },
+                o.sidebarClass
               ]),
-              onMouseenter: o[0] || (o[0] = (w) => z.value = !0),
-              onMouseleave: o[1] || (o[1] = (w) => z.value = !1)
+              onMouseenter: l[0] || (l[0] = (i) => V.value = !0),
+              onMouseleave: l[1] || (l[1] = (i) => V.value = !1)
             }, [
               d("div", {
-                class: r([
+                ref_key: "sidebarInnerRef",
+                ref: h,
+                class: s([
                   "page-layout__sidebar-inner",
-                  a.value ? "absolute inset-0 !overflow-hidden" : "fixed overflow-y-auto",
+                  t.value ? "absolute inset-0 !overflow-hidden" : "fixed overflow-y-auto",
                   "z-10 md:pb-6 md:pt-4",
-                  `bg-${t.containerBackgroundColor}`,
-                  !a.value && Y.value
+                  `bg-${o.containerBackgroundColor}`,
+                  !t.value && D.value
                 ]),
-                style: S(a.value ? void 0 : {
-                  top: Z.value,
-                  height: ee.value
+                style: z(t.value ? void 0 : {
+                  top: ee.value,
+                  height: oe.value
                 })
               }, [
                 d("div", {
                   ref_key: "sidebarContentRef",
-                  ref: C
+                  ref: H
                 }, [
-                  v(e.$slots, "sidebar", {}, void 0, !0)
+                  m(e.$slots, "sidebar", {}, void 0, !0)
                 ], 512)
               ], 6),
-              a.value ? (p(), b("div", {
+              t.value ? (C(), x("div", {
                 key: 0,
                 class: "absolute inset-0 cursor-pointer rounded-lg bg-white z-10",
-                onClick: q
-              })) : E("", !0),
-              X.value && (!Q.value || z.value || a.value) ? (p(), b("div", {
+                onClick: K
+              })) : L("", !0),
+              Z.value && (!X.value || V.value || t.value) ? (C(), x("div", {
                 key: 1,
-                class: r([
+                class: s([
                   "page-layout__sidebar-toggle",
                   "cursor-pointer fixed z-30",
                   "bg-white rounded",
-                  !a.value && "transition-all duration-300 ease-in-out",
-                  { "border border-gray-10": !a.value }
+                  !t.value && "transition-all duration-300 ease-in-out",
+                  { "border border-gray-10": !t.value }
                 ]),
-                style: S(
-                  a.value ? D.value : {
-                    top: oe.value,
-                    marginLeft: T(u).lg ? "22.125rem" : "18.125rem"
+                style: z(
+                  t.value ? I.value : {
+                    top: te.value,
+                    marginLeft: B(u).lg ? "22.125rem" : "18.125rem"
                   }
                 ),
-                onClick: q
+                onClick: K
               }, [
-                v(e.$slots, "sidebar-toggle", { collapsed: a.value }, () => [
-                  ne(s, {
+                m(e.$slots, "sidebar-toggle", { collapsed: t.value }, () => [
+                  ue(r, {
                     icon: "double-chevron-right",
                     color: "inkwell-30",
                     type: "",
-                    class: r([
+                    class: s([
                       "page-layout__sidebar-toggle-icon",
                       "w-6 h-6 p-1 text-inkwell-30",
-                      { "rotate-180": a.value }
+                      { "rotate-180": t.value }
                     ])
                   }, null, 8, ["class"])
                 ], !0)
-              ], 6)) : E("", !0)
-            ], 34)) : E("", !0),
+              ], 6)) : L("", !0)
+            ], 34)) : L("", !0),
             d("div", {
-              class: r([
+              class: s([
                 "page-layout__main",
                 "block w-full grow leading-normal",
-                { "md:mb-4": g.value },
-                t.mainClass
+                { "md:mb-4": f.value },
+                o.mainClass
               ])
             }, [
-              v(e.$slots, "default", {
-                sidebarCollapsed: a.value,
-                scrolledToTop: m.value,
-                scrolledToBottom: c.value
+              m(e.$slots, "default", {
+                sidebarCollapsed: t.value,
+                scrolledToTop: g.value,
+                scrolledToBottom: v.value
               }, void 0, !0)
             ], 2)
           ], 2)
         ], 6),
-        v(e.$slots, "overlay", {}, void 0, !0),
-        l.footerVisible ? (p(), b("div", {
+        m(e.$slots, "overlay", {}, void 0, !0),
+        a.footerVisible ? (C(), x("div", {
           key: 0,
-          class: r([
+          class: s([
             "page-layout__footer",
             "fixed bottom-0 left-0 right-0 z-20 justify-center",
-            `bg-${t.footerBackgroundColor}`,
-            T(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"
+            `bg-${o.footerBackgroundColor}`,
+            B(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"
           ])
         }, [
-          T(u).md ? (p(), b("div", {
+          B(u).md ? (C(), x("div", {
             key: 0,
-            class: r([
+            class: s([
               "flex gap-4 items-end h-0 overflow-visible margin-x-auto w-full",
-              t.maxContentWidth
+              o.maxContentWidth
             ])
           }, [
             d("div", {
-              class: r([
+              class: s([
                 "shrink-0 w-0 transition-[width] duration-300",
-                g.value ? Y.value : "hidden"
+                f.value ? D.value : "hidden"
               ])
             }, null, 2),
             d("div", {
-              class: r([
+              class: s([
                 "grow pb-6 rounded-t-lg",
-                `bg-${t.containerBackgroundColor}`
+                `bg-${o.containerBackgroundColor}`
               ])
             }, [
               d("div", {
-                class: r([
+                class: s([
                   "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-${t.footerBackgroundColor}`,
-                  { "shadow-none": c.value },
-                  t.footerBarClass
+                  `bg-${o.footerBackgroundColor}`,
+                  { "shadow-none": v.value },
+                  o.footerBarClass
                 ])
               }, [
-                v(e.$slots, "footer", { scrolledToBottom: c.value }, void 0, !0)
+                m(e.$slots, "footer", { scrolledToBottom: v.value }, void 0, !0)
               ], 2)
             ], 2)
-          ], 2)) : v(e.$slots, "footer", {
+          ], 2)) : m(e.$slots, "footer", {
             key: 1,
-            scrolledToBottom: c.value
+            scrolledToBottom: v.value
           }, void 0, !0)
-        ], 2)) : E("", !0)
+        ], 2)) : L("", !0)
       ], 2);
     };
   }
 });
 export {
-  we as default
+  ye as default
 };