dockview 4.13.0 → 5.0.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 +35 -13
- package/dist/cjs/dockview/headerActionsRenderer.js +1 -0
- package/dist/dockview.js +38 -11333
- package/dist/dockview.min.js +2 -2
- package/dist/dockview.min.js.map +1 -1
- package/dist/esm/dockview/headerActionsRenderer.js +1 -0
- package/dist/package/main.cjs.js +945 -0
- package/dist/package/main.cjs.min.js +7 -0
- package/dist/package/main.esm.min.mjs +7 -0
- package/dist/package/main.esm.mjs +930 -0
- package/dist/styles/dockview.css +63 -7
- package/package.json +70 -59
- package/dist/dockview.amd.js +0 -12238
- package/dist/dockview.amd.js.map +0 -1
- package/dist/dockview.amd.min.js +0 -8
- package/dist/dockview.amd.min.js.map +0 -1
- package/dist/dockview.amd.min.noStyle.js +0 -8
- package/dist/dockview.amd.min.noStyle.js.map +0 -1
- package/dist/dockview.amd.noStyle.js +0 -12208
- package/dist/dockview.amd.noStyle.js.map +0 -1
- package/dist/dockview.cjs.js +0 -12239
- package/dist/dockview.cjs.js.map +0 -1
- package/dist/dockview.esm.js +0 -12163
- package/dist/dockview.esm.js.map +0 -1
- package/dist/dockview.esm.min.js +0 -8
- package/dist/dockview.esm.min.js.map +0 -1
- package/dist/dockview.js.map +0 -1
- package/dist/dockview.min.noStyle.js +0 -8
- package/dist/dockview.min.noStyle.js.map +0 -1
- package/dist/dockview.noStyle.js +0 -12212
- package/dist/dockview.noStyle.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<h1>dockview</h1>
|
|
3
3
|
|
|
4
|
-
<p>
|
|
4
|
+
<p>React bindings for dockview — zero dependency layout manager supporting tabs, groups, grids and splitviews</p>
|
|
5
5
|
|
|
6
6
|
</div>
|
|
7
7
|
|
|
@@ -33,26 +33,48 @@ Please see the website: https://dockview.dev
|
|
|
33
33
|
- High test coverage
|
|
34
34
|
- Documentation website with live examples
|
|
35
35
|
- Transparent builds and Code Analysis
|
|
36
|
-
- Security at mind -
|
|
36
|
+
- Security at mind - verified publishing and builds through GitHub Actions
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
## Quick start
|
|
38
|
+
## Quick Start
|
|
41
39
|
|
|
42
|
-
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`.
|
|
40
|
+
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. Install from [npm](https://www.npmjs.com/package/dockview):
|
|
43
41
|
|
|
44
42
|
```
|
|
45
|
-
npm install
|
|
43
|
+
npm install dockview
|
|
46
44
|
```
|
|
47
45
|
|
|
48
|
-
|
|
46
|
+
Import the stylesheet:
|
|
49
47
|
|
|
50
48
|
```css
|
|
51
|
-
@import '
|
|
49
|
+
@import 'dockview/dist/styles/dockview.css';
|
|
52
50
|
```
|
|
53
51
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
```
|
|
57
|
-
|
|
52
|
+
Apply a theme and render the component:
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { DockviewReact } from 'dockview';
|
|
56
|
+
|
|
57
|
+
const components = {
|
|
58
|
+
myComponent: (props) => <div>Hello World</div>,
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
function App() {
|
|
62
|
+
return (
|
|
63
|
+
<div className="dockview-theme-dark" style={{ height: '400px' }}>
|
|
64
|
+
<DockviewReact
|
|
65
|
+
components={components}
|
|
66
|
+
onReady={(event) => {
|
|
67
|
+
event.api.addPanel({
|
|
68
|
+
id: 'panel_1',
|
|
69
|
+
component: 'myComponent',
|
|
70
|
+
});
|
|
71
|
+
}}
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
58
76
|
```
|
|
77
|
+
|
|
78
|
+
See the [documentation](https://dockview.dev) for full examples.
|
|
79
|
+
|
|
80
|
+
Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
|
|
@@ -46,6 +46,7 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
|
|
|
46
46
|
activePanel: this._group.model.activePanel,
|
|
47
47
|
isGroupActive: this._group.api.isActive,
|
|
48
48
|
group: this._group,
|
|
49
|
+
headerPosition: this._group.model.headerPosition,
|
|
49
50
|
});
|
|
50
51
|
};
|
|
51
52
|
ReactHeaderActionsRendererPart.prototype.dispose = function () {
|