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 } from '@vue/reactivity'
import type { 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>