diff --git a/docs/components/avatar/avatar.md b/docs/components/avatar/avatar.md index 2ef1033..1294e57 100644 --- a/docs/components/avatar/avatar.md +++ b/docs/components/avatar/avatar.md @@ -4,6 +4,9 @@ import AvatarBorderedExample from './examples/AvatarBorderedExample.vue' import AvatarDotIndicatorExample from './examples/AvatarDotIndicatorExample.vue' import AvatarSizeExample from './examples/AvatarSizeExample.vue' import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue' +import AvatarAlternativeTextExample from './examples/AvatarAlternativeTextExample.vue' +import StackedAvatarsExample from './examples/StackedAvatarsExample.vue' + # Avatar Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes @@ -100,3 +103,33 @@ import { Avatar } from 'flowbite-vue' ``` +## Alternative text + + + +## Stacked avatars + + + +```vue + + + +``` diff --git a/docs/components/avatar/examples/AvatarAlternativeTextExample.vue b/docs/components/avatar/examples/AvatarAlternativeTextExample.vue new file mode 100644 index 0000000..3b32d2a --- /dev/null +++ b/docs/components/avatar/examples/AvatarAlternativeTextExample.vue @@ -0,0 +1,8 @@ + + diff --git a/docs/components/avatar/examples/StackedAvatarsExample.vue b/docs/components/avatar/examples/StackedAvatarsExample.vue new file mode 100644 index 0000000..60f25f6 --- /dev/null +++ b/docs/components/avatar/examples/StackedAvatarsExample.vue @@ -0,0 +1,21 @@ + + diff --git a/src/components/Avatar/StackedAvatars.vue b/src/components/Avatar/StackedAvatars.vue new file mode 100644 index 0000000..ef4c830 --- /dev/null +++ b/src/components/Avatar/StackedAvatars.vue @@ -0,0 +1,5 @@ + diff --git a/src/components/Avatar/StackedAvatarsCounter.vue b/src/components/Avatar/StackedAvatarsCounter.vue new file mode 100644 index 0000000..521b367 --- /dev/null +++ b/src/components/Avatar/StackedAvatarsCounter.vue @@ -0,0 +1,15 @@ + + diff --git a/src/components/Avatar/composables/useAvatarClasses.ts b/src/components/Avatar/composables/useAvatarClasses.ts index 6766ab6..c172c37 100644 --- a/src/components/Avatar/composables/useAvatarClasses.ts +++ b/src/components/Avatar/composables/useAvatarClasses.ts @@ -56,6 +56,7 @@ export function useAvatarClasses(props: UseAvatarClassesProps): { avatarSizeClasses[props.size.value], avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'], props.bordered.value ? avatarBorderedClasses : '', + props.stacked.value ? 'border-2 border-white dark:border-gray-800' : '', ) }) const avatarDotClasses = computed(() => { @@ -67,7 +68,6 @@ export function useAvatarClasses(props: UseAvatarClassesProps): { ) }) // TODO: Placeholder - // TODO: Stacked avatars // TODO: Avatar Initials return { diff --git a/src/index.ts b/src/index.ts index 64d1910..34a6643 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,9 +7,11 @@ export { default as Tab } from './components/Tabs/components/Tab/Tab.vue' export { default as Dropdown } from './components/Dropdown/Dropdown.vue' export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue' export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue' - -export { default as Accordion } from './components/Accordion/Accordion.vue' export { default as Avatar } from './components/Avatar/Avatar.vue' +export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue' +export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue' +export { default as Accordion } from './components/Accordion/Accordion.vue' + export { default as Badge } from './components/Badge/Badge.vue' export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue' export { default as Card } from './components/Card/Card.vue'