67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<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-hover #default="{ isHovering, props }">
|
|
<v-sheet
|
|
v-bind="props"
|
|
:class="isHovering ? 'px-3' : 'px-0'"
|
|
class="py-1 cursor-pointer title-sheet"
|
|
@click="startEdit"
|
|
>
|
|
<div class="text-uppercase text-title-large">
|
|
{{ text ?? 'click to write text' }}
|
|
</div>
|
|
</v-sheet>
|
|
</v-hover>
|
|
</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" prepend-icon="mdi-cancel" variant="text" text="Cancel" @click="cancel" />
|
|
<v-btn density="compact" prepend-icon="mdi-check" 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);
|
|
}
|
|
|
|
.v-sheet {
|
|
transition: padding 0.2s ease-in-out;
|
|
}
|
|
</style>
|