@vaadin/avatar-group 23.2.0-alpha1 → 23.2.0-alpha4
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/avatar-group",
|
|
3
|
-
"version": "23.2.0-
|
|
3
|
+
"version": "23.2.0-alpha4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"theme",
|
|
25
25
|
"vaadin-*.d.ts",
|
|
26
|
-
"vaadin-*.js"
|
|
26
|
+
"vaadin-*.js",
|
|
27
|
+
"web-types.json",
|
|
28
|
+
"web-types.lit.json"
|
|
27
29
|
],
|
|
28
30
|
"keywords": [
|
|
29
31
|
"Vaadin",
|
|
@@ -35,19 +37,23 @@
|
|
|
35
37
|
],
|
|
36
38
|
"dependencies": {
|
|
37
39
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/avatar": "23.2.0-
|
|
39
|
-
"@vaadin/component-base": "23.2.0-
|
|
40
|
-
"@vaadin/item": "23.2.0-
|
|
41
|
-
"@vaadin/list-box": "23.2.0-
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "23.2.0-
|
|
43
|
-
"@vaadin/vaadin-material-styles": "23.2.0-
|
|
44
|
-
"@vaadin/vaadin-overlay": "23.2.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "23.2.0-
|
|
40
|
+
"@vaadin/avatar": "23.2.0-alpha4",
|
|
41
|
+
"@vaadin/component-base": "23.2.0-alpha4",
|
|
42
|
+
"@vaadin/item": "23.2.0-alpha4",
|
|
43
|
+
"@vaadin/list-box": "23.2.0-alpha4",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "23.2.0-alpha4",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "23.2.0-alpha4",
|
|
46
|
+
"@vaadin/vaadin-overlay": "23.2.0-alpha4",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.2.0-alpha4"
|
|
46
48
|
},
|
|
47
49
|
"devDependencies": {
|
|
48
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
49
51
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
50
52
|
"sinon": "^13.0.2"
|
|
51
53
|
},
|
|
52
|
-
"
|
|
54
|
+
"web-types": [
|
|
55
|
+
"web-types.json",
|
|
56
|
+
"web-types.lit.json"
|
|
57
|
+
],
|
|
58
|
+
"gitHead": "cbf5f1d0f38ac9b81c65cf9ef5660182e176e598"
|
|
53
59
|
}
|
|
@@ -69,7 +69,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
69
69
|
width: 100%; /* prevent collapsing inside non-stretching column flex */
|
|
70
70
|
--vaadin-avatar-group-overlap: 8px;
|
|
71
71
|
--vaadin-avatar-group-overlap-border: 2px;
|
|
72
|
-
--vaadin-avatar-size: 64px;
|
|
73
72
|
}
|
|
74
73
|
|
|
75
74
|
:host([hidden]) {
|
|
@@ -517,7 +516,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
517
516
|
this.__itemsInView = result;
|
|
518
517
|
}
|
|
519
518
|
|
|
520
|
-
/** @private
|
|
519
|
+
/** @private */
|
|
521
520
|
__calculateAvatarsFitWidth() {
|
|
522
521
|
if (!this.shadowRoot || this._avatars.length < MINIMUM_DISPLAYED_AVATARS) {
|
|
523
522
|
return MINIMUM_DISPLAYED_AVATARS;
|
|
@@ -12,14 +12,6 @@ registerStyles(
|
|
|
12
12
|
--vaadin-avatar-size: var(--lumo-size-m);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
:host([theme~='small']) {
|
|
16
|
-
--vaadin-avatar-size: var(--lumo-size-s);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:host([theme~='xsmall']) {
|
|
20
|
-
--vaadin-avatar-size: var(--lumo-size-xs);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
15
|
:host([theme~='xlarge']) {
|
|
24
16
|
--vaadin-avatar-group-overlap: 12px;
|
|
25
17
|
--vaadin-avatar-group-overlap-border: 3px;
|
|
@@ -2,6 +2,40 @@ import '@vaadin/vaadin-material-styles/color.js';
|
|
|
2
2
|
import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
|
|
3
3
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
4
|
|
|
5
|
+
registerStyles(
|
|
6
|
+
'vaadin-avatar-group',
|
|
7
|
+
css`
|
|
8
|
+
:host {
|
|
9
|
+
--vaadin-avatar-size: 2.25rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:host([theme~='xlarge']) {
|
|
13
|
+
--vaadin-avatar-group-overlap: 12px;
|
|
14
|
+
--vaadin-avatar-group-overlap-border: 3px;
|
|
15
|
+
--vaadin-avatar-size: 3.5rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:host([theme~='large']) {
|
|
19
|
+
--vaadin-avatar-group-overlap: 10px;
|
|
20
|
+
--vaadin-avatar-group-overlap-border: 3px;
|
|
21
|
+
--vaadin-avatar-size: 2.75rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:host([theme~='small']) {
|
|
25
|
+
--vaadin-avatar-group-overlap: 6px;
|
|
26
|
+
--vaadin-avatar-group-overlap-border: 2px;
|
|
27
|
+
--vaadin-avatar-size: 1.875rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:host([theme~='xsmall']) {
|
|
31
|
+
--vaadin-avatar-group-overlap: 4px;
|
|
32
|
+
--vaadin-avatar-group-overlap-border: 2px;
|
|
33
|
+
--vaadin-avatar-size: 1.625rem;
|
|
34
|
+
}
|
|
35
|
+
`,
|
|
36
|
+
{ moduleId: 'material-avatar-group' },
|
|
37
|
+
);
|
|
38
|
+
|
|
5
39
|
const avatarGroupOverlay = css`
|
|
6
40
|
[part='overlay'] {
|
|
7
41
|
outline: none;
|
package/web-types.json
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/avatar-group",
|
|
4
|
+
"version": "23.2.0-alpha4",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
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.2.0-alpha4/#/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/ds/customization/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.2.0-alpha4/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha4/#/elements/vaadin-overlay).",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "max-items-visible",
|
|
15
|
+
"description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"number",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "theme",
|
|
26
|
+
"description": "The theme variants to apply to the component.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"js": {
|
|
37
|
+
"properties": [
|
|
38
|
+
{
|
|
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.2.0-alpha4/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha4/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha4/#/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
|
+
"value": {
|
|
42
|
+
"type": [
|
|
43
|
+
"Array.<AvatarGroupItem>",
|
|
44
|
+
"undefined"
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"name": "maxItemsVisible",
|
|
50
|
+
"description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
|
|
51
|
+
"value": {
|
|
52
|
+
"type": [
|
|
53
|
+
"number",
|
|
54
|
+
"null",
|
|
55
|
+
"undefined"
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
{
|
|
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 title.\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
|
+
"value": {
|
|
63
|
+
"type": [
|
|
64
|
+
"AvatarGroupI18n"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
],
|
|
69
|
+
"events": []
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/avatar-group",
|
|
4
|
+
"version": "23.2.0-alpha4",
|
|
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-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.2.0-alpha4/#/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/ds/customization/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.2.0-alpha4/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha4/#/elements/vaadin-overlay).",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
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.2.0-alpha4/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha4/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha4/#/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
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": ".maxItemsVisible",
|
|
31
|
+
"description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
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 title.\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
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|