feat: vaadin-dashboard component (#7946)

vaadin · Oct 8, 2024 · 73c9d6b · 73c9d6b
2 parents 738ca00 + d1584a3
commit 73c9d6b
Show file tree

Hide file tree

Showing 55 changed files with 7,839 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -136,6 +136,7 @@ The components below are licensed under [Vaadin Commercial License and Service T
 | [`<vaadin-charts>`](https://github.com/vaadin/web-components/tree/main/packages/charts)                     | [![npm version](https://badgen.net/npm/v/@vaadin/charts)](https://www.npmjs.com/package/@vaadin/charts)                     | [![npm version](https://badgen.net/npm/v/@vaadin/charts/next)](https://www.npmjs.com/package/@vaadin/charts/v/next)                     | [Issues](https://github.com/vaadin/web-components/labels/vaadin-charts)           |
 | [`<vaadin-cookie-consent>`](https://github.com/vaadin/web-components/tree/main/packages/cookie-consent)     | [![npm version](https://badgen.net/npm/v/@vaadin/cookie-consent)](https://www.npmjs.com/package/@vaadin/cookie-consent)     | [![npm version](https://badgen.net/npm/v/@vaadin/cookie-consent/next)](https://www.npmjs.com/package/@vaadin/cookie-consent/v/next)     | [Issues](https://github.com/vaadin/web-components/labels/vaadin-cookie-consent)   |
 | [`<vaadin-crud>`](https://github.com/vaadin/web-components/tree/main/packages/crud)                         | [![npm version](https://badgen.net/npm/v/@vaadin/crud)](https://www.npmjs.com/package/@vaadin/crud)                         | [![npm version](https://badgen.net/npm/v/@vaadin/crud/next)](https://www.npmjs.com/package/@vaadin/crud/v/next)                         | [Issues](https://github.com/vaadin/web-components/labels/vaadin-crud)             |
+| [`<vaadin-dashboard>`](https://github.com/vaadin/web-components/tree/main/packages/dashboard)               | [![npm version](https://badgen.net/npm/v/@vaadin/dashboard)](https://www.npmjs.com/package/@vaadin/dashboard)               | [![npm version](https://badgen.net/npm/v/@vaadin/dashboard/next)](https://www.npmjs.com/package/@vaadin/dashboard/v/next)               | [Issues](https://github.com/vaadin/web-components/labels/vaadin-dashboard)        |
 | [`<vaadin-grid-pro>`](https://github.com/vaadin/web-components/tree/main/packages/grid-pro)                 | [![npm version](https://badgen.net/npm/v/@vaadin/grid-pro)](https://www.npmjs.com/package/@vaadin/grid-pro)                 | [![npm version](https://badgen.net/npm/v/@vaadin/grid-pro/next)](https://www.npmjs.com/package/@vaadin/grid-pro/v/next)                 | [Issues](https://github.com/vaadin/web-components/labels/vaadin-grid-pro)         |
 | [`<vaadin-map>`](https://github.com/vaadin/web-components/tree/main/packages/map)                           | [![npm version](https://badgen.net/npm/v/@vaadin/map)](https://www.npmjs.com/package/@vaadin/map)                           | [![npm version](https://badgen.net/npm/v/@vaadin/map/next)](https://www.npmjs.com/package/@vaadin/map/v/next)                           | [Issues](https://github.com/vaadin/web-components/labels/vaadin-map)              |
 | [`<vaadin-rich-text-editor>`](https://github.com/vaadin/web-components/tree/main/packages/rich-text-editor) | [![npm version](https://badgen.net/npm/v/@vaadin/rich-text-editor)](https://www.npmjs.com/package/@vaadin/rich-text-editor) | [![npm version](https://badgen.net/npm/v/@vaadin/rich-text-editor/next)](https://www.npmjs.com/package/@vaadin/rich-text-editor/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-rich-text-editor) |

diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard layout</title>
+    <script type="module" src="./common.js"></script>
+
+    <script type="module">
+      import '@vaadin/dashboard/vaadin-dashboard-layout.js';
+      import '@vaadin/dashboard/vaadin-dashboard-widget.js';
+      import '@vaadin/dashboard/vaadin-dashboard-section.js';
+    </script>
+
+    <style>
+      vaadin-dashboard-layout {
+        --vaadin-dashboard-col-min-width: 300px;
+        --vaadin-dashboard-col-max-width: 500px;
+        --vaadin-dashboard-row-min-height: 300px;
+        --vaadin-dashboard-col-max-count: 3;
+      }
+
+      .kpi-number {
+        font-size: 80px;
+        font-weight: bold;
+        color: #4caf50;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .chart {
+        height: 300px;
+        background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 10px, #f5f5f5 10px, #f5f5f5 20px);
+      }
+    </style>
+  </head>
+
+  <body>
+    <vaadin-dashboard-layout>
+      <vaadin-dashboard-widget widget-title="Total cost">
+        <span slot="header-content">2023-2024</span>
+        <div class="kpi-number">+203%</div>
+      </vaadin-dashboard-widget>
+
+      <vaadin-dashboard-widget style="--vaadin-dashboard-item-colspan: 2" widget-title="Sales">
+        <span slot="header-content">2023-2024</span>
+        <div class="chart"></div>
+      </vaadin-dashboard-widget>
+
+      <vaadin-dashboard-section section-title="Section">
+        <vaadin-dashboard-widget style="--vaadin-dashboard-item-rowspan: 2" widget-title="Sales closed this month">
+          <div class="kpi-number">54 000€</div>
+        </vaadin-dashboard-widget>
+
+        <vaadin-dashboard-widget widget-title="Just some number">
+          <span slot="header-content">2014-2024</span>
+          <div class="kpi-number">1234</div>
+        </vaadin-dashboard-widget>
+      </vaadin-dashboard-section>
+
+      <vaadin-dashboard-widget>
+        <h2 slot="title">Activity since 2023</h2>
+        <div class="chart"></div>
+      </vaadin-dashboard-widget>
+    </vaadin-dashboard-layout>
+  </body>
+</html>
diff --git a/dev/dashboard.html b/dev/dashboard.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard</title>
+    <script type="module" src="./common.js"></script>
+
+    <style>
+      vaadin-dashboard {
+        --vaadin-dashboard-col-min-width: 300px;
+        --vaadin-dashboard-col-max-width: 500px;
+        --vaadin-dashboard-row-min-height: 300px;
+        --vaadin-dashboard-col-max-count: 3;
+      }
+
+      .kpi-number {
+        font-size: 80px;
+        font-weight: bold;
+        color: #4caf50;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .chart {
+        height: 100%;
+        background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 10px, #f5f5f5 10px, #f5f5f5 20px);
+      }
+    </style>
+
+    <script type="module">
+      import '@vaadin/dashboard';
+
+      const dashboard = document.querySelector('vaadin-dashboard');
+
+      dashboard.items = [
+        {
+          title: 'Total cost',
+          content: '+203%',
+          type: 'kpi',
+          header: '2023-2024',
+        },
+        {
+          title: 'Sales',
+          type: 'chart',
+          header: '2023-2024',
+          colspan: 2,
+        },
+        {
+          title: 'Section',
+          items: [
+            {
+              title: 'Sales closed this month',
+              rowspan: 2,
+              content: '54 000€',
+              type: 'kpi',
+            },
+            {
+              title: 'Just some number',
+              content: '1234',
+              type: 'kpi',
+              header: '2014-2024',
+            },
+          ],
+        },
+        {
+          title: 'Activity since 2023',
+          type: 'chart',
+        },
+      ];
+
+      dashboard.renderer = (root, _dashboard, { item }) => {
+        if (!root.firstElementChild) {
+          root.append(document.createElement('vaadin-dashboard-widget'));
+        }
+        root.firstElementChild.widgetTitle = item.title;
+        root.firstElementChild.innerHTML = `
+          <span slot="header-content">${item.header || ''}</span>
+          ${item.type === 'chart' ? '<div class="chart"></div>' : `<div class="kpi-number">${item.content}</div>`}
+        `;
+      };
+
+      dashboard.addEventListener('dashboard-item-moved', (e) => {
+        console.log('dashboard-item-moved', e.detail);
+      });
+
+      dashboard.addEventListener('dashboard-item-resized', (e) => {
+        console.log('dashboard-item-resized', e.detail);
+      });
+
+      dashboard.addEventListener('dashboard-item-removed', (e) => {
+        console.log('dashboard-item-removed', e.detail);
+      });
+
+      dashboard.addEventListener('dashboard-item-selected-changed', (e) => {
+        console.log('dashboard-item-selected-changed', e.detail);
+      });
+
+      dashboard.addEventListener('dashboard-item-move-mode-changed', (e) => {
+        console.log('dashboard-item-move-mode-changed', e.detail);
+      });
+
+      dashboard.addEventListener('dashboard-item-resize-mode-changed', (e) => {
+        console.log('dashboard-item-resize-mode-changed', e.detail);
+      });
+    </script>
+  </head>
+
+  <body>
+    <vaadin-dashboard editable></vaadin-dashboard>
+  </body>
+</html>
diff --git a/packages/dashboard/LICENSE b/packages/dashboard/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.
diff --git a/packages/dashboard/README.md b/packages/dashboard/README.md
@@ -0,0 +1,34 @@
+# @vaadin/dashboard
+
+A responsive, grid-based dashboard layout component
+
+> ℹ️&nbsp; 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.
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@vaadin/dashboard",
+  "version": "24.6.0-alpha0",
+  "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-alpha0",
+    "@vaadin/component-base": "24.6.0-alpha0",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha0",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha0",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha0",
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vaadin/chai-plugins": "24.6.0-alpha0",
+    "@vaadin/testing-helpers": "^1.0.0"
+  },
+  "cvdlName": "vaadin-dashboard",
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ]
+}
diff --git a/packages/dashboard/src/keyboard-controller.js b/packages/dashboard/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]);
+    }
+  }
+}