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"
        @update="inputValue=$event"
      />
      <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 class="edit-link" @click="edit=true">
      <slot name="xeditable.read" v-bind="{inputValue}" />
    </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>