s.esmaeili
1ae87c97b7
- Implement unified design system tokens, 10px radius, and IRANSans typography - Modernize sidebar with Gemini-style collapsed expander, square 1:1 items, and elevated profile flyout - Standardize all modal dialogs with 16px padding, fixed header/footer, 16px medium title, and sticky bottom actions - Refactor DealFormView and CustomFieldsSection with standard UiField, UiInput, and UiSelect components - Add draggable bottom-left QuickCreate floating action button
60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { personInitials } from '@/lib/person-insights';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
name?: string | null;
|
|
src?: string | null;
|
|
size?: number;
|
|
}>(),
|
|
{
|
|
name: '',
|
|
src: '/brand/user-avatar.png',
|
|
size: 28,
|
|
},
|
|
);
|
|
|
|
const initials = computed(() => personInitials(props.name));
|
|
const failed = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<span class="user-avatar" :style="{ width: `${size}px`, height: `${size}px` }" :title="name || undefined">
|
|
<img
|
|
v-if="src && !failed"
|
|
:src="src"
|
|
:alt="name || 'آواتار'"
|
|
@error="failed = true"
|
|
/>
|
|
<em v-else>{{ initials }}</em>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.user-avatar {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
background: linear-gradient(145deg, #5eead4, #0f766e);
|
|
box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccfbf1;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
em {
|
|
font-style: normal;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 0.62rem;
|
|
line-height: 1;
|
|
}
|
|
</style>
|