@api-client/ui 0.0.10 → 0.0.11
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/.eslintrc +8 -1
- package/demo/index.html +3 -0
- package/demo/layout/index.html +91 -0
- package/demo/layout/index.ts +182 -0
- package/dist/elements/layout/SplitItem.d.ts +1 -9
- package/dist/elements/layout/SplitItem.d.ts.map +1 -1
- package/dist/elements/layout/SplitItem.js +27 -20
- package/dist/elements/layout/SplitItem.js.map +1 -1
- package/dist/elements/layout/SplitLayout.d.ts +16 -14
- package/dist/elements/layout/SplitLayout.d.ts.map +1 -1
- package/dist/elements/layout/SplitLayout.js +47 -42
- package/dist/elements/layout/SplitLayout.js.map +1 -1
- package/dist/elements/layout/SplitPanel.d.ts +7 -2
- package/dist/elements/layout/SplitPanel.d.ts.map +1 -1
- package/dist/elements/layout/SplitPanel.js +130 -52
- package/dist/elements/layout/SplitPanel.js.map +1 -1
- package/dist/elements/layout/SplitView.d.ts.map +1 -1
- package/dist/elements/layout/SplitView.js +18 -14
- package/dist/elements/layout/SplitView.js.map +1 -1
- package/dist/elements/layout/type.d.ts +3 -3
- package/dist/elements/layout/type.d.ts.map +1 -1
- package/dist/elements/layout/type.js.map +1 -1
- package/dist/pages/http-project/HttpClientCommands.d.ts.map +1 -1
- package/dist/pages/http-project/HttpClientCommands.js +28 -12
- package/dist/pages/http-project/HttpClientCommands.js.map +1 -1
- package/package.json +2 -1
- package/src/elements/layout/SplitItem.ts +29 -21
- package/src/elements/layout/SplitLayout.ts +53 -43
- package/src/elements/layout/SplitPanel.ts +140 -57
- package/src/elements/layout/SplitView.ts +18 -15
- package/src/elements/layout/type.ts +3 -4
- package/src/pages/http-project/HttpClientCommands.ts +28 -12
- package/test/elements/layout/SplitItem.test.ts +76 -75
- package/test/elements/layout/SplitLayoutManager.test.ts +70 -69
- package/test/elements/layout/SplitPanel.test.ts +10 -7
- package/tsconfig.eslint.json +8 -0
- package/web-test-runner.config.mjs +4 -1
- package/dist/define/layout/layout-panel.d.ts +0 -7
- package/dist/define/layout/layout-panel.d.ts.map +0 -1
- package/dist/define/layout/layout-panel.js +0 -3
- package/dist/define/layout/layout-panel.js.map +0 -1
- package/dist/elements/layout/LayoutManager.d.ts +0 -327
- package/dist/elements/layout/LayoutManager.d.ts.map +0 -1
- package/dist/elements/layout/LayoutManager.js +0 -747
- package/dist/elements/layout/LayoutManager.js.map +0 -1
- package/dist/elements/layout/LayoutPanelElement.d.ts +0 -62
- package/dist/elements/layout/LayoutPanelElement.d.ts.map +0 -1
- package/dist/elements/layout/LayoutPanelElement.js +0 -628
- package/dist/elements/layout/LayoutPanelElement.js.map +0 -1
- package/src/define/layout/layout-panel.ts +0 -9
- package/src/elements/layout/LayoutManager.ts +0 -930
- package/src/elements/layout/LayoutPanelElement.ts +0 -651
package/.eslintrc
CHANGED
|
@@ -21,13 +21,20 @@
|
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
"plugins": [
|
|
24
|
-
"@typescript-eslint"
|
|
24
|
+
"@typescript-eslint",
|
|
25
|
+
"deprecation"
|
|
25
26
|
],
|
|
27
|
+
"parserOptions": {
|
|
28
|
+
"ecmaVersion": 2022,
|
|
29
|
+
"sourceType": "module",
|
|
30
|
+
"project": "./tsconfig.eslint.json"
|
|
31
|
+
},
|
|
26
32
|
"rules": {
|
|
27
33
|
"no-unused-vars": "off",
|
|
28
34
|
"no-continue": "off",
|
|
29
35
|
"no-plusplus": "off",
|
|
30
36
|
"no-shadow": "off",
|
|
37
|
+
"deprecation/deprecation": "warn",
|
|
31
38
|
"@typescript-eslint/no-shadow": "error",
|
|
32
39
|
"@typescript-eslint/explicit-function-return-type": "error",
|
|
33
40
|
"class-methods-use-this": "off",
|
package/demo/index.html
CHANGED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
|
|
6
|
+
<!-- <meta http-equiv="Content-Security-Policy" content="default-src file: 'self' 'unsafe-inline'; script-src blob: web-module: 'self' 'unsafe-inline' https://apis.google.com; style-src 'self' themes: 'unsafe-inline' https://fonts.googleapis.com; font-src web-module: themes: 'self' https://fonts.gstatic.com; connect-src 'self' https: ws: wss: https://www.google-analytics.com https://app.advancedrestclient.com https://anypoint.mulesoft.com; img-src 'self' blob: data: https://exchange2-asset-manager-kprod.s3.amazonaws.com"> -->
|
|
7
|
+
<title>Split layout</title>
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
|
11
|
+
|
|
12
|
+
<link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
|
|
13
|
+
<link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
|
|
14
|
+
<style>
|
|
15
|
+
.demo #app {
|
|
16
|
+
height: 100vh;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
main {
|
|
23
|
+
flex: 1;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.demo-container {
|
|
29
|
+
display: flex;
|
|
30
|
+
flex: 1;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.data-control {
|
|
35
|
+
width: 33.333%;
|
|
36
|
+
padding-right: 20px;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.layout-view {
|
|
41
|
+
width: 66.666%;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
split-view {
|
|
47
|
+
flex: 1;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.empty-layout {
|
|
52
|
+
border-radius: 12px;
|
|
53
|
+
padding: 12px;
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
flex: 1;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.draggable-items {
|
|
61
|
+
margin: 0;
|
|
62
|
+
padding: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.draggable-items li {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
height: 56px;
|
|
69
|
+
border-radius: 12px;
|
|
70
|
+
background-color: var(--md-sys-color-primary-05a);
|
|
71
|
+
color: var(--md-sys-color-on-background);
|
|
72
|
+
border: 1px var(--md-sys-color-outline) solid;
|
|
73
|
+
margin: 8px 0;
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
padding: 0 16px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.draggable-items li:hover {
|
|
79
|
+
background-color: var(--md-sys-color-primary-08a);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.draggable-items li.dragged {
|
|
83
|
+
background-color: var(--md-sys-color-primary-13a);
|
|
84
|
+
}
|
|
85
|
+
</style>
|
|
86
|
+
</head>
|
|
87
|
+
<body>
|
|
88
|
+
<div id="app"></div>
|
|
89
|
+
<script type="module" src="index.ts"></script>
|
|
90
|
+
</body>
|
|
91
|
+
</html>
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { html, TemplateResult } from 'lit';
|
|
2
|
+
import { uuidV4 } from '@api-client/core/build/browser.js';
|
|
3
|
+
import { DemoPage } from '../../src/pages/demo/DemoPage.js';
|
|
4
|
+
import { reactive } from '../../src/lib/decorators.js';
|
|
5
|
+
import { ISplitLayout, SplitLayout } from "../../src/elements/layout/SplitLayout.js";
|
|
6
|
+
import { SplitItem } from '../../src/elements/layout/SplitItem.js';
|
|
7
|
+
import '../../src/define/ui/ui-button.js';
|
|
8
|
+
import { SplitCloseDirection } from '../../src/elements/layout/type.js';
|
|
9
|
+
|
|
10
|
+
const storeKey = 'api-client.demo.layout.state';
|
|
11
|
+
|
|
12
|
+
class ComponentDemoPage extends DemoPage {
|
|
13
|
+
componentName = 'Split layout';
|
|
14
|
+
|
|
15
|
+
@reactive() initialized = false;
|
|
16
|
+
|
|
17
|
+
protected layout = new SplitLayout({
|
|
18
|
+
dragTypes: ['text/kind', 'text/key'],
|
|
19
|
+
constrain: true,
|
|
20
|
+
stateCallback: this.handlerLayoutStore.bind(this),
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
constructor() {
|
|
24
|
+
super();
|
|
25
|
+
this.initialize();
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
async initialize(): Promise<void> {
|
|
29
|
+
this.layout.addEventListener('change', this.renderHandler.bind(this));
|
|
30
|
+
this.layout.addEventListener('nameitem', this.nameLayoutItemHandler.bind(this));
|
|
31
|
+
const state = this.restoreValues();
|
|
32
|
+
this.layout.initialize(state);
|
|
33
|
+
this.initialized = true;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
restoreValues(): ISplitLayout | undefined {
|
|
37
|
+
const data = localStorage.getItem(storeKey);
|
|
38
|
+
if (!data) {
|
|
39
|
+
return undefined;
|
|
40
|
+
}
|
|
41
|
+
try {
|
|
42
|
+
return JSON.parse(data) as ISplitLayout;
|
|
43
|
+
} catch (e) {
|
|
44
|
+
// ...
|
|
45
|
+
}
|
|
46
|
+
return undefined;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
protected async handlerLayoutStore(state: ISplitLayout): Promise<void> {
|
|
50
|
+
console.log('State change', state);
|
|
51
|
+
try {
|
|
52
|
+
localStorage.setItem(storeKey, JSON.stringify(state));
|
|
53
|
+
} catch (_) {
|
|
54
|
+
// ...
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
protected renderHandler(): void {
|
|
59
|
+
this.render();
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
protected nameLayoutItemHandler(event: Event): void {
|
|
63
|
+
const item = (event as CustomEvent).detail as SplitItem;
|
|
64
|
+
if (item.kind === 'data#itemA') {
|
|
65
|
+
item.label = 'Item A';
|
|
66
|
+
} else if (item.kind === 'data#itemB') {
|
|
67
|
+
item.label = 'Item B';
|
|
68
|
+
}
|
|
69
|
+
console.log('nameLayoutItemHandler', item);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
protected handleDragStart(e: DragEvent): void {
|
|
73
|
+
const item = e.currentTarget as HTMLElement;
|
|
74
|
+
const { key, kind } = item.dataset;
|
|
75
|
+
if (!key || !kind) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
const dt = e.dataTransfer!;
|
|
79
|
+
dt.effectAllowed = 'copyLink';
|
|
80
|
+
dt.setData('text/kind', kind);
|
|
81
|
+
dt.setData('text/key', key);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
protected handleAddItem(): void {
|
|
85
|
+
const key = uuidV4();
|
|
86
|
+
const kind = 'data#item';
|
|
87
|
+
this.layout.addItem({ key, kind, label: 'Added item' });
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
protected handleReset(): void {
|
|
91
|
+
this.layout.items = [];
|
|
92
|
+
this.layout.definitions = new Map();
|
|
93
|
+
this.layout.scheduleStore();
|
|
94
|
+
this.render();
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
protected handleClose2Left(): void {
|
|
98
|
+
const { layout } = this;
|
|
99
|
+
const panel = layout.activePanel;
|
|
100
|
+
if (!panel) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
if (!panel.selected) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
panel.removeRelative(panel.selected, SplitCloseDirection.left);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
protected handleClose2Right(): void {
|
|
110
|
+
const { layout } = this;
|
|
111
|
+
const panel = layout.activePanel;
|
|
112
|
+
if (!panel) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
if (!panel.selected) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
panel.removeRelative(panel.selected, SplitCloseDirection.right);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
contentTemplate(): TemplateResult {
|
|
122
|
+
if (!this.initialized) {
|
|
123
|
+
return html`<p>Loading demo page.</p>`;
|
|
124
|
+
}
|
|
125
|
+
return html`
|
|
126
|
+
<a href="../">Back</a>
|
|
127
|
+
<div class="demo-container">
|
|
128
|
+
${this.renderOptions()}
|
|
129
|
+
<section aria-label="demo-content" class="layout-view">
|
|
130
|
+
${this.renderLayout()}
|
|
131
|
+
</section>
|
|
132
|
+
</div>
|
|
133
|
+
`;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
protected renderLayout(): TemplateResult[] {
|
|
137
|
+
const { layout } = this;
|
|
138
|
+
if (layout.isEmpty()) {
|
|
139
|
+
return [this.renderEmptyLayout()];
|
|
140
|
+
}
|
|
141
|
+
return layout.render(this.renderItem.bind(this));
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
protected renderEmptyLayout(): TemplateResult {
|
|
145
|
+
return html`
|
|
146
|
+
<div class="empty-layout surface1">
|
|
147
|
+
<p class="body-large">The layout is empty.</p>
|
|
148
|
+
</div>
|
|
149
|
+
`;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
protected renderItem(item: SplitItem, visible: boolean): TemplateResult {
|
|
153
|
+
switch (item.kind) {
|
|
154
|
+
default: return html`<p ?hidden="${!visible}" data-key="${item.key}">Rendering: ${item.label} ${item.kind} ${item.key}</p>`;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
protected renderOptions(): TemplateResult {
|
|
159
|
+
return html`
|
|
160
|
+
<section aria-label="Demo control" class="data-control">
|
|
161
|
+
<h2 class="title-medium">Data control</h2>
|
|
162
|
+
<h3 class="title-small">Imperative API</h3>
|
|
163
|
+
<ui-button @click="${this.handleAddItem}" type="outlined">Add item to current</ui-button>
|
|
164
|
+
<ui-button @click="${this.handleReset}" type="outlined">Reset</ui-button>
|
|
165
|
+
<ui-button @click="${this.handleClose2Left}" type="outlined">Close to left (selected)</ui-button>
|
|
166
|
+
<ui-button @click="${this.handleClose2Right}" type="outlined">Close to right (selected)</ui-button>
|
|
167
|
+
|
|
168
|
+
<h3 class="title-small">Declarative API</h3>
|
|
169
|
+
<p>Items on the list can be dragged onto the layout.</p>
|
|
170
|
+
<nav aria-label="drag and drop items">
|
|
171
|
+
<ul class="draggable-items">
|
|
172
|
+
<li data-kind="data#itemA" data-key="item-a" draggable="true" @dragstart="${this.handleDragStart}">Item A</li>
|
|
173
|
+
<li data-kind="data#itemB" data-key="item-b" draggable="true" @dragstart="${this.handleDragStart}">Item B</li>
|
|
174
|
+
</ul>
|
|
175
|
+
</nav>
|
|
176
|
+
</section>
|
|
177
|
+
`;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
const instance = new ComponentDemoPage();
|
|
182
|
+
instance.render();
|
|
@@ -85,15 +85,7 @@ export declare class SplitItem implements ISplitItem {
|
|
|
85
85
|
/**
|
|
86
86
|
* @returns The parent of the item. Returns undefined when the item was removed from layout.
|
|
87
87
|
*/
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* Removes self from the layout
|
|
91
|
-
*/
|
|
92
|
-
remove(): void;
|
|
93
|
-
/**
|
|
94
|
-
* Sets the item active in the parent layout.
|
|
95
|
-
*/
|
|
96
|
-
setSelected(): void;
|
|
88
|
+
getParents(): SplitPanel[];
|
|
97
89
|
/**
|
|
98
90
|
* Updates the label and triggers side effects like layout and view update.
|
|
99
91
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitItem.d.ts","sourceRoot":"","sources":["../../../src/elements/layout/SplitItem.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,KAAK,cAAc,CAAC;AAEvF,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,qBAAa,SAAU,YAAW,UAAU;IA4BvB,OAAO,EAAE,WAAW;IA3BvC,IAAI,SAAM;IAEV,GAAG,SAAM;IAET,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,SAAM;IAEX,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,KAAK,SAAK;IAEV,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;gBACgB,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU;IAI3D,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IA0C7B,MAAM,IAAI,UAAU;
|
|
1
|
+
{"version":3,"file":"SplitItem.d.ts","sourceRoot":"","sources":["../../../src/elements/layout/SplitItem.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,KAAK,cAAc,CAAC;AAEvF,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,qBAAa,SAAU,YAAW,UAAU;IA4BvB,OAAO,EAAE,WAAW;IA3BvC,IAAI,SAAM;IAEV,GAAG,SAAM;IAET,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,SAAM;IAEX,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,KAAK,SAAK;IAEV,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;gBACgB,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU;IAI3D,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IA0C7B,MAAM,IAAI,UAAU;IA+CpB;;OAEG;IACH,UAAU,IAAI,UAAU,EAAE;IAsB1B;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,UAAO,GAAG,IAAI;IAW7C,UAAU,IAAI,IAAI;IAKlB,YAAY,IAAI,IAAI;CAGrB"}
|
|
@@ -99,28 +99,35 @@ export class SplitItem {
|
|
|
99
99
|
}
|
|
100
100
|
return result;
|
|
101
101
|
}
|
|
102
|
+
// /**
|
|
103
|
+
// * @returns The parent of the item. Returns undefined when the item was removed from layout.
|
|
104
|
+
// * @deprecated Use `getParents()` instead.
|
|
105
|
+
// */
|
|
106
|
+
// getParent(): SplitPanel | undefined {
|
|
107
|
+
// return this.manager.getParent(this.key);
|
|
108
|
+
// }
|
|
102
109
|
/**
|
|
103
110
|
* @returns The parent of the item. Returns undefined when the item was removed from layout.
|
|
104
111
|
*/
|
|
105
|
-
|
|
106
|
-
return this.manager.
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Removes self from the layout
|
|
110
|
-
*/
|
|
111
|
-
remove() {
|
|
112
|
-
this.manager.removeItem(this.key);
|
|
113
|
-
}
|
|
114
|
-
/**
|
|
115
|
-
* Sets the item active in the parent layout.
|
|
116
|
-
*/
|
|
117
|
-
setSelected() {
|
|
118
|
-
const parent = this.getParent();
|
|
119
|
-
if (parent) {
|
|
120
|
-
parent.selected = this.key;
|
|
121
|
-
this.notifyChange();
|
|
122
|
-
}
|
|
112
|
+
getParents() {
|
|
113
|
+
return this.manager.getParents(this.key);
|
|
123
114
|
}
|
|
115
|
+
// /**
|
|
116
|
+
// * Removes self from the layout. This removes the item from all panels.
|
|
117
|
+
// */
|
|
118
|
+
// remove(): void {
|
|
119
|
+
// this.manager.removeItem(this.key);
|
|
120
|
+
// }
|
|
121
|
+
// /**
|
|
122
|
+
// * Sets the item active in the parent layout.
|
|
123
|
+
// */
|
|
124
|
+
// setSelected(): void {
|
|
125
|
+
// const parent = this.getParent();
|
|
126
|
+
// if (parent) {
|
|
127
|
+
// parent.selected = this.key;
|
|
128
|
+
// this.notifyChange();
|
|
129
|
+
// }
|
|
130
|
+
// }
|
|
124
131
|
/**
|
|
125
132
|
* Updates the label and triggers side effects like layout and view update.
|
|
126
133
|
*
|
|
@@ -138,8 +145,8 @@ export class SplitItem {
|
|
|
138
145
|
}
|
|
139
146
|
}
|
|
140
147
|
updateView() {
|
|
141
|
-
const
|
|
142
|
-
panel
|
|
148
|
+
const panels = this.getParents();
|
|
149
|
+
panels.forEach(panel => panel.updateView());
|
|
143
150
|
}
|
|
144
151
|
notifyChange() {
|
|
145
152
|
this.manager.notifyChange();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitItem.js","sourceRoot":"","sources":["../../../src/elements/layout/SplitItem.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"SplitItem.js","sourceRoot":"","sources":["../../../src/elements/layout/SplitItem.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-cycle */\nimport { TemplateResult } from 'lit';\nimport { IconType } from '../../ui/icons/Icons.js';\nimport { SplitLayout } from './SplitLayout.js';\nimport { SplitPanel } from './SplitPanel.js';\n\nexport type ItemRenderCallback = (item: SplitItem, visible: boolean) => TemplateResult;\n\nexport interface ISplitItem {\n /**\n * The kind of opened item. This is to be used by the application\n * to recognize a kind of item to render. It is transparent to the layout system.\n */\n kind: string;\n /**\n * The key of the opened item. This is to be used by the application to identify \n * the rendered item. It is also used by the manager to identify the item.\n * It has to be unique key across the layout.\n * \n * Note, multiple panels can render the same item, however, they all share \n * the same item's state.\n */\n key: string;\n /**\n * Optional parent information that helps locating this object.\n * This is the item's parent, not related to a layout.\n */\n parent?: string;\n /**\n * The label to render in the layout tab.\n */\n label: string;\n /**\n * Whether the tab is pinned (cannot be closed or moved).\n */\n pinned?: boolean;\n /**\n * The tab index.\n */\n index?: number;\n /**\n * The icon defined in the internal library to render with the tab.\n */\n icon?: IconType;\n /**\n * A tab that is always present in the layout. The user can't close this tab.\n */\n persistent?: boolean;\n /**\n * A property to be used by the screen to indicate the property is being loaded\n * (from a data store, file, etc).\n */\n loading?: boolean;\n /**\n * Indicates the item has been changed and is out of sync with the data store.\n */\n isDirty?: boolean;\n\n /**\n * The layout value. Can be used to pass the object to render to the layout's render function.\n * This must be a serializable object as it will be passed to the `storeCallback`.\n * \n * This also can be used to temporary store unsaved changes to the object and sync the changes \n * on save action.\n */\n value?: unknown;\n}\n\nexport class SplitItem implements ISplitItem {\n kind = '';\n\n key = '';\n\n parent?: string;\n\n label = '';\n\n pinned?: boolean;\n\n index = 0;\n\n icon?: IconType;\n\n persistent?: boolean;\n\n loading?: boolean;\n\n isDirty?: boolean;\n\n value?: unknown;\n\n /**\n * @param manager A reference to the manager.\n * @param id The id of the item in the layout system. This value is never serialized.\n * @param schema A schema to restore the state of the panel.\n */\n constructor(public manager: SplitLayout, schema: ISplitItem) {\n this.new(schema);\n }\n\n new(schema: ISplitItem): void {\n this.kind = schema.kind;\n this.key = schema.key;\n this.label = schema.label;\n if (schema.parent) {\n this.parent = schema.parent;\n } else {\n this.parent = undefined;\n }\n if (schema.icon) {\n this.icon = schema.icon;\n } else {\n this.icon = undefined;\n }\n if (typeof schema.pinned === 'boolean') {\n this.pinned = schema.pinned;\n } else {\n this.pinned = undefined;\n }\n if (typeof schema.persistent === 'boolean') {\n this.persistent = schema.persistent;\n } else {\n this.persistent = undefined;\n }\n if (typeof schema.loading === 'boolean') {\n this.loading = schema.loading;\n } else {\n this.loading = undefined;\n }\n if (typeof schema.isDirty === 'boolean') {\n this.isDirty = schema.isDirty;\n } else {\n this.isDirty = undefined;\n }\n if (typeof schema.index === 'number') {\n this.index = schema.index;\n } else {\n this.index = 0;\n }\n this.value = schema.value;\n }\n\n toJSON(): ISplitItem {\n const result: ISplitItem = {\n key: this.key,\n kind: this.kind,\n label: this.label,\n };\n if (this.parent) {\n result.parent = this.parent;\n }\n if (this.icon) {\n result.icon = this.icon;\n }\n if (typeof this.pinned === 'boolean') {\n result.pinned = this.pinned;\n }\n if (typeof this.persistent === 'boolean') {\n result.persistent = this.persistent;\n }\n if (typeof this.loading === 'boolean') {\n result.loading = this.loading;\n }\n if (typeof this.isDirty === 'boolean') {\n result.isDirty = this.isDirty;\n }\n if (typeof this.index === 'number') {\n result.index = this.index;\n }\n if (this.value) {\n // try toJSON if any\n const typed = this.value as { toJSON: () => unknown };\n if (typeof typed.toJSON === 'function') {\n result.value = typed.toJSON();\n } else {\n result.value = this.value;\n }\n }\n return result;\n }\n\n // /**\n // * @returns The parent of the item. Returns undefined when the item was removed from layout.\n // * @deprecated Use `getParents()` instead.\n // */\n // getParent(): SplitPanel | undefined {\n // return this.manager.getParent(this.key);\n // }\n\n /**\n * @returns The parent of the item. Returns undefined when the item was removed from layout.\n */\n getParents(): SplitPanel[] {\n return this.manager.getParents(this.key);\n }\n\n // /**\n // * Removes self from the layout. This removes the item from all panels.\n // */\n // remove(): void {\n // this.manager.removeItem(this.key);\n // }\n\n // /**\n // * Sets the item active in the parent layout.\n // */\n // setSelected(): void {\n // const parent = this.getParent();\n // if (parent) {\n // parent.selected = this.key;\n // this.notifyChange();\n // }\n // }\n\n /**\n * Updates the label and triggers side effects like layout and view update.\n * \n * @param value The new value of the label. Empty values are ignored.\n * @param trigger Whether to trigger side effects (requesting a view update and notifying change)\n */\n setLabel(value: string, trigger = true): void {\n if (!value || this.label === value) {\n return;\n }\n this.label = value;\n if (trigger) {\n this.updateView();\n this.notifyChange();\n }\n }\n\n updateView(): void {\n const panels = this.getParents();\n panels.forEach(panel => panel.updateView());\n }\n\n notifyChange(): void {\n this.manager.notifyChange();\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { TemplateResult } from "lit";
|
|
|
2
2
|
import { ISplitItem, SplitItem } from "./SplitItem.js";
|
|
3
3
|
import { ISplitPanel, SplitPanel } from "./SplitPanel.js";
|
|
4
4
|
import SplitView from "./SplitView.js";
|
|
5
|
-
import { IPanelObject, LayoutType,
|
|
5
|
+
import { IPanelObject, LayoutType, SplitItemRenderCallback, SplitLayoutAddOptions, SplitLayoutInit, SplitPanelAddOptions } from "./type.js";
|
|
6
6
|
interface LayoutObject {
|
|
7
7
|
type: LayoutType;
|
|
8
8
|
value: SplitItem | SplitPanel;
|
|
@@ -26,6 +26,10 @@ export interface ISplitLayout {
|
|
|
26
26
|
*/
|
|
27
27
|
active?: string;
|
|
28
28
|
}
|
|
29
|
+
export interface ITabCloseDetail {
|
|
30
|
+
tab: string;
|
|
31
|
+
panel: string;
|
|
32
|
+
}
|
|
29
33
|
/**
|
|
30
34
|
* Split layout manager creates a view where the application can put "items" into
|
|
31
35
|
* and render them inside "panels". The application can create as many panels as needed.
|
|
@@ -144,11 +148,13 @@ export declare class SplitLayout extends EventTarget {
|
|
|
144
148
|
*/
|
|
145
149
|
findView(panelKey: string): SplitView | undefined;
|
|
146
150
|
/**
|
|
147
|
-
* Finds
|
|
148
|
-
*
|
|
149
|
-
*
|
|
151
|
+
* Finds parents an item or another panel is anchored to.
|
|
152
|
+
* An item can have multiple parents. A panel can only have a single parent.
|
|
153
|
+
*
|
|
154
|
+
* @param itemOrPanelKey The key of the panel or an item.
|
|
155
|
+
* @returns THe list of panels the item is added. It can only return up to 1 result when looking for a panel's parent.
|
|
150
156
|
*/
|
|
151
|
-
|
|
157
|
+
getParents(itemOrPanelKey: string): SplitPanel[];
|
|
152
158
|
/**
|
|
153
159
|
* Finds a panel by id.
|
|
154
160
|
*
|
|
@@ -182,7 +188,7 @@ export declare class SplitLayout extends EventTarget {
|
|
|
182
188
|
* Do not call this method from the outside of the layout manager logic.
|
|
183
189
|
* It is a way to communicate a tab was closed.
|
|
184
190
|
*/
|
|
185
|
-
notifyTabClose(itemKey: string): void;
|
|
191
|
+
notifyTabClose(itemKey: string, panel: string): void;
|
|
186
192
|
/**
|
|
187
193
|
* Requests an update on the view element.
|
|
188
194
|
*
|
|
@@ -219,16 +225,12 @@ export declare class SplitLayout extends EventTarget {
|
|
|
219
225
|
*/
|
|
220
226
|
addItem(item: ISplitItem): SplitItem;
|
|
221
227
|
/**
|
|
222
|
-
* Removes an item from layout.
|
|
228
|
+
* Removes an item from the layout. This means removing an item from all panels.
|
|
229
|
+
* If you want to remove an item from a specific panel then find the panel first and then call `removeItem()`.
|
|
230
|
+
*
|
|
223
231
|
* @param key The key of the item to remove.
|
|
224
232
|
*/
|
|
225
233
|
removeItem(key: string): void;
|
|
226
|
-
/**
|
|
227
|
-
* Removes other items relative to the `key` item.
|
|
228
|
-
* @param key The key of the item to perform a relative operation from.
|
|
229
|
-
* @param dir The direction to which close other items. Default to both directions leaving only the `key` item
|
|
230
|
-
*/
|
|
231
|
-
removeRelative(key: string, dir?: SplitCloseDirection): void;
|
|
232
234
|
/**
|
|
233
235
|
* Moves a tab between panels or inside a panel
|
|
234
236
|
*
|
|
@@ -237,7 +239,7 @@ export declare class SplitLayout extends EventTarget {
|
|
|
237
239
|
* @param itemKey The key of the item
|
|
238
240
|
* @param toIndex The index to which add the item. Default as the last.
|
|
239
241
|
*/
|
|
240
|
-
moveItem(fromPanelKey: string, toPanelKey: string, itemKey: string,
|
|
242
|
+
moveItem(fromPanelKey: string, toPanelKey: string, itemKey: string, opts?: SplitLayoutAddOptions): void;
|
|
241
243
|
/**
|
|
242
244
|
* Iterates over panels from the root.
|
|
243
245
|
* This iterates the panels structure in order defined in the `items` array on
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../../src/elements/layout/SplitLayout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../../src/elements/layout/SplitLayout.ts"],"names":[],"mappings":"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"}
|