@duxweb/dvha-pro 1.0.46 → 1.0.48

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
+};

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

@@ -0,0 +1,207 @@
+import { defineComponent as z, onMounted as A, computed as n, createVNode as e, Transition as N, createTextVNode as s, h as m } from "vue";
+import { useManage as w, useI18n as k, useMenu as I, DuxLogoIcon as T } from "@duxweb/dvha-core";
+import { cloneDeep as u } from "lodash-es";
+import { NScrollbar as d, NMenu as c, NTag as f } from "naive-ui";
+import { RouterLink as V } from "vue-router";
+import L from "./avatar.js";
+import S from "./button.js";
+import "@vueuse/core";
+import "vue-command-palette";
+import "@overlastic/vue";
+import { DuxCard as v } from "../../components/card/card.js";
+import "clsx";
+import "vue-echarts";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
+import "vue-cropper";
+import "jinrishici";
+import "vue-draggable-plus";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "highlight.js/lib/core";
+import "highlight.js/lib/languages/bash";
+import "highlight.js/lib/languages/css";
+import "highlight.js/lib/languages/go";
+import "highlight.js/lib/languages/java";
+import "highlight.js/lib/languages/javascript";
+import "highlight.js/lib/languages/json";
+import "highlight.js/lib/languages/markdown";
+import "highlight.js/lib/languages/php";
+import "highlight.js/lib/languages/python";
+import "highlight.js/lib/languages/shell";
+import "highlight.js/lib/languages/sql";
+import "highlight.js/lib/languages/typescript";
+import "highlight.js/lib/languages/xml";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+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 "@duxweb/dvha-naiveui";
+import "../page404.js";
+import "short-unique-id";
+import "aieditor";
+import "@vue-flow/core";
+import "@vue-flow/background";
+/* empty css                                    */
+import "mime";
+import "@iconify-json/tabler/icons.json";
+import "../../components/posterEditor/elements/index.js";
+import "fabric";
+import "dayjs";
+import "@tanstack/vue-query";
+import { useUI as U } from "../../hooks/ui.js";
+import B from "./dark.js";
+import F from "./notice.js";
+const Ye = /* @__PURE__ */ z({
+  name: "DuxMenuApp",
+  props: {
+    collapsed: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    const {
+      setCmdVisible: x,
+      setMenuCollapsed: h
+    } = U(), {
+      config: l
+    } = w(), {
+      t: g
+    } = k(), {
+      mainMenu: b,
+      subMenu: y,
+      appActive: a,
+      subActive: p,
+      isSubMenu: M
+    } = I({
+      doubleMenu: !0
+    });
+    A(() => {
+      h(!1);
+    });
+    const i = (o) => o.map((t) => {
+      const r = {
+        ...t,
+        key: t.name,
+        icon: t?.icon ? () => m("div", {
+          class: `${t.icon} size-5`
+        }) : void 0,
+        labelName: t.label,
+        label: () => t.path ? m(V, {
+          to: {
+            path: t.path
+          }
+        }, {
+          default: () => t.label
+        }) : t.label
+      };
+      return r.children && r.children.length > 0 && (r.children = i(r.children)), r;
+    }), C = n(() => i(u(b.value))), D = n(() => i(u(y.value)));
+    return () => e("div", {
+      class: "flex h-screen gap-2  p-2"
+    }, [e(v, {
+      class: "bg-primary-950 w-16 text-inverted z-1"
+    }, {
+      default: () => [e("div", {
+        class: "h-full flex-none flex flex-col"
+      }, [e("div", {
+        class: "py-4 px-2 hidden lg:flex justify-center items-center"
+      }, [e("div", {
+        class: "bg-white dark:bg-primary-950 rounded-full p-2 shadow group-hover:shadow-lg"
+      }, [l.theme?.appLogo ? e("img", {
+        class: "size-4",
+        src: l.theme?.appLogo
+      }, null) : e(T, {
+        highlight: "fill-primary",
+        class: "size-4"
+      }, null)])]), e("div", {
+        class: "flex-1"
+      }, [e(d, null, {
+        default: () => [e(c, {
+          inverted: !0,
+          options: C.value,
+          value: a.value,
+          collapsed: !0,
+          collapsedWidth: 64,
+          collapsedIconSize: 22,
+          onUpdateValue: (o) => a.value = o
+        }, null)]
+      })]), e("div", {
+        class: "flex-none hidden lg:flex flex-col items-center gap-2 p-2"
+      }, [l.notice?.status && e(F, {
+        collapsed: !0
+      }, null), e(B, null, null), e(L, {
+        collapsed: !0
+      }, null)])])]
+    }), e(N, {
+      name: "submenu-slide",
+      enterActiveClass: "transition-all duration-150 ease-out",
+      enterFromClass: "opacity-0 translate-x-[-50%]",
+      enterToClass: "opacity-100 translate-x-0",
+      leaveActiveClass: "transition-all duration-150 ease-in",
+      leaveFromClass: "opacity-100 translate-x-0",
+      leaveToClass: "opacity-0 translate-x-[-50%]"
+    }, {
+      default: () => [M.value && e(v, {
+        class: "w-160px overflow-hidden flex flex-col gap-2"
+      }, {
+        default: () => [e("div", {
+          class: "p-2  flex-none"
+        }, [e(S, {
+          collapsed: !1,
+          class: "rounded relative py-1.5 px-3 bg-inverted/5",
+          onClick: () => x(!0)
+        }, {
+          icon: () => e("div", {
+            class: "i-tabler:search size-4 icon-gradient"
+          }, null),
+          default: () => e("div", {
+            class: "text-muted text-sm"
+          }, [g("common.search"), e("div", {
+            class: "flex items-center gap-1 absolute right-2.5 top-1.3"
+          }, [e(f, {
+            size: "small",
+            bordered: !1,
+            type: "primary"
+          }, {
+            default: () => [s("⌘")]
+          }), e(f, {
+            size: "small",
+            bordered: !1,
+            type: "primary"
+          }, {
+            default: () => [s("K")]
+          })])])
+        })]), e(d, {
+          class: "flex-1 min-h-0"
+        }, {
+          default: () => [e(c, {
+            rootIndent: 20,
+            indent: 15,
+            options: D.value,
+            value: p.value,
+            collapsed: !1,
+            onUpdateValue: (o) => p.value = o
+          }, null)]
+        })]
+      })]
+    })]);
+  }
+});
+export {
+  Ye as DuxMenuApp
+};