@vaadin/dashboard 25.1.2 → 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 +3 -114
- package/package.json +10 -10
- package/src/styles/vaadin-dashboard-layout-base-styles.js +1 -1
- package/src/styles/vaadin-dashboard-section-base-styles.js +0 -4
- package/src/styles/vaadin-dashboard-widget-base-styles.js +1 -13
- package/src/styles/vaadin-dashboard-widget-section-base-styles.js +9 -6
- package/src/vaadin-dashboard-helpers.js +1 -1
- package/src/vaadin-dashboard-item-mixin.js +3 -0
- package/src/vaadin-dashboard-layout-mixin.js +1 -0
- package/src/vaadin-dashboard.js +1 -43
- package/web-types.json +19 -58
- package/web-types.lit.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -343,26 +343,6 @@
|
|
|
343
343
|
"description": "Shared functionality between widgets and sections",
|
|
344
344
|
"name": "DashboardItemMixin",
|
|
345
345
|
"members": [],
|
|
346
|
-
"events": [
|
|
347
|
-
{
|
|
348
|
-
"name": "item-move-mode-changed",
|
|
349
|
-
"type": {
|
|
350
|
-
"text": "CustomEvent"
|
|
351
|
-
}
|
|
352
|
-
},
|
|
353
|
-
{
|
|
354
|
-
"name": "item-resize-mode-changed",
|
|
355
|
-
"type": {
|
|
356
|
-
"text": "CustomEvent"
|
|
357
|
-
}
|
|
358
|
-
},
|
|
359
|
-
{
|
|
360
|
-
"name": "item-selected-changed",
|
|
361
|
-
"type": {
|
|
362
|
-
"text": "CustomEvent"
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
],
|
|
366
346
|
"attributes": [],
|
|
367
347
|
"mixins": [
|
|
368
348
|
{
|
|
@@ -426,14 +406,6 @@
|
|
|
426
406
|
"attribute": "root-heading-level"
|
|
427
407
|
}
|
|
428
408
|
],
|
|
429
|
-
"events": [
|
|
430
|
-
{
|
|
431
|
-
"name": "dashboard-root-heading-level-changed",
|
|
432
|
-
"type": {
|
|
433
|
-
"text": "CustomEvent"
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
],
|
|
437
409
|
"attributes": [
|
|
438
410
|
{
|
|
439
411
|
"name": "dense-layout",
|
|
@@ -568,18 +540,7 @@
|
|
|
568
540
|
}
|
|
569
541
|
}
|
|
570
542
|
],
|
|
571
|
-
"events": [
|
|
572
|
-
{
|
|
573
|
-
"name": "dashboard-root-heading-level-changed",
|
|
574
|
-
"type": {
|
|
575
|
-
"text": "CustomEvent"
|
|
576
|
-
},
|
|
577
|
-
"inheritedFrom": {
|
|
578
|
-
"name": "DashboardLayoutMixin",
|
|
579
|
-
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
580
|
-
}
|
|
581
|
-
}
|
|
582
|
-
]
|
|
543
|
+
"events": []
|
|
583
544
|
}
|
|
584
545
|
],
|
|
585
546
|
"exports": [
|
|
@@ -651,38 +612,7 @@
|
|
|
651
612
|
},
|
|
652
613
|
"tagName": "vaadin-dashboard-section",
|
|
653
614
|
"customElement": true,
|
|
654
|
-
"events": [
|
|
655
|
-
{
|
|
656
|
-
"name": "item-move-mode-changed",
|
|
657
|
-
"type": {
|
|
658
|
-
"text": "CustomEvent"
|
|
659
|
-
},
|
|
660
|
-
"inheritedFrom": {
|
|
661
|
-
"name": "DashboardItemMixin",
|
|
662
|
-
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
663
|
-
}
|
|
664
|
-
},
|
|
665
|
-
{
|
|
666
|
-
"name": "item-resize-mode-changed",
|
|
667
|
-
"type": {
|
|
668
|
-
"text": "CustomEvent"
|
|
669
|
-
},
|
|
670
|
-
"inheritedFrom": {
|
|
671
|
-
"name": "DashboardItemMixin",
|
|
672
|
-
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
673
|
-
}
|
|
674
|
-
},
|
|
675
|
-
{
|
|
676
|
-
"name": "item-selected-changed",
|
|
677
|
-
"type": {
|
|
678
|
-
"text": "CustomEvent"
|
|
679
|
-
},
|
|
680
|
-
"inheritedFrom": {
|
|
681
|
-
"name": "DashboardItemMixin",
|
|
682
|
-
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
683
|
-
}
|
|
684
|
-
}
|
|
685
|
-
]
|
|
615
|
+
"events": []
|
|
686
616
|
}
|
|
687
617
|
],
|
|
688
618
|
"exports": [
|
|
@@ -754,38 +684,7 @@
|
|
|
754
684
|
},
|
|
755
685
|
"tagName": "vaadin-dashboard-widget",
|
|
756
686
|
"customElement": true,
|
|
757
|
-
"events": [
|
|
758
|
-
{
|
|
759
|
-
"name": "item-move-mode-changed",
|
|
760
|
-
"type": {
|
|
761
|
-
"text": "CustomEvent"
|
|
762
|
-
},
|
|
763
|
-
"inheritedFrom": {
|
|
764
|
-
"name": "DashboardItemMixin",
|
|
765
|
-
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
766
|
-
}
|
|
767
|
-
},
|
|
768
|
-
{
|
|
769
|
-
"name": "item-resize-mode-changed",
|
|
770
|
-
"type": {
|
|
771
|
-
"text": "CustomEvent"
|
|
772
|
-
},
|
|
773
|
-
"inheritedFrom": {
|
|
774
|
-
"name": "DashboardItemMixin",
|
|
775
|
-
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
776
|
-
}
|
|
777
|
-
},
|
|
778
|
-
{
|
|
779
|
-
"name": "item-selected-changed",
|
|
780
|
-
"type": {
|
|
781
|
-
"text": "CustomEvent"
|
|
782
|
-
},
|
|
783
|
-
"inheritedFrom": {
|
|
784
|
-
"name": "DashboardItemMixin",
|
|
785
|
-
"module": "src/vaadin-dashboard-item-mixin.js"
|
|
786
|
-
}
|
|
787
|
-
}
|
|
788
|
-
]
|
|
687
|
+
"events": []
|
|
789
688
|
}
|
|
790
689
|
],
|
|
791
690
|
"exports": [
|
|
@@ -930,16 +829,6 @@
|
|
|
930
829
|
},
|
|
931
830
|
"description": "Fired when an item selected state changed",
|
|
932
831
|
"name": "dashboard-item-selected-changed"
|
|
933
|
-
},
|
|
934
|
-
{
|
|
935
|
-
"name": "dashboard-root-heading-level-changed",
|
|
936
|
-
"type": {
|
|
937
|
-
"text": "CustomEvent"
|
|
938
|
-
},
|
|
939
|
-
"inheritedFrom": {
|
|
940
|
-
"name": "DashboardLayoutMixin",
|
|
941
|
-
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
942
|
-
}
|
|
943
832
|
}
|
|
944
833
|
],
|
|
945
834
|
"attributes": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dashboard",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "
|
|
41
|
-
"@vaadin/button": "
|
|
42
|
-
"@vaadin/component-base": "
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
40
|
+
"@vaadin/a11y-base": "25.2.0-alpha10",
|
|
41
|
+
"@vaadin/button": "25.2.0-alpha10",
|
|
42
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "
|
|
48
|
-
"@vaadin/chai-plugins": "
|
|
49
|
-
"@vaadin/test-runner-commands": "
|
|
47
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
48
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha10",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
52
52
|
"sinon": "^21.0.2"
|
|
53
53
|
},
|
|
54
54
|
"cvdlName": "vaadin-dashboard",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
61
61
|
}
|
|
@@ -41,7 +41,7 @@ export const dashboardLayoutStyles = css`
|
|
|
41
41
|
gap: var(--_gap);
|
|
42
42
|
|
|
43
43
|
/* Default min and max column widths */
|
|
44
|
-
--_default-col-min-width:
|
|
44
|
+
--_default-col-min-width: 20em;
|
|
45
45
|
--_default-col-max-width: 1fr;
|
|
46
46
|
|
|
47
47
|
/* Effective min and max column widths */
|
|
@@ -22,19 +22,7 @@ const widgetStyles = css`
|
|
|
22
22
|
background: var(--_widget-background);
|
|
23
23
|
border-radius: var(--_widget-border-radius);
|
|
24
24
|
box-shadow: var(--_widget-shadow);
|
|
25
|
-
border
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
:host::before {
|
|
29
|
-
content: '';
|
|
30
|
-
position: absolute;
|
|
31
|
-
inset: 0;
|
|
32
|
-
border-color: inherit;
|
|
33
|
-
border-width: var(--_widget-border-width);
|
|
34
|
-
border-style: solid;
|
|
35
|
-
border-radius: inherit;
|
|
36
|
-
pointer-events: none;
|
|
37
|
-
z-index: 1;
|
|
25
|
+
border: var(--_widget-border-width) solid var(--_widget-border-color);
|
|
38
26
|
}
|
|
39
27
|
|
|
40
28
|
:host([hidden]) {
|
|
@@ -21,8 +21,11 @@ export const dashboardWidgetAndSectionStyles = css`
|
|
|
21
21
|
--_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
|
|
22
22
|
--_widget-editable-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
|
|
23
23
|
--_widget-selected-shadow: 0 3px 12px -1px rgba(0, 0, 0, 0.3);
|
|
24
|
-
--_drop-target-background: var(
|
|
25
|
-
|
|
24
|
+
--_drop-target-background-color: var(
|
|
25
|
+
--vaadin-dashboard-drop-target-background-color,
|
|
26
|
+
var(--vaadin-background-container)
|
|
27
|
+
);
|
|
28
|
+
--_drop-target-border: var(--vaadin-dashboard-drop-target-border, 1px dashed var(--vaadin-border-color-secondary));
|
|
26
29
|
--_focus-ring-color: var(--vaadin-focus-ring-color);
|
|
27
30
|
--_focus-ring-width: var(--vaadin-focus-ring-width);
|
|
28
31
|
}
|
|
@@ -34,9 +37,9 @@ export const dashboardWidgetAndSectionStyles = css`
|
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
:host([dragging]) {
|
|
37
|
-
box-shadow: none;
|
|
38
|
-
background: var(--_drop-target-background);
|
|
39
|
-
border
|
|
40
|
+
box-shadow: none !important;
|
|
41
|
+
background: var(--_drop-target-background-color) !important;
|
|
42
|
+
border: var(--_drop-target-border) !important;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
:host([dragging]) * {
|
|
@@ -64,7 +67,7 @@ export const dashboardWidgetAndSectionStyles = css`
|
|
|
64
67
|
}
|
|
65
68
|
|
|
66
69
|
[part='title'] {
|
|
67
|
-
flex: 1;
|
|
70
|
+
flex: 1 1 auto;
|
|
68
71
|
color: var(--vaadin-dashboard-widget-title-color, var(--vaadin-text-color));
|
|
69
72
|
font-size: var(--vaadin-dashboard-widget-title-font-size, 1em);
|
|
70
73
|
font-weight: var(--vaadin-dashboard-widget-title-font-weight, 500);
|
|
@@ -316,6 +316,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
316
316
|
if (!!selected === !!oldSelected) {
|
|
317
317
|
return;
|
|
318
318
|
}
|
|
319
|
+
/** @internal to not document it in CEM */
|
|
319
320
|
this.dispatchEvent(new CustomEvent('item-selected-changed', { bubbles: true, detail: { value: selected } }));
|
|
320
321
|
if (selected) {
|
|
321
322
|
this.__focusTrapController.trapFocus(this.$.focustrap);
|
|
@@ -386,6 +387,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
386
387
|
if (!!moveMode === !!oldMoveMode) {
|
|
387
388
|
return;
|
|
388
389
|
}
|
|
390
|
+
/** @internal to not document it in CEM */
|
|
389
391
|
this.dispatchEvent(new CustomEvent('item-move-mode-changed', { bubbles: true, detail: { value: moveMode } }));
|
|
390
392
|
}
|
|
391
393
|
|
|
@@ -394,6 +396,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
394
396
|
if (!!resizeMode === !!oldResizeMode) {
|
|
395
397
|
return;
|
|
396
398
|
}
|
|
399
|
+
/** @internal to not document it in CEM */
|
|
397
400
|
this.dispatchEvent(new CustomEvent('item-resize-mode-changed', { bubbles: true, detail: { value: resizeMode } }));
|
|
398
401
|
}
|
|
399
402
|
|
|
@@ -92,6 +92,7 @@ export const DashboardLayoutMixin = (superClass) =>
|
|
|
92
92
|
|
|
93
93
|
/** @private */
|
|
94
94
|
__rootHeadingLevelChanged(rootHeadingLevel) {
|
|
95
|
+
/** @internal to not document it in CEM */
|
|
95
96
|
this.dispatchEvent(
|
|
96
97
|
new CustomEvent('dashboard-root-heading-level-changed', { detail: { value: rootHeadingLevel } }),
|
|
97
98
|
);
|
package/src/vaadin-dashboard.js
CHANGED
|
@@ -347,7 +347,7 @@ class Dashboard extends DashboardLayoutMixin(
|
|
|
347
347
|
|
|
348
348
|
/** @private */
|
|
349
349
|
__focusWrapperContent(wrapper) {
|
|
350
|
-
if (wrapper
|
|
350
|
+
if (wrapper?.firstElementChild) {
|
|
351
351
|
wrapper.firstElementChild.focus();
|
|
352
352
|
}
|
|
353
353
|
}
|
|
@@ -501,48 +501,6 @@ class Dashboard extends DashboardLayoutMixin(
|
|
|
501
501
|
});
|
|
502
502
|
}
|
|
503
503
|
}
|
|
504
|
-
|
|
505
|
-
/**
|
|
506
|
-
* Fired when an item selected state changed
|
|
507
|
-
*
|
|
508
|
-
* @event dashboard-item-selected-changed
|
|
509
|
-
*/
|
|
510
|
-
|
|
511
|
-
/**
|
|
512
|
-
* Fired when an item move mode changed
|
|
513
|
-
*
|
|
514
|
-
* @event dashboard-item-move-mode-changed
|
|
515
|
-
*/
|
|
516
|
-
|
|
517
|
-
/**
|
|
518
|
-
* Fired when an item resize mode changed
|
|
519
|
-
*
|
|
520
|
-
* @event dashboard-item-resize-mode-changed
|
|
521
|
-
*/
|
|
522
|
-
|
|
523
|
-
/**
|
|
524
|
-
* Fired when an item was moved
|
|
525
|
-
*
|
|
526
|
-
* @event dashboard-item-moved
|
|
527
|
-
*/
|
|
528
|
-
|
|
529
|
-
/**
|
|
530
|
-
* Fired when an item was resized
|
|
531
|
-
*
|
|
532
|
-
* @event dashboard-item-resized
|
|
533
|
-
*/
|
|
534
|
-
|
|
535
|
-
/**
|
|
536
|
-
* Fired before an item is removed
|
|
537
|
-
*
|
|
538
|
-
* @event dashboard-item-before-remove
|
|
539
|
-
*/
|
|
540
|
-
|
|
541
|
-
/**
|
|
542
|
-
* Fired when an item was removed
|
|
543
|
-
*
|
|
544
|
-
* @event dashboard-item-removed
|
|
545
|
-
*/
|
|
546
504
|
}
|
|
547
505
|
|
|
548
506
|
defineCustomElement(Dashboard);
|
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.
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"description": "Whether the dashboard layout is dense.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"boolean"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"boolean"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -26,9 +24,7 @@
|
|
|
26
24
|
"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",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"number"
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
27
|
+
"number"
|
|
32
28
|
]
|
|
33
29
|
}
|
|
34
30
|
},
|
|
@@ -51,9 +47,7 @@
|
|
|
51
47
|
"description": "Whether the dashboard layout is dense.",
|
|
52
48
|
"value": {
|
|
53
49
|
"type": [
|
|
54
|
-
"boolean"
|
|
55
|
-
"null",
|
|
56
|
-
"undefined"
|
|
50
|
+
"boolean"
|
|
57
51
|
]
|
|
58
52
|
}
|
|
59
53
|
},
|
|
@@ -62,9 +56,7 @@
|
|
|
62
56
|
"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",
|
|
63
57
|
"value": {
|
|
64
58
|
"type": [
|
|
65
|
-
"number"
|
|
66
|
-
"null",
|
|
67
|
-
"undefined"
|
|
59
|
+
"number"
|
|
68
60
|
]
|
|
69
61
|
}
|
|
70
62
|
}
|
|
@@ -81,9 +73,7 @@
|
|
|
81
73
|
"description": "The title of the section",
|
|
82
74
|
"value": {
|
|
83
75
|
"type": [
|
|
84
|
-
"string"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
76
|
+
"string"
|
|
87
77
|
]
|
|
88
78
|
}
|
|
89
79
|
},
|
|
@@ -106,9 +96,7 @@
|
|
|
106
96
|
"description": "The title of the section",
|
|
107
97
|
"value": {
|
|
108
98
|
"type": [
|
|
109
|
-
"string"
|
|
110
|
-
"null",
|
|
111
|
-
"undefined"
|
|
99
|
+
"string"
|
|
112
100
|
]
|
|
113
101
|
}
|
|
114
102
|
}
|
|
@@ -136,9 +124,7 @@
|
|
|
136
124
|
"description": "The title of the widget.",
|
|
137
125
|
"value": {
|
|
138
126
|
"type": [
|
|
139
|
-
"string"
|
|
140
|
-
"null",
|
|
141
|
-
"undefined"
|
|
127
|
+
"string"
|
|
142
128
|
]
|
|
143
129
|
}
|
|
144
130
|
}
|
|
@@ -150,9 +136,7 @@
|
|
|
150
136
|
"description": "The title of the widget.",
|
|
151
137
|
"value": {
|
|
152
138
|
"type": [
|
|
153
|
-
"string"
|
|
154
|
-
"null",
|
|
155
|
-
"undefined"
|
|
139
|
+
"string"
|
|
156
140
|
]
|
|
157
141
|
}
|
|
158
142
|
}
|
|
@@ -162,16 +146,14 @@
|
|
|
162
146
|
},
|
|
163
147
|
{
|
|
164
148
|
"name": "vaadin-dashboard",
|
|
165
|
-
"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.
|
|
149
|
+
"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.2.0-alpha10/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/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.",
|
|
166
150
|
"attributes": [
|
|
167
151
|
{
|
|
168
152
|
"name": "dense-layout",
|
|
169
153
|
"description": "Whether the dashboard layout is dense.",
|
|
170
154
|
"value": {
|
|
171
155
|
"type": [
|
|
172
|
-
"boolean"
|
|
173
|
-
"null",
|
|
174
|
-
"undefined"
|
|
156
|
+
"boolean"
|
|
175
157
|
]
|
|
176
158
|
}
|
|
177
159
|
},
|
|
@@ -180,20 +162,7 @@
|
|
|
180
162
|
"description": "Whether the dashboard is editable.",
|
|
181
163
|
"value": {
|
|
182
164
|
"type": [
|
|
183
|
-
"boolean"
|
|
184
|
-
"null",
|
|
185
|
-
"undefined"
|
|
186
|
-
]
|
|
187
|
-
}
|
|
188
|
-
},
|
|
189
|
-
{
|
|
190
|
-
"name": "i18n",
|
|
191
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
192
|
-
"value": {
|
|
193
|
-
"type": [
|
|
194
|
-
"Object",
|
|
195
|
-
"null",
|
|
196
|
-
"undefined"
|
|
165
|
+
"boolean"
|
|
197
166
|
]
|
|
198
167
|
}
|
|
199
168
|
},
|
|
@@ -202,9 +171,7 @@
|
|
|
202
171
|
"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",
|
|
203
172
|
"value": {
|
|
204
173
|
"type": [
|
|
205
|
-
"number"
|
|
206
|
-
"null",
|
|
207
|
-
"undefined"
|
|
174
|
+
"number"
|
|
208
175
|
]
|
|
209
176
|
}
|
|
210
177
|
},
|
|
@@ -227,9 +194,7 @@
|
|
|
227
194
|
"description": "Whether the dashboard layout is dense.",
|
|
228
195
|
"value": {
|
|
229
196
|
"type": [
|
|
230
|
-
"boolean"
|
|
231
|
-
"null",
|
|
232
|
-
"undefined"
|
|
197
|
+
"boolean"
|
|
233
198
|
]
|
|
234
199
|
}
|
|
235
200
|
},
|
|
@@ -238,9 +203,7 @@
|
|
|
238
203
|
"description": "Whether the dashboard is editable.",
|
|
239
204
|
"value": {
|
|
240
205
|
"type": [
|
|
241
|
-
"boolean"
|
|
242
|
-
"null",
|
|
243
|
-
"undefined"
|
|
206
|
+
"boolean"
|
|
244
207
|
]
|
|
245
208
|
}
|
|
246
209
|
},
|
|
@@ -249,7 +212,7 @@
|
|
|
249
212
|
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n selectSection: 'Select section for editing',\n selectWidget: 'Select widget for editing',\n remove: 'Remove',\n resize: 'Resize',\n resizeApply: 'Apply',\n resizeShrinkWidth: 'Shrink width',\n resizeGrowWidth: 'Grow width',\n resizeShrinkHeight: 'Shrink height',\n resizeGrowHeight: 'Grow height',\n move: 'Move',\n moveApply: 'Apply',\n moveForward: 'Move Forward',\n moveBackward: 'Move Backward',\n}\n```",
|
|
250
213
|
"value": {
|
|
251
214
|
"type": [
|
|
252
|
-
"
|
|
215
|
+
"Object"
|
|
253
216
|
]
|
|
254
217
|
}
|
|
255
218
|
},
|
|
@@ -258,7 +221,7 @@
|
|
|
258
221
|
"description": "An array containing the items of the dashboard",
|
|
259
222
|
"value": {
|
|
260
223
|
"type": [
|
|
261
|
-
"Array
|
|
224
|
+
"Array<DashboardItem>",
|
|
262
225
|
"null",
|
|
263
226
|
"undefined"
|
|
264
227
|
]
|
|
@@ -280,9 +243,7 @@
|
|
|
280
243
|
"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",
|
|
281
244
|
"value": {
|
|
282
245
|
"type": [
|
|
283
|
-
"number"
|
|
284
|
-
"null",
|
|
285
|
-
"undefined"
|
|
246
|
+
"number"
|
|
286
247
|
]
|
|
287
248
|
}
|
|
288
249
|
}
|
|
@@ -290,7 +251,7 @@
|
|
|
290
251
|
"events": [
|
|
291
252
|
{
|
|
292
253
|
"name": "dashboard-item-before-remove",
|
|
293
|
-
"description": "Fired before an item is removed"
|
|
254
|
+
"description": "Fired before an item is removed. Calling preventDefault() on the event will cancel the removal."
|
|
294
255
|
},
|
|
295
256
|
{
|
|
296
257
|
"name": "dashboard-item-move-mode-changed",
|
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.
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
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.
|
|
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.2.0-alpha10/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/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
|
{
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
114
|
"name": "@dashboard-item-before-remove",
|
|
115
|
-
"description": "Fired before an item is removed",
|
|
115
|
+
"description": "Fired before an item is removed. Calling preventDefault() on the event will cancel the removal.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|