@arcblock/ux 3.0.9 → 3.0.11

package/lib/Header/responsive-header.js

@@ -1,44 +1,43 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { useState as y } from "react";
-import { useReactive as v, useCreation as h } from "ahooks";
-import { Close as g, Menu as b } from "@mui/icons-material";
-import { Container as x, useTheme as w, useMediaQuery as P, Drawer as k, Button as C } from "@mui/material";
-import i from "./header.js";
-import { styled as c } from "../Theme/index.js";
-function D({ prepend: n, children: r = null, ...s }) {
-  const a = w(), l = P(a.breakpoints.down("md")), [t, m] = y(!1), u = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = v({
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { useReactive as y, useCreation as v } from "ahooks";
+import { Close as h, Menu as g } from "@mui/icons-material";
+import { Container as b, useTheme as x, useMediaQuery as w, Drawer as P, Button as k } from "@mui/material";
+import p from "./header.js";
+import { styled as i } from "../Theme/index.js";
+function z({ prepend: n, children: r = null, ...s }) {
+  const a = x(), l = w(a.breakpoints.down("md")), [t, m] = f(!1), u = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = y({
     changed: !1,
     value: "",
     priority: ""
   });
-  return h(() => {
-    var d;
-    if ((d = document.documentElement) != null && d.style) {
-      const p = () => {
+  return v(() => {
+    if (document.documentElement?.style) {
+      const d = () => {
         e.changed && (e.value ? document.documentElement.style.setProperty("overflow", e.value, e.priority) : document.documentElement.style.removeProperty("overflow"), e.value = "", e.priority = "", e.changed = !1);
       };
-      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : p(), p;
+      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : d(), d;
     }
     return () => {
     };
-  }, [t]), r ? /* @__PURE__ */ f(
-    M,
+  }, [t]), r ? /* @__PURE__ */ c(
+    C,
     {
       prepend: n || /* @__PURE__ */ o(
-        C,
+        k,
         {
           sx: { color: a.palette.grey[500] },
           className: "header-menu",
           "aria-label": "header menu button",
           onClick: () => m(!t),
-          children: t ? /* @__PURE__ */ o(g, {}) : /* @__PURE__ */ o(b, {})
+          children: t ? /* @__PURE__ */ o(h, {}) : /* @__PURE__ */ o(g, {})
         }
       ),
       ...s,
       children: [
         !l && u,
         l && /* @__PURE__ */ o(
-          k,
+          P,
           {
             open: t,
             onClose: () => m(!1),
@@ -63,14 +62,14 @@ function D({ prepend: n, children: r = null, ...s }) {
                 }
               }
             },
-            children: /* @__PURE__ */ o(E, { children: u })
+            children: /* @__PURE__ */ o(M, { children: u })
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ o(i, { prepend: n, ...s });
+  ) : /* @__PURE__ */ o(p, { prepend: n, ...s });
 }
-const M = c(i)`
+const C = i(p)`
   .header-menu {
     display: none;
   }
@@ -80,7 +79,7 @@ const M = c(i)`
       margin-right: 12px;
     }
   }
-`, E = c(x)`
+`, M = i(b)`
   padding-top: 8px;
   padding-bottom: 16px;
   .navmenu {
@@ -92,5 +91,5 @@ const M = c(i)`
   }
 `;
 export {
-  D as default
+  z as default
 };

package/lib/Layout/dashboard/index.js

@@ -1,8 +1,8 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { useMemo as M, useEffect as u } from "react";
-import { useLocation as x, matchPath as z } from "react-router-dom";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useMemo as M, useEffect as f } from "react";
+import { useLocation as p, matchPath as z } from "react-router-dom";
 import D from "react-helmet";
-import { useTheme as R, Box as i, Container as T } from "@mui/material";
+import { useTheme as R, Box as d, Container as T } from "@mui/material";
 import V from "clsx";
 import { CloseFullscreen as B, OpenInFull as U } from "@mui/icons-material";
 import E from "../dashboard-legacy/index.js";
@@ -11,78 +11,69 @@ import G from "../../Header/responsive-header.js";
 import O from "../../NavMenu/nav-menu.js";
 import "../../NavMenu/products.js";
 import q from "../../Footer/index.js";
-import p from "./sidebar.js";
-import { styled as g } from "../../Theme/index.js";
-import { Link as v } from "./external-link.js";
+import b from "./sidebar.js";
+import { styled as u } from "../../Theme/index.js";
+import { Link as x } from "./external-link.js";
 import { FullPageProvider as A, useFullPage as J } from "./full-page.js";
-function K({ closeMenu: o, ...a }) {
-  const e = x();
-  return u(() => {
-    o();
-  }, [e]), /* @__PURE__ */ r(O, { ...a });
+function K({ closeMenu: e, ...a }) {
+  const o = p();
+  return f(() => {
+    e();
+  }, [o]), /* @__PURE__ */ r(O, { ...a });
 }
-function w(o, a) {
-  return o.map((e) => {
-    var s;
-    return (s = e.children) != null && s.length ? {
-      ...e,
-      label: e.title,
-      children: w(e.children, a)
-    } : {
-      ...e,
-      label: /* @__PURE__ */ r(v, { to: e.url, external: e.external, children: e.title }),
-      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-      active: e.external ? e.active : !!z({ path: e.url, end: !1 }, a.pathname)
-    };
+function g(e, a) {
+  return e.map((o) => o.children?.length ? {
+    ...o,
+    label: o.title,
+    children: g(o.children, a)
+  } : {
+    ...o,
+    label: /* @__PURE__ */ r(x, { to: o.url, external: o.external, children: o.title }),
+    // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+    active: o.external ? o.active : !!z({ path: o.url, end: !1 }, a.pathname)
   });
 }
 function Q({
-  title: o = "Home",
+  title: e = "Home",
   headerProps: a = {},
-  links: e = [],
-  sidebarWidth: s = 120,
-  fullWidth: y = !1,
-  dense: c = "auto",
-  footerProps: N = {},
-  sx: P = {},
-  children: F,
-  ...m
+  links: o = [],
+  sidebarWidth: v = 120,
+  fullWidth: w = !1,
+  dense: l = "auto",
+  footerProps: y = {},
+  sx: N = {},
+  children: P,
+  ...h
 }) {
-  const b = R(), { inFullPage: L, showToggleButton: W, headerVisible: $, footerVisible: C, sidebarVisible: H, toggleFullPage: _ } = J(), f = x(), l = M(() => w(e, f), [f, e]), S = l.some((t) => {
-    var d;
-    return !!((d = t.children) != null && d.length);
-  }), n = c === "auto" ? l.length >= 8 || S : c, j = V("dashboard", { "dashboard-dense": n }, m.className), I = {
-    homeLink: (t) => {
-      var d;
-      return /* @__PURE__ */ r(v, { to: ((d = window.blocklet) == null ? void 0 : d.prefix) || "/", children: t });
-    },
+  const c = R(), { inFullPage: F, showToggleButton: L, headerVisible: W, footerVisible: $, sidebarVisible: C, toggleFullPage: H } = J(), m = p(), s = M(() => g(o, m), [m, o]), _ = s.some((t) => !!t.children?.length), i = l === "auto" ? s.length >= 8 || _ : l, S = V("dashboard", { "dashboard-dense": i }, h.className), j = {
+    homeLink: (t) => /* @__PURE__ */ r(x, { to: window.blocklet?.prefix || "/", children: t }),
     ...a
   };
-  return u(() => {
+  return f(() => {
     const { searchParams: t } = new URL(window.location.href);
     t.get("inviter") && window.localStorage.setItem("inviter", t.get("inviter"));
-  }, []), /* @__PURE__ */ h(X, { sx: P, ...m, className: j, sidebarWidth: s, children: [
-    /* @__PURE__ */ r(D, { title: o }, o),
-    $ && /* @__PURE__ */ r(Y, { ...I, className: "dashboard-header", children: e != null && e.length ? ({ isMobile: t, closeMenu: d }) => t ? /* @__PURE__ */ r(
+  }, []), /* @__PURE__ */ n(X, { sx: N, ...h, className: S, sidebarWidth: v, children: [
+    /* @__PURE__ */ r(D, { title: e }, e),
+    W && /* @__PURE__ */ r(Y, { ...j, className: "dashboard-header", children: o?.length ? ({ isMobile: t, closeMenu: I }) => t ? /* @__PURE__ */ r(
       K,
       {
         mode: "inline",
-        items: l,
-        closeMenu: d,
+        items: s,
+        closeMenu: I,
         bgColor: "transparent",
-        activeTextColor: b.palette.primary.main
+        activeTextColor: c.palette.primary.main
       }
     ) : null : null }),
-    /* @__PURE__ */ h(
-      i,
+    /* @__PURE__ */ n(
+      d,
       {
         className: "dashboard-body",
         sx: {
           display: "flex"
         },
         children: [
-          !!(e != null && e.length) && H && /* @__PURE__ */ r(
-            i,
+          !!o?.length && C && /* @__PURE__ */ r(
+            d,
             {
               className: "dashboard-sidebar",
               sx: {
@@ -91,12 +82,12 @@ function Q({
                   md: "block"
                 }
               },
-              children: n ? /* @__PURE__ */ r(p, { links: e, dense: n }) : /* @__PURE__ */ r(i, { className: "dashboard-sidebar-container", children: /* @__PURE__ */ r(p, { links: e, dense: n }) })
+              children: i ? /* @__PURE__ */ r(b, { links: o, dense: i }) : /* @__PURE__ */ r(d, { className: "dashboard-sidebar-container", children: /* @__PURE__ */ r(b, { links: o, dense: i }) })
             }
           ),
-          /* @__PURE__ */ h(i, { className: "dashboard-main", id: "arc__dashboard-main", children: [
-            W && /* @__PURE__ */ r(
-              i,
+          /* @__PURE__ */ n(d, { className: "dashboard-main", id: "arc__dashboard-main", children: [
+            L && /* @__PURE__ */ r(
+              d,
               {
                 sx: {
                   position: "absolute",
@@ -112,26 +103,26 @@ function Q({
                   borderRadius: 1,
                   cursor: "pointer"
                 },
-                onClick: _,
-                children: L ? /* @__PURE__ */ r(B, { style: { fontSize: 18 } }) : /* @__PURE__ */ r(U, { style: { fontSize: 18 } })
+                onClick: H,
+                children: F ? /* @__PURE__ */ r(B, { style: { fontSize: 18 } }) : /* @__PURE__ */ r(U, { style: { fontSize: 18 } })
               }
             ),
-            /* @__PURE__ */ r(T, { className: "dashboard-content", id: "arc__dashboard-content", ...y && { maxWidth: !1 }, children: F }),
-            C && /* @__PURE__ */ r(q, { dark: b.palette.mode === "dark", ...N })
+            /* @__PURE__ */ r(T, { className: "dashboard-content", id: "arc__dashboard-content", ...w && { maxWidth: !1 }, children: P }),
+            $ && /* @__PURE__ */ r(q, { dark: c.palette.mode === "dark", ...y })
           ] })
         ]
       }
     )
   ] });
 }
-const X = g("div", {
-  shouldForwardProp: (o) => o !== "sidebarWidth"
+const X = u("div", {
+  shouldForwardProp: (e) => e !== "sidebarWidth"
 })`
   &.dashboard {
     display: flex;
     flex-direction: column;
     height: 100vh;
-    background-color: ${({ theme: o }) => o.palette.background.default};
+    background-color: ${({ theme: e }) => e.palette.background.default};
   }
   .dashboard-body {
     overflow: hidden;
@@ -140,14 +131,14 @@ const X = g("div", {
   .dashboard-sidebar {
     box-sizing: border-box;
     flex: 0 0 auto;
-    width: ${(o) => o.sidebarWidth}px;
+    width: ${(e) => e.sidebarWidth}px;
     overflow: hidden;
     &:hover {
       overflow-y: auto;
     }
   }
   .dashboard-sidebar-container {
-    width: ${(o) => o.sidebarWidth}px;
+    width: ${(e) => e.sidebarWidth}px;
   }
   .dashboard-main {
     display: flex;
@@ -162,15 +153,15 @@ const X = g("div", {
   &.dashboard-dense {
     .dashboard-header {
       border-bottom: 1px solid;
-      border-color: ${({ theme: o }) => o.palette.divider};
+      border-color: ${({ theme: e }) => e.palette.divider};
     }
     .dashboard-sidebar {
       width: 256px;
       border-right: 1px solid;
-      border-color: ${({ theme: o }) => o.palette.divider};
+      border-color: ${({ theme: e }) => e.palette.divider};
     }
   }
-  ${(o) => o.theme.breakpoints.up("md")} {
+  ${(e) => e.theme.breakpoints.up("md")} {
     .header-logo {
       display: flex;
       justify-content: center;
@@ -182,16 +173,16 @@ const X = g("div", {
       }
     }
   }
-`, Y = g(G)`
+`, Y = u(G)`
   .header-container {
     max-width: 100%;
   }
 `;
 function ue({
-  legacy: o = !0,
+  legacy: e = !0,
   ...a
 }) {
-  return o ? /* @__PURE__ */ r(E, { ...a }) : /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(Q, { ...a }) });
+  return e ? /* @__PURE__ */ r(E, { ...a }) : /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(Q, { ...a }) });
 }
 export {
   ue as default

package/lib/Layout/dashboard/sidebar.js

@@ -1,40 +1,39 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Typography as b } from "@mui/material";
-import d from "clsx";
-import { styled as c } from "../../Theme/index.js";
-import { NavLink as h } from "./external-link.js";
-function p(e, i) {
-  var n;
-  if ((n = e.children) != null && n.length)
-    return m(e, i);
-  const { url: a, icon: r, title: s, showBadge: u, external: l, active: g } = e;
+import { Typography as x } from "@mui/material";
+import n from "clsx";
+import { styled as b } from "../../Theme/index.js";
+import { NavLink as c } from "./external-link.js";
+function d(e, i) {
+  if (e.children?.length)
+    return h(e, i);
+  const { url: a, icon: r, title: p, showBadge: s, external: l, active: u } = e;
   return /* @__PURE__ */ t("li", { className: "layout-sidebar-item", children: /* @__PURE__ */ o(
-    h,
+    c,
     {
       external: l,
       to: a,
-      className: ({ isActive: x }) => d("layout-sidebar-link", { "layout-sidebar-link--active": l ? g : x }),
+      className: ({ isActive: g }) => n("layout-sidebar-link", { "layout-sidebar-link--active": l ? u : g }),
       children: [
-        r && /* @__PURE__ */ t("span", { className: `layout-sidebar-icon ${u ? "layout-sidebar-badge" : ""}`, children: r }),
-        /* @__PURE__ */ t(b, { component: "span", className: "layout-sidebar-link-text", children: s })
+        r && /* @__PURE__ */ t("span", { className: `layout-sidebar-icon ${s ? "layout-sidebar-badge" : ""}`, children: r }),
+        /* @__PURE__ */ t(x, { component: "span", className: "layout-sidebar-link-text", children: p })
       ]
     }
   ) }, `${a}-${i}`);
 }
-function m(e, i) {
+function h(e, i) {
   return /* @__PURE__ */ o("li", { className: "layout-sidebar-group", children: [
     /* @__PURE__ */ t("span", { className: "layout-sidebar-group-title", children: e.title }),
-    /* @__PURE__ */ t("ul", { children: e.children.map(p) })
+    /* @__PURE__ */ t("ul", { children: e.children.map(d) })
   ] }, `group-${e.title}-${i}`);
 }
-function z({ links: e, addons: i = void 0, dense: a = !1, ...r }) {
-  return /* @__PURE__ */ o(f, { ...r, className: d({ "layout-sidebar-dense": a }), children: [
-    /* @__PURE__ */ t("ul", { children: e.map(p) }),
+function N({ links: e, addons: i = void 0, dense: a = !1, ...r }) {
+  return /* @__PURE__ */ o(y, { ...r, className: n({ "layout-sidebar-dense": a }), children: [
+    /* @__PURE__ */ t("ul", { children: e.map(d) }),
     /* @__PURE__ */ t("div", { style: { flex: 1 } }),
     i
   ] });
 }
-const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", f = c("div")`
+const m = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", y = b("div")`
   display: flex;
   flex-direction: column;
   ul {
@@ -53,7 +52,7 @@ const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230,
     &:hover,
     &.layout-sidebar-link--active {
       color: ${(e) => e.theme.palette.primary.main};
-      background: ${y};
+      background: ${m};
       border-left-color: ${(e) => e.theme.palette.primary.main};
     }
   }
@@ -161,5 +160,5 @@ const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230,
   }
 `;
 export {
-  z as default
+  N as default
 };

package/lib/Layout/dashboard-legacy/index.js

@@ -1,13 +1,13 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as c, useEffect as P } from "react";
-import H from "react-helmet";
-import { Box as h, Drawer as S, Container as W } from "@mui/material";
-import { useSize as j } from "ahooks";
-import C from "./sidebar.js";
-import F from "./header.js";
-import O from "../../Footer/index.js";
-import { styled as T } from "../../Theme/index.js";
-const B = T("div")`
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as p, useEffect as $ } from "react";
+import P from "react-helmet";
+import { Box as c, Drawer as z, Container as H } from "@mui/material";
+import { useSize as S } from "ahooks";
+import W from "./sidebar.js";
+import j from "./header.js";
+import C from "../../Footer/index.js";
+import { styled as F } from "../../Theme/index.js";
+const O = F("div")`
   &.dashboard {
     display: flex;
     flex-direction: column;
@@ -38,46 +38,46 @@ const B = T("div")`
 `;
 function R({
   links: o = [],
-  brand: d = "",
-  description: f = "",
-  images: b,
-  title: u = "Home",
-  brandAddon: w = void 0,
-  headerAddon: x = void 0,
-  prefix: _ = "/images",
-  fullWidth: g = !1,
-  contentLayout: y = "column",
-  className: v = "",
-  homeUrl: N = "/",
-  logo: s = void 0,
-  children: k,
-  ...M
+  brand: t = "",
+  description: h = "",
+  images: f,
+  title: b = "Home",
+  brandAddon: u = void 0,
+  headerAddon: w = void 0,
+  prefix: x = "/images",
+  fullWidth: _ = !1,
+  contentLayout: g = "column",
+  className: y = "",
+  homeUrl: v = "/",
+  logo: d = void 0,
+  children: N,
+  ...k
 }) {
-  const r = j(document.body), a = (r == null ? void 0 : r.width) || 0, [n, D] = c(a >= 960 ? "permanent" : "temporary"), [i, l] = c(n === "permanent");
-  P(() => {
-    const p = a >= 960 ? "permanent" : "temporary";
-    D(p), l(p !== "temporary");
-  }, [a]);
-  const m = () => {
-    l(!i);
-  }, $ = g || y === "row";
-  return /* @__PURE__ */ t(B, { className: `dashboard ${v}`, ...M, children: [
-    /* @__PURE__ */ e(H, { title: `${u}-${d}` }),
+  const r = S(document.body)?.width || 0, [s, M] = p(r >= 960 ? "permanent" : "temporary"), [n, i] = p(s === "permanent");
+  $(() => {
+    const m = r >= 960 ? "permanent" : "temporary";
+    M(m), i(m !== "temporary");
+  }, [r]);
+  const l = () => {
+    i(!n);
+  }, D = _ || g === "row";
+  return /* @__PURE__ */ a(O, { className: `dashboard ${y}`, ...k, children: [
+    /* @__PURE__ */ e(P, { title: `${b}-${t}` }),
     /* @__PURE__ */ e(
-      F,
+      j,
       {
         className: "dashboard__header",
-        onToggleMenu: m,
-        brand: d,
-        brandAddon: w,
-        description: f,
-        addons: x,
-        homeUrl: N,
-        logo: s
+        onToggleMenu: l,
+        brand: t,
+        brandAddon: u,
+        description: h,
+        addons: w,
+        homeUrl: v,
+        logo: d
       }
     ),
-    /* @__PURE__ */ t(
-      h,
+    /* @__PURE__ */ a(
+      c,
       {
         className: "dashboard__body",
         sx: {
@@ -85,20 +85,20 @@ function R({
         },
         children: [
           /* @__PURE__ */ e(
-            S,
+            z,
             {
-              variant: n,
+              variant: s,
               className: "drawer",
               classes: { paper: "drawerPaper" },
-              open: i,
-              onClose: m,
+              open: n,
+              onClose: l,
               ModalProps: { disablePortal: !0, keepMounted: !0 },
-              children: /* @__PURE__ */ e(C, { className: "dashboard__sidebar", images: b, links: o, prefix: _, logo: s })
+              children: /* @__PURE__ */ e(W, { className: "dashboard__sidebar", images: f, links: o, prefix: x, logo: d })
             }
           ),
-          /* @__PURE__ */ t(h, { className: "dashboard__main", children: [
-            /* @__PURE__ */ e(W, { maxWidth: $ ? !1 : "lg", className: "dashboard__content", children: k }),
-            /* @__PURE__ */ e(O, {})
+          /* @__PURE__ */ a(c, { className: "dashboard__main", children: [
+            /* @__PURE__ */ e(H, { maxWidth: D ? !1 : "lg", className: "dashboard__content", children: N }),
+            /* @__PURE__ */ e(C, {})
           ] })
         ]
       }