vadim
f0706432d4
Gitea Actions / Deploy (push) Successful in 29s
sessions fix password change sign-in fix
98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
interface Props {
|
|
text?: string
|
|
/** Shown instead of empty text, so there is still something to click */
|
|
placeholder?: string
|
|
/** Empty (or whitespace-only) text is not saved, the field stays open with an error */
|
|
required?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), { placeholder: 'click to write text', required: false })
|
|
|
|
const isEmpty = computed(() => !props.text?.trim())
|
|
const emit = defineEmits<{ changed: [text: string] }>()
|
|
|
|
const editing = ref(false)
|
|
const draft = ref(props.text ?? '')
|
|
const error = ref('')
|
|
|
|
watch(draft, () => {
|
|
error.value = ''
|
|
})
|
|
|
|
const startEdit = () => {
|
|
draft.value = props.text ?? ''
|
|
error.value = ''
|
|
editing.value = true
|
|
}
|
|
|
|
const save = () => {
|
|
if (props.required && !draft.value.trim()) {
|
|
error.value = 'This field is required'
|
|
return
|
|
}
|
|
emit('changed', draft.value)
|
|
editing.value = false
|
|
}
|
|
|
|
const cancel = () => {
|
|
draft.value = props.text ?? ''
|
|
error.value = ''
|
|
editing.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="editable-text">
|
|
<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" :class="{ 'text-medium-emphasis': isEmpty }">
|
|
{{ isEmpty ? placeholder : text }}
|
|
</div>
|
|
<v-icon v-if="isHovering || isEmpty" 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="auto"
|
|
:error-messages="error"
|
|
v-model="draft"
|
|
variant="outlined"
|
|
@keyup.enter="save"
|
|
@keyup.esc="cancel"
|
|
/>
|
|
|
|
<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>
|