@netless/telebox-insider 1.0.0-alpha.34 → 1.0.0-alpha.35

package/dist/TeleBoxManager/index.d.ts

@@ -29,6 +29,7 @@ declare type ValConfig = {
     stageStyle: Val<string>;
     defaultBoxBodyStyle: Val<string | null>;
     defaultBoxStageStyle: Val<string | null>;
+    theme: Val<TeleBoxManagerThemeConfig | null>;
 };
 declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
 export interface TeleBoxManager extends CombinedValEnhancedResult {
@@ -86,7 +87,6 @@ export declare class TeleBoxManager {
     remove(boxOrID: string | TeleBox, skipUpdate?: boolean): ReadonlyTeleBox | undefined;
     removeTopBox(): ReadonlyTeleBox | undefined;
     removeAll(skipUpdate?: boolean): ReadonlyTeleBox[];
-    setTheme(theme: TeleBoxManagerThemeConfig): void;
     /**
      * Mount manager to a container element.
      */

package/dist/TeleBoxManager/typings.d.ts

@@ -31,7 +31,7 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
     readonly defaultBoxStageStyle?: string | null;
     /** Theme variable */
-    readonly theme?: TeleBoxManagerThemeConfig;
+    readonly theme?: TeleBoxManagerThemeConfig | null;
 }
 declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "boxRatio" | "zIndex" | "stageRatio";
 export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer" | "styles" | "bodyStyle" | "stageStyle" | "id" | "focus" | "enableShadowDOM">;

package/dist/telebox-insider.cjs.js

@@ -1109,7 +1109,7 @@ class TeleBoxManager {
     stageStyle = "",
     defaultBoxBodyStyle = null,
     defaultBoxStageStyle = null,
-    theme = {}
+    theme = null
   } = {}) {
     this.events = new Emittery__default["default"]();
     this._sideEffect = new sideEffectManager.SideEffectManager();
@@ -1188,6 +1188,9 @@ class TeleBoxManager {
     }));
     const darkMode$ = valueEnhancer.combine([prefersDark$, prefersColorScheme$], ([prefersDark, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark : prefersColorScheme2 === "dark");
     const state$ = valueEnhancer.combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    const theme$ = new valueEnhancer.Val(theme, {
+      compare: shallowequal__default["default"]
+    });
     const readonlyValConfig = {
       darkMode: darkMode$,
       state: state$,
@@ -1207,7 +1210,8 @@ class TeleBoxManager {
       containerStyle: containerStyle$,
       stageStyle: stageStyle$,
       defaultBoxBodyStyle: defaultBoxBodyStyle$,
-      defaultBoxStageStyle: defaultBoxStageStyle$
+      defaultBoxStageStyle: defaultBoxStageStyle$,
+      theme: theme$
     };
     valueEnhancer.withValueEnhancer(this, valConfig, valManager);
     const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
@@ -1259,8 +1263,14 @@ class TeleBoxManager {
       minimized$.subscribe((minimized2) => {
         this.$container.classList.toggle(this.wrapClassName("is-minimized"), minimized2);
       }),
-      containerStyle$.subscribe((containerStyle2) => {
+      valueEnhancer.combine([containerStyle$, theme$]).subscribe(([containerStyle2, theme2]) => {
         this.$container.style.cssText = containerStyle2;
+        if (theme2) {
+          Object.keys(theme2).forEach((key) => {
+            var _a;
+            this.$container.style.setProperty(`--tele-${key}`, (_a = theme2[key]) != null ? _a : null);
+          });
+        }
       }),
       stageStyle$.subscribe((stageStyle2) => {
         this.$stage.style.cssText = stageStyle2;
@@ -1477,12 +1487,6 @@ class TeleBoxManager {
     }
     return deletedBoxes;
   }
-  setTheme(theme) {
-    Object.keys(theme).forEach((key) => {
-      var _a;
-      this.$container.style.setProperty(`--tele-${key}`, (_a = theme[key]) != null ? _a : null);
-    });
-  }
   mount(root) {
     this._root$.setValue(root);
   }