@vaadin/dashboard 25.3.0-alpha7 → 25.3.0-alpha8
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 +54 -26
- package/package.json +10 -10
- package/src/vaadin-dashboard-button.js +1 -0
- package/src/vaadin-dashboard-layout.js +1 -0
- package/src/vaadin-dashboard-section.js +1 -0
- package/src/vaadin-dashboard-widget.js +1 -0
- package/src/vaadin-dashboard.js +1 -0
- package/web-types.json +6 -14
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -486,6 +486,39 @@
|
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
488
|
],
|
|
489
|
+
"attributes": [
|
|
490
|
+
{
|
|
491
|
+
"name": "dense-layout",
|
|
492
|
+
"type": {
|
|
493
|
+
"text": "boolean"
|
|
494
|
+
},
|
|
495
|
+
"description": "Whether the dashboard layout is dense.",
|
|
496
|
+
"fieldName": "denseLayout",
|
|
497
|
+
"inheritedFrom": {
|
|
498
|
+
"name": "DashboardLayoutMixin",
|
|
499
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
500
|
+
}
|
|
501
|
+
},
|
|
502
|
+
{
|
|
503
|
+
"name": "root-heading-level",
|
|
504
|
+
"type": {
|
|
505
|
+
"text": "number"
|
|
506
|
+
},
|
|
507
|
+
"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",
|
|
508
|
+
"fieldName": "rootHeadingLevel",
|
|
509
|
+
"inheritedFrom": {
|
|
510
|
+
"name": "DashboardLayoutMixin",
|
|
511
|
+
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
512
|
+
}
|
|
513
|
+
},
|
|
514
|
+
{
|
|
515
|
+
"type": {
|
|
516
|
+
"text": "string"
|
|
517
|
+
},
|
|
518
|
+
"description": "The theme variants to apply to the component.",
|
|
519
|
+
"name": "theme"
|
|
520
|
+
}
|
|
521
|
+
],
|
|
489
522
|
"mixins": [
|
|
490
523
|
{
|
|
491
524
|
"name": "DashboardLayoutMixin",
|
|
@@ -514,32 +547,6 @@
|
|
|
514
547
|
},
|
|
515
548
|
"tagName": "vaadin-dashboard-layout",
|
|
516
549
|
"customElement": true,
|
|
517
|
-
"attributes": [
|
|
518
|
-
{
|
|
519
|
-
"name": "dense-layout",
|
|
520
|
-
"type": {
|
|
521
|
-
"text": "boolean"
|
|
522
|
-
},
|
|
523
|
-
"description": "Whether the dashboard layout is dense.",
|
|
524
|
-
"fieldName": "denseLayout",
|
|
525
|
-
"inheritedFrom": {
|
|
526
|
-
"name": "DashboardLayoutMixin",
|
|
527
|
-
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
528
|
-
}
|
|
529
|
-
},
|
|
530
|
-
{
|
|
531
|
-
"name": "root-heading-level",
|
|
532
|
-
"type": {
|
|
533
|
-
"text": "number"
|
|
534
|
-
},
|
|
535
|
-
"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",
|
|
536
|
-
"fieldName": "rootHeadingLevel",
|
|
537
|
-
"inheritedFrom": {
|
|
538
|
-
"name": "DashboardLayoutMixin",
|
|
539
|
-
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
540
|
-
}
|
|
541
|
-
}
|
|
542
|
-
],
|
|
543
550
|
"events": []
|
|
544
551
|
}
|
|
545
552
|
],
|
|
@@ -582,6 +589,13 @@
|
|
|
582
589
|
},
|
|
583
590
|
"description": "The title of the section",
|
|
584
591
|
"fieldName": "sectionTitle"
|
|
592
|
+
},
|
|
593
|
+
{
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "string"
|
|
596
|
+
},
|
|
597
|
+
"description": "The theme variants to apply to the component.",
|
|
598
|
+
"name": "theme"
|
|
585
599
|
}
|
|
586
600
|
],
|
|
587
601
|
"mixins": [
|
|
@@ -647,6 +661,13 @@
|
|
|
647
661
|
}
|
|
648
662
|
],
|
|
649
663
|
"attributes": [
|
|
664
|
+
{
|
|
665
|
+
"type": {
|
|
666
|
+
"text": "string"
|
|
667
|
+
},
|
|
668
|
+
"description": "The theme variants to apply to the component.",
|
|
669
|
+
"name": "theme"
|
|
670
|
+
},
|
|
650
671
|
{
|
|
651
672
|
"name": "widget-title",
|
|
652
673
|
"type": {
|
|
@@ -883,6 +904,13 @@
|
|
|
883
904
|
"name": "DashboardLayoutMixin",
|
|
884
905
|
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
885
906
|
}
|
|
907
|
+
},
|
|
908
|
+
{
|
|
909
|
+
"type": {
|
|
910
|
+
"text": "string"
|
|
911
|
+
},
|
|
912
|
+
"description": "The theme variants to apply to the component.",
|
|
913
|
+
"name": "theme"
|
|
886
914
|
}
|
|
887
915
|
],
|
|
888
916
|
"mixins": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dashboard",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha8",
|
|
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": "25.3.0-
|
|
41
|
-
"@vaadin/button": "25.3.0-
|
|
42
|
-
"@vaadin/component-base": "25.3.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.3.0-alpha8",
|
|
41
|
+
"@vaadin/button": "25.3.0-alpha8",
|
|
42
|
+
"@vaadin/component-base": "25.3.0-alpha8",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "25.3.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
47
|
+
"@vaadin/aura": "25.3.0-alpha8",
|
|
48
|
+
"@vaadin/chai-plugins": "25.3.0-alpha8",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha8",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
|
|
52
52
|
"sinon": "^22.0.0"
|
|
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": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
|
|
61
61
|
}
|
|
@@ -20,6 +20,7 @@ import { dashboardButtonStyles } from './styles/vaadin-dashboard-button-base-sty
|
|
|
20
20
|
/**
|
|
21
21
|
* An element used internally by `<vaadin-dashboard>`. Not intended to be used separately.
|
|
22
22
|
*
|
|
23
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
23
24
|
* @customElement vaadin-dashboard-button
|
|
24
25
|
* @extends HTMLElement
|
|
25
26
|
* @protected
|
|
@@ -51,6 +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
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
54
55
|
* @customElement vaadin-dashboard-layout
|
|
55
56
|
* @extends HTMLElement
|
|
56
57
|
*/
|
|
@@ -63,6 +63,7 @@ import { DashboardItemMixin, getDefaultI18n } from './vaadin-dashboard-item-mixi
|
|
|
63
63
|
*
|
|
64
64
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
65
65
|
*
|
|
66
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
66
67
|
* @customElement vaadin-dashboard-section
|
|
67
68
|
* @extends HTMLElement
|
|
68
69
|
*/
|
|
@@ -97,6 +97,7 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
|
|
|
97
97
|
*
|
|
98
98
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
99
99
|
*
|
|
100
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
100
101
|
* @customElement vaadin-dashboard-widget
|
|
101
102
|
* @extends HTMLElement
|
|
102
103
|
*/
|
package/src/vaadin-dashboard.js
CHANGED
|
@@ -101,6 +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
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
104
105
|
* @customElement vaadin-dashboard
|
|
105
106
|
* @extends HTMLElement
|
|
106
107
|
*/
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -33,9 +33,7 @@
|
|
|
33
33
|
"description": "The theme variants to apply to the component.",
|
|
34
34
|
"value": {
|
|
35
35
|
"type": [
|
|
36
|
-
"string"
|
|
37
|
-
"null",
|
|
38
|
-
"undefined"
|
|
36
|
+
"string"
|
|
39
37
|
]
|
|
40
38
|
}
|
|
41
39
|
}
|
|
@@ -82,9 +80,7 @@
|
|
|
82
80
|
"description": "The theme variants to apply to the component.",
|
|
83
81
|
"value": {
|
|
84
82
|
"type": [
|
|
85
|
-
"string"
|
|
86
|
-
"null",
|
|
87
|
-
"undefined"
|
|
83
|
+
"string"
|
|
88
84
|
]
|
|
89
85
|
}
|
|
90
86
|
}
|
|
@@ -113,9 +109,7 @@
|
|
|
113
109
|
"description": "The theme variants to apply to the component.",
|
|
114
110
|
"value": {
|
|
115
111
|
"type": [
|
|
116
|
-
"string"
|
|
117
|
-
"null",
|
|
118
|
-
"undefined"
|
|
112
|
+
"string"
|
|
119
113
|
]
|
|
120
114
|
}
|
|
121
115
|
},
|
|
@@ -146,7 +140,7 @@
|
|
|
146
140
|
},
|
|
147
141
|
{
|
|
148
142
|
"name": "vaadin-dashboard",
|
|
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.3.0-
|
|
143
|
+
"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.3.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/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-row-height` | fixed row height of the dashboard. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\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.",
|
|
150
144
|
"attributes": [
|
|
151
145
|
{
|
|
152
146
|
"name": "dense-layout",
|
|
@@ -180,9 +174,7 @@
|
|
|
180
174
|
"description": "The theme variants to apply to the component.",
|
|
181
175
|
"value": {
|
|
182
176
|
"type": [
|
|
183
|
-
"string"
|
|
184
|
-
"null",
|
|
185
|
-
"undefined"
|
|
177
|
+
"string"
|
|
186
178
|
]
|
|
187
179
|
}
|
|
188
180
|
}
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
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.3.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.3.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/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-row-height` | fixed row height of the dashboard. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\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
|
{
|