PronounsPage/components/CalendarEventsList.vue

<script setup lang="ts">
import type { Year } from '~/src/calendar/helpers.ts';

defineProps<{
    year: Year;
    addButton?: boolean;
}>();

const emit = defineEmits<{
    add: [event: string];
}>();

const filter = ref('');
</script>

<template>
    <div>
        <FilterBar v-model="filter" />
        <div class="columns-3">
            <div v-for="i in 12" :key="i" class="py-3">
                <h3 class="text-center">
                    <T>calendar.months.{{ i }}</T>
                </h3>
                <CalendarMonthEvents
                    :year="year"
                    :month="i"
                    class="small my-3"
                    :filter="filter"
                    :add-button="addButton"
                    @add="(event) => emit('add', event)"
                />
            </div>
        </div>
    </div>
</template>