@quoreadmin/ui 1.10.6 → 1.10.9

package/dist/index131.js

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