@vaadin/message-list 25.1.0-beta1 → 25.1.0-beta3
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/custom-elements.json +1 -1
- package/package.json +12 -12
- package/src/styles/vaadin-message-base-styles.js +49 -29
- package/src/vaadin-message-list-mixin.js +0 -2
- package/src/vaadin-message.d.ts +28 -0
- package/src/vaadin-message.js +28 -0
- package/web-types.json +15 -7
- package/web-types.lit.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -424,7 +424,7 @@
|
|
|
424
424
|
"declarations": [
|
|
425
425
|
{
|
|
426
426
|
"kind": "class",
|
|
427
|
-
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
427
|
+
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
428
428
|
"name": "Message",
|
|
429
429
|
"members": [
|
|
430
430
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/message-list",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,25 +37,25 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
41
|
-
"@vaadin/avatar": "25.1.0-
|
|
42
|
-
"@vaadin/component-base": "25.1.0-
|
|
43
|
-
"@vaadin/markdown": "25.1.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.1.0-beta3",
|
|
41
|
+
"@vaadin/avatar": "25.1.0-beta3",
|
|
42
|
+
"@vaadin/component-base": "25.1.0-beta3",
|
|
43
|
+
"@vaadin/markdown": "25.1.0-beta3",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/aura": "25.1.0-
|
|
49
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
48
|
+
"@vaadin/aura": "25.1.0-beta3",
|
|
49
|
+
"@vaadin/chai-plugins": "25.1.0-beta3",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.1.0-beta3",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
53
|
-
"sinon": "^21.0.
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
|
|
53
|
+
"sinon": "^21.0.2"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
56
56
|
"web-types": [
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "4251850231a42298fda23b83928da588831cdb5d"
|
|
61
61
|
}
|
|
@@ -12,15 +12,16 @@ export const messageStyles = css`
|
|
|
12
12
|
flex-direction: row;
|
|
13
13
|
padding: var(--vaadin-message-padding, var(--vaadin-padding-s) var(--vaadin-padding-m));
|
|
14
14
|
gap: var(--vaadin-message-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s));
|
|
15
|
+
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
:host([hidden]) {
|
|
18
19
|
display: none !important;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
:host(:
|
|
22
|
+
:host(:focus-visible),
|
|
23
|
+
:is(:focus-visible, [focus-ring]) {
|
|
22
24
|
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
23
|
-
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
[part='content'] {
|
|
@@ -70,46 +71,65 @@ export const messageStyles = css`
|
|
|
70
71
|
[part='attachments'] {
|
|
71
72
|
display: flex;
|
|
72
73
|
flex-wrap: wrap;
|
|
73
|
-
gap:
|
|
74
|
+
gap: var(--vaadin-gap-s);
|
|
75
|
+
padding-bottom: var(--vaadin-gap-xs);
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
[part~='attachment'] {
|
|
77
|
-
display: inline-
|
|
79
|
+
display: inline-grid;
|
|
80
|
+
grid-template-columns: max-content 1fr;
|
|
81
|
+
gap: var(--vaadin-message-attachment-gap, var(--vaadin-gap-s));
|
|
78
82
|
align-items: center;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
83
|
+
background: var(--vaadin-message-attachment-background, var(--vaadin-background-container));
|
|
84
|
+
color: var(--vaadin-message-attachment-text-color, var(--vaadin-text-color));
|
|
85
|
+
cursor: var(--vaadin-clickable-cursor);
|
|
86
|
+
border: var(--vaadin-message-attachment-border-width, 0) solid
|
|
87
|
+
var(--vaadin-message-attachment-border-color, var(--vaadin-border-color));
|
|
88
|
+
border-radius: var(--vaadin-message-attachment-border-radius, var(--vaadin-radius-m));
|
|
82
89
|
padding: 0;
|
|
83
90
|
margin: 0;
|
|
84
91
|
font: inherit;
|
|
85
|
-
|
|
92
|
+
font-size: var(--vaadin-message-attachment-font-size, inherit);
|
|
93
|
+
line-height: var(--vaadin-message-attachment-line-height, inherit);
|
|
94
|
+
font-weight: var(--vaadin-message-attachment-font-weight, inherit);
|
|
86
95
|
text-align: start;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
[part~='attachment-image'] [part='attachment-preview'] {
|
|
90
|
-
display: block;
|
|
91
|
-
max-width: 200px;
|
|
92
|
-
max-height: 150px;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
[part~='attachment-file'] {
|
|
96
|
-
gap: 6px;
|
|
96
|
+
contain: content;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
[part='attachment-icon'] {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
100
|
+
grid-column: 1;
|
|
101
|
+
align-self: stretch;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
background: var(--vaadin-background-container-strong);
|
|
106
|
+
padding: var(--vaadin-message-attachment-padding, var(--vaadin-padding-s));
|
|
107
|
+
contain: content;
|
|
108
|
+
|
|
109
|
+
&::before {
|
|
110
|
+
content: '\\2003' / '';
|
|
111
|
+
display: inline-flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
flex: none;
|
|
114
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
115
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
116
|
+
mask-image: var(--_vaadin-icon-file);
|
|
117
|
+
mask-size: var(--vaadin-icon-visual-size, 100%);
|
|
118
|
+
mask-position: 50%;
|
|
119
|
+
mask-repeat: no-repeat;
|
|
120
|
+
background: currentColor;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
[part='attachment-preview'] {
|
|
125
|
+
grid-column: 1 / -1;
|
|
126
|
+
max-width: 100px;
|
|
127
|
+
max-height: 100px;
|
|
108
128
|
}
|
|
109
129
|
|
|
110
130
|
[part='attachment-name'] {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
131
|
+
grid-column: 2;
|
|
132
|
+
padding: var(--vaadin-message-attachment-padding, var(--vaadin-padding-s));
|
|
133
|
+
padding-inline-start: 0;
|
|
114
134
|
}
|
|
115
135
|
`;
|
|
@@ -52,7 +52,6 @@ export const MessageListMixin = (superClass) =>
|
|
|
52
52
|
|
|
53
53
|
/**
|
|
54
54
|
* When set to `true`, the message text is parsed as Markdown.
|
|
55
|
-
* @type {boolean}
|
|
56
55
|
*/
|
|
57
56
|
markdown: {
|
|
58
57
|
type: Boolean,
|
|
@@ -63,7 +62,6 @@ export const MessageListMixin = (superClass) =>
|
|
|
63
62
|
/**
|
|
64
63
|
* When set to `true`, new messages are announced to assistive technologies using ARIA live regions.
|
|
65
64
|
* @attr {boolean} announce-messages
|
|
66
|
-
* @type {boolean}
|
|
67
65
|
*/
|
|
68
66
|
announceMessages: {
|
|
69
67
|
type: Boolean,
|
package/src/vaadin-message.d.ts
CHANGED
|
@@ -47,6 +47,34 @@ export type MessageEventMap = HTMLElementEventMap & {
|
|
|
47
47
|
* `focus-ring` | Set when the message is focused using the keyboard.
|
|
48
48
|
* `focused` | Set when the message is focused.
|
|
49
49
|
*
|
|
50
|
+
* The following custom CSS properties are available for styling:
|
|
51
|
+
*
|
|
52
|
+
* Custom CSS property |
|
|
53
|
+
* :------------------------------------------- |
|
|
54
|
+
* `--vaadin-message-attachment-background` |
|
|
55
|
+
* `--vaadin-message-attachment-border-color` |
|
|
56
|
+
* `--vaadin-message-attachment-border-radius` |
|
|
57
|
+
* `--vaadin-message-attachment-border-width` |
|
|
58
|
+
* `--vaadin-message-attachment-font-size` |
|
|
59
|
+
* `--vaadin-message-attachment-font-weight` |
|
|
60
|
+
* `--vaadin-message-attachment-gap` |
|
|
61
|
+
* `--vaadin-message-attachment-line-height` |
|
|
62
|
+
* `--vaadin-message-attachment-padding` |
|
|
63
|
+
* `--vaadin-message-attachment-text-color` |
|
|
64
|
+
* `--vaadin-message-font-size` |
|
|
65
|
+
* `--vaadin-message-font-weight` |
|
|
66
|
+
* `--vaadin-message-gap` |
|
|
67
|
+
* `--vaadin-message-header-line-height` |
|
|
68
|
+
* `--vaadin-message-line-height` |
|
|
69
|
+
* `--vaadin-message-name-color` |
|
|
70
|
+
* `--vaadin-message-name-font-size` |
|
|
71
|
+
* `--vaadin-message-name-font-weight` |
|
|
72
|
+
* `--vaadin-message-padding` |
|
|
73
|
+
* `--vaadin-message-text-color` |
|
|
74
|
+
* `--vaadin-message-time-color` |
|
|
75
|
+
* `--vaadin-message-time-font-size` |
|
|
76
|
+
* `--vaadin-message-time-font-weight` |
|
|
77
|
+
*
|
|
50
78
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
51
79
|
*
|
|
52
80
|
* @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
|
package/src/vaadin-message.js
CHANGED
|
@@ -47,6 +47,34 @@ import { MessageMixin } from './vaadin-message-mixin.js';
|
|
|
47
47
|
* `focus-ring` | Set when the message is focused using the keyboard.
|
|
48
48
|
* `focused` | Set when the message is focused.
|
|
49
49
|
*
|
|
50
|
+
* The following custom CSS properties are available for styling:
|
|
51
|
+
*
|
|
52
|
+
* Custom CSS property |
|
|
53
|
+
* :------------------------------------------- |
|
|
54
|
+
* `--vaadin-message-attachment-background` |
|
|
55
|
+
* `--vaadin-message-attachment-border-color` |
|
|
56
|
+
* `--vaadin-message-attachment-border-radius` |
|
|
57
|
+
* `--vaadin-message-attachment-border-width` |
|
|
58
|
+
* `--vaadin-message-attachment-font-size` |
|
|
59
|
+
* `--vaadin-message-attachment-font-weight` |
|
|
60
|
+
* `--vaadin-message-attachment-gap` |
|
|
61
|
+
* `--vaadin-message-attachment-line-height` |
|
|
62
|
+
* `--vaadin-message-attachment-padding` |
|
|
63
|
+
* `--vaadin-message-attachment-text-color` |
|
|
64
|
+
* `--vaadin-message-font-size` |
|
|
65
|
+
* `--vaadin-message-font-weight` |
|
|
66
|
+
* `--vaadin-message-gap` |
|
|
67
|
+
* `--vaadin-message-header-line-height` |
|
|
68
|
+
* `--vaadin-message-line-height` |
|
|
69
|
+
* `--vaadin-message-name-color` |
|
|
70
|
+
* `--vaadin-message-name-font-size` |
|
|
71
|
+
* `--vaadin-message-name-font-weight` |
|
|
72
|
+
* `--vaadin-message-padding` |
|
|
73
|
+
* `--vaadin-message-text-color` |
|
|
74
|
+
* `--vaadin-message-time-color` |
|
|
75
|
+
* `--vaadin-message-time-font-size` |
|
|
76
|
+
* `--vaadin-message-time-font-weight` |
|
|
77
|
+
*
|
|
50
78
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
51
79
|
*
|
|
52
80
|
* @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/message-list",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-message",
|
|
11
|
-
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
11
|
+
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "theme",
|
|
@@ -156,14 +156,16 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"name": "vaadin-message-list",
|
|
159
|
-
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
159
|
+
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
160
160
|
"attributes": [
|
|
161
161
|
{
|
|
162
162
|
"name": "announce-messages",
|
|
163
163
|
"description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
|
|
164
164
|
"value": {
|
|
165
165
|
"type": [
|
|
166
|
-
"boolean"
|
|
166
|
+
"boolean",
|
|
167
|
+
"null",
|
|
168
|
+
"undefined"
|
|
167
169
|
]
|
|
168
170
|
}
|
|
169
171
|
},
|
|
@@ -172,7 +174,9 @@
|
|
|
172
174
|
"description": "When set to `true`, the message text is parsed as Markdown.",
|
|
173
175
|
"value": {
|
|
174
176
|
"type": [
|
|
175
|
-
"boolean"
|
|
177
|
+
"boolean",
|
|
178
|
+
"null",
|
|
179
|
+
"undefined"
|
|
176
180
|
]
|
|
177
181
|
}
|
|
178
182
|
},
|
|
@@ -195,7 +199,9 @@
|
|
|
195
199
|
"description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
|
|
196
200
|
"value": {
|
|
197
201
|
"type": [
|
|
198
|
-
"boolean"
|
|
202
|
+
"boolean",
|
|
203
|
+
"null",
|
|
204
|
+
"undefined"
|
|
199
205
|
]
|
|
200
206
|
}
|
|
201
207
|
},
|
|
@@ -215,7 +221,9 @@
|
|
|
215
221
|
"description": "When set to `true`, the message text is parsed as Markdown.",
|
|
216
222
|
"value": {
|
|
217
223
|
"type": [
|
|
218
|
-
"boolean"
|
|
224
|
+
"boolean",
|
|
225
|
+
"null",
|
|
226
|
+
"undefined"
|
|
219
227
|
]
|
|
220
228
|
}
|
|
221
229
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/message-list",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-message",
|
|
19
|
-
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
19
|
+
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
74
|
"name": "vaadin-message-list",
|
|
75
|
-
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
75
|
+
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
76
76
|
"extension": true,
|
|
77
77
|
"attributes": [
|
|
78
78
|
{
|