@inzombieland/nuxt-common 1.16.28 → 1.16.29

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@inzombieland/nuxt-common",
-  "version": "1.16.28",
+  "version": "1.16.29",
   "configKey": "nuxt-common",
   "builder": {
     "@nuxt/module-builder": "0.6.0",

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { fileURLToPath } from 'node:url';
 import { defineNuxtModule, createResolver, addServerHandler, addImportsDir, addPlugin, addComponent } from '@nuxt/kit';
 
 const name = "@inzombieland/nuxt-common";
-const version = "1.16.28";
+const version = "1.16.29";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/api/user-actions.mjs

@@ -1,5 +1,6 @@
 import { useLocalStorage } from "@vueuse/core";
 import { useCookie, useRequestHeaders } from "#imports";
+import { useThemeMode } from "../packages/api/index.mjs";
 import { flush, setToken, updateUser } from "../packages/api/api-client.mjs";
 import { fetch, getUser, userActions, useUser } from "./index.mjs";
 export const signIn = userActions.signIn;
@@ -121,8 +122,8 @@ export const changeTheme = async (body) => {
     updateUser(body);
   }
   if (typeof window !== "undefined") {
-    const theme = useLocalStorage("app-preferences-theme", "");
-    theme.value = JSON.stringify({ value: body.theme });
+    const theme = useThemeMode();
+    theme.value = { value: body.theme };
   }
 };
 export const changeLocale = async (body) => {

package/dist/runtime/composables/use-theme-mode.d.ts

@@ -0,0 +1,3 @@
+import { useThemeMode } from "../packages/api";
+export { useThemeMode };
+export default useThemeMode;

package/dist/runtime/composables/use-theme-mode.mjs

@@ -0,0 +1,3 @@
+import { useThemeMode } from "../packages/api/index.mjs";
+export { useThemeMode };
+export default useThemeMode;

package/dist/runtime/packages/api/AppProvider.vue

@@ -1,48 +1,15 @@
 <script setup lang="ts">
-import { StyleProvider, Themes } from "@varlet/ui"
-import { useLocalStorage } from "@vueuse/core"
-import { onMounted, ref, watch } from "vue"
+import { onMounted, ref } from "vue"
 import bus from "./bus"
-import { useUser } from "./index"
+import { useThemeMode, useUser } from "./index"
 import type { ConfigProviderTheme } from "vant"
 import "@vant/touch-emulator"
 
-const theme = ref("")
-const appPreferencesTheme = useLocalStorage("app-preferences-theme", "")
+const theme = useThemeMode()
 const user = useUser()
 const appLoading = ref(Boolean(user.value))
 
 onMounted(() => {
-	watch(
-		appPreferencesTheme,
-		newThemeValue => {
-			try {
-				if (newThemeValue) {
-					const { value } = JSON.parse(newThemeValue)
-					theme.value = value
-				}
-			} catch (error) {
-				console.error(`Error parsing app preferences theme:`, error)
-			}
-
-			if (!theme.value) {
-				theme.value = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-				appPreferencesTheme.value = JSON.stringify({ value: theme.value })
-			}
-
-			if (theme.value === "dark") {
-				document.documentElement.classList.remove("light", "van-theme-light")
-				document.documentElement.classList.add("dark", "van-theme-dark")
-				StyleProvider(Themes.dark)
-			} else {
-				document.documentElement.classList.remove("dark", "van-theme-dark")
-				document.documentElement.classList.add("light", "van-theme-light")
-				StyleProvider(null)
-			}
-		},
-		{ immediate: true }
-	)
-
 	appLoading.value = false
 })
 
@@ -58,8 +25,8 @@ if (typeof window !== "undefined") {
 	>
 		<slot />
 		<van-config-provider
-			v-if="theme"
-			:theme="theme as ConfigProviderTheme"
+			v-if="theme?.value"
+			:theme="theme?.value as ConfigProviderTheme"
 		/>
 	</div>
 </template>

package/dist/runtime/packages/api/composables/use-theme-mode.d.ts

@@ -0,0 +1 @@
+export declare const useThemeMode: () => import("@vueuse/shared").RemovableRef<any>;

package/dist/runtime/packages/api/composables/use-theme-mode.mjs

@@ -0,0 +1,14 @@
+import { useLocalStorage, usePreferredDark } from "@vueuse/core";
+export const useThemeMode = () => {
+  const isDark = usePreferredDark();
+  return useLocalStorage(
+    "app-preferences-theme",
+    { value: isDark.value ? "dark" : "light" },
+    {
+      serializer: {
+        read: (v) => v ? JSON.parse(v) : null,
+        write: (v) => JSON.stringify(v)
+      }
+    }
+  );
+};

package/dist/runtime/packages/api/index.d.ts

@@ -5,6 +5,7 @@ export { default as AppProvider } from "./AppProvider.vue";
 export { useUser } from "./composables/use-user";
 export { useSubscribe } from "./composables/use-subscribe";
 export { useActiveSessions } from "./composables/use-active-sessions";
+export { useThemeMode } from "./composables/use-theme-mode";
 export { getVisitor, getVisitorId, type Visitor } from "./get-visitor";
 export declare function initApiFetch($fetch: Fetch, config: FetchConfig): {
     fetch: Fetch;

package/dist/runtime/packages/api/index.mjs

@@ -13,6 +13,7 @@ export { default as AppProvider } from "./AppProvider.vue";
 export { useUser } from "./composables/use-user.mjs";
 export { useSubscribe } from "./composables/use-subscribe.mjs";
 export { useActiveSessions } from "./composables/use-active-sessions.mjs";
+export { useThemeMode } from "./composables/use-theme-mode.mjs";
 export { getVisitor, getVisitorId } from "./get-visitor.mjs";
 const apiActions = useApiActions();
 let userActions;

package/dist/runtime/packages/api/init-application.mjs

@@ -1,4 +1,4 @@
-import { Locale as VarletLocale } from "@varlet/ui";
+import { StyleProvider, Themes, Locale as VarletLocale } from "@varlet/ui";
 import { useLocalStorage } from "@vueuse/core";
 import { setNotifyDefaultOptions, Locale as VantLocale } from "vant";
 import enUS from "vant/es/locale/lang/en-US";
@@ -10,33 +10,37 @@ import { useActiveSessions } from "./composables/use-active-sessions.mjs";
 import { useSubscribe } from "./composables/use-subscribe.mjs";
 import { useUser } from "./composables/use-user.mjs";
 import { once } from "./helpers/index.mjs";
-import { getVisitorId, useUserActions } from "./index.mjs";
+import { getVisitorId, useThemeMode, useUserActions } from "./index.mjs";
 function initApplication() {
   const router = useRouter();
   const user = useUser();
-  const theme = useLocalStorage("app-preferences-theme", "");
+  const theme = useThemeMode();
   const locale = useLocalStorage("app-preferences-locale", JSON.stringify({ value: "en" }));
   const i18n = useI18n();
-  watch(
-    user,
-    (user2) => {
-      try {
-        if (theme.value) {
-          const { value } = JSON.parse(theme.value);
-          if (user2 && user2.theme !== value) {
-            theme.value = JSON.stringify({ value: user2.theme });
-          }
-        }
-      } catch (error) {
-        console.error(`Error parsing app preferences theme:`, error);
+  watch(user, (user2) => {
+    if (user2 && user2.theme !== theme.value?.value) {
+      theme.value = { value: user2.theme };
+    }
+    try {
+      const { value } = JSON.parse(locale.value);
+      if (user2 && user2.locale !== value) {
+        locale.value = JSON.stringify({ value: user2.locale });
       }
-      try {
-        const { value } = JSON.parse(locale.value);
-        if (user2 && user2.locale !== value) {
-          locale.value = JSON.stringify({ value: user2.locale });
-        }
-      } catch (error) {
-        console.error(`Error parsing app preferences locale:`, error);
+    } catch (error) {
+      console.error(`Error parsing app preferences locale:`, error);
+    }
+  });
+  watch(
+    theme,
+    (theme2) => {
+      if (theme2?.value === "dark") {
+        document.documentElement.classList.remove("light", "van-theme-light");
+        document.documentElement.classList.add("dark", "van-theme-dark");
+        StyleProvider(Themes.dark);
+      } else {
+        document.documentElement.classList.remove("dark", "van-theme-dark");
+        document.documentElement.classList.add("light", "van-theme-light");
+        StyleProvider(null);
       }
     },
     { immediate: true }

package/dist/runtime/packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inzombieland/api",
-  "version": "1.16.28",
+  "version": "1.16.29",
   "type": "module",
   "license": "ISC",
   "main": "./index.mjs",

package/dist/runtime/plugin.mjs

@@ -1,9 +1,9 @@
-import { useLocalStorage } from "@vueuse/core";
 import { addRouteMiddleware, defineNuxtPlugin } from "#app";
 import { useNuxtApp, useRequestHeaders, useRuntimeConfig, useState } from "#imports";
 import { watch } from "vue";
 import { fetch, getUser } from "./api/index.mjs";
 import { authMiddleware, guestMiddleware, localeMiddleware } from "./middleware/index.mjs";
+import { useThemeMode } from "./packages/api/index.mjs";
 import { flush, setToken, setUser } from "./packages/api/api-client.mjs";
 const useAuth = () => {
   return useState("auth", () => null);
@@ -12,7 +12,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const auth = useAuth();
   const runtimeConfig = useRuntimeConfig();
   const { $mobileApp } = useNuxtApp();
-  const theme = useLocalStorage("app-preferences-theme", "");
+  const theme = useThemeMode();
   if (runtimeConfig.public.ssr && import.meta.server || !runtimeConfig.public.ssr) {
     flush();
     if (import.meta.server) {
@@ -33,15 +33,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     watch(
       theme,
       (theme2) => {
-        try {
-          if (theme2) {
-            const { value } = JSON.parse(theme2);
-            if ($mobileApp && "changeTheme" in $mobileApp && typeof $mobileApp.changeTheme === "function") {
-              $mobileApp.changeTheme({ theme: value });
-            }
-          }
-        } catch (error) {
-          console.error(`Error parsing app preferences theme:`, error);
+        if ($mobileApp && "changeTheme" in $mobileApp && typeof $mobileApp.changeTheme === "function") {
+          $mobileApp.changeTheme({ theme: theme2?.value });
         }
       },
       { immediate: true }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inzombieland/nuxt-common",
-  "version": "1.16.28",
+  "version": "1.16.29",
   "license": "ISC",
   "type": "module",
   "exports": {