@vaadin/master-detail-layout 25.2.0-alpha1 → 25.2.0-alpha10
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/custom-elements.json +272 -25
- package/package.json +8 -8
- package/src/styles/vaadin-master-detail-layout-base-styles.js +219 -56
- package/src/vaadin-master-detail-layout-helpers.js +173 -0
- package/src/vaadin-master-detail-layout.d.ts +90 -22
- package/src/vaadin-master-detail-layout.js +393 -186
- package/web-types.json +62 -54
- package/web-types.lit.json +25 -11
- package/src/styles/vaadin-master-detail-layout-transition-base-styles.js +0 -107
package/custom-elements.json
CHANGED
|
@@ -17,13 +17,233 @@
|
|
|
17
17
|
}
|
|
18
18
|
]
|
|
19
19
|
},
|
|
20
|
+
{
|
|
21
|
+
"kind": "javascript-module",
|
|
22
|
+
"path": "src/vaadin-master-detail-layout-helpers.js",
|
|
23
|
+
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "function",
|
|
26
|
+
"name": "getCurrentAnimation",
|
|
27
|
+
"parameters": [
|
|
28
|
+
{
|
|
29
|
+
"name": "element",
|
|
30
|
+
"type": {
|
|
31
|
+
"text": "HTMLElement"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
],
|
|
35
|
+
"description": "Returns the currently running master-detail-layout animation on the\nelement, if any. Matches by the shared animation ID and `'running'`\nplay state.",
|
|
36
|
+
"return": {
|
|
37
|
+
"type": {
|
|
38
|
+
"text": "Animation | undefined"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"kind": "function",
|
|
44
|
+
"name": "getCurrentAnimationProgress",
|
|
45
|
+
"parameters": [
|
|
46
|
+
{
|
|
47
|
+
"name": "element",
|
|
48
|
+
"type": {
|
|
49
|
+
"text": "HTMLElement"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
"description": "Returns the overall progress (0–1) of the current animation on the\nelement, computed as `currentTime / duration`. Returns 0 when no\nanimation is running.",
|
|
54
|
+
"return": {
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "number"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"kind": "function",
|
|
62
|
+
"name": "animateIn",
|
|
63
|
+
"parameters": [
|
|
64
|
+
{
|
|
65
|
+
"name": "element",
|
|
66
|
+
"type": {
|
|
67
|
+
"text": "HTMLElement"
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "effects",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "Array<'fade' | 'slide'>"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "progress",
|
|
78
|
+
"description": "starting progress (0–1) for interrupted resumption",
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "number"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
],
|
|
84
|
+
"description": "Runs an enter animation on the element.",
|
|
85
|
+
"return": {
|
|
86
|
+
"type": {
|
|
87
|
+
"text": "Promise<void>"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "function",
|
|
93
|
+
"name": "animateOut",
|
|
94
|
+
"parameters": [
|
|
95
|
+
{
|
|
96
|
+
"name": "element",
|
|
97
|
+
"type": {
|
|
98
|
+
"text": "HTMLElement"
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "effects",
|
|
103
|
+
"type": {
|
|
104
|
+
"text": "Array<'fade' | 'slide'>"
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "progress",
|
|
109
|
+
"description": "starting progress (0–1) for interrupted resumption",
|
|
110
|
+
"type": {
|
|
111
|
+
"text": "number"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
],
|
|
115
|
+
"description": "Runs an exit animation on the element.",
|
|
116
|
+
"return": {
|
|
117
|
+
"type": {
|
|
118
|
+
"text": "Promise<void>"
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"kind": "function",
|
|
124
|
+
"name": "cancelAnimations",
|
|
125
|
+
"parameters": [
|
|
126
|
+
{
|
|
127
|
+
"name": "element",
|
|
128
|
+
"type": {
|
|
129
|
+
"text": "HTMLElement"
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"description": "Cancels all running animations on the element that match the shared animation ID."
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "function",
|
|
137
|
+
"name": "parseTrackSizes",
|
|
138
|
+
"parameters": [
|
|
139
|
+
{
|
|
140
|
+
"name": "gridTemplate",
|
|
141
|
+
"description": "computed grid template string (e.g. `\"200px [gap] 10px 400px\"`)",
|
|
142
|
+
"type": {
|
|
143
|
+
"text": "string"
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
],
|
|
147
|
+
"description": "Parses a computed `gridTemplateColumns` / `gridTemplateRows` value\ninto an array of track sizes in pixels. Line names (e.g. `[name]`)\nare stripped before parsing.",
|
|
148
|
+
"return": {
|
|
149
|
+
"type": {
|
|
150
|
+
"text": "number[]"
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"kind": "function",
|
|
156
|
+
"name": "detectOverflow",
|
|
157
|
+
"parameters": [
|
|
158
|
+
{
|
|
159
|
+
"name": "hostSize",
|
|
160
|
+
"description": "the host element's width or height in pixels",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "number"
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"name": "trackSizes",
|
|
167
|
+
"description": "[masterSize, masterExtra, detailSize] in pixels",
|
|
168
|
+
"type": {
|
|
169
|
+
"text": "number[]"
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
],
|
|
173
|
+
"description": "Determines whether the detail area overflows the host element,\nmeaning it should be shown as an overlay instead of side-by-side.\n\nReturns `false` when all tracks fit within the host, or when the\nmaster's extra space (flexible portion) is large enough to absorb\nthe detail column.",
|
|
174
|
+
"return": {
|
|
175
|
+
"type": {
|
|
176
|
+
"text": "boolean"
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
],
|
|
181
|
+
"exports": [
|
|
182
|
+
{
|
|
183
|
+
"kind": "js",
|
|
184
|
+
"name": "getCurrentAnimation",
|
|
185
|
+
"declaration": {
|
|
186
|
+
"name": "getCurrentAnimation",
|
|
187
|
+
"module": "src/vaadin-master-detail-layout-helpers.js"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"kind": "js",
|
|
192
|
+
"name": "getCurrentAnimationProgress",
|
|
193
|
+
"declaration": {
|
|
194
|
+
"name": "getCurrentAnimationProgress",
|
|
195
|
+
"module": "src/vaadin-master-detail-layout-helpers.js"
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "js",
|
|
200
|
+
"name": "animateIn",
|
|
201
|
+
"declaration": {
|
|
202
|
+
"name": "animateIn",
|
|
203
|
+
"module": "src/vaadin-master-detail-layout-helpers.js"
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"kind": "js",
|
|
208
|
+
"name": "animateOut",
|
|
209
|
+
"declaration": {
|
|
210
|
+
"name": "animateOut",
|
|
211
|
+
"module": "src/vaadin-master-detail-layout-helpers.js"
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"kind": "js",
|
|
216
|
+
"name": "cancelAnimations",
|
|
217
|
+
"declaration": {
|
|
218
|
+
"name": "cancelAnimations",
|
|
219
|
+
"module": "src/vaadin-master-detail-layout-helpers.js"
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"kind": "js",
|
|
224
|
+
"name": "parseTrackSizes",
|
|
225
|
+
"declaration": {
|
|
226
|
+
"name": "parseTrackSizes",
|
|
227
|
+
"module": "src/vaadin-master-detail-layout-helpers.js"
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"kind": "js",
|
|
232
|
+
"name": "detectOverflow",
|
|
233
|
+
"declaration": {
|
|
234
|
+
"name": "detectOverflow",
|
|
235
|
+
"module": "src/vaadin-master-detail-layout-helpers.js"
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
]
|
|
239
|
+
},
|
|
20
240
|
{
|
|
21
241
|
"kind": "javascript-module",
|
|
22
242
|
"path": "src/vaadin-master-detail-layout.js",
|
|
23
243
|
"declarations": [
|
|
24
244
|
{
|
|
25
245
|
"kind": "class",
|
|
26
|
-
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name
|
|
246
|
+
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Slots\n\nThe component has two main content areas: the master area (default slot)\nand the detail area (`detail` slot). When the detail doesn't fit next to\nthe master, it is shown as an overlay on top of the master area:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail\">Detail content</div>\n</vaadin-master-detail-layout>\n```\n\nThe component also supports a `detail-placeholder` slot for content shown\nin the detail area when no detail is selected. Unlike the `detail` slot,\nthe placeholder is simply hidden when it doesn't fit next to the master area,\nrather than shown as an overlay:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail-placeholder\">Select an item</div>\n</vaadin-master-detail-layout>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------------|----------------------\n`backdrop` | Backdrop covering the master area in the overlay mode\n`master` | The master area\n`detail` | The detail area\n`detail-placeholder` | The detail placeholder area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------------|----------------------\n`expand-master` | Set when the master area expands to fill available space.\n`expand-detail` | Set when the detail area expands to fill available space.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided and visible.\n`has-detail-placeholder` | Set when the detail placeholder content is provided.\n`overlay` | Set when columns don't fit and the detail is shown as an overlay.\n`overlay-containment` | Set to `layout` or `page`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
27
247
|
"name": "MasterDetailLayout",
|
|
28
248
|
"members": [
|
|
29
249
|
{
|
|
@@ -33,18 +253,38 @@
|
|
|
33
253
|
"type": {
|
|
34
254
|
"text": "string"
|
|
35
255
|
},
|
|
36
|
-
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout.
|
|
256
|
+
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
|
|
37
257
|
"attribute": "detail-size"
|
|
38
258
|
},
|
|
39
259
|
{
|
|
40
260
|
"kind": "field",
|
|
41
|
-
"name": "
|
|
261
|
+
"name": "expandDetail",
|
|
42
262
|
"privacy": "public",
|
|
43
263
|
"type": {
|
|
44
|
-
"text": "
|
|
264
|
+
"text": "boolean"
|
|
265
|
+
},
|
|
266
|
+
"description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
|
|
267
|
+
"attribute": "expand-detail"
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
"kind": "field",
|
|
271
|
+
"name": "expandMaster",
|
|
272
|
+
"privacy": "public",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "boolean"
|
|
275
|
+
},
|
|
276
|
+
"description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
|
|
277
|
+
"attribute": "expand-master"
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"kind": "field",
|
|
281
|
+
"name": "forceOverlay",
|
|
282
|
+
"privacy": "public",
|
|
283
|
+
"type": {
|
|
284
|
+
"text": "boolean"
|
|
45
285
|
},
|
|
46
|
-
"description": "
|
|
47
|
-
"attribute": "
|
|
286
|
+
"description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
287
|
+
"attribute": "force-overlay"
|
|
48
288
|
},
|
|
49
289
|
{
|
|
50
290
|
"kind": "field",
|
|
@@ -83,7 +323,7 @@
|
|
|
83
323
|
"type": {
|
|
84
324
|
"text": "string"
|
|
85
325
|
},
|
|
86
|
-
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `
|
|
326
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
87
327
|
"attribute": "overlay-containment"
|
|
88
328
|
},
|
|
89
329
|
{
|
|
@@ -97,14 +337,9 @@
|
|
|
97
337
|
"attribute": "overlay-size"
|
|
98
338
|
},
|
|
99
339
|
{
|
|
100
|
-
"kind": "
|
|
101
|
-
"name": "
|
|
102
|
-
"
|
|
103
|
-
"type": {
|
|
104
|
-
"text": "!Array<!CSSResult>"
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
"readonly": true
|
|
340
|
+
"kind": "method",
|
|
341
|
+
"name": "recalculateLayout",
|
|
342
|
+
"description": "When `detailSize` is not explicitly set, re-measures the cached intrinsic size of\nthe detail content by placing it in a min-content CSS grid column, then repeats\nthis process for ancestor master-detail layouts without an explicit `detailSize`,\nif any, so that their detail areas also adapt.\n\nCall this method after changing the detail content in a way that affects its intrinsic\nsize — for example, when opening a detail in a nested master-detail layout that was\nnot previously visible.\n\nNOTE: This method can be expensive in large layouts as it triggers consecutive\nsynchronous DOM reads and writes."
|
|
108
343
|
}
|
|
109
344
|
],
|
|
110
345
|
"events": [
|
|
@@ -129,16 +364,32 @@
|
|
|
129
364
|
"type": {
|
|
130
365
|
"text": "string"
|
|
131
366
|
},
|
|
132
|
-
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout.
|
|
367
|
+
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
|
|
133
368
|
"fieldName": "detailSize"
|
|
134
369
|
},
|
|
135
370
|
{
|
|
136
|
-
"name": "expand",
|
|
371
|
+
"name": "expand-detail",
|
|
137
372
|
"type": {
|
|
138
|
-
"text": "
|
|
373
|
+
"text": "boolean"
|
|
374
|
+
},
|
|
375
|
+
"description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
|
|
376
|
+
"fieldName": "expandDetail"
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "expand-master",
|
|
380
|
+
"type": {
|
|
381
|
+
"text": "boolean"
|
|
382
|
+
},
|
|
383
|
+
"description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
|
|
384
|
+
"fieldName": "expandMaster"
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "force-overlay",
|
|
388
|
+
"type": {
|
|
389
|
+
"text": "boolean"
|
|
139
390
|
},
|
|
140
|
-
"description": "
|
|
141
|
-
"fieldName": "
|
|
391
|
+
"description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
392
|
+
"fieldName": "forceOverlay"
|
|
142
393
|
},
|
|
143
394
|
{
|
|
144
395
|
"name": "master-size",
|
|
@@ -169,7 +420,7 @@
|
|
|
169
420
|
"type": {
|
|
170
421
|
"text": "string"
|
|
171
422
|
},
|
|
172
|
-
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `
|
|
423
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
173
424
|
"fieldName": "overlayContainment"
|
|
174
425
|
},
|
|
175
426
|
{
|
|
@@ -182,10 +433,6 @@
|
|
|
182
433
|
}
|
|
183
434
|
],
|
|
184
435
|
"mixins": [
|
|
185
|
-
{
|
|
186
|
-
"name": "SlotStylesMixin",
|
|
187
|
-
"package": "@vaadin/component-base/src/slot-styles-mixin.js"
|
|
188
|
-
},
|
|
189
436
|
{
|
|
190
437
|
"name": "ElementMixin",
|
|
191
438
|
"package": "@vaadin/component-base/src/element-mixin.js"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/master-detail-layout",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/a11y-base": "25.2.0-
|
|
38
|
-
"@vaadin/component-base": "25.2.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
37
|
+
"@vaadin/a11y-base": "25.2.0-alpha10",
|
|
38
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
40
40
|
"lit": "^3.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@vaadin/aura": "25.2.0-
|
|
44
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
43
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
44
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
45
45
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
46
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
47
47
|
"sinon": "^21.0.2"
|
|
48
48
|
},
|
|
49
49
|
"customElements": "custom-elements.json",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"web-types.json",
|
|
52
52
|
"web-types.lit.json"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
55
55
|
}
|