113 lines
4.0 KiB
TypeScript
113 lines
4.0 KiB
TypeScript
import { computed } from 'vue'
|
|
import type { Ref } from 'vue'
|
|
import classNames from 'classnames'
|
|
import type { AvatarSize, AvatarStatus, AvatarStatusPosition, AvatarType, avatarDotIndicatorPositionClasses } from '@/components/Avatar/types'
|
|
|
|
const avatarSizeClasses: Record<AvatarSize, string> = {
|
|
xs: 'w-6 h-6',
|
|
sm: 'w-8 h-8',
|
|
md: 'w-10 h-10',
|
|
lg: 'w-20 h-20',
|
|
xl: 'w-36 h-36',
|
|
}
|
|
const avatarTypeClasses: Record<AvatarType, string> = {
|
|
default: 'rounded',
|
|
rounded: 'rounded-full',
|
|
}
|
|
const avatarBorderedClasses = 'ring-2 ring-gray-300 dark:ring-gray-500 p-1'
|
|
|
|
const avatarStatusDotDefaultClasses = 'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800'
|
|
const avatarStatusDotClasses: Record<AvatarStatus, string> = {
|
|
away: 'bg-gray-400',
|
|
busy: 'bg-yellow-400',
|
|
offline: 'bg-red-400',
|
|
online: 'bg-green-400',
|
|
}
|
|
const avatarStatusDotPositionClasses: Record<avatarDotIndicatorPositionClasses, string> = {
|
|
'top-right-rounded': 'top-0 -right-0.5',
|
|
'top-right-default': '-top-1.5 -right-1.5',
|
|
'top-left-rounded': 'top-0 left-0',
|
|
'top-left-default': 'top-0 left-0 transform -translate-y-1/2 -translate-x-1/2',
|
|
'bottom-right-rounded': 'bottom-0 -right-0.5',
|
|
'bottom-right-default': 'bottom-0 -right-1.5 translate-y-1/2',
|
|
'bottom-left-rounded': 'bottom-0 left-0',
|
|
'bottom-left-default': '-bottom-1.5 left-0 transform -translate-x-1/2 ',
|
|
}
|
|
|
|
const avatarPlaceholderDefaultClasses = 'absolute w-auto h-auto text-gray-400'
|
|
const avatarPlaceholderWrapperDefaultClasses = 'inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600'
|
|
const avatarPlaceholderInitialsDefaultClasses = 'font-medium text-gray-600 dark:text-gray-300'
|
|
const avatarPlaceholderSizes = {
|
|
xs: 'bottom-0',
|
|
sm: 'bottom-0',
|
|
md: '-bottom-1',
|
|
lg: '-bottom-2',
|
|
xl: '-bottom-4',
|
|
}
|
|
|
|
export type UseAvatarClassesProps = {
|
|
status: Ref<AvatarStatus>
|
|
bordered: Ref<boolean>
|
|
img: Ref<string>
|
|
alt: Ref<string>
|
|
rounded: Ref<boolean>
|
|
size: Ref<AvatarSize>
|
|
stacked: Ref<boolean>
|
|
statusPosition: Ref<AvatarStatusPosition>
|
|
}
|
|
|
|
export function useAvatarClasses(props: UseAvatarClassesProps): {
|
|
avatarClasses: Ref<string>
|
|
avatarDotClasses: Ref<string>
|
|
avatarPlaceholderClasses: Ref<string>
|
|
avatarPlaceholderWrapperClasses: Ref<string>
|
|
avatarPlaceholderInitialsClasses: Ref<string>
|
|
} {
|
|
|
|
const avatarClasses = computed<string>(() => {
|
|
return classNames(
|
|
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<string>(() => {
|
|
const avatarType = `${props.statusPosition.value}-${props.rounded.value ? 'rounded' : 'default'}`
|
|
return classNames(
|
|
avatarStatusDotDefaultClasses,
|
|
avatarStatusDotClasses[props.status.value],
|
|
avatarStatusDotPositionClasses[avatarType as avatarDotIndicatorPositionClasses],
|
|
)
|
|
})
|
|
const avatarPlaceholderClasses = computed<string>(() => {
|
|
return classNames(
|
|
avatarPlaceholderDefaultClasses,
|
|
avatarPlaceholderSizes[props.size.value],
|
|
)
|
|
})
|
|
const avatarPlaceholderWrapperClasses = computed<string>(() => {
|
|
return classNames(
|
|
avatarPlaceholderWrapperDefaultClasses,
|
|
avatarSizeClasses[props.size.value],
|
|
avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
|
|
)
|
|
})
|
|
const avatarPlaceholderInitialsClasses = computed<string>(() => {
|
|
return classNames(
|
|
avatarPlaceholderInitialsDefaultClasses,
|
|
)
|
|
})
|
|
// TODO: Avatar Initials
|
|
|
|
return {
|
|
avatarClasses,
|
|
avatarDotClasses,
|
|
avatarPlaceholderClasses,
|
|
avatarPlaceholderWrapperClasses,
|
|
avatarPlaceholderInitialsClasses,
|
|
}
|
|
}
|
|
|
|
|