edit title

src/components/IssueDate.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  date?: string | null
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ changed: [date: string] }>()
+
+const editing = ref(false)
+const draft = ref<Date | null>(props.date ? new Date(props.date) : null)
+
+const formatted = () => {
+  if (!props.date) return 'click to add due date'
+  return new Date(props.date).toLocaleDateString('ru-RU')
+}
+
+const startEdit = () => {
+  draft.value = props.date ? new Date(props.date) : null
+  editing.value = true
+}
+
+const save = () => {
+  if (!draft.value) return
+  emit('changed', draft.value.toISOString())
+  editing.value = false
+}
+
+const cancel = () => {
+  draft.value = props.date ? new Date(props.date) : null
+  editing.value = false
+}
+</script>
+
+<template>
+  <div class="issue-due-date">
+    <template v-if="!editing">
+      <v-sheet class="pa-4 cursor-pointer due-date-sheet" @click="startEdit">
+        {{ formatted() }}
+      </v-sheet>
+    </template>
+
+    <template v-else>
+      <v-date-input 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">
+.due-date-sheet:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.06);
+}
+</style>