@vaadin/dashboard 25.0.0-beta4 → 25.0.0-beta6
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/styles/vaadin-dashboard-widget-base-styles.js +4 -1
- package/src/vaadin-dashboard-helpers.js +25 -9
- package/src/vaadin-dashboard-item-mixin.js +52 -1
- package/src/vaadin-dashboard-layout-mixin.d.ts +12 -0
- package/src/vaadin-dashboard-layout-mixin.js +34 -0
- package/src/vaadin-dashboard-section.js +1 -6
- package/src/vaadin-dashboard-widget.js +1 -7
- package/src/vaadin-dashboard.d.ts +0 -10
- package/src/vaadin-dashboard.js +1 -18
- package/web-types.json +46 -24
- package/web-types.lit.json +16 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dashboard",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-beta6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
40
|
-
"@vaadin/button": "25.0.0-
|
|
41
|
-
"@vaadin/component-base": "25.0.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
39
|
+
"@vaadin/a11y-base": "25.0.0-beta6",
|
|
40
|
+
"@vaadin/button": "25.0.0-beta6",
|
|
41
|
+
"@vaadin/component-base": "25.0.0-beta6",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta6",
|
|
43
43
|
"lit": "^3.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
47
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
46
|
+
"@vaadin/chai-plugins": "25.0.0-beta6",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.0.0-beta6",
|
|
48
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta6"
|
|
50
50
|
},
|
|
51
51
|
"cvdlName": "vaadin-dashboard",
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "b6b638bee18aa62f095e0a0b7bf16a39db756f84"
|
|
57
57
|
}
|
|
@@ -95,7 +95,10 @@ const widgetStyles = css`
|
|
|
95
95
|
|
|
96
96
|
/* Widget parts */
|
|
97
97
|
header {
|
|
98
|
-
padding: var(
|
|
98
|
+
padding: var(
|
|
99
|
+
--vaadin-dashboard-widget-header-padding,
|
|
100
|
+
var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
|
|
101
|
+
);
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
:host([editable]) header {
|
|
@@ -102,16 +102,9 @@ export function fireRemove(element) {
|
|
|
102
102
|
element.dispatchEvent(new CustomEvent('item-remove', { bubbles: true }));
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
|
|
106
|
-
* Walks up the DOM tree starting from `node`, returning the first ancestor which is an instance of the given `baseClass`.
|
|
107
|
-
*
|
|
108
|
-
* @param {Node} node - starting node
|
|
109
|
-
* @param {Function} baseClass - constructor, e.g. `Dashboard`
|
|
110
|
-
* @returns {HTMLElement | null}
|
|
111
|
-
*/
|
|
112
|
-
export function findAncestorInstance(node, baseClass) {
|
|
105
|
+
function findFilteredAncestorInstance(node, elementFilter) {
|
|
113
106
|
while (node) {
|
|
114
|
-
if (node
|
|
107
|
+
if (elementFilter(node)) {
|
|
115
108
|
return node;
|
|
116
109
|
}
|
|
117
110
|
if (node instanceof ShadowRoot) {
|
|
@@ -129,3 +122,26 @@ export function findAncestorInstance(node, baseClass) {
|
|
|
129
122
|
}
|
|
130
123
|
return null;
|
|
131
124
|
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Walks up the DOM tree starting from `node`, returning the first ancestor which is an instance of the given `baseClass`.
|
|
128
|
+
*
|
|
129
|
+
* @param {Node} node - starting node
|
|
130
|
+
* @param {Function} baseClass - constructor, e.g. `Dashboard`
|
|
131
|
+
* @returns {HTMLElement | null}
|
|
132
|
+
*/
|
|
133
|
+
export function findAncestorInstance(node, baseClass) {
|
|
134
|
+
return findFilteredAncestorInstance(node, (el) => {
|
|
135
|
+
return el instanceof baseClass;
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Walks up the DOM tree starting from `node`, returning the first ancestor which is a `Dashboard` or `DashboardLayout`.
|
|
141
|
+
*
|
|
142
|
+
* @param {Node} node - starting node
|
|
143
|
+
* @returns {HTMLElement | null}
|
|
144
|
+
*/
|
|
145
|
+
export function getParentLayout(node) {
|
|
146
|
+
return findFilteredAncestorInstance(node, (el) => el.__hasVaadinDashboardLayoutMixin);
|
|
147
|
+
}
|
|
@@ -13,7 +13,7 @@ import { html } from 'lit';
|
|
|
13
13
|
import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
|
|
14
14
|
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
15
15
|
import { KeyboardController } from './keyboard-controller.js';
|
|
16
|
-
import { fireMove, fireRemove, fireResize } from './vaadin-dashboard-helpers.js';
|
|
16
|
+
import { fireMove, fireRemove, fireResize, getParentLayout } from './vaadin-dashboard-helpers.js';
|
|
17
17
|
|
|
18
18
|
const DEFAULT_I18N = {
|
|
19
19
|
selectWidget: 'Select widget for editing',
|
|
@@ -53,6 +53,11 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
53
53
|
type: Object,
|
|
54
54
|
},
|
|
55
55
|
|
|
56
|
+
/** @protected */
|
|
57
|
+
_rootHeadingLevel: {
|
|
58
|
+
type: Number,
|
|
59
|
+
},
|
|
60
|
+
|
|
56
61
|
/** @private */
|
|
57
62
|
__selected: {
|
|
58
63
|
type: Boolean,
|
|
@@ -283,6 +288,7 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
283
288
|
super();
|
|
284
289
|
this.__keyboardController = new KeyboardController(this);
|
|
285
290
|
this.__focusTrapController = new FocusTrapController(this);
|
|
291
|
+
this.__boundRootHeadingLevelChangedListener = this.__updateRootHeadingLevel.bind(this);
|
|
286
292
|
}
|
|
287
293
|
|
|
288
294
|
/** @protected */
|
|
@@ -292,6 +298,19 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
292
298
|
this.addController(this.__focusTrapController);
|
|
293
299
|
}
|
|
294
300
|
|
|
301
|
+
/** @protected */
|
|
302
|
+
connectedCallback() {
|
|
303
|
+
super.connectedCallback();
|
|
304
|
+
this.__updateRootHeadingLevel();
|
|
305
|
+
this.__addHeadingLevelListener();
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
/** @protected */
|
|
309
|
+
disconnectedCallback() {
|
|
310
|
+
super.disconnectedCallback();
|
|
311
|
+
this.__removeHeadingLevelListener();
|
|
312
|
+
}
|
|
313
|
+
|
|
295
314
|
/** @private */
|
|
296
315
|
__selectedChanged(selected, oldSelected) {
|
|
297
316
|
if (!!selected === !!oldSelected) {
|
|
@@ -377,4 +396,36 @@ export const DashboardItemMixin = (superClass) =>
|
|
|
377
396
|
}
|
|
378
397
|
this.dispatchEvent(new CustomEvent('item-resize-mode-changed', { bubbles: true, detail: { value: resizeMode } }));
|
|
379
398
|
}
|
|
399
|
+
|
|
400
|
+
/** @private */
|
|
401
|
+
__addHeadingLevelListener() {
|
|
402
|
+
this.__removeHeadingLevelListener();
|
|
403
|
+
const parentLayout = getParentLayout(this);
|
|
404
|
+
if (parentLayout) {
|
|
405
|
+
this.__rootHeadingLevelListenerTarget = parentLayout;
|
|
406
|
+
parentLayout.addEventListener(
|
|
407
|
+
'dashboard-root-heading-level-changed',
|
|
408
|
+
this.__boundRootHeadingLevelChangedListener,
|
|
409
|
+
);
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/** @private */
|
|
414
|
+
__removeHeadingLevelListener() {
|
|
415
|
+
if (this.__rootHeadingLevelListenerTarget) {
|
|
416
|
+
this.__rootHeadingLevelListenerTarget.removeEventListener(
|
|
417
|
+
'dashboard-root-heading-level-changed',
|
|
418
|
+
this.__boundRootHeadingLevelChangedListener,
|
|
419
|
+
);
|
|
420
|
+
this.__rootHeadingLevelListenerTarget = null;
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/** @private */
|
|
425
|
+
__updateRootHeadingLevel() {
|
|
426
|
+
const parentLayout = getParentLayout(this);
|
|
427
|
+
if (parentLayout) {
|
|
428
|
+
this._rootHeadingLevel = parentLayout.rootHeadingLevel;
|
|
429
|
+
}
|
|
430
|
+
}
|
|
380
431
|
};
|
|
@@ -25,4 +25,16 @@ export declare class DashboardLayoutMixinClass {
|
|
|
25
25
|
* @attr {boolean} dense-layout
|
|
26
26
|
*/
|
|
27
27
|
denseLayout: boolean;
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Root heading level for sections and widgets. Defaults to 2.
|
|
31
|
+
*
|
|
32
|
+
* If changed to e.g. 1:
|
|
33
|
+
* - sections will have the attribute `aria-level` with value 1
|
|
34
|
+
* - non-nested widgets will have the attribute `aria-level` with value 1
|
|
35
|
+
* - nested widgets will have the attribute `aria-level` with value 2
|
|
36
|
+
*
|
|
37
|
+
* @attr {number} root-heading-level
|
|
38
|
+
*/
|
|
39
|
+
rootHeadingLevel: number | null | undefined;
|
|
28
40
|
}
|
|
@@ -31,9 +31,36 @@ export const DashboardLayoutMixin = (superClass) =>
|
|
|
31
31
|
value: false,
|
|
32
32
|
reflectToAttribute: true,
|
|
33
33
|
},
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Root heading level for sections and widgets. Defaults to 2.
|
|
37
|
+
*
|
|
38
|
+
* If changed to e.g. 1:
|
|
39
|
+
* - sections will have the attribute `aria-level` with value 1
|
|
40
|
+
* - non-nested widgets will have the attribute `aria-level` with value 1
|
|
41
|
+
* - nested widgets will have the attribute `aria-level` with value 2
|
|
42
|
+
*
|
|
43
|
+
* @attr {number} root-heading-level
|
|
44
|
+
*/
|
|
45
|
+
rootHeadingLevel: {
|
|
46
|
+
type: Number,
|
|
47
|
+
value: 2,
|
|
48
|
+
sync: true,
|
|
49
|
+
reflectToAttribute: true,
|
|
50
|
+
observer: '__rootHeadingLevelChanged',
|
|
51
|
+
},
|
|
34
52
|
};
|
|
35
53
|
}
|
|
36
54
|
|
|
55
|
+
constructor() {
|
|
56
|
+
super();
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Used for mixin detection because `instanceof` does not work with mixins.
|
|
60
|
+
*/
|
|
61
|
+
this.__hasVaadinDashboardLayoutMixin = true;
|
|
62
|
+
}
|
|
63
|
+
|
|
37
64
|
/** @protected */
|
|
38
65
|
ready() {
|
|
39
66
|
super.ready();
|
|
@@ -63,4 +90,11 @@ export const DashboardLayoutMixin = (superClass) =>
|
|
|
63
90
|
// ...and set it as the new value
|
|
64
91
|
this.$.grid.style.setProperty('--_col-count', columnCount);
|
|
65
92
|
}
|
|
93
|
+
|
|
94
|
+
/** @private */
|
|
95
|
+
__rootHeadingLevelChanged(rootHeadingLevel) {
|
|
96
|
+
this.dispatchEvent(
|
|
97
|
+
new CustomEvent('dashboard-root-heading-level-changed', { detail: { value: rootHeadingLevel } }),
|
|
98
|
+
);
|
|
99
|
+
}
|
|
66
100
|
};
|
|
@@ -124,11 +124,6 @@ class DashboardSection extends DashboardItemMixin(
|
|
|
124
124
|
value: '',
|
|
125
125
|
},
|
|
126
126
|
|
|
127
|
-
/* @private */
|
|
128
|
-
__rootHeadingLevel: {
|
|
129
|
-
type: Number,
|
|
130
|
-
},
|
|
131
|
-
|
|
132
127
|
/** @private */
|
|
133
128
|
__childCount: {
|
|
134
129
|
type: Number,
|
|
@@ -147,7 +142,7 @@ class DashboardSection extends DashboardItemMixin(
|
|
|
147
142
|
|
|
148
143
|
<header part="header">
|
|
149
144
|
${this.__renderDragHandle()}
|
|
150
|
-
<div id="title" role="heading" aria-level=${this.
|
|
145
|
+
<div id="title" role="heading" aria-level=${this._rootHeadingLevel || 2} part="title"
|
|
151
146
|
>${this.sectionTitle}</div
|
|
152
147
|
>
|
|
153
148
|
${this.__renderRemoveButton()}
|
|
@@ -164,11 +164,6 @@ class DashboardWidget extends DashboardItemMixin(
|
|
|
164
164
|
value: '',
|
|
165
165
|
},
|
|
166
166
|
|
|
167
|
-
/* @private */
|
|
168
|
-
__rootHeadingLevel: {
|
|
169
|
-
type: Number,
|
|
170
|
-
},
|
|
171
|
-
|
|
172
167
|
/* @private */
|
|
173
168
|
__isNestedWidget: {
|
|
174
169
|
type: Boolean,
|
|
@@ -210,7 +205,6 @@ class DashboardWidget extends DashboardItemMixin(
|
|
|
210
205
|
this.toggleAttribute(attr, !!wrapper[attr]);
|
|
211
206
|
});
|
|
212
207
|
this.__i18n = wrapper.i18n;
|
|
213
|
-
this.__rootHeadingLevel = wrapper.__rootHeadingLevel;
|
|
214
208
|
}
|
|
215
209
|
|
|
216
210
|
this.__updateNestedState();
|
|
@@ -232,7 +226,7 @@ class DashboardWidget extends DashboardItemMixin(
|
|
|
232
226
|
|
|
233
227
|
/** @private */
|
|
234
228
|
__renderWidgetTitle() {
|
|
235
|
-
let effectiveHeadingLevel = this.
|
|
229
|
+
let effectiveHeadingLevel = this._rootHeadingLevel;
|
|
236
230
|
// Default to 2 if not defined
|
|
237
231
|
if (effectiveHeadingLevel == null) {
|
|
238
232
|
effectiveHeadingLevel = 2;
|
|
@@ -243,16 +243,6 @@ declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends Das
|
|
|
243
243
|
*/
|
|
244
244
|
editable: boolean;
|
|
245
245
|
|
|
246
|
-
/**
|
|
247
|
-
* Root heading level for sections and widgets. Defaults to 2.
|
|
248
|
-
*
|
|
249
|
-
* If changed to e.g. 1:
|
|
250
|
-
* - sections will have the attribute `aria-level` with value 1
|
|
251
|
-
* - non-nested widgets will have the attribute `aria-level` with value 1
|
|
252
|
-
* - nested widgets will have the attribute `aria-level` with value 2
|
|
253
|
-
*/
|
|
254
|
-
rootHeadingLevel: number | null | undefined;
|
|
255
|
-
|
|
256
246
|
/**
|
|
257
247
|
* The object used to localize this component. To change the default
|
|
258
248
|
* localization, replace this with an object that provides all properties, or
|
package/src/vaadin-dashboard.js
CHANGED
|
@@ -158,20 +158,6 @@ class Dashboard extends DashboardLayoutMixin(
|
|
|
158
158
|
type: Boolean,
|
|
159
159
|
},
|
|
160
160
|
|
|
161
|
-
/**
|
|
162
|
-
* Root heading level for sections and widgets. Defaults to 2.
|
|
163
|
-
*
|
|
164
|
-
* If changed to e.g. 1:
|
|
165
|
-
* - sections will have the attribute `aria-level` with value 1
|
|
166
|
-
* - non-nested widgets will have the attribute `aria-level` with value 1
|
|
167
|
-
* - nested widgets will have the attribute `aria-level` with value 2
|
|
168
|
-
*/
|
|
169
|
-
rootHeadingLevel: {
|
|
170
|
-
type: Number,
|
|
171
|
-
value: 2,
|
|
172
|
-
sync: true,
|
|
173
|
-
},
|
|
174
|
-
|
|
175
161
|
/** @private */
|
|
176
162
|
__childCount: {
|
|
177
163
|
type: Number,
|
|
@@ -181,7 +167,7 @@ class Dashboard extends DashboardLayoutMixin(
|
|
|
181
167
|
}
|
|
182
168
|
|
|
183
169
|
static get observers() {
|
|
184
|
-
return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n
|
|
170
|
+
return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
|
|
185
171
|
}
|
|
186
172
|
|
|
187
173
|
/**
|
|
@@ -267,7 +253,6 @@ class Dashboard extends DashboardLayoutMixin(
|
|
|
267
253
|
wrapper.firstElementChild.toggleAttribute(attr, !!wrapper[attr]);
|
|
268
254
|
});
|
|
269
255
|
wrapper.firstElementChild.__i18n = this.__effectiveI18n;
|
|
270
|
-
wrapper.firstElementChild.__rootHeadingLevel = this.rootHeadingLevel;
|
|
271
256
|
}
|
|
272
257
|
});
|
|
273
258
|
}
|
|
@@ -311,7 +296,6 @@ class Dashboard extends DashboardLayoutMixin(
|
|
|
311
296
|
|
|
312
297
|
SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
|
|
313
298
|
section.__i18n = this.__effectiveI18n;
|
|
314
|
-
section.__rootHeadingLevel = this.rootHeadingLevel;
|
|
315
299
|
|
|
316
300
|
// Render the subitems
|
|
317
301
|
section.__childCount = item.items.length;
|
|
@@ -436,7 +420,6 @@ class Dashboard extends DashboardLayoutMixin(
|
|
|
436
420
|
wrapper['first-child'] = item === getItemsArrayOfItem(item, this.items)[0];
|
|
437
421
|
wrapper['last-child'] = item === getItemsArrayOfItem(item, this.items).slice(-1)[0];
|
|
438
422
|
wrapper.i18n = this.__effectiveI18n;
|
|
439
|
-
wrapper.__rootHeadingLevel = this.rootHeadingLevel;
|
|
440
423
|
}
|
|
441
424
|
|
|
442
425
|
/** @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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta6",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -19,6 +19,17 @@
|
|
|
19
19
|
]
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
|
+
{
|
|
23
|
+
"name": "root-heading-level",
|
|
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",
|
|
25
|
+
"value": {
|
|
26
|
+
"type": [
|
|
27
|
+
"number",
|
|
28
|
+
"null",
|
|
29
|
+
"undefined"
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
22
33
|
{
|
|
23
34
|
"name": "theme",
|
|
24
35
|
"description": "The theme variants to apply to the component.",
|
|
@@ -41,6 +52,17 @@
|
|
|
41
52
|
"boolean"
|
|
42
53
|
]
|
|
43
54
|
}
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "rootHeadingLevel",
|
|
58
|
+
"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",
|
|
59
|
+
"value": {
|
|
60
|
+
"type": [
|
|
61
|
+
"number",
|
|
62
|
+
"null",
|
|
63
|
+
"undefined"
|
|
64
|
+
]
|
|
65
|
+
}
|
|
44
66
|
}
|
|
45
67
|
],
|
|
46
68
|
"events": []
|
|
@@ -136,7 +158,7 @@
|
|
|
136
158
|
},
|
|
137
159
|
{
|
|
138
160
|
"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/25.0.0-
|
|
161
|
+
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta6/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta6/#/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
162
|
"attributes": [
|
|
141
163
|
{
|
|
142
164
|
"name": "dense-layout",
|
|
@@ -148,31 +170,31 @@
|
|
|
148
170
|
}
|
|
149
171
|
},
|
|
150
172
|
{
|
|
151
|
-
"name": "
|
|
152
|
-
"description": "
|
|
173
|
+
"name": "root-heading-level",
|
|
174
|
+
"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",
|
|
153
175
|
"value": {
|
|
154
176
|
"type": [
|
|
155
|
-
"
|
|
177
|
+
"number",
|
|
178
|
+
"null",
|
|
179
|
+
"undefined"
|
|
156
180
|
]
|
|
157
181
|
}
|
|
158
182
|
},
|
|
159
183
|
{
|
|
160
|
-
"name": "
|
|
161
|
-
"description": "
|
|
184
|
+
"name": "i18n",
|
|
185
|
+
"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.",
|
|
162
186
|
"value": {
|
|
163
187
|
"type": [
|
|
164
|
-
"
|
|
165
|
-
"null",
|
|
166
|
-
"undefined"
|
|
188
|
+
"Object"
|
|
167
189
|
]
|
|
168
190
|
}
|
|
169
191
|
},
|
|
170
192
|
{
|
|
171
|
-
"name": "
|
|
172
|
-
"description": "
|
|
193
|
+
"name": "editable",
|
|
194
|
+
"description": "Whether the dashboard is editable.",
|
|
173
195
|
"value": {
|
|
174
196
|
"type": [
|
|
175
|
-
"
|
|
197
|
+
"boolean",
|
|
176
198
|
"null",
|
|
177
199
|
"undefined"
|
|
178
200
|
]
|
|
@@ -201,6 +223,17 @@
|
|
|
201
223
|
]
|
|
202
224
|
}
|
|
203
225
|
},
|
|
226
|
+
{
|
|
227
|
+
"name": "rootHeadingLevel",
|
|
228
|
+
"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",
|
|
229
|
+
"value": {
|
|
230
|
+
"type": [
|
|
231
|
+
"number",
|
|
232
|
+
"null",
|
|
233
|
+
"undefined"
|
|
234
|
+
]
|
|
235
|
+
}
|
|
236
|
+
},
|
|
204
237
|
{
|
|
205
238
|
"name": "i18n",
|
|
206
239
|
"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```",
|
|
@@ -242,17 +275,6 @@
|
|
|
242
275
|
"undefined"
|
|
243
276
|
]
|
|
244
277
|
}
|
|
245
|
-
},
|
|
246
|
-
{
|
|
247
|
-
"name": "rootHeadingLevel",
|
|
248
|
-
"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",
|
|
249
|
-
"value": {
|
|
250
|
-
"type": [
|
|
251
|
-
"number",
|
|
252
|
-
"null",
|
|
253
|
-
"undefined"
|
|
254
|
-
]
|
|
255
|
-
}
|
|
256
278
|
}
|
|
257
279
|
],
|
|
258
280
|
"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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta6",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -25,6 +25,13 @@
|
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": ".rootHeadingLevel",
|
|
31
|
+
"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",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
28
35
|
}
|
|
29
36
|
]
|
|
30
37
|
},
|
|
@@ -58,7 +65,7 @@
|
|
|
58
65
|
},
|
|
59
66
|
{
|
|
60
67
|
"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/25.0.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.0.0-beta6/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta6/#/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
69
|
"extension": true,
|
|
63
70
|
"attributes": [
|
|
64
71
|
{
|
|
@@ -75,6 +82,13 @@
|
|
|
75
82
|
"kind": "expression"
|
|
76
83
|
}
|
|
77
84
|
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".rootHeadingLevel",
|
|
87
|
+
"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",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
78
92
|
{
|
|
79
93
|
"name": ".i18n",
|
|
80
94
|
"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```",
|
|
@@ -96,13 +110,6 @@
|
|
|
96
110
|
"kind": "expression"
|
|
97
111
|
}
|
|
98
112
|
},
|
|
99
|
-
{
|
|
100
|
-
"name": ".rootHeadingLevel",
|
|
101
|
-
"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",
|
|
102
|
-
"value": {
|
|
103
|
-
"kind": "expression"
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
113
|
{
|
|
107
114
|
"name": "@dashboard-item-move-mode-changed",
|
|
108
115
|
"description": "Fired when an item move mode changed",
|