zova-module-a-style 5.0.16 → 5.0.17

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "zova-module-a-style",
-  "version": "5.0.16",
+  "version": "5.0.17",
   "title": "a-style",
   "zovaModule": {
     "capabilities": {
       "monkey": true
+    },
+    "dependencies": {
+      "a-model": "5.0.0"
     }
   },
   "type": "module",
@@ -34,5 +37,5 @@
     "tsc:publish": "npm run clean && tsc -b",
     "prepublishOnly": "npm run tsc:publish"
   },
-  "gitHead": "e59fa627f7bdd1f308c4bd5ae36c45ec4a2648b2"
+  "gitHead": "6b24f8fbc3857e405882791f096d19d146675077"
 }

package/src/bean/bean.theme.ts

@@ -1,16 +1,17 @@
-import { Bean, BeanBase, Cast, IBeanRecord } from 'zova';
+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';
 
 export type ThemeDarkMode = 'auto' | boolean;
 
 @Bean({ containerScope: 'app' })
-export class BeanTheme extends BeanBase<ScopeModule> {
-  private _name: string;
-  public get name(): string {
+export class BeanTheme extends BeanModelBase<ScopeModule> {
+  private _name: keyof IBeanRecord;
+  public get name(): keyof IBeanRecord {
     return this._name;
   }
-  public set name(value: string) {
+  public set name(value: keyof IBeanRecord) {
     this.setTheme(value as any);
   }
   private _dark: boolean;
@@ -29,8 +30,25 @@ export class BeanTheme extends BeanBase<ScopeModule> {
   private _onMediaDarkChange?;
 
   protected async __init__() {
-    await this._setDark('auto');
-    await this._setTheme();
+    this._name = this.$useQueryCookie({
+      queryKey: ['themename'],
+    });
+    this._dark = this.$useQueryCookie({
+      queryKey: ['themedark'],
+    });
+    this._darkMode = this.$useQueryCookie({
+      queryKey: ['themedarkmode'],
+      meta: {
+        persister: {
+          deserialize: value => {
+            value = value === 'true' ? true : value === 'false' ? false : !value ? undefined : value;
+            return this.$deserializeCookie(value);
+          },
+        },
+      },
+    });
+    await this._setDark(this._darkMode);
+    await this._setTheme(this._name);
     await this.applyTheme();
   }
 
@@ -63,7 +81,8 @@ export class BeanTheme extends BeanBase<ScopeModule> {
     await this.applyTheme();
   }
 
-  async _setDark(mode: ThemeDarkMode) {
+  async _setDark(mode?: ThemeDarkMode) {
+    if (mode === undefined) mode = 'auto';
     this._darkMode = mode;
     if (mode === 'auto') {
       this._listenMediaDarkChange(true);