PronounsPage/components/Calendar.vue

<template>
    <div v-if="config.calendar?.enabled" class="calendar">
        <div v-for="i in (startingDayOfWeek - 1)" :key="i"></div>
        <component
            :is="tooltips || getDayClass(d) === 'day' ? 'div' : 'nuxt-link'"
            v-for="d in iterateMonth(year.year, month)"
            :key="d.toString()"
            :to="calendarDayRoute(d)"
            :class="['rounded-circle', getDayClass(d), mark && d.equals(mark) ? 'day-today' : '', d.equals(store.selectedDay) ? 'day-selected' : '']"
            :data-flag="getDayFlag(d)"
            :style="getDayFlag(d) ? `background-image: url('${getDayFlag(d)}')` : ''"
            @click.stop="selectDay(d)"
        >
            <div class="day-number">
                {{ d.day }}
            </div>
            <div v-if="tooltips && year.eventsByDate[d.toString()] !== undefined && d.equals(store.selectedDay)" class="day-tooltip card text-dark shadow">
                <div class="card-header d-flex justify-content-between">
                    <p class="h5 mb-0">
                        <DateWords :day="d" />
                    </p>
                    <span>
                        <nuxt-link :to="calendarDayRoute(d)">
                            <Icon v="link" />
                            <T>calendar.link</T>
                        </nuxt-link>
                        <button type="button" class="btn btn-sm py-0" @click="store.selectedDay = null">
                            <Icon v="times" />
                        </button>
                    </span>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li v-for="event in year.eventsByDate[d.toString()]" class="mb-2">
                            <CalendarEvent :key="event.name" :event="event" :year="year.year" ics />
                        </li>
                    </ul>
                </div>
            </div>
        </component>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';

import useConfig from '../composables/useConfig.ts';
import { Day, iterateMonth, EventLevel, Year } from '../src/calendar/helpers.ts';
import { useMainStore } from '../store/index.ts';

interface Data {
    iterateMonth: typeof iterateMonth;
}

export default defineComponent({
    props: {
        year: { required: true, type: Year },
        month: { required: true, type: Number },
        mark: { default: null, type: Day as PropType<Day | null> },
        tooltips: { type: Boolean },
    },
    setup() {
        return {
            config: useConfig(),
            store: useMainStore(),
        };
    },
    data(): Data {
        return {
            iterateMonth,
        };
    },
    computed: {
        startingDayOfWeek() {
            return new Day(this.year.year, this.month, 1).dayOfWeek;
        },
    },
    mounted() {
        document.addEventListener('click', this.documentClicked);
    },
    unmounted() {
        document.removeEventListener('click', this.documentClicked);
    },
    methods: {
        getDayClass(d: Day): string {
            if (this.year.eventsByDate[d.toString()] === undefined) {
                return 'day';
            }

            let maxLevel = 0;
            for (const event of this.year.eventsByDate[d.toString()]) {
                if (event.level > maxLevel) {
                    maxLevel = event.level;
                }
            }

            return `day day-event day-event-${maxLevel}`;
        },
        getDayFlag(d: Day): string | null {
            for (const event of (this.year.eventsByDate[d.toString()] || []).filter((e) => e.level === EventLevel.Day && e.display.type === 'flag')) {
                return `/flags/${event.display.name}.png`;
            }
            return null;
        },
        documentClicked(): void {
            this.store.selectedDay = null;
        },
        selectDay(d: Day): void {
            if (!this.tooltips) {
                return;
            }
            if (d.equals(this.store.selectedDay)) {
                this.store.selectedDay = null;
            } else {
                this.store.selectedDay = d;
            }
        },
    },
});
</script>

<style lang="scss" scoped>
    @use "sass:color";
    @import "assets/variables";

    .calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-column-gap: 2px;
        grid-row-gap: 2px;
        > .day {
            /*aspect-ratio: 1;*/
            &::before {
                float: left;
                padding-top: 100%;
                content: '';
            }
            &::after {
                display: block;
                content: '';
                clear: both;
            }

            display: flex;
            align-items: center;
            justify-content: space-evenly;
            cursor: default;
            user-select: none;
            position: relative;
            &.day-event {
                cursor: pointer;
                &.day-event-0 {
                    background-color: color.adjust($primary, $lightness: 50%, $space: hsl);
                }
                &.day-event-1 {
                    background-color: color.adjust($primary, $lightness: 40%, $space: hsl);
                }
                &.day-event-2 {
                    background-color: color.adjust($primary, $lightness: 50%, $space: hsl);
                    border: 1px solid color.adjust($primary, $lightness: 25%, $space: hsl);
                }
                &.day-event-3 {
                    border: 1px solid color.adjust($primary, $lightness: 25%, $space: hsl);
                    background-color: $primary;
                    color: $white;
                    .day-number {
                        font-weight: bold;
                    }
                    &[data-flag] {
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                        .day-number {
                            text-shadow: black 1px 1px 3px
                        }
                    }
                }
                &:hover, &.day-selected {
                    background: color.adjust($primary, $lightness: 25%, $space: hsl) !important;
                    box-shadow: $box-shadow;
                    .day-number {
                        color: $white;
                    }
                }
            }
            &.day-today {
                border: 3px solid $black !important;
                box-shadow: $box-shadow;
            }
            .day-tooltip {
                position: absolute;
                bottom: 0;
                left: 100%;
                width: 360px;
                z-index: 1040;
                cursor: default;
                @include media-breakpoint-down('md', $grid-breakpoints) {
                    position: fixed;
                    left: 0;
                    width: 100%;
                    padding-bottom: 3rem;
                }
            }
        }
    }
</style>