@vaadin/dashboard 25.1.0-alpha6 → 25.1.0-alpha7
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 +1191 -0
- package/package.json +12 -10
- package/src/vaadin-dashboard-button.js +1 -1
- package/src/vaadin-dashboard-layout.js +1 -1
- package/src/vaadin-dashboard-section.js +1 -1
- package/src/vaadin-dashboard-widget.js +1 -1
- package/src/vaadin-dashboard.js +1 -1
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
|
@@ -0,0 +1,1191 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "vaadin-dashboard.js",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "js",
|
|
12
|
+
"name": "*",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "*",
|
|
15
|
+
"module": "src/vaadin-dashboard.js"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"kind": "javascript-module",
|
|
22
|
+
"path": "vaadin-dashboard-widget.js",
|
|
23
|
+
"declarations": [],
|
|
24
|
+
"exports": [
|
|
25
|
+
{
|
|
26
|
+
"kind": "js",
|
|
27
|
+
"name": "*",
|
|
28
|
+
"declaration": {
|
|
29
|
+
"name": "*",
|
|
30
|
+
"module": "src/vaadin-dashboard-widget.js"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"kind": "javascript-module",
|
|
37
|
+
"path": "vaadin-dashboard-section.js",
|
|
38
|
+
"declarations": [],
|
|
39
|
+
"exports": [
|
|
40
|
+
{
|
|
41
|
+
"kind": "js",
|
|
42
|
+
"name": "*",
|
|
43
|
+
"declaration": {
|
|
44
|
+
"name": "*",
|
|
45
|
+
"module": "src/vaadin-dashboard-section.js"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"kind": "javascript-module",
|
|
52
|
+
"path": "vaadin-dashboard-layout.js",
|
|
53
|
+
"declarations": [],
|
|
54
|
+
"exports": [
|
|
55
|
+
{
|
|
56
|
+
"kind": "js",
|
|
57
|
+
"name": "*",
|
|
58
|
+
"declaration": {
|
|
59
|
+
"name": "*",
|
|
60
|
+
"module": "src/vaadin-dashboard-layout.js"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"kind": "javascript-module",
|
|
67
|
+
"path": "src/vaadin-dashboard-button.js",
|
|
68
|
+
"declarations": [
|
|
69
|
+
{
|
|
70
|
+
"kind": "class",
|
|
71
|
+
"description": "An element used internally by `<vaadin-dashboard>`. Not intended to be used separately.",
|
|
72
|
+
"name": "DashboardButton",
|
|
73
|
+
"members": [],
|
|
74
|
+
"mixins": [
|
|
75
|
+
{
|
|
76
|
+
"name": "ButtonMixin",
|
|
77
|
+
"package": "@vaadin/button/src/vaadin-button-mixin.js"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "ElementMixin",
|
|
81
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "ThemableMixin",
|
|
85
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "PolylitMixin",
|
|
89
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"name": "LumoInjectionMixin",
|
|
93
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
94
|
+
}
|
|
95
|
+
],
|
|
96
|
+
"superclass": {
|
|
97
|
+
"name": "LitElement",
|
|
98
|
+
"package": "lit"
|
|
99
|
+
},
|
|
100
|
+
"tagName": "vaadin-dashboard-button",
|
|
101
|
+
"customElement": true,
|
|
102
|
+
"attributes": [
|
|
103
|
+
{
|
|
104
|
+
"name": "tabindex",
|
|
105
|
+
"type": {
|
|
106
|
+
"text": "number"
|
|
107
|
+
},
|
|
108
|
+
"description": "Indicates whether the element can be focused and where it participates in sequential keyboard navigation.",
|
|
109
|
+
"fieldName": "tabindex",
|
|
110
|
+
"inheritedFrom": {
|
|
111
|
+
"name": "TabindexMixin",
|
|
112
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
],
|
|
116
|
+
"events": []
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"exports": [
|
|
120
|
+
{
|
|
121
|
+
"kind": "js",
|
|
122
|
+
"name": "DashboardButton",
|
|
123
|
+
"declaration": {
|
|
124
|
+
"name": "DashboardButton",
|
|
125
|
+
"module": "src/vaadin-dashboard-button.js"
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"kind": "javascript-module",
|
|
132
|
+
"path": "src/vaadin-dashboard-helpers.js",
|
|
133
|
+
"declarations": [
|
|
134
|
+
{
|
|
135
|
+
"kind": "variable",
|
|
136
|
+
"name": "WRAPPER_LOCAL_NAME",
|
|
137
|
+
"type": {
|
|
138
|
+
"text": "string"
|
|
139
|
+
},
|
|
140
|
+
"default": "'vaadin-dashboard-widget-wrapper'"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "variable",
|
|
144
|
+
"name": "SYNCHRONIZED_ATTRIBUTES",
|
|
145
|
+
"type": {
|
|
146
|
+
"text": "array"
|
|
147
|
+
},
|
|
148
|
+
"default": "['editable', 'dragging', 'first-child', 'last-child']"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"kind": "function",
|
|
152
|
+
"name": "itemsEqual",
|
|
153
|
+
"parameters": [
|
|
154
|
+
{
|
|
155
|
+
"name": "a",
|
|
156
|
+
"description": "the first item",
|
|
157
|
+
"type": {
|
|
158
|
+
"text": "Object"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "b",
|
|
163
|
+
"description": "the second item",
|
|
164
|
+
"type": {
|
|
165
|
+
"text": "Object"
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
],
|
|
169
|
+
"description": "Returns true if the given items are equal by reference or by id."
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"kind": "function",
|
|
173
|
+
"name": "getItemsArrayOfItem",
|
|
174
|
+
"parameters": [
|
|
175
|
+
{
|
|
176
|
+
"name": "item",
|
|
177
|
+
"description": "the item element",
|
|
178
|
+
"type": {
|
|
179
|
+
"text": "Object"
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"name": "items",
|
|
184
|
+
"description": "the root level items array",
|
|
185
|
+
"type": {
|
|
186
|
+
"text": "Object[]"
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
],
|
|
190
|
+
"description": "Returns the array of items that contains the given item.\nMight be the dashboard items or the items of a section.",
|
|
191
|
+
"return": {
|
|
192
|
+
"type": {
|
|
193
|
+
"text": "Object[]"
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"kind": "function",
|
|
199
|
+
"name": "getElementItem",
|
|
200
|
+
"parameters": [
|
|
201
|
+
{
|
|
202
|
+
"name": "element",
|
|
203
|
+
"description": "the element",
|
|
204
|
+
"type": {
|
|
205
|
+
"text": "HTMLElement"
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
],
|
|
209
|
+
"description": "Returns the item associated with the given element."
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"kind": "function",
|
|
213
|
+
"name": "fireMove",
|
|
214
|
+
"parameters": [
|
|
215
|
+
{
|
|
216
|
+
"name": "element",
|
|
217
|
+
"type": {
|
|
218
|
+
"text": "HTMLElement"
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
"name": "delta",
|
|
223
|
+
"type": {
|
|
224
|
+
"text": "Number"
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
],
|
|
228
|
+
"description": "Dispatches a custom event to notify about a move operation."
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"kind": "function",
|
|
232
|
+
"name": "fireResize",
|
|
233
|
+
"parameters": [
|
|
234
|
+
{
|
|
235
|
+
"name": "element",
|
|
236
|
+
"type": {
|
|
237
|
+
"text": "HTMLElement"
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"name": "colspanDelta",
|
|
242
|
+
"type": {
|
|
243
|
+
"text": "Number"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "rowspanDelta",
|
|
248
|
+
"type": {
|
|
249
|
+
"text": "Number"
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
],
|
|
253
|
+
"description": "Dispatches a custom event to notify about a resize operation."
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"kind": "function",
|
|
257
|
+
"name": "fireRemove",
|
|
258
|
+
"parameters": [
|
|
259
|
+
{
|
|
260
|
+
"name": "element",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "HTMLElement"
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
],
|
|
266
|
+
"description": "Dispatches a custom event to notify about a remove operation."
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
"kind": "function",
|
|
270
|
+
"name": "findAncestorInstance",
|
|
271
|
+
"parameters": [
|
|
272
|
+
{
|
|
273
|
+
"name": "node",
|
|
274
|
+
"description": "starting node",
|
|
275
|
+
"type": {
|
|
276
|
+
"text": "Node"
|
|
277
|
+
}
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"name": "baseClass",
|
|
281
|
+
"description": "constructor, e.g. `Dashboard`",
|
|
282
|
+
"type": {
|
|
283
|
+
"text": "Function"
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
],
|
|
287
|
+
"description": "Walks up the DOM tree starting from `node`, returning the first ancestor which is an instance of the given `baseClass`.",
|
|
288
|
+
"return": {
|
|
289
|
+
"type": {
|
|
290
|
+
"text": "HTMLElement | null"
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"kind": "function",
|
|
296
|
+
"name": "getParentLayout",
|
|
297
|
+
"parameters": [
|
|
298
|
+
{
|
|
299
|
+
"name": "node",
|
|
300
|
+
"description": "starting node",
|
|
301
|
+
"type": {
|
|
302
|
+
"text": "Node"
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
],
|
|
306
|
+
"description": "Walks up the DOM tree starting from `node`, returning the first ancestor which is a `Dashboard` or `DashboardLayout`.",
|
|
307
|
+
"return": {
|
|
308
|
+
"type": {
|
|
309
|
+
"text": "HTMLElement | null"
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
],
|
|
314
|
+
"exports": [
|
|
315
|
+
{
|
|
316
|
+
"kind": "js",
|
|
317
|
+
"name": "WRAPPER_LOCAL_NAME",
|
|
318
|
+
"declaration": {
|
|
319
|
+
"name": "WRAPPER_LOCAL_NAME",
|
|
320
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"kind": "js",
|
|
325
|
+
"name": "SYNCHRONIZED_ATTRIBUTES",
|
|
326
|
+
"declaration": {
|
|
327
|
+
"name": "SYNCHRONIZED_ATTRIBUTES",
|
|
328
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
329
|
+
}
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
"kind": "js",
|
|
333
|
+
"name": "itemsEqual",
|
|
334
|
+
"declaration": {
|
|
335
|
+
"name": "itemsEqual",
|
|
336
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
337
|
+
}
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"kind": "js",
|
|
341
|
+
"name": "getItemsArrayOfItem",
|
|
342
|
+
"declaration": {
|
|
343
|
+
"name": "getItemsArrayOfItem",
|
|
344
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
345
|
+
}
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
"kind": "js",
|
|
349
|
+
"name": "getElementItem",
|
|
350
|
+
"declaration": {
|
|
351
|
+
"name": "getElementItem",
|
|
352
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
"kind": "js",
|
|
357
|
+
"name": "fireMove",
|
|
358
|
+
"declaration": {
|
|
359
|
+
"name": "fireMove",
|
|
360
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
361
|
+
}
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
"kind": "js",
|
|
365
|
+
"name": "fireResize",
|
|
366
|
+
"declaration": {
|
|
367
|
+
"name": "fireResize",
|
|
368
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"kind": "js",
|
|
373
|
+
"name": "fireRemove",
|
|
374
|
+
"declaration": {
|
|
375
|
+
"name": "fireRemove",
|
|
376
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
377
|
+
}
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"kind": "js",
|
|
381
|
+
"name": "findAncestorInstance",
|
|
382
|
+
"declaration": {
|
|
383
|
+
"name": "findAncestorInstance",
|
|
384
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
385
|
+
}
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"kind": "js",
|
|
389
|
+
"name": "getParentLayout",
|
|
390
|
+
"declaration": {
|
|
391
|
+
"name": "getParentLayout",
|
|
392
|
+
"module": "src/vaadin-dashboard-helpers.js"
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
]
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"kind": "javascript-module",
|
|
399
|
+
"path": "src/vaadin-dashboard-item-mixin.js",
|
|
400
|
+
"declarations": [
|
|
401
|
+
{
|
|
402
|
+
"kind": "function",
|
|
403
|
+
"name": "getDefaultI18n",
|
|
404
|
+
"description": "Returns a new object with the default i18n values"
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"kind": "mixin",
|
|
408
|
+
"description": "Shared functionality between widgets and sections",
|
|
409
|
+
"name": "DashboardItemMixin",
|
|
410
|
+
"members": [],
|
|
411
|
+
"events": [
|
|
412
|
+
{
|
|
413
|
+
"name": "item-move-mode-changed",
|
|
414
|
+
"type": {
|
|
415
|
+
"text": "CustomEvent"
|
|
416
|
+
}
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
"name": "item-resize-mode-changed",
|
|
420
|
+
"type": {
|
|
421
|
+
"text": "CustomEvent"
|
|
422
|
+
}
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"name": "item-selected-changed",
|
|
426
|
+
"type": {
|
|
427
|
+
"text": "CustomEvent"
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
],
|
|
431
|
+
"attributes": [
|
|
432
|
+
{
|
|
433
|
+
"name": "focused",
|
|
434
|
+
"type": {
|
|
435
|
+
"text": "boolean"
|
|
436
|
+
},
|
|
437
|
+
"fieldName": "__focused"
|
|
438
|
+
},
|
|
439
|
+
{
|
|
440
|
+
"name": "move-mode",
|
|
441
|
+
"type": {
|
|
442
|
+
"text": "boolean"
|
|
443
|
+
},
|
|
444
|
+
"fieldName": "__moveMode"
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"name": "resize-mode",
|
|
448
|
+
"type": {
|
|
449
|
+
"text": "boolean"
|
|
450
|
+
},
|
|
451
|
+
"fieldName": "__resizeMode"
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"name": "selected",
|
|
455
|
+
"type": {
|
|
456
|
+
"text": "boolean"
|
|
457
|
+
},
|
|
458
|
+
"fieldName": "__selected"
|
|
459
|
+
}
|
|
460
|
+
],
|
|
461
|
+
"mixins": [
|
|
462
|
+
{
|
|
463
|
+
"name": "ResizeMixin",
|
|
464
|
+
"package": "@vaadin/component-base/src/resize-mixin.js"
|
|
465
|
+
}
|
|
466
|
+
],
|
|
467
|
+
"parameters": [
|
|
468
|
+
{
|
|
469
|
+
"name": "superClass"
|
|
470
|
+
}
|
|
471
|
+
]
|
|
472
|
+
}
|
|
473
|
+
],
|
|
474
|
+
"exports": [
|
|
475
|
+
{
|
|
476
|
+
"kind": "js",
|
|
477
|
+
"name": "getDefaultI18n",
|
|
478
|
+
"declaration": {
|
|
479
|
+
"name": "getDefaultI18n",
|
|
480
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
481
|
+
}
|
|
482
|
+
},
|
|
483
|
+
{
|
|
484
|
+
"kind": "js",
|
|
485
|
+
"name": "DashboardItemMixin",
|
|
486
|
+
"declaration": {
|
|
487
|
+
"name": "DashboardItemMixin",
|
|
488
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
]
|
|
492
|
+
},
|
|
493
|
+
{
|
|
494
|
+
"kind": "javascript-module",
|
|
495
|
+
"path": "src/vaadin-dashboard-layout-mixin.js",
|
|
496
|
+
"declarations": [
|
|
497
|
+
{
|
|
498
|
+
"kind": "mixin",
|
|
499
|
+
"description": "A mixin to enable the dashboard layout functionality",
|
|
500
|
+
"name": "DashboardLayoutMixin",
|
|
501
|
+
"members": [
|
|
502
|
+
{
|
|
503
|
+
"kind": "field",
|
|
504
|
+
"name": "denseLayout",
|
|
505
|
+
"privacy": "public",
|
|
506
|
+
"type": {
|
|
507
|
+
"text": "boolean"
|
|
508
|
+
},
|
|
509
|
+
"description": "Whether the dashboard layout is dense.",
|
|
510
|
+
"attribute": "dense-layout"
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"kind": "field",
|
|
514
|
+
"name": "rootHeadingLevel",
|
|
515
|
+
"privacy": "public",
|
|
516
|
+
"type": {
|
|
517
|
+
"text": "number"
|
|
518
|
+
},
|
|
519
|
+
"description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
|
|
520
|
+
"attribute": "root-heading-level"
|
|
521
|
+
}
|
|
522
|
+
],
|
|
523
|
+
"events": [
|
|
524
|
+
{
|
|
525
|
+
"name": "dashboard-root-heading-level-changed",
|
|
526
|
+
"type": {
|
|
527
|
+
"text": "CustomEvent"
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
],
|
|
531
|
+
"attributes": [
|
|
532
|
+
{
|
|
533
|
+
"name": "dense-layout",
|
|
534
|
+
"type": {
|
|
535
|
+
"text": "boolean"
|
|
536
|
+
},
|
|
537
|
+
"description": "Whether the dashboard layout is dense.",
|
|
538
|
+
"fieldName": "denseLayout"
|
|
539
|
+
},
|
|
540
|
+
{
|
|
541
|
+
"name": "root-heading-level",
|
|
542
|
+
"type": {
|
|
543
|
+
"text": "number"
|
|
544
|
+
},
|
|
545
|
+
"description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
|
|
546
|
+
"fieldName": "rootHeadingLevel"
|
|
547
|
+
}
|
|
548
|
+
],
|
|
549
|
+
"mixins": [
|
|
550
|
+
{
|
|
551
|
+
"name": "ResizeMixin",
|
|
552
|
+
"package": "@vaadin/component-base/src/resize-mixin.js"
|
|
553
|
+
}
|
|
554
|
+
],
|
|
555
|
+
"parameters": [
|
|
556
|
+
{
|
|
557
|
+
"name": "superClass"
|
|
558
|
+
}
|
|
559
|
+
]
|
|
560
|
+
}
|
|
561
|
+
],
|
|
562
|
+
"exports": [
|
|
563
|
+
{
|
|
564
|
+
"kind": "js",
|
|
565
|
+
"name": "DashboardLayoutMixin",
|
|
566
|
+
"declaration": {
|
|
567
|
+
"name": "DashboardLayoutMixin",
|
|
568
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
]
|
|
572
|
+
},
|
|
573
|
+
{
|
|
574
|
+
"kind": "javascript-module",
|
|
575
|
+
"path": "src/vaadin-dashboard-layout.js",
|
|
576
|
+
"declarations": [
|
|
577
|
+
{
|
|
578
|
+
"kind": "class",
|
|
579
|
+
"description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n <vaadin-dashboard-section section-title=\"Section\">\n <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the layout\n`--vaadin-dashboard-col-max-width` | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-col-max-count` | maximum column count of the layout\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
580
|
+
"name": "DashboardLayout",
|
|
581
|
+
"members": [
|
|
582
|
+
{
|
|
583
|
+
"kind": "field",
|
|
584
|
+
"name": "denseLayout",
|
|
585
|
+
"privacy": "public",
|
|
586
|
+
"type": {
|
|
587
|
+
"text": "boolean"
|
|
588
|
+
},
|
|
589
|
+
"description": "Whether the dashboard layout is dense.",
|
|
590
|
+
"attribute": "dense-layout",
|
|
591
|
+
"inheritedFrom": {
|
|
592
|
+
"name": "DashboardLayoutMixin",
|
|
593
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
594
|
+
}
|
|
595
|
+
},
|
|
596
|
+
{
|
|
597
|
+
"kind": "field",
|
|
598
|
+
"name": "rootHeadingLevel",
|
|
599
|
+
"privacy": "public",
|
|
600
|
+
"type": {
|
|
601
|
+
"text": "number"
|
|
602
|
+
},
|
|
603
|
+
"description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
|
|
604
|
+
"attribute": "root-heading-level",
|
|
605
|
+
"inheritedFrom": {
|
|
606
|
+
"name": "DashboardLayoutMixin",
|
|
607
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
],
|
|
611
|
+
"mixins": [
|
|
612
|
+
{
|
|
613
|
+
"name": "DashboardLayoutMixin",
|
|
614
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
"name": "ElementMixin",
|
|
618
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
619
|
+
},
|
|
620
|
+
{
|
|
621
|
+
"name": "ThemableMixin",
|
|
622
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
623
|
+
},
|
|
624
|
+
{
|
|
625
|
+
"name": "PolylitMixin",
|
|
626
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
627
|
+
},
|
|
628
|
+
{
|
|
629
|
+
"name": "LumoInjectionMixin",
|
|
630
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
631
|
+
}
|
|
632
|
+
],
|
|
633
|
+
"superclass": {
|
|
634
|
+
"name": "LitElement",
|
|
635
|
+
"package": "lit"
|
|
636
|
+
},
|
|
637
|
+
"tagName": "vaadin-dashboard-layout",
|
|
638
|
+
"customElement": true,
|
|
639
|
+
"attributes": [
|
|
640
|
+
{
|
|
641
|
+
"name": "dense-layout",
|
|
642
|
+
"type": {
|
|
643
|
+
"text": "boolean"
|
|
644
|
+
},
|
|
645
|
+
"description": "Whether the dashboard layout is dense.",
|
|
646
|
+
"fieldName": "denseLayout",
|
|
647
|
+
"inheritedFrom": {
|
|
648
|
+
"name": "DashboardLayoutMixin",
|
|
649
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
650
|
+
}
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"name": "root-heading-level",
|
|
654
|
+
"type": {
|
|
655
|
+
"text": "number"
|
|
656
|
+
},
|
|
657
|
+
"description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
|
|
658
|
+
"fieldName": "rootHeadingLevel",
|
|
659
|
+
"inheritedFrom": {
|
|
660
|
+
"name": "DashboardLayoutMixin",
|
|
661
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
],
|
|
665
|
+
"events": [
|
|
666
|
+
{
|
|
667
|
+
"name": "dashboard-root-heading-level-changed",
|
|
668
|
+
"type": {
|
|
669
|
+
"text": "CustomEvent"
|
|
670
|
+
},
|
|
671
|
+
"inheritedFrom": {
|
|
672
|
+
"name": "DashboardLayoutMixin",
|
|
673
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
]
|
|
677
|
+
}
|
|
678
|
+
],
|
|
679
|
+
"exports": [
|
|
680
|
+
{
|
|
681
|
+
"kind": "js",
|
|
682
|
+
"name": "DashboardLayout",
|
|
683
|
+
"declaration": {
|
|
684
|
+
"name": "DashboardLayout",
|
|
685
|
+
"module": "src/vaadin-dashboard-layout.js"
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
]
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"kind": "javascript-module",
|
|
692
|
+
"path": "src/vaadin-dashboard-section.js",
|
|
693
|
+
"declarations": [
|
|
694
|
+
{
|
|
695
|
+
"kind": "class",
|
|
696
|
+
"description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|-------------\n`header` | The header of the section\n`title` | The title of the section\n`move-button` | The move button\n`remove-button` | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
697
|
+
"name": "DashboardSection",
|
|
698
|
+
"members": [
|
|
699
|
+
{
|
|
700
|
+
"kind": "field",
|
|
701
|
+
"name": "sectionTitle",
|
|
702
|
+
"privacy": "public",
|
|
703
|
+
"type": {
|
|
704
|
+
"text": "string | null | undefined"
|
|
705
|
+
},
|
|
706
|
+
"description": "The title of the section",
|
|
707
|
+
"attribute": "section-title"
|
|
708
|
+
}
|
|
709
|
+
],
|
|
710
|
+
"attributes": [
|
|
711
|
+
{
|
|
712
|
+
"name": "focused",
|
|
713
|
+
"type": {
|
|
714
|
+
"text": "boolean"
|
|
715
|
+
},
|
|
716
|
+
"fieldName": "__focused",
|
|
717
|
+
"inheritedFrom": {
|
|
718
|
+
"name": "DashboardItemMixin",
|
|
719
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
720
|
+
}
|
|
721
|
+
},
|
|
722
|
+
{
|
|
723
|
+
"name": "move-mode",
|
|
724
|
+
"type": {
|
|
725
|
+
"text": "boolean"
|
|
726
|
+
},
|
|
727
|
+
"fieldName": "__moveMode",
|
|
728
|
+
"inheritedFrom": {
|
|
729
|
+
"name": "DashboardItemMixin",
|
|
730
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
731
|
+
}
|
|
732
|
+
},
|
|
733
|
+
{
|
|
734
|
+
"name": "resize-mode",
|
|
735
|
+
"type": {
|
|
736
|
+
"text": "boolean"
|
|
737
|
+
},
|
|
738
|
+
"fieldName": "__resizeMode",
|
|
739
|
+
"inheritedFrom": {
|
|
740
|
+
"name": "DashboardItemMixin",
|
|
741
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
742
|
+
}
|
|
743
|
+
},
|
|
744
|
+
{
|
|
745
|
+
"name": "section-title",
|
|
746
|
+
"type": {
|
|
747
|
+
"text": "string | null | undefined"
|
|
748
|
+
},
|
|
749
|
+
"description": "The title of the section",
|
|
750
|
+
"fieldName": "sectionTitle"
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"name": "selected",
|
|
754
|
+
"type": {
|
|
755
|
+
"text": "boolean"
|
|
756
|
+
},
|
|
757
|
+
"fieldName": "__selected",
|
|
758
|
+
"inheritedFrom": {
|
|
759
|
+
"name": "DashboardItemMixin",
|
|
760
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
],
|
|
764
|
+
"mixins": [
|
|
765
|
+
{
|
|
766
|
+
"name": "DashboardItemMixin",
|
|
767
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
768
|
+
},
|
|
769
|
+
{
|
|
770
|
+
"name": "ElementMixin",
|
|
771
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"name": "ThemableMixin",
|
|
775
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
776
|
+
},
|
|
777
|
+
{
|
|
778
|
+
"name": "PolylitMixin",
|
|
779
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
780
|
+
},
|
|
781
|
+
{
|
|
782
|
+
"name": "LumoInjectionMixin",
|
|
783
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
784
|
+
}
|
|
785
|
+
],
|
|
786
|
+
"superclass": {
|
|
787
|
+
"name": "LitElement",
|
|
788
|
+
"package": "lit"
|
|
789
|
+
},
|
|
790
|
+
"tagName": "vaadin-dashboard-section",
|
|
791
|
+
"customElement": true,
|
|
792
|
+
"events": [
|
|
793
|
+
{
|
|
794
|
+
"name": "item-move-mode-changed",
|
|
795
|
+
"type": {
|
|
796
|
+
"text": "CustomEvent"
|
|
797
|
+
},
|
|
798
|
+
"inheritedFrom": {
|
|
799
|
+
"name": "DashboardItemMixin",
|
|
800
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
801
|
+
}
|
|
802
|
+
},
|
|
803
|
+
{
|
|
804
|
+
"name": "item-resize-mode-changed",
|
|
805
|
+
"type": {
|
|
806
|
+
"text": "CustomEvent"
|
|
807
|
+
},
|
|
808
|
+
"inheritedFrom": {
|
|
809
|
+
"name": "DashboardItemMixin",
|
|
810
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
811
|
+
}
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"name": "item-selected-changed",
|
|
815
|
+
"type": {
|
|
816
|
+
"text": "CustomEvent"
|
|
817
|
+
},
|
|
818
|
+
"inheritedFrom": {
|
|
819
|
+
"name": "DashboardItemMixin",
|
|
820
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
821
|
+
}
|
|
822
|
+
}
|
|
823
|
+
]
|
|
824
|
+
}
|
|
825
|
+
],
|
|
826
|
+
"exports": [
|
|
827
|
+
{
|
|
828
|
+
"kind": "js",
|
|
829
|
+
"name": "DashboardSection",
|
|
830
|
+
"declaration": {
|
|
831
|
+
"name": "DashboardSection",
|
|
832
|
+
"module": "src/vaadin-dashboard-section.js"
|
|
833
|
+
}
|
|
834
|
+
}
|
|
835
|
+
]
|
|
836
|
+
},
|
|
837
|
+
{
|
|
838
|
+
"kind": "javascript-module",
|
|
839
|
+
"path": "src/vaadin-dashboard-widget.js",
|
|
840
|
+
"declarations": [
|
|
841
|
+
{
|
|
842
|
+
"kind": "class",
|
|
843
|
+
"description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
844
|
+
"name": "DashboardWidget",
|
|
845
|
+
"members": [
|
|
846
|
+
{
|
|
847
|
+
"kind": "field",
|
|
848
|
+
"name": "widgetTitle",
|
|
849
|
+
"privacy": "public",
|
|
850
|
+
"type": {
|
|
851
|
+
"text": "string | null | undefined"
|
|
852
|
+
},
|
|
853
|
+
"description": "The title of the widget.",
|
|
854
|
+
"attribute": "widget-title"
|
|
855
|
+
}
|
|
856
|
+
],
|
|
857
|
+
"attributes": [
|
|
858
|
+
{
|
|
859
|
+
"name": "focused",
|
|
860
|
+
"type": {
|
|
861
|
+
"text": "boolean"
|
|
862
|
+
},
|
|
863
|
+
"fieldName": "__focused",
|
|
864
|
+
"inheritedFrom": {
|
|
865
|
+
"name": "DashboardItemMixin",
|
|
866
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
867
|
+
}
|
|
868
|
+
},
|
|
869
|
+
{
|
|
870
|
+
"name": "move-mode",
|
|
871
|
+
"type": {
|
|
872
|
+
"text": "boolean"
|
|
873
|
+
},
|
|
874
|
+
"fieldName": "__moveMode",
|
|
875
|
+
"inheritedFrom": {
|
|
876
|
+
"name": "DashboardItemMixin",
|
|
877
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
878
|
+
}
|
|
879
|
+
},
|
|
880
|
+
{
|
|
881
|
+
"name": "resize-mode",
|
|
882
|
+
"type": {
|
|
883
|
+
"text": "boolean"
|
|
884
|
+
},
|
|
885
|
+
"fieldName": "__resizeMode",
|
|
886
|
+
"inheritedFrom": {
|
|
887
|
+
"name": "DashboardItemMixin",
|
|
888
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
889
|
+
}
|
|
890
|
+
},
|
|
891
|
+
{
|
|
892
|
+
"name": "selected",
|
|
893
|
+
"type": {
|
|
894
|
+
"text": "boolean"
|
|
895
|
+
},
|
|
896
|
+
"fieldName": "__selected",
|
|
897
|
+
"inheritedFrom": {
|
|
898
|
+
"name": "DashboardItemMixin",
|
|
899
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
900
|
+
}
|
|
901
|
+
},
|
|
902
|
+
{
|
|
903
|
+
"name": "widget-title",
|
|
904
|
+
"type": {
|
|
905
|
+
"text": "string | null | undefined"
|
|
906
|
+
},
|
|
907
|
+
"description": "The title of the widget.",
|
|
908
|
+
"fieldName": "widgetTitle"
|
|
909
|
+
}
|
|
910
|
+
],
|
|
911
|
+
"mixins": [
|
|
912
|
+
{
|
|
913
|
+
"name": "DashboardItemMixin",
|
|
914
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
915
|
+
},
|
|
916
|
+
{
|
|
917
|
+
"name": "ElementMixin",
|
|
918
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
919
|
+
},
|
|
920
|
+
{
|
|
921
|
+
"name": "ThemableMixin",
|
|
922
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
923
|
+
},
|
|
924
|
+
{
|
|
925
|
+
"name": "PolylitMixin",
|
|
926
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
927
|
+
},
|
|
928
|
+
{
|
|
929
|
+
"name": "LumoInjectionMixin",
|
|
930
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
931
|
+
}
|
|
932
|
+
],
|
|
933
|
+
"superclass": {
|
|
934
|
+
"name": "LitElement",
|
|
935
|
+
"package": "lit"
|
|
936
|
+
},
|
|
937
|
+
"tagName": "vaadin-dashboard-widget",
|
|
938
|
+
"customElement": true,
|
|
939
|
+
"events": [
|
|
940
|
+
{
|
|
941
|
+
"name": "item-move-mode-changed",
|
|
942
|
+
"type": {
|
|
943
|
+
"text": "CustomEvent"
|
|
944
|
+
},
|
|
945
|
+
"inheritedFrom": {
|
|
946
|
+
"name": "DashboardItemMixin",
|
|
947
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
948
|
+
}
|
|
949
|
+
},
|
|
950
|
+
{
|
|
951
|
+
"name": "item-resize-mode-changed",
|
|
952
|
+
"type": {
|
|
953
|
+
"text": "CustomEvent"
|
|
954
|
+
},
|
|
955
|
+
"inheritedFrom": {
|
|
956
|
+
"name": "DashboardItemMixin",
|
|
957
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
958
|
+
}
|
|
959
|
+
},
|
|
960
|
+
{
|
|
961
|
+
"name": "item-selected-changed",
|
|
962
|
+
"type": {
|
|
963
|
+
"text": "CustomEvent"
|
|
964
|
+
},
|
|
965
|
+
"inheritedFrom": {
|
|
966
|
+
"name": "DashboardItemMixin",
|
|
967
|
+
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
968
|
+
}
|
|
969
|
+
}
|
|
970
|
+
]
|
|
971
|
+
}
|
|
972
|
+
],
|
|
973
|
+
"exports": [
|
|
974
|
+
{
|
|
975
|
+
"kind": "js",
|
|
976
|
+
"name": "DashboardWidget",
|
|
977
|
+
"declaration": {
|
|
978
|
+
"name": "DashboardWidget",
|
|
979
|
+
"module": "src/vaadin-dashboard-widget.js"
|
|
980
|
+
}
|
|
981
|
+
}
|
|
982
|
+
]
|
|
983
|
+
},
|
|
984
|
+
{
|
|
985
|
+
"kind": "javascript-module",
|
|
986
|
+
"path": "src/vaadin-dashboard.js",
|
|
987
|
+
"declarations": [
|
|
988
|
+
{
|
|
989
|
+
"kind": "class",
|
|
990
|
+
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
991
|
+
"name": "Dashboard",
|
|
992
|
+
"members": [
|
|
993
|
+
{
|
|
994
|
+
"kind": "field",
|
|
995
|
+
"name": "denseLayout",
|
|
996
|
+
"privacy": "public",
|
|
997
|
+
"type": {
|
|
998
|
+
"text": "boolean"
|
|
999
|
+
},
|
|
1000
|
+
"description": "Whether the dashboard layout is dense.",
|
|
1001
|
+
"attribute": "dense-layout",
|
|
1002
|
+
"inheritedFrom": {
|
|
1003
|
+
"name": "DashboardLayoutMixin",
|
|
1004
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
1005
|
+
}
|
|
1006
|
+
},
|
|
1007
|
+
{
|
|
1008
|
+
"kind": "field",
|
|
1009
|
+
"name": "editable",
|
|
1010
|
+
"privacy": "public",
|
|
1011
|
+
"type": {
|
|
1012
|
+
"text": "boolean"
|
|
1013
|
+
},
|
|
1014
|
+
"description": "Whether the dashboard is editable.",
|
|
1015
|
+
"attribute": "editable"
|
|
1016
|
+
},
|
|
1017
|
+
{
|
|
1018
|
+
"kind": "field",
|
|
1019
|
+
"name": "items",
|
|
1020
|
+
"privacy": "public",
|
|
1021
|
+
"type": {
|
|
1022
|
+
"text": "!Array<!DashboardItem> | null | undefined"
|
|
1023
|
+
},
|
|
1024
|
+
"description": "An array containing the items of the dashboard",
|
|
1025
|
+
"attribute": "items"
|
|
1026
|
+
},
|
|
1027
|
+
{
|
|
1028
|
+
"kind": "field",
|
|
1029
|
+
"name": "renderer",
|
|
1030
|
+
"privacy": "public",
|
|
1031
|
+
"type": {
|
|
1032
|
+
"text": "DashboardRenderer | null | undefined"
|
|
1033
|
+
},
|
|
1034
|
+
"description": "Custom function for rendering a widget for each dashboard item.\nPlacing something else than a widget in the wrapper is not supported.\nReceives three arguments:\n\n- `root` The container for the widget.\n- `dashboard` The reference to the `<vaadin-dashboard>` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.item` The item.",
|
|
1035
|
+
"attribute": "renderer"
|
|
1036
|
+
},
|
|
1037
|
+
{
|
|
1038
|
+
"kind": "field",
|
|
1039
|
+
"name": "rootHeadingLevel",
|
|
1040
|
+
"privacy": "public",
|
|
1041
|
+
"type": {
|
|
1042
|
+
"text": "number"
|
|
1043
|
+
},
|
|
1044
|
+
"description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
|
|
1045
|
+
"attribute": "root-heading-level",
|
|
1046
|
+
"inheritedFrom": {
|
|
1047
|
+
"name": "DashboardLayoutMixin",
|
|
1048
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
],
|
|
1052
|
+
"events": [
|
|
1053
|
+
{
|
|
1054
|
+
"type": {
|
|
1055
|
+
"text": "CustomEvent"
|
|
1056
|
+
},
|
|
1057
|
+
"description": "Fired before an item is removed. Calling preventDefault() on the event will cancel the removal.",
|
|
1058
|
+
"name": "dashboard-item-before-remove"
|
|
1059
|
+
},
|
|
1060
|
+
{
|
|
1061
|
+
"type": {
|
|
1062
|
+
"text": "CustomEvent"
|
|
1063
|
+
},
|
|
1064
|
+
"description": "Fired when an item move mode changed",
|
|
1065
|
+
"name": "dashboard-item-move-mode-changed"
|
|
1066
|
+
},
|
|
1067
|
+
{
|
|
1068
|
+
"type": {
|
|
1069
|
+
"text": "CustomEvent"
|
|
1070
|
+
},
|
|
1071
|
+
"description": "Fired when an item was moved",
|
|
1072
|
+
"name": "dashboard-item-moved"
|
|
1073
|
+
},
|
|
1074
|
+
{
|
|
1075
|
+
"name": "dashboard-item-removed",
|
|
1076
|
+
"type": {
|
|
1077
|
+
"text": "CustomEvent"
|
|
1078
|
+
},
|
|
1079
|
+
"description": "Fired when an item was removed"
|
|
1080
|
+
},
|
|
1081
|
+
{
|
|
1082
|
+
"type": {
|
|
1083
|
+
"text": "CustomEvent"
|
|
1084
|
+
},
|
|
1085
|
+
"description": "Fired when an item resize mode changed",
|
|
1086
|
+
"name": "dashboard-item-resize-mode-changed"
|
|
1087
|
+
},
|
|
1088
|
+
{
|
|
1089
|
+
"type": {
|
|
1090
|
+
"text": "CustomEvent"
|
|
1091
|
+
},
|
|
1092
|
+
"description": "Fired when an item was resized",
|
|
1093
|
+
"name": "dashboard-item-resized"
|
|
1094
|
+
},
|
|
1095
|
+
{
|
|
1096
|
+
"type": {
|
|
1097
|
+
"text": "CustomEvent"
|
|
1098
|
+
},
|
|
1099
|
+
"description": "Fired when an item selected state changed",
|
|
1100
|
+
"name": "dashboard-item-selected-changed"
|
|
1101
|
+
},
|
|
1102
|
+
{
|
|
1103
|
+
"name": "dashboard-root-heading-level-changed",
|
|
1104
|
+
"type": {
|
|
1105
|
+
"text": "CustomEvent"
|
|
1106
|
+
},
|
|
1107
|
+
"inheritedFrom": {
|
|
1108
|
+
"name": "DashboardLayoutMixin",
|
|
1109
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
1110
|
+
}
|
|
1111
|
+
},
|
|
1112
|
+
{
|
|
1113
|
+
"name": "eventName",
|
|
1114
|
+
"type": {
|
|
1115
|
+
"text": "CustomEvent"
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
],
|
|
1119
|
+
"attributes": [
|
|
1120
|
+
{
|
|
1121
|
+
"name": "dense-layout",
|
|
1122
|
+
"type": {
|
|
1123
|
+
"text": "boolean"
|
|
1124
|
+
},
|
|
1125
|
+
"description": "Whether the dashboard layout is dense.",
|
|
1126
|
+
"fieldName": "denseLayout",
|
|
1127
|
+
"inheritedFrom": {
|
|
1128
|
+
"name": "DashboardLayoutMixin",
|
|
1129
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
1130
|
+
}
|
|
1131
|
+
},
|
|
1132
|
+
{
|
|
1133
|
+
"name": "editable",
|
|
1134
|
+
"type": {
|
|
1135
|
+
"text": "boolean"
|
|
1136
|
+
},
|
|
1137
|
+
"description": "Whether the dashboard is editable.",
|
|
1138
|
+
"fieldName": "editable"
|
|
1139
|
+
},
|
|
1140
|
+
{
|
|
1141
|
+
"name": "renderer",
|
|
1142
|
+
"type": {
|
|
1143
|
+
"text": "DashboardRenderer | null | undefined"
|
|
1144
|
+
},
|
|
1145
|
+
"description": "Custom function for rendering a widget for each dashboard item.\nPlacing something else than a widget in the wrapper is not supported.\nReceives three arguments:\n\n- `root` The container for the widget.\n- `dashboard` The reference to the `<vaadin-dashboard>` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.item` The item.",
|
|
1146
|
+
"fieldName": "renderer"
|
|
1147
|
+
},
|
|
1148
|
+
{
|
|
1149
|
+
"name": "root-heading-level",
|
|
1150
|
+
"type": {
|
|
1151
|
+
"text": "number"
|
|
1152
|
+
},
|
|
1153
|
+
"description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
|
|
1154
|
+
"fieldName": "rootHeadingLevel",
|
|
1155
|
+
"inheritedFrom": {
|
|
1156
|
+
"name": "DashboardLayoutMixin",
|
|
1157
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
1158
|
+
}
|
|
1159
|
+
}
|
|
1160
|
+
],
|
|
1161
|
+
"mixins": [
|
|
1162
|
+
{
|
|
1163
|
+
"name": "DashboardLayoutMixin",
|
|
1164
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
1165
|
+
},
|
|
1166
|
+
{
|
|
1167
|
+
"name": "I18nMixin",
|
|
1168
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1169
|
+
}
|
|
1170
|
+
],
|
|
1171
|
+
"superclass": {
|
|
1172
|
+
"name": "DEFAULT_I18N",
|
|
1173
|
+
"module": "src/vaadin-dashboard.js"
|
|
1174
|
+
},
|
|
1175
|
+
"tagName": "vaadin-dashboard",
|
|
1176
|
+
"customElement": true
|
|
1177
|
+
}
|
|
1178
|
+
],
|
|
1179
|
+
"exports": [
|
|
1180
|
+
{
|
|
1181
|
+
"kind": "js",
|
|
1182
|
+
"name": "Dashboard",
|
|
1183
|
+
"declaration": {
|
|
1184
|
+
"name": "Dashboard",
|
|
1185
|
+
"module": "src/vaadin-dashboard.js"
|
|
1186
|
+
}
|
|
1187
|
+
}
|
|
1188
|
+
]
|
|
1189
|
+
}
|
|
1190
|
+
]
|
|
1191
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dashboard",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-alpha7",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"vaadin-*.d.ts",
|
|
25
25
|
"vaadin-*.js",
|
|
26
|
+
"custom-elements.json",
|
|
26
27
|
"web-types.json",
|
|
27
28
|
"web-types.lit.json"
|
|
28
29
|
],
|
|
@@ -36,24 +37,25 @@
|
|
|
36
37
|
],
|
|
37
38
|
"dependencies": {
|
|
38
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
40
|
-
"@vaadin/button": "25.1.0-
|
|
41
|
-
"@vaadin/component-base": "25.1.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.1.0-alpha7",
|
|
41
|
+
"@vaadin/button": "25.1.0-alpha7",
|
|
42
|
+
"@vaadin/component-base": "25.1.0-alpha7",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha7",
|
|
43
44
|
"lit": "^3.0.0"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
46
|
-
"@vaadin/aura": "25.1.0-
|
|
47
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
47
|
+
"@vaadin/aura": "25.1.0-alpha7",
|
|
48
|
+
"@vaadin/chai-plugins": "25.1.0-alpha7",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha7",
|
|
49
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha7",
|
|
51
52
|
"sinon": "^21.0.0"
|
|
52
53
|
},
|
|
53
54
|
"cvdlName": "vaadin-dashboard",
|
|
55
|
+
"customElements": "custom-elements.json",
|
|
54
56
|
"web-types": [
|
|
55
57
|
"web-types.json",
|
|
56
58
|
"web-types.lit.json"
|
|
57
59
|
],
|
|
58
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "98c586125f769c8fefd307536965293668fda81d"
|
|
59
61
|
}
|
|
@@ -21,7 +21,7 @@ import { dashboardButtonStyles } from './styles/vaadin-dashboard-button-base-sty
|
|
|
21
21
|
/**
|
|
22
22
|
* An element used internally by `<vaadin-dashboard>`. Not intended to be used separately.
|
|
23
23
|
*
|
|
24
|
-
* @customElement
|
|
24
|
+
* @customElement vaadin-dashboard-button
|
|
25
25
|
* @extends HTMLElement
|
|
26
26
|
* @mixes ButtonMixin
|
|
27
27
|
* @mixes ElementMixin
|
|
@@ -51,7 +51,7 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
|
|
|
51
51
|
*
|
|
52
52
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
53
53
|
*
|
|
54
|
-
* @customElement
|
|
54
|
+
* @customElement vaadin-dashboard-layout
|
|
55
55
|
* @extends HTMLElement
|
|
56
56
|
* @mixes DashboardLayoutMixin
|
|
57
57
|
* @mixes ElementMixin
|
|
@@ -64,7 +64,7 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
|
|
|
64
64
|
*
|
|
65
65
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
66
66
|
*
|
|
67
|
-
* @customElement
|
|
67
|
+
* @customElement vaadin-dashboard-section
|
|
68
68
|
* @extends HTMLElement
|
|
69
69
|
* @mixes ElementMixin
|
|
70
70
|
* @mixes ThemableMixin
|
|
@@ -98,7 +98,7 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
|
|
|
98
98
|
*
|
|
99
99
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
100
100
|
*
|
|
101
|
-
* @customElement
|
|
101
|
+
* @customElement vaadin-dashboard-widget
|
|
102
102
|
* @extends HTMLElement
|
|
103
103
|
* @mixes ElementMixin
|
|
104
104
|
* @mixes ThemableMixin
|
package/src/vaadin-dashboard.js
CHANGED
|
@@ -101,7 +101,7 @@ const DEFAULT_I18N = getDefaultI18n();
|
|
|
101
101
|
* @fires {CustomEvent} dashboard-item-move-mode-changed - Fired when an item move mode changed
|
|
102
102
|
* @fires {CustomEvent} dashboard-item-resize-mode-changed - Fired when an item resize mode changed
|
|
103
103
|
*
|
|
104
|
-
* @customElement
|
|
104
|
+
* @customElement vaadin-dashboard
|
|
105
105
|
* @extends HTMLElement
|
|
106
106
|
* @mixes ElementMixin
|
|
107
107
|
* @mixes DashboardLayoutMixin
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/dashboard",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha7",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
},
|
|
159
159
|
{
|
|
160
160
|
"name": "vaadin-dashboard",
|
|
161
|
-
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
161
|
+
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
162
162
|
"attributes": [
|
|
163
163
|
{
|
|
164
164
|
"name": "dense-layout",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/dashboard",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha7",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
},
|
|
66
66
|
{
|
|
67
67
|
"name": "vaadin-dashboard",
|
|
68
|
-
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
68
|
+
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
69
69
|
"extension": true,
|
|
70
70
|
"attributes": [
|
|
71
71
|
{
|