@saasicat/ui-vue 0.22.2 → 0.23.0

package/README.md

@@ -98,7 +98,7 @@ own call: `i18n.locales` narrows the set, `i18n.additionalLocales` adds
 languages the platform does not ship, `i18n.overrides` replaces individual
 strings, and `i18n.switcher: false` drops the control entirely. Components read
 the catalog via `useSaMessages('<namespace>')` / `useSuperAdminI18n()`.
-See [handbook §8.6](https://github.com/uelker70/saasicat/blob/main/docs/handbook.md#86-ui-language-i18n).
+See [handbook §8.7](https://github.com/uelker70/saasicat/blob/main/docs/handbook.md#87-ui-language-i18n).
 
 ## Build
 

package/dist/{chunk-LY52T4N4.js → chunk-TQQMKWN6.js}

@@ -125,6 +125,60 @@ function useSaMessages(namespace) {
   return computed(() => messages.value[namespace]);
 }
 
+// src/vue/use-sa-theme.ts
+import {
+  computed as computed2,
+  inject as inject2,
+  isRef as isRef2,
+  ref as ref2,
+  watch as watch2
+} from "vue";
+var SCHEMES = ["light", "dark", "system"];
+var STORAGE_KEY = "saasicat.theme.scheme";
+function isScheme(value) {
+  return typeof value === "string" && SCHEMES.includes(value);
+}
+function systemScheme() {
+  const value = ref2("light");
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return { value, unsubscribe: () => {
+    } };
+  }
+  const query = window.matchMedia("(prefers-color-scheme: dark)");
+  value.value = query.matches ? "dark" : "light";
+  const onChange = (event) => {
+    value.value = event.matches ? "dark" : "light";
+  };
+  query.addEventListener("change", onChange);
+  return { value, unsubscribe: () => query.removeEventListener("change", onChange) };
+}
+function createSaTheme(options = {}) {
+  const storage = options.storage ?? defaultKvStore();
+  const persist = options.persist !== false;
+  const provided = options.scheme;
+  const appOwnsIt = isRef2(provided);
+  const stored = persist && !appOwnsIt ? storage.get(STORAGE_KEY) : null;
+  const scheme = isRef2(provided) ? provided : ref2(isScheme(stored) ? stored : provided ?? "system");
+  const { value: system, unsubscribe } = systemScheme();
+  const stopPersisting = persist && !appOwnsIt ? watch2(scheme, (next) => storage.set(STORAGE_KEY, next)) : null;
+  return {
+    scheme,
+    resolved: computed2(() => scheme.value === "system" ? system.value : scheme.value),
+    dispose: () => {
+      unsubscribe();
+      stopPersisting?.();
+    }
+  };
+}
+var SA_THEME_KEY = /* @__PURE__ */ Symbol.for("@saasicat/ui-vue/SA_THEME");
+var fallbackTheme = null;
+function useSaTheme() {
+  const injected = inject2(SA_THEME_KEY, null);
+  if (injected) return injected;
+  fallbackTheme ??= createSaTheme({ persist: false });
+  return fallbackTheme;
+}
+
 export {
   SUPER_ADMIN_BRAND_KEY,
   SUPER_ADMIN_ENDPOINTS_KEY,
@@ -140,5 +194,8 @@ export {
   SUPER_ADMIN_I18N_KEY,
   createSuperAdminI18n,
   useSuperAdminI18n,
-  useSaMessages
+  useSaMessages,
+  createSaTheme,
+  SA_THEME_KEY,
+  useSaTheme
 };