Feat/create avatar component

packages/components/avatar/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@puik/utils'
+
+import Avatar from './src/avatar.vue'
+
+export const PuikAvatar = withInstall(Avatar)
+export default PuikAvatar
+
+export * from './src/avatar'

packages/components/avatar/src/avatar.ts

@@ -0,0 +1,78 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type Avatar from './avatar.vue'
+
+export const avatarColors = [
+  'neutral',
+  'blue',
+  'yellow',
+  'green',
+  'purple',
+] as const
+export type PuikAvatarBgColor = (typeof avatarColors)[number]
+
+export const avatarModes = ['primary', 'reverse'] as const
+export type PuikAvatarMode = (typeof avatarModes)[number]
+
+export const avatarSizes = ['small', 'medium', 'large', 'jumbo'] as const
+export type PuikAvatarSize = (typeof avatarSizes)[number]
+
+export const avatarTypes = ['photo', 'icon', 'initials'] as const
+export type PuikAvatarType = (typeof avatarTypes)[number]
+
+export const avatarProps = buildProps({
+  id: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  color: {
+    type: String as PropType<PuikAvatarBgColor>,
+    required: false,
+    default: 'neutral',
+  },
+  mode: {
+    type: String as PropType<PuikAvatarMode>,
+    required: false,
+    default: 'primary',
+  },
+  size: {
+    type: String as PropType<PuikAvatarSize>,
+    required: false,
+    default: 'medium',
+  },
+  type: {
+    type: String as PropType<PuikAvatarType>,
+    required: false,
+    default: 'initials',
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  src: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  alt: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  firstname: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  lastname: {
+    type: String,
+    required: false,
+    default: '',
+  },
+} as const)
+
+export type AvatarProps = ExtractPropTypes<typeof avatarProps>
+
+export type AvatarInstance = InstanceType<typeof Avatar>

packages/components/avatar/src/avatar.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    :id="id"
+    :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode} puik-avatar--${color}`"
+  >
+    <img v-if="src && type == 'photo'" :src="src" :alt="alt" />
+    <puik-icon
+      v-else-if="icon && type == 'icon'"
+      :icon="icon"
+      :font-size="iconFontSize"
+      :color="mode === 'primary' ? 'white' : 'black'"
+    />
+    <div v-else :class="`puik-avatar_initials puik-avatar_initials--${size}`">
+      {{ initials }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import PuikIcon from '../../icon'
+import { avatarProps } from './avatar'
+defineOptions({
+  name: 'PuikAvatar',
+})
+
+const props = defineProps(avatarProps)
+const iconFontSize = ref()
+const initials = ref('PS')
+
+props.size === 'small'
+  ? (iconFontSize.value = '1rem')
+  : props.size === 'medium'
+  ? (iconFontSize.value = '1.5rem')
+  : props.size === 'large'
+  ? (iconFontSize.value = '2rem')
+  : props.size === 'jumbo'
+  ? (iconFontSize.value = '2.8rem')
+  : '1rem'
+
+props.firstname !== '' && props.lastname !== ''
+  ? (initials.value =
+      props.firstname[0]?.toUpperCase() + props.lastname[0]?.toUpperCase())
+  : props.firstname.length > 1 && !props.lastname
+  ? (initials.value =
+      props.firstname[0]?.toUpperCase() + props.firstname[1]?.toUpperCase())
+  : props.lastname.length > 1 && !props.firstname
+  ? (initials.value =
+      props.lastname[0]?.toUpperCase() + props.lastname[1]?.toUpperCase())
+  : (initials.value = 'PS')
+</script>