mamba-layout 0.1.0

package/dist/layout/hooks/useState.js

@@ -0,0 +1,99 @@
+import { ref as o, onActivated as j, onMounted as k, onUnmounted as H, watch as A } from "vue";
+import { useRoute as N } from "vue-router";
+import { createContext as O } from "../../utils/createContext.js";
+import { replaceName as W, tname as $, getRouteLastVisibleParentMenu as U } from "../../utils/repoUtils.js";
+import { useSetting as V } from "./useSetting.js";
+const [Q, q] = O("LayoutRoot");
+function X() {
+  const s = N(), h = o([]), r = o(), I = o(), c = o(""), i = o(""), M = o(""), m = V(), C = o(!0), E = o(!1), B = o(), d = () => {
+    var t;
+    return ((t = m.value.menus) == null ? void 0 : t.filter((v) => {
+      var n;
+      return ((n = v.meta) == null ? void 0 : n.appId) == i.value;
+    })) || [];
+  }, b = (t, v, n = 0, f) => {
+    var P, x, R, L;
+    const l = f ? [...f] : [], p = [], w = [];
+    for (const e in t) {
+      [...l], t[e];
+      const a = ((P = s.meta) == null ? void 0 : P.parent) || s.path, u = ((x = t[e].path) == null ? void 0 : x.replace(/\/:(\w+)/g, "/([^/]+)")) || "", T = new RegExp(`^${u}$`);
+      a == t[e].path ? p.push({ index: e, item: t[e] }) : T.test(a) && w.push({ index: e, item: t[e] });
+    }
+    const g = p.length > 0 ? p : w;
+    if (g.length > 0) {
+      const e = g[0], a = [...l];
+      a[n] = e.item, r.value = {
+        ...e.item,
+        paths: a.slice(0, n + 1)
+      }, i.value = ((R = e.item.meta) == null ? void 0 : R.appId) || "", I.value = v;
+    }
+    for (const e in t)
+      if (t[e].children && ((L = t[e].children) != null && L.length)) {
+        const a = t[e].children || [], u = [...l];
+        u[n] = t[e], b(a, t[e], n + 1, u);
+      }
+    M.value = s.meta.parentPath || U(
+      s.path.toLowerCase(),
+      m.value.menus || []
+    ) || s.path;
+  }, y = () => {
+    var f, l, p, w, g, P, x, R, L, e;
+    b(m.value.menus || []), i.value || (i.value = ((p = (l = (f = m.value.menus) == null ? void 0 : f.find(
+      (a) => {
+        var u;
+        return (u = a.path) == null ? void 0 : u.startsWith(c.value);
+      }
+    )) == null ? void 0 : l.meta) == null ? void 0 : p.appId) || "");
+    const t = ((w = r.value) == null ? void 0 : w.paths) || [], v = W(
+      $(((P = (g = r.value) == null ? void 0 : g.meta) == null ? void 0 : P.translations) || {}, "name")
+    ), n = ((x = r.value) == null ? void 0 : x.path) == ((R = t[1]) == null ? void 0 : R.path) ? "" : W($(((e = (L = t[1]) == null ? void 0 : L.meta) == null ? void 0 : e.translations) || {}, "name"));
+    document.title = v + (n ? ` - ${n}` : "");
+  }, z = () => {
+    c.value = "/" + (s.path.split("/").filter(Boolean).shift() || ""), y(), h.value = d();
+  };
+  z(), j(() => {
+    z();
+  });
+  const S = () => {
+    E.value = window.innerWidth < 1024, C.value = window.innerWidth > 1024;
+  };
+  return S(), k(() => {
+    window.addEventListener("resize", S);
+  }), H(() => {
+    window.removeEventListener("resize", S);
+  }), A(
+    () => c.value,
+    () => void (h.value = d())
+  ), A(
+    () => [s.path, m.value.menus],
+    () => {
+      M.value = "", r.value = void 0, c.value = "/" + (s.path.split("/").filter(Boolean).shift() || ""), y(), h.value = d(), E.value && (C.value = !1);
+    }
+  ), q({
+    menus: h,
+    currentEndRoute: r,
+    currentTabPath: c,
+    currentAppId: i,
+    defaultParentActive: M,
+    sideOpen: C,
+    isMobile: E,
+    getMenus: d,
+    currentEndParentRoute: I
+  }), {
+    menus: h,
+    currentEndRoute: r,
+    currentTabPath: c,
+    currentAppId: i,
+    defaultParentActive: M,
+    sideOpen: C,
+    isMobile: E,
+    getMenus: d,
+    currentEndParentRoute: I,
+    leftScrollRef: B
+  };
+}
+export {
+  Q as injectLayoutContext,
+  q as provideLayoutContext,
+  X as useStateHook
+};

package/dist/layout/hooks/useTheme.d.ts

@@ -0,0 +1,15 @@
+export type ThemeMode = "light" | "dark";
+export declare function initTheme(fallback?: ThemeMode): ThemeMode;
+export declare function setTheme(value: ThemeMode, options?: {
+    persist?: boolean;
+}): void;
+export declare function toggleTheme(): void;
+export declare function syncThemeFromSetting(value?: ThemeMode): void;
+export declare function useTheme(): {
+    theme: import('vue').Ref<ThemeMode, ThemeMode>;
+    isDark: import('vue').ComputedRef<boolean>;
+    initTheme: typeof initTheme;
+    setTheme: typeof setTheme;
+    toggleTheme: typeof toggleTheme;
+    syncThemeFromSetting: typeof syncThemeFromSetting;
+};

package/dist/layout/hooks/useTheme.js

@@ -0,0 +1,44 @@
+import { computed as m, ref as o } from "vue";
+import { Storage as s } from "../../utils/repoUtils.js";
+const u = "theme", f = "(prefers-color-scheme: dark)", r = o("light"), n = o(!1);
+let a = !1;
+const d = (e) => e === "dark" || e === "light" ? e : null, h = () => typeof window > "u" || typeof window.matchMedia != "function" ? "light" : window.matchMedia(f).matches ? "dark" : "light", T = (e) => {
+  const t = d(s.get(u, null));
+  return t ? (n.value = !0, t) : e || h();
+}, c = (e) => {
+  typeof document > "u" || document.documentElement.classList.toggle("dark", e === "dark");
+};
+function l(e) {
+  const t = T(e);
+  return r.value = t, c(t), a = !0, t;
+}
+function i(e, t) {
+  r.value = e, c(e), (t == null ? void 0 : t.persist) !== !1 && (s.set(u, e, null), n.value = !0);
+}
+function g() {
+  i(r.value === "dark" ? "light" : "dark");
+}
+function k(e) {
+  if (!a) {
+    l(e);
+    return;
+  }
+  !n.value && e && i(e, { persist: !1 });
+}
+function w() {
+  return {
+    theme: r,
+    isDark: m(() => r.value === "dark"),
+    initTheme: l,
+    setTheme: i,
+    toggleTheme: g,
+    syncThemeFromSetting: k
+  };
+}
+export {
+  l as initTheme,
+  i as setTheme,
+  k as syncThemeFromSetting,
+  g as toggleTheme,
+  w as useTheme
+};

package/dist/layout/utils/index.d.ts

@@ -0,0 +1,7 @@
+import { SettingConfig } from '../hooks/useSetting';
+export declare function getQueryString(key: string, url?: string): string;
+export declare const getLayoutLoginPath: (setting?: Partial<SettingConfig>) => string;
+export declare const redirectToLayoutLogin: (setting?: Partial<SettingConfig>) => void;
+export declare const getLayoutUserCenterPath: (setting?: Partial<SettingConfig>) => string;
+export declare const setLayoutStyle: (setting: SettingConfig) => void;
+export declare function setPrimaryColor(primaryColor: string): void;

package/dist/layout/utils/index.js

@@ -0,0 +1,59 @@
+function $(e, o) {
+  const n = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i"), c = (o || window.location.search.replace(/^\?/, "")).match(n);
+  return c != null ? decodeURI(c[2]) : "";
+}
+const h = () => typeof location > "u" ? "" : location.href, p = (e) => (e == null ? void 0 : e.loginPath) || `/login?redirect=${encodeURIComponent(h())}`, C = (e) => {
+  typeof location > "u" || (location.href = p(e));
+}, L = (e) => (e == null ? void 0 : e.userCenterPath) || "/usercenter/home", b = (e) => {
+  var l;
+  const o = e.themeColor, n = {};
+  if (o)
+    for (const r in o) {
+      if (!o[r]) continue;
+      const i = "--layout-" + r.replace(/([A-Z])/g, "-$1").toLocaleLowerCase();
+      n[i] = o[r], r == "colorPrimary" && f(o[r]);
+    }
+  let t = document.getElementById("layout-style");
+  t && ((l = t.parentNode) == null || l.removeChild(t)), t = document.createElement("style"), t.id = "layout-style", document.head.appendChild(t);
+  const c = Object.keys(n).map((r) => r + ":" + n[r]).join(";");
+  t.innerHTML = `html:root{${c}}`;
+};
+function f(e) {
+  var c;
+  let o = document.getElementById("primary-style");
+  if (e == "theme-default" && o) {
+    (c = o.parentNode) == null || c.removeChild(o);
+    return;
+  }
+  const n = g(e);
+  o || (o = document.createElement("style"), o.id = "primary-style", document.head.appendChild(o));
+  const t = Object.keys(n).map((l) => l + ":" + n[l]).join(";");
+  o.innerHTML = `html:root{${t}}`;
+}
+function g(e) {
+  var m;
+  const o = ((m = e.match(/\d+/g)) == null ? void 0 : m.map(Number)) || [], [n, t, c] = o, l = `rgb(${n}, ${t}, ${c})`, r = (d) => {
+    const a = d / 100, u = Math.min(255, n + (255 - n) * a), y = Math.min(255, t + (255 - t) * a), s = Math.min(255, c + (255 - c) * a);
+    return `rgb(${u.toFixed(1)}, ${y.toFixed(1)}, ${s.toFixed(1)})`;
+  }, i = (d) => {
+    const a = 1 - d / 100;
+    return `rgb(${Math.round(n * a)} ${Math.round(t * a)} ${Math.round(c * a)})`;
+  };
+  return {
+    "--el-color-primary": l,
+    "--el-color-primary-light-3": r(30),
+    "--el-color-primary-light-5": r(50),
+    "--el-color-primary-light-7": r(70),
+    "--el-color-primary-light-8": r(80),
+    "--el-color-primary-light-9": r(90),
+    "--el-color-primary-dark-2": i(20)
+  };
+}
+export {
+  p as getLayoutLoginPath,
+  L as getLayoutUserCenterPath,
+  $ as getQueryString,
+  C as redirectToLayoutLogin,
+  b as setLayoutStyle,
+  f as setPrimaryColor
+};