const props = withDefaults(defineProps(), { modelValue: () => [] });
const emit = defineEmits();
function update(event) {
    const selected = Array.from(event.target.selectedOptions).map(x => {
        const option = props.options[Number(x.value)];
        return option?.value ?? null;
    });
    emit('update:modelValue', selected);
}
const __VLS_defaults = { modelValue: () => [] };
const __VLS_ctx = {
    ...{},
    ...{},
    ...{},
    ...{},
    ...{},
};
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
    ...{ class: "ks-field" },
});
/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
if (__VLS_ctx.label) {
    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
    (__VLS_ctx.label);
    if (__VLS_ctx.required) {
        __VLS_asFunctionalElement1(__VLS_intrinsics.b, __VLS_intrinsics.b)({
            'aria-hidden': "true",
        });
    }
}
__VLS_asFunctionalElement1(__VLS_intrinsics.select, __VLS_intrinsics.select)({
    ...{ onChange: (__VLS_ctx.update) },
    multiple: true,
    disabled: (__VLS_ctx.disabled),
    required: (__VLS_ctx.required),
});
for (const [option, index] of __VLS_vFor((__VLS_ctx.options))) {
    __VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
        key: (`${index}:${option.label}`),
        value: (index),
        disabled: (option.disabled),
        selected: (__VLS_ctx.modelValue.includes(option.value)),
    });
    (option.label);
    // @ts-ignore
    [label, label, required, required, update, disabled, options, modelValue,];
}
// @ts-ignore
[];
const __VLS_export = (await import('vue')).defineComponent({
    __typeEmits: {},
    __typeProps: {},
    props: {},
});
export default {};
