app/components/Ui/Xeditable/Text.vue

<!--
Affichage texte qui passe en mode édition lorsqu'on clique dessus

Utilisé par exemple pour le choix de l'année active
-->

<template>
  <main>
    <!-- Mode édition activé -->
    <div v-if="edit" class="d-flex align-center x-editable-input">
      <UiInputText
          class="ma-0 pa-0"
          :type="type"
          v-model="inputValue"
      />

      <v-icon
          icon="fas fa-check"
          aria-hidden="false"
          class="valid icons text-primary"
          size="small"
          @click="update"
      />
      <v-icon
          icon="fas fa-times"
          aria-hidden="false"
          class="cancel icons text-neutral-strong"
          size="small"
          @click="close"
      />
    </div>

    <!-- Mode édition désactivé -->
    <div v-else class="edit-link d-flex align-center" @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 scoped lang="scss">
.v-input {
  height: 24px;
}

.v-icon {
  padding: 2px;
  height: 24px;
  width: 24px;
  margin: 0 2px;
}

.edit-link {
  cursor: pointer;
}
</style>