Merge branch 'hotfix/V8-7853-slecteur-danne-manquant-dans-le-'

components/Ui/Xeditable/Text.vue

@@ -0,0 +1,86 @@
+<!--
+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 v-model="inputValue" class="ma-0 pa-0" :type="type" />
+
+      <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'
+import type { Ref } from 'vue'
+
+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>