app_vue2/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"
            v-on:update="inputValue=$event"
        ></UiInputText>
        <v-icon aria-hidden="false" class="valid icons ot_green--text" small @click="update">fas fa-check</v-icon>
        <v-icon aria-hidden="false" class="cancel icons ot_grey--text" small @click="close">fas fa-times</v-icon>
      </div>
      <div v-else @click="edit=true" class="edit-link">
        <slot name="xeditable.read" v-bind="{inputValue}"></slot>
      </div>
    </main>
</template>

<script lang="ts">
  import {defineComponent, ref, Ref} from '@nuxtjs/composition-api'

  export default defineComponent({
    props: {
      type:{
        type: String,
        required: false
      },
      data: {
        type: [String, Number],
        required: false,
        default:null
      }
    },
    setup(props, {emit}){
      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
      }
      return {
        inputValue,
        edit,
        update,
        close
      }
    }
  })
</script>

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