@vaadin/board 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1
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 +3 -1141
- package/README.md +0 -1
- package/package.json +4 -4
- package/src/vaadin-board-row.d.ts +1 -1
- package/src/vaadin-board-row.js +1 -1
- package/src/vaadin-board.d.ts +1 -1
- package/src/vaadin-board.js +1 -1
- package/theme/lumo/vaadin-board-row.d.ts +1 -0
- package/theme/lumo/vaadin-board.d.ts +2 -0
- package/theme/material/vaadin-board-row.d.ts +1 -0
- package/theme/material/vaadin-board.d.ts +2 -0
- package/web-types.json +54 -0
- package/web-types.lit.json +32 -0
package/README.md
CHANGED
|
@@ -7,7 +7,6 @@ A powerful and easy to use layout web component for building responsive views.
|
|
|
7
7
|
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/board)
|
|
8
8
|
|
|
9
9
|
[](https://www.npmjs.com/package/@vaadin/board)
|
|
10
|
-
[](https://discord.gg/PHmkCKC)
|
|
11
10
|
|
|
12
11
|
```html
|
|
13
12
|
<vaadin-board>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/board",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.5.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
],
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@polymer/polymer": "^3.0.0",
|
|
42
|
-
"@vaadin/a11y-base": "24.
|
|
43
|
-
"@vaadin/component-base": "24.
|
|
42
|
+
"@vaadin/a11y-base": "24.5.0-alpha1",
|
|
43
|
+
"@vaadin/component-base": "24.5.0-alpha1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
|
|
56
56
|
}
|
package/src/vaadin-board-row.js
CHANGED
package/src/vaadin-board.d.ts
CHANGED
package/src/vaadin-board.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../../src/vaadin-board-row.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../../src/vaadin-board-row.js';
|
package/web-types.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/board",
|
|
4
|
+
"version": "24.5.0-alpha1",
|
|
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": "24.5.0-alpha1",
|
|
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
|
+
}
|