<template>
  <div class="kintoneplugin-input-container flex-row">
    <plugin-label v-if="label" :label="label" />
    <kuc-combobox className="kuc-text-input" :items="items" :value="modelValue" @change="updateValue" :disabled="disabled"/>
  </div>
</template>

<script setup lang="ts">
import type { KucEvent } from '@/types/my-kintone';
import type { ComboboxChangeEventDetail, DropdownItem } from 'kintone-ui-component';
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  label: string;
  disabled: boolean;
  items: DropdownItem[];
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const updateValue = ({ detail }: KucEvent<ComboboxChangeEventDetail>) => {
  emit('update:modelValue', detail.value || '');
};
</script>
