react-bwin 0.2.4 → 0.3.0
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/README.md +2 -0
- package/dist/react-bwin.css +1 -1
- package/dist/react-bwin.d.ts +95 -81
- package/dist/react-bwin.js +231 -233
- package/dist/react-bwin.umd.js +2 -2
- package/package.json +55 -54
package/README.md
CHANGED
package/dist/react-bwin.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-clearance: 2px;--bw-glass-border-radius: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 97%);--bw-glass-header-height: 30px;--bw-glass-header-gap: 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%);--bw-sill-gap: 6px}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{position:absolute;display:block;box-sizing:border-box}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:transparent}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:transparent}bw-glass{position:absolute;inset:var(--bw-glass-clearance);display:flex;flex-direction:column;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);background-color:#fff;font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;
|
|
1
|
+
:root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-clearance: 2px;--bw-glass-border-radius: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 97%);--bw-glass-header-height: 30px;--bw-glass-header-gap: 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%);--bw-sill-gap: 6px}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{position:absolute;display:block;box-sizing:border-box}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:transparent}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:transparent}bw-glass{position:absolute;inset:var(--bw-glass-clearance);display:flex;flex-direction:column;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);background-color:#fff;font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;flex-basis:var(--bw-glass-header-height);flex-shrink:0;display:flex;align-items:center;gap:var(--bw-glass-header-gap);overflow:hidden;padding-inline:var(--bw-glass-header-gap);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color)}bw-glass-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}bw-glass-tab-container{align-self:flex-end;display:flex;gap:var(--bw-glass-header-gap)}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{margin-left:auto;display:flex;flex-shrink:0;gap:2px}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action:disabled:active{transform:scale(1)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--maximize:before{content:"☐"}bw-pane[maximized] .bw-glass-action--maximize:before{content:"□"}.bw-glass-action--minimize:before{content:"−"}bw-glass-content{display:block;box-sizing:border-box;overflow:auto;flex-grow:1}bw-sill{position:absolute;top:100%;margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));width:100%;display:flex;gap:var(--bw-sill-gap);box-sizing:border-box;padding-inline:var(--bw-glass-clearance)}.bw-minimized-glass{display:block;flex-basis:10%;height:10px;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer;background-color:var(--bw-glass-header-bg-color)}.bw-minimized-glass:hover{background-color:#fff}.bw-minimized-glass:active{transform:scale(.95)}
|
package/dist/react-bwin.d.ts
CHANGED
|
@@ -1,97 +1,111 @@
|
|
|
1
1
|
declare module 'react-bwin' {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
export const BUILTIN_ACTIONS: Action[]
|
|
3
|
+
export const Window: React.FC<WindowProps>
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
declare global {
|
|
7
|
-
|
|
7
|
+
type Position = 'left' | 'right' | 'top' | 'bottom'
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
type Action = {
|
|
10
|
+
label?: string
|
|
11
|
+
className?: string
|
|
12
|
+
onClick: (
|
|
13
|
+
event: React.MouseEvent<HTMLButtonElement>,
|
|
14
|
+
bwin: BinaryWindow
|
|
15
|
+
) => void
|
|
16
|
+
}
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
type Actions = undefined | null | Action[]
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
interface Sash {
|
|
21
|
+
id: string
|
|
22
|
+
position: Position
|
|
23
|
+
left: number
|
|
24
|
+
top: number
|
|
25
|
+
width: number
|
|
26
|
+
height: number
|
|
27
|
+
minWidth: number
|
|
28
|
+
minHeight: number
|
|
29
|
+
children: Sash[]
|
|
30
|
+
domNode?: HTMLElement
|
|
31
|
+
leftChild?: Sash
|
|
32
|
+
rightChild?: Sash
|
|
33
|
+
topChild?: Sash
|
|
34
|
+
bottomChild?: Sash
|
|
35
|
+
store?: {
|
|
36
|
+
actions?: Actions
|
|
37
|
+
droppable?: boolean
|
|
38
|
+
draggable?: boolean
|
|
39
|
+
title?: any
|
|
40
|
+
content?: any
|
|
41
|
+
resizable?: boolean
|
|
42
|
+
}
|
|
43
|
+
walk(callback: (sash: Sash) => void): void
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
46
|
+
type ConfigNode = {
|
|
47
|
+
id?: string
|
|
48
|
+
size?: number | string
|
|
49
|
+
position?: Position
|
|
50
|
+
title?: React.ReactNode
|
|
51
|
+
content?: React.ReactNode
|
|
52
|
+
actions?: Actions
|
|
53
|
+
children?: ConfigNode[]
|
|
54
|
+
draggable?: boolean
|
|
55
|
+
droppable?: boolean
|
|
56
|
+
}
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
58
|
+
type ConfigRoot = {
|
|
59
|
+
id?: string
|
|
60
|
+
width?: number
|
|
61
|
+
height?: number
|
|
62
|
+
fitContainer?: boolean
|
|
63
|
+
title?: React.ReactNode
|
|
64
|
+
content?: React.ReactNode
|
|
65
|
+
children?: ConfigNode[]
|
|
66
|
+
}
|
|
67
67
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
68
|
+
interface BinaryWindow {
|
|
69
|
+
new (settings: ConfigRoot): BinaryWindow
|
|
70
|
+
rootSash: Sash
|
|
71
|
+
windowElement: HTMLElement
|
|
72
|
+
containerElement: HTMLElement
|
|
73
|
+
sillElement: HTMLElement
|
|
74
|
+
mount(container: HTMLElement): void
|
|
75
|
+
enableFeatures(): void
|
|
76
|
+
fit(): void
|
|
77
|
+
addPane(targetPaneId: string, fields: PaneFields): Sash
|
|
78
|
+
removePane(targetPaneId: string): void
|
|
79
|
+
}
|
|
78
80
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
81
|
+
type WindowHandle = {
|
|
82
|
+
addPane: (targetPaneId: string, fields: PaneFields) => void
|
|
83
|
+
removePane: (targetPaneId: string) => void
|
|
84
|
+
fit: () => void
|
|
85
|
+
}
|
|
82
86
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
87
|
+
type WindowProps = Omit<ConfigRoot, 'children'> & {
|
|
88
|
+
panes?: ConfigNode[]
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
type PaneFields = {
|
|
92
|
+
size?: number | string
|
|
93
|
+
position?: Position
|
|
94
|
+
title?: React.ReactNode
|
|
95
|
+
content?: React.ReactNode
|
|
96
|
+
actions?: Actions
|
|
97
|
+
draggable?: boolean
|
|
98
|
+
droppable?: boolean
|
|
99
|
+
}
|
|
86
100
|
}
|
|
87
101
|
|
|
88
102
|
export {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
103
|
+
Position,
|
|
104
|
+
Action,
|
|
105
|
+
Actions,
|
|
106
|
+
Sash,
|
|
107
|
+
ConfigNode,
|
|
108
|
+
ConfigRoot,
|
|
109
|
+
BinaryWindow,
|
|
110
|
+
WindowProps,
|
|
97
111
|
}
|