@vaadin/dashboard 25.1.0-alpha8 → 25.1.0-alpha9
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 +29 -0
- package/package.json +10 -10
- package/web-types.json +18 -27
- package/web-types.lit.json +9 -9
package/custom-elements.json
CHANGED
|
@@ -1014,6 +1014,28 @@
|
|
|
1014
1014
|
"description": "Whether the dashboard is editable.",
|
|
1015
1015
|
"attribute": "editable"
|
|
1016
1016
|
},
|
|
1017
|
+
{
|
|
1018
|
+
"kind": "field",
|
|
1019
|
+
"name": "i18n",
|
|
1020
|
+
"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```",
|
|
1021
|
+
"return": {
|
|
1022
|
+
"type": {
|
|
1023
|
+
"text": "!DashboardI18n"
|
|
1024
|
+
}
|
|
1025
|
+
},
|
|
1026
|
+
"parameters": [
|
|
1027
|
+
{
|
|
1028
|
+
"name": "value",
|
|
1029
|
+
"type": {
|
|
1030
|
+
"text": "Object"
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
],
|
|
1034
|
+
"inheritedFrom": {
|
|
1035
|
+
"name": "I18nMixin",
|
|
1036
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1037
|
+
}
|
|
1038
|
+
},
|
|
1017
1039
|
{
|
|
1018
1040
|
"kind": "field",
|
|
1019
1041
|
"name": "items",
|
|
@@ -1137,6 +1159,13 @@
|
|
|
1137
1159
|
"description": "Whether the dashboard is editable.",
|
|
1138
1160
|
"fieldName": "editable"
|
|
1139
1161
|
},
|
|
1162
|
+
{
|
|
1163
|
+
"name": "i18n",
|
|
1164
|
+
"inheritedFrom": {
|
|
1165
|
+
"name": "I18nMixin",
|
|
1166
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1167
|
+
}
|
|
1168
|
+
},
|
|
1140
1169
|
{
|
|
1141
1170
|
"name": "renderer",
|
|
1142
1171
|
"type": {
|
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-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.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-alpha9",
|
|
41
|
+
"@vaadin/button": "25.1.0-alpha9",
|
|
42
|
+
"@vaadin/component-base": "25.1.0-alpha9",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
|
|
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-alpha9",
|
|
48
|
+
"@vaadin/chai-plugins": "25.1.0-alpha9",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha9",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha9",
|
|
52
52
|
"sinon": "^21.0.0"
|
|
53
53
|
},
|
|
54
54
|
"cvdlName": "vaadin-dashboard",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
|
|
61
61
|
}
|
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-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -117,8 +117,8 @@
|
|
|
117
117
|
"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.",
|
|
118
118
|
"attributes": [
|
|
119
119
|
{
|
|
120
|
-
"name": "
|
|
121
|
-
"description": "The
|
|
120
|
+
"name": "theme",
|
|
121
|
+
"description": "The theme variants to apply to the component.",
|
|
122
122
|
"value": {
|
|
123
123
|
"type": [
|
|
124
124
|
"string",
|
|
@@ -128,8 +128,8 @@
|
|
|
128
128
|
}
|
|
129
129
|
},
|
|
130
130
|
{
|
|
131
|
-
"name": "
|
|
132
|
-
"description": "The
|
|
131
|
+
"name": "widget-title",
|
|
132
|
+
"description": "The title of the widget.",
|
|
133
133
|
"value": {
|
|
134
134
|
"type": [
|
|
135
135
|
"string",
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
},
|
|
159
159
|
{
|
|
160
160
|
"name": "vaadin-dashboard",
|
|
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.1.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.1.0-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha9/#/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.",
|
|
162
162
|
"attributes": [
|
|
163
163
|
{
|
|
164
164
|
"name": "dense-layout",
|
|
@@ -170,31 +170,22 @@
|
|
|
170
170
|
}
|
|
171
171
|
},
|
|
172
172
|
{
|
|
173
|
-
"name": "
|
|
174
|
-
"description": "
|
|
173
|
+
"name": "editable",
|
|
174
|
+
"description": "Whether the dashboard is editable.",
|
|
175
175
|
"value": {
|
|
176
176
|
"type": [
|
|
177
|
-
"
|
|
177
|
+
"boolean",
|
|
178
178
|
"null",
|
|
179
179
|
"undefined"
|
|
180
180
|
]
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
|
-
"name": "
|
|
185
|
-
"description": "
|
|
186
|
-
"value": {
|
|
187
|
-
"type": [
|
|
188
|
-
"Object"
|
|
189
|
-
]
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
"name": "editable",
|
|
194
|
-
"description": "Whether the dashboard is editable.",
|
|
184
|
+
"name": "root-heading-level",
|
|
185
|
+
"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",
|
|
195
186
|
"value": {
|
|
196
187
|
"type": [
|
|
197
|
-
"
|
|
188
|
+
"number",
|
|
198
189
|
"null",
|
|
199
190
|
"undefined"
|
|
200
191
|
]
|
|
@@ -224,11 +215,11 @@
|
|
|
224
215
|
}
|
|
225
216
|
},
|
|
226
217
|
{
|
|
227
|
-
"name": "
|
|
228
|
-
"description": "
|
|
218
|
+
"name": "editable",
|
|
219
|
+
"description": "Whether the dashboard is editable.",
|
|
229
220
|
"value": {
|
|
230
221
|
"type": [
|
|
231
|
-
"
|
|
222
|
+
"boolean",
|
|
232
223
|
"null",
|
|
233
224
|
"undefined"
|
|
234
225
|
]
|
|
@@ -266,11 +257,11 @@
|
|
|
266
257
|
}
|
|
267
258
|
},
|
|
268
259
|
{
|
|
269
|
-
"name": "
|
|
270
|
-
"description": "
|
|
260
|
+
"name": "rootHeadingLevel",
|
|
261
|
+
"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",
|
|
271
262
|
"value": {
|
|
272
263
|
"type": [
|
|
273
|
-
"
|
|
264
|
+
"number",
|
|
274
265
|
"null",
|
|
275
266
|
"undefined"
|
|
276
267
|
]
|
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-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
},
|
|
66
66
|
{
|
|
67
67
|
"name": "vaadin-dashboard",
|
|
68
|
-
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.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-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha9/#/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
|
{
|
|
@@ -82,13 +82,6 @@
|
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
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
|
-
},
|
|
92
85
|
{
|
|
93
86
|
"name": ".i18n",
|
|
94
87
|
"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```",
|
|
@@ -110,6 +103,13 @@
|
|
|
110
103
|
"kind": "expression"
|
|
111
104
|
}
|
|
112
105
|
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".rootHeadingLevel",
|
|
108
|
+
"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",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
113
|
{
|
|
114
114
|
"name": "@dashboard-item-before-remove",
|
|
115
115
|
"description": "Fired before an item is removed",
|