mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-17 06:35:14 +08:00
33 lines
1.3 KiB
Vue
33 lines
1.3 KiB
Vue
<template>
|
|
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] min-w-[6rem] items-center gap-1 text-xs group-hover:bg-sn-super-light-grey">
|
|
<template v-if="visible">
|
|
<b class="shrink-0 tw-hidden lg:block">{{ label }}:</b>
|
|
<a v-if="url" :href="url" class="shrink-0 overflow-hidden hover:no-underline">
|
|
<img v-if="avatar" :src="avatar" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
|
|
<StringWithEllipsis class="w-full" :text="value"></StringWithEllipsis>
|
|
</a>
|
|
<div v-else class="grid grid-cols-[auto_1fr] items-center gap-1 overflow-hidden">
|
|
<img v-if="avatar" :src="avatar" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
|
|
<span class="shrink-0 truncate" :title="value">{{ value }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import StringWithEllipsis from '../../../shared/string_with_ellipsis.vue';
|
|
|
|
export default {
|
|
name: 'CellTemplate',
|
|
props: {
|
|
label: { type: String, default: '' },
|
|
value: { type: String, default: '' },
|
|
url: { type: String, default: '' },
|
|
avatar: { type: String, default: '' },
|
|
visible: { type: Boolean, default: true }
|
|
},
|
|
components: {
|
|
StringWithEllipsis
|
|
}
|
|
};
|
|
</script>
|