Migration to nuxt 4

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

app/components/calendar/form/CreateEvent.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import type { RPGDate } from "@@/models/Date";
+import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"
+
+const { t } = useI18n()
+
+const emit = defineEmits(["event-created"])
+
+const props = defineProps<{
+  date?: RPGDate
+  btnClass?: string
+}>()
+
+const { eventSkeleton } = storeToRefs(useCalendar())
+const { submitSkeleton, cancelLatestRequest } = useCalendar()
+
+const newEventTitle = shallowRef<HTMLInputElement>()
+useFocus(newEventTitle, { initialValue: true })
+
+const isLoading = ref(false)
+
+const formErrors = reactive<{ message: string | null }>({
+  message: null
+})
+
+async function handleSubmit() {
+  // Prevent form submission if already loading
+  if (isLoading.value) return
+
+  isLoading.value = true
+
+  const { error } = await tryCatch(submitSkeleton())
+
+  if (error) {
+    formErrors.message = error.message
+    isLoading.value = false
+    return
+  }
+
+  emit("event-created")
+  isLoading.value = false
+}
+
+/**
+ * Click on the cancel button
+ *
+ * Must cancel the abortController in the store, and stop the loading
+ */
+function handleCancel() {
+  cancelLatestRequest()
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit">
+    <div class="grid grid-cols-2 gap-y-3">
+      <div class="col-span-2 pl-8">
+        <input
+          id="new-event-title"
+          ref="newEventTitle"
+          v-model="eventSkeleton.title"
+          type="text"
+          name="new-event-title"
+          required
+          :placeholder="$t('entity.calendar.event.title')"
+          :maxlength="120"
+          pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
+          class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600 invalid:border-red-500"
+        >
+        <div class="mt-2 mb-1 text-xs opacity-50">
+          {{ t('entity.calendar.event.patterns.title') }}
+        </div>
+      </div>
+
+      <div class="col-span-2 my-2 pl-8">
+        <textarea
+          id="new-event-description"
+          v-model="eventSkeleton.description"
+          name="new-event-description"
+          :placeholder="$t('entity.addDescription')"
+          :maxlength="1200"
+          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600 invalid:border-red-500"
+        />
+        <div class="mt-2 mb-1 text-xs opacity-50">
+          {{ t('entity.calendar.event.patterns.description') }}
+        </div>
+      </div>
+
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhAlarm size="18" weight="fill" />
+
+          <CalendarInputRPGDate
+            v-model:model-value="eventSkeleton.startDate"
+            :placeholder="$t('entity.calendar.date.start')"
+            :initial-date="props.date"
+            :required="true"
+          />
+
+          <span>—</span>
+
+          <CalendarInputRPGDate
+            v-model:model-value="eventSkeleton.endDate"
+            :placeholder="$t('entity.calendar.date.end')"
+            :initial-date="props.date"
+          />
+        </div>
+      </div>
+
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhTag size="18" weight="fill" />
+
+          <CalendarInputEventCategory
+            v-model="eventSkeleton.category"
+            :placeholder="$t('entity.category.addPrimary')"
+          />
+        </div>
+      </div>
+
+      <div class="col-span-2 mb-2">
+        <div class="flex items-center gap-4">
+          <PhMapPinArea size="18" weight="fill" />
+
+          <div class="grow">
+            <input
+              id="new-event-location"
+              v-model="eventSkeleton.location"
+              type="text"
+              name="new-event-location"
+              :placeholder="$t('entity.calendar.event.addLocation')"
+              :maxlength="160"
+              pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,160}"
+              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
+            >
+            <div class="mt-2 mb-1 text-xs opacity-50">
+              {{ t('entity.calendar.event.patterns.location') }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
+          <PhEyeClosed v-else size="18" />
+
+          <div class="flex items-center gap-x-2">
+            <UiCheckbox id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+            <UiLabel for="new-event-visibility">
+              {{ $t('entity.calendar.event.hiddenLabel') }}
+            </UiLabel>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-red-500 pl-8">
+        <span class="text-sm">
+          {{ formErrors.message }}
+        </span>
+      </div>
+
+      <div class="flex gap-2 justify-end">
+        <Transition name="fade-delay">
+          <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+            {{ $t('ui.action.cancel') }}
+          </UiButton>
+        </Transition>
+
+        <UiButton size="sm" :disabled="isLoading">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+          </Transition>
+
+          {{ $t('ui.action.save') }}
+        </UiButton>
+      </div>
+    </div>
+  </form>
+</template>