@netless/telebox-insider 1.0.0-alpha.31 → 1.0.0-alpha.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/TeleBox/index.d.ts +10 -4
- package/dist/TeleBox/typings.d.ts +6 -6
- package/dist/style.css +1 -1
- package/dist/telebox-insider.cjs.js +27 -15
- package/dist/telebox-insider.cjs.js.map +1 -1
- package/dist/telebox-insider.es.js +27 -15
- package/dist/telebox-insider.es.js.map +1 -1
- package/package.json +1 -1
- package/src/TeleBox/index.ts +51 -19
- package/src/TeleBox/typings.ts +6 -6
- package/src/TeleBoxManager/MaxTitleBar/index.ts +9 -6
- package/src/TeleBoxManager/MaxTitleBar/style.scss +1 -1
- package/src/TeleBoxManager/index.ts +3 -3
package/dist/TeleBox/index.d.ts
CHANGED
|
@@ -14,6 +14,9 @@ declare type ValConfig = {
|
|
|
14
14
|
resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
|
|
15
15
|
draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
|
|
16
16
|
boxRatio: Val<RequiredTeleBoxConfig["boxRatio"], boolean>;
|
|
17
|
+
boxMinimized: Val<boolean | null, boolean>;
|
|
18
|
+
boxMaximized: Val<boolean | null, boolean>;
|
|
19
|
+
boxReadonly: Val<boolean | null, boolean>;
|
|
17
20
|
stageRatio: Val<RequiredTeleBoxConfig["stageRatio"], boolean>;
|
|
18
21
|
stageStyle: Val<RequiredTeleBoxConfig["stageStyle"], boolean>;
|
|
19
22
|
bodyStyle: Val<RequiredTeleBoxConfig["bodyStyle"], boolean>;
|
|
@@ -21,10 +24,10 @@ declare type ValConfig = {
|
|
|
21
24
|
declare type PropsValConfig = {
|
|
22
25
|
darkMode: RequiredTeleBoxConfig["darkMode$"];
|
|
23
26
|
fence: RequiredTeleBoxConfig["fence$"];
|
|
24
|
-
minimized: RequiredTeleBoxConfig["minimized$"];
|
|
25
|
-
maximized: RequiredTeleBoxConfig["maximized$"];
|
|
26
|
-
readonly: RequiredTeleBoxConfig["readonly$"];
|
|
27
27
|
rootRect: RequiredTeleBoxConfig["rootRect$"];
|
|
28
|
+
managerMinimized: RequiredTeleBoxConfig["managerMinimized$"];
|
|
29
|
+
managerMaximized: RequiredTeleBoxConfig["managerMaximized$"];
|
|
30
|
+
managerReadonly: RequiredTeleBoxConfig["managerReadonly$"];
|
|
28
31
|
managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
|
|
29
32
|
managerStageRatio: RequiredTeleBoxConfig["managerStageRatio$"];
|
|
30
33
|
defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
|
|
@@ -34,6 +37,9 @@ declare type PropsValConfig = {
|
|
|
34
37
|
declare type MyReadonlyValConfig = {
|
|
35
38
|
zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
|
|
36
39
|
focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
|
|
40
|
+
minimized: ReadonlyVal<boolean, boolean>;
|
|
41
|
+
maximized: ReadonlyVal<boolean, boolean>;
|
|
42
|
+
readonly: ReadonlyVal<boolean, boolean>;
|
|
37
43
|
minSize: Val<TeleBoxSize, boolean>;
|
|
38
44
|
intrinsicSize: Val<TeleBoxSize, boolean>;
|
|
39
45
|
intrinsicCoord: Val<TeleBoxCoord, boolean>;
|
|
@@ -48,7 +54,7 @@ declare type CombinedValEnhancedResult = ReadonlyValEnhancedResult<PropsValConfi
|
|
|
48
54
|
export interface TeleBox extends CombinedValEnhancedResult {
|
|
49
55
|
}
|
|
50
56
|
export declare class TeleBox {
|
|
51
|
-
constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, boxRatio, focus, zIndex, stageRatio, enableShadowDOM, titleBar, content, stage, footer, styles, userStyles, bodyStyle, stageStyle, darkMode$, fence$,
|
|
57
|
+
constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, boxRatio, focus, zIndex, stageRatio, enableShadowDOM, titleBar, content, stage, footer, styles, userStyles, bodyStyle, stageStyle, darkMode$, fence$, root, rootRect$, managerMinimized$, managerMaximized$, managerReadonly$, managerStageRect$, managerStageRatio$, defaultBoxBodyStyle$, defaultBoxStageStyle$, collectorRect$, }: TeleBoxConfig);
|
|
52
58
|
readonly id: string;
|
|
53
59
|
/** ClassName Prefix. For CSS styling. Default "telebox" */
|
|
54
60
|
readonly namespace: string;
|
|
@@ -75,16 +75,16 @@ export interface TeleBoxConfig {
|
|
|
75
75
|
readonly darkMode$: ReadonlyVal<boolean, boolean>;
|
|
76
76
|
/** Restrict box to always be within the stage area. Default false. */
|
|
77
77
|
readonly fence$: ReadonlyVal<boolean, boolean>;
|
|
78
|
-
/** Maximize box. Default false. */
|
|
79
|
-
readonly maximized$: ReadonlyVal<boolean, boolean>;
|
|
80
|
-
/** Minimize box. Overwrites maximized state. Default false. */
|
|
81
|
-
readonly minimized$: ReadonlyVal<boolean, boolean>;
|
|
82
|
-
/** Is box readonly */
|
|
83
|
-
readonly readonly$: ReadonlyVal<boolean, boolean>;
|
|
84
78
|
/** Root element to mount boxes */
|
|
85
79
|
readonly root: HTMLElement;
|
|
86
80
|
/** Position and dimension of root element */
|
|
87
81
|
readonly rootRect$: ReadonlyVal<TeleBoxRect>;
|
|
82
|
+
/** Maximize state from manager. Default false. */
|
|
83
|
+
readonly managerMaximized$: ReadonlyVal<boolean, boolean>;
|
|
84
|
+
/** Minimize state from manager. Overwrites maximized state. Default false. */
|
|
85
|
+
readonly managerMinimized$: ReadonlyVal<boolean, boolean>;
|
|
86
|
+
/** Manager readonly state. */
|
|
87
|
+
readonly managerReadonly$: ReadonlyVal<boolean, boolean>;
|
|
88
88
|
/** Position and dimension of stage area */
|
|
89
89
|
readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
|
|
90
90
|
/** Stage area height/with ratio. No ratio if <= 0. */
|
package/dist/style.css
CHANGED
|
@@ -272,11 +272,11 @@ class TeleBox {
|
|
|
272
272
|
stageStyle = null,
|
|
273
273
|
darkMode$,
|
|
274
274
|
fence$,
|
|
275
|
-
minimized$,
|
|
276
|
-
maximized$,
|
|
277
|
-
readonly$,
|
|
278
275
|
root,
|
|
279
276
|
rootRect$,
|
|
277
|
+
managerMinimized$,
|
|
278
|
+
managerMaximized$,
|
|
279
|
+
managerReadonly$,
|
|
280
280
|
managerStageRect$,
|
|
281
281
|
managerStageRatio$,
|
|
282
282
|
defaultBoxBodyStyle$,
|
|
@@ -302,6 +302,12 @@ class TeleBox {
|
|
|
302
302
|
const boxRatio$ = new valueEnhancer.Val(boxRatio);
|
|
303
303
|
const zIndex$ = new valueEnhancer.Val(zIndex);
|
|
304
304
|
const focus$ = new valueEnhancer.Val(focus);
|
|
305
|
+
const boxMaximized$ = new valueEnhancer.Val(null);
|
|
306
|
+
const boxMinimized$ = new valueEnhancer.Val(null);
|
|
307
|
+
const boxReadonly$ = new valueEnhancer.Val(null);
|
|
308
|
+
const maximized$ = valueEnhancer.combine([boxMaximized$, managerMaximized$], ([boxMaximized, managerMaximized]) => boxMaximized != null ? boxMaximized : managerMaximized);
|
|
309
|
+
const minimized$ = valueEnhancer.combine([boxMinimized$, managerMinimized$], ([boxMinimized, managerMinimized]) => boxMinimized != null ? boxMinimized : managerMinimized);
|
|
310
|
+
const readonly$ = valueEnhancer.combine([boxReadonly$, managerReadonly$], ([boxReadonly, managerReadonly]) => boxReadonly != null ? boxReadonly : managerReadonly);
|
|
305
311
|
const state$ = valueEnhancer.combine([minimized$, maximized$], ([minimized, maximized]) => minimized ? TELE_BOX_STATE.Minimized : maximized ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
|
|
306
312
|
const minSize$ = new valueEnhancer.Val({
|
|
307
313
|
width: clamp(minWidth, 0, 1),
|
|
@@ -339,10 +345,10 @@ class TeleBox {
|
|
|
339
345
|
const propsValConfig = {
|
|
340
346
|
darkMode: darkMode$,
|
|
341
347
|
fence: fence$,
|
|
342
|
-
minimized: minimized$,
|
|
343
|
-
maximized: maximized$,
|
|
344
|
-
readonly: readonly$,
|
|
345
348
|
rootRect: rootRect$,
|
|
349
|
+
managerMinimized: managerMinimized$,
|
|
350
|
+
managerMaximized: managerMaximized$,
|
|
351
|
+
managerReadonly: managerReadonly$,
|
|
346
352
|
managerStageRect: managerStageRect$,
|
|
347
353
|
managerStageRatio: managerStageRatio$,
|
|
348
354
|
defaultBoxBodyStyle: defaultBoxBodyStyle$,
|
|
@@ -361,7 +367,10 @@ class TeleBox {
|
|
|
361
367
|
pxIntrinsicSize: pxIntrinsicSize$,
|
|
362
368
|
pxIntrinsicCoord: pxIntrinsicCoord$,
|
|
363
369
|
bodyRect: bodyRect$,
|
|
364
|
-
stageRect: stageRect
|
|
370
|
+
stageRect: stageRect$,
|
|
371
|
+
minimized: minimized$,
|
|
372
|
+
maximized: maximized$,
|
|
373
|
+
readonly: readonly$
|
|
365
374
|
};
|
|
366
375
|
valueEnhancer.withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
|
|
367
376
|
const valConfig = {
|
|
@@ -370,6 +379,9 @@ class TeleBox {
|
|
|
370
379
|
resizable: resizable$,
|
|
371
380
|
draggable: draggable$,
|
|
372
381
|
boxRatio: boxRatio$,
|
|
382
|
+
boxMinimized: boxMinimized$,
|
|
383
|
+
boxMaximized: boxMaximized$,
|
|
384
|
+
boxReadonly: boxReadonly$,
|
|
373
385
|
stageRatio: stageRatio$,
|
|
374
386
|
bodyStyle: bodyStyle$,
|
|
375
387
|
stageStyle: stageStyle$
|
|
@@ -386,8 +398,8 @@ class TeleBox {
|
|
|
386
398
|
},
|
|
387
399
|
onEvent: (event) => this._delegateEvents.emit(event.type)
|
|
388
400
|
});
|
|
389
|
-
this._sideEffect.addDisposer(boxRatio
|
|
390
|
-
if (boxRatio2 > 0) {
|
|
401
|
+
this._sideEffect.addDisposer(valueEnhancer.combine([boxRatio$, minimized$]).subscribe(([boxRatio2, minimized]) => {
|
|
402
|
+
if (!minimized && boxRatio2 > 0) {
|
|
391
403
|
this.transform(pxIntrinsicCoord$.value.x, pxIntrinsicCoord$.value.y, pxIntrinsicSize$.value.width, pxIntrinsicSize$.value.height);
|
|
392
404
|
}
|
|
393
405
|
}));
|
|
@@ -990,7 +1002,7 @@ var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
|
|
|
990
1002
|
TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
|
|
991
1003
|
return TELE_BOX_MANAGER_EVENT2;
|
|
992
1004
|
})(TELE_BOX_MANAGER_EVENT || {});
|
|
993
|
-
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-
|
|
1005
|
+
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}")();
|
|
994
1006
|
class MaxTitleBar extends DefaultTitleBar {
|
|
995
1007
|
constructor(config) {
|
|
996
1008
|
super(config);
|
|
@@ -1027,8 +1039,8 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
1027
1039
|
const $titleBar = super.render();
|
|
1028
1040
|
$titleBar.classList.add(this.wrapClassName("max-titlebar"));
|
|
1029
1041
|
this.sideEffect.addDisposer([
|
|
1030
|
-
this.state
|
|
1031
|
-
$titleBar.classList.toggle(this.wrapClassName("max-titlebar-
|
|
1042
|
+
valueEnhancer.combine([this.boxes$, this.state$]).subscribe(([boxes, state]) => {
|
|
1043
|
+
$titleBar.classList.toggle(this.wrapClassName("max-titlebar-active"), state === TELE_BOX_STATE.Maximized && boxes.length > 0);
|
|
1032
1044
|
}),
|
|
1033
1045
|
this.readonly$.subscribe((readonly) => {
|
|
1034
1046
|
$titleBar.classList.toggle(this.wrapClassName("readonly"), readonly);
|
|
@@ -1359,13 +1371,13 @@ class TeleBoxManager {
|
|
|
1359
1371
|
namespace: this.namespace,
|
|
1360
1372
|
root: this.$stage,
|
|
1361
1373
|
darkMode$: this._darkMode$,
|
|
1362
|
-
maximized$: this._maximized$,
|
|
1363
|
-
minimized$: this._minimized$,
|
|
1364
1374
|
fence$: this._fence$,
|
|
1365
1375
|
rootRect$: this._rootRect$,
|
|
1366
1376
|
managerStageRect$: this._stageRect$,
|
|
1367
1377
|
managerStageRatio$: this._stageRatio$,
|
|
1368
|
-
|
|
1378
|
+
managerMaximized$: this._maximized$,
|
|
1379
|
+
managerMinimized$: this._minimized$,
|
|
1380
|
+
managerReadonly$: this._readonly$,
|
|
1369
1381
|
collectorRect$: this.collector._rect$,
|
|
1370
1382
|
defaultBoxBodyStyle$: this._defaultBoxBodyStyle$,
|
|
1371
1383
|
defaultBoxStageStyle$: this._defaultBoxStageStyle$
|