@inzombieland/nuxt-common 1.16.27 → 1.16.29

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@inzombieland/nuxt-common",
-  "version": "1.16.27",
+  "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.27";
+const version = "1.16.29";
 
 const module = defineNuxtModule({
   meta: {
@@ -54,7 +54,7 @@ const module = defineNuxtModule({
     addPlugin(resolve(runtimeDir, "plugins/sanitize-url"));
     addComponent({
       name: "NuxtAppProvider",
-      filePath: resolve(runtimeDir, "AppProvider.vue")
+      filePath: resolve(runtimeDir, "packages/api/AppProvider.vue")
     });
     addComponent({
       name: "NuxtLayerManager",

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", JSON.stringify({ value: "" }));
-    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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
+import bus from "./bus"
+import { useThemeMode, useUser } from "./index"
+import type { ConfigProviderTheme } from "vant"
+import "@vant/touch-emulator"
+
+const theme = useThemeMode()
+const user = useUser()
+const appLoading = ref(Boolean(user.value))
+
+onMounted(() => {
+	appLoading.value = false
+})
+
+if (typeof window !== "undefined") {
+	bus.publish("app:beforeMount", true)
+}
+</script>
+
+<template>
+	<div
+		class="h-full"
+		:class="{ app: appLoading }"
+	>
+		<slot />
+		<van-config-provider
+			v-if="theme?.value"
+			:theme="theme?.value as ConfigProviderTheme"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.app{height:0;width:0}.app:after{background:#5a5a5a url(/images/loading.gif) no-repeat 50%;content:"";height:100%;left:0;position:absolute;top:0;transition:.5s;width:100%;z-index:10000}
+</style>

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

@@ -1,9 +1,11 @@
 import { type Ref } from "vue";
 import type { ActiveSession, Fetch, FetchConfig, User } from "./types";
 export type { ActiveSession, Fetch, FetchConfig, User };
+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

@@ -9,9 +9,11 @@ import { createApiGetVisitorIdentifier } from "./get-visitor.mjs";
 import { createInitApplication } from "./init-application.mjs";
 import { createApiRefreshToken } from "./refresh-token.mjs";
 import { createApiUserActions } from "./user-actions.mjs";
+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,31 +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", JSON.stringify({ value: "" }));
+  const theme = useThemeMode();
   const locale = useLocalStorage("app-preferences-locale", JSON.stringify({ value: "en" }));
   const i18n = useI18n();
-  watch(
-    user,
-    (user2) => {
-      try {
-        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.27",
+  "version": "1.16.29",
   "type": "module",
   "license": "ISC",
   "main": "./index.mjs",

package/dist/runtime/plugin.mjs

@@ -1,7 +1,9 @@
 import { addRouteMiddleware, defineNuxtPlugin } from "#app";
-import { useRequestHeaders, useRuntimeConfig, useState } from "#imports";
+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);
@@ -9,6 +11,8 @@ const useAuth = () => {
 export default defineNuxtPlugin(async (nuxtApp) => {
   const auth = useAuth();
   const runtimeConfig = useRuntimeConfig();
+  const { $mobileApp } = useNuxtApp();
+  const theme = useThemeMode();
   if (runtimeConfig.public.ssr && import.meta.server || !runtimeConfig.public.ssr) {
     flush();
     if (import.meta.server) {
@@ -26,6 +30,15 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   }
   nuxtApp.hook("app:beforeMount", () => {
     auth.value = null;
+    watch(
+      theme,
+      (theme2) => {
+        if ($mobileApp && "changeTheme" in $mobileApp && typeof $mobileApp.changeTheme === "function") {
+          $mobileApp.changeTheme({ theme: theme2?.value });
+        }
+      },
+      { immediate: true }
+    );
   });
   addRouteMiddleware("auth", authMiddleware, { global: false });
   addRouteMiddleware("guest", guestMiddleware, { global: false });

package/dist/runtime/plugins/device.mjs

@@ -9,7 +9,7 @@ export default defineNuxtPlugin(() => {
         ...device,
         getInfo: async () => {
           const { $mobileApp } = useNuxtApp();
-          if (device.isMobileApp && $mobileApp && typeof $mobileApp.getInfo === "function") {
+          if (device.isMobileApp && $mobileApp && "getInfo" in $mobileApp && typeof $mobileApp.getInfo === "function") {
             const device2 = await $mobileApp.getInfo();
             return device2.name;
           }

package/package.json

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

package/dist/runtime/AppProvider.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { StyleProvider, Themes } from "@varlet/ui"
-import { useLocalStorage } from "@vueuse/core"
-import { useNuxtApp } from "#imports"
-import { onMounted, ref, watch } from "vue"
-import { useUser } from "./packages/api"
-import bus from "./packages/api/bus"
-import type { ConfigProviderTheme } from "vant"
-import "@vant/touch-emulator"
-
-const theme = ref("")
-const appPreferencesTheme = useLocalStorage("app-preferences-theme", JSON.stringify({ value: "" }))
-const user = useUser()
-const appLoading = ref(Boolean(user.value))
-const { $mobileApp } = useNuxtApp()
-
-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)
-			}
-
-			if ($mobileApp?.changeTheme && typeof $mobileApp.changeTheme === "function") {
-				$mobileApp.changeTheme({ theme: theme.value })
-			}
-		},
-		{ immediate: true }
-	)
-
-	appLoading.value = false
-})
-
-if (typeof window !== "undefined") {
-	bus.publish("app:beforeMount", true)
-}
-</script>
-
-<template>
-	<div
-		class="h-full"
-		:class="{ app: appLoading }"
-	>
-		<slot />
-		<van-config-provider
-			v-if="theme"
-			:theme="theme as ConfigProviderTheme"
-		/>
-	</div>
-</template>
-
-<style scoped>
-.app{height:0;width:0}.app:after{background:#5a5a5a url(/images/loading.gif) no-repeat 50%;content:"";height:100%;left:0;position:absolute;top:0;transition:.5s;width:100%;z-index:10000}
-</style>