zova-module-a-style 5.0.15 → 5.0.17

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "zova-module-a-style",
-  "version": "5.0.15",
+  "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": "4694913185e21d7ff9f241cb7fc949dde41cf6fd"
+  "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();
   }
 
@@ -42,8 +60,9 @@ export class BeanTheme extends BeanBase<ScopeModule> {
     const theme = (await this.bean._getBean(this.name as any, true)) as ThemeBase;
     const res = await theme.apply({ name: this.name, dark: this.dark });
     this.token = Cast(res).token;
-    if (res.handler) {
-      const themeHandler = (await this.bean._getBean(res.handler, true)) as unknown as ThemeHandler;
+    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);
     }
   }
@@ -62,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);

package/src/config/config.ts

@@ -4,5 +4,6 @@ export const config = (_app: ZovaApplication) => {
   return {
     defaultStyle: 'home-style.style.default' as keyof IBeanRecord,
     defaultTheme: 'home-theme.theme.default' as keyof IBeanRecord,
+    defaultThemeHandler: '' as keyof IBeanRecord,
   };
 };

package/src/monkey.ts

@@ -7,14 +7,14 @@ export class Monkey extends BeanSimple implements IMonkeySystem {
   private _beanTheme: BeanTheme;
   private _beanStyleDefault: any;
 
-  async appInitialize(bean: BeanContainer) {
+  async appInitialize(_bean: BeanContainer) {}
+  async appInitialized(bean: BeanContainer) {
     // theme
     this._beanTheme = await bean._getBean(BeanTheme, true);
     // style default
     const scope: ScopeModule = await bean.getScope(__ThisModule__);
     this._beanStyleDefault = await bean._getBean(scope.config.defaultStyle, true);
   }
-  async appInitialized(_bean: BeanContainer) {}
   async beanInit(bean: BeanContainer, beanInstance: BeanBase) {
     const self = this;
     bean.defineProperty(beanInstance, '$style', {