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

package/dist/telebox-insider.es.js

@@ -1060,10 +1060,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");
@@ -1101,7 +1103,7 @@ class TeleBoxManager {
     stageStyle = "",
     defaultBoxBodyStyle = null,
     defaultBoxStageStyle = null,
-    theme = {}
+    theme = null
   } = {}) {
     this.events = new Emittery();
     this._sideEffect = new SideEffectManager();
@@ -1168,8 +1170,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 Val(prefersColorScheme);
@@ -1180,6 +1187,9 @@ class TeleBoxManager {
     }));
     const darkMode$ = combine([prefersDark$, prefersColorScheme$], ([prefersDark, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark : prefersColorScheme2 === "dark");
     const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    const theme$ = new Val(theme, {
+      compare: shallowequal
+    });
     const readonlyValConfig = {
       darkMode: darkMode$,
       state: state$,
@@ -1199,7 +1209,8 @@ class TeleBoxManager {
       containerStyle: containerStyle$,
       stageStyle: stageStyle$,
       defaultBoxBodyStyle: defaultBoxBodyStyle$,
-      defaultBoxStageStyle: defaultBoxStageStyle$
+      defaultBoxStageStyle: defaultBoxStageStyle$,
+      theme: theme$
     };
     withValueEnhancer(this, valConfig, valManager);
     const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
@@ -1251,8 +1262,14 @@ class TeleBoxManager {
       minimized$.subscribe((minimized2) => {
         this.$container.classList.toggle(this.wrapClassName("is-minimized"), minimized2);
       }),
-      containerStyle$.subscribe((containerStyle2) => {
+      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;
@@ -1469,12 +1486,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);
   }