From eb575598f0e81848637e1b9750d3835b565a70e2 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Tue, 13 Aug 2024 13:08:51 +0300 Subject: [PATCH] feat: create dashboard package --- dev/dashboard.html | 18 ++++++ packages/dashboard/LICENSE | 3 + packages/dashboard/README.md | 34 ++++++++++++ packages/dashboard/package.json | 55 +++++++++++++++++++ .../src/vaadin-dashboard-widget.d.ts | 24 ++++++++ .../dashboard/src/vaadin-dashboard-widget.js | 36 ++++++++++++ packages/dashboard/src/vaadin-dashboard.d.ts | 24 ++++++++ packages/dashboard/src/vaadin-dashboard.js | 41 ++++++++++++++ packages/dashboard/test/dashboard.test.ts | 29 ++++++++++ .../theme/lumo/vaadin-dashboard-styles.js | 0 .../lumo/vaadin-dashboard-widget-styles.js | 0 .../theme/lumo/vaadin-dashboard-widget.js | 2 + .../dashboard/theme/lumo/vaadin-dashboard.js | 3 + .../theme/material/vaadin-dashboard-styles.js | 0 .../vaadin-dashboard-widget-styles.js | 0 .../theme/material/vaadin-dashboard-widget.js | 2 + .../theme/material/vaadin-dashboard.js | 3 + .../dashboard/vaadin-dashboard-widget.d.ts | 1 + packages/dashboard/vaadin-dashboard-widget.js | 3 + packages/dashboard/vaadin-dashboard.d.ts | 1 + packages/dashboard/vaadin-dashboard.js | 3 + 21 files changed, 282 insertions(+) create mode 100644 dev/dashboard.html create mode 100644 packages/dashboard/LICENSE create mode 100644 packages/dashboard/README.md create mode 100644 packages/dashboard/package.json create mode 100644 packages/dashboard/src/vaadin-dashboard-widget.d.ts create mode 100644 packages/dashboard/src/vaadin-dashboard-widget.js create mode 100644 packages/dashboard/src/vaadin-dashboard.d.ts create mode 100644 packages/dashboard/src/vaadin-dashboard.js create mode 100644 packages/dashboard/test/dashboard.test.ts create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-styles.js create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-widget.js create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard.js create mode 100644 packages/dashboard/theme/material/vaadin-dashboard-styles.js create mode 100644 packages/dashboard/theme/material/vaadin-dashboard-widget-styles.js create mode 100644 packages/dashboard/theme/material/vaadin-dashboard-widget.js create mode 100644 packages/dashboard/theme/material/vaadin-dashboard.js create mode 100644 packages/dashboard/vaadin-dashboard-widget.d.ts create mode 100644 packages/dashboard/vaadin-dashboard-widget.js create mode 100644 packages/dashboard/vaadin-dashboard.d.ts create mode 100644 packages/dashboard/vaadin-dashboard.js diff --git a/dev/dashboard.html b/dev/dashboard.html new file mode 100644 index 00000000000..b09663600a0 --- /dev/null +++ b/dev/dashboard.html @@ -0,0 +1,18 @@ + + + + + + + Dashboard + + + + + + + + + diff --git a/packages/dashboard/LICENSE b/packages/dashboard/LICENSE new file mode 100644 index 00000000000..bb61b7d20cd --- /dev/null +++ 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 new file mode 100644 index 00000000000..0c6b27c73f5 --- /dev/null +++ b/packages/dashboard/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/overview) 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 new file mode 100644 index 00000000000..ffc3329b616 --- /dev/null +++ b/packages/dashboard/package.json @@ -0,0 +1,55 @@ +{ + "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/component-base": "24.5.0-alpha7", + "@vaadin/vaadin-lumo-styles": "24.5.0-alpha7", + "@vaadin/vaadin-material-styles": "24.5.0-alpha7", + "@vaadin/vaadin-themable-mixin": "24.5.0-alpha7", + "lit": "^3.0.0" + }, + "devDependencies": { + "@vaadin/chai-plugins": "24.5.0-alpha7", + "@vaadin/testing-helpers": "^1.0.0" + }, + "cvdlName": "vaadin-dashboard", + "web-types": [ + "web-types.json", + "web-types.lit.json" + ] +} diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts new file mode 100644 index 00000000000..b133a1d26b7 --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard-widget.d.ts @@ -0,0 +1,24 @@ +/** + * @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 { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; + +/** + * A Widget component for use with the Dashboard component + */ +declare class DashboardWidget extends ElementMixin(HTMLElement) {} + +declare global { + interface HTMLElementTagNameMap { + 'vaadin-dashboard-widget': DashboardWidget; + } +} + +export { DashboardWidget }; diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js new file mode 100644 index 00000000000..e145f1a24bd --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard-widget.js @@ -0,0 +1,36 @@ +/** + * @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 { 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'; + +/** + * A Widget component for use with the Dashboard component + * + * @customElement + * @extends HTMLElement + * @mixes ElementMixin + */ +class DashboardWidget extends ElementMixin(PolylitMixin(LitElement)) { + static get is() { + return 'vaadin-dashboard-widget'; + } + + /** @protected */ + render() { + return html``; + } +} + +defineCustomElement(DashboardWidget); + +export { DashboardWidget }; diff --git a/packages/dashboard/src/vaadin-dashboard.d.ts b/packages/dashboard/src/vaadin-dashboard.d.ts new file mode 100644 index 00000000000..9ddad5ac0a7 --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard.d.ts @@ -0,0 +1,24 @@ +/** + * @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 { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; + +/** + * A responsive, grid-based dashboard layout component + */ +declare class Dashboard extends ElementMixin(HTMLElement) {} + +declare global { + interface HTMLElementTagNameMap { + 'vaadin-dashboard': Dashboard; + } +} + +export { Dashboard }; diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js new file mode 100644 index 00000000000..09e890c7b61 --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard.js @@ -0,0 +1,41 @@ +/** + * @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 './vaadin-dashboard-widget.js'; +import { html, LitElement } from 'lit'; +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'; + +/** + * A responsive, grid-based dashboard layout component + * + * @customElement + * @extends HTMLElement + * @mixes ElementMixin + */ +class Dashboard extends ElementMixin(PolylitMixin(LitElement)) { + static get is() { + return 'vaadin-dashboard'; + } + + static get cvdlName() { + return 'vaadin-dashboard'; + } + + /** @protected */ + render() { + return html``; + } +} + +defineCustomElement(Dashboard); + +export { Dashboard }; diff --git a/packages/dashboard/test/dashboard.test.ts b/packages/dashboard/test/dashboard.test.ts new file mode 100644 index 00000000000..6b77f552811 --- /dev/null +++ b/packages/dashboard/test/dashboard.test.ts @@ -0,0 +1,29 @@ +import { expect } from '@vaadin/chai-plugins'; +import { fixtureSync } from '@vaadin/testing-helpers'; +import '../vaadin-dashboard.js'; +import type { CustomElementType } from '@vaadin/component-base/src/define.js'; +import type { Dashboard } from '../vaadin-dashboard.js'; + +describe('dashboard', () => { + let dashboard: Dashboard; + + beforeEach(() => { + dashboard = fixtureSync(''); + }); + + describe('custom element definition', () => { + let tagName: string; + + beforeEach(() => { + tagName = dashboard.tagName.toLowerCase(); + }); + + it('should be defined in custom element registry', () => { + expect(customElements.get(tagName)).to.be.ok; + }); + + it('should have a valid static "is" getter', () => { + expect((customElements.get(tagName) as CustomElementType).is).to.equal(tagName); + }); + }); +}); diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js new file mode 100644 index 00000000000..f052be64543 --- /dev/null +++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js @@ -0,0 +1,2 @@ +import './vaadin-dashboard-widget-styles.js'; +import '../../src/vaadin-dashboard-widget.js'; diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard.js b/packages/dashboard/theme/lumo/vaadin-dashboard.js new file mode 100644 index 00000000000..e9c934e420a --- /dev/null +++ b/packages/dashboard/theme/lumo/vaadin-dashboard.js @@ -0,0 +1,3 @@ +import './vaadin-dashboard-widget.js'; +import './vaadin-dashboard-styles.js'; +import '../../src/vaadin-dashboard.js'; diff --git a/packages/dashboard/theme/material/vaadin-dashboard-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-styles.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/dashboard/theme/material/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-widget-styles.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/dashboard/theme/material/vaadin-dashboard-widget.js b/packages/dashboard/theme/material/vaadin-dashboard-widget.js new file mode 100644 index 00000000000..f052be64543 --- /dev/null +++ b/packages/dashboard/theme/material/vaadin-dashboard-widget.js @@ -0,0 +1,2 @@ +import './vaadin-dashboard-widget-styles.js'; +import '../../src/vaadin-dashboard-widget.js'; diff --git a/packages/dashboard/theme/material/vaadin-dashboard.js b/packages/dashboard/theme/material/vaadin-dashboard.js new file mode 100644 index 00000000000..e9c934e420a --- /dev/null +++ b/packages/dashboard/theme/material/vaadin-dashboard.js @@ -0,0 +1,3 @@ +import './vaadin-dashboard-widget.js'; +import './vaadin-dashboard-styles.js'; +import '../../src/vaadin-dashboard.js'; diff --git a/packages/dashboard/vaadin-dashboard-widget.d.ts b/packages/dashboard/vaadin-dashboard-widget.d.ts new file mode 100644 index 00000000000..85a2327cd8c --- /dev/null +++ b/packages/dashboard/vaadin-dashboard-widget.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-dashboard-widget.js'; diff --git a/packages/dashboard/vaadin-dashboard-widget.js b/packages/dashboard/vaadin-dashboard-widget.js new file mode 100644 index 00000000000..d73b60101ce --- /dev/null +++ b/packages/dashboard/vaadin-dashboard-widget.js @@ -0,0 +1,3 @@ +import './theme/lumo/vaadin-dashboard-widget.js'; + +export * from './src/vaadin-dashboard-widget.js'; diff --git a/packages/dashboard/vaadin-dashboard.d.ts b/packages/dashboard/vaadin-dashboard.d.ts new file mode 100644 index 00000000000..0b18ab59739 --- /dev/null +++ b/packages/dashboard/vaadin-dashboard.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-dashboard.js'; diff --git a/packages/dashboard/vaadin-dashboard.js b/packages/dashboard/vaadin-dashboard.js new file mode 100644 index 00000000000..9613f7dcc41 --- /dev/null +++ b/packages/dashboard/vaadin-dashboard.js @@ -0,0 +1,3 @@ +import './theme/lumo/vaadin-dashboard.js'; + +export * from './src/vaadin-dashboard.js';