@netless/telebox-insider 1.0.0-alpha.19 → 1.0.0-alpha.21

package/src/TeleBox/style.scss

@@ -1,6 +1,8 @@
 @import "../scss/variables.scss";
 @import "../scss/mixins.scss";
 
+@import "./style.shadow.scss";
+
 .#{$namespace}-box {
     position: absolute;
     top: 0;
@@ -12,15 +14,16 @@
 }
 
 .#{$namespace}-box-main {
+    @include v(border, box-border, $box-border);
+    @include v(box-shadow, box-shadow, $box-shadow);
+
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
     border-radius: 6px;
-    border: 1px solid #e3e3ec;
 }
 
 .#{$namespace}-titlebar-wrap {
@@ -29,41 +32,11 @@
     z-index: 1;
 }
 
-.#{$namespace}-content-wrap {
+.#{$namespace}-quarantine-wrap {
+    all: initial;
     flex: 1;
     width: 100%;
     overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-}
-
-.#{$namespace}-content {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background: $color-container-background;
-}
-
-.#{$namespace}-content-stage {
-    position: absolute;
-    z-index: 1;
-    overflow: hidden;
-    background: $color-stage-background;
-    box-shadow: $color-stage-shadow;
-}
-
-.#{$namespace}-footer-wrap {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-
-    &::before {
-        content: "";
-        display: block;
-        flex: 1;
-    }
 }
 
 .#{$namespace}-resize-handle {
@@ -219,16 +192,7 @@
     color-scheme: dark;
 
     .#{$namespace}-box-main {
-        color: #e9e9e9;
-        border-color: #43434d;
-    }
-
-    .#{$namespace}-content {
-        background: $color-container-background-dark;
-    }
-
-    .#{$namespace}-content-stage {
-        background: $color-stage-background-dark;
-        box-shadow: $color-stage-shadow-dark;
+        @include v(border, box-border-dark, $box-border-dark);
+        @include v(box-shadow, box-shadow-dark, $box-shadow-dark);
     }
 }

package/src/TeleBox/style.shadow.scss

@@ -0,0 +1,87 @@
+@import "../scss/variables.scss";
+@import "../scss/mixins.scss";
+
+.#{$namespace}-quarantine {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.#{$namespace}-body-wrap {
+    @include v(color, box-color, $box-color);
+
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.#{$namespace}-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    @include v(
+        background-color,
+        manager-container-background,
+        $manager-container-background
+    );
+}
+
+.#{$namespace}-box-stage {
+    position: absolute;
+    z-index: 1;
+    overflow: hidden;
+
+    @include v(
+        background-color,
+        manager-stage-background,
+        $manager-stage-background
+    );
+    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
+}
+
+.#{$namespace}-footer-wrap {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+
+    &::before {
+        content: "";
+        display: block;
+        flex: 1;
+    }
+}
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    .#{$namespace}-body-wrap {
+        @include v(color, box-color-dark, $box-color-dark);
+    }
+
+    .#{$namespace}-content {
+        @include v(
+            background-color,
+            manager-container-background-dark,
+            $manager-container-background-dark
+        );
+    }
+
+    .#{$namespace}-box-stage {
+        @include v(
+            background-color,
+            manager-stage-background-dark,
+            $manager-stage-background-dark
+        );
+        @include v(
+            box-shadow,
+            manager-stage-shadow-dark,
+            $manager-stage-shadow-dark
+        );
+    }
+}

package/src/TeleBox/typings.ts

@@ -57,9 +57,11 @@ export interface TeleBoxConfig {
     /** Base z-index for box. */
     readonly zIndex?: number;
     /** Box content stage ratio. Follow manager stage ratio if null. Default null. */
-    readonly contentStageRatio?: number | null;
+    readonly stageRatio?: number | null;
     /** Classname Prefix. For CSS styling. Default "telebox". */
     readonly namespace?: string;
+    /** Enable shadow DOM for box content. Default true. */
+    readonly enableShadowDOM?: boolean;
     /** TeleTitleBar Instance. */
     readonly titleBar?: TeleTitleBar;
     /** Box content element. */
@@ -69,11 +71,13 @@ export interface TeleBoxConfig {
     /** Box footer element. */
     readonly footer?: HTMLElement;
     /** Box content styles. */
-    readonly styles?: HTMLStyleElement;
+    readonly styles?: string;
+    /** Box content styles from end users. */
+    readonly userStyles?: string;
     /** Custom styles for box content container. Inherit from manager container style if null. Default null. */
-    readonly contentStyle?: string | null;
+    readonly bodyStyle?: string | null;
     /** Custom styles for box content stage. Inherit from manager stage style if null. Default null. */
-    readonly contentStageStyle?: string | null;
+    readonly stageStyle?: string | null;
     /** Actual Box Dark Mode */
     readonly darkMode$: ReadonlyVal<boolean, boolean>;
     /** Restrict box to always be within the stage area. Default false. */
@@ -92,10 +96,10 @@ export interface TeleBoxConfig {
     readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
     /** Stage area height/with ratio. No ratio if <= 0. */
     readonly managerStageRatio$: ReadonlyVal<number, boolean>;
-    /** Custom container styles from manager */
-    readonly managerContainerStyle$: ReadonlyVal<string>;
-    /** Custom stage styles from manager */
-    readonly managerStageStyle$: ReadonlyVal<string>;
+    /** Default content styles for all boxes */
+    readonly defaultBoxBodyStyle$: ReadonlyVal<string | null>;
+    /** Default stage styles for all boxes */
+    readonly defaultBoxStageStyle$: ReadonlyVal<string | null>;
     /** Position and dimension of collector */
     readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
 }

package/src/TeleBoxCollector/style.scss

@@ -16,8 +16,6 @@
     outline: none;
     font-size: 0;
     border-radius: 50%;
-    background: #fff;
-    box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
     cursor: pointer;
     user-select: none;
     pointer-events: none;
@@ -25,6 +23,9 @@
     background-size: 18px 16px;
     background-position: center;
     -webkit-tap-highlight-color: transparent;
+
+    @include v(background-color, collector-background, $collector-background);
+    @include v(box-shadow, collector-shadow, $collector-shadow);
 }
 
 .#{$namespace}-collector-visible {
@@ -40,6 +41,11 @@
     color-scheme: dark;
 
     &.#{$namespace}-collector {
-        background-color: #43434d;
+        @include v(
+            background-color,
+            collector-background-dark,
+            $collector-background-dark
+        );
+        @include v(box-shadow, collector-shadow-dark, $collector-shadow-dark);
     }
 }

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -14,7 +14,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode$: ReadonlyVal<boolean>;
     boxes$: ReadonlyVal<TeleBox[]>;
     rootRect$: ReadonlyVal<TeleBoxRect>;
-    root$: ReadonlyVal<HTMLElement | null>;
+    root: HTMLElement;
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
@@ -25,15 +25,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.rootRect$ = config.rootRect$;
         this.darkMode$ = config.darkMode$;
 
-        this.sideEffect.addDisposer(
-            config.root$.subscribe((root) => {
-                if (root) {
-                    root.appendChild(this.render());
-                } else if (this.$titleBar?.parentNode) {
-                    this.$titleBar.remove();
-                }
-            })
-        );
+        config.root.appendChild(this.render());
     }
 
     public focusBox(box?: TeleBox): void {
@@ -87,16 +79,6 @@ export class MaxTitleBar extends DefaultTitleBar {
                         readonly
                     );
                 }),
-                this.darkMode$.subscribe((darkMode) => {
-                    $titleBar.classList.toggle(
-                        this.wrapClassName("color-scheme-dark"),
-                        darkMode
-                    );
-                    $titleBar.classList.toggle(
-                        this.wrapClassName("color-scheme-light"),
-                        !darkMode
-                    );
-                }),
                 combine([this.state$, this.boxes$]).subscribe(
                     ([state, titles]) => {
                         if (state === TELE_BOX_STATE.Maximized) {

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -1,7 +1,7 @@
 @import "../../scss/variables.scss";
 @import "../../scss/mixins.scss";
 
-$scrollbar-size: 8px;
+$scrollbar-size: 4px;
 $scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
 $scrollbar-minlength: 50px; // Minimum length of scrollbar thumb
 $scrollbar-track-color: transparent;
@@ -108,15 +108,26 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     white-space: nowrap;
     word-break: keep-all;
     border: none;
-    border-right: 1px solid #e5e5f0;
-    color: #7b88a0;
-    background: transparent;
+    border-right-width: 1px;
+    border-right-style: solid;
     cursor: pointer;
     user-select: none;
+
+    @include v(color, titlebar-tab-color, $titlebar-tab-color);
+    @include v(
+        background-color,
+        titlebar-tab-background,
+        $titlebar-tab-background
+    );
+    @include v(
+        border-right-color,
+        titlebar-tab-divider-color,
+        $titlebar-tab-divider-color
+    );
 }
 
 .#{$namespace}-titles-tab-focus {
-    color: #357bf6;
+    @include v(color, titlebar-tab-focus-color, $titlebar-tab-focus-color);
 }
 
 .#{$namespace}-readonly {
@@ -128,17 +139,25 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
-    &.#{$namespace}-titlebar {
-        color: #e9e9e9;
-        background: #43434d;
-        border-bottom: none;
-    }
-
     .#{$namespace}-titles-tab {
-        border-right-color: #7b88a0;
+        @include v(color, titlebar-tab-color-dark, $titlebar-tab-color-dark);
+        @include v(
+            background-color,
+            titlebar-tab-background-dark,
+            $titlebar-tab-background-dark
+        );
+        @include v(
+            border-right-color,
+            titlebar-tab-divider-color-dark,
+            $titlebar-tab-divider-color-dark
+        );
     }
 
-    .#{$namespace}-title {
-        color: #e9e9e9;
+    .#{$namespace}-titles-tab-focus {
+        @include v(
+            color,
+            titlebar-tab-focus-color-dark,
+            $titlebar-tab-focus-color-dark
+        );
     }
 }

package/src/TeleBoxManager/index.ts

@@ -64,6 +64,8 @@ type ValConfig = {
     stageRatio: Val<number, boolean>;
     containerStyle: Val<string>;
     stageStyle: Val<string>;
+    defaultBoxBodyStyle: Val<string | null>;
+    defaultBoxStageStyle: Val<string | null>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
@@ -84,6 +86,8 @@ export class TeleBoxManager {
         stageRatio = -1,
         containerStyle = "",
         stageStyle = "",
+        defaultBoxBodyStyle = null,
+        defaultBoxStageStyle = null,
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
 
@@ -100,6 +104,8 @@ export class TeleBoxManager {
         const containerStyle$ = new Val(containerStyle);
         const stageStyle$ = new Val(stageStyle);
         const stageRatio$ = new Val(stageRatio);
+        const defaultBoxBodyStyle$ = new Val(defaultBoxBodyStyle);
+        const defaultBoxStageStyle$ = new Val(defaultBoxStageStyle);
 
         const rootRect$ = new Val<TeleBoxRect>(
             {
@@ -225,6 +231,8 @@ export class TeleBoxManager {
             stageRatio: stageRatio$,
             containerStyle: containerStyle$,
             stageStyle: stageStyle$,
+            defaultBoxBodyStyle: defaultBoxBodyStyle$,
+            defaultBoxStageStyle: defaultBoxStageStyle$,
         };
 
         withValueEnhancer(this, valConfig, valManager);
@@ -274,6 +282,51 @@ export class TeleBoxManager {
             true
         );
 
+        this.$container = document.createElement("div");
+        this.$container.className = this.wrapClassName("manager-container");
+
+        this.$stage = document.createElement("div");
+        this.$stage.className = this.wrapClassName("manager-stage");
+        this.$container.appendChild(this.$stage);
+
+        this._sideEffect.addDisposer([
+            darkMode$.subscribe((darkMode) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }),
+            maximized$.subscribe((maximized) => {
+                this.$container.classList.toggle("is-maximized", maximized);
+            }),
+            minimized$.subscribe((minimized) => {
+                this.$container.classList.toggle("is-minimized", minimized);
+            }),
+            containerStyle$.subscribe((containerStyle) => {
+                this.$container.style.cssText = containerStyle;
+            }),
+            stageStyle$.subscribe((stageStyle) => {
+                this.$stage.style.cssText = stageStyle;
+                this.$stage.style.width = stageRect$.value.width + "px";
+                this.$stage.style.height = stageRect$.value.height + "px";
+            }),
+            stageRect$.subscribe((stageRect) => {
+                this.$stage.style.width = stageRect.width + "px";
+                this.$stage.style.height = stageRect.height + "px";
+            }),
+            root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.$container);
+                } else if (this.$container.parentElement) {
+                    this.$container.remove();
+                }
+            }),
+        ]);
+
         this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
             title$: derive(this.topBox$, (topBox) => topBox?.title || ""),
@@ -281,8 +334,8 @@ export class TeleBoxManager {
             darkMode$: darkMode$,
             readonly$: readonly$,
             state$: state$,
-            root$,
             rootRect$: rootRect$,
+            root: this.$container,
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
@@ -333,51 +386,6 @@ export class TeleBoxManager {
                 }
             }),
         ]);
-
-        this.$container = document.createElement("div");
-        this.$container.className = this.wrapClassName("manager-container");
-
-        this.$stage = document.createElement("div");
-        this.$stage.className = this.wrapClassName("manager-stage");
-        this.$container.appendChild(this.$stage);
-
-        this._sideEffect.addDisposer([
-            darkMode$.subscribe((darkMode) => {
-                this.$container.classList.toggle(
-                    this.wrapClassName("color-scheme-dark"),
-                    darkMode
-                );
-                this.$container.classList.toggle(
-                    this.wrapClassName("color-scheme-light"),
-                    !darkMode
-                );
-            }),
-            maximized$.subscribe((maximized) => {
-                this.$container.classList.toggle("is-maximized", maximized);
-            }),
-            minimized$.subscribe((minimized) => {
-                this.$container.classList.toggle("is-minimized", minimized);
-            }),
-            containerStyle$.subscribe((containerStyle) => {
-                this.$container.style.cssText = containerStyle;
-            }),
-            stageStyle$.subscribe((stageStyle) => {
-                this.$stage.style.cssText = stageStyle;
-                this.$stage.style.width = stageRect$.value.width + "px";
-                this.$stage.style.height = stageRect$.value.height + "px";
-            }),
-            stageRect$.subscribe((stageRect) => {
-                this.$stage.style.width = stageRect.width + "px";
-                this.$stage.style.height = stageRect.height + "px";
-            }),
-            root$.subscribe((root) => {
-                if (root) {
-                    root.appendChild(this.$container);
-                } else if (this.$container.parentElement) {
-                    this.$container.remove();
-                }
-            }),
-        ]);
     }
 
     public readonly $container: HTMLDivElement;
@@ -442,8 +450,8 @@ export class TeleBoxManager {
             managerStageRatio$: this._stageRatio$,
             readonly$: this._readonly$,
             collectorRect$: this.collector._rect$,
-            managerContainerStyle$: this._containerStyle$,
-            managerStageStyle$: this._stageStyle$,
+            defaultBoxBodyStyle$: this._defaultBoxBodyStyle$,
+            defaultBoxStageStyle$: this._defaultBoxStageStyle$,
         });
 
         if (box.focus) {
@@ -716,8 +724,8 @@ export class TeleBoxManager {
         if (config.zIndex != null) {
             box._zIndex$.setValue(config.zIndex, skipUpdate);
         }
-        if (config.contentStageRatio !== undefined) {
-            box.setContentStageRatio(config.contentStageRatio, skipUpdate);
+        if (config.stageRatio !== undefined) {
+            box.setStageRatio(config.stageRatio, skipUpdate);
         }
         if (config.content != null) {
             box.mountContent(config.content);

package/src/TeleBoxManager/style.scss

@@ -1,4 +1,5 @@
 @import "../scss/variables.scss";
+@import "../scss/mixins.scss";
 
 .#{$namespace}-manager-container {
     position: relative;
@@ -8,7 +9,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: $color-container-background;
+    @include v(
+        background,
+        manager-container-background,
+        $manager-container-background
+    );
 
     &.is-maximized,
     &.is-minimized {
@@ -21,19 +26,31 @@
 .#{$namespace}-manager-stage {
     position: relative;
     overflow: hidden;
-    background: $color-stage-background;
-    box-shadow: $color-stage-shadow;
+    @include v(background, manager-stage-background, $manager-stage-background);
+    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     &.#{$namespace}-manager-container {
-        background: $color-container-background-dark;
+        @include v(
+            background,
+            manager-container-background-dark,
+            $manager-container-background-dark
+        );
 
         & > .#{$namespace}-manager-stage {
-            background: $color-stage-background-dark;
-            box-shadow: $color-stage-shadow-dark;
+            @include v(
+                background,
+                manager-stage-background-dark,
+                $manager-stage-background-dark
+            );
+            @include v(
+                box-shadow,
+                manager-stage-shadow-dark,
+                $manager-stage-shadow-dark
+            );
         }
     }
 }

package/src/TeleBoxManager/typings.ts

@@ -21,10 +21,14 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     readonly minimized?: boolean;
     /** Is box readonly */
     readonly readonly?: boolean;
-    /** Extra styles for telebox manager container */
+    /** Custom styles for telebox manager container */
     readonly containerStyle?: string;
-    /** Extra styles for telebox manager stage */
+    /** Custom styles for telebox manager stage */
     readonly stageStyle?: string;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxStageStyle?: string | null;
 }
 
 type TeleBoxManagerBoxConfigBaseProps =
@@ -40,7 +44,7 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "draggable"
     | "boxRatio"
     | "zIndex"
-    | "contentStageRatio";
+    | "stageRatio";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
@@ -48,8 +52,12 @@ export type TeleBoxManagerCreateConfig = Pick<
     | "content"
     | "stage"
     | "footer"
+    | "styles"
+    | "bodyStyle"
+    | "stageStyle"
     | "id"
     | "focus"
+    | "enableShadowDOM"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<
@@ -59,7 +67,7 @@ export type TeleBoxManagerQueryConfig = Pick<
     | "resizable"
     | "draggable"
     | "boxRatio"
-    | "contentStageRatio"
+    | "stageRatio"
     | "zIndex"
     | "id"
     | "focus"