Added basic year view

src/components/calendar/Calendar.vue

@@ -1,28 +1,30 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed } from 'vue'
+
 import CalendarMenu from './CalendarMenu.vue'
-import Century from './state/Century.vue'
-import Decade from './state/Decade.vue'
-import Monthly from './state/Monthly.vue'
-import Year from './state/Year.vue'
+
+import MonthlyLayout from './state/monthly/Layout.vue'
+import CenturyLayout from './state/centennially/Layout.vue'
+import DecadeLayout from './state/decennially/Layout.vue'
+import YearLayout from './state/yearly/Layout.vue'
 
 const { currentConfig } = useCalendar()
 
 const currentViewComponent = computed(() => {
   switch (currentConfig.viewType) {
     case 'month':
-      return Monthly
+      return MonthlyLayout
 
     case 'year':
-      return Year
+      return YearLayout
 
     case 'decade':
-      return Decade
+      return DecadeLayout
 
     case 'century':
     default:
-      return Century
+      return CenturyLayout
   }
 })
 </script>

src/components/calendar/state/Year.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>Annuel</div>
-</template>

src/components/calendar/state/monthly/DayTile.vue

@@ -7,7 +7,7 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import CalendarEventButton from './CalendarEvent.vue'
+import CalendarEventButton from '../../CalendarEvent.vue'
 import type { CalendarEvent } from '@/models/Events'
 
 const props = defineProps<{
@@ -107,8 +107,8 @@ const eventsNotDisplayed = computed(
               <span
                 class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
               >
-                {{ date.day }}</span
-              >
+                {{ date.day }}
+              </span>
             </div>
             <ul class="grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity">
               <li

src/components/calendar/state/monthly/Layout.vue

@@ -4,7 +4,7 @@ import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'
 
-import CalendarTile from '../CalendarTile.vue'
+import DayTile from './DayTile.vue'
 
 const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
 
@@ -54,8 +54,8 @@ const moveCalendarRight = useThrottleFn(() => {
 </script>
 
 <template>
-  <div class="grid" :class="`grid-cols-10`" @wheel="handleWheel">
-    <CalendarTile
+  <div class="grid grid-cols-10" @wheel="handleWheel">
+    <DayTile
       v-for="day in daysPerMonth"
       :key="day"
       :date="{
@@ -65,7 +65,7 @@ const moveCalendarRight = useThrottleFn(() => {
         period: currentDate.currentPeriod
       }"
     />
-    <CalendarTile
+    <DayTile
       v-for="nextMonthDay in 8"
       :key="nextMonthDay"
       faded

src/components/calendar/state/yearly/DayTile.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { storeToRefs } from 'pinia'
+import { computed, type ComputedRef } from 'vue'
+
+const { currentDate, defaultDate, selectDate } = useCalendar()
+const { selectedDate } = storeToRefs(useCalendar())
+
+const props = defineProps<{
+  monthNumber: number
+  dayNumber: number
+}>()
+
+const tileDate: ComputedRef<LeimDate> = computed(() => {
+  return {
+    day: props.dayNumber,
+    month: props.monthNumber,
+    year: currentDate.currentYear
+  }
+})
+
+const isDefaultDate = computed(() => {
+  return areDatesIdentical(tileDate.value, defaultDate)
+})
+
+const isSelectedDate = computed(() => {
+  return areDatesIdentical(tileDate.value, selectedDate.value)
+})
+</script>
+
+<template>
+  <button
+    class="grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors hover:bg-slate-800 hover:border-slate-800"
+    :class="{
+      '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
+    }"
+    @click="selectDate(tileDate)"
+  >
+    <span class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
+  </button>
+</template>

src/components/calendar/state/yearly/Layout.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/CalendarStore'
+import { computed } from 'vue'
+
+import MonthTile from './MonthTile.vue'
+
+const { staticConfig } = useCalendar()
+
+const monthsPerYear = computed(() => staticConfig.monthsPerYear)
+</script>
+
+<template>
+  <div class="container mt-[10vh] mb-auto">
+    <div class="grid grid-cols-5 gap-x-8 gap-y-16">
+      <MonthTile v-for="month in monthsPerYear" :key="month" :month-number="month - 1" />
+    </div>
+  </div>
+</template>

src/components/calendar/state/yearly/MonthTile.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { computed, type ComputedRef } from 'vue'
+
+import DayTile from './DayTile.vue'
+
+const { staticConfig, currentDate, getMonthName } = useCalendar()
+
+const props = defineProps<{
+  monthNumber: number
+}>()
+
+const daysPerMonth = computed(() => staticConfig.daysPerMonth)
+const tileMonthName = computed(() => getMonthName(props.monthNumber))
+</script>
+
+<template>
+  <div>
+    <div class="font-medium">
+      {{ tileMonthName }}
+    </div>
+    <div class="grid grid-cols-7">
+      <DayTile
+        v-for="day in daysPerMonth"
+        :key="day"
+        :month-number="monthNumber"
+        :day-number="day"
+      />
+    </div>
+  </div>
+</template>

src/stores/CalendarStore.ts

@@ -378,7 +378,6 @@ export const useCalendar = defineStore('calendar', () => {
    */
   function jumpToDefaultDate(): void {
     jumpToDate(defaultDate.value)
-    currentConfig.value.viewType = 'month'
   }
 
   /**