@vaadin/dashboard 24.7.0-alpha2 → 24.7.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -37,21 +37,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "24.7.0-alpha2",
-    "@vaadin/component-base": "24.7.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha2",
+    "@vaadin/button": "24.7.0-alpha4",
+    "@vaadin/component-base": "24.7.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha4",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0"
+    "@vaadin/chai-plugins": "24.7.0-alpha4",
+    "@vaadin/testing-helpers": "^1.1.0"
   },
   "cvdlName": "vaadin-dashboard",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e2523f9b4abc5a9586fb758166f823dc40c399dd"
+  "gitHead": "d7165cebf9dcf6a7e9e22f6353662d33404b4856"
 }

package/src/keyboard-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-button.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-helpers.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-item-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-item-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-layout-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-layout-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-layout.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-layout.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-section.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-section.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -173,6 +173,12 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         type: String,
         value: '',
       },
+
+      /** @private */
+      __childCount: {
+        type: Number,
+        value: 0,
+      },
     };
   }
 
@@ -191,7 +197,10 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         </header>
       </div>
 
+      <!-- Default slot is used by <vaadin-dashboard-layout> -->
       <slot></slot>
+      <!-- Named slots are used by <vaadin-dashboard> -->
+      ${[...Array(this.__childCount)].map((_, index) => html`<slot name="slot-${index}"></slot>`)}
     `;
   }
 

package/src/vaadin-dashboard-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-widget.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-widget.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -195,6 +195,12 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
           };
         },
       },
+
+      /** @private */
+      __childCount: {
+        type: Number,
+        value: 0,
+      },
     };
   }
 
@@ -221,11 +227,14 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
 
   /** @protected */
   render() {
-    return html`<div id="grid"><slot></slot></div>`;
+    return html`<div id="grid">
+      ${[...Array(this.__childCount)].map((_, index) => html`<slot name="slot-${index}"></slot>`)}
+    </div>`;
   }
 
   /** @private */
   __itemsOrRendererChanged(items, renderer) {
+    this.__childCount = items ? items.length : 0;
     this.__renderItemWrappers(items || []);
 
     this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
@@ -257,38 +266,25 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
   __renderItemWrappers(items, hostElement = this) {
     // Get all the wrappers in the host element
     let wrappers = [...hostElement.children].filter((el) => el.localName === WRAPPER_LOCAL_NAME);
-    let previousWrapper = null;
 
     const focusedWrapper = wrappers.find((wrapper) => wrapper.querySelector(':focus'));
     const focusedWrapperWillBeRemoved = focusedWrapper && !this.__isActiveWrapper(focusedWrapper);
     const wrapperClosestToRemovedFocused =
       focusedWrapperWillBeRemoved && this.__getClosestActiveWrapper(focusedWrapper);
 
-    items.forEach((item) => {
+    items.forEach((item, index) => {
       // Find the wrapper for the item or create a new one
       const wrapper = wrappers.find((el) => itemsEqual(getElementItem(el), item)) || this.__createWrapper(item);
       wrappers = wrappers.filter((el) => el !== wrapper);
+      if (!wrapper.isConnected) {
+        hostElement.appendChild(wrapper);
+      }
 
       // Update the wrapper style
       this.__updateWrapper(wrapper, item);
 
-      if (wrapper !== focusedWrapper) {
-        if (previousWrapper) {
-          // Append the wrapper after the previous one if it's not already there
-          if (wrapper.previousElementSibling !== previousWrapper) {
-            previousWrapper.after(wrapper);
-          }
-        } else if (hostElement.firstChild) {
-          // Insert the wrapper as the first child of the host element if it's not already there
-          if (wrapper !== hostElement.firstChild) {
-            hostElement.insertBefore(wrapper, hostElement.firstChild);
-          }
-        } else {
-          // Append the wrapper to the empty host element
-          hostElement.appendChild(wrapper);
-        }
-      }
-      previousWrapper = wrapper;
+      // Update the wrapper slot
+      wrapper.slot = `slot-${index}`;
 
       // Render section if the item has subitems
       if (item.items) {
@@ -307,6 +303,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
         section.__i18n = this.i18n;
 
         // Render the subitems
+        section.__childCount = item.items.length;
         this.__renderItemWrappers(item.items, section);
       }
     });
@@ -368,12 +365,26 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     return getItemsArrayOfItem(getElementItem(wrapper), this.items);
   }
 
+  /**
+   * Parses the slot name to get the index of the item in the dashboard
+   * For example, slot name "slot-12" will return 12
+   * @private
+   */
+  __parseSlotIndex(slotName) {
+    return parseInt(slotName.split('-')[1]);
+  }
+
   /** @private */
   __getClosestActiveWrapper(wrapper) {
     if (!wrapper || this.__isActiveWrapper(wrapper)) {
       return wrapper;
     }
 
+    // Sibling wrappers sorted by their slot name
+    const siblingWrappers = [...wrapper.parentElement.children].sort((a, b) => {
+      return this.__parseSlotIndex(a.slot) - this.__parseSlotIndex(b.slot);
+    });
+
     // Starting from the given wrapper element, iterates through the siblings in the given direction
     // to find the closest wrapper that represents an item in the dashboard's items array
     const findSiblingWrapper = (wrapper, dir) => {
@@ -381,7 +392,8 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
         if (this.__isActiveWrapper(wrapper)) {
           return wrapper;
         }
-        wrapper = dir === 1 ? wrapper.nextElementSibling : wrapper.previousElementSibling;
+        const currentIndex = siblingWrappers.indexOf(wrapper);
+        wrapper = dir === 1 ? siblingWrappers[currentIndex + 1] : siblingWrappers[currentIndex - 1];
       }
     };
 

package/src/widget-reorder-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/widget-resize-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -136,7 +136,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "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-alpha2/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha2/#/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.",
+          "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-alpha4/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/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.",
           "attributes": [
             {
               "name": "dense-layout",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -58,7 +58,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "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-alpha2/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha2/#/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.",
+          "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-alpha4/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/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.",
           "extension": true,
           "attributes": [
             {