zova-module-a-style 5.0.7 → 5.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-style",
-  "version": "5.0.7",
+  "version": "5.0.9",
   "title": "a-style",
   "zovaModule": {
     "capabilities": {
@@ -34,5 +34,5 @@
     "tsc:publish": "npm run clean && tsc -b",
     "prepublishOnly": "npm run tsc:publish"
   },
-  "gitHead": "f72c4e9f7fbc562a409406abbc57808610fa0b25"
+  "gitHead": "1c586ea11b3ca5eba665522e25adcb26b4eecd12"
 }

package/src/bean/store.theme.ts

@@ -1,6 +1,6 @@
 import { BeanBase, Cast, IBeanRecord, Store } from 'zova';
 import { ScopeModule } from '../resource/this.js';
-import { ThemeBase } from '../types.js';
+import { ThemeBase, ThemeHandler } from '../types.js';
 
 export type ThemeDarkMode = 'auto' | boolean;
 
@@ -11,11 +11,19 @@ export class StoreTheme extends BeanBase<ScopeModule> {
     return this._name;
   }
   public set name(value: string) {
-    this._name = value;
-    this.applyTheme();
+    this.setTheme(value as any);
+  }
+  private _dark: boolean;
+  public get dark(): boolean {
+    return this._dark;
+  }
+  private _darkMode: ThemeDarkMode; // auto/true/false
+  public get darkMode(): ThemeDarkMode {
+    return this._darkMode;
+  }
+  public set darkMode(value: ThemeDarkMode) {
+    this.setDark(value);
   }
-  dark: boolean;
-  darkMode: ThemeDarkMode; // auto/true/false
   token: unknown;
   private _mediaDark?: MediaQueryList;
   private _onMediaDarkChange?;
@@ -31,9 +39,13 @@ export class StoreTheme extends BeanBase<ScopeModule> {
   }
 
   async applyTheme() {
-    const theme = (await this.bean._getBean(this.name, true)) as ThemeBase;
+    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;
+      await themeHandler.apply(res);
+    }
   }
 
   async setTheme(name?: keyof IBeanRecord) {
@@ -42,7 +54,7 @@ export class StoreTheme extends BeanBase<ScopeModule> {
   }
 
   async _setTheme(name?: keyof IBeanRecord) {
-    this.name = name || this.scope.config.defaultTheme;
+    this._name = name || this.scope.config.defaultTheme;
   }
 
   async setDark(mode: ThemeDarkMode) {
@@ -51,13 +63,13 @@ export class StoreTheme extends BeanBase<ScopeModule> {
   }
 
   async _setDark(mode: ThemeDarkMode) {
-    this.darkMode = mode;
+    this._darkMode = mode;
     if (mode === 'auto') {
       this._listenMediaDarkChange(true);
-      this.dark = !!this._mediaDark?.matches;
+      this._dark = !!this._mediaDark?.matches;
     } else {
       this._listenMediaDarkChange(false);
-      this.dark = mode;
+      this._dark = mode;
     }
   }
 

package/src/types.ts

@@ -1,6 +1,7 @@
 import { style } from 'typestyle';
 import 'zova';
 import { StoreTheme } from './bean/store.theme.js';
+import { IBeanRecord } from 'zova';
 declare module 'zova' {
   export interface BeanBase {
     $style: typeof style;
@@ -13,8 +14,14 @@ export interface ThemeApplyParams {
   dark: boolean;
 }
 
-export interface ThemeApplyResult {}
+export interface ThemeApplyResult {
+  handler?: keyof IBeanRecord;
+}
 
 export interface ThemeBase {
   apply({ name, dark }: ThemeApplyParams): Promise<ThemeApplyResult>;
 }
+
+export interface ThemeHandler {
+  apply(result: ThemeApplyResult): Promise<void>;
+}