Ronni Baslund
17ffd95a70
Upgrade both Nuxt apps to Nuxt 4.4.6 (vue-tsc 3, TypeScript 5.6, undici 7) and add a root tsconfig.json to each app. Fix the strict-null / noUncheckedIndexedAccess errors surfaced by Nuxt 4's stricter generated tsconfig and vue-tsc 3. Drop the nuxt-oidc-auth pnpm patch (Nuxt 4 fixes the prepare:types crash natively).
53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
// Initials avatar with a deterministic color drawn from the name. Palette
|
|
// matches the design — desaturated, slate/olive/wine tones that work on the
|
|
// carbon surface without competing with the signal accent.
|
|
|
|
const props = withDefaults(
|
|
defineProps<{ name?: string; size?: number }>(),
|
|
{ name: '?', size: 32 },
|
|
)
|
|
|
|
const palette = ['#3D3D38', '#3F5B47', '#5B4D3F', '#3F4D5B', '#5B3F4D', '#4D5B3F']
|
|
|
|
const initials = computed(() =>
|
|
props.name
|
|
.split(' ')
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((p) => p.charAt(0).toUpperCase())
|
|
.join(''),
|
|
)
|
|
|
|
const color = computed(() => {
|
|
let s = 0
|
|
for (let i = 0; i < props.name.length; i++) s = (s * 31 + props.name.charCodeAt(i)) >>> 0
|
|
return palette[s % palette.length]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="avatar"
|
|
:style="{
|
|
width: size + 'px',
|
|
height: size + 'px',
|
|
background: color,
|
|
fontSize: size * 0.36 + 'px',
|
|
}"
|
|
>{{ initials }}</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.avatar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|