51 lines
1.0 KiB
Vue
51 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
mode: 'edit' | 'view'
|
|
description?: string | null
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:description': [description: string | null]
|
|
}>()
|
|
|
|
const descriptionValue = computed({
|
|
get: () => props.description ?? '',
|
|
set: (value) => emit('update:description', value || null)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="descriptionValue || mode === 'edit'" class="event-editor-section">
|
|
<!-- Read-only view -->
|
|
<div v-if="mode === 'view'" class="mb-4">
|
|
<div class="mb-2 pa-2 white-space-pre-wrap">{{ descriptionValue || 'No description' }}</div>
|
|
</div>
|
|
|
|
<!-- Edit view -->
|
|
<div v-else>
|
|
<v-textarea
|
|
v-model="descriptionValue"
|
|
label="Description"
|
|
variant="outlined"
|
|
density="compact"
|
|
rows="3"
|
|
auto-grow
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.event-editor-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.white-space-pre-wrap {
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|