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

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

@@ -1068,10 +1068,12 @@ class MaxTitleBar extends DefaultTitleBar {
     this.$titles = document.createElement("div");
     this.$titles.className = this.wrapClassName("titles");
     this.sideEffect.addEventListener(this.$titles, "wheel", (ev) => {
-      ev.currentTarget.scrollBy({
-        left: ev.deltaY > 0 ? 250 : -250,
-        behavior: "smooth"
-      });
+      if (!ev.deltaX) {
+        ev.currentTarget.scrollBy({
+          left: ev.deltaY > 0 ? 250 : -250,
+          behavior: "smooth"
+        });
+      }
     }, { passive: false }, "max-render-wheel-titles");
     const $content = document.createElement("div");
     $content.className = this.wrapClassName("titles-content");
@@ -1109,7 +1111,7 @@ class TeleBoxManager {
     stageStyle = "",
     defaultBoxBodyStyle = null,
     defaultBoxStageStyle = null,
-    theme = {}
+    theme = null
   } = {}) {
     this.events = new Emittery__default["default"]();
     this._sideEffect = new sideEffectManager.SideEffectManager();
@@ -1176,8 +1178,13 @@ class TeleBoxManager {
         const handler = (evt) => {
           prefersDark$.setValue(evt.matches);
         };
-        prefersDarkMatch.addEventListener("change", handler);
-        return () => prefersDarkMatch.removeEventListener("change", handler);
+        if (prefersDarkMatch.addEventListener) {
+          prefersDarkMatch.addEventListener("change", handler);
+          return () => prefersDarkMatch.removeEventListener("change", handler);
+        } else {
+          prefersDarkMatch.addListener(handler);
+          return () => prefersDarkMatch.removeListener(handler);
+        }
       });
     }
     const prefersColorScheme$ = new valueEnhancer.Val(prefersColorScheme);
@@ -1188,6 +1195,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 +1217,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 +1270,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 +1494,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);
   }