zova-module-a-style 5.0.18 → 5.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-style",
-  "version": "5.0.18",
+  "version": "5.0.20",
   "title": "a-style",
   "zovaModule": {
     "capabilities": {
@@ -37,5 +37,5 @@
     "tsc:publish": "npm run clean && tsc -b",
     "prepublishOnly": "npm run tsc:publish"
   },
-  "gitHead": "99ce5c5f49c91443406af02c63b555063d5eb3f6"
+  "gitHead": "d7ecefeb8b5f566e4b4831d7b3a02e9e7a765c15"
 }

package/src/bean/bean.theme.ts

@@ -2,35 +2,32 @@ import { Bean, Cast, IBeanRecord } from 'zova';
 import { ScopeModule } from '../resource/this.js';
 import { ThemeBase, ThemeHandler } from '../types.js';
 import { BeanModelBase } from 'zova-module-a-model';
+import { watch } from 'vue';
 
 export type ThemeDarkMode = 'auto' | boolean;
 
 @Bean({ containerScope: 'app' })
 export class BeanTheme extends BeanModelBase<ScopeModule> {
-  private _name: keyof IBeanRecord;
-  public get name(): keyof IBeanRecord {
-    return this._name;
-  }
+  name: keyof IBeanRecord;
+  darkMode: ThemeDarkMode; // auto/true/false
+
   private _dark: boolean;
-  public get dark(): boolean {
+  get dark() {
     return this._dark;
   }
-  private _darkMode: ThemeDarkMode; // auto/true/false
-  public get darkMode(): ThemeDarkMode {
-    return this._darkMode;
-  }
+
   token: unknown;
   private _mediaDark?: MediaQueryList;
   private _onMediaDarkChange?;
 
   protected async __init__() {
-    this._name = this.$useQueryCookie({
+    this.name = this.$useQueryCookie({
       queryKey: ['themename'],
+      meta: {
+        defaultData: this.scope.config.defaultTheme,
+      },
     });
-    this._dark = this.$useQueryCookie({
-      queryKey: ['themedark'],
-    });
-    this._darkMode = this.$useQueryCookie({
+    this.darkMode = this.$useQueryCookie({
       queryKey: ['themedarkmode'],
       meta: {
         persister: {
@@ -39,64 +36,69 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
             return this.$deserializeCookie(value);
           },
         },
+        defaultData: 'auto',
       },
     });
-    await this._setDark(this._darkMode);
-    await this._setTheme(this._name);
-    await this.applyTheme();
+    this._dark = this.$useQueryCookie({
+      queryKey: ['themedark'],
+      meta: {
+        defaultData: () => {
+          return this._getDarkFromDarkMode(this.darkMode);
+        },
+      },
+    });
+
+    watch(
+      () => this.darkMode,
+      () => {
+        this._dark = this._getDarkFromDarkMode(this.darkMode);
+      },
+    );
+
+    watch([() => this.name, () => this._dark], () => {
+      this._applyTheme();
+    });
+    await this._applyTheme();
   }
 
   protected __dispose__() {
     this._listenMediaDarkChange(false);
   }
 
-  async applyTheme() {
-    const theme = (await this.bean._getBean(this.name as any, true)) as ThemeBase;
-    const res = await theme.apply({ name: this.name, dark: this.dark });
+  async _applyTheme() {
+    const name = this.name;
+    const dark = this._dark;
+    const theme = (await this.bean._getBean(name as any, true)) as ThemeBase;
+    const res = await theme.apply({ name, dark });
     this.token = Cast(res).token;
     const handler = res.handler ?? this.scope.config.defaultThemeHandler;
     if (handler) {
       const themeHandler = (await this.bean._getBean(handler, true)) as unknown as ThemeHandler;
-      await themeHandler.apply({ name: this.name, dark: this.dark, token: this.token } as any);
+      await themeHandler.apply({ name, dark, token: this.token } as any);
     }
   }
 
-  async setTheme(name?: keyof IBeanRecord) {
-    await this._setTheme(name);
-    await this.applyTheme();
+  toggleDark() {
+    this.darkMode = !this._dark;
   }
 
-  async _setTheme(name?: keyof IBeanRecord) {
-    this._name = name || this.scope.config.defaultTheme;
-  }
-
-  async setDark(mode: ThemeDarkMode) {
-    await this._setDark(mode);
-    await this.applyTheme();
-  }
-
-  async _setDark(mode?: ThemeDarkMode) {
+  _getDarkFromDarkMode(mode?: ThemeDarkMode) {
     if (mode === undefined) mode = 'auto';
-    this._darkMode = mode;
     if (mode === 'auto') {
       this._listenMediaDarkChange(true);
-      this._dark = !!this._mediaDark?.matches;
+      return !!this._mediaDark?.matches;
     } else {
       this._listenMediaDarkChange(false);
-      this._dark = mode;
+      return mode;
     }
   }
 
-  async toggleDark() {
-    await this.setDark(!this.dark);
-  }
-
   _listenMediaDarkChange(listen: boolean) {
     if (listen) {
       if (!this._mediaDark) {
         this._mediaDark = window.matchMedia('(prefers-color-scheme: dark)');
         this._onMediaDarkChange = async () => {
-          await this.setDark('auto');
+          this._applyTheme();
         };
         this._mediaDark.addEventListener('change', this._onMediaDarkChange);
       }