<template>
    <label>
        <slot></slot>
        <input ref="input" :accept="accept" :multiple="multiple" type="file" class="hidden" @change.self="(e) => files = [...(e.target as HTMLInputElement)?.files ?? []]"/>
    </label>
</template>

<script setup lang="ts">
const props = defineProps({
    accept: {
        type: String,
    },
    multiple: {
        type: Boolean,
        default: false,
    }
});

const input = useTemplateRef('input');
const files = ref<File[]>([]);

watch([files], () => emit('change', files.value));

const emit = defineEmits(['change']);

defineExpose({ files });
</script>