@vaadin/dashboard 24.6.5 → 24.7.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/package.json +9 -9
- package/src/keyboard-controller.js +1 -1
- package/src/vaadin-dashboard-button.js +1 -1
- package/src/vaadin-dashboard-helpers.js +1 -1
- package/src/vaadin-dashboard-item-mixin.d.ts +1 -1
- package/src/vaadin-dashboard-item-mixin.js +1 -1
- package/src/vaadin-dashboard-layout-mixin.d.ts +1 -1
- package/src/vaadin-dashboard-layout-mixin.js +1 -1
- package/src/vaadin-dashboard-layout.d.ts +1 -1
- package/src/vaadin-dashboard-layout.js +1 -1
- package/src/vaadin-dashboard-section.d.ts +1 -1
- package/src/vaadin-dashboard-section.js +2 -10
- package/src/vaadin-dashboard-styles.js +1 -1
- package/src/vaadin-dashboard-widget.d.ts +1 -1
- package/src/vaadin-dashboard-widget.js +2 -4
- package/src/vaadin-dashboard.d.ts +8 -8
- package/src/vaadin-dashboard.js +43 -40
- package/src/widget-reorder-controller.js +1 -1
- package/src/widget-resize-controller.js +1 -1
- package/web-types.json +11 -13
- package/web-types.lit.json +8 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dashboard",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.7.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/button": "
|
|
41
|
-
"@vaadin/component-base": "
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
43
|
-
"@vaadin/vaadin-material-styles": "
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
40
|
+
"@vaadin/button": "24.7.0-alpha10",
|
|
41
|
+
"@vaadin/component-base": "24.7.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.7.0-alpha10",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "
|
|
49
|
-
"@vaadin/test-runner-commands": "
|
|
48
|
+
"@vaadin/chai-plugins": "24.7.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "24.7.0-alpha10",
|
|
50
50
|
"@vaadin/testing-helpers": "^1.1.0"
|
|
51
51
|
},
|
|
52
52
|
"cvdlName": "vaadin-dashboard",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
|
|
58
58
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -151,15 +151,7 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
|
|
|
151
151
|
__i18n: {
|
|
152
152
|
type: Object,
|
|
153
153
|
value: () => {
|
|
154
|
-
|
|
155
|
-
return {
|
|
156
|
-
selectSection: i18n.selectSection,
|
|
157
|
-
remove: i18n.remove,
|
|
158
|
-
move: i18n.move,
|
|
159
|
-
moveApply: i18n.moveApply,
|
|
160
|
-
moveForward: i18n.moveForward,
|
|
161
|
-
moveBackward: i18n.moveBackward,
|
|
162
|
-
};
|
|
154
|
+
return getDefaultI18n();
|
|
163
155
|
},
|
|
164
156
|
},
|
|
165
157
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -180,9 +180,7 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
|
|
|
180
180
|
__i18n: {
|
|
181
181
|
type: Object,
|
|
182
182
|
value: () => {
|
|
183
|
-
|
|
184
|
-
delete i18n.selectSection;
|
|
185
|
-
return i18n;
|
|
183
|
+
return getDefaultI18n();
|
|
186
184
|
},
|
|
187
185
|
},
|
|
188
186
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import './vaadin-dashboard-widget.js';
|
|
12
12
|
import './vaadin-dashboard-section.js';
|
|
13
13
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
14
|
+
import type { I18nMixin, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
14
15
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
|
|
15
16
|
import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
|
|
16
17
|
|
|
@@ -133,7 +134,7 @@ export interface DashboardCustomEventMap<TItem extends DashboardItem> {
|
|
|
133
134
|
|
|
134
135
|
export type DashboardEventMap<TItem extends DashboardItem> = DashboardCustomEventMap<TItem> & HTMLElementEventMap;
|
|
135
136
|
|
|
136
|
-
export
|
|
137
|
+
export type DashboardI18n = PartialI18n<{
|
|
137
138
|
selectWidget: string;
|
|
138
139
|
selectSection: string;
|
|
139
140
|
remove: string;
|
|
@@ -147,7 +148,7 @@ export interface DashboardI18n {
|
|
|
147
148
|
moveApply: string;
|
|
148
149
|
moveForward: string;
|
|
149
150
|
moveBackward: string;
|
|
150
|
-
}
|
|
151
|
+
}>;
|
|
151
152
|
|
|
152
153
|
/**
|
|
153
154
|
* A responsive, grid-based dashboard layout component
|
|
@@ -217,7 +218,7 @@ export interface DashboardI18n {
|
|
|
217
218
|
* @fires {CustomEvent} dashboard-item-resize-mode-changed - Fired when an item resize mode changed
|
|
218
219
|
*/
|
|
219
220
|
declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends DashboardLayoutMixin(
|
|
220
|
-
ElementMixin(ThemableMixin(HTMLElement)),
|
|
221
|
+
I18nMixin({} as DashboardI18n, ElementMixin(ThemableMixin(HTMLElement))),
|
|
221
222
|
) {
|
|
222
223
|
/**
|
|
223
224
|
* An array containing the items of the dashboard
|
|
@@ -243,10 +244,9 @@ declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends Das
|
|
|
243
244
|
editable: boolean;
|
|
244
245
|
|
|
245
246
|
/**
|
|
246
|
-
* The object used to localize this component.
|
|
247
|
-
*
|
|
248
|
-
*
|
|
249
|
-
* `i18n` object with a custom one.
|
|
247
|
+
* The object used to localize this component. To change the default
|
|
248
|
+
* localization, replace this with an object that provides all properties, or
|
|
249
|
+
* just the individual properties you want to change.
|
|
250
250
|
*
|
|
251
251
|
* The object has the following structure and default values:
|
|
252
252
|
* ```
|
package/src/vaadin-dashboard.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -13,6 +13,7 @@ import './vaadin-dashboard-section.js';
|
|
|
13
13
|
import { html, LitElement } from 'lit';
|
|
14
14
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
15
15
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
16
|
+
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
16
17
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
17
18
|
import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
18
19
|
import {
|
|
@@ -100,9 +101,12 @@ import { WidgetResizeController } from './widget-resize-controller.js';
|
|
|
100
101
|
* @extends HTMLElement
|
|
101
102
|
* @mixes ElementMixin
|
|
102
103
|
* @mixes DashboardLayoutMixin
|
|
104
|
+
* @mixes I18nMixin
|
|
103
105
|
* @mixes ThemableMixin
|
|
104
106
|
*/
|
|
105
|
-
class Dashboard extends DashboardLayoutMixin(
|
|
107
|
+
class Dashboard extends DashboardLayoutMixin(
|
|
108
|
+
I18nMixin(getDefaultI18n(), ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
|
|
109
|
+
) {
|
|
106
110
|
static get is() {
|
|
107
111
|
return 'vaadin-dashboard';
|
|
108
112
|
}
|
|
@@ -162,40 +166,6 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
162
166
|
type: Boolean,
|
|
163
167
|
},
|
|
164
168
|
|
|
165
|
-
/**
|
|
166
|
-
* The object used to localize this component.
|
|
167
|
-
*
|
|
168
|
-
* To change the default localization, replace the entire
|
|
169
|
-
* `i18n` object with a custom one.
|
|
170
|
-
*
|
|
171
|
-
* The object has the following structure and default values:
|
|
172
|
-
* ```
|
|
173
|
-
* {
|
|
174
|
-
* selectSection: 'Select section for editing',
|
|
175
|
-
* selectWidget: 'Select widget for editing',
|
|
176
|
-
* remove: 'Remove',
|
|
177
|
-
* resize: 'Resize',
|
|
178
|
-
* resizeApply: 'Apply',
|
|
179
|
-
* resizeShrinkWidth: 'Shrink width',
|
|
180
|
-
* resizeGrowWidth: 'Grow width',
|
|
181
|
-
* resizeShrinkHeight: 'Shrink height',
|
|
182
|
-
* resizeGrowHeight: 'Grow height',
|
|
183
|
-
* move: 'Move',
|
|
184
|
-
* moveApply: 'Apply',
|
|
185
|
-
* moveForward: 'Move Forward',
|
|
186
|
-
* moveBackward: 'Move Backward',
|
|
187
|
-
* }
|
|
188
|
-
* ```
|
|
189
|
-
*/
|
|
190
|
-
i18n: {
|
|
191
|
-
type: Object,
|
|
192
|
-
value: () => {
|
|
193
|
-
return {
|
|
194
|
-
...getDefaultI18n(),
|
|
195
|
-
};
|
|
196
|
-
},
|
|
197
|
-
},
|
|
198
|
-
|
|
199
169
|
/** @private */
|
|
200
170
|
__childCount: {
|
|
201
171
|
type: Number,
|
|
@@ -205,7 +175,40 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
205
175
|
}
|
|
206
176
|
|
|
207
177
|
static get observers() {
|
|
208
|
-
return ['__itemsOrRendererChanged(items, renderer, editable,
|
|
178
|
+
return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* The object used to localize this component. To change the default
|
|
183
|
+
* localization, replace this with an object that provides all properties, or
|
|
184
|
+
* just the individual properties you want to change.
|
|
185
|
+
*
|
|
186
|
+
* The object has the following structure and default values:
|
|
187
|
+
* ```
|
|
188
|
+
* {
|
|
189
|
+
* selectSection: 'Select section for editing',
|
|
190
|
+
* selectWidget: 'Select widget for editing',
|
|
191
|
+
* remove: 'Remove',
|
|
192
|
+
* resize: 'Resize',
|
|
193
|
+
* resizeApply: 'Apply',
|
|
194
|
+
* resizeShrinkWidth: 'Shrink width',
|
|
195
|
+
* resizeGrowWidth: 'Grow width',
|
|
196
|
+
* resizeShrinkHeight: 'Shrink height',
|
|
197
|
+
* resizeGrowHeight: 'Grow height',
|
|
198
|
+
* move: 'Move',
|
|
199
|
+
* moveApply: 'Apply',
|
|
200
|
+
* moveForward: 'Move Forward',
|
|
201
|
+
* moveBackward: 'Move Backward',
|
|
202
|
+
* }
|
|
203
|
+
* ```
|
|
204
|
+
* @return {!DashboardI18n}
|
|
205
|
+
*/
|
|
206
|
+
get i18n() {
|
|
207
|
+
return super.i18n;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
set i18n(value) {
|
|
211
|
+
super.i18n = value;
|
|
209
212
|
}
|
|
210
213
|
|
|
211
214
|
constructor() {
|
|
@@ -257,7 +260,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
257
260
|
SYNCHRONIZED_ATTRIBUTES.forEach((attr) => {
|
|
258
261
|
wrapper.firstElementChild.toggleAttribute(attr, !!wrapper[attr]);
|
|
259
262
|
});
|
|
260
|
-
wrapper.firstElementChild.__i18n = this.
|
|
263
|
+
wrapper.firstElementChild.__i18n = this.__effectiveI18n;
|
|
261
264
|
}
|
|
262
265
|
});
|
|
263
266
|
}
|
|
@@ -300,7 +303,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
300
303
|
}
|
|
301
304
|
|
|
302
305
|
SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
|
|
303
|
-
section.__i18n = this.
|
|
306
|
+
section.__i18n = this.__effectiveI18n;
|
|
304
307
|
|
|
305
308
|
// Render the subitems
|
|
306
309
|
section.__childCount = item.items.length;
|
|
@@ -424,7 +427,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
424
427
|
wrapper.dragging = this.__widgetReorderController.draggedItem === item;
|
|
425
428
|
wrapper['first-child'] = item === getItemsArrayOfItem(item, this.items)[0];
|
|
426
429
|
wrapper['last-child'] = item === getItemsArrayOfItem(item, this.items).slice(-1)[0];
|
|
427
|
-
wrapper.i18n = this.
|
|
430
|
+
wrapper.i18n = this.__effectiveI18n;
|
|
428
431
|
}
|
|
429
432
|
|
|
430
433
|
/** @private */
|
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": "24.
|
|
4
|
+
"version": "24.7.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
"name": "vaadin-dashboard",
|
|
139
|
-
"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/24.
|
|
139
|
+
"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/24.7.0-alpha10/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.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.",
|
|
140
140
|
"attributes": [
|
|
141
141
|
{
|
|
142
142
|
"name": "dense-layout",
|
|
@@ -181,6 +181,15 @@
|
|
|
181
181
|
]
|
|
182
182
|
}
|
|
183
183
|
},
|
|
184
|
+
{
|
|
185
|
+
"name": "i18n",
|
|
186
|
+
"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```\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```",
|
|
187
|
+
"value": {
|
|
188
|
+
"type": [
|
|
189
|
+
"DashboardI18n"
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
},
|
|
184
193
|
{
|
|
185
194
|
"name": "items",
|
|
186
195
|
"description": "An array containing the items of the dashboard",
|
|
@@ -213,17 +222,6 @@
|
|
|
213
222
|
"undefined"
|
|
214
223
|
]
|
|
215
224
|
}
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"name": "i18n",
|
|
219
|
-
"description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\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```",
|
|
220
|
-
"value": {
|
|
221
|
-
"type": [
|
|
222
|
-
"Object",
|
|
223
|
-
"null",
|
|
224
|
-
"undefined"
|
|
225
|
-
]
|
|
226
|
-
}
|
|
227
225
|
}
|
|
228
226
|
],
|
|
229
227
|
"events": [
|
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": "24.
|
|
4
|
+
"version": "24.7.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
"name": "vaadin-dashboard",
|
|
61
|
-
"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/24.
|
|
61
|
+
"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/24.7.0-alpha10/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.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.",
|
|
62
62
|
"extension": true,
|
|
63
63
|
"attributes": [
|
|
64
64
|
{
|
|
@@ -76,22 +76,22 @@
|
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".i18n",
|
|
80
|
+
"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```\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```",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": ".
|
|
87
|
-
"description": "
|
|
86
|
+
"name": ".items",
|
|
87
|
+
"description": "An array containing the items of the dashboard",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".renderer",
|
|
94
|
+
"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.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|