react-bwin 0.3.3 → 0.3.5-dev.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 +28 -2
- package/dist/react-bwin.css +2 -1
- package/dist/react-bwin.d.ts +7 -1
- package/dist/react-bwin.js +1013 -1091
- package/dist/react-bwin.umd.js +4 -4
- package/package.json +11 -10
package/README.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
|
-
|
|
1
|
+
## React Binary Window
|
|
2
|
+
|
|
3
|
+
[](https://github.com/bhjsdev/react-bwin/actions/workflows/publish.yml)
|
|
4
|
+
[](https://www.npmjs.com/package/react-bwin)
|
|
2
5
|
|
|
3
6
|
A React-based tiling window manager featuring resizable panes, drag-and-drop, and more. Built on top of the [Binary Window](https://github.com/bhjsdev/bwin) library.
|
|
4
7
|
|
|
5
|
-
[
|
|
8
|
+
[](https://bhjsdev.github.io/bwin-docs)
|
|
9
|
+
|
|
10
|
+
[Documentation](https://bhjsdev.github.io/bwin-docs/react/get-started)
|
|
11
|
+
|
|
12
|
+
### Development
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm install
|
|
16
|
+
pnpm dev
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
This starts the dev server with internal test pages at `http://localhost:5173`.
|
|
20
|
+
|
|
21
|
+
### Examples
|
|
22
|
+
|
|
23
|
+
See the `examples/` directory for standalone apps. They depend on the library's built
|
|
24
|
+
output, so build it first, then run an example (e.g. `dashboard`):
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
pnpm install
|
|
28
|
+
pnpm build
|
|
29
|
+
cd examples/dashboard
|
|
30
|
+
pnpm dev
|
|
31
|
+
```
|
package/dist/react-bwin.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
bw-window{--bw-font-family:system-ui;--bw-font-size:14px;--bw-drop-area-bg-color:#0000000d;--bw-glass-clearance:2px;--bw-glass-border-radius:2px;--bw-glass-border-color:#1a1a1a;--bw-glass-border-color-disabled:#ccc;--bw-glass-bg-color-disabled:#f7f7f7;--bw-glass-header-height:30px;--bw-glass-header-gap:4px;--bw-glass-header-bg-color:#f7f7f7;--bw-sill-gap:6px}bw-window[theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bw-glass-border-color:#666;--bw-glass-border-color-disabled:#4d4d4d;--bw-glass-header-bg-color:#2e2e2e;--bw-glass-bg-color-disabled:#292929;--bw-drop-area-bg-color:#ffffff1a}bw-window[theme=dark] bw-pane,bw-window[theme=dark] bw-muntin{background-color:#242424}bw-window[theme=dark] bw-glass{color:#e6e6e6;background-color:#292929}bw-window[theme=dark] .bw-glass-tab:hover,bw-window[theme=dark] .bw-glass-action:hover,bw-window[theme=dark] .bw-minimized-glass:hover{background-color:#424242}.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{box-sizing:border-box;display:block;position:absolute}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{box-sizing:border-box;background-color:#f2f2f2;position:absolute;overflow:auto}bw-pane[drop-area]:before{content:"";background-color:var(--bw-drop-area-bg-color);position:absolute}bw-pane[drop-area=top]:before{height:50%;top:0;left:0;right:0}bw-pane[drop-area=right]:before{width:50%;top:0;bottom:0;right:0}bw-pane[drop-area=bottom]:before{height:50%;bottom:0;left:0;right:0}bw-pane[drop-area=left]:before{width:50%;top:0;bottom:0;left:0}bw-pane[drop-area=center]:before{inset:0}bw-muntin{box-sizing:border-box;background-color:#fff;position:absolute}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:#0000}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:#0000}bw-glass{inset:var(--bw-glass-clearance);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box;background-color:#fff;flex-direction:column;display:flex;position:absolute}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;flex-basis:var(--bw-glass-header-height);align-items:center;gap:var(--bw-glass-header-gap);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);flex-shrink:0;display:flex;overflow:hidden}bw-glass-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}bw-glass-tab-container{align-self:flex-end;gap:var(--bw-glass-header-gap);display:flex}.bw-glass-tab{font-family:var(--bw-font-family);border: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);cursor:pointer;border-bottom:none}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{flex-shrink:0;gap:2px;margin-left:auto;display:flex}.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{box-sizing:border-box;flex-grow:1;display:block;overflow:auto}bw-sill{margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));gap:var(--bw-sill-gap);box-sizing:border-box;width:100%;padding-inline:var(--bw-glass-clearance);display:flex;position:absolute;top:100%}.bw-minimized-glass{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);flex-basis:10%;height:10px;display:block}.bw-minimized-glass:hover{background-color:#fff}.bw-minimized-glass:active{transform:scale(.95)}
|
|
2
|
+
/*$vite$:1*/
|
package/dist/react-bwin.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
declare module 'react-bwin' {
|
|
2
2
|
export const BUILTIN_ACTIONS: Action[]
|
|
3
|
-
export const Window: React.
|
|
3
|
+
export const Window: React.ForwardRefExoticComponent<
|
|
4
|
+
WindowProps & React.RefAttributes<WindowHandle>
|
|
5
|
+
>
|
|
4
6
|
}
|
|
5
7
|
|
|
6
8
|
declare global {
|
|
@@ -60,6 +62,7 @@ declare global {
|
|
|
60
62
|
width?: number
|
|
61
63
|
height?: number
|
|
62
64
|
fitContainer?: boolean
|
|
65
|
+
theme?: string
|
|
63
66
|
title?: React.ReactNode
|
|
64
67
|
content?: React.ReactNode
|
|
65
68
|
children?: ConfigNode[]
|
|
@@ -71,17 +74,20 @@ declare global {
|
|
|
71
74
|
windowElement: HTMLElement
|
|
72
75
|
containerElement: HTMLElement
|
|
73
76
|
sillElement: HTMLElement
|
|
77
|
+
theme: string
|
|
74
78
|
mount(container: HTMLElement): void
|
|
75
79
|
enableFeatures(): void
|
|
76
80
|
fit(): void
|
|
77
81
|
addPane(targetPaneId: string, fields: PaneFields): Sash
|
|
78
82
|
removePane(targetPaneId: string): void
|
|
83
|
+
setTheme(theme: string): void
|
|
79
84
|
}
|
|
80
85
|
|
|
81
86
|
type WindowHandle = {
|
|
82
87
|
addPane: (targetPaneId: string, fields: PaneFields) => void
|
|
83
88
|
removePane: (targetPaneId: string) => void
|
|
84
89
|
fit: () => void
|
|
90
|
+
setTheme: (theme: string) => void
|
|
85
91
|
}
|
|
86
92
|
|
|
87
93
|
type WindowProps = Omit<ConfigRoot, 'children'> & {
|