@vaadin/dashboard 24.6.0-alpha1

package/src/widget-reorder-controller.js

@@ -0,0 +1,247 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { getElementItem, getItemsArrayOfItem, itemsEqual, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
+
+const REORDER_EVENT_TIMEOUT = 200;
+
+/**
+ * A controller to widget reordering inside a dashboard.
+ */
+export class WidgetReorderController {
+  constructor(host) {
+    this.host = host;
+    this.draggedElementRemoveObserver = new MutationObserver(() => this.__restoreDraggedElement());
+
+    host.addEventListener('dragstart', (e) => this.__dragStart(e));
+    host.addEventListener('dragend', (e) => this.__dragEnd(e));
+    host.addEventListener('dragover', (e) => this.__dragOver(e));
+    host.addEventListener('drop', (e) => this.__drop(e));
+    host.addEventListener('item-move', (e) => this.__itemMove(e));
+  }
+
+  /** @private */
+  __dragStart(e) {
+    const handle = [...e.composedPath()].find((el) => el.classList && el.classList.contains('drag-handle'));
+    if (!handle) {
+      return;
+    }
+
+    this.__draggedElement = e.target;
+
+    // Avoid having the selection/focus outline styles in the drag image
+    this.__draggedElement.__exitMode();
+    this.__draggedElement.__focused = false;
+    this.__draggedElement.__selected = false;
+
+    this.draggedItem = getElementItem(this.__draggedElement);
+
+    // Set the drag image to the dragged element
+    const { left, top } = this.__draggedElement.getBoundingClientRect();
+    e.dataTransfer.setDragImage(this.__draggedElement, e.clientX - left, e.clientY - top);
+    // Set the text/plain data to enable dragging on mobile devices
+    e.dataTransfer.setData('text/plain', 'item');
+
+    // Observe the removal of the dragged element from the DOM
+    this.draggedElementRemoveObserver.observe(this.host, { childList: true, subtree: true });
+
+    requestAnimationFrame(() => {
+      // Re-render to have the dragged element turn into a placeholder
+      this.host.items = [...this.host.items];
+    });
+  }
+
+  /** @private */
+  __dragOver(e) {
+    if (!this.draggedItem) {
+      return;
+    }
+
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+
+    // Get all elements that are candidates for reordering with the dragged element
+    const dragContextElements = this.__getDragContextElements(this.__draggedElement);
+    // Find the up-to-date element instance representing the dragged item
+    const draggedElement = dragContextElements.find((element) => getElementItem(element) === this.draggedItem);
+    if (!draggedElement) {
+      return;
+    }
+    // Get all elements except the dragged element from the drag context
+    const otherElements = dragContextElements.filter((element) => element !== draggedElement);
+    if (otherElements.length === 0) {
+      return;
+    }
+
+    // Find the element that is being dragged over
+    let targetElement = otherElements.find((other) => other.contains(e.target));
+    if (!targetElement) {
+      // Find the element closest to the x and y coordinates of the drag event
+      targetElement = this.__getClosestElement(otherElements, e.clientX, e.clientY);
+    }
+
+    // Check if the dragged element is dragged enough over the target element
+    if (!this.__reordering && this.__isDraggedOver(draggedElement, targetElement, e.clientX, e.clientY)) {
+      // Prevent reordering multiple times in quick succession
+      this.__reordering = true;
+      setTimeout(() => {
+        this.__reordering = false;
+      }, REORDER_EVENT_TIMEOUT);
+
+      const targetItem = getElementItem(targetElement);
+      const targetItems = getItemsArrayOfItem(targetItem, this.host.items);
+      const targetIndex = targetItems.indexOf(targetItem);
+
+      this.__reorderItems(this.draggedItem, targetIndex);
+    }
+  }
+
+  /** @private */
+  __dragEnd() {
+    if (!this.draggedItem) {
+      return;
+    }
+
+    // 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) {
+      this.__draggedElement.remove();
+    }
+
+    // Dispatch the moved event
+    this.__fireItemMovedEvent(this.draggedItem);
+
+    // Reset the dragged element and item, and re-render to remove the placeholder
+    this.__draggedElement = null;
+    this.draggedItem = null;
+    this.host.items = [...this.host.items];
+
+    // Disconnect the observer for the dragged element removal
+    this.draggedElementRemoveObserver.disconnect();
+  }
+
+  /** @private */
+  __fireItemMovedEvent(item) {
+    const section = this.host.items.find((hostItem) => hostItem.items && hostItem.items.includes(item));
+    this.host.dispatchEvent(
+      new CustomEvent('dashboard-item-moved', {
+        detail: { item, items: this.host.items, section },
+      }),
+    );
+  }
+
+  /** @private */
+  __drop(e) {
+    if (!this.draggedItem) {
+      return;
+    }
+    e.preventDefault();
+  }
+
+  /**
+   * Returns the element closest to the given coordinates.
+   * @private
+   */
+  __getClosestElement(elements, x, y) {
+    return elements.reduce(
+      (closest, element) => {
+        const { left, top, width, height } = element.getBoundingClientRect();
+        const centerX = left + width / 2;
+        const centerY = top + height / 2;
+        const distance = Math.hypot(centerX - x, centerY - y);
+
+        return distance < closest.distance ? { element, distance } : closest;
+      },
+      { element: null, distance: Number.MAX_VALUE },
+    ).element;
+  }
+
+  /**
+   * Returns true if the dragged element is dragged enough over the target element in
+   * the direction relative to their positions where x and y are the coordinates
+   * of the drag event.
+   * @private
+   */
+  __isDraggedOver(draggedElement, targetElement, x, y) {
+    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;
+    } else if (draggedPos.bottom <= targetPos.top) {
+      // target is on a row below the dragged widget
+      return y > targetPos.top + targetPos.height / 2;
+    } 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;
+    } 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;
+    }
+  }
+
+  /**
+   * Returns the elements (widgets or sections) that are candidates for reordering with the
+   * currently dragged item. Effectively, this is the list of child widgets or sections inside
+   * the same parent container (host or a section) as the dragged item.
+   * @private
+   */
+  __getDragContextElements() {
+    // Find the wrapper element representing the dragged item
+    const draggedItemWrapper = [...this.host.querySelectorAll(WRAPPER_LOCAL_NAME)].find((el) =>
+      itemsEqual(el.__item, this.draggedItem),
+    );
+    if (!draggedItemWrapper) {
+      return [];
+    }
+    // Find all child wrappers in the same parent container as the dragged item's wrapper and
+    // return their first children (the actual widgets or sections)
+    return [...draggedItemWrapper.parentElement.children]
+      .filter((el) => el.localName === WRAPPER_LOCAL_NAME && el.firstElementChild)
+      .map((el) => el.firstElementChild);
+  }
+
+  /** @private */
+  __reorderItems(draggedItem, targetIndex) {
+    if (targetIndex < 0 || targetIndex >= getItemsArrayOfItem(draggedItem, this.host.items).length) {
+      return;
+    }
+    const items = getItemsArrayOfItem(draggedItem, this.host.items);
+    const draggedIndex = items.indexOf(draggedItem);
+    items.splice(draggedIndex, 1);
+    items.splice(targetIndex, 0, draggedItem);
+    this.host.items = [...this.host.items];
+  }
+
+  /**
+   * The dragged element might be removed from the DOM during the drag operation if
+   * the widgets get re-rendered. This method restores the dragged element if it's not
+   * present in the DOM to ensure the dragend event is fired.
+   * @private
+   */
+  __restoreDraggedElement() {
+    if (!this.host.contains(this.__draggedElement)) {
+      this.__draggedElement.style.display = 'none';
+      this.host.appendChild(this.__draggedElement);
+    }
+  }
+
+  /**
+   * Handle the item-move event dispatched by a widget / section.
+   * @private
+   */
+  __itemMove(e) {
+    e.stopImmediatePropagation();
+    const item = getElementItem(e.target);
+    const items = getItemsArrayOfItem(item, this.host.items);
+    this.__reorderItems(item, items.indexOf(item) + e.detail.delta);
+    this.__fireItemMovedEvent(item);
+  }
+}

package/src/widget-resize-controller.js

@@ -0,0 +1,214 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { addListener } from '@vaadin/component-base/src/gestures.js';
+import { getElementItem, itemsEqual, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
+
+/**
+ * A controller to widget resizing inside a dashboard.
+ */
+export class WidgetResizeController {
+  constructor(host) {
+    this.host = host;
+    this.__resizedElementRemoveObserver = new MutationObserver(() => this.__restoreResizedElement());
+    this.__touchMoveCancelListener = (e) => e.preventDefault();
+    addListener(host, 'track', (e) => this.__onTrack(e));
+    host.addEventListener('item-resize', (e) => this.__itemResize(e));
+  }
+
+  /** @private */
+  __onTrack(e) {
+    if (e.detail.state === 'start') {
+      this.__onResizeStart(e);
+    } else if (e.detail.state === 'track') {
+      this.__onResize(e);
+    } else if (e.detail.state === 'end') {
+      this.__onResizeEnd(e);
+    }
+  }
+
+  /** @private */
+  __onResizeStart(e) {
+    const handle = [...e.composedPath()].find((el) => el.classList && el.classList.contains('resize-handle'));
+    if (!handle) {
+      return;
+    }
+
+    this.host.$.grid.toggleAttribute('item-resizing', true);
+    this.resizedItem = getElementItem(e.target);
+
+    this.__resizeStartWidth = e.target.offsetWidth;
+    this.__resizeStartHeight = e.target.offsetHeight;
+    this.__resizeWidth = this.__resizeStartWidth + e.detail.dx;
+    this.__resizeHeight = this.__resizeStartHeight + e.detail.dy;
+    this.__updateWidgetStyles();
+
+    this.__resizedElement = e.target;
+    // Observe the removal of the resized element from the DOM
+    this.__resizedElementRemoveObserver.observe(this.host, { childList: true, subtree: true });
+
+    // Prevent scrolling on touch devices while resizing
+    document.addEventListener('touchmove', this.__touchMoveCancelListener, { passive: false });
+  }
+
+  /** @private */
+  __onResize(e) {
+    if (!this.resizedItem) {
+      return;
+    }
+
+    this.__resizeWidth = this.__resizeStartWidth + (document.dir === 'rtl' ? -e.detail.dx : e.detail.dx);
+    this.__resizeHeight = this.__resizeStartHeight + e.detail.dy;
+    this.__updateWidgetStyles();
+
+    const itemWrapper = this.__getItemWrapper(this.resizedItem);
+    if (!itemWrapper.firstElementChild) {
+      return;
+    }
+
+    const gridStyle = getComputedStyle(this.host.$.grid);
+    const gapSize = parseFloat(gridStyle.gap || 0);
+
+    const currentElementWidth = itemWrapper.firstElementChild.offsetWidth;
+    const columns = gridStyle.gridTemplateColumns.split(' ');
+    const columnWidth = parseFloat(columns[0]);
+    if (this.__resizeWidth > currentElementWidth + gapSize + columnWidth / 2) {
+      // Resized horizontally above the half of the next column, increase colspan
+      this.__updateResizedItem(1, 0);
+    } else if (this.__resizeWidth < currentElementWidth - columnWidth / 2) {
+      // Resized horizontally below the half of the current column, decrease colspan
+      this.__updateResizedItem(-1, 0);
+    }
+
+    const currentElementHeight = itemWrapper.firstElementChild.offsetHeight;
+    const rowMinHeight = Math.min(...gridStyle.gridTemplateRows.split(' ').map((height) => parseFloat(height)));
+    if (this.__resizeHeight > currentElementHeight + gapSize + rowMinHeight / 2) {
+      // Resized vertically above the half of the next row, increase rowspan
+      this.__updateResizedItem(0, 1);
+    } else if (this.__resizeHeight < currentElementHeight - rowMinHeight / 2) {
+      // Resized vertically below the half of the current row, decrease rowspan
+      this.__updateResizedItem(0, -1);
+    }
+  }
+
+  /** @private */
+  __onResizeEnd() {
+    if (!this.resizedItem) {
+      return;
+    }
+
+    // If the originally resized element is restored to the DOM (as a direct child of the host),
+    // to make sure "track" event gets dispatched, remove it to avoid duplicates
+    if (this.__resizedElement.parentElement === this.host) {
+      this.__resizedElement.remove();
+    }
+
+    const itemWrapper = this.__getItemWrapper(this.resizedItem);
+    itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-width');
+    itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-height');
+    if (itemWrapper.firstElementChild) {
+      itemWrapper.firstElementChild.toggleAttribute('resizing', false);
+    }
+
+    this.host.$.grid.toggleAttribute('item-resizing', false);
+
+    // Disconnect the observer for the resized element removal
+    this.__resizedElementRemoveObserver.disconnect();
+    // Cleanup the touchmove listener
+    document.removeEventListener('touchmove', this.__touchMoveCancelListener);
+
+    // Dispatch the resize end event
+    this.__fireItemResizedEvent(this.resizedItem);
+    this.resizedItem = null;
+  }
+
+  /** @private */
+  __fireItemResizedEvent(item) {
+    this.host.dispatchEvent(
+      new CustomEvent('dashboard-item-resized', {
+        detail: { item, items: this.host.items },
+      }),
+    );
+  }
+
+  /** @private */
+  __getItemWrapper(item) {
+    return [...this.host.querySelectorAll(WRAPPER_LOCAL_NAME)].find((el) => itemsEqual(el.__item, item));
+  }
+
+  /** @private */
+  __updateResizedItem(colspanDelta, rowspanDelta) {
+    this.__resizeItem(this.resizedItem, colspanDelta, rowspanDelta);
+    requestAnimationFrame(() => this.__updateWidgetStyles());
+  }
+
+  /** @private */
+  __resizeItem(item, colspanDelta, rowspanDelta) {
+    if (item.items) {
+      // Do not resize sections
+      return;
+    }
+
+    const gridStyle = getComputedStyle(this.host.$.grid);
+    if (rowspanDelta && !gridStyle.getPropertyValue('--vaadin-dashboard-row-min-height')) {
+      // Do not resize vertically if the min row height is not set
+      return;
+    }
+
+    const columns = gridStyle.gridTemplateColumns.split(' ');
+    const currentColspan = item.colspan || 1;
+    const currentRowspan = item.rowspan || 1;
+
+    const newColspan = Math.min(Math.max(currentColspan + colspanDelta, 1), columns.length);
+    const newRowspan = Math.max(currentRowspan + rowspanDelta, 1);
+
+    if ((item.colspan || 1) === newColspan && (item.rowspan || 1) === newRowspan) {
+      // No change in size
+      return;
+    }
+
+    item.colspan = newColspan;
+    item.rowspan = newRowspan;
+    this.host.items = [...this.host.items];
+  }
+
+  /** @private */
+  __updateWidgetStyles() {
+    const itemWrapper = this.__getItemWrapper(this.resizedItem);
+    itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-width', `${this.__resizeWidth}px`);
+    itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-height', `${this.__resizeHeight}px`);
+    if (itemWrapper.firstElementChild) {
+      itemWrapper.firstElementChild.toggleAttribute('resizing', true);
+    }
+  }
+
+  /** @private */
+  __restoreResizedElement() {
+    if (!this.host.contains(this.__resizedElement)) {
+      this.__resizedElement.style.display = 'none';
+      this.host.appendChild(this.__resizedElement);
+    }
+  }
+
+  /**
+   * Handle the item-resize event dispatched by a widget / section.
+   * @private
+   */
+  __itemResize(e) {
+    e.stopImmediatePropagation();
+    const item = getElementItem(e.target);
+    this.__resizeItem(item, e.detail.colspanDelta, e.detail.rowspanDelta);
+    this.__fireItemResizedEvent(item);
+  }
+
+  hostDisconnected() {
+    document.removeEventListener('touchmove', this.__touchMoveCancelListener);
+  }
+}

package/theme/lumo/vaadin-dashboard-button-styles.d.ts

@@ -0,0 +1,2 @@
+import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+export { button };

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

@@ -0,0 +1,8 @@
+import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin';
+
+registerStyles('vaadin-dashboard-button', button, {
+  moduleId: 'lumo-dashboard-button',
+});
+
+export { button };

package/theme/lumo/vaadin-dashboard-button.d.ts

@@ -0,0 +1 @@
+import './vaadin-dashboard-button-styles.js';

package/theme/lumo/vaadin-dashboard-button.js

@@ -0,0 +1 @@
+import './vaadin-dashboard-button-styles.js';

package/theme/lumo/vaadin-dashboard-layout-styles.d.ts

@@ -0,0 +1 @@
+export declare const dashboardLayoutStyles: import("lit").CSSResult;

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

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const dashboardLayoutStyles = css`
+  #grid {
+    --_vaadin-dashboard-default-spacing: var(--lumo-space-xl);
+  }
+`;
+
+registerStyles('vaadin-dashboard-layout', [dashboardLayoutStyles], {
+  moduleId: 'lumo-dashboard-layout',
+});

package/theme/lumo/vaadin-dashboard-layout.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-dashboard-layout-styles.js';
+import '../../src/vaadin-dashboard-layout.js';

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

@@ -0,0 +1,2 @@
+import './vaadin-dashboard-layout-styles.js';
+import '../../src/vaadin-dashboard-layout.js';

package/theme/lumo/vaadin-dashboard-section-styles.d.ts

@@ -0,0 +1,5 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -0,0 +1,22 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardWidgetAndSection } from './vaadin-dashboard-widget-styles.js';
+
+const section = css`
+  :host {
+    --_focus-ring-spacing-max-offset: calc(var(--_vaadin-dashboard-spacing) / 2);
+  }
+
+  :host([move-mode]) ::slotted(*) {
+    --_vaadin-dashboard-widget-opacity: 0.3;
+    --_vaadin-dashboard-widget-filter: blur(10px);
+  }
+`;
+
+registerStyles('vaadin-dashboard-section', [dashboardWidgetAndSection, section], {
+  moduleId: 'lumo-dashboard-section',
+});

package/theme/lumo/vaadin-dashboard-section.d.ts

@@ -0,0 +1,3 @@
+import './vaadin-dashboard-section-styles.js';
+import './vaadin-dashboard-button.js';
+import '../../src/vaadin-dashboard-section.js';

package/theme/lumo/vaadin-dashboard-section.js

@@ -0,0 +1,3 @@
+import './vaadin-dashboard-section-styles.js';
+import './vaadin-dashboard-button.js';
+import '../../src/vaadin-dashboard-section.js';

package/theme/lumo/vaadin-dashboard-styles.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
+
+const dashboard = css`
+  :host {
+    --_vaadin-dashboard-widget-opacity: 1;
+  }
+
+  :host([item-selected]) {
+    --_vaadin-dashboard-widget-opacity: 0.7;
+  }
+`;
+
+registerStyles('vaadin-dashboard', [dashboardLayoutStyles, dashboard], {
+  moduleId: 'lumo-dashboard',
+});

package/theme/lumo/vaadin-dashboard-widget-styles.d.ts

@@ -0,0 +1,9 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+declare const dashboardWidgetAndSection: import("lit").CSSResult;
+declare const dashboardWidget: import("lit").CSSResult;
+export { dashboardWidget, dashboardWidgetAndSection };