app/components/Ui/Input/Enum.vue

<!--
Liste déroulante dédiée à l'affichage d'objets Enum

@see https://vuetifyjs.com/en/components/selects/
-->

<template>
  <main>
<!--    <v-skeleton-loader-->
<!--      v-if="pending"-->
<!--      type="list-item"-->
<!--      loading-->
<!--    />-->

    <v-select
      :value="modelValue"
      :label="$t(label ?? field)"
      :items="items"
      item-text="label"
      item-value="value"
      :rules="rules"
      :disabled="readonly"
      :error="error || !!fieldViolations"
      :error-messages="errorMessage || (fieldViolations ? $t(fieldViolations) : '')"
      @change="updateViolationState($event); $emit('update:modelValue', $event.target.value)"
    />
  </main>
</template>

<script setup lang="ts">
import {useNuxtApp} from "#app";
import {useFieldViolation} from "~/composables/form/useFieldViolation";
import {ref, Ref} from "@vue/reactivity";
import {useEnumFetch} from "~/composables/data/useEnumFetch";
import {Enum} from "~/types/data";

const props = defineProps({
  /**
   * v-model
   */
  modelValue: {
    String,
    required: false,
    default: null
  },
  /**
   * Nom de l'Enum utilisée pour peupler la liste
   */
  enum: {
    type: String,
    required: true
  },
  /**
   * Nom de la propriété d'une entité lorsque l'input concerne cette propriété
   * - Utilisé par la validation
   * - Laisser null si le champ ne s'applique pas à une entité
   */
  field: {
    type: String,
    required: false,
    default: null
  },
  /**
   * Label du champ
   * Si non défini, c'est le nom de propriété qui est utilisé
   */
  label: {
    type: String,
    required: false,
    default: null
  },
  /**
   * Définit si le champ est en lecture seule
   */
  readonly: {
    type: Boolean,
    required: false
  },
  /**
   * Règles de validation
   * @see https://vuetify.cn/en/components/forms/#validation-with-submit-clear
   */
  rules: {
    type: Array,
    required: false,
    default: () => []
  },
  /**
   * Le champ est-il actuellement en état d'erreur
   */
  error: {
    type: Boolean,
    required: false
  },
  /**
   * Si le champ est en état d'erreur, quel est le message d'erreur ?
   */
  errorMessage: {
    type: String,
    required: false,
    default: null
  }
})

if (typeof props.enum === 'undefined') {
  throw new Error("missing 'enum' property for input")
}

const { emit } = useNuxtApp()

const { fieldViolations, updateViolationState } = useFieldViolation(props.field)

const items: Ref<Enum> = ref([])

const { fetch } = useEnumFetch()
const { data: fetched, pending } = fetch(props.enum)

items.value = fetched.value || []

</script>

<style scoped>
</style>