@netless/telebox-insider 1.0.0-alpha.33 → 1.0.0-alpha.36

package/dist/telebox-insider.es.js

@@ -994,7 +994,7 @@ var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
   TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
   return TELE_BOX_MANAGER_EVENT2;
 })(TELE_BOX_MANAGER_EVENT || {});
-var style = /* @__PURE__ */ (() => ".telebox-max-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  display: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 5100;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n}\n.telebox-max-titlebar .telebox-title {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {\n  display: block;\n}\n.telebox-max-titlebar-maximized {\n  display: flex;\n}\n.telebox-titles {\n  height: 100%;\n  margin: 0;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  overflow-x: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.telebox-titles::-webkit-scrollbar {\n  height: 4px;\n  width: 4px;\n}\n.telebox-titles::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.telebox-titles::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n  background-color: transparent;\n  border-radius: 2px;\n  transition: background-color 0.4s;\n}\n.telebox-titles:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n}\n.telebox-titles::-webkit-scrollbar-thumb:hover {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:active {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.telebox-titles::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-titles-content {\n  height: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: 0;\n}\n.telebox-titles-tab {\n  height: 100%;\n  overflow: hidden;\n  max-width: 182px;\n  min-width: 150px;\n  padding: 0 26px 0 16px;\n  outline: none;\n  font-size: 13px;\n  font-family: PingFangSC-Regular, PingFang SC;\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-break: keep-all;\n  border: none;\n  border-right-width: 1px;\n  border-right-style: solid;\n  cursor: pointer;\n  user-select: none;\n  color: #7b88a0;\n  color: var(--tele-titlebarTabColor, #7b88a0);\n  background-color: transparent;\n  background-color: var(--tele-titlebarTabBackground, transparent);\n  border-right-color: #e5e5f0;\n  border-right-color: var(--tele-titlebarTabDividerColor, #e5e5f0);\n}\n.telebox-titles-tab-focus {\n  color: #357bf6;\n  color: var(--tele-titlebarTabFocusColor, #357bf6);\n}\n.telebox-readonly .telebox-titles-tab {\n  cursor: not-allowed;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-titles-tab {\n  color: #e9e9e9;\n  color: var(--tele-titlebarTabColor, #e9e9e9);\n  background-color: transparent;\n  background-color: var(--tele-titlebarTabBackground, transparent);\n  border-right-color: #7b88a0;\n  border-right-color: var(--tele-titlebarTabDividerColor, #7b88a0);\n}\n.telebox-color-scheme-dark .telebox-titles-tab-focus {\n  color: #357bf6;\n  color: var(--tele-titlebarTabFocusColor, #357bf6);\n}")();
+var style = /* @__PURE__ */ (() => ".telebox-max-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  display: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 5100;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n}\n.telebox-max-titlebar .telebox-title {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {\n  display: block;\n}\n.telebox-max-titlebar-active {\n  display: flex;\n}\n.telebox-titles {\n  height: 100%;\n  margin: 0;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  overflow-x: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.telebox-titles::-webkit-scrollbar {\n  height: 4px;\n  width: 4px;\n}\n.telebox-titles::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.telebox-titles::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n  background-color: transparent;\n  border-radius: 2px;\n  transition: background-color 0.4s;\n}\n.telebox-titles:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n}\n.telebox-titles::-webkit-scrollbar-thumb:hover {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:active {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.telebox-titles::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-titles-content {\n  height: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: 0;\n}\n.telebox-titles-tab {\n  height: 100%;\n  overflow: hidden;\n  max-width: 182px;\n  min-width: 150px;\n  padding: 0 26px 0 16px;\n  outline: none;\n  font-size: 13px;\n  font-family: PingFangSC-Regular, PingFang SC;\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-break: keep-all;\n  border: none;\n  border-right-width: 1px;\n  border-right-style: solid;\n  cursor: pointer;\n  user-select: none;\n  color: #7b88a0;\n  color: var(--tele-titlebarTabColor, #7b88a0);\n  background-color: transparent;\n  background-color: var(--tele-titlebarTabBackground, transparent);\n  border-right-color: #e5e5f0;\n  border-right-color: var(--tele-titlebarTabDividerColor, #e5e5f0);\n}\n.telebox-titles-tab-focus {\n  color: #357bf6;\n  color: var(--tele-titlebarTabFocusColor, #357bf6);\n}\n.telebox-readonly .telebox-titles-tab {\n  cursor: not-allowed;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-titles-tab {\n  color: #e9e9e9;\n  color: var(--tele-titlebarTabColor, #e9e9e9);\n  background-color: transparent;\n  background-color: var(--tele-titlebarTabBackground, transparent);\n  border-right-color: #7b88a0;\n  border-right-color: var(--tele-titlebarTabDividerColor, #7b88a0);\n}\n.telebox-color-scheme-dark .telebox-titles-tab-focus {\n  color: #357bf6;\n  color: var(--tele-titlebarTabFocusColor, #357bf6);\n}")();
 class MaxTitleBar extends DefaultTitleBar {
   constructor(config) {
     super(config);
@@ -1031,8 +1031,8 @@ class MaxTitleBar extends DefaultTitleBar {
     const $titleBar = super.render();
     $titleBar.classList.add(this.wrapClassName("max-titlebar"));
     this.sideEffect.addDisposer([
-      this.state$.subscribe((state) => {
-        $titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), state === TELE_BOX_STATE.Maximized);
+      combine([this.boxes$, this.state$]).subscribe(([boxes, state]) => {
+        $titleBar.classList.toggle(this.wrapClassName("max-titlebar-active"), state === TELE_BOX_STATE.Maximized && boxes.length > 0);
       }),
       this.readonly$.subscribe((readonly) => {
         $titleBar.classList.toggle(this.wrapClassName("readonly"), readonly);
@@ -1101,7 +1101,7 @@ class TeleBoxManager {
     stageStyle = "",
     defaultBoxBodyStyle = null,
     defaultBoxStageStyle = null,
-    theme = {}
+    theme = null
   } = {}) {
     this.events = new Emittery();
     this._sideEffect = new SideEffectManager();
@@ -1168,8 +1168,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 +1185,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 +1207,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 +1260,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 +1484,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);
   }