diff --git a/docs/content/3.components/avatar-group.md b/docs/content/3.components/avatar-group.md index 0180c13b..946122ea 100644 --- a/docs/content/3.components/avatar-group.md +++ b/docs/content/3.components/avatar-group.md @@ -9,7 +9,58 @@ links: ## Usage -## Examples +Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them. + +::component-code +--- +slots: + default: | + + + +--- +:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"} +:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"} +:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"} +:: + +### Size + +Use the `size` prop to change the size of all the avatars. + +::component-code +--- +props: + size: md +slots: + default: | + + + +--- +:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"} +:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"} +:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"} +:: + +### Max + +Use the `max` prop to limit the number of avatars displayed. The rest will be displayed as a `+X` avatar. + +::component-code +--- +props: + max: 2 +slots: + default: > + + + +--- +:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"} +:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"} +:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"} +:: ## API diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index 2760340c..eff74dc2 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -119,6 +119,7 @@ export default defineNuxtConfig({ const globals = components.filter(c => [ 'UAlert', 'UAvatar', + 'UAvatarGroup', 'UBadge', 'UButton', 'UIcon', diff --git a/playground/app/pages/components/avatar.vue b/playground/app/pages/components/avatar.vue index 27be4325..c67b8893 100644 --- a/playground/app/pages/components/avatar.vue +++ b/playground/app/pages/components/avatar.vue @@ -20,19 +20,19 @@ const sizes = Object.keys(theme.variants.size) as Array
- + - - + +
- + - - + +
diff --git a/test/components/AvatarGroup.spec.ts b/test/components/AvatarGroup.spec.ts index 36a265a7..0680f00e 100644 --- a/test/components/AvatarGroup.spec.ts +++ b/test/components/AvatarGroup.spec.ts @@ -12,8 +12,8 @@ const AvatarGroupWrapper = defineComponent({ }, template: ` - - + + ` }) diff --git a/test/components/__snapshots__/AvatarGroup.spec.ts.snap b/test/components/__snapshots__/AvatarGroup.spec.ts.snap index 650c50ce..c1fc298e 100644 --- a/test/components/__snapshots__/AvatarGroup.spec.ts.snap +++ b/test/components/__snapshots__/AvatarGroup.spec.ts.snap @@ -1,77 +1,77 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`AvatarGroup > renders with as correctly 1`] = `"sAb"`; +exports[`AvatarGroup > renders with as correctly 1`] = `"nrb"`; exports[`AvatarGroup > renders with class correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with default slot correctly 1`] = ` "
- sAb + nrb
" `; -exports[`AvatarGroup > renders with max correctly 1`] = `"
+1Ab
"`; +exports[`AvatarGroup > renders with max correctly 1`] = `"
+1rb
"`; exports[`AvatarGroup > renders with size 2xl correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size 2xs correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size 3xl correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size 3xs correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size lg correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size md correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size sm correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size xl correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with size xs correctly 1`] = ` "
- sAb + nrb
" `; exports[`AvatarGroup > renders with ui correctly 1`] = ` "
- sAb + nrb
" `;