zova-module-a-style 5.0.5 → 5.0.7

package/package.json

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

package/src/bean/store.theme.ts

@@ -0,0 +1,85 @@
+import { BeanBase, Cast, IBeanRecord, Store } from 'zova';
+import { ScopeModule } from '../resource/this.js';
+import { ThemeBase } from '../types.js';
+
+export type ThemeDarkMode = 'auto' | boolean;
+
+@Store()
+export class StoreTheme extends BeanBase<ScopeModule> {
+  private _name: string;
+  public get name(): string {
+    return this._name;
+  }
+  public set name(value: string) {
+    this._name = value;
+    this.applyTheme();
+  }
+  dark: boolean;
+  darkMode: ThemeDarkMode; // auto/true/false
+  token: unknown;
+  private _mediaDark?: MediaQueryList;
+  private _onMediaDarkChange?;
+
+  protected async __init__() {
+    await this._setDark('auto');
+    await this._setTheme();
+    await this.applyTheme();
+  }
+
+  protected __dispose__() {
+    this._listenMediaDarkChange(false);
+  }
+
+  async applyTheme() {
+    const theme = (await this.bean._getBean(this.name, true)) as ThemeBase;
+    const res = await theme.apply({ name: this.name, dark: this.dark });
+    this.token = Cast(res).token;
+  }
+
+  async setTheme(name?: keyof IBeanRecord) {
+    await this._setTheme(name);
+    await this.applyTheme();
+  }
+
+  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) {
+    this.darkMode = mode;
+    if (mode === 'auto') {
+      this._listenMediaDarkChange(true);
+      this.dark = !!this._mediaDark?.matches;
+    } else {
+      this._listenMediaDarkChange(false);
+      this.dark = 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._mediaDark.addEventListener('change', this._onMediaDarkChange);
+      }
+    } else {
+      if (this._mediaDark) {
+        this._mediaDark.removeEventListener('change', this._onMediaDarkChange);
+        this._onMediaDarkChange = undefined;
+        this._mediaDark = undefined;
+      }
+    }
+  }
+}

package/src/config/config.ts

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

package/src/monkey.ts

@@ -1,13 +1,18 @@
 import { style } from 'typestyle';
-import { BeanBase, BeanContainerLike, BeanSimple, IMonkeySystem, SymbolModuleName } from 'zova';
+import { BeanBase, BeanContainerLike, BeanSimple, IMonkeySystem, SymbolModuleName, useComputed } from 'zova';
 import { ScopeModule, __ThisModule__ } from './resource/this.js';
+import { StoreTheme } from './bean/store.theme.js';
 
 export class Monkey extends BeanSimple implements IMonkeySystem {
+  private _storeTheme: StoreTheme;
   private _storeStyleDefault: any;
 
   async appInitialize() {
+    // theme
+    this._storeTheme = await this.bean._getBean(StoreTheme, true);
+    // style default
     const scope: ScopeModule = await this.bean.getScope(__ThisModule__);
-    this._storeStyleDefault = await this.bean._newBean(scope.config.defaultStyle, true);
+    this._storeStyleDefault = await this.bean._getBean(scope.config.defaultStyle, true);
   }
   async appInitialized() {}
   async beanInit(bean: BeanContainerLike, beanInstance: BeanBase) {
@@ -28,6 +33,20 @@ export class Monkey extends BeanSimple implements IMonkeySystem {
         return self._storeStyleDefault;
       },
     });
+    bean.defineProperty(beanInstance, '$theme', {
+      enumerable: false,
+      configurable: true,
+      get() {
+        return self._storeTheme;
+      },
+    });
+    bean.defineProperty(beanInstance, '$token', {
+      enumerable: false,
+      configurable: true,
+      get() {
+        return useComputed(() => self._storeTheme.token);
+      },
+    });
   }
   async beanInited(_bean: BeanContainerLike, _beanInstance: BeanBase) {}
   beanDispose(_bean: BeanContainerLike, _beanInstance: BeanBase) {}
@@ -35,7 +54,7 @@ export class Monkey extends BeanSimple implements IMonkeySystem {
 
   _patchStyle(beanInstance: BeanBase, props, ...args) {
     if (props && typeof props === 'object') {
-      props.$debugName = beanInstance[SymbolModuleName];
+      props = Object.assign({ $debugName: beanInstance[SymbolModuleName] }, props);
     }
     return style(props, ...args);
   }

package/src/resource/beans.ts

@@ -1,4 +1,8 @@
+export * from '../bean/store.theme.js';
+import { StoreTheme } from '../bean/store.theme.js';
 import 'zova';
 declare module 'zova' {
-  export interface IBeanRecord {}
+  export interface IBeanRecord {
+    'a-style.store.theme': StoreTheme;
+  }
 }

package/src/types.ts

@@ -1,7 +1,20 @@
 import { style } from 'typestyle';
 import 'zova';
+import { StoreTheme } from './bean/store.theme.js';
 declare module 'zova' {
   export interface BeanBase {
     $style: typeof style;
+    $theme: StoreTheme;
   }
 }
+
+export interface ThemeApplyParams {
+  name: string;
+  dark: boolean;
+}
+
+export interface ThemeApplyResult {}
+
+export interface ThemeBase {
+  apply({ name, dark }: ThemeApplyParams): Promise<ThemeApplyResult>;
+}