homemanager-fe/src/components/form/fields/FormSelectField.vue

<template>
  <FormField
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :disabled="disabled"
  >
    <template #input="{ invalid, forId, value, setValue }">
      <SelectVue
        :for-id="forId"
        :invalid="invalid"
        :disabled="disabled"
        :options="options || []"
        :placeholder="placeholder"
        :model-value="(value as string)"
        @update:model-value="(newValue) => setValue(newValue)"
      >
        <template #option="slotProps">
          <slot name="option" v-bind="slotProps" />
        </template>
      </SelectVue>
    </template>
    <template #default><slot /></template>
  </FormField>
</template>

<script setup lang="ts">
import FormField from '../FormField.vue';
import SelectVue from '../base/Select.vue';
import { SelectOption } from '../form.types';

const props = withDefaults(
  defineProps<{
    label: string;
    name: string;
    options: SelectOption[];
    disabled?: boolean;
    placeholder?: string;
  }>(),
  {
    disabled: false,
  }
);
</script>