Initial commit

src/components/editors/EventEditorDescription.vue

@@ -0,0 +1,51 @@
+<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">
+    <div class="text-subtitle-1 mb-2">Description</div>
+    <!-- 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>