@vaadin/dashboard 25.0.3 → 25.1.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "25.0.3",
+  "version": "25.1.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,23 +36,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.0.3",
-    "@vaadin/button": "~25.0.3",
-    "@vaadin/component-base": "~25.0.3",
-    "@vaadin/vaadin-themable-mixin": "~25.0.3",
+    "@vaadin/a11y-base": "25.1.0-alpha2",
+    "@vaadin/button": "25.1.0-alpha2",
+    "@vaadin/component-base": "25.1.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.0.3",
-    "@vaadin/chai-plugins": "~25.0.3",
-    "@vaadin/test-runner-commands": "~25.0.3",
+    "@vaadin/aura": "25.1.0-alpha2",
+    "@vaadin/chai-plugins": "25.1.0-alpha2",
+    "@vaadin/test-runner-commands": "25.1.0-alpha2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.0.3"
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha2",
+    "sinon": "^21.0.0"
   },
   "cvdlName": "vaadin-dashboard",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a4b57a083b721045770f1f3700edd699872cd7fb"
+  "gitHead": "dfeb6e14643ec923e5505ca645f7354c6dc170ec"
 }

package/src/vaadin-dashboard.d.ts

@@ -85,6 +85,17 @@ export type DashboardItemResizedEvent<TItem extends DashboardItem> = CustomEvent
   items: Array<TItem | DashboardSectionItem<TItem>>;
 }>;
 
+/**
+ * Fired before an item is removed. Calling preventDefault() on the event will cancel the removal.
+ */
+export type DashboardItemBeforeRemoveEvent<TItem extends DashboardItem> = CustomEvent<{
+  item: TItem | DashboardSectionItem<TItem>;
+
+  items: Array<TItem | DashboardSectionItem<TItem>>;
+
+  section: DashboardSectionItem<TItem> | undefined;
+}>;
+
 /**
  * Fired when an item was removed
  */
@@ -92,6 +103,8 @@ export type DashboardItemRemovedEvent<TItem extends DashboardItem> = CustomEvent
   item: TItem | DashboardSectionItem<TItem>;
 
   items: Array<TItem | DashboardSectionItem<TItem>>;
+
+  section: DashboardSectionItem<TItem> | undefined;
 }>;
 
 /**
@@ -123,6 +136,8 @@ export interface DashboardCustomEventMap<TItem extends DashboardItem> {
 
   'dashboard-item-resized': DashboardItemResizedEvent<TItem>;
 
+  'dashboard-item-before-remove': DashboardItemBeforeRemoveEvent<TItem>;
+
   'dashboard-item-removed': DashboardItemRemovedEvent<TItem>;
 
   'dashboard-item-selected-changed': DashboardItemSelectedChangedEvent<TItem>;

package/src/vaadin-dashboard.js

@@ -93,6 +93,7 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  *
  * @fires {CustomEvent} dashboard-item-moved - Fired when an item was moved
  * @fires {CustomEvent} dashboard-item-resized - Fired when an item was resized
+ * @fires {CustomEvent} dashboard-item-before-remove - Fired before an item is removed. Calling preventDefault() on the event will cancel the removal.
  * @fires {CustomEvent} dashboard-item-removed - Fired when an item was removed
  * @fires {CustomEvent} dashboard-item-selected-changed - Fired when an item selected state changed
  * @fires {CustomEvent} dashboard-item-move-mode-changed - Fired when an item move mode changed
@@ -427,12 +428,25 @@ class Dashboard extends DashboardLayoutMixin(
     e.stopImmediatePropagation();
     const item = getElementItem(e.target);
     const items = getItemsArrayOfItem(item, this.items);
+    const section = this.items.find((i) => i.items && i.items.includes(item));
+
+    // Fire before-remove event
+    const beforeRemoveEvent = new CustomEvent('dashboard-item-before-remove', {
+      cancelable: true,
+      detail: { item, items: this.items, section },
+    });
+    this.dispatchEvent(beforeRemoveEvent);
+
+    // Check if removal was prevented
+    if (beforeRemoveEvent.defaultPrevented) {
+      return;
+    }
+
+    // Proceed with removal
     items.splice(items.indexOf(item), 1);
     this.items = [...this.items];
     this.toggleAttribute('item-selected', false);
-    this.dispatchEvent(
-      new CustomEvent('dashboard-item-removed', { cancelable: true, detail: { item, items: this.items } }),
-    );
+    this.dispatchEvent(new CustomEvent('dashboard-item-removed', { detail: { item, items: this.items, section } }));
   }
 
   /** @private */
@@ -516,6 +530,12 @@ class Dashboard extends DashboardLayoutMixin(
    * @event dashboard-item-resized
    */
 
+  /**
+   * Fired before an item is removed
+   *
+   * @event dashboard-item-before-remove
+   */
+
   /**
    * Fired when an item was removed
    *

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "25.0.3",
+  "version": "25.1.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -158,7 +158,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/25.0.3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.3/#/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/25.1.0-alpha2/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.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.",
           "attributes": [
             {
               "name": "dense-layout",
@@ -278,6 +278,10 @@
               }
             ],
             "events": [
+              {
+                "name": "dashboard-item-before-remove",
+                "description": "Fired before an item is removed"
+              },
               {
                 "name": "dashboard-item-move-mode-changed",
                 "description": "Fired when an item move mode changed"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "25.0.3",
+  "version": "25.1.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -65,7 +65,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/25.0.3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.3/#/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/25.1.0-alpha2/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.1.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.",
           "extension": true,
           "attributes": [
             {
@@ -110,6 +110,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@dashboard-item-before-remove",
+              "description": "Fired before an item is removed",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@dashboard-item-move-mode-changed",
               "description": "Fired when an item move mode changed",