app/components/Ui/Input/AutocompleteWithEnum.vue

<template>
  <UiInputAutocomplete
      :model-value="modelValue"
      :field="field"
      :items="enumItems ?? []"
      :is-loading="pending"
      :return-object="false"
      item-title="label"
      item-value="value"
      @update:model-value="$emit('update:model-value', $event)"
  />
</template>

<script setup lang="ts">


import {useEnumFetch} from "~/composables/data/useEnumFetch";

const props = defineProps({
  modelValue: {
    type: String,
    required: false,
    default: null
  },
  enumName: {
    type: String,
    required: true
  },
  field: {
    type: String,
    required: false,
    default: null
  },
  label: {
    type: String,
    required: false,
    default: null
  }
})

const { fetch } = useEnumFetch()

const { data: enumItems, pending } = fetch(props.enumName)

</script>

<style scoped lang="scss">

</style>