mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.2 KiB
66 lines
1.2 KiB
<script lang="ts" setup> |
|
/* interface */ |
|
|
|
const props = defineProps<{ |
|
disabled?: boolean |
|
}>() |
|
|
|
const modelValue = defineModel<string>() |
|
|
|
/* internal text */ |
|
|
|
const internalText = ref('') |
|
|
|
watch( |
|
modelValue, |
|
(value) => { |
|
internalText.value = value || '' |
|
}, |
|
{ immediate: true }, |
|
) |
|
|
|
/* edit mode */ |
|
|
|
const inputRef = ref() |
|
const isInEditMode = ref(false) |
|
|
|
function goToEditMode() { |
|
if (props.disabled) { |
|
return |
|
} |
|
isInEditMode.value = true |
|
nextTick(() => { |
|
inputRef.value?.select?.() |
|
}) |
|
} |
|
|
|
function finishEdit() { |
|
isInEditMode.value = false |
|
modelValue.value = internalText.value |
|
} |
|
|
|
function cancelEdit() { |
|
isInEditMode.value = false |
|
internalText.value = modelValue.value || '' |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="inline-block"> |
|
<template v-if="!isInEditMode"> |
|
<span :class="{ 'cursor-pointer': !disabled }" @dblclick="goToEditMode()"> |
|
{{ internalText }} |
|
</span> |
|
</template> |
|
<template v-else> |
|
<a-input |
|
ref="inputRef" |
|
v-model:value="internalText" |
|
class="!rounded-lg !w-72" |
|
@blur="finishEdit()" |
|
@keyup.enter="finishEdit()" |
|
@keyup.esc="cancelEdit()" |
|
/> |
|
</template> |
|
</div> |
|
</template>
|
|
|