@inlaylab/opaline-vue 1.1.0 → 1.1.1

package/README.md

@@ -19,6 +19,12 @@ import { clay } from '@inlaylab/opaline/clay'
 
 Props: `seed`, `look`, `size`, `src`, `alt`, and every core option. If you mount several Vue apps on one page, give each `app.config.idPrefix` so their gradient IDs cannot clash.
 
+Groups: `AvatarGroup` overlaps avatars and adds a `+N` chip past `max`.
+
+```vue
+<AvatarGroup :look="clay" :members="[user.email, { seed: 'grace', src, alt: 'Grace' }]" :max="4" />
+```
+
 Same seed, same avatar: from 1.0, the same seed and options give a byte-identical SVG in every 1.x release.
 
 [Playground and docs](https://inlaylab.github.io/Opaline/) · [GitHub](https://github.com/Inlaylab/Opaline) · MIT for code and art.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AuraOptions, ClayOptions, InitialsOptions, Style } from "@inlaylab/opaline";
+import { AuraOptions, ClayOptions, GroupMember, InitialsOptions, Style } from "@inlaylab/opaline";
 import { PropType } from "vue";
 type AvatarProps = {
   seed: string | number | null | undefined;
@@ -43,7 +43,51 @@ export declare const Avatar: import("vue").DefineComponent<import("vue").Extract
   src: StringConstructor;
   alt: StringConstructor;
 }>> & Readonly<{}>, {
+  size: number;
   seed: string | number | null | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type AvatarGroupProps = Omit<AvatarProps, 'seed' | 'src' | 'alt'> & {
+  /** Seeds, or `{ seed, src, alt }` for a photo and an accessible name. */
+  members: readonly GroupMember[];
+  /** Show at most this many avatars, then a `+N` chip. Shows everyone when unset. */
+  max?: number;
+  /** Accessible name for the whole group, e.g. "Project members". */
+  alt?: string;
+};
+/** Overlapping avatars with a `+N` chip. Style options (`palette`, `shape`, …) reach every avatar. */
+export declare const AvatarGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  members: {
+    type: PropType<readonly GroupMember[]>;
+    required: true;
+  };
+  look: {
+    type: PropType<Style<any>>;
+    required: true;
+  };
+  size: {
+    type: NumberConstructor;
+    default: number;
+  };
+  max: NumberConstructor;
+  alt: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  members: {
+    type: PropType<readonly GroupMember[]>;
+    required: true;
+  };
+  look: {
+    type: PropType<Style<any>>;
+    required: true;
+  };
+  size: {
+    type: NumberConstructor;
+    default: number;
+  };
+  max: NumberConstructor;
+  alt: StringConstructor;
+}>> & Readonly<{}>, {
   size: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export type { AvatarProps };
+export type { AvatarGroupProps, AvatarProps };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createAvatar } from "@inlaylab/opaline";
+import { avatarGroup, createAvatar } from "@inlaylab/opaline";
 import { computed, defineComponent, h, onMounted, ref, useId } from "vue";
 // src/photo.ts
 const STYLE = {
@@ -85,4 +85,57 @@ const Avatar = defineComponent({
 		}) : null]);
 	}
 });
-export { Avatar };
+// src/group.ts
+/** Overlapping avatars with a `+N` chip. Style options (`palette`, `shape`, …) reach every avatar. */
+const AvatarGroup = defineComponent({
+	name: "OpalineAvatarGroup",
+	inheritAttrs: false,
+	props: {
+		members: {
+			type: Array,
+			required: true
+		},
+		look: {
+			type: Object,
+			required: true
+		},
+		size: {
+			type: Number,
+			default: 40
+		},
+		max: Number,
+		alt: String
+	},
+	setup(props, { attrs }) {
+		return () => {
+			const g = avatarGroup(props.members, {
+				max: props.max,
+				size: props.size,
+				shape: attrs.shape
+			});
+			return h("span", {
+				"data-opaline-group": "",
+				role: "group",
+				"aria-label": props.alt || void 0,
+				style: g.css.root
+			}, [...g.shown.map((m, i) => h("span", {
+				key: i,
+				"data-opaline-member": "",
+				style: i ? g.css.member : g.css.first
+			}, [h(Avatar, {
+				...attrs,
+				look: props.look,
+				size: props.size,
+				seed: m.seed,
+				src: m.src,
+				alt: m.alt
+			})])), g.rest ? h("span", {
+				"data-opaline-more": "",
+				role: "img",
+				"aria-label": `${g.rest} more`,
+				style: g.css.more
+			}, `+${g.rest}`) : null]);
+		};
+	}
+});
+export { Avatar, AvatarGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inlaylab/opaline-vue",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Seeded avatars for Vue 3: an SSR-safe Avatar component.",
   "keywords": [
     "avatar",
@@ -44,7 +44,7 @@
     "vue": ">=3.5"
   },
   "dependencies": {
-    "@inlaylab/opaline": "1.1.0"
+    "@inlaylab/opaline": "1.1.1"
   },
   "devDependencies": {
     "@inlaylab/opaline-contract": "0.0.0",