92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<textarea
|
|
ref="textareaRef"
|
|
v-show="active"
|
|
:class="[
|
|
'w-full resize-none overflow-hidden px-3 py-2 outline-none',
|
|
'rounded-lg border',
|
|
'border-[var(--p-form-field-border-color)]',
|
|
'focus:border-[var(--p-form-field-focus-border-color)]',
|
|
'relative z-10',
|
|
]"
|
|
v-model="innerValue"
|
|
@input="resizeTextarea"
|
|
@blur="exitEditMode"
|
|
></textarea>
|
|
|
|
<div v-show="!active">
|
|
<div v-show="editable" class="flex items-center gap-2 text-gray-600">
|
|
<i class="pi pi-info-circle"></i>
|
|
<span>
|
|
{{ $t('tapToChange') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div
|
|
v-if="renderedDescription"
|
|
class="markdown-it"
|
|
v-html="renderedDescription"
|
|
></div>
|
|
<div v-else class="flex flex-col items-center gap-2 py-5">
|
|
<i class="pi pi-info-circle text-lg"></i>
|
|
<div>no description</div>
|
|
</div>
|
|
<div
|
|
v-show="editable"
|
|
class="absolute left-0 top-0 h-full w-full cursor-pointer"
|
|
@click="entryEditMode"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useModelDescription } from 'hooks/model'
|
|
import { nextTick, ref, watch } from 'vue'
|
|
|
|
const editable = defineModel<boolean>('editable')
|
|
const active = ref(false)
|
|
|
|
const { description, renderedDescription } = useModelDescription()
|
|
|
|
const textareaRef = ref<HTMLTextAreaElement>()
|
|
const innerValue = ref<string>()
|
|
|
|
watch(
|
|
description,
|
|
(value) => {
|
|
innerValue.value = value
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
const resizeTextarea = () => {
|
|
const textarea = textareaRef.value!
|
|
|
|
textarea.style.height = 'auto'
|
|
const scrollHeight = textarea.scrollHeight
|
|
|
|
textarea.style.height = scrollHeight + 'px'
|
|
|
|
textarea.scrollIntoView({
|
|
block: 'nearest',
|
|
inline: 'nearest',
|
|
})
|
|
}
|
|
|
|
const entryEditMode = async () => {
|
|
active.value = true
|
|
await nextTick()
|
|
resizeTextarea()
|
|
textareaRef.value!.focus()
|
|
}
|
|
|
|
const exitEditMode = () => {
|
|
description.value = innerValue.value!
|
|
active.value = false
|
|
}
|
|
</script>
|