@vaadin/avatar-group 23.2.0 → 23.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 +10 -10
- package/src/vaadin-avatar-group.d.ts +2 -1
- package/src/vaadin-avatar-group.js +13 -9
- package/web-types.json +4 -4
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/avatar-group",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.3.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/avatar": "
|
|
41
|
-
"@vaadin/component-base": "
|
|
42
|
-
"@vaadin/item": "
|
|
43
|
-
"@vaadin/list-box": "
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
45
|
-
"@vaadin/vaadin-material-styles": "
|
|
46
|
-
"@vaadin/vaadin-overlay": "
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
40
|
+
"@vaadin/avatar": "23.3.0-alpha1",
|
|
41
|
+
"@vaadin/component-base": "23.3.0-alpha1",
|
|
42
|
+
"@vaadin/item": "23.3.0-alpha1",
|
|
43
|
+
"@vaadin/list-box": "23.3.0-alpha1",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-overlay": "23.3.0-alpha1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
|
|
59
59
|
}
|
|
@@ -95,6 +95,7 @@ declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(HTMLEle
|
|
|
95
95
|
* The maximum number of avatars to display. By default, all the avatars are displayed.
|
|
96
96
|
* When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
|
|
97
97
|
* a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
|
|
98
|
+
* @attr {number} max-items-visible
|
|
98
99
|
*/
|
|
99
100
|
maxItemsVisible: number | null | undefined;
|
|
100
101
|
|
|
@@ -106,7 +107,7 @@ declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(HTMLEle
|
|
|
106
107
|
* The object has the following JSON structure and default values:
|
|
107
108
|
* ```
|
|
108
109
|
* {
|
|
109
|
-
* // Translation of the anonymous user avatar
|
|
110
|
+
* // Translation of the anonymous user avatar tooltip.
|
|
110
111
|
* anonymous: 'anonymous',
|
|
111
112
|
* // Translation of the avatar group accessible label.
|
|
112
113
|
* // {count} is replaced with the actual count of users.
|
|
@@ -119,6 +119,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
119
119
|
theme$="[[_theme]]"
|
|
120
120
|
i18n="[[i18n]]"
|
|
121
121
|
color-index="[[item.colorIndex]]"
|
|
122
|
+
with-tooltip
|
|
122
123
|
></vaadin-avatar>
|
|
123
124
|
</template>
|
|
124
125
|
<vaadin-avatar
|
|
@@ -130,7 +131,9 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
130
131
|
on-click="_onOverflowClick"
|
|
131
132
|
on-keydown="_onOverflowKeyDown"
|
|
132
133
|
aria-haspopup="listbox"
|
|
133
|
-
|
|
134
|
+
>
|
|
135
|
+
<vaadin-tooltip slot="tooltip" text-generator="[[__overflowTextGenerator]]"></vaadin-tooltip>
|
|
136
|
+
</vaadin-avatar>
|
|
134
137
|
</div>
|
|
135
138
|
<vaadin-avatar-group-overlay
|
|
136
139
|
id="overlay"
|
|
@@ -201,6 +204,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
201
204
|
* The maximum number of avatars to display. By default, all the avatars are displayed.
|
|
202
205
|
* When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
|
|
203
206
|
* a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
|
|
207
|
+
* @attr {number} max-items-visible
|
|
204
208
|
*/
|
|
205
209
|
maxItemsVisible: {
|
|
206
210
|
type: Number,
|
|
@@ -214,7 +218,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
214
218
|
* The object has the following JSON structure and default values:
|
|
215
219
|
* ```
|
|
216
220
|
* {
|
|
217
|
-
* // Translation of the anonymous user avatar
|
|
221
|
+
* // Translation of the anonymous user avatar tooltip.
|
|
218
222
|
* anonymous: 'anonymous',
|
|
219
223
|
* // Translation of the avatar group accessible label.
|
|
220
224
|
* // {count} is replaced with the actual count of users.
|
|
@@ -268,12 +272,15 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
268
272
|
observer: '__openedChanged',
|
|
269
273
|
value: false,
|
|
270
274
|
},
|
|
275
|
+
|
|
276
|
+
/** @private */
|
|
277
|
+
__overflowTextGenerator: Object,
|
|
271
278
|
};
|
|
272
279
|
}
|
|
273
280
|
|
|
274
281
|
static get observers() {
|
|
275
282
|
return [
|
|
276
|
-
'
|
|
283
|
+
'__computeMoreTooltip(items.length, __itemsInView, maxItemsVisible)',
|
|
277
284
|
'__itemsChanged(items.splices, items.*)',
|
|
278
285
|
'__i18nItemsChanged(i18n.*, items.length)',
|
|
279
286
|
];
|
|
@@ -376,7 +383,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
376
383
|
}
|
|
377
384
|
|
|
378
385
|
/** @private */
|
|
379
|
-
|
|
386
|
+
__computeMoreTooltip(items, itemsInView, maxItemsVisible) {
|
|
380
387
|
const limit = this.__getLimit(items, itemsInView, maxItemsVisible);
|
|
381
388
|
if (limit == null) {
|
|
382
389
|
return;
|
|
@@ -388,8 +395,8 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
388
395
|
result.push(item.name || item.abbr || 'anonymous');
|
|
389
396
|
}
|
|
390
397
|
}
|
|
391
|
-
// Override generated
|
|
392
|
-
this
|
|
398
|
+
// Override generated tooltip text
|
|
399
|
+
this.__overflowTextGenerator = () => result.join('\n');
|
|
393
400
|
}
|
|
394
401
|
|
|
395
402
|
/** @private */
|
|
@@ -475,9 +482,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
475
482
|
|
|
476
483
|
this._openedWithFocusRing = this.$.overflow.hasAttribute('focus-ring');
|
|
477
484
|
|
|
478
|
-
const avatars = this._menuElement.querySelectorAll('vaadin-avatar');
|
|
479
|
-
avatars.forEach((avatar) => avatar.removeAttribute('title'));
|
|
480
|
-
|
|
481
485
|
this._menuElement.focus();
|
|
482
486
|
} else if (wasOpened) {
|
|
483
487
|
this.$.overflow.focus();
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/avatar-group",
|
|
4
|
-
"version": "23.
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-avatar-group",
|
|
11
|
-
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
11
|
+
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n`avatar` | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay).",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "max-items-visible",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"properties": [
|
|
38
38
|
{
|
|
39
39
|
"name": "items",
|
|
40
|
-
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
40
|
+
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
|
|
41
41
|
"value": {
|
|
42
42
|
"type": [
|
|
43
43
|
"Array.<AvatarGroupItem>",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
"name": "i18n",
|
|
61
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n // Translation of the anonymous user avatar
|
|
61
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n // Translation of the anonymous user avatar tooltip.\n anonymous: 'anonymous',\n // Translation of the avatar group accessible label.\n // {count} is replaced with the actual count of users.\n activeUsers: {\n one: 'Currently one active user',\n many: 'Currently {count} active users'\n },\n // Screen reader announcement when user joins group.\n // {user} is replaced with the name or abbreviation.\n // When neither is set, \"anonymous\" is used instead.\n joined: '{user} joined',\n // Screen reader announcement when user leaves group.\n // {user} is replaced with the name or abbreviation.\n // When neither is set, \"anonymous\" is used instead.\n left: '{user} left'\n}\n```",
|
|
62
62
|
"value": {
|
|
63
63
|
"type": [
|
|
64
64
|
"AvatarGroupI18n"
|
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/avatar-group",
|
|
4
|
-
"version": "23.
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-avatar-group",
|
|
19
|
-
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
19
|
+
"description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n`avatar` | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay).",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
23
|
"name": ".items",
|
|
24
|
-
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
24
|
+
"description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
"name": ".i18n",
|
|
38
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n // Translation of the anonymous user avatar
|
|
38
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n // Translation of the anonymous user avatar tooltip.\n anonymous: 'anonymous',\n // Translation of the avatar group accessible label.\n // {count} is replaced with the actual count of users.\n activeUsers: {\n one: 'Currently one active user',\n many: 'Currently {count} active users'\n },\n // Screen reader announcement when user joins group.\n // {user} is replaced with the name or abbreviation.\n // When neither is set, \"anonymous\" is used instead.\n joined: '{user} joined',\n // Screen reader announcement when user leaves group.\n // {user} is replaced with the name or abbreviation.\n // When neither is set, \"anonymous\" is used instead.\n left: '{user} left'\n}\n```",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|