@maz-ui/themes 4.1.3 → 4.1.5

package/dist/composables/useTheme.js

@@ -1,58 +1,58 @@
-import { ref as d, onMounted as k, computed as s, toValue as P, watch as y, watchEffect as w, inject as T, getCurrentInstance as S } from "vue";
-import { setCookie as C } from "../utils/cookie-storage.js";
-import { generateCriticalCSS as z, generateFullCSS as E, injectCSS as p, CSS_IDS as v } from "../utils/css-generator.js";
-import { getColorMode as L, isSystemPrefersDark as x } from "../utils/get-color-mode.js";
-import { getPreset as D } from "../utils/get-preset.js";
-import { mergePresets as I } from "../utils/preset-merger.js";
-function O() {
+import { ref as f, onMounted as k, computed as s, toValue as w, watch as y, watchEffect as T, inject as C, getCurrentInstance as M } from "vue";
+import { setCookie as z } from "../utils/cookie-storage.js";
+import { generateCriticalCSS as E, generateFullCSS as L, injectCSS as p, CSS_IDS as v } from "../utils/css-generator.js";
+import { getColorMode as x, isSystemPrefersDark as I } from "../utils/get-color-mode.js";
+import { getPreset as O } from "../utils/get-preset.js";
+import { mergePresets as $ } from "../utils/preset-merger.js";
+function D() {
   return typeof document > "u" || typeof globalThis.window > "u";
 }
-function $() {
+function F() {
   return typeof document < "u";
 }
-function F(e) {
+function R(e) {
   return !!e;
 }
-function R(e, o, r = {}) {
+function U(e, o, r = {}) {
   const {
-    internalWindow: u = $() ? globalThis : void 0,
-    ...l
+    internalWindow: u = F() ? globalThis : void 0,
+    ...c
   } = r;
   let n;
-  const c = d(!1);
+  const d = f(!1);
   k(() => {
-    c.value = (u && "MutationObserver" in u) ?? !1;
+    d.value = (u && "MutationObserver" in u) ?? !1;
   });
   const m = () => {
     n && (n.disconnect(), n = void 0);
-  }, h = s(() => {
-    const a = P(e);
+  }, b = s(() => {
+    const a = w(e);
     let i;
-    return a && "$el" in a ? i = a.$el : a && (i = a), new Set([i].filter(F));
-  }), b = y(
-    h,
+    return a && "$el" in a ? i = a.$el : a && (i = a), new Set([i].filter(R));
+  }), P = y(
+    b,
     (a) => {
-      m(), c.value && a.size && (n = new MutationObserver(o), a.forEach((i) => n.observe(i, l)));
+      m(), d.value && a.size && (n = new MutationObserver(o), a.forEach((i) => n.observe(i, c)));
     },
     { immediate: !0, flush: "post" }
   );
   return {
-    isSupported: c,
+    isSupported: d,
     stop: () => {
-      b(), m();
+      P(), m();
     },
     takeRecords: () => n?.takeRecords()
   };
 }
-const t = d();
-function M(e) {
+const t = f();
+function S(e) {
   typeof document > "u" || !e || e.darkModeStrategy === "media" || e.mode === "light" || (e.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
 }
-function U() {
-  const e = S()?.appContext.app;
+function j() {
+  const e = M()?.appContext.app;
   e && t.value && (e.config.globalProperties.$mazThemeState = t.value);
 }
-function j(e) {
+function N(e) {
   if (e.currentPreset && e.colorMode !== void 0) {
     g({
       currentPreset: e.currentPreset,
@@ -64,7 +64,7 @@ function j(e) {
     });
     return;
   }
-  const o = L(e.colorMode), r = o === "auto" ? x() : o === "dark";
+  const o = x(e.colorMode), r = o === "auto" ? I() : o === "dark";
   g({
     currentPreset: e.currentPreset,
     colorMode: o,
@@ -81,46 +81,49 @@ function g(e) {
     };
     o.addEventListener("change", r), r();
   }
-  w(() => {
-    t.value && (M(t.value), U());
+  T(() => {
+    t.value && (S(t.value), j());
   });
 }
-const N = s({
+const W = s({
   get: () => t.value?.colorMode,
-  set: (e) => f(e)
-}), W = s(() => t.value?.isDark ?? !1), _ = s(() => t.value?.strategy), A = s(() => t.value?.mode), G = s(() => t.value?.darkModeStrategy), Q = s(() => t.value?.currentPreset?.name);
-async function V(e) {
+  set: (e) => l(e)
+}), _ = s(() => t.value?.isDark ?? !1), A = s(() => t.value?.strategy), G = s(() => t.value?.mode), Q = s(() => t.value?.darkModeStrategy), h = s(() => t.value?.currentPreset), V = s(() => h.value?.name);
+async function Y(e) {
   if (!t.value)
     return;
-  const o = typeof e == "string" ? await D(e) : e;
+  const o = typeof e == "string" ? await O(e) : e;
   if (!o || !t.value.currentPreset) {
     console.error("[@maz-ui/themes] No preset found - If you are using the buildtime strategy, you must provide a complete preset");
     return;
   }
-  const r = "name" in o && o.name !== t.value.currentPreset.name ? o : I(t.value.currentPreset, o);
+  const r = "name" in o && o.name !== t.value.currentPreset.name ? o : $(t.value.currentPreset, o);
   if (t.value.currentPreset = r, t.value.strategy === "runtime" || t.value.strategy === "hybrid") {
     const u = {
       mode: t.value.mode,
       darkSelectorStrategy: t.value.darkModeStrategy,
       prefix: "maz"
-    }, l = z(r, u), n = E(r, u);
-    p(v.CRITICAL, l), p(v.FULL, n);
+    }, c = E(r, u), n = L(r, u);
+    p(v.CRITICAL, c), p(v.FULL, n);
   }
 }
-function f(e) {
-  t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", M(t.value), C("maz-color-mode", e));
+function l(e, o = !0) {
+  t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", o && S(t.value), z("maz-color-mode", e));
 }
-function Y() {
-  t.value && f(t.value.isDark ? "light" : "dark");
+function q() {
+  t.value && l(t.value.isDark ? "light" : "dark");
 }
-function te() {
-  const e = d();
+function oe() {
+  const e = f();
   k(() => {
     e.value = document.documentElement;
-  }), R(
+  }), U(
     e,
     () => {
-      !t.value || O() || (t.value.isDark = document.documentElement.classList.contains("dark"));
+      if (D() || !t.value)
+        return;
+      const r = document.documentElement.classList.contains("dark") ? "dark" : "light";
+      t.value.colorMode !== r && l(r, !1);
     },
     {
       attributes: !0
@@ -128,34 +131,35 @@ function te() {
   );
   let o;
   try {
-    if (o = T("mazThemeState", void 0), !o)
+    if (o = C("mazThemeState", void 0), !o)
       throw new Error("mazThemeState not found");
   } catch {
-    const r = S();
+    const r = M();
     r?.appContext?.app?.config?.globalProperties && (o = r.appContext.app.config.globalProperties.$mazThemeState);
   }
   if (o && (t.value ? (typeof document > "u" || typeof globalThis.window > "u") && (t.value = {
     ...t.value,
     ...o
-  }) : j(o)), y(() => o?.currentPreset, (r) => {
+  }) : N(o)), y(() => o?.currentPreset, (r) => {
     t.value && r && (t.value.currentPreset = r);
   }, {
     once: !0
   }), !t.value)
     throw new Error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin before using useTheme composable");
   return {
-    presetName: Q,
-    colorMode: N,
-    isDark: W,
-    strategy: _,
-    updateTheme: V,
-    setColorMode: f,
-    toggleDarkMode: Y,
-    mode: A,
-    darkModeStrategy: G
+    presetName: V,
+    colorMode: W,
+    isDark: _,
+    strategy: A,
+    updateTheme: Y,
+    setColorMode: l,
+    toggleDarkMode: q,
+    mode: G,
+    darkModeStrategy: Q,
+    currentPreset: h
   };
 }
 export {
   g as initThemeState,
-  te as useTheme
+  oe as useTheme
 };

package/dist/types/composables/useTheme.d.ts

@@ -1,7 +1,7 @@
 import { ColorMode, DarkModeStrategy, Strategy, ThemeMode, ThemePreset, ThemePresetName, ThemePresetOverrides, ThemeState } from '../types';
 export declare function initThemeState(initialState: ThemeState): void;
 declare function updateTheme(preset: ThemePreset | ThemePresetOverrides | ThemePresetName): Promise<void>;
-declare function setColorMode(colorMode: ColorMode): void;
+declare function setColorMode(colorMode: ColorMode, updateClass?: boolean): void;
 declare function toggleDarkMode(): void;
 export declare function useTheme(): {
     presetName: import('vue').ComputedRef<string | undefined>;
@@ -13,6 +13,7 @@ export declare function useTheme(): {
     toggleDarkMode: typeof toggleDarkMode;
     mode: import('vue').ComputedRef<ThemeMode>;
     darkModeStrategy: import('vue').ComputedRef<DarkModeStrategy>;
+    currentPreset: import('vue').ComputedRef<ThemePreset | undefined>;
 };
 export {};
 //# sourceMappingURL=useTheme.d.ts.map

package/dist/types/composables/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAaD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBA8BtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,QAgBzC;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;EAsEvB"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAcD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBA8BtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,UAAO,QAkB7D;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;;EA4EvB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/themes",
   "type": "module",
-  "version": "4.1.3",
+  "version": "4.1.5",
   "description": "Theme system for Maz-UI with TypeScript support and CSS variables",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -102,5 +102,5 @@
   "lint-staged": {
     "*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "09f62e1bb3a3faaaa1dc48ea6434f8da80a23d76"
+  "gitHead": "37294d421e5683b80ddc8f8fd062ecafe240d9ed"
 }