@window-splitter/web-component 1.0.1
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/.storybook/main.js +27 -0
- package/.storybook/preview.css +23 -0
- package/.storybook/preview.js +15 -0
- package/.tshy/build.json +8 -0
- package/.tshy/commonjs.json +19 -0
- package/.tshy/esm.json +18 -0
- package/.turbo/turbo-build.log +5 -0
- package/CHANGELOG.md +24 -0
- package/LICENSE +7 -0
- package/README.md +59 -0
- package/dist/commonjs/index.d.ts +77 -0
- package/dist/commonjs/index.d.ts.map +1 -0
- package/dist/commonjs/index.js +533 -0
- package/dist/commonjs/index.js.map +1 -0
- package/dist/commonjs/package.json +3 -0
- package/dist/esm/index.d.ts +77 -0
- package/dist/esm/index.d.ts.map +1 -0
- package/dist/esm/index.js +527 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/package.json +3 -0
- package/eslint.config.mjs +10 -0
- package/package.json +84 -0
- package/src/WebComponentWindowSplitter.stories.ts +873 -0
- package/src/WebComponentWindowSplitter.test.ts +299 -0
- package/src/__snapshots__/WebComponentWindowSplitter.test.ts.snap +54 -0
- package/src/index.ts +660 -0
- package/tsconfig.json +8 -0
- package/vitest.config.js +17 -0
|
@@ -0,0 +1,873 @@
|
|
|
1
|
+
import { css, html, LitElement } from "lit";
|
|
2
|
+
import { spring } from "framer-motion";
|
|
3
|
+
import { when } from "lit/directives/when.js";
|
|
4
|
+
|
|
5
|
+
import ".";
|
|
6
|
+
import { Panel, PanelGroup } from "./index.js";
|
|
7
|
+
import { property } from "lit/decorators.js";
|
|
8
|
+
|
|
9
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
10
|
+
export default {
|
|
11
|
+
title: "WindowSplitter/WebComponent",
|
|
12
|
+
component: "window-splitter",
|
|
13
|
+
subcomponents: {
|
|
14
|
+
"window-panel": "window-panel",
|
|
15
|
+
"window-panel-resizer": "window-panel-resizer",
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
20
|
+
export const Simple = {
|
|
21
|
+
render: () => html`
|
|
22
|
+
<window-splitter class="panel-group">
|
|
23
|
+
<window-panel class="panel">Panel 1</window-panel>
|
|
24
|
+
<window-panel-resizer
|
|
25
|
+
size="10px"
|
|
26
|
+
class="panel-resizer"
|
|
27
|
+
></window-panel-resizer>
|
|
28
|
+
<window-panel min="100px" class="panel">Panel 2</window-panel>
|
|
29
|
+
</window-splitter>
|
|
30
|
+
`,
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const Autosave = {
|
|
34
|
+
render: () => html`
|
|
35
|
+
<window-splitter
|
|
36
|
+
autosaveId="autosave-example-web-component"
|
|
37
|
+
class="panel-group"
|
|
38
|
+
>
|
|
39
|
+
<window-panel class="panel" id="1">Panel 1</window-panel>
|
|
40
|
+
<window-panel-resizer
|
|
41
|
+
size="10px"
|
|
42
|
+
class="panel-resizer"
|
|
43
|
+
></window-panel-resizer>
|
|
44
|
+
<window-panel class="panel" id="2">Panel 2</window-panel>
|
|
45
|
+
</window-splitter>
|
|
46
|
+
`,
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export const AutosaveCookie = {
|
|
50
|
+
render: ({ snapshot }: { snapshot?: string } = {}) => {
|
|
51
|
+
return html`
|
|
52
|
+
<window-splitter
|
|
53
|
+
autosaveId="autosave-cookie-web-component"
|
|
54
|
+
autosaveStrategy="cookie"
|
|
55
|
+
class="panel-group"
|
|
56
|
+
style="height: 200px"
|
|
57
|
+
.snapshot=${snapshot}
|
|
58
|
+
>
|
|
59
|
+
<window-panel class="panel" id="1">Panel 1</window-panel>
|
|
60
|
+
<window-panel-resizer
|
|
61
|
+
size="10px"
|
|
62
|
+
class="panel-resizer"
|
|
63
|
+
id="resizer-1"
|
|
64
|
+
></window-panel-resizer>
|
|
65
|
+
<window-panel class="panel" id="2">Panel 2</window-panel>
|
|
66
|
+
</window-splitter>
|
|
67
|
+
`;
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export const AutosaveCollapsible = {
|
|
72
|
+
render: ({
|
|
73
|
+
onCollapseChange,
|
|
74
|
+
}: {
|
|
75
|
+
onCollapseChange: (e: boolean) => void;
|
|
76
|
+
}) => html`
|
|
77
|
+
<window-splitter
|
|
78
|
+
autosaveId="autosave-example-web-component-2"
|
|
79
|
+
class="panel-group"
|
|
80
|
+
>
|
|
81
|
+
<window-panel
|
|
82
|
+
class="panel"
|
|
83
|
+
id="1"
|
|
84
|
+
collapsible
|
|
85
|
+
collapsedSize="100px"
|
|
86
|
+
min="140px"
|
|
87
|
+
.onCollapseChange=${(e: boolean) => {
|
|
88
|
+
// eslint-disable-next-line no-console
|
|
89
|
+
console.log(e);
|
|
90
|
+
onCollapseChange(e);
|
|
91
|
+
}}
|
|
92
|
+
>
|
|
93
|
+
Panel 1
|
|
94
|
+
</window-panel>
|
|
95
|
+
<window-panel-resizer
|
|
96
|
+
size="10px"
|
|
97
|
+
class="panel-resizer"
|
|
98
|
+
id="resizer-1"
|
|
99
|
+
></window-panel-resizer>
|
|
100
|
+
<window-panel class="panel" id="2">Panel 2</window-panel>
|
|
101
|
+
</window-splitter>
|
|
102
|
+
`,
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
export const DynamicConstraints = {
|
|
106
|
+
render: () => html`
|
|
107
|
+
<window-splitter
|
|
108
|
+
class="panel-group"
|
|
109
|
+
id="panel-group"
|
|
110
|
+
style="min-width: 1000px"
|
|
111
|
+
>
|
|
112
|
+
<window-panel class="panel" default="100px" min="100px" id="panel-1">
|
|
113
|
+
Panel 1
|
|
114
|
+
</window-panel>
|
|
115
|
+
<window-panel-resizer
|
|
116
|
+
size="10px"
|
|
117
|
+
class="panel-resizer"
|
|
118
|
+
></window-panel-resizer>
|
|
119
|
+
<window-panel class="panel" min="100px">Panel 2</window-panel>
|
|
120
|
+
<window-panel-resizer
|
|
121
|
+
size="10px"
|
|
122
|
+
class="panel-resizer"
|
|
123
|
+
></window-panel-resizer>
|
|
124
|
+
<window-panel class="panel" min="400px" max="700px" id="panel-3">
|
|
125
|
+
Panel 3
|
|
126
|
+
</window-panel>
|
|
127
|
+
</window-splitter>
|
|
128
|
+
|
|
129
|
+
<button
|
|
130
|
+
@click=${() => {
|
|
131
|
+
const panel1 = document.getElementById("panel-1") as Panel;
|
|
132
|
+
const panel3 = document.getElementById("panel-3") as Panel;
|
|
133
|
+
const group = document.getElementById("panel-group") as PanelGroup;
|
|
134
|
+
const isCustomOn = group?.getAttribute("data-custom-on");
|
|
135
|
+
|
|
136
|
+
if (isCustomOn) {
|
|
137
|
+
panel1.min = "100px";
|
|
138
|
+
panel3.min = "400px";
|
|
139
|
+
panel3.max = "700px";
|
|
140
|
+
group.removeAttribute("data-custom-on");
|
|
141
|
+
} else {
|
|
142
|
+
panel1.min = "200px";
|
|
143
|
+
panel3.min = "100px";
|
|
144
|
+
panel3.max = "300px";
|
|
145
|
+
group.setAttribute("data-custom-on", "true");
|
|
146
|
+
}
|
|
147
|
+
}}
|
|
148
|
+
>
|
|
149
|
+
Toggle Custom
|
|
150
|
+
</button>
|
|
151
|
+
`,
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export const SimpleMin = {
|
|
155
|
+
render: () => html`
|
|
156
|
+
<window-splitter class="panel-group">
|
|
157
|
+
<window-panel min="100px" class="panel">Panel 1</window-panel>
|
|
158
|
+
<window-panel-resizer
|
|
159
|
+
size="10px"
|
|
160
|
+
class="panel-resizer"
|
|
161
|
+
></window-panel-resizer>
|
|
162
|
+
<window-panel min="100px" class="panel">Panel 2</window-panel>
|
|
163
|
+
<window-panel-resizer
|
|
164
|
+
size="10px"
|
|
165
|
+
class="panel-resizer"
|
|
166
|
+
></window-panel-resizer>
|
|
167
|
+
<window-panel min="100px" class="panel">Panel 3</window-panel>
|
|
168
|
+
</window-splitter>
|
|
169
|
+
`,
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
export const SimpleMinMax = {
|
|
173
|
+
render: () => html`
|
|
174
|
+
<window-splitter class="panel-group">
|
|
175
|
+
<window-panel min="100px" max="200px" class="panel">Panel 1</window-panel>
|
|
176
|
+
<window-panel-resizer
|
|
177
|
+
size="10px"
|
|
178
|
+
class="panel-resizer"
|
|
179
|
+
></window-panel-resizer>
|
|
180
|
+
<window-panel min="100px" class="panel">Panel 2</window-panel>
|
|
181
|
+
<window-panel-resizer
|
|
182
|
+
size="20px"
|
|
183
|
+
class="panel-resizer"
|
|
184
|
+
></window-panel-resizer>
|
|
185
|
+
<window-panel min="100px" class="panel">Panel 3</window-panel>
|
|
186
|
+
</window-splitter>
|
|
187
|
+
`,
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
export const SimpleConstraints = {
|
|
191
|
+
render: () => html`
|
|
192
|
+
<window-splitter class="panel-group">
|
|
193
|
+
<window-panel min="100px" max="50%" class="panel">Panel 1</window-panel>
|
|
194
|
+
<window-panel-resizer
|
|
195
|
+
size="10px"
|
|
196
|
+
class="panel-resizer"
|
|
197
|
+
></window-panel-resizer>
|
|
198
|
+
<window-panel class="panel">Panel 2</window-panel>
|
|
199
|
+
</window-splitter>
|
|
200
|
+
`,
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
export const HorizontalLayout = {
|
|
204
|
+
render: () => html`
|
|
205
|
+
<window-splitter class="panel-group" orientation="horizontal">
|
|
206
|
+
<window-panel default="30%" min="20%" class="panel">Left</window-panel>
|
|
207
|
+
<window-panel-resizer
|
|
208
|
+
size="10px"
|
|
209
|
+
class="panel-resizer"
|
|
210
|
+
></window-panel-resizer>
|
|
211
|
+
<window-panel min="20%" class="panel">Middle</window-panel>
|
|
212
|
+
<window-panel-resizer
|
|
213
|
+
size="10px"
|
|
214
|
+
class="panel-resizer"
|
|
215
|
+
></window-panel-resizer>
|
|
216
|
+
<window-panel default="30%" min="20%" class="panel">Panel 3</window-panel>
|
|
217
|
+
</window-splitter>
|
|
218
|
+
`,
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
export const VerticalLayout = {
|
|
222
|
+
render: () => html`
|
|
223
|
+
<window-splitter
|
|
224
|
+
class="panel-group"
|
|
225
|
+
orientation="vertical"
|
|
226
|
+
style="height: 322px"
|
|
227
|
+
>
|
|
228
|
+
<window-panel default="30%" min="20%" class="panel">top</window-panel>
|
|
229
|
+
<window-panel-resizer
|
|
230
|
+
size="10px"
|
|
231
|
+
class="panel-resizer"
|
|
232
|
+
></window-panel-resizer>
|
|
233
|
+
<window-panel min="20%" class="panel">middle</window-panel>
|
|
234
|
+
<window-panel-resizer
|
|
235
|
+
size="10px"
|
|
236
|
+
class="panel-resizer"
|
|
237
|
+
></window-panel-resizer>
|
|
238
|
+
<window-panel default="30%" min="20%" class="panel">bottom</window-panel>
|
|
239
|
+
</window-splitter>
|
|
240
|
+
`,
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
export const VerticalLayout2 = {
|
|
244
|
+
render: () => html`
|
|
245
|
+
<window-splitter
|
|
246
|
+
class="panel-group"
|
|
247
|
+
orientation="vertical"
|
|
248
|
+
style="height: calc(100vh - 100px)"
|
|
249
|
+
>
|
|
250
|
+
<window-panel default="200px" min="200px" class="panel">top</window-panel>
|
|
251
|
+
<window-panel-resizer
|
|
252
|
+
size="10px"
|
|
253
|
+
class="panel-resizer"
|
|
254
|
+
></window-panel-resizer>
|
|
255
|
+
<window-panel
|
|
256
|
+
min="200px"
|
|
257
|
+
collapsedSize="60px"
|
|
258
|
+
defaultCollapsed
|
|
259
|
+
collapsible
|
|
260
|
+
class="panel"
|
|
261
|
+
>
|
|
262
|
+
middle
|
|
263
|
+
</window-panel>
|
|
264
|
+
</window-splitter>
|
|
265
|
+
`,
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
export const NestedGroups = {
|
|
269
|
+
render: () => html`
|
|
270
|
+
<window-splitter
|
|
271
|
+
class="panel-group"
|
|
272
|
+
orientation="horizontal"
|
|
273
|
+
style="border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 12px; height: 400px"
|
|
274
|
+
>
|
|
275
|
+
<window-panel min="10%">1</window-panel>
|
|
276
|
+
<window-panel-resizer
|
|
277
|
+
size="10px"
|
|
278
|
+
class="panel-resizer"
|
|
279
|
+
></window-panel-resizer>
|
|
280
|
+
<window-panel min="10%">
|
|
281
|
+
<window-splitter orientation="vertical">
|
|
282
|
+
<window-panel min="10%">2-1</window-panel>
|
|
283
|
+
<window-panel-resizer
|
|
284
|
+
size="10px"
|
|
285
|
+
class="panel-resizer"
|
|
286
|
+
></window-panel-resizer>
|
|
287
|
+
<window-panel min="10%">
|
|
288
|
+
<window-splitter orientation="horizontal">
|
|
289
|
+
<window-panel min="20%">2-2-1</window-panel>
|
|
290
|
+
<window-panel-resizer
|
|
291
|
+
size="10px"
|
|
292
|
+
class="panel-resizer"
|
|
293
|
+
></window-panel-resizer>
|
|
294
|
+
<window-panel min="20%">2-2-2</window-panel>
|
|
295
|
+
</window-splitter>
|
|
296
|
+
</window-panel>
|
|
297
|
+
</window-splitter>
|
|
298
|
+
</window-panel>
|
|
299
|
+
<window-panel-resizer
|
|
300
|
+
size="10px"
|
|
301
|
+
class="panel-resizer"
|
|
302
|
+
></window-panel-resizer>
|
|
303
|
+
<window-panel min="10%">3</window-panel>
|
|
304
|
+
</window-splitter>
|
|
305
|
+
`,
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
export const WithOverflow = {
|
|
309
|
+
render: () => html`
|
|
310
|
+
<window-splitter class="panel-group" style="height: 400px">
|
|
311
|
+
<window-panel min="200px">
|
|
312
|
+
<div
|
|
313
|
+
style="
|
|
314
|
+
overflow: auto;
|
|
315
|
+
padding: 40px;
|
|
316
|
+
height: 100%;
|
|
317
|
+
box-sizing: border-box;
|
|
318
|
+
"
|
|
319
|
+
>
|
|
320
|
+
<p>
|
|
321
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
322
|
+
euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu
|
|
323
|
+
tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
324
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
325
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
326
|
+
eu tincidunt nisl nisl eu nisl.
|
|
327
|
+
</p>
|
|
328
|
+
<p>
|
|
329
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
330
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
331
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
332
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
333
|
+
eu tincidunt nisl nisl eu nisl.
|
|
334
|
+
</p>
|
|
335
|
+
<p>
|
|
336
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
337
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
338
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
339
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
340
|
+
eu tincidunt nisl nisl eu nisl.
|
|
341
|
+
</p>
|
|
342
|
+
<p>
|
|
343
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
344
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
345
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
346
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
347
|
+
eu tincidunt nisl nisl eu nisl.
|
|
348
|
+
</p>
|
|
349
|
+
<p>
|
|
350
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
351
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
352
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
353
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
354
|
+
eu tincidunt nisl nisl eu nisl.
|
|
355
|
+
</p>
|
|
356
|
+
</div>
|
|
357
|
+
</window-panel>
|
|
358
|
+
<window-panel-resizer
|
|
359
|
+
size="10px"
|
|
360
|
+
class="panel-resizer"
|
|
361
|
+
></window-panel-resizer>
|
|
362
|
+
<window-panel min="200px">
|
|
363
|
+
<div
|
|
364
|
+
style="
|
|
365
|
+
overflow: auto;
|
|
366
|
+
padding: 40px;
|
|
367
|
+
height: 100%;
|
|
368
|
+
box-sizing: border-box;
|
|
369
|
+
"
|
|
370
|
+
>
|
|
371
|
+
<p>
|
|
372
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
373
|
+
euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu
|
|
374
|
+
tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
375
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
376
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
377
|
+
eu tincidunt nisl nisl eu nisl.
|
|
378
|
+
</p>
|
|
379
|
+
<p>
|
|
380
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
381
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
382
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
383
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
384
|
+
eu tincidunt nisl nisl eu nisl.
|
|
385
|
+
</p>
|
|
386
|
+
<p>
|
|
387
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
388
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
389
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
390
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
391
|
+
eu tincidunt nisl nisl eu nisl.
|
|
392
|
+
</p>
|
|
393
|
+
<p>
|
|
394
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
395
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
396
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
397
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
398
|
+
eu tincidunt nisl nisl eu nisl.
|
|
399
|
+
</p>
|
|
400
|
+
<p>
|
|
401
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
402
|
+
eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies
|
|
403
|
+
ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.
|
|
404
|
+
Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,
|
|
405
|
+
eu tincidunt nisl nisl eu nisl.
|
|
406
|
+
</p>
|
|
407
|
+
</div>
|
|
408
|
+
</window-panel>
|
|
409
|
+
</window-splitter>
|
|
410
|
+
`,
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
export const Collapsible = {
|
|
414
|
+
render: () => html`
|
|
415
|
+
<window-splitter class="panel-group">
|
|
416
|
+
<window-panel
|
|
417
|
+
class="panel"
|
|
418
|
+
min="100px"
|
|
419
|
+
collapsible
|
|
420
|
+
collapsedSize="60px"
|
|
421
|
+
style="border: 10px solid green; box-sizing: border-box"
|
|
422
|
+
.onCollapseChange=${(e: boolean) => {
|
|
423
|
+
// eslint-disable-next-line no-console
|
|
424
|
+
console.log("COLLAPSE PASSIVE", e);
|
|
425
|
+
}}
|
|
426
|
+
id="panel-1"
|
|
427
|
+
>
|
|
428
|
+
1
|
|
429
|
+
</window-panel>
|
|
430
|
+
<window-panel-resizer
|
|
431
|
+
size="10px"
|
|
432
|
+
class="panel-resizer"
|
|
433
|
+
></window-panel-resizer>
|
|
434
|
+
<window-panel min="100px" class="panel"> 2</window-panel>
|
|
435
|
+
<window-panel-resizer
|
|
436
|
+
size="10px"
|
|
437
|
+
class="panel-resizer"
|
|
438
|
+
id="resizer-2"
|
|
439
|
+
></window-panel-resizer>
|
|
440
|
+
<window-panel
|
|
441
|
+
id="panel-3"
|
|
442
|
+
min="100px"
|
|
443
|
+
class="panel"
|
|
444
|
+
collapsible
|
|
445
|
+
.collapseAnimation=${{ duration: 1000, easing: "bounce" }}
|
|
446
|
+
collapsedSize="60px"
|
|
447
|
+
style="border: 10px solid blue; box-sizing: border-box"
|
|
448
|
+
collapsed=${true}
|
|
449
|
+
.onCollapseChange=${(newCollapsed: boolean, el: Panel) => {
|
|
450
|
+
el.collapsed = newCollapsed;
|
|
451
|
+
}}
|
|
452
|
+
>
|
|
453
|
+
3
|
|
454
|
+
</window-panel>
|
|
455
|
+
</window-splitter>
|
|
456
|
+
`,
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
const springFn = spring({
|
|
460
|
+
keyframes: [0, 1],
|
|
461
|
+
velocity: 1,
|
|
462
|
+
stiffness: 100,
|
|
463
|
+
damping: 10,
|
|
464
|
+
mass: 1.0,
|
|
465
|
+
});
|
|
466
|
+
|
|
467
|
+
export const CustomCollapseAnimation = {
|
|
468
|
+
render: () => html`
|
|
469
|
+
<window-splitter class="panel-group">
|
|
470
|
+
<window-panel
|
|
471
|
+
class="panel"
|
|
472
|
+
min="100px"
|
|
473
|
+
collapsible
|
|
474
|
+
collapsedSize="60px"
|
|
475
|
+
style="border: 10px solid green; box-sizing: border-box"
|
|
476
|
+
>
|
|
477
|
+
Panel 1
|
|
478
|
+
</window-panel>
|
|
479
|
+
<window-panel-resizer
|
|
480
|
+
size="10px"
|
|
481
|
+
class="panel-resizer"
|
|
482
|
+
></window-panel-resizer>
|
|
483
|
+
<window-panel min="100px" class="panel">Panel 2</window-panel>
|
|
484
|
+
<window-panel-resizer
|
|
485
|
+
size="10px"
|
|
486
|
+
class="panel-resizer"
|
|
487
|
+
></window-panel-resizer>
|
|
488
|
+
<window-panel
|
|
489
|
+
class="panel"
|
|
490
|
+
style="border: 10px solid blue; box-sizing: border-box"
|
|
491
|
+
min="100px"
|
|
492
|
+
collapsible
|
|
493
|
+
collapsedSize="60px"
|
|
494
|
+
defaultCollapsed
|
|
495
|
+
.collapseAnimation=${{
|
|
496
|
+
easing: (t: number) => springFn.next(t * 1000).value,
|
|
497
|
+
duration: 1000,
|
|
498
|
+
}}
|
|
499
|
+
>
|
|
500
|
+
Panel 3
|
|
501
|
+
</window-panel>
|
|
502
|
+
</window-splitter>
|
|
503
|
+
`,
|
|
504
|
+
};
|
|
505
|
+
|
|
506
|
+
export const ImperativePanel = {
|
|
507
|
+
render: () => html`
|
|
508
|
+
<window-splitter class="panel-group" id="panel-group">
|
|
509
|
+
<window-panel
|
|
510
|
+
id="panel-1"
|
|
511
|
+
min="100px"
|
|
512
|
+
collapsible
|
|
513
|
+
collapsedSize="60px"
|
|
514
|
+
class="panel"
|
|
515
|
+
>
|
|
516
|
+
1
|
|
517
|
+
</window-panel>
|
|
518
|
+
<window-panel-resizer
|
|
519
|
+
size="10px"
|
|
520
|
+
class="panel-resizer"
|
|
521
|
+
></window-panel-resizer>
|
|
522
|
+
<window-panel min="100px" class="panel">2</window-panel>
|
|
523
|
+
<window-panel-resizer
|
|
524
|
+
size="10px"
|
|
525
|
+
class="panel-resizer"
|
|
526
|
+
></window-panel-resizer>
|
|
527
|
+
<window-panel
|
|
528
|
+
min="100px"
|
|
529
|
+
class="panel"
|
|
530
|
+
collapsible
|
|
531
|
+
collapsedSize="60px"
|
|
532
|
+
defaultCollapsed
|
|
533
|
+
>
|
|
534
|
+
3
|
|
535
|
+
</window-panel>
|
|
536
|
+
</window-splitter>
|
|
537
|
+
|
|
538
|
+
<div>
|
|
539
|
+
<button
|
|
540
|
+
type="button"
|
|
541
|
+
@click=${() =>
|
|
542
|
+
alert(
|
|
543
|
+
`Sizes: ${(window as unknown as Record<string, PanelGroup>)[
|
|
544
|
+
"panel-group"
|
|
545
|
+
]?.getPixelSizes()}`
|
|
546
|
+
)}
|
|
547
|
+
>
|
|
548
|
+
Get pixel sizes
|
|
549
|
+
</button>
|
|
550
|
+
<button
|
|
551
|
+
type="button"
|
|
552
|
+
@click=${() =>
|
|
553
|
+
alert(
|
|
554
|
+
`Sizes: ${(window as unknown as Record<string, PanelGroup>)[
|
|
555
|
+
"panel-group"
|
|
556
|
+
]?.getPercentageSizes()}`
|
|
557
|
+
)}
|
|
558
|
+
>
|
|
559
|
+
Get percent sizes
|
|
560
|
+
</button>
|
|
561
|
+
<button
|
|
562
|
+
type="button"
|
|
563
|
+
@click=${() =>
|
|
564
|
+
(window as unknown as Record<string, PanelGroup>)[
|
|
565
|
+
"panel-group"
|
|
566
|
+
]?.setSizes(["200px", "10px", "50%", "10px", "150px"])}
|
|
567
|
+
>
|
|
568
|
+
Override sizes
|
|
569
|
+
</button>
|
|
570
|
+
</div>
|
|
571
|
+
|
|
572
|
+
<div>
|
|
573
|
+
<button
|
|
574
|
+
type="button"
|
|
575
|
+
@click=${() =>
|
|
576
|
+
(window as unknown as Record<string, Panel>)["panel-1"]?.collapse()}
|
|
577
|
+
>
|
|
578
|
+
Collapse
|
|
579
|
+
</button>
|
|
580
|
+
<button
|
|
581
|
+
type="button"
|
|
582
|
+
@click=${() =>
|
|
583
|
+
alert(
|
|
584
|
+
`Collapsed: ${(window as unknown as Record<string, Panel>)[
|
|
585
|
+
"panel-1"
|
|
586
|
+
]?.isCollapsed()}`
|
|
587
|
+
)}
|
|
588
|
+
>
|
|
589
|
+
Is Collapsed?
|
|
590
|
+
</button>
|
|
591
|
+
<button
|
|
592
|
+
type="button"
|
|
593
|
+
@click=${() =>
|
|
594
|
+
(window as unknown as Record<string, Panel>)["panel-1"]?.expand()}
|
|
595
|
+
>
|
|
596
|
+
Expand
|
|
597
|
+
</button>
|
|
598
|
+
<button
|
|
599
|
+
type="button"
|
|
600
|
+
@click=${() =>
|
|
601
|
+
alert(
|
|
602
|
+
`Expanded: ${(window as unknown as Record<string, Panel>)[
|
|
603
|
+
"panel-1"
|
|
604
|
+
]?.isExpanded()}`
|
|
605
|
+
)}
|
|
606
|
+
>
|
|
607
|
+
Is Expanded?
|
|
608
|
+
</button>
|
|
609
|
+
<button
|
|
610
|
+
type="button"
|
|
611
|
+
@click=${() =>
|
|
612
|
+
alert(
|
|
613
|
+
`Id: ${(window as unknown as Record<string, Panel>)["panel-1"]?.id}`
|
|
614
|
+
)}
|
|
615
|
+
>
|
|
616
|
+
Get Id
|
|
617
|
+
</button>
|
|
618
|
+
<button
|
|
619
|
+
type="button"
|
|
620
|
+
@click=${() =>
|
|
621
|
+
alert(
|
|
622
|
+
`Size: ${(window as unknown as Record<string, Panel>)[
|
|
623
|
+
"panel-1"
|
|
624
|
+
]?.getPixelSize()}`
|
|
625
|
+
)}
|
|
626
|
+
>
|
|
627
|
+
Get Pixel Size
|
|
628
|
+
</button>
|
|
629
|
+
<button
|
|
630
|
+
type="button"
|
|
631
|
+
@click=${() =>
|
|
632
|
+
alert(
|
|
633
|
+
`Percentage: ${(window as unknown as Record<string, Panel>)[
|
|
634
|
+
"panel-1"
|
|
635
|
+
]?.getPercentageSize()}`
|
|
636
|
+
)}
|
|
637
|
+
>
|
|
638
|
+
Get Percentage Size
|
|
639
|
+
</button>
|
|
640
|
+
<button
|
|
641
|
+
type="button"
|
|
642
|
+
@click=${() =>
|
|
643
|
+
(window as unknown as Record<string, Panel>)["panel-1"]?.setSize(
|
|
644
|
+
"30px"
|
|
645
|
+
)}
|
|
646
|
+
>
|
|
647
|
+
Set size to 100px
|
|
648
|
+
</button>
|
|
649
|
+
<button
|
|
650
|
+
type="button"
|
|
651
|
+
@click=${() =>
|
|
652
|
+
(window as unknown as Record<string, Panel>)["panel-1"]?.setSize(
|
|
653
|
+
"50%"
|
|
654
|
+
)}
|
|
655
|
+
>
|
|
656
|
+
Set size to 50%
|
|
657
|
+
</button>
|
|
658
|
+
</div>
|
|
659
|
+
`,
|
|
660
|
+
};
|
|
661
|
+
class ConditionalPanelElement extends LitElement {
|
|
662
|
+
@property({ type: Boolean, reflect: true })
|
|
663
|
+
isExpanded = false;
|
|
664
|
+
|
|
665
|
+
createRenderRoot() {
|
|
666
|
+
return this;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
// pass through class styles
|
|
670
|
+
static styles = css`
|
|
671
|
+
window-splitter {
|
|
672
|
+
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
673
|
+
background: rgba(0, 0, 0, 0.1);
|
|
674
|
+
border-radius: 12px;
|
|
675
|
+
box-sizing: border-box;
|
|
676
|
+
min-width: 500px;
|
|
677
|
+
display: block;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
window-panel {
|
|
681
|
+
height: 100%;
|
|
682
|
+
width: 100%;
|
|
683
|
+
padding: 20px;
|
|
684
|
+
display: flex;
|
|
685
|
+
align-items: center;
|
|
686
|
+
justify-content: center;
|
|
687
|
+
overflow: hidden;
|
|
688
|
+
box-sizing: border-box;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
window-panel-resizer {
|
|
692
|
+
background: red;
|
|
693
|
+
}
|
|
694
|
+
`;
|
|
695
|
+
render() {
|
|
696
|
+
return html`
|
|
697
|
+
<window-splitter class="panel-group">
|
|
698
|
+
<window-panel
|
|
699
|
+
id="panel-1"
|
|
700
|
+
min="100px"
|
|
701
|
+
collapsible
|
|
702
|
+
collapsedSize="60px"
|
|
703
|
+
class="panel"
|
|
704
|
+
>
|
|
705
|
+
1
|
|
706
|
+
</window-panel>
|
|
707
|
+
<window-panel-resizer
|
|
708
|
+
id="handle-1"
|
|
709
|
+
size="10px"
|
|
710
|
+
class="panel-resizer"
|
|
711
|
+
></window-panel-resizer>
|
|
712
|
+
<window-panel id="panel-2" min="100px" class="panel">2</window-panel>
|
|
713
|
+
|
|
714
|
+
${when(
|
|
715
|
+
this.isExpanded,
|
|
716
|
+
() => html`
|
|
717
|
+
<window-panel-resizer
|
|
718
|
+
id="handle-2"
|
|
719
|
+
size="10px"
|
|
720
|
+
class="panel-resizer"
|
|
721
|
+
></window-panel-resizer>
|
|
722
|
+
<window-panel id="panel-3" min="100px" class="panel">
|
|
723
|
+
3
|
|
724
|
+
<button type="button" @click=${() => (this.isExpanded = false)}>
|
|
725
|
+
Close
|
|
726
|
+
</button>
|
|
727
|
+
</window-panel>
|
|
728
|
+
`
|
|
729
|
+
)}
|
|
730
|
+
</window-splitter>
|
|
731
|
+
|
|
732
|
+
<button type="button" @click=${() => (this.isExpanded = true)}>
|
|
733
|
+
Expand
|
|
734
|
+
</button>
|
|
735
|
+
`;
|
|
736
|
+
}
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
customElements.define("conditional-panel", ConditionalPanelElement);
|
|
740
|
+
|
|
741
|
+
export const ConditionalPanel = {
|
|
742
|
+
render: () => html`<conditional-panel></conditional-panel>`,
|
|
743
|
+
};
|
|
744
|
+
|
|
745
|
+
class ConditionalPanelComplexElement extends LitElement {
|
|
746
|
+
@property({ type: Boolean, reflect: true })
|
|
747
|
+
isExpanded = false;
|
|
748
|
+
|
|
749
|
+
// pass through class styles
|
|
750
|
+
static styles = css`
|
|
751
|
+
window-splitter {
|
|
752
|
+
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
753
|
+
background: rgba(0, 0, 0, 0.1);
|
|
754
|
+
border-radius: 12px;
|
|
755
|
+
box-sizing: border-box;
|
|
756
|
+
min-width: 500px;
|
|
757
|
+
display: block;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
window-panel {
|
|
761
|
+
height: 100%;
|
|
762
|
+
width: 100%;
|
|
763
|
+
padding: 20px;
|
|
764
|
+
display: flex;
|
|
765
|
+
align-items: center;
|
|
766
|
+
justify-content: center;
|
|
767
|
+
overflow: hidden;
|
|
768
|
+
box-sizing: border-box;
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
window-panel-resizer {
|
|
772
|
+
background: red;
|
|
773
|
+
}
|
|
774
|
+
`;
|
|
775
|
+
render() {
|
|
776
|
+
return html`
|
|
777
|
+
<window-splitter class="panel-group">
|
|
778
|
+
<window-panel
|
|
779
|
+
id="panel-1"
|
|
780
|
+
min="100px"
|
|
781
|
+
collapsible
|
|
782
|
+
collapsedSize="60px"
|
|
783
|
+
class="panel"
|
|
784
|
+
>
|
|
785
|
+
1
|
|
786
|
+
</window-panel>
|
|
787
|
+
<window-panel-resizer
|
|
788
|
+
id="handle-1"
|
|
789
|
+
size="10px"
|
|
790
|
+
class="panel-resizer"
|
|
791
|
+
></window-panel-resizer>
|
|
792
|
+
<window-panel id="panel-2" min="100px" class="panel">2</window-panel>
|
|
793
|
+
<window-panel-resizer
|
|
794
|
+
id="handle-2"
|
|
795
|
+
size="10px"
|
|
796
|
+
class="panel-resizer"
|
|
797
|
+
></window-panel-resizer>
|
|
798
|
+
<window-panel id="panel-3" min="100px" class="panel">3</window-panel>
|
|
799
|
+
${when(
|
|
800
|
+
this.isExpanded,
|
|
801
|
+
() => html`
|
|
802
|
+
<window-panel-resizer
|
|
803
|
+
id="handle-3"
|
|
804
|
+
size="10px"
|
|
805
|
+
class="panel-resizer"
|
|
806
|
+
></window-panel-resizer>
|
|
807
|
+
<window-panel id="panel-4" min="100px" class="panel">
|
|
808
|
+
expanded
|
|
809
|
+
<button type="button" @click=${() => (this.isExpanded = false)}>
|
|
810
|
+
Close
|
|
811
|
+
</button>
|
|
812
|
+
</window-panel>
|
|
813
|
+
`
|
|
814
|
+
)}
|
|
815
|
+
<window-panel-resizer
|
|
816
|
+
id="handle-4"
|
|
817
|
+
size="10px"
|
|
818
|
+
class="panel-resizer"
|
|
819
|
+
></window-panel-resizer>
|
|
820
|
+
<window-panel id="panel-5" min="100px" class="panel">4</window-panel>
|
|
821
|
+
</window-splitter>
|
|
822
|
+
|
|
823
|
+
<button type="button" @click=${() => (this.isExpanded = true)}>
|
|
824
|
+
Expand
|
|
825
|
+
</button>
|
|
826
|
+
`;
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
customElements.define(
|
|
831
|
+
"conditional-panel-complex",
|
|
832
|
+
ConditionalPanelComplexElement
|
|
833
|
+
);
|
|
834
|
+
|
|
835
|
+
export const ConditionalPanelComplex = {
|
|
836
|
+
render: () => html`<conditional-panel-complex></conditional-panel-complex>`,
|
|
837
|
+
};
|
|
838
|
+
|
|
839
|
+
export const WithDefaultWidth = {
|
|
840
|
+
render: () => html`
|
|
841
|
+
<window-splitter class="panel-group" style="height: 400px">
|
|
842
|
+
<window-panel style="background-color: #333366"></window-panel>
|
|
843
|
+
<window-panel-resizer size="3px"></window-panel-resizer>
|
|
844
|
+
<window-panel
|
|
845
|
+
style="background-color: #ff3366"
|
|
846
|
+
default="100px"
|
|
847
|
+
min="100px"
|
|
848
|
+
max="400px"
|
|
849
|
+
>
|
|
850
|
+
</window-panel>
|
|
851
|
+
</window-splitter>
|
|
852
|
+
`,
|
|
853
|
+
};
|
|
854
|
+
|
|
855
|
+
export const StaticAtRest = {
|
|
856
|
+
render: () => html`
|
|
857
|
+
<window-splitter class="panel-group" style="height: 200px">
|
|
858
|
+
<window-panel min="100px" max="300px" class="panel" isStaticAtRest>
|
|
859
|
+
Panel 1
|
|
860
|
+
</window-panel>
|
|
861
|
+
<window-panel-resizer
|
|
862
|
+
size="10px"
|
|
863
|
+
class="panel-resizer"
|
|
864
|
+
></window-panel-resizer>
|
|
865
|
+
<window-panel min="100px" class="panel">Panel 2</window-panel>
|
|
866
|
+
<window-panel-resizer
|
|
867
|
+
size="10px"
|
|
868
|
+
class="panel-resizer"
|
|
869
|
+
></window-panel-resizer>
|
|
870
|
+
<window-panel min="100px" class="panel">Panel 3</window-panel>
|
|
871
|
+
</window-splitter>
|
|
872
|
+
`,
|
|
873
|
+
};
|