多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

50 lines
1.3 KiB

<script lang="ts" setup>
import type { WorkspaceType } from 'nocodb-sdk'
import { isColorDark, stringToColor } from '~/utils/colorsUtils'
const props = defineProps<{
workspace: WorkspaceType | undefined
hideLabel?: boolean
size?: 'small' | 'medium' | 'large'
isRounded?: boolean
}>()
const workspaceColor = computed(() => {
const color = props.workspace ? props.workspace.meta?.color || stringToColor(props.workspace.id!) : undefined
return color || '#0A1433'
})
const size = computed(() => props.size || 'medium')
</script>
<template>
<div
class="flex nc-workspace-avatar"
:class="{
'min-w-4 w-4 h-4 rounded': size === 'small',
'min-w-6 w-6 h-6 rounded-md': size === 'medium',
'min-w-10 w-10 h-10 rounded-lg !text-base': size === 'large',
'!rounded-[50%]': props.isRounded,
}"
:style="{ backgroundColor: workspaceColor }"
>
<template v-if="!props.hideLabel">
<div
class="font-semibold"
:class="{
'text-white': isColorDark(workspaceColor),
'text-black': !isColorDark(workspaceColor),
}"
>
{{ props.workspace?.title?.slice(0, 2) }}
</div>
</template>
</div>
</template>
<style lang="scss" scoped>
.nc-workspace-avatar {
@apply text-xs flex items-center justify-center text-white uppercase;
}
</style>