@vaadin/avatar-group 23.2.0-dev.8a7678b70 → 23.2.1

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.
Files changed (8) hide show
  1. package/README.md +4 -4
  2. package/package.json +18 -12
  3. package/src/vaadin-avatar-group.d.ts +2 -1
  4. package/src/vaadin-avatar-group.js +3 -3
  5. package/theme/lumo/vaadin-avatar-group-styles.js +0 -8
  6. package/theme/material/vaadin-avatar-group-styles.js +34 -0
  7. package/web-types.json +75 -0
  8. package/web-types.lit.json +48 -0
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A web component for grouping multiple [`<vaadin-avatar>`](https://www.npmjs.com/package/@vaadin/avatar-group) components together.
4
4
 
5
- [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/avatar/#avatar-group)
5
+ [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/avatar/#avatar-group)
6
6
 
7
7
  [![npm version](https://badgen.net/npm/v/@vaadin/avatar-group)](https://www.npmjs.com/package/@vaadin/avatar-group)
8
8
  [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -19,7 +19,7 @@ A web component for grouping multiple [`<vaadin-avatar>`](https://www.npmjs.com/
19
19
  </script>
20
20
  ```
21
21
 
22
- [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar-group/screenshot.png" width="108" alt="Screenshot of vaadin-avatar-group">](https://vaadin.com/docs/latest/ds/components/avatar/#avatar-group)
22
+ [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar-group/screenshot.png" width="108" alt="Screenshot of vaadin-avatar-group">](https://vaadin.com/docs/latest/components/avatar/#avatar-group)
23
23
 
24
24
  ## Installation
25
25
 
@@ -37,7 +37,7 @@ import '@vaadin/avatar-group';
37
37
 
38
38
  ## Themes
39
39
 
40
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
40
+ Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
41
41
  The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/avatar-group/vaadin-avatar-group.js) of the package uses the Lumo theme.
42
42
 
43
43
  To use the Material theme, import the component from the `theme/material` folder:
@@ -60,7 +60,7 @@ import '@vaadin/avatar-group/src/vaadin-avatar-group.js';
60
60
 
61
61
  ## Contributing
62
62
 
63
- Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
63
+ Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
64
64
 
65
65
  ## License
66
66
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/avatar-group",
3
- "version": "23.2.0-dev.8a7678b70",
3
+ "version": "23.2.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -14,7 +14,7 @@
14
14
  "author": "Vaadin Ltd",
15
15
  "homepage": "https://vaadin.com/components",
16
16
  "bugs": {
17
- "url": "https://github.com/vaadin/vaadin-avatar/issues"
17
+ "url": "https://github.com/vaadin/web-components/issues"
18
18
  },
19
19
  "main": "vaadin-avatar-group.js",
20
20
  "module": "vaadin-avatar-group.js",
@@ -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-dev.8a7678b70",
39
- "@vaadin/component-base": "23.2.0-dev.8a7678b70",
40
- "@vaadin/item": "23.2.0-dev.8a7678b70",
41
- "@vaadin/list-box": "23.2.0-dev.8a7678b70",
42
- "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
43
- "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
44
- "@vaadin/vaadin-overlay": "23.2.0-dev.8a7678b70",
45
- "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
40
+ "@vaadin/avatar": "~23.2.1",
41
+ "@vaadin/component-base": "~23.2.1",
42
+ "@vaadin/item": "~23.2.1",
43
+ "@vaadin/list-box": "~23.2.1",
44
+ "@vaadin/vaadin-lumo-styles": "~23.2.1",
45
+ "@vaadin/vaadin-material-styles": "~23.2.1",
46
+ "@vaadin/vaadin-overlay": "~23.2.1",
47
+ "@vaadin/vaadin-themable-mixin": "~23.2.1"
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
- "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
54
+ "web-types": [
55
+ "web-types.json",
56
+ "web-types.lit.json"
57
+ ],
58
+ "gitHead": "a6c314f6927bfd3309fc735eae6c6dc72ab8367a"
53
59
  }
package/src/vaadin-avatar-group.d.ts CHANGED
@@ -53,7 +53,7 @@ export interface AvatarGroupItem {
53
53
  * `container` | The container element
54
54
  * `avatar` | Individual avatars
55
55
  *
56
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
56
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
57
57
  *
58
58
  * ### Internal components
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
 
package/src/vaadin-avatar-group.js CHANGED
@@ -45,7 +45,7 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
45
45
  * `container` | The container element
46
46
  * `avatar` | Individual avatars
47
47
  *
48
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
48
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
49
49
  *
50
50
  * ### Internal components
51
51
  *
@@ -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]) {
@@ -202,6 +201,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
202
201
  * The maximum number of avatars to display. By default, all the avatars are displayed.
203
202
  * When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
204
203
  * a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
204
+ * @attr {number} max-items-visible
205
205
  */
206
206
  maxItemsVisible: {
207
207
  type: Number,
@@ -517,7 +517,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
517
517
  this.__itemsInView = result;
518
518
  }
519
519
 
520
- /** @private **/
520
+ /** @private */
521
521
  __calculateAvatarsFitWidth() {
522
522
  if (!this.shadowRoot || this._avatars.length < MINIMUM_DISPLAYED_AVATARS) {
523
523
  return MINIMUM_DISPLAYED_AVATARS;
package/theme/lumo/vaadin-avatar-group-styles.js CHANGED
@@ -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;
package/theme/material/vaadin-avatar-group-styles.js CHANGED
@@ -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.1",
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.1/#/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.2.1/#/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.1/#/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.1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/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
+ }
package/web-types.lit.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/avatar-group",
4
+ "version": "23.2.1",
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.1/#/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.2.1/#/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.1/#/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.1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/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
+ }