@vaadin/progress-bar 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/README.md +4 -4
- package/package.json +13 -7
- package/src/vaadin-progress-bar.d.ts +1 -1
- package/src/vaadin-progress-bar.js +1 -1
- package/src/vaadin-progress-mixin.d.ts +2 -2
- package/theme/lumo/vaadin-progress-bar-styles.js +3 -3
- package/web-types.json +110 -0
- package/web-types.lit.json +55 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A web component for showing the completion status of a task or process.
|
|
4
4
|
|
|
5
|
-
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/
|
|
5
|
+
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/progress-bar)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/progress-bar)
|
|
8
8
|
[](https://discord.gg/PHmkCKC)
|
|
@@ -13,7 +13,7 @@ A web component for showing the completion status of a task or process.
|
|
|
13
13
|
<vaadin-progress-bar indeterminate></vaadin-progress-bar>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
[<img src="https://raw.githubusercontent.com/vaadin/vaadin-progress-bar/master/screenshot.gif" width="418" alt="Screenshot of vaadin-progress-bar">](https://vaadin.com/docs/latest/
|
|
16
|
+
[<img src="https://raw.githubusercontent.com/vaadin/vaadin-progress-bar/master/screenshot.gif" width="418" alt="Screenshot of vaadin-progress-bar">](https://vaadin.com/docs/latest/components/progress-bar)
|
|
17
17
|
|
|
18
18
|
## Installation
|
|
19
19
|
|
|
@@ -31,7 +31,7 @@ import '@vaadin/progress-bar';
|
|
|
31
31
|
|
|
32
32
|
## Themes
|
|
33
33
|
|
|
34
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/
|
|
34
|
+
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
35
35
|
The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/progress-bar/vaadin-progress-bar.js) of the package uses Lumo theme.
|
|
36
36
|
|
|
37
37
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
@@ -54,7 +54,7 @@ import '@vaadin/progress-bar/src/vaadin-progress-bar.js';
|
|
|
54
54
|
|
|
55
55
|
## Contributing
|
|
56
56
|
|
|
57
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/
|
|
57
|
+
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.
|
|
58
58
|
|
|
59
59
|
## License
|
|
60
60
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/progress-bar",
|
|
3
|
-
"version": "23.2.0
|
|
3
|
+
"version": "23.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"theme",
|
|
25
25
|
"vaadin-*.d.ts",
|
|
26
|
-
"vaadin-*.js"
|
|
26
|
+
"vaadin-*.js",
|
|
27
|
+
"web-types.json",
|
|
28
|
+
"web-types.lit.json"
|
|
27
29
|
],
|
|
28
30
|
"keywords": [
|
|
29
31
|
"Vaadin",
|
|
@@ -36,14 +38,18 @@
|
|
|
36
38
|
"dependencies": {
|
|
37
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
40
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/component-base": "23.2.0
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "23.2.0
|
|
41
|
-
"@vaadin/vaadin-material-styles": "23.2.0
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "23.2.0
|
|
41
|
+
"@vaadin/component-base": "^23.2.0",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "^23.2.0",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "^23.2.0",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "^23.2.0"
|
|
43
45
|
},
|
|
44
46
|
"devDependencies": {
|
|
45
47
|
"@esm-bundle/chai": "^4.3.4",
|
|
46
48
|
"@vaadin/testing-helpers": "^0.3.2"
|
|
47
49
|
},
|
|
48
|
-
"
|
|
50
|
+
"web-types": [
|
|
51
|
+
"web-types.json",
|
|
52
|
+
"web-types.lit.json"
|
|
53
|
+
],
|
|
54
|
+
"gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
|
|
49
55
|
}
|
|
@@ -24,7 +24,7 @@ import { ProgressMixin } from './vaadin-progress-mixin.js';
|
|
|
24
24
|
* `bar` | Progress-bar's background
|
|
25
25
|
* `value` | Progress-bar's foreground
|
|
26
26
|
*
|
|
27
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
27
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
28
28
|
*
|
|
29
29
|
* The following custom properties are available:
|
|
30
30
|
*
|
|
@@ -25,7 +25,7 @@ import { ProgressMixin } from './vaadin-progress-mixin.js';
|
|
|
25
25
|
* `bar` | Progress-bar's background
|
|
26
26
|
* `value` | Progress-bar's foreground
|
|
27
27
|
*
|
|
28
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
28
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
29
29
|
*
|
|
30
30
|
* The following custom properties are available:
|
|
31
31
|
*
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { Constructor } from '@open-wc/dedupe-mixin';
|
|
6
|
+
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
7
|
|
|
8
|
-
export declare function ProgressMixin<T extends Constructor<HTMLElement>>(base: T):
|
|
8
|
+
export declare function ProgressMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ProgressMixinClass> & T;
|
|
9
9
|
|
|
10
10
|
export declare class ProgressMixinClass {
|
|
11
11
|
/**
|
|
@@ -275,10 +275,10 @@ registerStyles(
|
|
|
275
275
|
{ moduleId: 'lumo-progress-bar' },
|
|
276
276
|
);
|
|
277
277
|
|
|
278
|
-
const
|
|
278
|
+
const template = document.createElement('template');
|
|
279
279
|
|
|
280
280
|
/* Safari fails to declare animations for pseudo elements inside a shadow DOM */
|
|
281
|
-
|
|
281
|
+
template.innerHTML = `
|
|
282
282
|
<style>
|
|
283
283
|
@keyframes vaadin-progress-pulse3 {
|
|
284
284
|
0% { opacity: 1; }
|
|
@@ -293,4 +293,4 @@ $_documentContainer.innerHTML = `
|
|
|
293
293
|
</style>
|
|
294
294
|
`;
|
|
295
295
|
|
|
296
|
-
document.head.appendChild(
|
|
296
|
+
document.head.appendChild(template.content);
|
package/web-types.json
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/progress-bar",
|
|
4
|
+
"version": "23.2.0",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-progress-bar",
|
|
11
|
+
"description": "`<vaadin-progress-bar>` is a Web Component for progress bars.\n\n```html\n<vaadin-progress-bar min=\"0\" max=\"1\" value=\"0.5\">\n</vaadin-progress-bar>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`bar` | Progress-bar's background\n`value` | Progress-bar's foreground\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nThe following custom properties are available:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-progress-value` | current progress value (between 0 and 1) | 0\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------|-------------|------------\n`indeterminate` | Set to an indeterminate progress bar | :host",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "value",
|
|
15
|
+
"description": "Current progress value.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"number",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "min",
|
|
26
|
+
"description": "Minimum bound of the progress bar.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"number"
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "max",
|
|
35
|
+
"description": "Maximum bound of the progress bar.",
|
|
36
|
+
"value": {
|
|
37
|
+
"type": [
|
|
38
|
+
"number"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "indeterminate",
|
|
44
|
+
"description": "Indeterminate state of the progress bar.\nThis property takes precedence over other state properties (min, max, value).",
|
|
45
|
+
"value": {
|
|
46
|
+
"type": [
|
|
47
|
+
"boolean"
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "theme",
|
|
53
|
+
"description": "The theme variants to apply to the component.",
|
|
54
|
+
"value": {
|
|
55
|
+
"type": [
|
|
56
|
+
"string",
|
|
57
|
+
"null",
|
|
58
|
+
"undefined"
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"js": {
|
|
64
|
+
"properties": [
|
|
65
|
+
{
|
|
66
|
+
"name": "value",
|
|
67
|
+
"description": "Current progress value.",
|
|
68
|
+
"value": {
|
|
69
|
+
"type": [
|
|
70
|
+
"number",
|
|
71
|
+
"null",
|
|
72
|
+
"undefined"
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "min",
|
|
78
|
+
"description": "Minimum bound of the progress bar.",
|
|
79
|
+
"value": {
|
|
80
|
+
"type": [
|
|
81
|
+
"number"
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "max",
|
|
87
|
+
"description": "Maximum bound of the progress bar.",
|
|
88
|
+
"value": {
|
|
89
|
+
"type": [
|
|
90
|
+
"number"
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"name": "indeterminate",
|
|
96
|
+
"description": "Indeterminate state of the progress bar.\nThis property takes precedence over other state properties (min, max, value).",
|
|
97
|
+
"value": {
|
|
98
|
+
"type": [
|
|
99
|
+
"boolean"
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
"events": []
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/progress-bar",
|
|
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-progress-bar",
|
|
19
|
+
"description": "`<vaadin-progress-bar>` is a Web Component for progress bars.\n\n```html\n<vaadin-progress-bar min=\"0\" max=\"1\" value=\"0.5\">\n</vaadin-progress-bar>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`bar` | Progress-bar's background\n`value` | Progress-bar's foreground\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nThe following custom properties are available:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-progress-value` | current progress value (between 0 and 1) | 0\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------|-------------|------------\n`indeterminate` | Set to an indeterminate progress bar | :host",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?indeterminate",
|
|
24
|
+
"description": "Indeterminate state of the progress bar.\nThis property takes precedence over other state properties (min, max, value).",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": ".value",
|
|
31
|
+
"description": "Current progress value.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": ".min",
|
|
38
|
+
"description": "Minimum bound of the progress bar.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": ".max",
|
|
45
|
+
"description": "Maximum bound of the progress bar.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|