Avatar

An Avatar component useful for User Profile Pictures, support uploading new pictures, or display an existing one.

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code

vue

<script setup lang="ts">
import { Avatar } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref(null)
const value2 = ref(null)
</script>

<template>
  <PreviewWrapper>
    <!-- Regular -->
    <div class="text-center">
      <Avatar
        v-model="value"
        feedback="Im useful helper out here, choose wisely"
        placeholder="Elon Musk"
      />
    </div>

    <div class="text-center">
      <Avatar
        v-model="value2"
        placeholder="Type to clear errors"
        errors="Sorry for this name is already taken"
        feedback="I only show when i dont have errors"
      />
    </div>
  </PreviewWrapper>
</template>

Props 📥

Props available for this component extending the default variant & global props.

Prop	Description	Accepted Values	Default
`modelValue`	The value for the element	`Any`	`undefined`
`currentPhotoUrl`	Current Photo URL	`[String,undefined]`	`undefined`
`currentPhotoAltTag`	Alternative Text for the photo	`String`	`'avatar'`
`avatarInitials`	Short Initials for the Avatar	`String`	`'avatar'`
`uploadButtonLabel`	Label for the default button	`String`	`'avatar'`
`resetButtonLabel`	Label for the reset button	`String`	`'avatar'`
`uploadButtonVariant`	Variant for the upload button	`[String,undefined]`	`undefined`
`resetButtonVariant`	Variant for the reset button	`[String,undefined]`	`'undefined'`

Slots 🧬

Current slots available for this component are the following:

Slot `photo`

Slot dedicated to show the current photo preview, binds all the props passed to the component, plus the following:

Attribute	Description	Type
`triggerFileUploadAction`	Function to trigger upload	`Function`

Slot `preview`

Slot dedicated to showing the preview of the new uploaded photo, binds all the props passed to the component, plus the following:

Attribute	Description	Type
`photoPreview`	Base64 enconded blob	`[Blog, String]`

Slot `uploadButton`

Slot to override the default upload button next to the profile photo

Attribute	Description	Type
`triggerFileUploadAction`	Function to trigger upload	`Function`
`photoPreview`	Base64 enconded blob	`[Blog, String]`

Slot `resetButton`

Slot to override the default reset button next to the profile photo and when a preview is in place

Attribute	Description	Type
`resetPhoto`	Function to reset the upload	`Function`
`photoPreview`	Base64 enconded blob	`[Blog, String]`

Slot `errors`

Slot that holds the error messages when the component errors prop is defined.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Slot `feedback`

Slot that holds the feedback messages when the component feedback prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Events 🚇

Here you may find the events emitted by this component.

Event	Description	Value
`open`	Slideover was opened	`Boolean`
`previewUpdated`	Preview was updated	`Blob`
`previewReset`	Preview was removed/reset	`true`
`uploadTriggered`	Upload button pressed	`true`

Avatar #

Preview & Playground 🖼️ #

Props 📥 #

Slots 🧬 #

Slot photo #

Slot preview #

Slot uploadButton #

Slot resetButton #

Slot errors #

Slot feedback #

Events 🚇 #