Migration to nuxt 4

Used codemods CLI and reworked most alias'd path that stopped working

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { RPGDate } from "@@/models/Date"
+import { storeToRefs } from "pinia"
+import { computed, type ComputedRef } from "vue"
+
+const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())
+
+const props = defineProps<{
+  monthNumber: number
+  dayNumber: number
+}>()
+
+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="{
+      'text-slate-500 hover:border-indigo-300 hover:text-slate-900': !isDefaultDate && !isSelectedDate,
+      'font-semibold text-white bg-slate-600 dark:bg-slate-800 hover:border-indigo-400': isDefaultDate && !isSelectedDate,
+      'font-semibold text-white bg-indigo-500 hover:bg-indigo-600 hover:border-indigo-500': isSelectedDate,
+      'after:bg-green-600': hasAtLeastOneEvent,
+      'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
+    }"
+    @click="selectDate(tileDate)"
+  >
+    <span ref="tileRef" class="text-[.85em]">{{ dayNumber }}</span>
+  </button>
+</template>

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

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useCalendar } from "@/stores/CalendarStore"
+import { useThrottleFn } from "@vueuse/core"
+
+const { decrementViewYear, incrementViewYear } = useCalendar()
+const { sortedMonths: months } = storeToRefs(useCalendar())
+
+function handleWheel(e: WheelEvent) {
+  const isMovingUp = e.deltaY < 0
+  if (isMovingUp) {
+    moveCalendarLeft()
+  } else {
+    moveCalendarRight()
+  }
+}
+
+const moveCalendarLeft = useThrottleFn(() => {
+  decrementViewYear()
+}, 100)
+
+const moveCalendarRight = useThrottleFn(() => {
+  incrementViewYear()
+}, 100)
+</script>
+
+<template>
+  <div class="container mx-auto mt-[10vh] mb-auto" @wheel="handleWheel">
+    <div class="grid grid-cols-5 gap-x-8 gap-y-16">
+      <CalendarStateYearlyMonthTile
+        v-for="month in months"
+        :key="month.id"
+        :month
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarMonth } from "@@/models/CalendarMonth";
+
+defineProps<{
+  month: CalendarMonth
+}>()
+</script>
+
+<template>
+  <div>
+    <div class="font-medium">
+      {{ month.name }}
+    </div>
+    <div class="grid grid-cols-7 gap-1">
+      <CalendarStateYearlyDayTile
+        v-for="day in month.days"
+        :key="day"
+        :month-number="month.position"
+        :day-number="day"
+      />
+    </div>
+  </div>
+</template>