59 lines
1.9 KiB
Vue
59 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
import type { RPGDate } from '@/models/Date'
|
|
import { useCalendar } from '@/stores/CalendarStore'
|
|
import { useCalendarEvents } from '@/stores/EventStore'
|
|
import { storeToRefs } from 'pinia'
|
|
import { computed, type ComputedRef } from 'vue'
|
|
|
|
const { currentDate, defaultDate, selectDate } = useCalendar()
|
|
const { selectedDate } = storeToRefs(useCalendar())
|
|
const { currentEvents } = storeToRefs(useCalendarEvents())
|
|
|
|
const props = defineProps<{
|
|
monthNumber: number
|
|
dayNumber: number
|
|
}>()
|
|
|
|
const { areDatesIdentical } = useCalendar()
|
|
|
|
const tileDate: ComputedRef<RPGDate> = computed(() => {
|
|
return {
|
|
day: props.dayNumber,
|
|
month: props.monthNumber,
|
|
year: currentDate.currentYear
|
|
}
|
|
})
|
|
|
|
const isDefaultDate = computed<boolean>(() => {
|
|
return areDatesIdentical(tileDate.value, defaultDate)
|
|
})
|
|
|
|
const isSelectedDate = computed<boolean>(() => {
|
|
return areDatesIdentical(tileDate.value, selectedDate.value)
|
|
})
|
|
|
|
const hasAtLeastOneEvent = computed<boolean>(() => {
|
|
return Boolean(
|
|
currentEvents.value.find((currentEvent) => {
|
|
return areDatesIdentical(currentEvent.startDate, tileDate.value)
|
|
})
|
|
)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors"
|
|
:class="{
|
|
'hover:bg-slate-800 hover:border-slate-800': !isDefaultDate && !isSelectedDate,
|
|
'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate,
|
|
'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate,
|
|
'after:bg-green-600': hasAtLeastOneEvent,
|
|
'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
|
|
}"
|
|
@click="selectDate(tileDate)"
|
|
>
|
|
<span ref="tileRef" class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
|
|
</button>
|
|
</template>
|