@gx-design-vue/pro-layout 0.1.0-beta.20 → 0.1.0-beta.22

package/dist/pro-layout.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as E, createVNode as o, mergeProps as X, provide as _e, readonly as Xt, inject as gt, resolveComponent as yt, computed as w, isVNode as ne, Fragment as q, toRefs as Be, unref as U, createTextVNode as Q, ref as ce, reactive as Ee, watch as le, withDirectives as Gt, vShow as Yt, getCurrentInstance as qt, onMounted as bt, onUpdated as Zt, onUnmounted as Jt, watchEffect as Qt, onBeforeUnmount as en, Transition as tn } from "vue";
+import { defineComponent as E, createVNode as o, mergeProps as X, provide as _e, readonly as Xt, inject as gt, resolveComponent as yt, computed as x, isVNode as ne, Fragment as q, toRefs as Be, unref as U, createTextVNode as Q, ref as ce, reactive as Ee, watch as le, withDirectives as Gt, vShow as Yt, getCurrentInstance as qt, onMounted as bt, onUpdated as Zt, onUnmounted as Jt, watchEffect as Qt, onBeforeUnmount as en, Transition as tn } from "vue";
 import { Spin as Ie, Menu as ee, ConfigProvider as Ve, Layout as me, Drawer as we, Breadcrumb as nn, Card as an, LayoutFooter as on, Tabs as Ae, Dropdown as nt, Tooltip as ke, List as te, Switch as pt, TabPane as ln, Select as ve, message as rn, Divider as Fe, Alert as sn, Button as un } from "ant-design-vue";
 import { useRouter as je, RouterLink as dn } from "vue-router";
 import { createFromIconfontCN as cn, MenuUnfoldOutlined as mn, MenuFoldOutlined as fn, GithubOutlined as hn, EllipsisOutlined as gn, ReloadOutlined as yn, CloseOutlined as vt, CheckOutlined as xt, SettingOutlined as bn, NotificationOutlined as pn, CopyOutlined as vn } from "@ant-design/icons-vue";
@@ -252,9 +252,9 @@ function Ln(e) {
   return /\w.(png|jpg|jpeg|svg|webp|gif|bmp)$/i.test(e);
 }
 function Ot(e, t, n, a) {
-  var l, d, m, y, p, x, r, T, S, R, s, I, g, c, f, v, P, C, O, L, B, N, H, M, F, h, b, k, $, D, j, W, V, _;
+  var l, d, m, y, p, C, r, T, S, R, s, I, g, c, f, v, P, w, O, L, B, N, H, M, F, h, b, k, $, D, j, W, V, _;
   const i = { ...e };
-  return n === "light" ? (i.colorItemBg = (d = (l = t.layout) == null ? void 0 : l[a]) == null ? void 0 : d.colorBgMenu, i.colorSubItemBg = (y = (m = t.layout) == null ? void 0 : m[a]) == null ? void 0 : y.colorSubItemBg, i.colorItemBgSelected = (x = (p = t.layout) == null ? void 0 : p[a]) == null ? void 0 : x.colorBgMenuItemSelected, i.colorItemBgSelectedHorizontal = (T = (r = t.layout) == null ? void 0 : r[a]) == null ? void 0 : T.colorBgMenuItemSelected, i.colorItemText = (R = (S = t.layout) == null ? void 0 : S[a]) == null ? void 0 : R.colorTextMenu, i.colorItemTextHover = (I = (s = t.layout) == null ? void 0 : s[a]) == null ? void 0 : I.colorTextMenuHover, i.colorItemTextSelected = (c = (g = t.layout) == null ? void 0 : g[a]) == null ? void 0 : c.colorTextMenuSelected, i.colorItemTextSelectedHorizontal = (v = (f = t.layout) == null ? void 0 : f[a]) == null ? void 0 : v.colorTextMenuSelected, a === "sider" && (i.colorItemBgHover = (C = (P = t.layout) == null ? void 0 : P[a]) == null ? void 0 : C.colorBgMenuItemHover)) : n === "dark" && (i.colorItemBg = (L = (O = t.layout) == null ? void 0 : O[a]) == null ? void 0 : L.colorDarkBgMenu, i.colorSubItemBg = (N = (B = t.layout) == null ? void 0 : B[a]) == null ? void 0 : N.colorDarkSubItemBg, i.colorItemBgSelected = (M = (H = t.layout) == null ? void 0 : H[a]) == null ? void 0 : M.colorDarkBgMenuItemSelected, i.colorItemBgSelectedHorizontal = (h = (F = t.layout) == null ? void 0 : F[a]) == null ? void 0 : h.colorDarkBgMenuItemSelected, i.colorItemText = (k = (b = t.layout) == null ? void 0 : b[a]) == null ? void 0 : k.colorDarkTextMenu, i.colorItemTextHover = (D = ($ = t.layout) == null ? void 0 : $[a]) == null ? void 0 : D.colorDarkTextMenuHover, i.colorItemTextSelected = (W = (j = t.layout) == null ? void 0 : j[a]) == null ? void 0 : W.colorDarkTextMenuSelected, i.colorItemTextSelectedHorizontal = (_ = (V = t.layout) == null ? void 0 : V[a]) == null ? void 0 : _.colorDarkTextMenuSelected, a === "header" && (i.colorActiveBarHeight = 0)), i;
+  return n === "light" ? (i.colorItemBg = (d = (l = t.layout) == null ? void 0 : l[a]) == null ? void 0 : d.colorBgMenu, i.colorSubItemBg = (y = (m = t.layout) == null ? void 0 : m[a]) == null ? void 0 : y.colorSubItemBg, i.colorItemBgSelected = (C = (p = t.layout) == null ? void 0 : p[a]) == null ? void 0 : C.colorBgMenuItemSelected, i.colorItemBgSelectedHorizontal = (T = (r = t.layout) == null ? void 0 : r[a]) == null ? void 0 : T.colorBgMenuItemSelected, i.colorItemText = (R = (S = t.layout) == null ? void 0 : S[a]) == null ? void 0 : R.colorTextMenu, i.colorItemTextHover = (I = (s = t.layout) == null ? void 0 : s[a]) == null ? void 0 : I.colorTextMenuHover, i.colorItemTextSelected = (c = (g = t.layout) == null ? void 0 : g[a]) == null ? void 0 : c.colorTextMenuSelected, i.colorItemTextSelectedHorizontal = (v = (f = t.layout) == null ? void 0 : f[a]) == null ? void 0 : v.colorTextMenuSelected, a === "sider" && (i.colorItemBgHover = (w = (P = t.layout) == null ? void 0 : P[a]) == null ? void 0 : w.colorBgMenuItemHover)) : n === "dark" && (i.colorItemBg = (L = (O = t.layout) == null ? void 0 : O[a]) == null ? void 0 : L.colorDarkBgMenu, i.colorSubItemBg = (N = (B = t.layout) == null ? void 0 : B[a]) == null ? void 0 : N.colorDarkSubItemBg, i.colorItemBgSelected = (M = (H = t.layout) == null ? void 0 : H[a]) == null ? void 0 : M.colorDarkBgMenuItemSelected, i.colorItemBgSelectedHorizontal = (h = (F = t.layout) == null ? void 0 : F[a]) == null ? void 0 : h.colorDarkBgMenuItemSelected, i.colorItemText = (k = (b = t.layout) == null ? void 0 : b[a]) == null ? void 0 : k.colorDarkTextMenu, i.colorItemTextHover = (D = ($ = t.layout) == null ? void 0 : $[a]) == null ? void 0 : D.colorDarkTextMenuHover, i.colorItemTextSelected = (W = (j = t.layout) == null ? void 0 : j[a]) == null ? void 0 : W.colorDarkTextMenuSelected, i.colorItemTextSelectedHorizontal = (_ = (V = t.layout) == null ? void 0 : V[a]) == null ? void 0 : _.colorDarkTextMenuSelected, a === "header" && (i.colorActiveBarHeight = 0)), i;
 }
 const Dn = ["left", "right"], se = ["left", "right", "down", "up"], zn = ["downBig", "upBig", "leftBig", "rightBig"], Nn = ["topLeft", "bottomRight", "topRight", "bottomLeft"], Hn = ["downLeft", "upRight", "downRight", "upLeft"], Ge = {
   preset: [
@@ -409,8 +409,8 @@ const Rt = /* @__PURE__ */ E({
       var f;
       const g = s.target || "", c = It(g);
       ((f = a.currentRoute.value) == null ? void 0 : f.fullPath) !== I.to && c && g && s.targetStatus === 1 && window.open(g);
-    }, x = yt("router-link"), r = (s = []) => s.map((I) => T(I)).filter((I) => I), T = (s) => {
-      var c, f, v, P, C, O, L, B, N;
+    }, C = yt("router-link"), r = (s = []) => s.map((I) => T(I)).filter((I) => I), T = (s) => {
+      var c, f, v, P, w, O, L, B, N;
       if (Array.isArray(s.children) && s.children.length > 0 && !((c = s == null ? void 0 : s.meta) != null && c.hideInMenu) && !((f = s == null ? void 0 : s.meta) != null && f.hideChildrenInMenu)) {
         let H;
         if (e.subMenuItemRender)
@@ -424,7 +424,7 @@ const Rt = /* @__PURE__ */ E({
           class: "gx-pro-sider-menu-item-title"
         }, [M])]) : o("span", {
           class: "gx-pro-sider-menu-item"
-        }, [M]), h = ((C = s.meta) == null ? void 0 : C.type) === "group", b = h ? ee.ItemGroup : ee.SubMenu;
+        }, [M]), h = ((w = s.meta) == null ? void 0 : w.type) === "group", b = h ? ee.ItemGroup : ee.SubMenu;
         return o(b, {
           title: F,
           key: s.path,
@@ -452,14 +452,14 @@ const Rt = /* @__PURE__ */ E({
         default: () => [I]
       });
     }, S = (s) => {
-      var C, O, L, B, N;
+      var w, O, L, B, N;
       const I = {
         ...s.meta
-      }, g = I.targetStatus === 1 && I.target ? "a" : x, c = {
+      }, g = I.targetStatus === 1 && I.target ? "a" : C, c = {
         to: s.linkPath || s.path || ""
       };
       c.to === "/live/list/operation/:id" && (c.to = "/live/list/operation/add");
-      const f = (C = s.meta) == null ? void 0 : C.title, v = (O = s.meta) != null && O.icon ? o(g, X(c, {
+      const f = (w = s.meta) == null ? void 0 : w.title, v = (O = s.meta) != null && O.icon ? o(g, X(c, {
         class: "gx-pro-sider-menu-item",
         onClick: () => p(I, c)
       }), {
@@ -478,7 +478,7 @@ const Rt = /* @__PURE__ */ E({
         iconType: (N = s.meta) == null ? void 0 : N.iconType
       }, null) || void 0;
       return [v, P];
-    }, R = w(() => r(e.menuData));
+    }, R = x(() => r(e.menuData));
     return () => o(ee, X({
       key: "Menu",
       inlineIndent: 16,
@@ -517,7 +517,7 @@ const Rt = /* @__PURE__ */ E({
     }
   };
 }, qn = (e) => {
-  var t, n, a, i, l, d, m, y, p, x, r, T;
+  var t, n, a, i, l, d, m, y, p, C, r, T;
   return {
     [`${e.proComponentsCls}-basic-layout`]: {
       [`&${e.proComponentsCls}-basic-layout-wide`]: {
@@ -584,7 +584,7 @@ const Rt = /* @__PURE__ */ E({
         zIndex: "100",
         height: "100%",
         "&-mix": {
-          height: `calc(100% - ${((x = (p = e.layout) == null ? void 0 : p.header) == null ? void 0 : x.heightLayoutHeader) || A.headerHeight}px)`,
+          height: `calc(100% - ${((C = (p = e.layout) == null ? void 0 : p.header) == null ? void 0 : C.heightLayoutHeader) || A.headerHeight}px)`,
           insetBlockStart: `${((T = (r = e.layout) == null ? void 0 : r.header) == null ? void 0 : T.heightLayoutHeader) || A.headerHeight}px`
         }
       }
@@ -634,8 +634,7 @@ const Rt = /* @__PURE__ */ E({
           marginInlineStart: 12,
           color: e.colorWhite,
           animationName: Bt,
-          animationDuration: ".3s",
-          animationTimingFunction: "ease",
+          animationDuration: ".2s",
           fontWeight: 600,
           fontSize: 18,
           verticalAlign: "middle"
@@ -679,13 +678,13 @@ const Rt = /* @__PURE__ */ E({
   setup(e) {
     const {
       getPrefixCls: t
-    } = J(), n = w(() => e.layout === "side" || e.layout === "simple"), a = w(() => t({
+    } = J(), n = x(() => e.layout === "side" || e.layout === "simple"), a = x(() => t({
       suffixCls: n.value || e.drawer ? "sider" : "global-header",
       isPor: !0
     })), {
       wrapSSR: i,
       hashId: l
-    } = Z("ProLayoutLogo", [Jn]), d = w(() => Qn(e, e.renderKey));
+    } = Z("ProLayoutLogo", [Jn]), d = x(() => Qn(e, e.renderKey));
     return () => i(o("div", {
       id: "logo",
       class: {
@@ -724,7 +723,7 @@ const {
       theme: m,
       layout: y,
       isMobile: p,
-      menuLoading: x,
+      menuLoading: C,
       breakpoint: r,
       fixSiderbar: T,
       collapsed: S,
@@ -739,12 +738,12 @@ const {
       suffixCls: "sider",
       isPor: !0
     }), {
-      wrapSSR: C,
+      wrapSSR: w,
       hashId: O
-    } = Z("ProLayoutSiderMenu", [Yn, qn, Zn], P), L = w(() => e.layout === "wide"), B = w(() => e.layout === "mix" && !e.isMobile && e.splitMenus), N = w(() => y.value === "side" || y.value === "simple"), H = w(() => (e.layout === "mix" || L.value) && "light" || m.value), M = w(() => e.collapsed ? e.collapsedWidth : e.siderWidth), F = w(() => [O.value, P, p.value ? "shadow" : null, `${P}-${H.value}`, T.value && e.layout !== "wide" ? `${P}-fixed` : null]), h = w(() => {
+    } = Z("ProLayoutSiderMenu", [Yn, qn, Zn], P), L = x(() => e.layout === "wide"), B = x(() => e.layout === "mix" && !e.isMobile && e.splitMenus), N = x(() => y.value === "side" || y.value === "simple"), H = x(() => (e.layout === "mix" || L.value) && "light" || m.value), M = x(() => e.collapsed ? e.collapsedWidth : e.siderWidth), F = x(() => [O.value, P, p.value ? "shadow" : null, `${P}-${H.value}`, T.value && e.layout !== "wide" ? `${P}-fixed` : null]), h = x(() => {
       var $;
       return typeof v.value == "function" ? ($ = v.value) == null ? void 0 : $.call(v) : v.value;
-    }), b = w(() => f.value || $t), k = ($) => {
+    }), b = x(() => f.value !== !1 ? f.value || $t : !1), k = ($) => {
       var D;
       if (e.onSelect) {
         if (U(B)) {
@@ -780,7 +779,7 @@ const {
         },
         "onUpdate:selectedKeys": k
       }), null);
-      return B.value && U(a.value).length === 0 || i.value.length === 0 ? null : C(o(Ve, {
+      return B.value && U(a.value).length === 0 || i.value.length === 0 ? null : w(o(Ve, {
         theme: {
           components: {
             Menu: Ot({
@@ -800,7 +799,7 @@ const {
             flex: `0 0 ${M.value}px`,
             maxWidth: `${M.value}px`,
             minWidth: `${M.value}px`,
-            transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
+            transition: "background-color 0.2s, min-width 0.2s, max-width 0.2s"
           }
         }, null), o(ta, {
           collapsible: !0,
@@ -825,10 +824,10 @@ const {
         }, {
           default: () => {
             var V, _;
-            return [x.value && o("div", {
+            return [C.value && o("div", {
               class: ["gx-pro-sider-loading", O.value]
             }, [o(Ie, {
-              spinning: x.value
+              spinning: C.value
             }, null)]), $ || null, D && !e.collapsed && o("div", {
               class: {
                 [`${O.value}`]: !0,
@@ -967,10 +966,10 @@ const da = ({ suffixCls: e, customizePrefixCls: t, isPor: n, className: a }) =>
     }), {
       wrapSSR: a,
       hashId: i
-    } = Z("BaseApp", [ca], n), l = w(() => ua(ma, t, e)), d = w(() => [i.value, n, e.rootClassName]);
+    } = Z("BaseApp", [ca], n), l = x(() => ua(ma, t, e)), d = x(() => [i.value, n, e.rootClassName]);
     return aa({
-      emptyText: w(() => l.value.emptyText),
-      indicator: w(() => l.value.indicator)
+      emptyText: x(() => l.value.emptyText),
+      indicator: x(() => l.value.indicator)
     }), () => {
       var m;
       return a(o("div", {
@@ -1028,7 +1027,7 @@ const he = {
     }), {
       wrapSSR: i,
       hashId: l
-    } = Z("ProPageHeader", [fa], a), d = w(() => {
+    } = Z("ProPageHeader", [fa], a), d = x(() => {
       var m;
       return {
         ...t.value,
@@ -1099,19 +1098,19 @@ const Cl = /* @__PURE__ */ E({
       usePageCard: y
     } = J(), {
       indicator: p
-    } = oa(), x = n({
+    } = oa(), C = n({
       suffixCls: "page-container",
       isPor: !0
     }), r = n({
       suffixCls: "grid-content",
       isPor: !0
-    }), T = w(() => e.pageCardProps || m.value), S = w(() => e.pageContentStyle || d.value), {
+    }), T = x(() => e.pageCardProps || m.value), S = x(() => e.pageContentStyle || d.value), {
       wrapSSR: R,
       hashId: s
-    } = ya(x), I = () => {
+    } = ya(C), I = () => {
       var c;
       return o("div", {
-        class: `${x}-children-content ${s.value}`
+        class: `${C}-children-content ${s.value}`
       }, [(In(e.usePageCard) ? e.usePageCard : y.value) ? o(an, X(T.value ? ue(T.value, ["loading", "bodyStyle"]) : {}, {
         style: a.value ? {
           minHeight: "853px"
@@ -1125,7 +1124,7 @@ const Cl = /* @__PURE__ */ E({
       }) : (c = t.default) == null ? void 0 : c.call(t)]);
     }, g = () => {
       let c;
-      return o(q, null, [e.waterMark || i.value ? o(Sn, null, ba(c = I()) ? c : {
+      return o(q, null, [e.waterMark && i.value ? o(Sn, null, ba(c = I()) ? c : {
         default: () => [c]
       }) : I()]);
     };
@@ -1138,9 +1137,9 @@ const Cl = /* @__PURE__ */ E({
         default: () => [o("div", {
           class: {
             [`${s.value}`]: !0,
-            [`${x}`]: !0
+            [`${C}`]: !0
           }
-        }, [!a.value && c !== !1 && (c ? c == null ? void 0 : c() : o(ha, {
+        }, [!a.value && c !== !1 && (c || o(ha, {
           breadcrumb: f,
           content: v
         }, null)), o("div", {
@@ -1505,7 +1504,7 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
       suffixCls: "multi-tab"
     }), {
       wrapSSR: p,
-      hashId: x
+      hashId: C
     } = wa(y), r = ce([]);
     le(r, () => {
       var h;
@@ -1513,11 +1512,11 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
     }, {
       deep: !0
     });
-    const T = w(() => l.currentRoute.value.path), S = w(() => n.value && !t.value), R = w(() => S.value ? `calc(100% - ${e.collapsed ? e.collapsedWidth : e.siderWidth}px)` : "100%"), s = w(() => wt(`${y}-wrap`, {
-      [`${x.value}`]: !0,
+    const T = x(() => l.currentRoute.value.path), S = x(() => n.value && !t.value), R = x(() => S.value ? `calc(100% - ${e.collapsed ? e.collapsedWidth : e.siderWidth}px)` : "100%"), s = x(() => wt(`${y}-wrap`, {
+      [`${C.value}`]: !0,
       [`${y}-wrap-fixed`]: e.isFixedMultiTab,
       [`${y}-wrap-loading`]: e.loading
-    })), I = w(() => {
+    })), I = x(() => {
       const h = {
         display: e.visible ? void 0 : "none"
       };
@@ -1525,7 +1524,7 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
         margin: 0,
         width: R.value,
         paddingTop: "6px",
-        zIndex: 100,
+        zIndex: 99,
         ...h
       } : h;
     }), g = (h) => h.fullPath === T.value, c = (h) => {
@@ -1564,7 +1563,7 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
     }, P = async (h) => {
       const b = r.value.find((k) => h === k.fullPath);
       r.value = r.value.filter((k) => k.fullPath !== h), b && g(b) && v();
-    }, C = (h) => {
+    }, w = (h) => {
       const b = r.value.find((k) => k.path === h);
       i.activeKey !== (b == null ? void 0 : b.fullPath) && (b != null && b.fullPath) && l.push(b == null ? void 0 : b.fullPath);
     }, O = () => {
@@ -1653,15 +1652,15 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
         default: () => {
           var k;
           return [o("div", {
-            class: [`${y}-title`, x.value]
+            class: [`${y}-title`, C.value]
           }, [(k = b.meta) == null ? void 0 : k.title, i.activeKey === b.fullPath && o(yn, {
-            class: [`${y}-reload-btn`, x.value],
+            class: [`${y}-reload-btn`, C.value],
             spin: a.value,
             onClick: ($) => {
               $.stopPropagation(), !a.value && O();
             }
           }, null), r.value.length > 1 && !L(b) && o(vt, {
-            class: [`${y}-close-btn`, x.value],
+            class: [`${y}-close-btn`, C.value],
             onClick: ($) => {
               $.stopPropagation(), !a.value && P((b == null ? void 0 : b.fullPath) || "");
             }
@@ -1670,14 +1669,14 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
       });
     };
     return () => p(o(q, null, [!!e.isFixedMultiTab && Gt(o("div", {
-      class: [`${y}-fixed`, x.value]
+      class: [`${y}-fixed`, C.value]
     }, null), [[Yt, e.visible]]), o(Ae, {
       hideAdd: !0,
       type: "editable-card",
       style: I.value,
       class: s.value,
       activeKey: i.activeKey,
-      onTabClick: C
+      onTabClick: w
     }, {
       default: () => [r.value.map((h) => o(Oa, {
         key: h.fullPath,
@@ -1693,7 +1692,7 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
         }, null)
       }, {
         default: () => [o(gn, {
-          class: [`${y}-dropdown-menu-btn`, x.value],
+          class: [`${y}-dropdown-menu-btn`, C.value],
           rotate: 90
         }, null)]
       })
@@ -1714,7 +1713,7 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
     collapsed: m,
     siderWidth: y,
     isShowTabsBar: p,
-    isFixedMultiTab: x,
+    isFixedMultiTab: C,
     onReloadPage: r,
     onChangeTabs: T
   } = e;
@@ -1727,7 +1726,7 @@ const Oa = Ae.TabPane, Ma = ee.Item, Ra = /* @__PURE__ */ E({
     visible: U(S).length > 0 && p,
     isMobile: l,
     loading: d,
-    isFixedMultiTab: x,
+    isFixedMultiTab: C,
     siderWidth: y,
     collapsed: m,
     onReloadPage: r,
@@ -1754,10 +1753,10 @@ const ka = (e) => {
   return {
     [`${e.proComponentsCls}-basic-layout`]: {
       [`${e.antCls}-layout-header${e.componentCls}${e.componentCls}-light`]: {
-        background: ((n = (t = e.layout) == null ? void 0 : t.header) == null ? void 0 : n.colorBgMenu) || e.colorBgElevated
+        backgroundColor: ((n = (t = e.layout) == null ? void 0 : t.header) == null ? void 0 : n.colorBgMenu) || e.colorBgElevated
       },
       [`${e.antCls}-layout-header${e.componentCls}${e.componentCls}-dark`]: {
-        background: (i = (a = e.layout) == null ? void 0 : a.header) == null ? void 0 : i.colorDarkBgMenu,
+        backgroundColor: (i = (a = e.layout) == null ? void 0 : a.header) == null ? void 0 : i.colorDarkBgMenu,
         [`${e.proComponentsCls}-global-header-collapsed-button`]: {
           color: "#fff"
         }
@@ -1775,6 +1774,7 @@ const ka = (e) => {
             width: "100%",
             zIndex: 9,
             top: 0,
+            transition: "width .2s",
             "&-action": {
               transition: "width .3s cubic-bezier(.645,.045,.355,1)"
             }
@@ -1968,8 +1968,8 @@ function _a(e) {
     return Ht;
   var a = re(e).getComputedStyle(e), i = Na(a), l = i.left + i.right, d = i.top + i.bottom, m = Re(a.width), y = Re(a.height);
   if (a.boxSizing === "border-box" && (Math.round(m + l) !== t && (m -= st(a, "left", "right") + l), Math.round(y + d) !== n && (y -= st(a, "top", "bottom") + d)), !Va(e)) {
-    var p = Math.round(m + l) - t, x = Math.round(y + d) - n;
-    Math.abs(p) !== 1 && (m -= p), Math.abs(x) !== 1 && (y -= x);
+    var p = Math.round(m + l) - t, C = Math.round(y + d) - n;
+    Math.abs(p) !== 1 && (m -= p), Math.abs(C) !== 1 && (y -= C);
   }
   return Te(i.left, i.top, m, y);
 }
@@ -2127,10 +2127,10 @@ const Ga = (e) => {
     let i = null, l = null;
     const d = () => {
       l && (l.disconnect(), l = null);
-    }, m = (x) => {
+    }, m = (C) => {
       const {
         onResize: r
-      } = e, T = x[0].target, {
+      } = e, T = C[0].target, {
         width: S,
         height: R
       } = T.getBoundingClientRect(), {
@@ -2153,9 +2153,9 @@ const Ga = (e) => {
       }
     }, y = qt(), p = () => {
       const {
-        disabled: x
+        disabled: C
       } = e;
-      if (x) {
+      if (C) {
         d();
         return;
       }
@@ -2173,8 +2173,8 @@ const Ga = (e) => {
     }, {
       flush: "post"
     }), () => {
-      var x;
-      return (x = n.default) === null || x === void 0 ? void 0 : x.call(n)[0];
+      var C;
+      return (C = n.default) === null || C === void 0 ? void 0 : C.call(n)[0];
     };
   }
 }), qa = (e) => ({
@@ -2306,9 +2306,9 @@ const Ga = (e) => {
       suffixCls: "global-header",
       isPor: !0
     }), {
-      wrapSSR: x,
+      wrapSSR: C,
       hashId: r
-    } = Z("ProGlobalHeader", [qa], p), T = w(() => ({
+    } = Z("ProGlobalHeader", [qa], p), T = x(() => ({
       [`${r.value}`]: !0,
       [`${p}`]: !0,
       [`${p}-${e.layout}`]: !0
@@ -2320,7 +2320,7 @@ const Ga = (e) => {
       }
     }, R = () => {
       n("collapse", !e.collapsed);
-    }, s = w(() => e.collapsedButtonRender || $t), I = () => {
+    }, s = x(() => e.collapsedButtonRender || $t), I = () => {
       var g;
       return o(q, null, [e.layout === "mix" && !e.isMobile && e.splitMenus ? o("div", {
         style: {
@@ -2380,7 +2380,7 @@ const Ga = (e) => {
         },
         class: [`${p}-logo`, e.isMobile ? "mobile" : "", r.value]
       }, [o("a", null, [kt(e.logo)])]);
-      return x(o("div", {
+      return C(o("div", {
         class: T.value
       }, [e.isMobile ? o(q, null, [Za(e.menuHeaderRender, g), e.isMobile && U(s) && o("span", {
         class: `${p}-collapsed-button ${r.value}`,
@@ -2419,7 +2419,7 @@ const {
     } = Be(e), {
       getPrefixCls: y,
       menuData: p
-    } = J(), x = y({
+    } = J(), C = y({
       suffixCls: "header",
       isPor: !0
     }), r = y({
@@ -2428,12 +2428,12 @@ const {
     }), {
       wrapSSR: T,
       hashId: S
-    } = Z("ProLayoutHeader", [ka], x), R = w(() => l.value === "wide"), s = w(() => a.value), I = w(() => l.value === "mix" || R.value), g = w(() => l.value === "side" || l.value === "simple"), c = w(() => g.value && "light" || t.value), f = w(() => ({
+    } = Z("ProLayoutHeader", [ka], C), R = x(() => l.value === "wide"), s = x(() => a.value), I = x(() => l.value === "mix" || R.value), g = x(() => l.value === "side" || l.value === "simple"), c = x(() => g.value && "light" || t.value), f = x(() => ({
       [`${S.value}`]: !0,
-      [`${x}-${c.value}`]: !0,
-      [`${x}`]: !0,
+      [`${C}-${c.value}`]: !0,
+      [`${C}`]: !0,
       [`${r}`]: s.value
-    })), v = w(() => s.value && !n.value), P = w(() => m.value ? p.value && En(p.value) || [] : []), C = w(() => g.value && v.value ? `calc(100% - ${e.collapsed ? e.collapsedWidth : e.siderWidth}px)` : "100%"), O = w(() => s.value ? 0 : void 0), L = () => {
+    })), v = x(() => s.value && !n.value), P = x(() => m.value ? p.value && En(p.value) || [] : []), w = x(() => g.value && v.value ? `calc(100% - ${e.collapsed ? e.collapsedWidth : e.siderWidth}px)` : "100%"), O = x(() => s.value ? 0 : void 0), L = () => {
       const B = o(Qa, X(e, {
         theme: c.value,
         mode: "horizontal",
@@ -2459,7 +2459,7 @@ const {
         style: {
           height: `${i.value}px`,
           lineHeight: `${i.value}px`,
-          width: C.value,
+          width: w.value,
           zIndex: g.value ? 100 : 101,
           right: O.value
         }
@@ -2490,20 +2490,20 @@ const {
       hashId: l
     } = Z("ProLayout", [va, xa], a), d = at(), {
       token: m
-    } = $e(), y = w(() => {
+    } = $e(), y = x(() => {
       var M;
       return (M = m.value) == null ? void 0 : M.colorPrimary;
     });
     Qt(() => {
       y.value && document.querySelector("html") && document.querySelector("html").style.setProperty("--gx-primary-color", y.value);
     });
-    const p = ce(document.body.getBoundingClientRect().width), x = w(() => e.layout === "mix" || e.layout === "side" || e.layout === "wide" || !1), r = w(() => e.layout === "wide"), T = w(() => x.value), S = w(() => e.collapsed ? e.collapsedWidth : e.siderWidth), R = w(() => (e.theme || "dark").toLocaleLowerCase().includes("dark") ? "dark" : "light");
+    const p = ce(document.body.getBoundingClientRect().width), C = x(() => e.layout === "mix" || e.layout === "side" || e.layout === "wide" || !1), r = x(() => e.layout === "wide"), T = x(() => C.value), S = x(() => e.collapsed ? e.collapsedWidth : e.siderWidth), R = x(() => (e.theme || "dark").toLocaleLowerCase().includes("dark") ? "dark" : "light");
     bt(() => {
       window.addEventListener("resize", g), g();
     }), en(() => {
       window.removeEventListener("resize", g);
     });
-    const s = w(() => (d.value === "sm" || d.value === "xs") && !e.disableMobile && !r.value), I = Ee({
+    const s = x(() => (d.value === "sm" || d.value === "xs") && !e.disableMobile && !r.value), I = Ee({
       position: "relative"
     });
     (e.isChildrenLayout || e.contentStyle && e.contentStyle.minHeight) && (I.minHeight = 0);
@@ -2512,13 +2512,13 @@ const {
       p.value !== M && (d.value = at().value, p.value = M);
     }, c = (M, F) => M.headerRender === !1 || M.pure ? null : o(Ne, X(M, {
       matchMenuKeys: F || []
-    }), null), f = w(() => ({
+    }), null), f = x(() => ({
       ...e.breadcrumb,
       itemRender: K(n, e, "breadcrumbRender")
-    })), v = w(() => T.value && e.selectedKeys ? Vn(e.menuData, e.selectedKeys[0]) : []), P = (M) => {
+    })), v = x(() => T.value && e.selectedKeys ? Vn(e.menuData, e.selectedKeys[0]) : []), P = (M) => {
       var F;
       (F = e.onCollapse) == null || F.call(e, M);
-    }, C = (M) => {
+    }, w = (M) => {
       var F;
       (F = e.onOpenKeys) == null || F.call(e, M);
     }, O = (M) => {
@@ -2542,21 +2542,22 @@ const {
       siderWidth: S,
       breadcrumb: f,
       flatMenuData: v,
-      hasSide: x,
-      flatMenu: T
+      hasSide: C,
+      flatMenu: T,
+      pageHeaderRender: x(() => K(n, e, "pageHeaderRender"))
     }), () => {
       var et;
       const M = K(n, e, "collapsedButtonRender"), F = K(n, e, "headerContentRender"), h = K(n, e, "rightContentRender"), b = K(n, e, "headerRender"), k = K(n, e, "footerRender"), $ = K(n, e, "links"), D = K(n, e, "copyrightRender"), j = K(n, e, "extraRightDropdownRender"), W = K(n, e, "menuHeaderRender"), V = K(n, e, "menuExtraRender"), _ = K(n, e, "menuContentRender"), Y = K(n, e, "menuFooterRender"), ie = K(n, e, "menuItemRender"), ge = K(n, e, "subMenuItemRender"), ye = {
         menuItemRender: ie,
         subMenuItemRender: ge
-      }, be = w(() => c({
+      }, be = x(() => c({
         ...e,
         ...ye,
-        hasSiderMenu: x.value,
+        hasSiderMenu: C.value,
         menuData: e.menuData,
         isMobile: U(s),
         onCollapse: P,
-        onOpenKeys: C,
+        onOpenKeys: w,
         onSelect: O,
         onMenuHeaderClick: L,
         rightContentRender: h,
@@ -2565,17 +2566,17 @@ const {
         headerContentRender: F,
         headerRender: b,
         theme: R.value
-      }, e.matchMenuKeys)), pe = w(() => ({
+      }, e.matchMenuKeys)), pe = x(() => ({
         [`${l.value}`]: !0,
         [`${a}`]: !0,
         [`${a}-${e.layout}`]: !0
-      })), Kt = w(() => r.value ? {
+      })), Kt = x(() => r.value ? {
         minWidth: `${e.wideWidth}px`
-      } : void 0), Ut = w(() => r.value ? {
+      } : void 0), Ut = x(() => r.value ? {
         width: e.menuData.length ? `${e.wideWidth}px` : `${e.wideWidth - e.siderWidth - 20}px`,
         paddingTop: `${e.headerHeight + 20}px`,
         margin: r.value ? "0 auto" : void 0
-      } : void 0), Qe = w(() => r.value ? {
+      } : void 0), Qe = x(() => r.value ? {
         minHeight: "835px"
       } : {});
       return i(o(q, null, [e.pure ? (et = n.default) == null ? void 0 : et.call(n) : o("div", {
@@ -2595,7 +2596,7 @@ const {
           collapsedButtonRender: M,
           onCollapse: P,
           onSelect: O,
-          onOpenKeys: C,
+          onOpenKeys: w,
           onMenuClick: B
         }), null), o(me, {
           style: I
@@ -2641,7 +2642,7 @@ const {
     slots: t,
     emit: n
   }) {
-    const a = w(() => e.theme !== void 0 ? {
+    const a = x(() => e.theme !== void 0 ? {
       dark: e.theme === "realDark"
     } : {}), i = (m) => {
       n("update:collapsed", m), n("collapse", m);
@@ -3055,11 +3056,11 @@ const ro = /* @__PURE__ */ E({
       hashId: d
     } = Z("ProThemeEditor", [io], i), {
       token: m
-    } = $e(), y = w(() => {
+    } = $e(), y = x(() => {
       var S;
       return (S = m.value) == null ? void 0 : S.layout;
-    }), p = w(() => {
-      var S, R, s, I, g, c, f, v, P, C, O, L, B, N, H, M, F, h, b, k, $, D, j, W, V;
+    }), p = x(() => {
+      var S, R, s, I, g, c, f, v, P, w, O, L, B, N, H, M, F, h, b, k, $, D, j, W, V;
       return [{
         key: "colorBgMenu",
         title: "全部背景",
@@ -3083,7 +3084,7 @@ const ro = /* @__PURE__ */ E({
       }, {
         key: "colorDarkBgMenuItemSelected",
         title: "菜单选中背景",
-        disabled: ((v = e.settingValue) == null ? void 0 : v.theme) === "light" || ((P = e.settingValue) == null ? void 0 : P.theme) === "dark" && ["side", "simple"].includes((C = e.settingValue) == null ? void 0 : C.layout)
+        disabled: ((v = e.settingValue) == null ? void 0 : v.theme) === "light" || ((P = e.settingValue) == null ? void 0 : P.theme) === "dark" && ["side", "simple"].includes((w = e.settingValue) == null ? void 0 : w.layout)
       }, {
         key: "colorTextMenu",
         title: "菜单文字颜色",
@@ -3109,8 +3110,8 @@ const ro = /* @__PURE__ */ E({
         title: "菜单文字选中颜色",
         disabled: ((j = e.settingValue) == null ? void 0 : j.theme) === "light" || ((W = e.settingValue) == null ? void 0 : W.theme) === "dark" && ["side", "simple"].includes((V = e.settingValue) == null ? void 0 : V.layout)
       }];
-    }), x = w(() => {
-      var S, R, s, I, g, c, f, v, P, C, O, L, B, N, H, M, F, h, b, k, $, D, j, W, V, _, Y, ie, ge, ye, be, pe;
+    }), C = x(() => {
+      var S, R, s, I, g, c, f, v, P, w, O, L, B, N, H, M, F, h, b, k, $, D, j, W, V, _, Y, ie, ge, ye, be, pe;
       return [{
         key: "colorBgMenu",
         title: "全部背景",
@@ -3126,7 +3127,7 @@ const ro = /* @__PURE__ */ E({
       }, {
         key: "colorDarkSubItemBg",
         title: "子菜单背景",
-        disabled: ((v = e.settingValue) == null ? void 0 : v.theme) === "light" || ((P = e.settingValue) == null ? void 0 : P.theme) === "dark" && ["mix", "wide"].includes((C = e.settingValue) == null ? void 0 : C.layout)
+        disabled: ((v = e.settingValue) == null ? void 0 : v.theme) === "light" || ((P = e.settingValue) == null ? void 0 : P.theme) === "dark" && ["mix", "wide"].includes((w = e.settingValue) == null ? void 0 : w.layout)
       }, {
         key: "colorBgMenuItemHover",
         title: "菜单移入背景",
@@ -3164,7 +3165,7 @@ const ro = /* @__PURE__ */ E({
         title: "菜单文字选中颜色",
         disabled: ((ye = e.settingValue) == null ? void 0 : ye.theme) === "light" || ((be = e.settingValue) == null ? void 0 : be.theme) === "dark" && ["mix", "wide"].includes((pe = e.settingValue) == null ? void 0 : pe.layout)
       }];
-    }), r = w(() => n.value === "header" ? p.value : n.value === "sider" ? x.value : []), T = (S) => {
+    }), r = x(() => n.value === "header" ? p.value : n.value === "sider" ? C.value : []), T = (S) => {
       var R, s;
       return (s = (R = y.value) == null ? void 0 : R[n.value]) == null ? void 0 : s[S];
     };
@@ -3304,7 +3305,7 @@ const {
       hashId: a
     } = Z("SettingsDrawOthers", [so], t);
     return () => {
-      var l, d, m, y, p, x, r, T, S, R, s, I, g, c;
+      var l, d, m, y, p, C, r, T, S, R, s, I, g, c;
       let i;
       return n(o("div", {
         class: [t, a.value]
@@ -3344,7 +3345,7 @@ const {
           title: "动画效果",
           disabled: (y = (m = e.settingValue) == null ? void 0 : m.animate) == null ? void 0 : y.disabled,
           action: o(ve, {
-            value: (x = (p = e.settingValue) == null ? void 0 : p.animate) == null ? void 0 : x.name,
+            value: (C = (p = e.settingValue) == null ? void 0 : p.animate) == null ? void 0 : C.name,
             style: {
               width: "100px"
             },
@@ -3384,8 +3385,8 @@ const {
             default: () => {
               var f;
               return [(f = mt.find((v) => {
-                var P, C;
-                return v.name === ((C = (P = e.settingValue) == null ? void 0 : P.animate) == null ? void 0 : C.name);
+                var P, w;
+                return v.name === ((w = (P = e.settingValue) == null ? void 0 : P.animate) == null ? void 0 : w.name);
               })) == null ? void 0 : f.directions.map((v) => o(ve.Option, {
                 value: v
               }, ct(v) ? v : {
@@ -3459,10 +3460,10 @@ const {
     }), {
       wrapSSR: a,
       hashId: i
-    } = Z("ProSettingDraw", [ao], n), l = ce(!1), [d, m] = Se(!1), [y, p] = Se(!1), [x, r] = Se(!1), T = w(() => ht(ue(e.settings, He))), [S, R] = Bn(() => ht(ue(e.settings, He)), {
+    } = Z("ProSettingDraw", [ao], n), l = ce(!1), [d, m] = Se(!1), [y, p] = Se(!1), [C, r] = Se(!1), T = x(() => ht(ue(e.settings, He))), [S, R] = Bn(() => ht(ue(e.settings, He)), {
       value: T,
       onChange: e.onChange
-    }), s = w(() => e.colorList && On(e.colorList) ? e.colorList : []), I = w(() => Wn(U(S))), {
+    }), s = x(() => e.colorList && On(e.colorList) ? e.colorList : []), I = x(() => Wn(U(S))), {
       copy: g,
       copied: c,
       isSupported: f
@@ -3470,15 +3471,15 @@ const {
     le(d, () => {
       l.value || (l.value = !0);
     });
-    const v = (C, O, L) => {
+    const v = (w, O, L) => {
       var H, M;
       const B = ["header", "sider"], N = {};
-      if (L && B.includes(C)) {
-        N[C] = {}, N[C][L] = O, e.onChangeLayout && e.onChangeLayout(ue(N, B));
+      if (L && B.includes(w)) {
+        N[w] = {}, N[w][L] = O, e.onChangeLayout && e.onChangeLayout(ue(N, B));
         return;
       } else
-        C === "animate" ? (N[C] = {}, N[C][L] = O, L === "name" && (N[C].direction = (M = (H = co.find((F) => F.name === O)) == null ? void 0 : H.directions) == null ? void 0 : M[0])) : N[C] = O;
-      if (C === "colorWeak") {
+        w === "animate" ? (N[w] = {}, N[w][L] = O, L === "name" && (N[w].direction = (M = (H = co.find((F) => F.name === O)) == null ? void 0 : H.directions) == null ? void 0 : M[0])) : N[w] = O;
+      if (w === "colorWeak") {
         const F = document.querySelector("body");
         F && (F.dataset.prosettingdrawer = O === !0 ? F.style.filter : F.dataset.prosettingdrawer || "none", O === !0 && (F.dataset.prosettingdrawer = F.style.filter), F.style.filter = O === !0 ? "invert(80%)" : F.dataset.prosettingdrawer || "none", O || delete F.dataset.prosettingdrawer);
       }
@@ -3488,8 +3489,8 @@ const {
     }, P = () => {
       f.value && g(JSON.stringify(U(S)));
     };
-    return le(c, (C) => {
-      C && rn.success("拷贝成功，请到 config/default/themeConfig.js 中替换默认配置");
+    return le(c, (w) => {
+      w && rn.success("拷贝成功，请到 config/default/themeConfig.js 中替换默认配置");
     }), () => a(o(we, {
       width: 300,
       closable: !1,
@@ -3529,7 +3530,7 @@ const {
             value: S.value.theme,
             configType: "theme",
             key: "navTheme",
-            onChange: (C) => v("theme", C)
+            onChange: (w) => v("theme", w)
           }, null)]
         }), o(Ce, {
           hashId: i.value,
@@ -3546,7 +3547,7 @@ const {
             prefixCls: n,
             colorList: s.value,
             settingValue: S.value,
-            onChange: (C, O) => v(O || "primaryColor", C)
+            onChange: (w, O) => v(O || "primaryColor", w)
           }, null)]
         }), !e.themeOnly && o(q, null, [o(Fe, null, null), o(Ce, {
           hashId: i.value,
@@ -3560,18 +3561,18 @@ const {
             hashId: i.value,
             configType: "layout",
             list: Wt,
-            onChange: (C) => v("layout", C)
+            onChange: (w) => v("layout", w)
           }, null)]
         }), mo.map(({
-          label: C,
+          label: w,
           title: O
         }) => o(xe, {
           label: O,
-          disabled: U(I)[C],
-          value: U(S)[C],
+          disabled: U(I)[w],
+          value: U(S)[w],
           prefixCls: n,
           hashId: i.value,
-          valueKey: C,
+          valueKey: w,
           onChange: (L, B) => v(L, B)
         }, null)), o(Fe, null, null), o(Ce, {
           hashId: i.value,
@@ -3584,15 +3585,15 @@ const {
           }, [Q("更多配置")])])
         }, {
           default: () => [fo.map(({
-            label: C,
+            label: w,
             title: O
           }) => o(xe, {
             label: O,
-            disabled: U(I)[C],
-            value: U(S)[C],
+            disabled: U(I)[w],
+            value: U(S)[w],
             prefixCls: n,
             hashId: i.value,
-            valueKey: C,
+            valueKey: w,
             onChange: (L, B) => v(L, B)
           }, null)), e.weakmode && o(xe, {
             label: "色弱模式",
@@ -3600,14 +3601,14 @@ const {
             prefixCls: n,
             hashId: i.value,
             valueKey: "colorWeak",
-            onChange: (C, O) => v(C, O)
+            onChange: (w, O) => v(w, O)
           }, null), e.showProgress && o(xe, {
             label: "顶部进度条",
             value: U(S).showProgressBar,
             prefixCls: n,
             hashId: i.value,
             valueKey: "showProgressBar",
-            onChange: (C, O) => v(C, O)
+            onChange: (w, O) => v(w, O)
           }, null)]
         })]), e.hideHintAlert && e.hideCopyButton ? null : o(Fe, null, null), e.hideHintAlert ? null : o(sn, {
           type: "warning",
@@ -3635,13 +3636,13 @@ const {
       }, {
         default: () => [o(ro, {
           settingValue: S.value,
-          onChange: (C, O, L) => v(O || "primaryColor", C, L)
+          onChange: (w, O, L) => v(O || "primaryColor", w, L)
         }, null)]
       }), o(we, {
         width: 320,
         closable: !1,
         placement: "right",
-        open: x.value,
+        open: C.value,
         bodyStyle: {
           padding: 0
         },
@@ -3649,7 +3650,7 @@ const {
       }, {
         default: () => [o(uo, {
           settingValue: S.value,
-          onChange: (C, O, L) => v(C, L, O)
+          onChange: (w, O, L) => v(w, L, O)
         }, null)]
       })]
     }));
@@ -4958,19 +4959,19 @@ const Ol = /* @__PURE__ */ E({
     }), {
       wrapSSR: a,
       hashId: i
-    } = rl(n), l = w(() => [m(!1), `${n}-enter`, i.value].join(" ")), d = w(() => [m(!0), `${n}-leave`, i.value].join(" ")), m = (p) => {
-      const x = Ge.preset.find((S) => e.name == S.name);
-      if (x == null)
+    } = rl(n), l = x(() => [m(!1), `${n}-enter`, i.value].join(" ")), d = x(() => [m(!0), `${n}-leave`, i.value].join(" ")), m = (p) => {
+      const C = Ge.preset.find((S) => e.name == S.name);
+      if (C == null)
         return "";
       let r = "";
-      e.direction == null ? r = x.directions[0] : r = x.directions.find((S) => S == e.direction) || "", r = r == null || r === "default" ? "" : r, r != "" && (r = p && e.reverse ? y(r, x.directions) : r, r = r[0].toUpperCase() + r.substring(1));
+      e.direction == null ? r = C.directions[0] : r = C.directions.find((S) => S == e.direction) || "", r = r == null || r === "default" ? "" : r, r != "" && (r = p && e.reverse ? y(r, C.directions) : r, r = r[0].toUpperCase() + r.substring(1));
       const T = p ? "Out" : "In";
-      return x.name + T + r;
-    }, y = (p, x) => {
+      return C.name + T + r;
+    }, y = (p, C) => {
       if (p.length == 0 || p == "x" || p == "y")
         return p;
-      let r = x.indexOf(p);
-      return r = r % 2 == 1 ? r - 1 : r + 1, x[r];
+      let r = C.indexOf(p);
+      return r = r % 2 == 1 ? r - 1 : r + 1, C[r];
     };
     return () => e.disabled ? null : a(o(tn, {
       enterActiveClass: l.value,