@vaadin/dashboard 24.6.0-alpha1

package/LICENSE

@@ -0,0 +1,3 @@
+This program is available under Vaadin Commercial License and Service Terms.
+See https://vaadin.com/commercial-license-and-service-terms for the full
+license.

package/README.md

@@ -0,0 +1,34 @@
+# @vaadin/dashboard
+
+A responsive, grid-based dashboard layout component
+
+> ℹ️  A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Dashboard in your project.
+
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dashboard)
+
+[![npm version](https://badgen.net/npm/v/@vaadin/dashboard)](https://www.npmjs.com/package/@vaadin/dashboard)
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/dashboard
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/dashboard';
+```
+
+## Contributing
+
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+
+## License
+
+This program is available under Vaadin Commercial License and Service Terms. For license terms, see LICENSE.
+
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@vaadin/dashboard",
+  "version": "24.6.0-alpha1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "vaadin-dashboard",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/dashboard"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
+  "main": "vaadin-dashboard.js",
+  "module": "vaadin-dashboard.js",
+  "type": "module",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "keywords": [
+    "Vaadin",
+    "dashboard",
+    "responsive",
+    "layout",
+    "web-components",
+    "web-component"
+  ],
+  "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
+    "@vaadin/button": "24.6.0-alpha1",
+    "@vaadin/component-base": "24.6.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha1",
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vaadin/chai-plugins": "24.6.0-alpha1",
+    "@vaadin/testing-helpers": "^1.0.0"
+  },
+  "cvdlName": "vaadin-dashboard",
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "ae1fb0e6e7ce925999051c6cc62ba8476264c63f"
+}

package/src/keyboard-controller.js

@@ -0,0 +1,107 @@
+/**
+ * @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 { fireMove, fireRemove, fireResize } from './vaadin-dashboard-helpers.js';
+
+/**
+ * A controller for managing widget/section keyboard interactions.
+ */
+export class KeyboardController {
+  constructor(host) {
+    this.host = host;
+
+    host.addEventListener('focusout', (e) => this.__focusout(e));
+    host.addEventListener('focusin', (e) => this.__focusin(e));
+    host.addEventListener('keydown', (e) => this.__keydown(e));
+  }
+
+  /** @private */
+  __focusout(e) {
+    const focusOutElement = e.composedPath()[0];
+    const isHostVisible = !!this.host.offsetHeight;
+    const isFocusButtonHidden = getComputedStyle(focusOutElement).display === 'none';
+    if (isHostVisible && isFocusButtonHidden) {
+      this.host.__focusApply();
+    } else {
+      this.host.__exitMode();
+      this.host.__focused = false;
+      this.host.__selected = false;
+    }
+  }
+
+  /** @private */
+  __focusin(e) {
+    if (e.target === this.host) {
+      this.host.__focused = true;
+    }
+  }
+
+  /** @private */
+  __keydown(e) {
+    if (e.metaKey || e.ctrlKey || !this.host.__selected) {
+      return;
+    }
+
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      this.__delete(e);
+    } else if (e.key === 'Escape') {
+      this.__escape(e);
+    } else if (e.shiftKey && e.key.startsWith('Arrow')) {
+      this.__resize(e);
+    } else if (e.key.startsWith('Arrow')) {
+      this.__move(e);
+    }
+  }
+
+  /** @private */
+  __delete(e) {
+    e.preventDefault();
+    fireRemove(this.host);
+  }
+
+  /** @private */
+  __escape(e) {
+    e.preventDefault();
+    if (this.host.__moveMode || this.host.__resizeMode) {
+      this.host.__exitMode(true);
+    } else {
+      this.host.__selected = false;
+      this.host.focus();
+    }
+  }
+
+  /** @private */
+  __resize(e) {
+    const resizeMap = {
+      ArrowRight: [document.dir === 'rtl' ? -1 : 1, 0],
+      ArrowLeft: [document.dir === 'rtl' ? 1 : -1, 0],
+      ArrowDown: [0, 1],
+      ArrowUp: [0, -1],
+    };
+    if (resizeMap[e.key]) {
+      e.preventDefault();
+      fireResize(this.host, ...resizeMap[e.key]);
+    }
+  }
+
+  /** @private */
+  __move(e) {
+    const moveMap = {
+      ArrowRight: document.dir === 'rtl' ? -1 : 1,
+      ArrowLeft: document.dir === 'rtl' ? 1 : -1,
+      ArrowDown: 1,
+      ArrowUp: -1,
+    };
+    if (moveMap[e.key]) {
+      e.preventDefault();
+      fireMove(this.host, moveMap[e.key]);
+    }
+  }
+}

package/src/vaadin-dashboard-button.js

@@ -0,0 +1,45 @@
+/**
+ * @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 { html, LitElement } from 'lit';
+import { buttonStyles, buttonTemplate } from '@vaadin/button/src/vaadin-button-base.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-dashboard-button';
+  }
+
+  static get styles() {
+    return buttonStyles;
+  }
+
+  /** @protected */
+  render() {
+    return buttonTemplate(html);
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+  }
+}
+
+defineCustomElement(DashboardButton);
+
+export { DashboardButton };

package/src/vaadin-dashboard-helpers.js

@@ -0,0 +1,99 @@
+/**
+ * @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.
+ */
+export const WRAPPER_LOCAL_NAME = 'vaadin-dashboard-widget-wrapper';
+
+// Wrapper properties that should be synchronized as widget/section attributes
+export const SYNCHRONIZED_ATTRIBUTES = ['editable', 'dragging', 'first-child', 'last-child'];
+
+/**
+ * Returns true if the given items are equal by reference or by id.
+ *
+ * @param {Object} a the first item
+ * @param {Object} b the second item
+ */
+export function itemsEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a.id !== undefined && b.id !== undefined) {
+    return a.id === b.id;
+  }
+  return false;
+}
+
+/**
+ * Returns the array of items that contains the given item.
+ * Might be the dashboard items or the items of a section.
+ *
+ * @param {Object} item the item element
+ * @param {Object[]} items the root level items array
+ * @return {Object[]} the items array
+ */
+export function getItemsArrayOfItem(item, items) {
+  if (items.some((i) => itemsEqual(i, item))) {
+    return items;
+  }
+  const parentItem = items.find((i) => i.items && getItemsArrayOfItem(item, i.items));
+  return parentItem ? parentItem.items : null;
+}
+
+/**
+ * Returns the item associated with the given element.
+ *
+ * @param {HTMLElement} element the element
+ */
+export function getElementItem(element) {
+  const wrapper = element.closest(WRAPPER_LOCAL_NAME);
+  return wrapper && wrapper.__item;
+}
+
+/**
+ * Dispatches a custom event to notify about a move operation.
+ *
+ * @param {HTMLElement} element
+ * @param {Number} delta
+ */
+export function fireMove(element, delta) {
+  element.dispatchEvent(
+    new CustomEvent('item-move', {
+      bubbles: true,
+      detail: { delta },
+    }),
+  );
+}
+
+/**
+ * Dispatches a custom event to notify about a resize operation.
+ *
+ * @param {HTMLElement} element
+ * @param {Number} colspanDelta
+ * @param {Number} rowspanDelta
+ */
+export function fireResize(element, colspanDelta, rowspanDelta) {
+  element.dispatchEvent(
+    new CustomEvent('item-resize', {
+      bubbles: true,
+      detail: {
+        colspanDelta,
+        rowspanDelta,
+      },
+    }),
+  );
+}
+
+/**
+ * Dispatches a custom event to notify about a remove operation.
+ *
+ * @param {HTMLElement} element
+ */
+export function fireRemove(element) {
+  element.dispatchEvent(new CustomEvent('item-remove', { bubbles: true }));
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @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 type { Constructor } from '@open-wc/dedupe-mixin';
+
+/**
+ * Shared functionality between widgets and sections
+ */
+export declare function DashboardItemMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DashboardItemMixinClass> & T;
+
+export declare class DashboardItemMixinClass {}