<template>
  <el-input
    ref="inputRef"
    v-if="isEditing"
    v-model="data"
    @keyup.enter="endEdit"
    @blur="endEdit"
  />
  <div v-else @click="click">{{ data }}</div>
</template>

<script lang="ts" setup>
import { useVModel } from "@vueuse/core";
import type { ElInput } from "element-plus";

const props = defineProps<{
  modelValue: string;
}>();
const emit = defineEmits(["update:modelValue"]);

const data = useVModel(props, "modelValue", emit);
const isEditing = ref(false);

const inputRef = ref<InstanceType<typeof ElInput>>();

const click = () => {
  isEditing.value = true;
  nextTick(() => {
    inputRef.value && inputRef.value.focus();
  });
};

const endEdit = () => {
  isEditing.value = false;
};
</script>

<style scoped lang="scss"></style>
