|
1 | | -# Vaadin web components |
| 1 | +<p align="center"> |
| 2 | + <a href="https://vaadin.com" rel="noopener" target="_blank"><img width="100" src="https://raw.githubusercontent.com/vaadin/vaadin-web-components/master/vaadin-logo.svg" alt="Vaadin logo"></a></p> |
| 3 | +</p> |
2 | 4 |
|
3 | | -This is a monorepo powered by [Lerna](https://github.com/lerna/lerna) that includes all Vaadin web components. |
| 5 | +<h1 align="center">Vaadin web components</h1> |
4 | 6 |
|
5 | | -## Setup |
| 7 | +<div align="center"> |
| 8 | + |
| 9 | +[Vaadin components](https://vaadin.com/components) is an evolving set of high-quality web components for business web applications. |
| 10 | + |
| 11 | +[](https://github.com/vaadin/vaadin-web-components/actions/workflows/chrome.yml) |
| 12 | +[](https://github.com/vaadin/vaadin-web-components/actions/workflows/firefox.yml) |
| 13 | +[](https://github.com/vaadin/vaadin-web-components/actions/workflows/webkit.yml) |
| 14 | +[](https://twitter.com/vaadin) |
| 15 | +[](https://vaad.in/chat) |
| 16 | +</div> |
| 17 | + |
| 18 | +## Installation |
| 19 | + |
| 20 | +Install the components that you need from npm: |
| 21 | + |
| 22 | +```sh |
| 23 | +npm install @vaadin/vaadin-grid |
| 24 | +``` |
| 25 | + |
| 26 | +## Usage |
| 27 | + |
| 28 | +[Live demo →](https://webcomponents.dev/edit/JZcKP3kkHcJIgiCaI818/www/index.html) |
| 29 | + |
| 30 | +Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript: |
| 31 | + |
| 32 | +```html |
| 33 | +<!doctype html> |
| 34 | +<html> |
| 35 | + <head> |
| 36 | + <meta charset="utf-8"> |
| 37 | + <title>Vaadin example</title> |
| 38 | + </head> |
| 39 | + <body> |
| 40 | + <!-- Use web components in your HTML like regular built-in elements. --> |
| 41 | + <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort> |
| 42 | + <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column> |
| 43 | + <vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column> |
| 44 | + <vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column> |
| 45 | + <vaadin-grid-column width="9em" path="address.city"></vaadin-grid-column> |
| 46 | + </vaadin-grid> |
| 47 | + |
| 48 | + <!-- Vaadin web components use standard JavaScript modules. --> |
| 49 | + <script type="module"> |
| 50 | + // Importing the following modules registers <vaadin-grid> and its column |
| 51 | + // elements so that you can use them in this page. |
| 52 | + import '@vaadin/vaadin-grid/vaadin-grid.js'; |
| 53 | + import '@vaadin/vaadin-grid/vaadin-grid-selection-column.js'; |
| 54 | + import '@vaadin/vaadin-grid/vaadin-grid-sort-column.js'; |
| 55 | +
|
| 56 | + // Use component's properties to populate data. |
| 57 | + const grid = document.querySelector('vaadin-grid'); |
| 58 | + fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200') |
| 59 | + .then(res => res.json()) |
| 60 | + .then(json => grid.items = json.result); |
| 61 | + </script> |
| 62 | + </body> |
| 63 | +</html> |
| 64 | +``` |
| 65 | + |
| 66 | +Serve your HTML with a development server that supports bare module specifiers, such as [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/): |
| 67 | + |
| 68 | +```sh |
| 69 | +npm i -g @web/dev-server |
| 70 | +web-dev-server --node-resolve --open |
| 71 | +``` |
| 72 | + |
| 73 | +## Components |
| 74 | + |
| 75 | +This project contains components for Vaadin 20+. Please see individual repositories for older Vaadin versions. |
| 76 | + |
| 77 | +### Core Components |
| 78 | + |
| 79 | +The components below are licensed under the Apache License 2.0. |
| 80 | + |
| 81 | +| Component | npm version | Issues | |
| 82 | +|-----------|--------------|--------------------| |
| 83 | +| [`<vaadin-accordion>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-accordion) | [](https://www.npmjs.com/package/@vaadin/vaadin-accordion) | [Issues](https://github.com/vaadin/vaadin-accordion/issues) |
| 84 | +| [`<vaadin-app-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-app-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-app-layout) | [Issues](https://github.com/vaadin/vaadin-app-layout/issues) |
| 85 | +| [`<vaadin-avatar>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-avatar) | [](https://www.npmjs.com/package/@vaadin/vaadin-avatar) | [Issues](https://github.com/vaadin/vaadin-avatar/issues) |
| 86 | +| [`<vaadin-button>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-button) | [](https://www.npmjs.com/package/@vaadin/vaadin-button) | [Issues](https://github.com/vaadin/vaadin-button/issues) |
| 87 | +| [`<vaadin-checkbox>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-checkbox) | [](https://www.npmjs.com/package/@vaadin/vaadin-checkbox) | [Issues](https://github.com/vaadin/vaadin-checkbox/issues) |
| 88 | +| [`<vaadin-combo-box>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-combo-box) | [](https://www.npmjs.com/package/@vaadin/vaadin-combo-box) | [Issues](https://github.com/vaadin/vaadin-combo-box/issues) |
| 89 | +| [`<vaadin-context-menu>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-context-menu) | [](https://www.npmjs.com/package/@vaadin/vaadin-context-menu) | [Issues](https://github.com/vaadin/vaadin-context-menu/issues) |
| 90 | +| [`<vaadin-custom-field>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-custom-field) | [](https://www.npmjs.com/package/@vaadin/vaadin-custom-field) | [Issues](https://github.com/vaadin/vaadin-custom-field/issues) |
| 91 | +| [`<vaadin-date-picker>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-date-picker) | [](https://www.npmjs.com/package/@vaadin/vaadin-date-picker) | [Issues](https://github.com/vaadin/vaadin-date-picker/issues) |
| 92 | +| [`<vaadin-date-time-picker>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-date-time-picker) | [](https://www.npmjs.com/package/@vaadin/vaadin-date-time-picker) | [Issues](https://github.com/vaadin/vaadin-date-time-picker/issues) |
| 93 | +| [`<vaadin-details>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-details) | [](https://www.npmjs.com/package/@vaadin/vaadin-details) | [Issues](https://github.com/vaadin/vaadin-details/issues) |
| 94 | +| [`<vaadin-dialog>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-dialog) | [](https://www.npmjs.com/package/@vaadin/vaadin-dialog) | [Issues](https://github.com/vaadin/vaadin-dialog/issues) |
| 95 | +| [`<vaadin-form-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-form-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-form-layout) | [Issues](https://github.com/vaadin/vaadin-form-layout/issues) |
| 96 | +| [`<vaadin-grid>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-grid) | [](https://www.npmjs.com/package/@vaadin/vaadin-grid) | [Issues](https://github.com/vaadin/vaadin-grid/issues) |
| 97 | +| [`<vaadin-icons>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-icons) | [](https://www.npmjs.com/package/@vaadin/vaadin-icons) | [Issues](https://github.com/vaadin/vaadin-icons/issues) |
| 98 | +| [`<vaadin-item>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-item) | [](https://www.npmjs.com/package/@vaadin/vaadin-item) | [Issues](https://github.com/vaadin/vaadin-item/issues) |
| 99 | +| [`<vaadin-list-box>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-list-box) | [](https://www.npmjs.com/package/@vaadin/vaadin-list-box) | [Issues](https://github.com/vaadin/vaadin-list-box/issues) |
| 100 | +| [`<vaadin-login>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-login) | [](https://www.npmjs.com/package/@vaadin/vaadin-login) | [Issues](https://github.com/vaadin/vaadin-login/issues) |
| 101 | +| [`<vaadin-menu-bar>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-menu-bar) | [](https://www.npmjs.com/package/@vaadin/vaadin-menu-bar) | [Issues](https://github.com/vaadin/vaadin-menu-bar/issues) |
| 102 | +| [`<vaadin-messages>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-messages) | [](https://www.npmjs.com/package/@vaadin/vaadin-messages) | [Issues](https://github.com/vaadin/vaadin-messages/issues) |
| 103 | +| [`<vaadin-notification>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-notification) | [](https://www.npmjs.com/package/@vaadin/vaadin-notification) | [Issues](https://github.com/vaadin/vaadin-notification/issues) |
| 104 | +| [`<vaadin-ordered-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-ordered-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-ordered-layout) | [Issues](https://github.com/vaadin/vaadin-ordered-layout/issues) |
| 105 | +| [`<vaadin-progress-bar>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-progress-bar) | [](https://www.npmjs.com/package/@vaadin/vaadin-progress-bar) | [Issues](https://github.com/vaadin/vaadin-progress-bar/issues) |
| 106 | +| [`<vaadin-radio-button>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-radio-button) | [](https://www.npmjs.com/package/@vaadin/vaadin-radio-button) | [Issues](https://github.com/vaadin/vaadin-radio-button/issues) |
| 107 | +| [`<vaadin-select>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-select) | [](https://www.npmjs.com/package/@vaadin/vaadin-select) | [Issues](https://github.com/vaadin/vaadin-select/issues) |
| 108 | +| [`<vaadin-split-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-split-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-split-layout) | [Issues](https://github.com/vaadin/vaadin-split-layout/issues) |
| 109 | +| [`<vaadin-tabs>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-tabs) | [](https://www.npmjs.com/package/@vaadin/vaadin-tabs) | [Issues](https://github.com/vaadin/vaadin-tabs/issues) |
| 110 | +| [`<vaadin-text-field>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-text-field) | [](https://www.npmjs.com/package/@vaadin/vaadin-text-field) | [Issues](https://github.com/vaadin/vaadin-text-field/issues) |
| 111 | +| [`<vaadin-time-picker>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-time-picker) | [](https://www.npmjs.com/package/@vaadin/vaadin-time-picker) | [Issues](https://github.com/vaadin/vaadin-time-picker/issues) |
| 112 | +| [`<vaadin-upload>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-upload) | [](https://www.npmjs.com/package/@vaadin/vaadin-upload) | [Issues](https://github.com/vaadin/vaadin-upload/issues) |
| 113 | + |
| 114 | +### Pro Components |
| 115 | + |
| 116 | +The components below are licensed under [CVDL 4.0 license](https://vaadin.com/license/cvdl-4.0) and available as part of the [Vaadin Pro Subscription](https://vaadin.com/pricing). |
| 117 | + |
| 118 | +| Component | npm version | Issues | |
| 119 | +|-----------|--------------|--------------------| |
| 120 | +| [`<vaadin-board>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-board) | [](https://www.npmjs.com/package/@vaadin/vaadin-board) | [Issues](https://github.com/vaadin/vaadin-board/issues) |
| 121 | +| [`<vaadin-charts>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-charts) | [](https://www.npmjs.com/package/@vaadin/vaadin-charts) | [Issues](https://github.com/vaadin/vaadin-charts/issues) |
| 122 | +| [`<vaadin-confirm-dialog>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-confirm-dialog) | [](https://www.npmjs.com/package/@vaadin/vaadin-confirm-dialog) | [Issues](https://github.com/vaadin/vaadin-confirm-dialog/issues) |
| 123 | +| [`<vaadin-cookie-consent>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-cookie-consent) | [](https://www.npmjs.com/package/@vaadin/vaadin-cookie-consent) | [Issues](https://github.com/vaadin/vaadin-cookie-consent/issues) |
| 124 | +| [`<vaadin-crud>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-crud) | [](https://www.npmjs.com/package/@vaadin/vaadin-crud) | [Issues](https://github.com/vaadin/vaadin-crud/issues) |
| 125 | +| [`<vaadin-grid-pro>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-grid-pro) | [](https://www.npmjs.com/package/@vaadin/vaadin-grid-pro) | [Issues](https://github.com/vaadin/vaadin-grid-pro/issues) |
| 126 | +| [`<vaadin-rich-text-editor>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-rich-text-editor) | [](https://www.npmjs.com/package/@vaadin/vaadin-rich-text-editor) | [Issues](https://github.com/vaadin/vaadin-rich-text-editor/issues) |
| 127 | + |
| 128 | +## Browser support |
| 129 | + |
| 130 | +Vaadin components use [Custom Elements](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM](https://caniuse.com/#feat=shadowdomv1) |
| 131 | +that are natively supported by modern browsers. |
| 132 | + |
| 133 | +## Documentation |
| 134 | + |
| 135 | +Check out our [design system documentation](https://vaadin.com/docs-beta/latest/ds/overview/). |
| 136 | + |
| 137 | +## Examples |
| 138 | + |
| 139 | +Are you looking for an example project to get started? Visit [start.vaadin.com](https://start.vaadin.com/?preset=fusion) to create a Vaadin app. |
| 140 | + |
| 141 | +## Questions |
| 142 | + |
| 143 | +For help and support questions, please use our [community chat](https://vaad.in/chat). |
| 144 | + |
| 145 | +## Contributing |
| 146 | + |
| 147 | +Read the [contributing guide](https://vaadin.com/docs-beta/latest/guide/contributing/overview/) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. |
| 148 | + |
| 149 | +## Development |
| 150 | + |
| 151 | +Setup the repo: |
6 | 152 |
|
7 | 153 | ```sh |
8 | 154 | yarn |
9 | 155 | ``` |
10 | 156 |
|
11 | | -## Run all tests in Chrome |
| 157 | +Run all tests in Chrome: |
12 | 158 |
|
13 | 159 | ```sh |
14 | 160 | yarn test |
15 | 161 | ``` |
16 | 162 |
|
17 | | -Note: this and following scripts only run tests for packages changed since `origin/master` branch. |
18 | | - |
19 | | -## Run all tests in Firefox |
| 163 | +Run all tests in Firefox: |
20 | 164 |
|
21 | 165 | ```sh |
22 | 166 | yarn test:firefox |
23 | 167 | ``` |
24 | 168 |
|
25 | | -## Run all tests in WebKit |
| 169 | +Run all tests in WebKit: |
26 | 170 |
|
27 | 171 | ```sh |
28 | 172 | yarn test:webkit |
29 | 173 | ``` |
30 | 174 |
|
31 | | -## Run tests for single package |
| 175 | +Run tests for single package: |
32 | 176 |
|
33 | 177 | ```sh |
34 | 178 | yarn test --group vaadin-upload |
35 | 179 | ``` |
36 | 180 |
|
| 181 | +Debug tests for single package: |
| 182 | + |
| 183 | +```sh |
| 184 | +yarn debug --group vaadin-upload |
| 185 | +``` |
| 186 | + |
37 | 187 | ## LICENSE |
38 | 188 |
|
39 | 189 | For specific package(s), check the LICENSE file under the package folder. |
0 commit comments