@duxweb/dvha-pro 1.0.47 → 1.0.48

package/dist/esm/pages/authLayout.js

@@ -1,6 +1,6 @@
-import { defineComponent as t, createVNode as o } from "vue";
-import { OverlaysProvider as m } from "@overlastic/vue";
-import "@duxweb/dvha-core";
+import { defineComponent as m, createVNode as o } from "vue";
+import { useManage as i } from "@duxweb/dvha-core";
+import { OverlaysProvider as p } from "@overlastic/vue";
 import "naive-ui";
 import "vue-router";
 import "clsx";
@@ -21,11 +21,12 @@ import "vue-cropper";
 import "jinrishici";
 import "lodash-es";
 import "vue-draggable-plus";
-import { DuxGlobalLayout as i } from "./layout/global.js";
-import { DuxLayoutPage as p } from "./layout/page.js";
-import { DuxMenuCmd as l } from "./menu/cmd.js";
-import { DuxMenuMain as e } from "./menu/main.js";
-import { DuxMobileMenu as u } from "./menu/mobile.js";
+import { DuxGlobalLayout as l } from "./layout/global.js";
+import { DuxLayoutPage as e } from "./layout/page.js";
+import { DuxMenuCmd as n } from "./menu/cmd.js";
+import { DuxMenuApp as u } from "./menu/menuApp.js";
+import { DuxMenuMain as a } from "./menu/menuMain.js";
+import { DuxMobileMenu as f } from "./menu/mobile.js";
 import "./page404.js";
 import "short-unique-id";
 import "aieditor";
@@ -40,24 +41,26 @@ import "../components/posterEditor/elements/index.js";
 import "fabric";
 import "dayjs";
 import "@tanstack/vue-query";
-import { useUI as n } from "../hooks/ui.js";
-const $ = /* @__PURE__ */ t({
+import { useUI as s } from "../hooks/ui.js";
+const mo = /* @__PURE__ */ m({
   name: "DuxAuthLayout",
   setup() {
     const {
       menuCollapsed: r
-    } = n();
-    return () => o(i, null, {
-      default: () => [o(m, null, {
+    } = s(), t = i();
+    return () => o(l, null, {
+      default: () => [o(p, null, {
         default: () => [o("div", {
           class: "h-screen w-screen flex relative"
-        }, [o("div", {
-          class: ["flex-none transition-all", "hidden lg:block app-menu", r.value ? "w-120px" : "w-200px"]
-        }, [o(e, null, null)]), o(p, null, null)]), o(l, null, null), o(u, null, null)]
+        }, [t.config.theme?.layout === "menu" && o("div", {
+          class: ["flex-none transition-all", "hidden lg:block", r.value ? "w-120px" : "w-200px"]
+        }, [o(a, null, null)]), (!t.config.theme?.layout || t.config.theme?.layout === "app") && o("div", {
+          class: ["flex-none transition-all", "hidden lg:block"]
+        }, [o(u, null, null)]), o(e, null, null)]), o(n, null, null), o(f, null, null)]
       })]
     });
   }
 });
 export {
-  $ as DuxAuthLayout
+  mo as DuxAuthLayout
 };

package/dist/esm/pages/layout/page.js

@@ -101,7 +101,7 @@ const It = /* @__PURE__ */ l({
     }, [m.title]), t("div", null, [t(x, {
       collapsed: !0
     }, null)])]), t("div", {
-      class: "flex-1 py-2"
+      class: "flex-1 py-2 min-w-0"
     }, [t(g, null, null)])]), t("div", {
       class: "flex-1 min-h-0  mr-2 ml-2 mb-2 lg:ml-0"
     }, [t(c, null, null)])]);

package/dist/esm/pages/layout/tab.js

@@ -61,7 +61,7 @@ const I = /* @__PURE__ */ f({
       class: "app-page-tabs",
       barWidth: 100
     }, r.value), {
-      default: () => [p?.value?.map((e) => t(N, {
+      default: () => p?.value?.map((e) => t(N, {
         key: e.path,
         name: e.path || ""
       }, {
@@ -80,7 +80,7 @@ const I = /* @__PURE__ */ f({
         }, [t("div", {
           class: "i-tabler:x size-4"
         }, null)])])])]
-      }))]
+      }))
     }), t(O, {
       trigger: "manual",
       x: l.x,

package/dist/esm/pages/menu/avatar.js

@@ -1,9 +1,9 @@
-import { defineComponent as A, computed as d, createVNode as e } from "vue";
-import { useI18n as v, useManage as L, useLogout as R, useTheme as I, useGetAuth as S } from "@duxweb/dvha-core";
+import { defineComponent as L, computed as b, createVNode as e } from "vue";
+import { useI18n as f, useManage as S, useLogout as A, useTheme as R, useGetAuth as I } from "@duxweb/dvha-core";
 import { NDropdown as B } from "naive-ui";
 import { useRouter as N } from "vue-router";
 import "clsx";
-import { DuxAvatar as f } from "../../components/widget/avatar.js";
+import { DuxAvatar as g } from "../../components/widget/avatar.js";
 import "vue-echarts";
 import "@overlastic/vue";
 import "dayjs";
@@ -51,7 +51,7 @@ import "unocss/preset-wind4";
 import "@vee-validate/i18n/dist/locale/en.json";
 import "@vee-validate/i18n/dist/locale/zh_CN.json";
 import "vee-validate";
-import G from "./button.js";
+import j from "./button.js";
 import "vue-command-palette";
 import "../page404.js";
 import "short-unique-id";
@@ -62,77 +62,85 @@ import "@vue-flow/background";
 import "@iconify-json/tabler/icons.json";
 import "../../components/posterEditor/elements/index.js";
 import "fabric";
-const Ke = /* @__PURE__ */ A({
+const Ke = /* @__PURE__ */ L({
   name: "DuxMenuAvatar",
   props: {
     collapsed: {
       type: Boolean,
       default: !1
+    },
+    btnClass: {
+      type: String,
+      default: ""
+    },
+    btnLabelClass: {
+      type: String,
+      default: ""
     }
   },
-  setup(g) {
+  setup(s) {
     const {
-      t
-    } = v(), s = v(), b = N(), {
-      config: h,
-      getRoutePath: y
-    } = L(), {
-      mutate: k
-    } = R(), {
-      mode: m,
-      primaryColors: x,
+      t: o
+    } = f(), m = f(), v = N(), {
+      config: y,
+      getRoutePath: h
+    } = S(), {
+      mutate: x
+    } = A(), {
+      mode: p,
+      primaryColors: k,
       neutralColors: C,
-      colorMapping: u,
-      setColor: c,
-      setMode: M
-    } = I(), l = (o, r) => e("div", {
+      colorMapping: c,
+      setColor: d,
+      setMode: w
+    } = R(), l = (t, r) => e("div", {
       class: "flex gap-2 items-center w-30"
     }, [e("div", {
       class: "flex-1 min-w-0"
-    }, [o]), e("div", null, [r && e("div", {
+    }, [t]), e("div", null, [r && e("div", {
       class: "i-tabler:check"
-    }, null)])]), a = (o) => e("div", {
-      class: `${o} size-4`
-    }, null), w = d(() => {
-      const o = h.userMenus?.map((r) => ({
-        label: t(r.label || "", {}, r.label),
+    }, null)])]), i = (t) => e("div", {
+      class: `${t} size-4`
+    }, null), M = b(() => {
+      const t = y.userMenus?.map((r) => ({
+        label: o(r.label || "", {}, r.label),
         key: r.key,
-        icon: () => a(r.icon),
+        icon: () => i(r.icon),
         path: r.path
       }));
-      return o?.length > 0 ? [...o, {
+      return t?.length > 0 ? [...t, {
         type: "divider"
       }] : [];
-    }), i = S(), z = d(() => [{
+    }), a = I(), z = b(() => [{
       key: "header",
       type: "render",
       render: () => e("div", {
         class: "flex gap-2 px-3 pb-1 pt-1 items-center "
-      }, [e(f, {
+      }, [e(g, {
         round: !0,
         size: 28,
-        src: i.info?.avatar
+        src: a.info?.avatar
       }, null), e("div", {
         class: "flex flex-col"
       }, [e("div", {
         class: "text-sm font-medium"
-      }, [i.info?.nickname]), e("div", {
+      }, [a.info?.nickname]), e("div", {
         class: "text-xs text-muted"
-      }, [i.info?.username])])])
+      }, [a.info?.username])])])
     }, {
       type: "divider"
-    }, ...w.value, {
-      label: t("components.menu.language"),
+    }, ...M.value, {
+      label: o("components.menu.language"),
       key: "locale",
-      icon: () => a("i-tabler:language"),
-      children: [...(s.getLocales() || []).map((o) => ({
-        label: () => l(t(`locale.${o}`), s.getLocale() === o),
-        key: `locale.${o}`
+      icon: () => i("i-tabler:language"),
+      children: [...(m.getLocales() || []).map((t) => ({
+        label: () => l(o(`locale.${t}`), m.getLocale() === t),
+        key: `locale.${t}`
       }))]
     }, {
-      label: t("components.menu.color"),
+      label: o("components.menu.color"),
       key: "color",
-      icon: () => a("i-tabler:palette"),
+      icon: () => i("i-tabler:palette"),
       children: [{
         label: () => e("div", {
           class: "flex gap-2 items-center w-30"
@@ -141,18 +149,18 @@ const Ke = /* @__PURE__ */ A({
           style: {
             backgroundColor: "rgb(var(--ui-color-primary))"
           }
-        }, null), e("div", null, [t("components.menu.primaryColor")])]),
+        }, null), e("div", null, [o("components.menu.primaryColor")])]),
         key: "color.primary",
-        children: x.value?.map((o) => ({
+        children: k.value?.map((t) => ({
           label: () => l(e("div", {
             class: "flex gap-2 items-center"
           }, [e("div", {
             class: "size-2 rounded-full",
             style: {
-              backgroundColor: `rgb(var(--base-color-${o}-500))`
+              backgroundColor: `rgb(var(--base-color-${t}-500))`
             }
-          }, null), e("div", null, [o])]), u.value.primary === o),
-          key: `color.primary.${o}`
+          }, null), e("div", null, [t])]), c.value.primary === t),
+          key: `color.primary.${t}`
         }))
       }, {
         label: () => e("div", {
@@ -162,63 +170,63 @@ const Ke = /* @__PURE__ */ A({
           style: {
             backgroundColor: "rgb(var(--ui-color-gray-600))"
           }
-        }, null), e("div", null, [t("components.menu.neutralColor")])]),
+        }, null), e("div", null, [o("components.menu.neutralColor")])]),
         key: "color.neutral",
-        children: C.value?.map((o) => ({
+        children: C.value?.map((t) => ({
           label: () => l(e("div", {
             class: "flex gap-2 items-center"
           }, [e("div", {
             class: "size-2 rounded-full",
             style: {
-              backgroundColor: `rgb(var(--base-color-${o}-600))`
+              backgroundColor: `rgb(var(--base-color-${t}-600))`
             }
-          }, null), e("div", null, [o])]), u.value.gray === o),
-          key: `color.neutral.${o}`
+          }, null), e("div", null, [t])]), c.value.gray === t),
+          key: `color.neutral.${t}`
         }))
       }]
     }, {
-      label: t("components.menu.theme"),
+      label: o("components.menu.theme"),
       key: "theme",
-      icon: () => a("i-tabler:brightness-half"),
+      icon: () => i("i-tabler:brightness-half"),
       children: [{
-        label: () => l(t("components.menu.followSystem"), m.value === "auto"),
+        label: () => l(o("components.menu.followSystem"), p.value === "auto"),
         key: "theme.auto"
       }, {
-        label: () => l(t("components.menu.lightMode"), m.value === "light"),
+        label: () => l(o("components.menu.lightMode"), p.value === "light"),
         key: "theme.light"
       }, {
-        label: () => l(t("components.menu.darkMode"), m.value === "dark"),
+        label: () => l(o("components.menu.darkMode"), p.value === "dark"),
         key: "theme.dark"
       }]
     }, {
       type: "divider"
     }, {
-      label: t("components.menu.logout"),
+      label: o("components.menu.logout"),
       key: "logout",
-      icon: () => a("i-tabler:logout")
+      icon: () => i("i-tabler:logout")
     }]);
-    function $(o, r) {
-      const p = o.lastIndexOf("."), [D, n] = p === -1 ? [o, ""] : [o.substring(0, p), o.substring(p + 1)];
+    function $(t, r) {
+      const u = t.lastIndexOf("."), [D, n] = u === -1 ? [t, ""] : [t.substring(0, u), t.substring(u + 1)];
       switch (D) {
         case "locale":
-          s.changeLocale(n);
+          m.changeLocale(n);
           break;
         case "color.primary":
-          c("primary", n);
+          d("primary", n);
           break;
         case "color.neutral":
-          c("gray", n);
+          d("gray", n);
           break;
         case "theme":
-          M(n);
+          w(n);
           break;
         case "logout":
-          k();
+          x();
           break;
         default:
           if (!r?.path)
             return;
-          b.push(y(r.path));
+          v.push(h(r.path));
       }
     }
     return () => e(B, {
@@ -228,22 +236,26 @@ const Ke = /* @__PURE__ */ A({
       onSelect: $,
       width: 200
     }, {
-      default: () => [e(G, {
-        collapsed: g.collapsed
+      default: () => [e(j, {
+        class: s.btnClass,
+        labelClass: s.btnLabelClass,
+        collapsed: s.collapsed
       }, {
-        icon: () => e(f, {
+        icon: () => e(g, {
           class: "group-hover:shadow-lg",
           round: !0,
           size: 28,
-          src: i.info?.avatar
+          src: a.info?.avatar
         }, null),
         default: () => e("div", {
+          class: "flex justify-between"
+        }, [e("div", {
           class: "flex flex-col"
         }, [e("div", {
           class: "text-sm font-medium"
-        }, [i.info?.nickname]), e("div", {
+        }, [a.info?.nickname]), e("div", {
           class: "text-xs text-muted"
-        }, [i.info?.username])])
+        }, [a.info?.username])])])
       })]
     });
   }

package/dist/esm/pages/menu/button.js

@@ -1,4 +1,4 @@
-import { defineComponent as e, createVNode as p } from "vue";
+import { defineComponent as p, createVNode as i } from "vue";
 import "@duxweb/dvha-core";
 import "naive-ui";
 import "vue-router";
@@ -60,13 +60,17 @@ import "fabric";
 import "dayjs";
 import "@tanstack/vue-query";
 import { useUI as m } from "../../hooks/ui.js";
-const vt = /* @__PURE__ */ e({
+const dt = /* @__PURE__ */ p({
   name: "DuxMenuButton",
   props: {
     class: {
       type: String,
       default: ""
     },
+    labelClass: {
+      type: String,
+      default: ""
+    },
     onClick: {
       type: Function,
       default: () => {
@@ -75,29 +79,24 @@ const vt = /* @__PURE__ */ e({
     collapsed: {
       type: Boolean,
       default: !0
-    },
-    inverted: {
-      type: Boolean,
-      default: !1
     }
   },
   setup(t, {
     slots: o
   }) {
     const {
-      menuCollapsed: r,
-      menuMobileCollapsed: i
+      menuCollapsed: r
     } = m();
-    return () => p("div", {
+    return () => i("div", {
       onClick: () => {
         t.onClick?.();
       },
-      class: ["flex items-center gap-1 justify-center py-1 px-2 cursor-pointer gap-2", t.class, r.value && !i.value ? "group" : "hover:shadow-xs hover:bg-default flex-1 w-full", t.inverted ? "transition-all duration-300 bg-inverted/5 rounded-full hover:bg-default hover:shadow-xs" : " rounded-md"]
-    }, [o.icon?.(), t.collapsed === !1 && !r.value && !i.value && p("div", {
-      class: ["overflow-hidden ease-in-out whitespace-nowrap text-left min-w-0 flex-1", t.inverted ? "text-default" : ""]
+      class: ["flex items-center gap-1 justify-center py-1 px-2 cursor-pointer gap-2 flex-1 w-full", t.class]
+    }, [o.icon?.(), t.collapsed === !1 && !r.value && i("div", {
+      class: ["overflow-hidden ease-in-out whitespace-nowrap text-left min-w-0 flex-1", t.labelClass]
     }, [o.default?.()])]);
   }
 });
 export {
-  vt as default
+  dt as default
 };

package/dist/esm/pages/menu/dark.js

@@ -0,0 +1,54 @@
+import { defineComponent as i, computed as u, createVNode as e } from "vue";
+import { useI18n as s, useTheme as m } from "@duxweb/dvha-core";
+import { NTooltip as c, NButton as d } from "naive-ui";
+const f = /* @__PURE__ */ i({
+  name: "DuxMenuDark",
+  setup() {
+    const {
+      t
+    } = s(), {
+      mode: l,
+      setMode: a
+    } = m(), o = u(() => {
+      const n = {
+        auto: {
+          icon: "i-tabler:device-desktop",
+          label: t("components.menu.followSystem", "Follow System"),
+          nextMode: "light"
+        },
+        light: {
+          icon: "i-tabler:sun",
+          label: t("components.menu.lightMode", "Light"),
+          nextMode: "dark"
+        },
+        dark: {
+          icon: "i-tabler:moon",
+          label: t("components.menu.darkMode", "Dark"),
+          nextMode: "auto"
+        }
+      };
+      return n[l.value] || n.auto;
+    }), r = () => {
+      a(o.value.nextMode);
+    };
+    return () => e(c, {
+      trigger: "hover",
+      placement: "right"
+    }, {
+      default: () => o.value.label,
+      trigger: () => e(d, {
+        quaternary: !0,
+        onClick: r
+      }, {
+        icon: () => e("div", {
+          class: "transition-all text-muted p-2 hover:text-white"
+        }, [e("div", {
+          class: `${o.value.icon} size-5`
+        }, null)])
+      })
+    });
+  }
+});
+export {
+  f as default
+};