wip

src/components/IssueTitle.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  text?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ changed: [text: string] }>()
+
+const editing = ref(false)
+const draft = ref(props.text ?? '')
+
+const startEdit = () => {
+  draft.value = props.text ?? ''
+  editing.value = true
+}
+
+const save = () => {
+  emit('changed', draft.value)
+  editing.value = false
+}
+
+const cancel = () => {
+  draft.value = props.text ?? ''
+  editing.value = false
+}
+</script>
+
+<template>
+  <div class="issue-title">
+    <template v-if="!editing">
+      <v-sheet class="pa-4 cursor-pointer title-sheet" @click="startEdit">
+        {{ text ?? 'click to add title' }}
+      </v-sheet>
+    </template>
+
+    <template v-else>
+      <v-text-field autofocus class="mb-1" hide-details v-model="draft" variant="outlined" />
+
+      <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="flat" text="Save" @click="save" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.title-sheet:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.06);
+}
+</style>