app/components/Ui/Xeditable/Text.vue

<!--
-->

<template>
  <main>
    <div v-if="edit" class="d-flex align-baseline x-editable-input mt-n1">
      <UiInputText
          class="mt-0 pt-0 mt-n1"
          :type="type"
          :data="inputValue"
          @update="inputValue=$event"
      />
      <v-icon aria-hidden="false" class="valid icons text-ot-green" small @click="update">
        fas fa-check
      </v-icon>
      <v-icon aria-hidden="false" class="cancel icons text-ot-grey" small @click="close">
        fas fa-times
      </v-icon>
    </div>
    <div v-else class="edit-link" @click="edit=true">
      <slot name="xeditable.read" v-bind="{inputValue}" />
    </div>
  </main>
</template>

<script setup lang="ts">
import {ref, Ref} from "@vue/reactivity";

  const props = defineProps({
    type: {
      type: String,
      required: false,
      default: null
    },
    data: {
      type: [String, Number],
      required: false,
      default: null
    }
  })

  const emit = defineEmits(['update'])

  const edit: Ref<boolean> = ref(false)
  const inputValue: Ref<string|number|null> = ref(props.data)

  const update = () => {
    edit.value = false
    if (inputValue.value !== props.data) { emit('update', inputValue.value) }
  }

  const close = () => {
    edit.value = false
    inputValue.value = props.data
  }

</script>

<style lang="scss">
.x-editable-input{
  input{
    padding: 0 !important;
  }
  .icons{
    padding: 5px;
  }
}
.edit-link{
  cursor: pointer;
}
</style>