init

src/components/IssueContent.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  value?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ changed: [value: string] }>()
+
+const editing = ref(false)
+const draft = ref(props.value ?? '')
+
+const startEdit = () => {
+  draft.value = props.value ?? ''
+  editing.value = true
+}
+
+const save = () => {
+  emit('changed', draft.value)
+  editing.value = false
+}
+
+const cancel = () => {
+  draft.value = props.value ?? ''
+  editing.value = false
+}
+</script>
+
+<template>
+  <div class="issue-content">
+    <template v-if="!editing">
+      <v-sheet class="pa-2 cursor-pointer content-sheet" @click="startEdit">
+        {{ value ?? 'click to add content' }}
+      </v-sheet>
+    </template>
+
+    <template v-else>
+      <v-textarea class="mb-1" hide-details v-model="draft" variant="outlined" auto-grow rows="4" />
+
+      <div class="d-flex justify-end ga-1">
+        <v-btn density="compact" variant="text" text="Cancel" @click="cancel" />
+        <v-btn density="compact" color="primary" variant="tonal" text="Save" @click="save" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.content-sheet:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.06);
+}
+</style>