@vaadin/message-list 25.1.0-alpha9 → 25.1.0-beta2
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/message-list",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,19 @@
|
|
|
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-beta2",
|
|
41
|
+
"@vaadin/avatar": "25.1.0-beta2",
|
|
42
|
+
"@vaadin/component-base": "25.1.0-beta2",
|
|
43
|
+
"@vaadin/markdown": "25.1.0-beta2",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta2",
|
|
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-beta2",
|
|
49
|
+
"@vaadin/chai-plugins": "25.1.0-beta2",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.1.0-beta2",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta2",
|
|
53
53
|
"sinon": "^21.0.0"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
|
|
61
61
|
}
|
|
@@ -70,46 +70,56 @@ export const messageStyles = css`
|
|
|
70
70
|
[part='attachments'] {
|
|
71
71
|
display: flex;
|
|
72
72
|
flex-wrap: wrap;
|
|
73
|
-
gap:
|
|
73
|
+
gap: var(--vaadin-gap-s);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
[part~='attachment'] {
|
|
77
|
-
|
|
77
|
+
--_prefix-area-size: 2rem;
|
|
78
|
+
display: inline-grid;
|
|
79
|
+
grid-template-columns: var(--_prefix-area-size) auto;
|
|
78
80
|
align-items: center;
|
|
81
|
+
background: var(--vaadin-background-container);
|
|
79
82
|
color: inherit;
|
|
80
|
-
background: none;
|
|
81
83
|
border: none;
|
|
82
84
|
padding: 0;
|
|
83
85
|
margin: 0;
|
|
84
86
|
font: inherit;
|
|
85
|
-
cursor: pointer;
|
|
86
87
|
text-align: start;
|
|
87
88
|
}
|
|
88
89
|
|
|
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;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
90
|
[part='attachment-icon'] {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
91
|
+
width: 100%;
|
|
92
|
+
aspect-ratio: 1 / 1;
|
|
93
|
+
align-items: center;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
grid-column: 1;
|
|
96
|
+
text-align: center;
|
|
97
|
+
|
|
98
|
+
&::before {
|
|
99
|
+
/* TODO: Replace with vaadin file icon, once it exists. */
|
|
100
|
+
content: '';
|
|
101
|
+
display: inline-flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
flex: none;
|
|
104
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
105
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
106
|
+
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
|
|
107
|
+
mask-size: contain;
|
|
108
|
+
background: currentColor;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
[part='attachment-preview'] {
|
|
113
|
+
grid-column: 1;
|
|
114
|
+
width: 100%;
|
|
115
|
+
aspect-ratio: 1 / 1;
|
|
108
116
|
}
|
|
109
117
|
|
|
110
118
|
[part='attachment-name'] {
|
|
119
|
+
grid-column: 2;
|
|
111
120
|
overflow: hidden;
|
|
112
121
|
text-overflow: ellipsis;
|
|
113
122
|
white-space: nowrap;
|
|
123
|
+
margin-inline-end: var(--vaadin-padding-s);
|
|
114
124
|
}
|
|
115
125
|
`;
|
|
@@ -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,
|
|
@@ -237,4 +235,9 @@ export const MessageListMixin = (superClass) =>
|
|
|
237
235
|
__announceChanged(announceMessages) {
|
|
238
236
|
this.ariaLive = announceMessages ? 'polite' : null;
|
|
239
237
|
}
|
|
238
|
+
|
|
239
|
+
/**
|
|
240
|
+
* Fired when an attachment is clicked.
|
|
241
|
+
* @event attachment-click
|
|
242
|
+
*/
|
|
240
243
|
};
|
package/web-types.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-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -146,19 +146,26 @@
|
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
],
|
|
149
|
-
"events": [
|
|
149
|
+
"events": [
|
|
150
|
+
{
|
|
151
|
+
"name": "attachment-click",
|
|
152
|
+
"description": "Fired when an attachment is clicked."
|
|
153
|
+
}
|
|
154
|
+
]
|
|
150
155
|
}
|
|
151
156
|
},
|
|
152
157
|
{
|
|
153
158
|
"name": "vaadin-message-list",
|
|
154
|
-
"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-beta2/#/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-beta2/#/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.",
|
|
155
160
|
"attributes": [
|
|
156
161
|
{
|
|
157
162
|
"name": "announce-messages",
|
|
158
163
|
"description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
|
|
159
164
|
"value": {
|
|
160
165
|
"type": [
|
|
161
|
-
"boolean"
|
|
166
|
+
"boolean",
|
|
167
|
+
"null",
|
|
168
|
+
"undefined"
|
|
162
169
|
]
|
|
163
170
|
}
|
|
164
171
|
},
|
|
@@ -167,7 +174,9 @@
|
|
|
167
174
|
"description": "When set to `true`, the message text is parsed as Markdown.",
|
|
168
175
|
"value": {
|
|
169
176
|
"type": [
|
|
170
|
-
"boolean"
|
|
177
|
+
"boolean",
|
|
178
|
+
"null",
|
|
179
|
+
"undefined"
|
|
171
180
|
]
|
|
172
181
|
}
|
|
173
182
|
},
|
|
@@ -190,7 +199,9 @@
|
|
|
190
199
|
"description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
|
|
191
200
|
"value": {
|
|
192
201
|
"type": [
|
|
193
|
-
"boolean"
|
|
202
|
+
"boolean",
|
|
203
|
+
"null",
|
|
204
|
+
"undefined"
|
|
194
205
|
]
|
|
195
206
|
}
|
|
196
207
|
},
|
|
@@ -210,12 +221,19 @@
|
|
|
210
221
|
"description": "When set to `true`, the message text is parsed as Markdown.",
|
|
211
222
|
"value": {
|
|
212
223
|
"type": [
|
|
213
|
-
"boolean"
|
|
224
|
+
"boolean",
|
|
225
|
+
"null",
|
|
226
|
+
"undefined"
|
|
214
227
|
]
|
|
215
228
|
}
|
|
216
229
|
}
|
|
217
230
|
],
|
|
218
|
-
"events": [
|
|
231
|
+
"events": [
|
|
232
|
+
{
|
|
233
|
+
"name": "attachment-click",
|
|
234
|
+
"description": "Fired when an attachment is clicked."
|
|
235
|
+
}
|
|
236
|
+
]
|
|
219
237
|
}
|
|
220
238
|
}
|
|
221
239
|
]
|
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-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -60,12 +60,19 @@
|
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "@attachment-click",
|
|
66
|
+
"description": "Fired when an attachment is clicked.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
63
70
|
}
|
|
64
71
|
]
|
|
65
72
|
},
|
|
66
73
|
{
|
|
67
74
|
"name": "vaadin-message-list",
|
|
68
|
-
"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-beta2/#/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-beta2/#/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.",
|
|
69
76
|
"extension": true,
|
|
70
77
|
"attributes": [
|
|
71
78
|
{
|
|
@@ -88,6 +95,13 @@
|
|
|
88
95
|
"value": {
|
|
89
96
|
"kind": "expression"
|
|
90
97
|
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "@attachment-click",
|
|
101
|
+
"description": "Fired when an attachment is clicked.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
91
105
|
}
|
|
92
106
|
]
|
|
93
107
|
}
|