@vaadin/avatar-group 23.2.2 → 23.3.0-alpha2
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 +1 -1
- package/src/vaadin-avatar-group.js +12 -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-alpha2",
|
|
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-alpha2",
|
|
41
|
+
"@vaadin/component-base": "23.3.0-alpha2",
|
|
42
|
+
"@vaadin/item": "23.3.0-alpha2",
|
|
43
|
+
"@vaadin/list-box": "23.3.0-alpha2",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha2",
|
|
46
|
+
"@vaadin/vaadin-overlay": "23.3.0-alpha2",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
|
|
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": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
|
|
59
59
|
}
|
|
@@ -107,7 +107,7 @@ declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(HTMLEle
|
|
|
107
107
|
* The object has the following JSON structure and default values:
|
|
108
108
|
* ```
|
|
109
109
|
* {
|
|
110
|
-
* // Translation of the anonymous user avatar
|
|
110
|
+
* // Translation of the anonymous user avatar tooltip.
|
|
111
111
|
* anonymous: 'anonymous',
|
|
112
112
|
* // Translation of the avatar group accessible label.
|
|
113
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" generator="[[__overflowTextGenerator]]"></vaadin-tooltip>
|
|
136
|
+
</vaadin-avatar>
|
|
134
137
|
</div>
|
|
135
138
|
<vaadin-avatar-group-overlay
|
|
136
139
|
id="overlay"
|
|
@@ -215,7 +218,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
215
218
|
* The object has the following JSON structure and default values:
|
|
216
219
|
* ```
|
|
217
220
|
* {
|
|
218
|
-
* // Translation of the anonymous user avatar
|
|
221
|
+
* // Translation of the anonymous user avatar tooltip.
|
|
219
222
|
* anonymous: 'anonymous',
|
|
220
223
|
* // Translation of the avatar group accessible label.
|
|
221
224
|
* // {count} is replaced with the actual count of users.
|
|
@@ -269,12 +272,15 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
269
272
|
observer: '__openedChanged',
|
|
270
273
|
value: false,
|
|
271
274
|
},
|
|
275
|
+
|
|
276
|
+
/** @private */
|
|
277
|
+
__overflowTextGenerator: Object,
|
|
272
278
|
};
|
|
273
279
|
}
|
|
274
280
|
|
|
275
281
|
static get observers() {
|
|
276
282
|
return [
|
|
277
|
-
'
|
|
283
|
+
'__computeMoreTooltip(items.length, __itemsInView, maxItemsVisible)',
|
|
278
284
|
'__itemsChanged(items.splices, items.*)',
|
|
279
285
|
'__i18nItemsChanged(i18n.*, items.length)',
|
|
280
286
|
];
|
|
@@ -377,7 +383,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
377
383
|
}
|
|
378
384
|
|
|
379
385
|
/** @private */
|
|
380
|
-
|
|
386
|
+
__computeMoreTooltip(items, itemsInView, maxItemsVisible) {
|
|
381
387
|
const limit = this.__getLimit(items, itemsInView, maxItemsVisible);
|
|
382
388
|
if (limit == null) {
|
|
383
389
|
return;
|
|
@@ -389,8 +395,8 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
389
395
|
result.push(item.name || item.abbr || 'anonymous');
|
|
390
396
|
}
|
|
391
397
|
}
|
|
392
|
-
// Override generated
|
|
393
|
-
this
|
|
398
|
+
// Override generated tooltip text
|
|
399
|
+
this.__overflowTextGenerator = () => result.join('\n');
|
|
394
400
|
}
|
|
395
401
|
|
|
396
402
|
/** @private */
|
|
@@ -476,9 +482,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
476
482
|
|
|
477
483
|
this._openedWithFocusRing = this.$.overflow.hasAttribute('focus-ring');
|
|
478
484
|
|
|
479
|
-
const avatars = this._menuElement.querySelectorAll('vaadin-avatar');
|
|
480
|
-
avatars.forEach((avatar) => avatar.removeAttribute('title'));
|
|
481
|
-
|
|
482
485
|
this._menuElement.focus();
|
|
483
486
|
} else if (wasOpened) {
|
|
484
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-alpha2",
|
|
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-alpha2/#/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-alpha2/#/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-alpha2/#/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-alpha2/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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-alpha2",
|
|
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-alpha2/#/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-alpha2/#/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-alpha2/#/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-alpha2/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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
|
}
|