@vaadin/notification 24.2.0-dev.e9803eea7 → 24.3.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/package.json +9 -9
- package/src/vaadin-notification.js +7 -3
- package/web-types.json +125 -0
- package/web-types.lit.json +69 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/notification",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.3.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -38,22 +38,22 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@polymer/polymer": "^3.0.0",
|
|
41
|
-
"@vaadin/component-base": "24.
|
|
42
|
-
"@vaadin/lit-renderer": "24.
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.
|
|
41
|
+
"@vaadin/component-base": "24.3.0-alpha1",
|
|
42
|
+
"@vaadin/lit-renderer": "24.3.0-alpha1",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.3.0-alpha1",
|
|
46
46
|
"lit": "^2.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
50
|
-
"@vaadin/button": "24.
|
|
51
|
-
"@vaadin/testing-helpers": "^0.
|
|
50
|
+
"@vaadin/button": "24.3.0-alpha1",
|
|
51
|
+
"@vaadin/testing-helpers": "^0.5.0",
|
|
52
52
|
"sinon": "^13.0.2"
|
|
53
53
|
},
|
|
54
54
|
"web-types": [
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
|
|
59
59
|
}
|
|
@@ -7,6 +7,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
|
7
7
|
import { render } from 'lit';
|
|
8
8
|
import { isTemplateResult } from 'lit/directive-helpers.js';
|
|
9
9
|
import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
|
|
10
|
+
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
11
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
12
|
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
13
|
import { processTemplates } from '@vaadin/component-base/src/templates.js';
|
|
@@ -16,6 +17,7 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
|
|
|
16
17
|
/**
|
|
17
18
|
* An element used internally by `<vaadin-notification>`. Not intended to be used separately.
|
|
18
19
|
*
|
|
20
|
+
* @customElement
|
|
19
21
|
* @extends HTMLElement
|
|
20
22
|
* @mixes ElementMixin
|
|
21
23
|
* @mixes ThemableMixin
|
|
@@ -166,6 +168,7 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
|
|
|
166
168
|
/**
|
|
167
169
|
* An element used internally by `<vaadin-notification>`. Not intended to be used separately.
|
|
168
170
|
*
|
|
171
|
+
* @customElement
|
|
169
172
|
* @extends HTMLElement
|
|
170
173
|
* @mixes ThemableMixin
|
|
171
174
|
* @private
|
|
@@ -255,6 +258,7 @@ class NotificationCard extends ThemableMixin(PolymerElement) {
|
|
|
255
258
|
*
|
|
256
259
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
257
260
|
*
|
|
261
|
+
* @customElement
|
|
258
262
|
* @extends HTMLElement
|
|
259
263
|
* @mixes ThemePropertyMixin
|
|
260
264
|
* @mixes ElementMixin
|
|
@@ -565,8 +569,8 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
|
|
|
565
569
|
}
|
|
566
570
|
}
|
|
567
571
|
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
572
|
+
defineCustomElement(NotificationContainer);
|
|
573
|
+
defineCustomElement(NotificationCard);
|
|
574
|
+
defineCustomElement(Notification);
|
|
571
575
|
|
|
572
576
|
export { Notification };
|
package/web-types.json
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/notification",
|
|
4
|
+
"version": "24.3.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-notification",
|
|
11
|
+
"description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "overlay-class",
|
|
15
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "duration",
|
|
26
|
+
"description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"number"
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "opened",
|
|
35
|
+
"description": "True if the notification is currently displayed.",
|
|
36
|
+
"value": {
|
|
37
|
+
"type": [
|
|
38
|
+
"boolean"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "position",
|
|
44
|
+
"description": "Alignment of the notification in the viewport\nValid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`",
|
|
45
|
+
"value": {
|
|
46
|
+
"type": [
|
|
47
|
+
"NotificationPosition"
|
|
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": "overlayClass",
|
|
67
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
68
|
+
"value": {
|
|
69
|
+
"type": [
|
|
70
|
+
"string",
|
|
71
|
+
"null",
|
|
72
|
+
"undefined"
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "duration",
|
|
78
|
+
"description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
|
|
79
|
+
"value": {
|
|
80
|
+
"type": [
|
|
81
|
+
"number"
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "opened",
|
|
87
|
+
"description": "True if the notification is currently displayed.",
|
|
88
|
+
"value": {
|
|
89
|
+
"type": [
|
|
90
|
+
"boolean"
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"name": "position",
|
|
96
|
+
"description": "Alignment of the notification in the viewport\nValid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`",
|
|
97
|
+
"value": {
|
|
98
|
+
"type": [
|
|
99
|
+
"NotificationPosition"
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "renderer",
|
|
105
|
+
"description": "Custom function for rendering the content of the notification.\nReceives two arguments:\n\n- `root` The `<vaadin-notification-card>` DOM element. Append\n your content to it.\n- `notification` The reference to the `<vaadin-notification>` element.",
|
|
106
|
+
"value": {
|
|
107
|
+
"type": [
|
|
108
|
+
"NotificationRenderer",
|
|
109
|
+
"undefined"
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
],
|
|
114
|
+
"events": [
|
|
115
|
+
{
|
|
116
|
+
"name": "opened-changed",
|
|
117
|
+
"description": "Fired when the `opened` property changes."
|
|
118
|
+
}
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/notification",
|
|
4
|
+
"version": "24.3.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-notification",
|
|
19
|
+
"description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?opened",
|
|
24
|
+
"description": "True if the notification is currently displayed.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": ".overlayClass",
|
|
31
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": ".duration",
|
|
38
|
+
"description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": ".position",
|
|
45
|
+
"description": "Alignment of the notification in the viewport\nValid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": ".renderer",
|
|
52
|
+
"description": "Custom function for rendering the content of the notification.\nReceives two arguments:\n\n- `root` The `<vaadin-notification-card>` DOM element. Append\n your content to it.\n- `notification` The reference to the `<vaadin-notification>` element.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "@opened-changed",
|
|
59
|
+
"description": "Fired when the `opened` property changes.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|