72 lines
1.5 KiB
Vue
72 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-content">
|
|
<template v-if="!editing">
|
|
|
|
<v-sheet v-bind="props" border class="cursor-pointer d-flex ga-1 pa-4" @click="startEdit">
|
|
<div class="content-sheet">
|
|
{{ text ?? 'click to add content' }}
|
|
</div>
|
|
</v-sheet>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
<v-textarea
|
|
autofocus
|
|
class="mb-1"
|
|
hide-details
|
|
v-model="draft"
|
|
variant="outlined"
|
|
auto-grow
|
|
rows="4"
|
|
max-rows="15"
|
|
/>
|
|
|
|
<div class="d-flex justify-end ga-1">
|
|
<v-btn density="compact" prepend-icon="mdi-cancel" text="Cancel" variant="text" @click="cancel" />
|
|
<v-btn density="compact" prepend-icon="mdi-check" color="primary" variant="flat" @click="save" text="Save" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.content-sheet {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.v-sheet {
|
|
transition: padding 0.2s ease-in-out;
|
|
}
|
|
</style>
|