@vaadin/board 23.2.0-dev.53560527d → 23.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{LICENSE.txt → LICENSE} +0 -0
- package/README.md +3 -3
- package/package.json +11 -6
- package/src/vaadin-board.js +0 -15
- package/web-types.json +54 -0
- package/web-types.lit.json +32 -0
package/{LICENSE.txt → LICENSE}
RENAMED
|
File without changes
|
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ A powerful and easy to use layout web component for building responsive views.
|
|
|
4
4
|
|
|
5
5
|
> ℹ️ A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Board in your project.
|
|
6
6
|
|
|
7
|
-
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/
|
|
7
|
+
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/board)
|
|
8
8
|
|
|
9
9
|
[](https://www.npmjs.com/package/@vaadin/board)
|
|
10
10
|
[](https://discord.gg/PHmkCKC)
|
|
@@ -31,7 +31,7 @@ A powerful and easy to use layout web component for building responsive views.
|
|
|
31
31
|
</vaadin-board>
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/board/screenshot.png" alt="Screenshot of vaadin-board">](https://vaadin.com/docs/latest/
|
|
34
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/board/screenshot.png" alt="Screenshot of vaadin-board">](https://vaadin.com/docs/latest/components/board)
|
|
35
35
|
|
|
36
36
|
## Installation
|
|
37
37
|
|
|
@@ -49,7 +49,7 @@ import '@vaadin/board';
|
|
|
49
49
|
|
|
50
50
|
## Contributing
|
|
51
51
|
|
|
52
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/
|
|
52
|
+
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.
|
|
53
53
|
|
|
54
54
|
## License
|
|
55
55
|
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/board",
|
|
3
|
-
"version": "23.2.0
|
|
3
|
+
"version": "23.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
7
|
"description": "Polymer element to create flexible responsive layouts and build nice looking dashboard.",
|
|
8
|
-
"license": "
|
|
8
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
9
9
|
"cvdlName": "vaadin-board",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
"src",
|
|
25
25
|
"theme",
|
|
26
26
|
"vaadin-*.d.ts",
|
|
27
|
-
"vaadin-*.js"
|
|
27
|
+
"vaadin-*.js",
|
|
28
|
+
"web-types.json",
|
|
29
|
+
"web-types.lit.json"
|
|
28
30
|
],
|
|
29
31
|
"keywords": [
|
|
30
32
|
"Vaadin",
|
|
@@ -38,13 +40,16 @@
|
|
|
38
40
|
],
|
|
39
41
|
"dependencies": {
|
|
40
42
|
"@polymer/polymer": "^3.0.0",
|
|
41
|
-
"@vaadin/component-base": "23.2.0
|
|
42
|
-
"@vaadin/vaadin-license-checker": "^2.1.0"
|
|
43
|
+
"@vaadin/component-base": "^23.2.0"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
46
|
"@esm-bundle/chai": "^4.3.4",
|
|
46
47
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
47
48
|
"sinon": "^13.0.2"
|
|
48
49
|
},
|
|
49
|
-
"
|
|
50
|
+
"web-types": [
|
|
51
|
+
"web-types.json",
|
|
52
|
+
"web-types.lit.json"
|
|
53
|
+
],
|
|
54
|
+
"gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
|
|
50
55
|
}
|
package/src/vaadin-board.js
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
|
|
5
5
|
*/
|
|
6
|
-
import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
|
|
7
6
|
import './vaadin-board-row.js';
|
|
8
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
9
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
@@ -51,20 +50,6 @@ class Board extends ElementMixin(PolymerElement) {
|
|
|
51
50
|
return 'vaadin-board';
|
|
52
51
|
}
|
|
53
52
|
|
|
54
|
-
/**
|
|
55
|
-
* @protected
|
|
56
|
-
*/
|
|
57
|
-
static _finalizeClass() {
|
|
58
|
-
super._finalizeClass();
|
|
59
|
-
|
|
60
|
-
const devModeCallback = window.Vaadin.developmentModeCallback;
|
|
61
|
-
const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
|
|
62
|
-
/* c8 ignore next 3 */
|
|
63
|
-
if (typeof licenseChecker === 'function') {
|
|
64
|
-
licenseChecker(Board);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
53
|
/**
|
|
69
54
|
* Redraws the board and all rows inside it, if necessary.
|
|
70
55
|
*
|
package/web-types.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/board",
|
|
4
|
+
"version": "23.2.0",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-board-row",
|
|
11
|
+
"description": "`<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows\nto create flexible responsive layouts and build nice looking dashboard.\n\nEach row can contain up to four elements (fewer if colspan is used) and is automatically responsive.\nThe row changes between `large`, `medium` and `small` modes depending on the available width and\nthe set breakpoints.\n\nIn `large` mode, typically all content is shown side-by-side, in `medium` half of the content is\nside by side and in `small` mode, content is laid out vertically.\n\nThe breakpoints can be set using custom CSS properties.\nBy default the breakpoints are `small: <600px`, `medium: < 960px`, `large >= 960px`.\n\n```html\n<vaadin-board>\n <vaadin-board-row>\n <div>This could be chart 1</div>\n <div>This could be chart 2</div>\n <div>This could be chart 3</div>\n <div>This could be chart 4</div>\n </vaadin-board-row>\n</vaadin-board>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-board-width-small` | Determines the width where mode changes from `small` to `medium` | `600px`\n`--vaadin-board-width-medium` | Determines the width where mode changes from `medium` to `large` | `960px`",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "theme",
|
|
15
|
+
"description": "The theme variants to apply to the component.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
],
|
|
25
|
+
"js": {
|
|
26
|
+
"properties": [],
|
|
27
|
+
"events": []
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "vaadin-board",
|
|
32
|
+
"description": "`<vaadin-board>` is a web component to create flexible responsive layouts\nand build nice looking dashboards.\n\nA `<vaadin-board>` is built using `<vaadin-board-row>` elements containing your child elements.\nEach board row consists of four columns, and can contain up to four elements. Using column spans\nyou can tune the layout to your liking.\n\n```html\n<vaadin-board>\n <vaadin-board-row>\n <div>This could be chart 1</div>\n <div>This could be chart 2</div>\n <div>This could be chart 3</div>\n <div>This could be chart 4</div>\n </vaadin-board-row>\n</vaadin-board>\n```",
|
|
33
|
+
"attributes": [
|
|
34
|
+
{
|
|
35
|
+
"name": "theme",
|
|
36
|
+
"description": "The theme variants to apply to the component.",
|
|
37
|
+
"value": {
|
|
38
|
+
"type": [
|
|
39
|
+
"string",
|
|
40
|
+
"null",
|
|
41
|
+
"undefined"
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
"js": {
|
|
47
|
+
"properties": [],
|
|
48
|
+
"events": []
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/board",
|
|
4
|
+
"version": "23.2.0",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-board-row",
|
|
19
|
+
"description": "`<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows\nto create flexible responsive layouts and build nice looking dashboard.\n\nEach row can contain up to four elements (fewer if colspan is used) and is automatically responsive.\nThe row changes between `large`, `medium` and `small` modes depending on the available width and\nthe set breakpoints.\n\nIn `large` mode, typically all content is shown side-by-side, in `medium` half of the content is\nside by side and in `small` mode, content is laid out vertically.\n\nThe breakpoints can be set using custom CSS properties.\nBy default the breakpoints are `small: <600px`, `medium: < 960px`, `large >= 960px`.\n\n```html\n<vaadin-board>\n <vaadin-board-row>\n <div>This could be chart 1</div>\n <div>This could be chart 2</div>\n <div>This could be chart 3</div>\n <div>This could be chart 4</div>\n </vaadin-board-row>\n</vaadin-board>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-board-width-small` | Determines the width where mode changes from `small` to `medium` | `600px`\n`--vaadin-board-width-medium` | Determines the width where mode changes from `medium` to `large` | `960px`",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": []
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "vaadin-board",
|
|
25
|
+
"description": "`<vaadin-board>` is a web component to create flexible responsive layouts\nand build nice looking dashboards.\n\nA `<vaadin-board>` is built using `<vaadin-board-row>` elements containing your child elements.\nEach board row consists of four columns, and can contain up to four elements. Using column spans\nyou can tune the layout to your liking.\n\n```html\n<vaadin-board>\n <vaadin-board-row>\n <div>This could be chart 1</div>\n <div>This could be chart 2</div>\n <div>This could be chart 3</div>\n <div>This could be chart 4</div>\n </vaadin-board-row>\n</vaadin-board>\n```",
|
|
26
|
+
"extension": true,
|
|
27
|
+
"attributes": []
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|