andrewwallacespeckle
c2a95b484f
* New Text Styles. Initial FE2 changes * More fe2 styling classes * Minor update * Minor update * Fix build * More updates for discussion * More styling updates * Minor updates to inputs * More text updates * More font class swapping * Revert dui3 changes * Confirmed Lineheights * Add story files for new text styles * Minor copy changes * Minor typo * andrew/web-1371-misalignment-in-account-dropdown * andrew/web-1374-settings-text-styles-are-not-right * andrew/web-1375-nav-texts-should-be-14px * andrew/web-1376-decrease-size-of-versions-header * andrew/web-1377-version-card-title * semibold>medium * Measure mode * Changes from PR * Tweaked nav menu * Revert prose change. Add prose-sm --------- Co-authored-by: Mike Tasset <mike.tasset@gmail.com>
54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<div :class="classes">
|
|
<img v-if="finalLogo" :src="finalLogo" alt="Function logo" class="h-10 w-10" />
|
|
<span v-else :class="fallbackIconClasses">λ</span>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type { MaybeNullOrUndefined } from '@speckle/shared'
|
|
import { cleanFunctionLogo } from '~/lib/automate/helpers/functions'
|
|
|
|
type Size = 'base' | 'xs'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
logo?: MaybeNullOrUndefined<string>
|
|
size?: Size
|
|
}>(),
|
|
{
|
|
size: 'base'
|
|
}
|
|
)
|
|
|
|
const finalLogo = computed(() => cleanFunctionLogo(props.logo))
|
|
const classes = computed(() => {
|
|
const classParts = [
|
|
'bg-foundation-focus text-primary font-medium rounded-full shrink-0 flex justify-center text-center items-center overflow-hidden select-none'
|
|
]
|
|
|
|
switch (props.size) {
|
|
case 'xs':
|
|
classParts.push('h-4 w-4')
|
|
break
|
|
case 'base':
|
|
default:
|
|
classParts.push('h-10 w-10')
|
|
break
|
|
}
|
|
|
|
return classParts.join(' ')
|
|
})
|
|
|
|
const fallbackIconClasses = computed(() => {
|
|
const classParts: string[] = []
|
|
|
|
switch (props.size) {
|
|
case 'xs':
|
|
classParts.push('text-xs')
|
|
break
|
|
}
|
|
|
|
return classParts.join(' ')
|
|
})
|
|
</script>
|