diff --git a/resources/ts/bo/components/BelongsToManyDropdownComponent.vue b/resources/ts/bo/components/BelongsToManyDropdownComponent.vue
index c4ae5dd..bda8283 100644
--- a/resources/ts/bo/components/BelongsToManyDropdownComponent.vue
+++ b/resources/ts/bo/components/BelongsToManyDropdownComponent.vue
@@ -67,9 +67,9 @@ import type VueTagsInput from "@sipec/vue3-tags-input";
 import { VueTagsInput as VueTagsInputCls } from "@sipec/vue3-tags-input";
 import slugify from "slugify";
 import { defineComponent } from "vue";
-import parseLaravelErrorMessages from "./../../modules/parseLaravelErrorMessages";
-import route from "./../../modules/route";
-import trans from "./../../modules/trans";
+import parseLaravelErrorMessages from "../../modules/parseLaravelErrorMessages";
+import route from "../../modules/route";
+import trans from "../../modules/trans";
 
 export default defineComponent({
   name: "BelongsToManyDropdownComponent",
diff --git a/resources/ts/bo/components/ImageInputComponent.vue b/resources/ts/bo/components/ImageInputComponent.vue
index f9aae93..23cdf2e 100644
--- a/resources/ts/bo/components/ImageInputComponent.vue
+++ b/resources/ts/bo/components/ImageInputComponent.vue
@@ -1,138 +1,157 @@
 <template>
-  <div class="container image-input-vue p-0">
+  <div
+    ref="imageInput"
+    class="image-input-vue p-0"
+  >
+    <!-- INPUT GROUP -->
     <div class="row">
-      <div :class="`col-12 ${intPreview ? 'col-md-6' : ''} form-group`">
+      <!-- INPUT GROUP -->
+      <div :class="`col-12 ${parameters.preview ? 'col-md-6' : ''} form-group`">
         <label
-          v-if="intPreview && showLabels"
-          :for="intId"
+          v-if="parameters.preview && parameters.showLabels"
+          :for="parameters.id"
           class="col-form-label"
         >
-          <b>{{ __("vue.ImageInputComponent.choose_a_file") }}</b>
+          <b>{{ trans.methods.__("vue.ImageInputComponent.choose_a_file") }}</b>
         </label>
         <div class="input-group">
           <button
             @click.prevent="chooseAFile"
-            class="btn btn-outline-secondary"
+            class="btn btn-outline-secondary z-1"
             type="button"
             data-bs-toggle="tooltip"
-            :title="__('vue.ImageInputComponent.change_source_picture')"
+            :title="trans.methods.__('vue.ImageInputComponent.change_source_picture')"
           >
             <FontAwesomeIcon icon="fa-solid fa-folder-open" />
           </button>
+          <!-- OUTPUT HTML INPUT -->
           <input
-            :id="intId"
-            ref="actualImage"
-            @change="changedImage"
+            :id="parameters.id"
+            ref="inputFileImage"
+            @change="pictureInputHasChanged"
             type="file"
             class="d-none"
-            :name="intName"
+            :name="`${fileParamIsFile ? parameters.name : ''}`"
             accept=".jpg,.jpeg,.gif,.png"
-            :aria-describedby="`Help${intId}`"
+            :aria-describedby="`Help${parameters.id}`"
           >
           <input
-            v-if="intValue.indexOf('data:image/png;base64') !== 0"
+            v-if="typeof fileOutput === 'string'"
             class="d-none"
-            :name="intName"
+            :name="parameters.name"
             type="text"
-            :value="submitIntValue"
+            :value="fileOutput"
           >
+          <!-- END OUTPUT HTML INPUT -->
+          <!-- FILENAME DISPLAY -->
           <input
             @click.prevent="chooseAFile"
             type="text"
-            :value="intValueFileName"
+            :value="fileParameters.fileName"
             class="form-control right-aligned"
             data-bs-toggle="tooltip"
-            :title="__('vue.ImageInputComponent.change_source_picture')"
-            :aria-describedby="`Help${intId}`"
+            :title="trans.methods.__('vue.ImageInputComponent.change_source_picture')"
+            :aria-describedby="`Help${parameters.id}`"
             readonly
           >
           <button
-            v-if="!intRequired && intHasImage"
-            @click.prevent="removeFile"
+            v-if="!parameters.required && hasPicture"
+            @click.prevent="resetComponent"
             class="btn btn-outline-danger"
             type="button"
+            data-bs-toggle="tooltip"
+            :title="trans.methods.__('vue.ImageInputComponent.remove_picture')"
           >
             <FontAwesomeIcon icon="fa-solid fa-eraser" />
           </button>
           <button
-            v-if="!intPreview && intValue"
+            v-if="!parameters.preview && fileDataUrl"
             class="btn btn-warning"
             type="button"
             data-bs-toggle="modal"
-            :data-bs-target="`#ModalPreview${intId}`"
+            :data-bs-target="`#ModalPreview${parameters.id}`"
           >
             <span
               data-bs-toggle="tooltip"
-              :title="__('vue.ImageInputComponent.view_source_picture')"
+              :title="trans.methods.__('vue.ImageInputComponent.view_source_picture')"
             >
               <FontAwesomeIcon icon="fa-solid fa-eye" />
             </span>
           </button>
           <button
-            @click.prevent="prepareImageEditor($event)"
-            :disabled="!intHasImage"
-            :class="`btn ${!intHasModdedImage ? 'btn-primary' : 'btn-success'}`"
+            @click.prevent="prepareImageEditor()"
+            :disabled="!hasPicture"
+            :class="`btn ${!hasCroppedPicture ? 'btn-primary' : 'btn-success'}`"
             type="button"
             data-bs-toggle="modal"
-            :data-bs-target="`#Modal${intId}`"
+            :data-bs-target="`#Modal${parameters.id}`"
           >
             <span
               data-bs-toggle="tooltip"
-              :title="__('vue.ImageInputComponent.resize_source_picture')"
+              :title="trans.methods.__('vue.ImageInputComponent.resize_source_picture')"
             >
               <FontAwesomeIcon icon="fa-solid fa-crop" />
             </span>
           </button>
           <span
-            v-if="intHasModdedImage"
+            v-if="hasCroppedPicture"
             class="input-group-text text-success"
             data-bs-toggle="tooltip"
-            :title="__('vue.ImageInputComponent.resized_source_picture')"
+            :title="trans.methods.__('vue.ImageInputComponent.resized_source_picture')"
           >
             <FontAwesomeIcon icon="fa-solid fa-wand-magic" />
           </span>
         </div>
         <small
-          :id="`Help${intId}`"
+          :id="`Help${parameters.id}`"
           class="form-text text-body-secondary"
         >
-          {{ intHelper }}
+          {{ parameters.helper }}
         </small>
       </div>
+      <!-- END INPUT GROUP -->
+      <!-- INLINE PREVIEW PART -->
       <div
-        v-if="intPreview"
-        :class="`col-12 ${intPreview ? 'col-md-6' : ''} form-group d-flex flex-column`"
+        v-if="parameters.preview"
+        :class="`col-12 ${parameters.preview ? 'col-md-6' : ''} form-group d-flex flex-column`"
       >
         <p
-          v-if="intValue && showLabels"
-          :id="`PreviewHelp${intId}`"
+          v-if="fileDataUrl && parameters.showLabels"
+          :id="`PreviewHelp${parameters.id}`"
           class="col-form-label fw-bold m-0"
         >
-          {{ __("vue.ImageInputComponent.preview_picture") }}
+          {{ trans.methods.__("vue.ImageInputComponent.preview_picture") }}
         </p>
-        <img
-          v-if="intValue"
-          class="w-fit img-fluid"
-          :src="intValue"
-          :alt="__('Image placeholder')"
-          :aria-describedby="`PreviewHelp${intId}`"
-        >
+        <div>
+          <img
+            v-if="fileDataUrl"
+            class="img-fluid"
+            :src="fileDataUrl"
+            :alt="trans.methods.__('Image placeholder')"
+            :aria-describedby="`PreviewHelp${parameters.id}`"
+          >
+        </div>
         <small
-          v-if="intOriginalFile"
+          v-if="fileParamIsFile"
           class="form-text text-body-secondary"
         >
-          {{ `Poids: ${humanFileSize(intOriginalFile.size)}, largeur: ${intOriginalFileDimensions.width}px, hauteur: ${intOriginalFileDimensions.height}px.` }}
+          <span>{{ humanFileSize((fileParameters.file as File).size) }}</span>
+          {{ `largeur ${fileParameters.dimensions.width}px` }}
+          {{ `hauteur ${fileParameters.dimensions.height}px` }}
         </small>
       </div>
+      <!-- END INLINE PREVIEW PART -->
     </div>
+    <!-- END INPUT GROUP -->
+
+    <!-- CROP MODAL -->
     <div
-      :id="`Modal${intId}`"
+      :id="`Modal${parameters.id}`"
       class="modal"
       tabindex="-1"
       role="dialog"
       data-bs-backdrop="static"
       data-bs-keyboard="false"
-      @mousedown="preventMouseDown"
       @dragstart.prevent="() => false"
       @ondrop.prevent="() => false"
       @dragover.prevent="() => false"
@@ -144,15 +163,15 @@
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">
-              {{ __("vue.ImageInputComponent.change_picture_before_import") }}
+              {{ trans.methods.__("vue.ImageInputComponent.change_picture_before_import") }}
             </h5>
             <button
               type="button"
               class="btn-close"
               data-bs-dismiss="modal"
-              :aria-label="__('vue.ImageInputComponent.close_window')"
+              :aria-label="trans.methods.__('vue.ImageInputComponent.close_window')"
               data-bs-toggle="tooltip"
-              :title="__('vue.ImageInputComponent.close_window_without_validation')"
+              :title="trans.methods.__('vue.ImageInputComponent.close_window_without_validation')"
             />
           </div>
           <div class="modal-body">
@@ -163,8 +182,8 @@
                     <button
                       class="btn btn-warning"
                       data-bs-toggle="tooltip"
-                      :title="__('Réinitialiser l\'image')"
-                      @click.prevent="reset()"
+                      :title="trans.methods.__('Réinitialiser l\'image')"
+                      @click.prevent="cropperReset"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-sync-alt" />
                     </button>
@@ -173,16 +192,16 @@
                     <button
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.zoom_in')"
-                      @click.prevent="zoom(0.1)"
+                      :title="trans.methods.__('vue.ImageInputComponent.zoom_in')"
+                      @click.prevent="cropperInstance?.zoom(0.1)"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-search-plus" />
                     </button>
                     <a
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.zoom_out')"
-                      @click.prevent="zoom(-0.1)"
+                      :title="trans.methods.__('vue.ImageInputComponent.zoom_out')"
+                      @click.prevent="cropperInstance?.zoom(-0.1)"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-search-minus" />
                     </a>
@@ -191,32 +210,32 @@
                     <a
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.move_left')"
-                      @click.prevent="move(-10, 0)"
+                      :title="trans.methods.__('vue.ImageInputComponent.move_left')"
+                      @click.prevent="cropperInstance?.move(-10, 0)"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-arrow-left" />
                     </a>
                     <a
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.move_right')"
-                      @click.prevent="move(10, 0)"
+                      :title="trans.methods.__('vue.ImageInputComponent.move_right')"
+                      @click.prevent="cropperInstance?.move(10, 0)"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-arrow-right" />
                     </a>
                     <a
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.move_up')"
-                      @click.prevent="move(0, -10)"
+                      :title="trans.methods.__('vue.ImageInputComponent.move_up')"
+                      @click.prevent="cropperInstance?.move(0, -10)"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-arrow-up" />
                     </a>
                     <a
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.move_down')"
-                      @click.prevent="move(0, 10)"
+                      :title="trans.methods.__('vue.ImageInputComponent.move_down')"
+                      @click.prevent="cropperInstance?.move(0, 10)"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-arrow-down" />
                     </a>
@@ -225,16 +244,16 @@
                     <a
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.mirror_horizontal')"
-                      @click.prevent="scale(true)"
+                      :title="trans.methods.__('vue.ImageInputComponent.mirror_horizontal')"
+                      @click.prevent="cropperScale('H')"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-arrows-alt-h" />
                     </a>
                     <a
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
-                      :title="__('vue.ImageInputComponent.mirror_vertical')"
-                      @click.prevent="scale(false)"
+                      :title="trans.methods.__('vue.ImageInputComponent.mirror_vertical')"
+                      @click.prevent="cropperScale('V')"
                     >
                       <FontAwesomeIcon icon="fa-solid fa-arrows-alt-v" />
                     </a>
@@ -245,21 +264,21 @@
                 <div class="col">
                   <div class="form-group d-flex flex-row">
                     <div class="rotate-button">
-                      <span class="text-dark">{{ __("vue.ImageInputComponent.rotation") }}&nbsp;:</span>
+                      <span class="text-dark">{{ trans.methods.__("vue.ImageInputComponent.rotation") }}&nbsp;:</span>
                       <div class="btn-group mt-1">
                         <a
                           class="btn btn-primary"
                           data-bs-toggle="tooltip"
-                          :title="__('vue.ImageInputComponent.rotate_rewind')"
-                          @click.prevent="rotate(-45)"
+                          :title="trans.methods.__('vue.ImageInputComponent.rotate_rewind')"
+                          @click.prevent="cropperRotate(-45)"
                         >
                           <FontAwesomeIcon icon="fa-solid fa-undo-alt" />
                         </a>
                         <a
                           class="btn btn-primary"
                           data-bs-toggle="tooltip"
-                          :title="__('vue.ImageInputComponent.rotate')"
-                          @click.prevent="rotate(45)"
+                          :title="trans.methods.__('vue.ImageInputComponent.rotate')"
+                          @click.prevent="cropperRotate(45)"
                         >
                           <FontAwesomeIcon icon="fa-solid fa-redo-alt" />
                         </a>
@@ -271,27 +290,21 @@
                         class="form-label me-4"
                       >
                         {{
-                          __("vue.ImageInputComponent.degres", {
-                            deg: String(intRotationText),
+                          trans.methods.__("vue.ImageInputComponent.degres", {
+                            deg: String(cropperParameters.rotation),
                           })
                         }}
                       </label>
                       <input
                         ref="rotationSlider"
-                        @input.stop="rotationChange"
-                        @change.stop="
-                          rotateTo(
-                            Number.parseInt(
-                              ($event.target as HTMLInputElement).value
-                            )
-                          )
-                        "
+                        @input.stop="cropperParameters.rotation = Number.parseInt(($event.target as HTMLInputElement).value)"
+                        @change.stop="cropperParameters.rotation = Number.parseInt(($event.target as HTMLInputElement).value)"
                         type="range"
                         class="form-range"
                         id="range"
                         min="0"
                         max="360"
-                        value="0"
+                        :value="cropperParameters.rotation"
                       >
                     </div>
                   </div>
@@ -310,8 +323,8 @@
                   class="col-12 col-md-6 p-0 preview-img"
                 >
                   <div
-                    :id="`Preview${intId}`"
-                    :style="intPreviewStyle"
+                    :id="`Preview${parameters.id}`"
+                    :style="previewStyle"
                   />
                 </div>
               </div>
@@ -322,11 +335,11 @@
               type="button"
               class="btn btn-secondary"
               data-bs-dismiss="modal"
-              :aria-label="__('vue.ImageInputComponent.close_window_without_validation')"
+              :aria-label="trans.methods.__('vue.ImageInputComponent.close_window_without_validation')"
               data-bs-toggle="tooltip"
-              :title="__('vue.ImageInputComponent.close_window_without_validation')"
+              :title="trans.methods.__('vue.ImageInputComponent.close_window_without_validation')"
             >
-              {{ __("vue.ImageInputComponent.close_window") }}
+              {{ trans.methods.__("vue.ImageInputComponent.close_window") }}
             </button>
             <button
               @click.prevent="exportCropperFile"
@@ -334,17 +347,20 @@
               class="btn btn-primary"
               data-bs-toggle="tooltip"
               data-bs-dismiss="modal"
-              :title="__('vue.ImageInputComponent.close_window_and_validate')"
+              :title="trans.methods.__('vue.ImageInputComponent.close_and_validate')"
             >
-              {{ __("vue.ImageInputComponent.validate") }}
+              {{ trans.methods.__("vue.ImageInputComponent.validate") }}
             </button>
           </div>
         </div>
       </div>
     </div>
+    <!-- END CROP MODAL -->
+
+    <!-- PREVIEW MODAL -->
     <div
-      v-if="!intPreview && intValue"
-      :id="`ModalPreview${intId}`"
+      v-if="!parameters.preview && fileDataUrl"
+      :id="`ModalPreview${parameters.id}`"
       class="modal"
       tabindex="-1"
       role="dialog"
@@ -358,32 +374,42 @@
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">
-              {{ __("vue.ImageInputComponent.preview") }}
+              {{ trans.methods.__("vue.ImageInputComponent.preview") }}
             </h5>
             <button
               type="button"
               class="btn-close"
               data-bs-dismiss="modal"
-              :aria-label="__('vue.ImageInputComponent.close_window')"
+              :aria-label="trans.methods.__('vue.ImageInputComponent.close_window')"
               data-bs-toggle="tooltip"
-              :title="__('vue.ImageInputComponent.close_window_without_validation')"
+              :title="trans.methods.__('vue.ImageInputComponent.close_window_without_validation')"
             />
           </div>
           <div class="modal-body">
             <div class="container">
               <div class="row">
-                <div class="col-12 text-center">
+                <div class="col-12 text-center d-flex flex-column">
                   <small
-                    :id="`PreviewHelp${intId}`"
+                    :id="`PreviewHelp${parameters.id}`"
                     class="form-text text-body-secondary d-block"
-                  >{{ __("vue.ImageInputComponent.preview_picture") }}</small>
-                  <img
-                    v-if="intValue"
-                    class="img-fluid"
-                    :src="intValue"
-                    :alt="__('Image placeholder')"
-                    :aria-describedby="`PreviewHelp${intId}`"
+                  >{{ trans.methods.__("vue.ImageInputComponent.preview_picture") }}</small>
+                  <small
+                    v-if="fileParamIsFile"
+                    class="form-text text-body-secondary"
                   >
+                    <span>{{ humanFileSize((fileParameters.file as File).size) }}</span>
+                    {{ `largeur ${fileParameters.dimensions.width}px` }}
+                    {{ `hauteur ${fileParameters.dimensions.height}px` }}
+                  </small>
+                  <div>
+                    <img
+                      v-if="fileDataUrl"
+                      class="img-fluid"
+                      :src="fileDataUrl"
+                      :alt="trans.methods.__('Image placeholder')"
+                      :aria-describedby="`PreviewHelp${parameters.id}`"
+                    >
+                  </div>
                 </div>
               </div>
             </div>
@@ -391,16 +417,31 @@
         </div>
       </div>
     </div>
+    <!-- END PREVIEW MODAL -->
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import Cropper from "cropperjs";
-import { defineComponent } from "vue";
-import bsTooltips from "./../../modules/bsTooltips";
+import { computed, nextTick, onMounted, reactive, ref, useAttrs, watch } from "vue";
+import { Tooltips } from "./../../modules/bsTooltips";
 import trans from "./../../modules/trans";
 
+/** If string the it is an absolute file path. */
+type FileOutputValue = File|string|null;
+type MirrorScale = 1|-1;
+
+type CropperParameters = {
+  /** Rotate the image to an absolute degree. */
+  rotation: number,
+  /** The scaling factor applies to the abscissa of the image. */
+  scaleX: MirrorScale,
+  /** The scaling factor applies to the ordinate of the image. */
+  scaleY: MirrorScale
+};
+
+// * CONSTANTS
 const UNITS = [
   "byte",
   "kilobyte",
@@ -411,535 +452,518 @@ const UNITS = [
 ];
 const BYTES_PER_KB = 1024;
 
-export default defineComponent({
-  name: "ImageInputComponent",
-  components: {
-    FontAwesomeIcon,
+defineOptions({
+  name: "ImageInputComponent"
+});
+
+// * EMITS
+const emits = defineEmits<{
+  browseFile: [intId: string],
+  imageFile: [file: File | null],
+}>();
+
+// * ATTRIBUTES
+const attrs = useAttrs();
+
+// * REFS
+const imageInput = ref<HTMLDivElement|null>(null);
+const previewBox = ref<HTMLDivElement|null>(null);
+/** The inputfile to select a picture and send in form. */
+const inputFileImage = ref<HTMLInputElement|null>(null);
+const imgEditor = ref<HTMLImageElement|null>(null);
+
+// * PROPS
+const props = defineProps({
+  id: {
+    type: String,
+    default: String(Math.pow(10, 16) / Math.random())
   },
-  mixins: [trans, bsTooltips],
-  emits: {
-    browseFile: (intId: string) => {
-      intId;
-      return true;
-    },
-    imageFile: (file: File | null) => {
-      file;
-      return true;
-    },
+  name: {
+    type: String,
+    default: ""
   },
-  mounted() {
-    const json = String(this.$attrs.json ?? "");
-    this.initTooltips();
-
-    if (json.length) {
-      // * Init uppon Laravel Blade
-      const data = JSON.parse(json);
-      this.intId = data.id;
-      this.intName = data.name;
-      this.intHelper = data.helper ?? "";
-      this.intWidth = Number.parseInt(String(data.width));
-      this.intHeight = Number.parseInt(String(data.height));
-      this.intValue = String(data.value);
-      if (this.intValue.length) {
-        this.intValueFileName = this.intValue.replace(/^\/|^/, "");
-        this.intValue = this.intValue.replace(/^\/|^/, "/");
-      }
-      if (data.preview !== undefined) {
-        this.intPreview = data.preview ? true : false;
-      }
-      if (data.required !== undefined) {
-        this.intRequired = data.required ? true : false;
-      }
-      if (data.browseEvent !== undefined) {
-        this.intBrowseEvent = data.browseEvent ? true : false;
-      }
-      this.intHasImage = false;
-      if (this.intValue.length) {
-        this.fetchPictureFromPath(`${this.intValue}`);
-      }
-    } else {
-      // * Init Uppon Vue component
-      this.intId = this.id;
-      this.intName = this.name;
-      this.intHelper = this.helper;
-      this.intWidth = this.width;
-      this.intHeight = this.height;
-      this.intValue = this.value;
-      if (this.intValue.length) {
-        this.intValueFileName = this.intValue.replace(/^\/|^/, "");
-        this.intValue = this.intValue.replace(/^\/|^/, "/");
-      }
-      this.intPreview = this.preview;
-      this.intRequired = this.required;
-      this.intBrowseEvent = this.browseEvent;
-    }
+  value: {
+    type: String,
+    default: ""
   },
-  props: {
-    id: {
-      type: String,
-      default: String(Math.pow(10, 16) / Math.random()),
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    showLabels: {
-      type: Boolean,
-      default: true,
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    helper: {
-      type: String,
-      default: "",
-    },
-    width: {
-      type: Number,
-      default: 0,
-    },
-    height: {
-      type: Number,
-      default: 0,
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    preview: {
-      type: Boolean,
-      default: true,
-    },
-    browseEvent: {
-      type: Boolean,
-      default: false,
-    },
+  helper: {
+    type: String,
+    default: ""
   },
-  data(): {
-    intId: string;
-    intValue: string;
-    intValueFileName: string;
-    intHelper: string;
-    intName: string;
-    intRequired: boolean;
-    intWidth: number;
-    intHeight: number;
-    intPreview: boolean;
-
-    intBrowseEvent: boolean;
-
-    intRotationText: number;
-    intRotationValue: number;
-    intScaleX: number;
-    intScaleY: number;
-    intHasImage: boolean;
-    intHasModdedImage: boolean;
-    intCropper: Cropper | null;
-
-    intOriginalFile: File | null;
-    intOriginalFileDimensions: {
-      height: number;
-      width: number;
-    };
-    intOriginalFileName: string;
-    intPreviewStyle: string;
-  } {
-    return {
-      intId: "",
-      intValue: "",
-      intValueFileName: this.__("vue.ImageInputComponent.choose_a_file"),
-      intHelper: "",
-      intName: "",
-      intRequired: true,
-      intWidth: 0,
-      intHeight: 0,
-      intPreview: true,
-
-      intBrowseEvent: false,
-
-      intRotationText: 0,
-      intRotationValue: 0,
-      intScaleX: 1,
-      intScaleY: 1,
-      intHasImage: false,
-      intHasModdedImage: false,
-      intCropper: null,
-
-      intOriginalFile: null,
-      intOriginalFileDimensions: {
-        height: 0,
-        width: 0,
-      },
-      intOriginalFileName: "",
-      intPreviewStyle: "",
-    };
+  required: {
+    type: Boolean,
+    default: false
   },
-  computed: {
-    imageRatio() {
-      return this.intWidth / this.intHeight;
-    },
-    cropperOption(): Cropper.Options {
-      return {
-        autoCrop: true,
-        background: true,
-        autoCropArea: 1,
-        // * full crop box
-        viewMode: 0,
-        dragMode: "move",
-        movable: true,
-        rotatable: true,
-        scalable: true,
-        zoomable: true,
-        zoomOnTouch: false,
-        zoomOnWheel: false,
-        cropBoxMovable: true,
-        cropBoxResizable: false,
-        toggleDragModeOnDblclick: false,
-        aspectRatio: this.intWidth / this.intHeight,
-        preview: `#Preview${this.intId}`,
-      };
-    },
-    /** Removes prepended slash */
-    submitIntValue(): string {
-      return this.intValue.replace(/^\/|^/, "");
-    },
+  /** Show above input file and picture bold text. */
+  showLabels: {
+    type: Boolean,
+    default: true
   },
-  watch: {
-    intRotationValue(value: number) {
-      if (!this.intCropper) {
-        return;
-      }
-      this.intCropper.rotateTo(value);
-    },
-    intValue() {
-      if (this.intBrowseEvent) {
-        this.intHasImage = true;
-      }
-    },
-    value: {
-      deep: true,
-      immediate: true,
-      handler(value: string) {
-        // * Ignore non prop usage.
-        if (String(this.$attrs.json ?? "").length) {
-          return;
-        }
-        if (!value.length) {
-          this.removeFile();
-          return;
-        } else {
-          this.intHasImage = true;
-        }
-        // * Using browse event, If user changed image recompile blob (File Upload storage strategy)
-        if (this.browseEvent && this.intHasImage) {
-          this.$nextTick(() => this.fetchPictureFromPath(value));
-        } else {
-          this.intValue = value;
-          if (this.intValue.length) {
-            this.intValueFileName = this.intValue.replace(/^\/|^/, "");
-            this.intValue = this.intValue.replace(/^\/|^/, "/");
-          }
-        }
-      },
-    },
+  /** Directly display the image preview or within a BS modal. */
+  preview: {
+    type: Boolean,
+    default: true
   },
-  methods: {
-    preventMouseDown(e: MouseEvent) {
-      if ((e.target as HTMLElement)?.id !== "range") {
-        e.preventDefault();
-        return false;
-      }
-    },
-    previewStyleCompute() {
-      const previewBox = this.$refs.previewBox as HTMLElement,
-            style = window.getComputedStyle(previewBox),
-            targetWidth = Number.parseFloat(style.width) / 1.2,
-            targetHeight =
-              (this.intHeight * Number.parseFloat(style.width)) /
-              this.intWidth /
-              1.2;
-      this.intPreviewStyle = `width: ${targetWidth.toFixed(
-        3
-      )}px;height:${targetHeight.toFixed(3)}px;`;
-    },
-    reset() {
-      if (!this.intCropper) {
-        return;
-      }
-      this.intCropper.reset();
-    },
-    zoom(v: number) {
-      if (!this.intCropper) {
-        return;
-      }
-      this.intCropper.zoom(v);
-    },
-    move(x: number, y: number) {
-      if (!this.intCropper) {
-        return;
-      }
-      this.intCropper.move(x, y);
-    },
-    scale(horizontal: boolean) {
-      if (!this.intCropper) {
-        return;
-      }
-      if (horizontal) {
-        this.intScaleX = -1 / this.intScaleX;
-        this.intCropper.scaleX(this.intScaleX);
-      } else {
-        this.intScaleY = -1 / this.intScaleY;
-        this.intCropper.scaleY(this.intScaleY);
-      }
-    },
-    rotate(value: number) {
-      const rotationSlider = this.$refs.rotationSlider as HTMLInputElement;
-      let res = this.intRotationValue + value;
-      res = res < 0 ? 0 : res;
-      res = res > 360 ? 360 : res;
-      this.intRotationValue = res;
-      this.intRotationText = this.intRotationValue;
-      rotationSlider.value = String(this.intRotationValue);
-    },
-    rotateTo(value: number) {
-      value = value < 0 ? 0 : value;
-      value = value > 360 ? 360 : value;
-      this.intRotationValue = value;
-      this.intRotationText = this.intRotationValue;
-    },
-    rotationChange(e: Event) {
-      const el = e.target;
-      if (!el || !(el instanceof HTMLInputElement)) {
-        throw new Error("target element is not an input");
-      }
-      this.rotateTo(Number.parseFloat(el.value));
-    },
-    chooseAFile() {
-      const actualImage = this.$refs.actualImage as HTMLInputElement;
-      if (this.intBrowseEvent) {
-        this.$emit("browseFile", this.intId);
-        return;
-      }
-      actualImage.click();
-    },
-    removeFile() {
-      if (!this.$refs.actualImage) {
-        return;
-      }
-      const actualImage = this.$refs.actualImage as HTMLInputElement;
-      actualImage.value = "";
-      this.intValueFileName = this.__("vue.ImageInputComponent.choose_a_file");
-      this.intValue = "";
-      this.intOriginalFileName = "";
-      this.intOriginalFile = null;
-      this.intHasModdedImage = false;
-      this.intOriginalFileDimensions = {
-        height: 0,
-        width: 0,
-      };
-      // * To overload watcher for intValue
-      this.$nextTick(() => (this.intHasImage = false));
-      this.$emit("imageFile", null);
-    },
-    fetchPictureFromPath(value: string): void {
-      const actualImage: HTMLInputElement = this.$refs.actualImage as HTMLInputElement,
-            container: DataTransfer = new DataTransfer();
-
-      this.$nextTick(() => {
-        const stringValue: string = value.replace(/^\/|^/, "/"),
-              stringFileName: string = stringValue.substring(stringValue.lastIndexOf("/")).replace(/^\/|^/, "");
-
-        fetch(stringValue)
-          .then((response) => {
-            this.intOriginalFileName = decodeURI(response.url.substring(
-              response.url.lastIndexOf("/") + 1
-            ));
-            return response.blob();
-          })
-          .then((blob: Blob) => {
-            if (!actualImage.files) {
-              throw new Error("3- missing files list");
-            }
-            this.fetchDataUrlImageSizes(stringValue);
-            const file = new File([blob], stringFileName, {
-              type: "image/png",
-              lastModified: new Date().getTime(),
-            });
-
-            this.intValue = stringValue;
-            this.intValueFileName = stringFileName;
-            this.intHasImage = true;
-            this.intOriginalFile = file;
-            this.$emit("imageFile", file);
-            container.items.add(file);
-            actualImage.files = container.files;
-            this.changedImage();
-          });
-      });
-    },
-    changedImage() {
-      const reader = new FileReader(),
-            actualImage = this.$refs.actualImage as HTMLInputElement;
-      if (!actualImage.files) {
-        throw new Error("missing files list");
-      }
-      this.intHasImage = true;
-      reader.addEventListener(
-        "load",
-        () => {
-          // On convertit l'image en une chaîne de caractères base64.
-          this.intValue = String(reader.result);
-        },
-        false
-      );
-
-      if (actualImage.files[0]) {
-        this.intOriginalFile = actualImage.files[0];
-        this.intOriginalFileName = actualImage.files[0].name;
-        reader.readAsDataURL(actualImage.files[0]);
-        reader.onloadend = () => {
-          this.fetchDataUrlImageSizes(String(reader.result));
-          this.exportToBlob();
-        };
-        this.intValueFileName = actualImage.files[0].name;
-      }
-    },
-    prepareImageEditor(e: Event) {
-      const actualImage = this.$refs.actualImage as HTMLInputElement,
-            imgEditor = this.$refs.imgEditor as HTMLImageElement,
-            createCropper = () => {
-              if (this.intCropper) {
-                this.intCropper.destroy();
-              }
-              this.intCropper = new Cropper(imgEditor, this.cropperOption);
-            };
-
-      if (!this.browseEvent) {
-        if (!actualImage || !actualImage.files) {
-          throw new Error("actualImage is not defined");
-        }
-        this.intOriginalFile = actualImage.files[0];
-        this.intOriginalFileName = actualImage.files[0].name;
-        imgEditor.src = URL.createObjectURL(actualImage.files[0]);
-
-        this.previewStyleCompute();
-        this.$nextTick(() => createCropper());
-        return;
-      }
-
-      e.preventDefault();
-      this.$nextTick(() => {
-        fetch(this.value.replace(/^\/|^/, "/"))
-          .then((response) => {
-            this.intOriginalFileName = response.url.substring(
-              response.url.lastIndexOf("/") + 1
-            );
-            return response.blob();
-          })
-          .then((blob: Blob) => {
-            imgEditor.src = URL.createObjectURL(blob);
-
-            this.previewStyleCompute();
-            this.$nextTick(createCropper);
-          });
-      });
-    },
-    dataURLtoBlob(dataUrl: string) {
-      const arr = dataUrl.split(",");
-      if (!arr[0] || !arr[1]) {
-        throw new Error("invalid data url");
-      }
-      const mime = arr[0].match(/:(.*?);/);
-      if (!mime || mime.length < 2) {
-        throw new Error("invalid mime");
-      }
-      const bstr = window.atob(arr[1]);
-      let n = bstr.length;
-      const u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new Blob([u8arr], { type: mime[1] });
-    },
-    fetchDataUrlImageSizes(dataUrl: string) {
-      const img = new Image();
-      try {
-        img.onload = () => {
-          this.intOriginalFileDimensions.width = img.width;
-          this.intOriginalFileDimensions.height = img.height;
-        };
-        img.src = dataUrl;
-      } catch (e) {
-        this.intOriginalFileDimensions.width = img.width;
-        this.intOriginalFileDimensions.height = img.height;
-      }
-    },
-    exportCropperFile() {
-      this.intHasModdedImage = true;
-      if (!this.intCropper) {
-        return;
-      }
-      this.intValue = this.intCropper
-        .getCroppedCanvas({
-          fillColor: "rgba(0, 0, 0, 0)",
-          width: this.intWidth,
-          height: this.intHeight,
-          imageSmoothingEnabled: true,
-          imageSmoothingQuality: "high",
-        })
-        .toDataURL("image/png");
-      this.exportToBlob();
-    },
-    exportToBlob() {
-      const actualImage = this.$refs.actualImage as HTMLInputElement,
-            container = new DataTransfer();
-      if (!actualImage.files) {
-        throw new Error("2- missing files list");
-      }
-      this.fetchDataUrlImageSizes(this.intValue);
-      const file = new File(
-        [this.dataURLtoBlob(this.intValue)],
-        this.intOriginalFileName,
-        {
-          type: "image/png",
-          lastModified: new Date().getTime(),
-        }
-      );
-      this.intOriginalFile = file;
-      this.$emit("imageFile", file);
-      container.items.add(file);
-      actualImage.files = container.files;
-    },
-    humanFileSize(sizeBytes: number | bigint): string {
-      let size = Math.abs(Number(sizeBytes));
-
-      let u = 0;
-      while (size >= BYTES_PER_KB && u < UNITS.length - 1) {
-        size /= BYTES_PER_KB;
-        ++u;
-      }
-
-      return new Intl.NumberFormat([], {
-        style: "unit",
-        unit: UNITS[u],
-        unitDisplay: "short",
-        maximumFractionDigits: 1,
-      }).format(size);
-    },
+  /** Asks the component to just emit a browse event and not open the input file picker. */
+  browseEvent: {
+    type: Boolean,
+    default: false
+  },
+  /** Picture dimmensions */
+  width: {
+    type: Number,
+    default: 0
+  },
+  height: {
+    type: Number,
+    default: 0
   },
 });
+
+// * DATA
+const tooltips = ref<Tooltips | null>(null);
+/** If there is an actual picture file. */
+const hasPicture = ref<boolean>(false);
+const hasCroppedPicture = ref<boolean>(false);
+const previewStyle = ref<string>("");
+
+const parameters = reactive<{
+  id: string,
+  name: string,
+  helper: string,
+  required: boolean,
+  showLabels: boolean,
+  preview: boolean,
+  browseEvent: boolean,
+  /** Wanted picture dimensions. */
+  dimensions: {
+    height: number;
+    width: number;
+  },
+}>({
+  id:props.id,
+  name:props.name,
+  helper:props.helper,
+  required:props.required,
+  showLabels:props.showLabels,
+  preview:props.preview,
+  browseEvent:props.browseEvent,
+  /** Wanted picture dimensions. */
+  dimensions: {
+    width: props.width,
+    height: props.height,
+  },
+});
+
+/** Internal file we are working on. */
+const fileParameters = reactive<{
+  file: File|null,
+  filePath: string,
+  fileName: string,
+  /** Actual picture dimensions. */
+  dimensions: {
+    height: number;
+    width: number;
+  },
+}>({
+  file:null,
+  filePath: "",
+  fileName: "",
+  dimensions:{
+    height: 0,
+    width: 0,
+  },
+});
+
+/** The picture as data Url in order to display and crop. */
+const fileDataUrl = ref<string|null>(null);
+
+/**
+ * The file we shall output :
+ * - String when having an already stored picture
+ * - File when we have a File fron the input or cropped component
+ * - null when noting
+ */
+const fileOutput = ref<FileOutputValue>(null);
+
+/** Cropper parameters and instance. */
+const cropperParameters = reactive<CropperParameters>({
+  rotation: 0,
+  scaleX: 1,
+  scaleY: 1,
+});
+const cropperInstance = ref<Cropper|null>(null);
+
+/** Keep previous prop value in order to detect changes. */
+const previousPropValue = ref<string>(props.value);
+
+// * COMPUTED
+const cropperOptions = computed<Cropper.Options>(() => {
+  return {
+    autoCrop: true,
+    background: true,
+    autoCropArea: 1,
+    viewMode: 0,
+    dragMode: "move",
+    movable: true,
+    rotatable: true,
+    scalable: true,
+    zoomable: true,
+    zoomOnTouch: false,
+    zoomOnWheel: false,
+    cropBoxMovable: true,
+    cropBoxResizable: false,
+    toggleDragModeOnDblclick: false,
+    aspectRatio: parameters.dimensions.width / parameters.dimensions.height,
+    preview: `#Preview${parameters.id}`
+  };
+});
+const isUsedWithProps = computed<boolean>(() => attrs.json === undefined);
+const fileParamIsFile = computed<boolean>(() => fileParameters.file instanceof File);
+
+// * LIFECYCLE
+onMounted(() => {
+  const json = String(attrs.json ?? "{}"),
+        data = JSON.parse(json);
+  if (!isUsedWithProps.value) {
+    parameters.id = data.id;
+    parameters.name = data.name;
+    parameters.helper = data.helper ?? "";
+    parameters.dimensions.width = Number.parseInt(String(data.width));
+    parameters.dimensions.height = Number.parseInt(String(data.height));
+    parameters.preview = Boolean(data.preview);
+    parameters.required = Boolean(data.required);
+    parameters.showLabels = Boolean(data.showLabels);
+    parameters.browseEvent = Boolean(data.browseEvent);
+    const value = data.value;
+    if(typeof value === "string" && value.length) {
+      fileParameters.filePath = value.replace(/^\/|^/, "");
+      fileParameters.fileName = value.replace(/^\/|^/, "");
+      fileOutput.value = fileParameters.filePath;
+    }
+  } else {
+    assignFromProps();
+  }
+  fetchPictureFromPath(fileParameters.filePath);
+  initTooltips();
+});
+
+// * WATCHERS
+
+/** Watch props value changes. */
+watch(props, (newValue: typeof props) => {
+  // * Ignore non prop usage.
+  if(!isUsedWithProps.value) {
+    return;
+  }
+  assignFromProps();
+  previousPropValue.value = newValue.value;
+},{deep:true});
+watch(previousPropValue, () => {
+  // * Ignore non prop usage.
+  if(!isUsedWithProps.value) {
+    return;
+  }
+  cropperReset();
+  hasCroppedPicture.value = false;
+  fetchPictureFromPath(fileParameters.filePath)!.then((file) => useThis(file));
+});
+/** Crop parameters changes. */
+watch(cropperParameters, (newValue: CropperParameters) => {
+  if (cropperInstance.value === null) {
+    return;
+  }
+  cropperInstance.value.rotateTo(newValue.rotation);
+}, { deep: true });
+/** The output has changed, so need to change inputFileImage values. */
+watch(fileOutput, (newValue: FileOutputValue) => {
+  // Dont use input type file if we have a string as output (already stored picture).
+  if (typeof newValue === "string") {
+    // * Reset input file.
+    inputFileImage.value!.value = "";
+    return;
+  }
+
+  // * Just add a file to output.
+  if (!(newValue instanceof File)) {
+    return;
+  }
+
+  const container = new DataTransfer();
+  container.items.add(newValue);
+  inputFileImage.value!.files = container.files;
+  emits("imageFile", newValue);
+});
+watch(fileDataUrl, (newValue) => {
+  if(newValue === null) {
+    return;
+  }
+  fileParameters.dimensions = {...parameters.dimensions};
+});
+
+// * METHODS
+function assignFromProps(): void {
+  fileParameters.filePath = props.value.replace(/^\/|^/, "");
+  fileParameters.fileName = props.value.replace(/^\/|^/, "");
+  fileOutput.value = fileParameters.filePath;
+
+  const mapParam = <T extends typeof parameters>(dest: T, prop: keyof T, value: ValueOf<T>) => {
+    dest[prop] = value;
+  };
+  for(const key of ["id", "name", "helper", "required", "showLabels", "preview", "browseEvent"]) {
+    const paramKey = key as keyof typeof parameters;
+    mapParam<typeof parameters>(parameters, paramKey, props[paramKey as never]);
+  }
+  mapParam<typeof parameters>(parameters, "dimensions", {height: props.height, width: props.width});
+}
+
+/** Vertical or Horizontal scale. */
+function cropperScale(direction: "H"|"V"): void {
+  if (cropperInstance.value === null) {
+    return;
+  }
+  const dir: "X"|"Y" = direction === "H" ? "X" : "Y";
+  cropperParameters[`scale${dir}`] = (-1 / cropperParameters[`scale${dir}`]) as MirrorScale;
+  cropperInstance.value[`scale${dir}`](cropperParameters[`scale${dir}`]);
+}
+
+function cropperRotate(deg: number): void {
+  deg += cropperParameters.rotation;
+  cropperParameters.rotation = Math.min(Math.max(deg, 0), 360);
+}
+
+function cropperReset(): void {
+  cropperInstance.value?.reset();
+  cropperParameters.rotation = 0;
+  cropperParameters.scaleX = 1;
+  cropperParameters.scaleY = 1;
+}
+
+/** Export cropped file from cropper. */
+function exportCropperFile(): void {
+  if (!cropperInstance.value) {
+    return;
+  }
+  hasCroppedPicture.value = true;
+  fileDataUrl.value =
+    cropperInstance.value.getCroppedCanvas({
+      fillColor: "rgba(0, 0, 0, 0)",
+      width: parameters.dimensions.width,
+      height: parameters.dimensions.height,
+      imageSmoothingEnabled: true,
+      imageSmoothingQuality: "high",
+    }).toDataURL("image/png");
+  const file = new File(
+    [dataUrltoBlob(fileDataUrl.value)],
+    fileParameters.fileName,
+    {
+      type: "image/png",
+      lastModified: new Date().getTime(),
+    }
+  );
+  useThis(file);
+  fileOutput.value = file;
+}
+
+/** Click in input file picker. */
+function chooseAFile(): void {
+  emits("browseFile", parameters.id);
+  if (parameters.browseEvent) {
+    return;
+  }
+  inputFileImage.value!.click();
+}
+
+/** Input file has changed. */
+function pictureInputHasChanged(): void {
+  if (inputFileImage?.value?.files && inputFileImage!.value!.files[0]) {
+    cropperReset();
+    hasCroppedPicture.value = false;
+    useThis(inputFileImage!.value!.files[0]);
+    fileOutput.value = inputFileImage!.value!.files[0];
+  }
+}
+
+/** Fetch the picture from file Path and save it as a File in the file input. */
+function fetchPictureFromPath(filePath: string): Promise<File>|void {
+  if(!filePath.length) {
+    return;
+  }
+  return new Promise<File>((accept, deny) => nextTick(() => {
+    const prefixedFilePath: string = filePath.replace(/^\/|^/, "/"),
+          stringFileName: string = prefixedFilePath.substring(prefixedFilePath.lastIndexOf("/")).replace(/^\/|^/, "");
+
+    fetch(prefixedFilePath)
+      .then((response) => response.blob())
+      .then((blob: Blob) => {
+        const file = new File([blob], stringFileName, {
+          type: "image/png",
+          lastModified: new Date().getTime(),
+        });
+        setFileAsDataUrl(file);
+        accept(file);
+      }).catch(() => deny("Failed to fetch picture"));
+  }));
+}
+
+/** Persist a File added from input or while component init. */
+function useThis(file: File): void {
+  setFileAsDataUrl(file);
+  fileParameters.fileName = file.name;
+  fileParameters.file = file;
+  hasPicture.value = true;
+}
+
+/** Set a file as DataUrl in order to use it within the component. */
+function setFileAsDataUrl(file: File): void
+{
+  const reader = new FileReader();
+  reader.addEventListener(
+    "load",
+    () => {
+      /** On convertit l'image en une chaîne de caractères base64. */
+      fileDataUrl.value = String(reader.result);
+      fileParameters.fileName = file.name;
+      fileParameters.file = file;
+      hasPicture.value = true;
+    },
+    false
+  );
+
+  reader.readAsDataURL(file);
+  reader.onloadend = () => {
+    fetchImageDimensions(String(reader.result));
+  };
+}
+
+/** Init Cropper. */
+function prepareImageEditor(): void {
+  const createCropper = () => {
+    const imgEditorEl = imgEditor.value;
+    if (!imgEditorEl) {
+      throw new Error("imgEditor required");
+    }
+    if (cropperInstance.value) {
+      cropperInstance.value.destroy();
+    }
+    cropperInstance.value = new Cropper(imgEditorEl, cropperOptions.value);
+  };
+
+  if (fileParameters.file === null) {
+    throw new Error("File nust not be null");
+  }
+
+  imgEditor.value!.src = URL.createObjectURL(fileParameters.file);
+
+  nextTick(() => {
+    createCropper();
+    previewStyleCompute();
+  });
+  return;
+}
+
+/** Reset the entire component state. */
+function resetComponent(): void {
+  cropperReset();
+  fileDataUrl.value = null;
+  fileOutput.value = null;
+  inputFileImage.value!.value = "";
+  fileParameters.fileName = trans.methods.__("vue.ImageInputComponent.choose_a_file");
+  fileParameters.filePath = "";
+  fileParameters.file = null;
+  fileParameters.dimensions.height = 0;
+  fileParameters.dimensions.width = 0;
+  hasPicture.value = false;
+  hasCroppedPicture.value = false;
+  emits("imageFile", null);
+}
+
+/** Download prefixed path picture and fetch its dimensions. */
+function fetchImageDimensions(pictureSrc: string): void {
+  const img = new Image();
+  try {
+    img.onload = () => {
+      fileParameters.dimensions.width = img.width;
+      fileParameters.dimensions.height = img.height;
+    };
+    img.src = pictureSrc;
+  } catch (e) {
+    fileParameters.dimensions.width = img.width;
+    fileParameters.dimensions.height = img.height;
+  }
+}
+
+/** Computed the priew picture style for adaptative dimensions. */
+function previewStyleCompute(): void {
+  if (previewBox.value === null) {
+    return ;
+  }
+  const style = window.getComputedStyle(previewBox.value),
+        targetWidth = Number.parseFloat(style.width) / 1.2,
+        targetHeight =
+          (parameters.dimensions.height * Number.parseFloat(style.width)) /
+          parameters.dimensions.width /
+          1.2;
+  previewStyle.value = `width: ${targetWidth.toFixed(3)}px;height:${targetHeight.toFixed(3)}px;`;
+}
+
+/** Transform data url to blob. */
+function dataUrltoBlob(dataUrl: string): Blob {
+  const arr = dataUrl.split(",");
+  if (!arr[0] || !arr[1]) {
+    throw new Error("invalid data url");
+  }
+  const mime = arr[0].match(/:(.*?);/);
+  if (!mime || mime.length < 2) {
+    throw new Error("invalid mime");
+  }
+  const bstr = window.atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime[1] });
+}
+
+/** Human file size change. */
+function humanFileSize(sizeBytes: number | bigint): string {
+  let size = Math.abs(Number(sizeBytes));
+
+  let u = 0;
+  while (size >= BYTES_PER_KB && u < UNITS.length - 1) {
+    size /= BYTES_PER_KB;
+    ++u;
+  }
+
+  return new Intl.NumberFormat([], {
+    style: "unit",
+    unit: UNITS[u],
+    unitDisplay: "short",
+    maximumFractionDigits: 1,
+  }).format(size);
+}
+
+/** Initialise all tooltips in the component. */
+function initTooltips(): void {
+  setTimeout(() => {
+    tooltips.value = Tooltips.make({
+      type: "dom",
+      elements: imageInput.value!.querySelectorAll("[data-bs-toggle=\"tooltip\"]")
+    });
+  }, 500);
+}
 </script>
 
 <style lang="scss" scopped>
 @import "cropperjs/dist/cropper.css";
 
 .image-input-vue {
-  /* Ensure the size of the image fit the container perfectly */
+  /* Ensure the size of the image fit the container perfectly. */
   .image-modification {
     display: block;
 
-    /* This rule is very important, please don't ignore this */
+    /* This rule is very important, please don't ignore this. */
     max-width: 100%;
   }
   .rotate-button {
diff --git a/resources/ts/bo/components/InputTextAutoComponent.vue b/resources/ts/bo/components/InputTextAutoComponent.vue
index 8bc83b0..1f364da 100644
--- a/resources/ts/bo/components/InputTextAutoComponent.vue
+++ b/resources/ts/bo/components/InputTextAutoComponent.vue
@@ -1,108 +1,103 @@
 <template>
   <WordCounter
-    :id="intId"
+    :id="id"
     class="ck-word-count"
   />
   <textarea
     ref="textarea"
-    :id="intId"
-    :class="`input-text-auto-component ${intClass}`"
-    :name="intName"
-    :aria-describedby="intAriaDescribedby"
-    :placeholder="intPlaceholder"
-    :required="intRequired"
-    @input="onInput"
+    :id="id"
+    :class="`input-text-auto-component ${classPath}`"
+    :name="name"
+    :aria-describedby="ariaDescribedby"
+    :placeholder="placeholder"
+    :required="required"
+    @input="styleElement(checkInput())"
     @blur="onBlur"
-    v-model="intValue"
+    v-model="value"
   />
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import trans from "./../../modules/trans";
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeMount, onMounted, ref, useAttrs } from "vue";
 import WordCounter from "./WordCounterComponent.vue";
 
-const textarea = ref<HTMLTextAreaElement | null>(null);
-
-export default defineComponent({
-  name: "InputTextAutoComponent",
-  inheritAttrs: false,
-  mixins: [trans],
-  components: {
-    WordCounter,
-  },
-  setup() {
-    return { textarea };
-  },
-  beforeMount() {
-    if (!this.$attrs.json) {
-      throw new Error("this component requires json");
-    }
-  },
-  mounted() {
-    const json = String(this.$attrs.json ?? "{}"),
-          data = JSON.parse(json);
-    this.intId = String(data.id);
-    this.intClass = String(data.class);
-    this.intName = String(data.name);
-    this.intPlaceholder = String(data.placeholder);
-    this.intAriaDescribedby = String(data.ariaDescribedby);
-    this.intValue = String(data.value);
-    if (data.required) {
-      this.intRequired = true;
-    }
-    if (this.textarea) {
-      // Default input init
-      this.textarea.setAttribute("style", "height: 1rem;overflow-y: hidden;");
-    }
-    // * Init input
-    this.$nextTick(this.onInput);
-  },
-  data(): {
-    intId: string;
-    intClass: string;
-    intName: string;
-    intPlaceholder: string;
-    intAriaDescribedby: string;
-    intRequired: boolean;
-    intValue: string;
-  } {
-    return {
-      intId: "",
-      intClass: "",
-      intName: "",
-      intPlaceholder: "",
-      intAriaDescribedby: "",
-      intRequired: false,
-      intValue: "",
-    };
-  },
-  methods: {
-    onBlur() {
-      const el = textarea.value;
-      if (!el) {
-        throw new Error("undefined textarea element");
-      }
-      // * Remove every new line char
-      el.value = el.value.replace(/[\n\r]/g, "");
-      this.$nextTick(() => {
-        el.style.height = "auto";
-        el.style.height = `${el.scrollHeight}px`;
-      });
-    },
-    onInput() {
-      const el = textarea.value;
-      if (!el) {
-        throw new Error("undefined textarea element");
-      }
-      el.style.height = "auto";
-      el.style.height = `${el.scrollHeight}px`;
-    },
-  },
+defineOptions({
+  name: "InputTextAutoComponent"
 });
+
+// * ATTRIBUTES
+const attrs = useAttrs();
+
+// * REFS
+const textarea = ref<HTMLTextAreaElement|null>(null);
+
+// * DATA
+/** Hack to set the id for wordCounterComponent. */
+const id = ref<string>(JSON.parse(String(attrs.json ?? "{}")).id);
+const classPath = ref<string>("");
+const name = ref<string>("");
+const placeholder = ref<string>("");
+const ariaDescribedby = ref<string>("");
+const value = ref<string>("");
+const required = ref<boolean>(true);
+
+// * COMPUTED
+const isUsedWithProps = computed<boolean>(() => attrs.json === undefined);
+
+onBeforeMount(() => {
+  if (isUsedWithProps.value) {
+    throw new Error("this component requires json");
+  }
+});
+
+// * LIFECYCLE
+onMounted(() => {
+  const json = String(attrs.json ?? "{}"),
+        data = JSON.parse(json);
+  if (!isUsedWithProps.value) {
+    id.value = String(data.id);
+    classPath.value = String(data.class);
+    name.value = String(data.name);
+    placeholder.value = String(data.placeholder);
+    ariaDescribedby.value = String(data.ariaDescribedby);
+    value.value = String(data.value);
+    required.value = data.required;
+    textarea.value?.setAttribute("style", "height:1rem;overflow-y:hidden;");
+  }
+  nextTick(() => {
+    styleElement(checkInput());
+  });
+});
+
+// * METHODS
+
+/** When the textarea get the focus. */
+function onBlur() {
+  const el = checkInput();
+  /** Remove every new line char */
+  el.value = el.value.replace(/[\n\r]/g, "");
+  nextTick(() => {
+    styleElement(el);
+  });
+}
+
+/** Check if the element is an HTMLTextAreaElement. */
+function checkInput(): HTMLTextAreaElement {
+  const el = textarea.value;
+  if (!el) {
+    throw new Error("undefined textarea element");
+  }
+  return el;
+}
+
+/** Style the textarea element. */
+function styleElement(el: HTMLTextAreaElement): void {
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scopped>
 .input-text-auto-component {
   resize: none;
 }
diff --git a/resources/ts/bo/components/PasswordVisibility.vue b/resources/ts/bo/components/PasswordVisibility.vue
index a4ac298..44affbf 100644
--- a/resources/ts/bo/components/PasswordVisibility.vue
+++ b/resources/ts/bo/components/PasswordVisibility.vue
@@ -1,26 +1,36 @@
 <template>
   <button
+    ref="passwordVisibility"
     @click.prevent="toggleVisibility()"
     @keydown="keydown"
-    :class="`btn btn-primary rounded-0 rounded-end password-visibility-${inputId} h-100`"
+    :class="`btn btn-primary rounded-0 rounded-end password-visibility password-visibility-${id} h-100 border-0 p-0 overflow-hidden`"
     :aria-pressed="visible"
   >
     <span
-      class="text-bg-primary reveal d-flex justify-content-center align-items-center h-100"
-
+      :class="{
+        'text-bg-primary reveal d-flex justify-content-center align-items-center h-100': true,
+        'd-none': visible
+      }"
       type="button"
-      :title="visible ? __('vue.PasswordVisibility.hide') : __('vue.PasswordVisibility.show')"
+      :title="trans.methods.__('vue.PasswordVisibility.hide')"
       data-bs-toggle="tooltip"
     >
       <FontAwesomeIcon
-
-        v-if="visible"
         icon="fas fa-eye-slash"
         :aria-hidden="true"
       />
-
+    </span>
+    <span
+      ref="passwordVisibilitySpan"
+      :class="{
+        'text-bg-primary reveal d-flex justify-content-center align-items-center h-100': true,
+        'd-none': !visible
+      }"
+      type="button"
+      :title="trans.methods.__('vue.PasswordVisibility.show')"
+      data-bs-toggle="tooltip"
+    >
       <FontAwesomeIcon
-        v-else
         icon="fas fa-eye"
         :aria-hidden="true"
       />
@@ -28,84 +38,85 @@
   </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { defineComponent } from "vue";
-import bsTooltips from "./../../modules/bsTooltips";
-import trans from "./../../modules/trans";
+import { onMounted, ref, useAttrs } from "vue";
+import { Tooltips } from "../../modules/bsTooltips";
+import trans from "../../modules/trans";
 
-export default defineComponent({
-  name: "PasswordVisibility",
-  mixins: [bsTooltips, trans],
-  components: { FontAwesomeIcon },
-  data(): {
-    inputId: string;
-    input: HTMLInputElement;
-    visible: boolean;
-    tooltipList: HTMLButtonElement[];
-  } {
-    return {
-      inputId: "",
-      input: document.createElement("input"),
-      visible: false,
-      tooltipList: [],
-    };
-  },
-  computed: {},
-  mounted() {
-    const json = String(this.$attrs.json ?? "{}"),
-          data = JSON.parse(json);
-    this.inputId = data.inputId;
-    this.input = document.getElementById(this.inputId) as HTMLInputElement;
-    if (!this.input) {
-      throw new Error(`Cannot find input id '${this.inputId}'`);
-    }
-    if (this.input.tagName !== "INPUT") {
-      throw new Error(`id '${this.inputId}' is not an input`);
-    }
-    if ((this.input as HTMLInputElement).type !== "password") {
-      throw new Error(`id '${this.inputId}' is not an input password`);
-    }
-    this.input = this.input as HTMLInputElement;
-    this.$nextTick(() => {
-      this.initTooltips();
-    });
-  },
-  methods: {
-    keydown(e:KeyboardEvent):void {
-      if (
-        e.key === " " ||
-        e.code === "Space" ||
-        e.keyCode === 32 ||
-        e.key === "Enter" ||
-        e.code === "Enter" ||
-        e.keyCode === 13
-      ) {
-        this.toggleVisibility();
-        e.preventDefault();
-      }
-    },
-    /**
-     * Update password status (visible, hidden).
-     */
-    toggleVisibility(): void {
-      if (this.input.type === "password") {
-        this.input.type = "text";
-        this.visible = true;
-      } else {
-        this.input.type = "password";
-        this.visible = false;
-      }
-      this.$nextTick(() => {
-        this.initTooltips();
-      });
-    },
-  },
+defineOptions({
+  name: "PasswordVisibility"
 });
+
+// * ATTRIBUTES
+const attrs = useAttrs();
+
+// * REFS
+const passwordVisibility = ref<HTMLButtonElement|null>(null);
+
+// * DATA
+const id = ref<string>("");
+const input = ref<HTMLInputElement>(document.createElement("input"));
+const visible = ref<boolean>(true);
+const tooltips = ref<Tooltips | null>(null);
+
+// * LIFECYCLE
+onMounted(() => {
+  const json = String(attrs.json ?? "{}"),
+        data = JSON.parse(json);
+  id.value = data.id;
+  input.value = document.getElementById(id.value) as HTMLInputElement;
+  if (!input.value) {
+    throw new Error(`Cannot find input id '${id.value}'`);
+  }
+  if (input.value.tagName !== "INPUT") {
+    throw new Error(`id '${id.value}' is not an input`);
+  }
+  if ((input.value as HTMLInputElement).type !== "password") {
+    throw new Error(`id '${id.value}' is not an input password`);
+  }
+  initTooltips();
+});
+
+// * METHODS
+
+/** Set event on key down. */
+function keydown(e: KeyboardEvent): void {
+  if (
+    e.key === " " ||
+    e.code === "Space" ||
+    e.keyCode === 32 ||
+    e.key === "Enter" ||
+    e.code === "Enter" ||
+    e.keyCode === 13
+  ) {
+    toggleVisibility();
+    e.preventDefault();
+  }
+}
+
+/** Update password status (visible, hidden). */
+function toggleVisibility(): void {
+  input.value.type = (input.value.type === "password") ? "text" : "password";
+  visible.value = (input.value.type === "password") ? true  : false;
+}
+
+/** Initialise all tooltips in the component. */
+function initTooltips(): void {
+  setTimeout(() => {
+    tooltips.value = Tooltips.make({
+      type: "dom",
+      elements: passwordVisibility.value!.querySelectorAll("[data-bs-toggle=\"tooltip\"]")
+    });
+  }, 500);
+}
 </script>
 
-<style lang="scss">
-.reveal {
+<style lang="scss" scopped>
+.password-visibility {
+  border-top-right-radius: 0 !important;
+}
+.password-visibility .reveal {
   width: 52px;
 }
 </style>
diff --git a/resources/ts/bo/components/WordCounterComponent.vue b/resources/ts/bo/components/WordCounterComponent.vue
index 19abb51..b012275 100644
--- a/resources/ts/bo/components/WordCounterComponent.vue
+++ b/resources/ts/bo/components/WordCounterComponent.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import trans from "./../../modules/trans";
+import trans from "../../modules/trans";
 
 export default defineComponent({
   name: "WordCounterComponent",
@@ -106,8 +106,6 @@ export default defineComponent({
 <style lang="scss">
 #word-counter + input[type="text"],
 .word-counter + input[type="text"],
-#word-counter + input[type="url"],
-.word-counter + input[type="url"],
 #word-counter + textarea,
 .word-counter + textarea,
 #word-counter-varchar + textarea,
diff --git a/resources/ts/bo/utilities/bootstrap.ts b/resources/ts/bo/utilities/bootstrap.ts
index 2419164..7c9e10b 100644
--- a/resources/ts/bo/utilities/bootstrap.ts
+++ b/resources/ts/bo/utilities/bootstrap.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 import * as bootstrap from "bootstrap";
-import bsTooltips from "./../../modules/bsTooltips";
+import { Tooltips } from "./../../modules/bsTooltips";
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -18,4 +18,4 @@ axios.defaults.headers.common = {
 window.axios = axios;
 window.bootstrap = bootstrap;
 
-bsTooltips.methods.initTooltips();
+Tooltips.make();
diff --git a/resources/ts/fo/utilities/bootstrap.ts b/resources/ts/fo/utilities/bootstrap.ts
index 2419164..7c9e10b 100644
--- a/resources/ts/fo/utilities/bootstrap.ts
+++ b/resources/ts/fo/utilities/bootstrap.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 import * as bootstrap from "bootstrap";
-import bsTooltips from "./../../modules/bsTooltips";
+import { Tooltips } from "./../../modules/bsTooltips";
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -18,4 +18,4 @@ axios.defaults.headers.common = {
 window.axios = axios;
 window.bootstrap = bootstrap;
 
-bsTooltips.methods.initTooltips();
+Tooltips.make();
diff --git a/resources/ts/index.d.ts b/resources/ts/index.d.ts
index 6f94bc6..97068c4 100644
--- a/resources/ts/index.d.ts
+++ b/resources/ts/index.d.ts
@@ -69,6 +69,7 @@ declare global {
     type LaravelModelList = ModelList;
     type LaravelPaginator = Paginator;
     type LaravelPaginatorLink = PaginatorLink;
+    type ValueOf<T> = T[keyof T];
 
     type Enum = EnumInterface;
 
diff --git a/resources/ts/modules/bsTooltips.ts b/resources/ts/modules/bsTooltips.ts
index 8b81cf8..18be9b2 100644
--- a/resources/ts/modules/bsTooltips.ts
+++ b/resources/ts/modules/bsTooltips.ts
@@ -1,45 +1,114 @@
-import type * as bootstrap from "bootstrap";
+import { Tooltip } from "bootstrap";
 
-let tooltips: Array<bootstrap.Tooltip> = [];
 
-export default {
-    methods: {
-        /**
-         * Initialize all Bootstrap tooltips.
-         */
-        initTooltips() {
-            this.disableBootstrapTooltip();
-            tooltips = [].slice
-                .call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"))
-                .map(function (tooltipTriggerEl) {
-                    return new window.bootstrap.Tooltip(tooltipTriggerEl, {
-                        customClass: "large-tooltip",
-                        delay: {
-                            show: 1250,
-                            hide: 0,
-                        },
-                    });
-                });
+type ConstructorTypeParent = "parent";
+type ConstructorTypeDom = "dom";
+
+interface ParentSelectorTooltips {
+    type: ConstructorTypeParent
+    /** The parent element that contains Dom elements for which tooltips shall be created. */
+    parentSelector: string;
+}
+
+interface DomProvidedTooltips {
+    type: ConstructorTypeDom;
+    /** Dom elements for which tooltips shall be created. */
+    elements: HTMLElement | NodeListOf<HTMLElement>;
+}
+
+interface TooltipsOptions {
+    /** Tooltip options. */
+    options?: Partial<Tooltip.Options>|null|undefined;
+}
+
+export type TooltipsConstructor = TooltipsOptions & (ParentSelectorTooltips|DomProvidedTooltips);
+
+export class Tooltips {
+    /** BS tooltips instances */
+    private tooltips: Array<Tooltip> = [];
+
+    /** The parent element that contains Dom elements for which tooltips shall be created. */
+    private parentSelector: string | null = null;
+
+    /** Dom elements for which tooltips shall be created. */
+    private elements: Array<HTMLElement> = [];
+
+    /** Tooltip default options. */
+    private static defaultOptions: Partial<Tooltip.Options> = {
+        delay: {
+            show: 1250,
+            hide: 0,
         },
-        /**
-         * Disable all Bootstrap tooltips.
-         */
-        disableBootstrapTooltip() {
-            tooltips.forEach((tooltip) => {
-                tooltip.disable();
-                tooltip.hide();
-            });
-        },
-        /**
-         * Close all Bootstrap tooltips.
-         */
-        closeBootstrapTooltip() {
-            [].slice
-                .call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"))
-                .forEach((tooltip: HTMLElement) => {
-                    tooltip.blur();
-                    window.bootstrap.Tooltip.getInstance(tooltip)?.hide();
-                });
-        },
-    },
-};
+    };
+
+    /** Tooltip options. */
+    private options: Partial<Tooltip.Options> = {};
+
+    /**
+     * @param parentSelector
+     * @param options        Tooltip options.
+     */
+    constructor(params: TooltipsConstructor) {
+        if (params.type === "parent") {
+            this.parentSelectorConstructor(params);
+        }
+        if (params.type === "dom") {
+            this.domPrividedTooltipsContructor(params);
+        }
+    }
+
+    public static make(params: TooltipsConstructor = { type: "parent", parentSelector: "body"}
+    ) {
+        const fullParams = { ...{ type: "parent", options: {} }, ...params };
+        return new Tooltips(fullParams);
+    }
+
+    private parentSelectorConstructor({ parentSelector, options }: TooltipsOptions & ParentSelectorTooltips) {
+        this.parentSelector = parentSelector;
+        this.options = { ...Tooltips.defaultOptions, ...options };
+        this.initTooltips();
+    }
+
+    private domPrividedTooltipsContructor({ elements, options }: TooltipsOptions & DomProvidedTooltips) {
+        if (elements instanceof HTMLElement) {
+            this.elements = [elements];
+        } else {
+            this.elements = Array.from(elements);
+        }
+        this.options = { ...Tooltips.defaultOptions, ...options };
+        this.initTooltips();
+    }
+
+    /**
+     * Close all Bootstrap tooltips and reinstanciate them.
+     */
+    public refreshTooltips(): void {
+        this.closeBootstrapTooltip();
+        this.initTooltips();
+    }
+
+    /**
+     * Close all Bootstrap tooltips for ever.
+     */
+    public closeBootstrapTooltip(): void {
+        this.tooltips.forEach((tooltip) => {
+            tooltip.hide();
+            // * Prevent pending tooltips beeing shown after we asked to hide them
+            tooltip.disable();
+        });
+    }
+
+    /**
+     * Initialize tooltips
+     */
+    private initTooltips() {
+        this.closeBootstrapTooltip();
+        /** data-bs-toggle tooltips elements */
+        const elements = this.parentSelector ? [].slice
+            .call(document.querySelectorAll(`${this.parentSelector} [data-bs-toggle="tooltip"]`)) :
+            this.elements;
+        this.tooltips = elements.map((tooltipTriggerEl) => {
+            return new Tooltip(tooltipTriggerEl, this.options);
+        });
+    }
+}
diff --git a/resources/ts/modules/parseLaravelErrorMessages.ts b/resources/ts/modules/parseLaravelErrorMessages.ts
index 6bcdb69..75724a1 100644
--- a/resources/ts/modules/parseLaravelErrorMessages.ts
+++ b/resources/ts/modules/parseLaravelErrorMessages.ts
@@ -38,9 +38,9 @@ export default {
             allErrors: Record<string, Array<string>> = {}
         ): string | null {
             let errorList = [] as Array<string>;
-            Object.keys(allErrors).filter((value, index) => {
+            Object.keys(allErrors).filter((value) => {
                 if (value == inputName) {
-                    errorList = allErrors[index];
+                    errorList = allErrors[inputName];
                 }
             });
             return errorList.length
diff --git a/resources/ts/modules/route.ts b/resources/ts/modules/route.ts
index 955b9aa..a819d52 100644
--- a/resources/ts/modules/route.ts
+++ b/resources/ts/modules/route.ts
@@ -16,7 +16,7 @@ const route = {
             routeName: string,
             parameters: Record<
                 string,
-                string | number | Array<string | number>
+                string | number | null | undefined | Array<string | number>
             > = {},
             keepActualQueries: boolean = false,
             keepActualHashes: boolean = false