@vaadin/dashboard 25.1.0-beta2 → 25.1.0-beta3
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 +14 -13
- package/package.json +11 -11
- package/src/vaadin-dashboard-item-mixin.js +11 -11
- package/src/vaadin-dashboard-section.d.ts +1 -0
- package/src/vaadin-dashboard-section.js +1 -1
- package/src/vaadin-dashboard-widget.d.ts +1 -0
- package/src/vaadin-dashboard-widget.js +1 -1
- package/src/vaadin-dashboard.d.ts +1 -0
- package/web-types.json +15 -4
- package/web-types.lit.json +4 -4
package/custom-elements.json
CHANGED
|
@@ -599,7 +599,7 @@
|
|
|
599
599
|
"declarations": [
|
|
600
600
|
{
|
|
601
601
|
"kind": "class",
|
|
602
|
-
"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.",
|
|
602
|
+
"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`button` | Set on all the buttons (move, remove and others)\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.",
|
|
603
603
|
"name": "DashboardSection",
|
|
604
604
|
"members": [
|
|
605
605
|
{
|
|
@@ -607,7 +607,7 @@
|
|
|
607
607
|
"name": "sectionTitle",
|
|
608
608
|
"privacy": "public",
|
|
609
609
|
"type": {
|
|
610
|
-
"text": "string
|
|
610
|
+
"text": "string"
|
|
611
611
|
},
|
|
612
612
|
"description": "The title of the section",
|
|
613
613
|
"attribute": "section-title"
|
|
@@ -617,7 +617,7 @@
|
|
|
617
617
|
{
|
|
618
618
|
"name": "section-title",
|
|
619
619
|
"type": {
|
|
620
|
-
"text": "string
|
|
620
|
+
"text": "string"
|
|
621
621
|
},
|
|
622
622
|
"description": "The title of the section",
|
|
623
623
|
"fieldName": "sectionTitle"
|
|
@@ -702,7 +702,7 @@
|
|
|
702
702
|
"declarations": [
|
|
703
703
|
{
|
|
704
704
|
"kind": "class",
|
|
705
|
-
"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.",
|
|
705
|
+
"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`button` | Set on all the buttons (move, resize and others)\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.",
|
|
706
706
|
"name": "DashboardWidget",
|
|
707
707
|
"members": [
|
|
708
708
|
{
|
|
@@ -710,7 +710,7 @@
|
|
|
710
710
|
"name": "widgetTitle",
|
|
711
711
|
"privacy": "public",
|
|
712
712
|
"type": {
|
|
713
|
-
"text": "string
|
|
713
|
+
"text": "string"
|
|
714
714
|
},
|
|
715
715
|
"description": "The title of the widget.",
|
|
716
716
|
"attribute": "widget-title"
|
|
@@ -720,7 +720,7 @@
|
|
|
720
720
|
{
|
|
721
721
|
"name": "widget-title",
|
|
722
722
|
"type": {
|
|
723
|
-
"text": "string
|
|
723
|
+
"text": "string"
|
|
724
724
|
},
|
|
725
725
|
"description": "The title of the widget.",
|
|
726
726
|
"fieldName": "widgetTitle"
|
|
@@ -835,10 +835,12 @@
|
|
|
835
835
|
{
|
|
836
836
|
"kind": "field",
|
|
837
837
|
"name": "i18n",
|
|
838
|
-
"
|
|
838
|
+
"privacy": "public",
|
|
839
839
|
"type": {
|
|
840
840
|
"text": "Object"
|
|
841
841
|
},
|
|
842
|
+
"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```",
|
|
843
|
+
"attribute": "i18n",
|
|
842
844
|
"inheritedFrom": {
|
|
843
845
|
"name": "I18nMixin",
|
|
844
846
|
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
@@ -938,12 +940,6 @@
|
|
|
938
940
|
"name": "DashboardLayoutMixin",
|
|
939
941
|
"module": "src/vaadin-dashboard-layout-mixin.js"
|
|
940
942
|
}
|
|
941
|
-
},
|
|
942
|
-
{
|
|
943
|
-
"name": "eventName",
|
|
944
|
-
"type": {
|
|
945
|
-
"text": "CustomEvent"
|
|
946
|
-
}
|
|
947
943
|
}
|
|
948
944
|
],
|
|
949
945
|
"attributes": [
|
|
@@ -969,6 +965,11 @@
|
|
|
969
965
|
},
|
|
970
966
|
{
|
|
971
967
|
"name": "i18n",
|
|
968
|
+
"type": {
|
|
969
|
+
"text": "Object"
|
|
970
|
+
},
|
|
971
|
+
"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.",
|
|
972
|
+
"fieldName": "i18n",
|
|
972
973
|
"inheritedFrom": {
|
|
973
974
|
"name": "I18nMixin",
|
|
974
975
|
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
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-beta3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
41
|
-
"@vaadin/button": "25.1.0-
|
|
42
|
-
"@vaadin/component-base": "25.1.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.1.0-beta3",
|
|
41
|
+
"@vaadin/button": "25.1.0-beta3",
|
|
42
|
+
"@vaadin/component-base": "25.1.0-beta3",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "25.1.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
47
|
+
"@vaadin/aura": "25.1.0-beta3",
|
|
48
|
+
"@vaadin/chai-plugins": "25.1.0-beta3",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.1.0-beta3",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
52
|
-
"sinon": "^21.0.
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
|
|
52
|
+
"sinon": "^21.0.2"
|
|
53
53
|
},
|
|
54
54
|
"cvdlName": "vaadin-dashboard",
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "4251850231a42298fda23b83928da588831cdb5d"
|
|
61
61
|
}
|
|
@@ -97,7 +97,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
97
97
|
id="drag-handle"
|
|
98
98
|
draggable="true"
|
|
99
99
|
class="drag-handle"
|
|
100
|
-
part="move-button"
|
|
100
|
+
part="button move-button"
|
|
101
101
|
theme="icon tertiary"
|
|
102
102
|
aria-label="${this.__i18n.move}"
|
|
103
103
|
title="${this.__i18n.move}"
|
|
@@ -114,7 +114,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
114
114
|
aria-label="${this.__i18n.remove}"
|
|
115
115
|
title="${this.__i18n.remove}"
|
|
116
116
|
id="remove-button"
|
|
117
|
-
part="remove-button"
|
|
117
|
+
part="button remove-button"
|
|
118
118
|
theme="icon tertiary"
|
|
119
119
|
tabindex="${this.__selected ? 0 : -1}"
|
|
120
120
|
@click="${() => fireRemove(this)}"
|
|
@@ -156,7 +156,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
156
156
|
aria-label="${this.__i18n.resize}"
|
|
157
157
|
title="${this.__i18n.resize}"
|
|
158
158
|
id="resize-handle"
|
|
159
|
-
part="resize-button"
|
|
159
|
+
part="button resize-button"
|
|
160
160
|
class="resize-handle"
|
|
161
161
|
theme="icon tertiary"
|
|
162
162
|
tabindex="${this.__selected ? 0 : -1}"
|
|
@@ -180,7 +180,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
180
180
|
title="${this.__i18n.moveBackward}"
|
|
181
181
|
@click="${() => fireMove(this, -1)}"
|
|
182
182
|
id="move-backward"
|
|
183
|
-
part="move-backward-button"
|
|
183
|
+
part="button move-backward-button"
|
|
184
184
|
>
|
|
185
185
|
<div class="icon"></div>
|
|
186
186
|
</vaadin-dashboard-button>
|
|
@@ -190,7 +190,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
190
190
|
title="${this.__i18n.moveApply}"
|
|
191
191
|
@click="${() => this.__exitMode(true)}"
|
|
192
192
|
id="move-apply"
|
|
193
|
-
part="move-apply-button"
|
|
193
|
+
part="button move-apply-button"
|
|
194
194
|
>
|
|
195
195
|
<div class="icon"></div>
|
|
196
196
|
</vaadin-dashboard-button>
|
|
@@ -200,7 +200,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
200
200
|
title="${this.__i18n.moveForward}"
|
|
201
201
|
@click="${() => fireMove(this, 1)}"
|
|
202
202
|
id="move-forward"
|
|
203
|
-
part="move-forward-button"
|
|
203
|
+
part="button move-forward-button"
|
|
204
204
|
>
|
|
205
205
|
<div class="icon"></div>
|
|
206
206
|
</vaadin-dashboard-button>
|
|
@@ -233,7 +233,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
233
233
|
title="${this.__i18n.resizeApply}"
|
|
234
234
|
@click="${() => this.__exitMode(true)}"
|
|
235
235
|
id="resize-apply"
|
|
236
|
-
part="resize-apply-button"
|
|
236
|
+
part="button resize-apply-button"
|
|
237
237
|
>
|
|
238
238
|
<div class="icon"></div>
|
|
239
239
|
</vaadin-dashboard-button>
|
|
@@ -244,7 +244,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
244
244
|
@click="${() => fireResize(this, -1, 0)}"
|
|
245
245
|
.hidden="${!canShrinkWidth}"
|
|
246
246
|
id="resize-shrink-width"
|
|
247
|
-
part="resize-shrink-width-button"
|
|
247
|
+
part="button resize-shrink-width-button"
|
|
248
248
|
>
|
|
249
249
|
<div class="icon"></div>
|
|
250
250
|
</vaadin-dashboard-button>
|
|
@@ -255,7 +255,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
255
255
|
@click="${() => fireResize(this, 1, 0)}"
|
|
256
256
|
.hidden="${!canGrowWidth}"
|
|
257
257
|
id="resize-grow-width"
|
|
258
|
-
part="resize-grow-width-button"
|
|
258
|
+
part="button resize-grow-width-button"
|
|
259
259
|
>
|
|
260
260
|
<div class="icon"></div>
|
|
261
261
|
</vaadin-dashboard-button>
|
|
@@ -265,7 +265,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
265
265
|
title="${this.__i18n.resizeShrinkHeight}"
|
|
266
266
|
@click="${() => fireResize(this, 0, -1)}"
|
|
267
267
|
id="resize-shrink-height"
|
|
268
|
-
part="resize-shrink-height-button"
|
|
268
|
+
part="button resize-shrink-height-button"
|
|
269
269
|
.hidden="${!hasMinRowHeight || !canShrinkHeight}"
|
|
270
270
|
>
|
|
271
271
|
<div class="icon"></div>
|
|
@@ -276,7 +276,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
276
276
|
title="${this.__i18n.resizeGrowHeight}"
|
|
277
277
|
@click="${() => fireResize(this, 0, 1)}"
|
|
278
278
|
id="resize-grow-height"
|
|
279
|
-
part="resize-grow-height-button"
|
|
279
|
+
part="button resize-grow-height-button"
|
|
280
280
|
.hidden="${!hasMinRowHeight}"
|
|
281
281
|
>
|
|
282
282
|
<div class="icon"></div>
|
|
@@ -39,6 +39,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
|
|
|
39
39
|
* -----------------------|-------------
|
|
40
40
|
* `header` | The header of the section
|
|
41
41
|
* `title` | The title of the section
|
|
42
|
+
* `button` | Set on all the buttons (move, remove and others)
|
|
42
43
|
* `move-button` | The move button
|
|
43
44
|
* `remove-button` | The remove button
|
|
44
45
|
* `move-backward-button` | The move backward button when in move mode
|
|
@@ -45,6 +45,7 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
|
|
|
45
45
|
* -----------------------|-------------
|
|
46
46
|
* `header` | The header of the section
|
|
47
47
|
* `title` | The title of the section
|
|
48
|
+
* `button` | Set on all the buttons (move, remove and others)
|
|
48
49
|
* `move-button` | The move button
|
|
49
50
|
* `remove-button` | The remove button
|
|
50
51
|
* `move-backward-button` | The move backward button when in move mode
|
|
@@ -117,7 +118,6 @@ class DashboardSection extends DashboardItemMixin(
|
|
|
117
118
|
* The title of the section
|
|
118
119
|
*
|
|
119
120
|
* @attr {string} section-title
|
|
120
|
-
* @type {string | null | undefined}
|
|
121
121
|
*/
|
|
122
122
|
sectionTitle: {
|
|
123
123
|
type: String,
|
|
@@ -48,6 +48,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
|
|
|
48
48
|
* `header` | The header of the widget
|
|
49
49
|
* `title` | The title of the widget
|
|
50
50
|
* `content` | The content of the widget
|
|
51
|
+
* `button` | Set on all the buttons (move, resize and others)
|
|
51
52
|
* `move-button` | The move button
|
|
52
53
|
* `remove-button` | The remove button
|
|
53
54
|
* `resize-button` | The resize button
|
|
@@ -56,6 +56,7 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
|
|
|
56
56
|
* `header` | The header of the widget
|
|
57
57
|
* `title` | The title of the widget
|
|
58
58
|
* `content` | The content of the widget
|
|
59
|
+
* `button` | Set on all the buttons (move, resize and others)
|
|
59
60
|
* `move-button` | The move button
|
|
60
61
|
* `remove-button` | The remove button
|
|
61
62
|
* `resize-button` | The resize button
|
|
@@ -157,7 +158,6 @@ class DashboardWidget extends DashboardItemMixin(
|
|
|
157
158
|
* The title of the widget.
|
|
158
159
|
*
|
|
159
160
|
* @attr {string} widget-title
|
|
160
|
-
* @type {string | null | undefined}
|
|
161
161
|
*/
|
|
162
162
|
widgetTitle: {
|
|
163
163
|
type: String,
|
|
@@ -227,6 +227,7 @@ export interface DashboardI18n {
|
|
|
227
227
|
*
|
|
228
228
|
* @fires {CustomEvent} dashboard-item-moved - Fired when an item was moved
|
|
229
229
|
* @fires {CustomEvent} dashboard-item-resized - Fired when an item was resized
|
|
230
|
+
* @fires {CustomEvent} dashboard-item-before-remove - Fired before an item is removed. Calling preventDefault() on the event will cancel the removal.
|
|
230
231
|
* @fires {CustomEvent} dashboard-item-removed - Fired when an item was removed
|
|
231
232
|
* @fires {CustomEvent} dashboard-item-selected-changed - Fired when an item selected state changed
|
|
232
233
|
* @fires {CustomEvent} dashboard-item-move-mode-changed - Fired when an item move mode changed
|
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-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"name": "vaadin-dashboard-section",
|
|
77
|
-
"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.",
|
|
77
|
+
"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`button` | Set on all the buttons (move, remove and others)\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.",
|
|
78
78
|
"attributes": [
|
|
79
79
|
{
|
|
80
80
|
"name": "section-title",
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
"name": "vaadin-dashboard-widget",
|
|
121
|
-
"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.",
|
|
121
|
+
"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`button` | Set on all the buttons (move, resize and others)\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.",
|
|
122
122
|
"attributes": [
|
|
123
123
|
{
|
|
124
124
|
"name": "theme",
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
},
|
|
163
163
|
{
|
|
164
164
|
"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.1.0-
|
|
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.1.0-beta3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/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
166
|
"attributes": [
|
|
167
167
|
{
|
|
168
168
|
"name": "dense-layout",
|
|
@@ -186,6 +186,17 @@
|
|
|
186
186
|
]
|
|
187
187
|
}
|
|
188
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"
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
},
|
|
189
200
|
{
|
|
190
201
|
"name": "root-heading-level",
|
|
191
202
|
"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",
|
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-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "vaadin-dashboard-section",
|
|
40
|
-
"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.",
|
|
40
|
+
"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`button` | Set on all the buttons (move, remove and others)\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.",
|
|
41
41
|
"extension": true,
|
|
42
42
|
"attributes": [
|
|
43
43
|
{
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"name": "vaadin-dashboard-widget",
|
|
54
|
-
"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.",
|
|
54
|
+
"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`button` | Set on all the buttons (move, resize and others)\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.",
|
|
55
55
|
"extension": true,
|
|
56
56
|
"attributes": [
|
|
57
57
|
{
|
|
@@ -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-beta3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/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
|
{
|