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,93 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type Avatar from './avatar.vue'
+
+export enum PuikAvatarMode {
+  PRIMARY = 'primary',
+  REVERSE = 'reverse',
+}
+export const AVATAR_MODE = {
+  primary: 'white',
+  reverse: 'black',
+}
+
+export enum PuikAvatarSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  JUMBO = 'jumbo',
+}
+export const ICONS_FONTSIZE = {
+  small: '1rem',
+  medium: '1.5rem',
+  large: '2rem',
+  jumbo: '2.8rem',
+}
+
+export enum PuikAvatarType {
+  PHOTO = 'photo',
+  ICON = 'icon',
+  INITIALS = 'initials',
+}
+
+export const avatarProps = buildProps({
+  id: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  mode: {
+    type: String as PropType<PuikAvatarMode>,
+    required: false,
+    default: PuikAvatarMode.PRIMARY,
+  },
+  size: {
+    type: String as PropType<PuikAvatarSize>,
+    required: false,
+    default: PuikAvatarSize.MEDIUM,
+  },
+  type: {
+    type: String as PropType<PuikAvatarType>,
+    required: false,
+    default: PuikAvatarType.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: '',
+  },
+  singleInitial: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+} as const)
+
+export type AvatarProps = ExtractPropTypes<typeof avatarProps>
+
+export type AvatarInstance = InstanceType<typeof Avatar>

packages/components/avatar/src/avatar.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    :id="id"
+    :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode}`"
+  >
+    <img
+      v-if="src && type == PuikAvatarType.PHOTO"
+      :src="src"
+      :alt="alt"
+      :data-test="dataTest != undefined ? `image-${dataTest}` : undefined"
+    />
+    <puik-icon
+      v-else-if="icon && type == PuikAvatarType.ICON"
+      :icon="icon"
+      :font-size="ICONS_FONTSIZE[props.size]"
+      :color="AVATAR_MODE[props.mode]"
+      :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined"
+    />
+    <div
+      v-else
+      :key="initials"
+      :class="`puik-avatar_initials puik-avatar_initials--${size}`"
+      :data-test="dataTest != undefined ? `initials-${dataTest}` : undefined"
+    >
+      {{ initials }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getInitialLetter } from '@puik/utils'
+import PuikIcon from '../../icon'
+import {
+  avatarProps,
+  PuikAvatarType,
+  ICONS_FONTSIZE,
+  AVATAR_MODE,
+} from './avatar'
+
+defineOptions({
+  name: 'PuikAvatar',
+})
+
+const props = defineProps(avatarProps)
+
+const initials = computed(() => {
+  const firstInitial = props.firstname
+    ? getInitialLetter(props.firstname, 0)
+    : ''
+
+  const lastInitial = props.lastname ? getInitialLetter(props.lastname, 0) : ''
+
+  const initialsValue = props.singleInitial
+    ? firstInitial || lastInitial || 'P'
+    : firstInitial && lastInitial
+    ? firstInitial + lastInitial
+    : firstInitial && props.firstname.length > 1
+    ? firstInitial + getInitialLetter(props.firstname, 1)
+    : lastInitial && props.lastname.length > 1
+    ? lastInitial + getInitialLetter(props.lastname, 1)
+    : 'PS'
+
+  return initialsValue
+})
+</script>