72 lines
1.7 KiB
Vue
72 lines
1.7 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-0' : 'px-0'"
|
|
class="cursor-pointer d-flex align-center ga-1"
|
|
@click="startEdit"
|
|
>
|
|
<div class="text-uppercase text-title-large">
|
|
{{ text ?? 'click to write text' }}
|
|
</div>
|
|
<v-icon v-if="isHovering" icon="mdi-pencil" size="small" />
|
|
</v-sheet>
|
|
</v-hover>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="d-flex ga-1 align-center">
|
|
<v-text-field autofocus class="mb-1" hide-details v-model="draft" variant="outlined" @keyup.enter="save" />
|
|
|
|
<v-btn density="compact" icon variant="text" @click="cancel">
|
|
<v-icon icon="mdi-cancel" />
|
|
</v-btn>
|
|
<v-btn density="compact" icon color="primary" variant="flat" @click="save">
|
|
<v-icon icon="mdi-check" />
|
|
</v-btn>
|
|
</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>
|