76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
import type { LeimDate } from '@/models/Date'
|
|
import { useCalendar } from '@/stores/CalendarStore'
|
|
import { useThrottleFn } from '@vueuse/core'
|
|
import { computed } from 'vue'
|
|
|
|
import CalendarTile from '../CalendarTile.vue'
|
|
|
|
const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
|
|
|
|
const daysPerMonth = computed(() => staticConfig.daysPerMonth)
|
|
|
|
function getNextMonthDate(day: number): LeimDate {
|
|
let nextDay = day
|
|
let nextMonth = currentDate.currentMonth + 1
|
|
let nextYear = currentDate.currentYear
|
|
let nextPeriod = currentDate.currentPeriod
|
|
|
|
// If the new value would exceed the max number of month per year
|
|
if (nextMonth >= staticConfig.monthsPerYear) {
|
|
nextMonth = 0
|
|
// Increment the year
|
|
nextYear++
|
|
}
|
|
|
|
if (nextYear >= 0) {
|
|
nextPeriod = 'nante'
|
|
}
|
|
|
|
return {
|
|
day: nextDay,
|
|
month: nextMonth,
|
|
year: nextYear,
|
|
period: nextPeriod
|
|
}
|
|
}
|
|
|
|
function handleWheel(e: WheelEvent) {
|
|
const isMovingUp = e.deltaY < 0
|
|
if (isMovingUp) {
|
|
moveCalendarLeft()
|
|
} else {
|
|
moveCalendarRight()
|
|
}
|
|
}
|
|
|
|
const moveCalendarLeft = useThrottleFn(() => {
|
|
decrementMonth()
|
|
}, 100)
|
|
|
|
const moveCalendarRight = useThrottleFn(() => {
|
|
incrementMonth()
|
|
}, 100)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid" :class="`grid-cols-10`" @wheel="handleWheel">
|
|
<CalendarTile
|
|
v-for="day in daysPerMonth"
|
|
:key="day"
|
|
:date="{
|
|
day: day,
|
|
month: currentDate.currentMonth,
|
|
year: currentDate.currentYear,
|
|
period: currentDate.currentPeriod
|
|
}"
|
|
/>
|
|
<CalendarTile
|
|
v-for="nextMonthDay in 8"
|
|
:key="nextMonthDay"
|
|
faded
|
|
:date="getNextMonthDate(nextMonthDay)"
|
|
/>
|
|
</div>
|
|
</template>
|