46 lines
904 B
Vue
46 lines
904 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
mode: 'edit' | 'view'
|
|
label?: string | null
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:label': [label: string | null]
|
|
}>()
|
|
|
|
const labelValue = computed({
|
|
get: () => props.label ?? '',
|
|
set: (value) => emit('update:label', value || null)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="event-editor-section">
|
|
<!-- Read-only view -->
|
|
<div v-if="mode === 'view'" class="mb-4">
|
|
<div class="mb-2 pa-2">{{ labelValue || 'Untitled Event' }}</div>
|
|
</div>
|
|
|
|
<!-- Edit view -->
|
|
<div v-else>
|
|
<v-text-field
|
|
v-model="labelValue"
|
|
label="Title"
|
|
variant="outlined"
|
|
density="compact"
|
|
:rules="[v => !!v || 'Title is required']"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.event-editor-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
</style>
|