@vaadin/dashboard 24.6.0-alpha8 → 24.6.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "24.6.0-alpha8",
+  "version": "24.6.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -37,15 +37,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "24.6.0-alpha8",
-    "@vaadin/component-base": "24.6.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha8",
+    "@vaadin/button": "24.6.0-alpha9",
+    "@vaadin/component-base": "24.6.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha9",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha8",
+    "@vaadin/chai-plugins": "24.6.0-alpha9",
     "@vaadin/testing-helpers": "^1.0.0"
   },
   "cvdlName": "vaadin-dashboard",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
+  "gitHead": "e303d77ba20c3089c9998be9a318733d9ec5b53c"
 }

package/src/vaadin-dashboard-button.js

@@ -22,6 +22,10 @@ class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixi
     return 'vaadin-dashboard-button';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get styles() {
     return buttonStyles;
   }

package/src/vaadin-dashboard-layout.js

@@ -59,6 +59,14 @@ class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(Po
     return 'vaadin-dashboard-layout';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-dashboard';
+  }
+
   /** @protected */
   render() {
     return html`<div id="grid"><slot></slot></div>`;

package/src/vaadin-dashboard-section.js

@@ -74,6 +74,10 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
     return 'vaadin-dashboard-section';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get styles() {
     return [
       css`

package/src/vaadin-dashboard-widget.js

@@ -99,6 +99,10 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
     return 'vaadin-dashboard-widget';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get styles() {
     return [
       css`

package/src/vaadin-dashboard.js

@@ -106,6 +106,10 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     return 'vaadin-dashboard';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get cvdlName() {
     return 'vaadin-dashboard';
   }

package/src/widget-reorder-controller.js

@@ -11,6 +11,7 @@
 import { getElementItem, getItemsArrayOfItem, itemsEqual, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 
 const REORDER_EVENT_TIMEOUT = 200;
+const REORDER_MOVE_THRESHOLD = 10;
 
 /**
  * A controller to widget reordering inside a dashboard.
@@ -64,6 +65,29 @@ export class WidgetReorderController {
       return;
     }
 
+    // The location against which we measure the drag distance
+    this.__startX ||= e.clientX;
+    this.__startY ||= e.clientY;
+
+    // Delta values for the current drag event
+    const currentDx = e.clientX - (this.__previousX || e.clientX);
+    const currentDy = e.clientY - (this.__previousY || e.clientY);
+    this.__previousX = e.clientX;
+    this.__previousY = e.clientY;
+
+    if (currentDx && this.__dx && Math.sign(currentDx) !== Math.sign(this.__dx)) {
+      // If the direction of the drag changes, reset the start position
+      this.__startX = e.clientX;
+    }
+    if (currentDy && this.__dy && Math.sign(currentDy) !== Math.sign(this.__dy)) {
+      // If the direction of the drag changes, reset the start position
+      this.__startY = e.clientY;
+    }
+
+    // The delta values for the drag event against the start position
+    this.__dx = e.clientX - this.__startX;
+    this.__dy = e.clientY - this.__startY;
+
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
 
@@ -88,7 +112,15 @@ export class WidgetReorderController {
     }
 
     // Check if the dragged element is dragged enough over the target element
-    if (!this.__reordering && this.__isDraggedOver(draggedElement, targetElement, e.clientX, e.clientY)) {
+    if (
+      !this.__reordering &&
+      this.__isDraggedOver(draggedElement, targetElement, {
+        x: e.clientX,
+        y: e.clientY,
+        dx: this.__dx,
+        dy: this.__dy,
+      })
+    ) {
       // Prevent reordering multiple times in quick succession
       this.__reordering = true;
       setTimeout(() => {
@@ -109,6 +141,13 @@ export class WidgetReorderController {
       return;
     }
 
+    this.__previousX = null;
+    this.__previousY = null;
+    this.__startX = null;
+    this.__startY = null;
+    this.__dx = null;
+    this.__dy = null;
+
     // If the originally dragged element is restored to the DOM (as a direct child of the host),
     // to make sure "dragend" event gets dispatched, remove it to avoid duplicates
     if (this.__draggedElement.parentElement === this.host) {
@@ -169,21 +208,21 @@ export class WidgetReorderController {
    * of the drag event.
    * @private
    */
-  __isDraggedOver(draggedElement, targetElement, x, y) {
+  __isDraggedOver(draggedElement, targetElement, { x, y, dx, dy }) {
     const draggedPos = draggedElement.getBoundingClientRect();
     const targetPos = targetElement.getBoundingClientRect();
     if (draggedPos.top >= targetPos.bottom) {
       // target is on a row above the dragged widget
-      return y < targetPos.top + targetPos.height / 2;
+      return y < targetPos.bottom && dy < -REORDER_MOVE_THRESHOLD;
     } else if (draggedPos.bottom <= targetPos.top) {
       // target is on a row below the dragged widget
-      return y > targetPos.top + targetPos.height / 2;
+      return y > targetPos.top && dy > REORDER_MOVE_THRESHOLD;
     } else if (draggedPos.left >= targetPos.right) {
       // target is on a column to the left of the dragged widget
-      return x < targetPos.left + targetPos.width / 2;
+      return x < targetPos.right && dx < -REORDER_MOVE_THRESHOLD;
     } else if (draggedPos.right <= targetPos.left) {
       // target is on a column to the right of the dragged widget
-      return x > targetPos.left + targetPos.width / 2;
+      return x > targetPos.left && dx > REORDER_MOVE_THRESHOLD;
     }
   }
 

package/theme/lumo/vaadin-dashboard-layout-styles.js

@@ -2,7 +2,7 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 export const dashboardLayoutStyles = css`
   #grid {
-    --_vaadin-dashboard-default-spacing: var(--lumo-space-xl);
+    --_vaadin-dashboard-default-spacing: var(--lumo-space-l);
   }
 `;
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.6.0-alpha8",
+  "version": "24.6.0-alpha9",
   "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.6.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/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-spacing`        | spacing between child elements and space around its 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.6.0-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.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-spacing`        | spacing between child elements and space around its 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.6.0-alpha8",
+  "version": "24.6.0-alpha9",
   "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.6.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/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-spacing`        | spacing between child elements and space around its 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.6.0-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.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-spacing`        | spacing between child elements and space around its 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": [
             {