dockview-angular 0.0.0-beta-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.
Files changed (33) hide show
  1. package/README.md +56 -0
  2. package/dist/cjs/index.d.ts +1 -0
  3. package/dist/cjs/index.js +17 -0
  4. package/dist/cjs/utils.d.ts +49 -0
  5. package/dist/cjs/utils.js +141 -0
  6. package/dist/dockview-angular.amd.js +9268 -0
  7. package/dist/dockview-angular.amd.js.map +1 -0
  8. package/dist/dockview-angular.amd.min.js +8 -0
  9. package/dist/dockview-angular.amd.min.js.map +1 -0
  10. package/dist/dockview-angular.amd.min.noStyle.js +8 -0
  11. package/dist/dockview-angular.amd.min.noStyle.js.map +1 -0
  12. package/dist/dockview-angular.amd.noStyle.js +9238 -0
  13. package/dist/dockview-angular.amd.noStyle.js.map +1 -0
  14. package/dist/dockview-angular.cjs.js +9266 -0
  15. package/dist/dockview-angular.cjs.js.map +1 -0
  16. package/dist/dockview-angular.esm.js +9215 -0
  17. package/dist/dockview-angular.esm.js.map +1 -0
  18. package/dist/dockview-angular.esm.min.js +8 -0
  19. package/dist/dockview-angular.esm.min.js.map +1 -0
  20. package/dist/dockview-angular.js +9272 -0
  21. package/dist/dockview-angular.js.map +1 -0
  22. package/dist/dockview-angular.min.js +8 -0
  23. package/dist/dockview-angular.min.js.map +1 -0
  24. package/dist/dockview-angular.min.noStyle.js +8 -0
  25. package/dist/dockview-angular.min.noStyle.js.map +1 -0
  26. package/dist/dockview-angular.noStyle.js +9242 -0
  27. package/dist/dockview-angular.noStyle.js.map +1 -0
  28. package/dist/esm/index.d.ts +1 -0
  29. package/dist/esm/index.js +1 -0
  30. package/dist/esm/utils.d.ts +49 -0
  31. package/dist/esm/utils.js +119 -0
  32. package/dist/styles/dockview.css +0 -0
  33. package/package.json +59 -0
package/README.md ADDED
@@ -0,0 +1,56 @@
1
+ <div align="center">
2
+ <h1>dockview</h1>
3
+
4
+ <p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
5
+
6
+ </div>
7
+
8
+ ---
9
+
10
+ [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
11
+ [![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview)
12
+ [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
13
+ [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
14
+ [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
15
+ [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
16
+
17
+ ##
18
+
19
+ Please see the website: https://dockview.dev
20
+
21
+ ## Features
22
+
23
+ - Serialization / deserialization with full layout management
24
+ - Support for split-views, grid-views and 'dockable' views
25
+ - Themeable and customizable
26
+ - Tab and Group docking / Drag n' Drop
27
+ - Popout Windows
28
+ - Floating Groups
29
+ - Extensive API
30
+ - Supports Shadow DOMs
31
+ - High test coverage
32
+ - Documentation website with live examples
33
+ - Transparent builds and Code Analysis
34
+ - Security at mind - verifed publishing and builds through GitHub Actions
35
+
36
+ Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
37
+
38
+ ## Quick start
39
+
40
+ Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).
41
+
42
+ ```
43
+ npm install --save dockview
44
+ ```
45
+
46
+ Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
47
+
48
+ ```css
49
+ @import '~dockview/dist/styles/dockview.css';
50
+ ```
51
+
52
+ You should also attach a dockview theme to an element containing your components. For example:
53
+
54
+ ```html
55
+ <body classname="dockview-theme-dark"></body>
56
+ ```
package/dist/cjs/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from 'dockview-core';
package/dist/cjs/index.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("dockview-core"), exports);
package/dist/cjs/utils.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ import type { DockviewGroupPanel, GroupPanelPartInitParameters, IContentRenderer, ITabRenderer, IWatermarkRenderer, PanelUpdateEvent, Parameters, WatermarkRendererInitParameters } from 'dockview-core';
2
+ import { type ComponentOptionsBase } from 'vue';
3
+ export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
4
+ /**
5
+ * TODO List
6
+ *
7
+ * 1. handle vue context-ish stuff (appContext? provides?)
8
+ *
9
+ *
10
+ *
11
+ * @see https://vuejs.org/api/render-function.html#clonevnode
12
+ * @see https://vuejs.org/api/render-function.html#mergeprops
13
+ */
14
+ export declare function mountVueComponent(component: ComponentInterface, props: any, element: HTMLElement): {
15
+ update: (newProps: any) => void;
16
+ dispose: () => void;
17
+ };
18
+ export declare class VueContentRenderer implements IContentRenderer {
19
+ private readonly component;
20
+ private _element;
21
+ private _renderDisposable;
22
+ get element(): HTMLElement;
23
+ constructor(component: ComponentInterface);
24
+ init(parameters: GroupPanelPartInitParameters): void;
25
+ update(event: PanelUpdateEvent<Parameters>): void;
26
+ focus(): void;
27
+ dispose(): void;
28
+ }
29
+ export declare class VueTabRenderer implements ITabRenderer {
30
+ private readonly component;
31
+ private _element;
32
+ private _renderDisposable;
33
+ get element(): HTMLElement;
34
+ constructor(component: ComponentInterface);
35
+ init(parameters: GroupPanelPartInitParameters): void;
36
+ update(event: PanelUpdateEvent<Parameters>): void;
37
+ dispose(): void;
38
+ }
39
+ export declare class VueWatermarkRenderer implements IWatermarkRenderer {
40
+ private readonly component;
41
+ private _element;
42
+ private _renderDisposable;
43
+ get element(): HTMLElement;
44
+ constructor(component: ComponentInterface);
45
+ init(parameters: WatermarkRendererInitParameters): void;
46
+ updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
47
+ update(event: PanelUpdateEvent<Parameters>): void;
48
+ dispose(): void;
49
+ }
package/dist/cjs/utils.js ADDED
@@ -0,0 +1,141 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.VueWatermarkRenderer = exports.VueTabRenderer = exports.VueContentRenderer = exports.mountVueComponent = void 0;
4
+ var vue_1 = require("vue");
5
+ /**
6
+ * TODO List
7
+ *
8
+ * 1. handle vue context-ish stuff (appContext? provides?)
9
+ *
10
+ *
11
+ *
12
+ * @see https://vuejs.org/api/render-function.html#clonevnode
13
+ * @see https://vuejs.org/api/render-function.html#mergeprops
14
+ */
15
+ function mountVueComponent(component, props, element) {
16
+ var vNode = (0, vue_1.createVNode)(component, props);
17
+ (0, vue_1.render)(vNode, element);
18
+ return {
19
+ update: function (newProps) {
20
+ vNode = (0, vue_1.cloneVNode)(vNode, (0, vue_1.mergeProps)(props, newProps));
21
+ (0, vue_1.render)(vNode, element);
22
+ },
23
+ dispose: function () {
24
+ (0, vue_1.render)(null, element);
25
+ }
26
+ };
27
+ }
28
+ exports.mountVueComponent = mountVueComponent;
29
+ var VueContentRenderer = /** @class */ (function () {
30
+ function VueContentRenderer(component) {
31
+ this.component = component;
32
+ this._element = document.createElement('div');
33
+ this.element.className = 'dv-vue-part';
34
+ }
35
+ Object.defineProperty(VueContentRenderer.prototype, "element", {
36
+ get: function () {
37
+ return this._element;
38
+ },
39
+ enumerable: false,
40
+ configurable: true
41
+ });
42
+ VueContentRenderer.prototype.init = function (parameters) {
43
+ var _a;
44
+ var props = {
45
+ params: parameters.params,
46
+ api: parameters.api,
47
+ containerApi: parameters.containerApi
48
+ };
49
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
50
+ this._renderDisposable = mountVueComponent(this.component, props, this.element);
51
+ };
52
+ VueContentRenderer.prototype.update = function (event) {
53
+ var _a;
54
+ var params = event.params;
55
+ // TODO: handle prop updates somehow?
56
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
57
+ };
58
+ VueContentRenderer.prototype.focus = function () {
59
+ // TODO: make optional on interface
60
+ };
61
+ VueContentRenderer.prototype.dispose = function () {
62
+ var _a;
63
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
64
+ };
65
+ return VueContentRenderer;
66
+ }());
67
+ exports.VueContentRenderer = VueContentRenderer;
68
+ var VueTabRenderer = /** @class */ (function () {
69
+ function VueTabRenderer(component) {
70
+ this.component = component;
71
+ this._element = document.createElement('div');
72
+ this.element.className = 'dv-vue-part';
73
+ }
74
+ Object.defineProperty(VueTabRenderer.prototype, "element", {
75
+ get: function () {
76
+ return this._element;
77
+ },
78
+ enumerable: false,
79
+ configurable: true
80
+ });
81
+ VueTabRenderer.prototype.init = function (parameters) {
82
+ var _a;
83
+ var props = {
84
+ params: parameters.params,
85
+ api: parameters.api,
86
+ containerApi: parameters.containerApi
87
+ };
88
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
89
+ this._renderDisposable = mountVueComponent(this.component, props, this.element);
90
+ };
91
+ VueTabRenderer.prototype.update = function (event) {
92
+ var _a;
93
+ var params = event.params;
94
+ // TODO: handle prop updates somehow?
95
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
96
+ };
97
+ VueTabRenderer.prototype.dispose = function () {
98
+ var _a;
99
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
100
+ };
101
+ return VueTabRenderer;
102
+ }());
103
+ exports.VueTabRenderer = VueTabRenderer;
104
+ var VueWatermarkRenderer = /** @class */ (function () {
105
+ function VueWatermarkRenderer(component) {
106
+ this.component = component;
107
+ this._element = document.createElement('div');
108
+ this.element.className = 'dv-vue-part';
109
+ }
110
+ Object.defineProperty(VueWatermarkRenderer.prototype, "element", {
111
+ get: function () {
112
+ return this._element;
113
+ },
114
+ enumerable: false,
115
+ configurable: true
116
+ });
117
+ VueWatermarkRenderer.prototype.init = function (parameters) {
118
+ var _a;
119
+ var props = {
120
+ group: parameters.group,
121
+ containerApi: parameters.containerApi
122
+ };
123
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
124
+ this._renderDisposable = mountVueComponent(this.component, props, this.element);
125
+ };
126
+ VueWatermarkRenderer.prototype.updateParentGroup = function (group, visible) {
127
+ // TODO: make optional on interface
128
+ };
129
+ VueWatermarkRenderer.prototype.update = function (event) {
130
+ var _a;
131
+ var params = event.params;
132
+ // TODO: handle prop updates somehow?
133
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
134
+ };
135
+ VueWatermarkRenderer.prototype.dispose = function () {
136
+ var _a;
137
+ (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
138
+ };
139
+ return VueWatermarkRenderer;
140
+ }());
141
+ exports.VueWatermarkRenderer = VueWatermarkRenderer;