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

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/style.css

@@ -553,7 +553,7 @@
 .telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {
   display: block;
 }
-.telebox-max-titlebar-maximized {
+.telebox-max-titlebar-active {
   display: flex;
 }
 .telebox-titles {

package/dist/telebox-insider.cjs.js

@@ -1002,7 +1002,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);
@@ -1039,8 +1039,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);
+      valueEnhancer.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);
@@ -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();
@@ -1176,8 +1176,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 +1193,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 +1215,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 +1268,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 +1492,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);
   }