Migration to nuxt 4

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

app/components/calendar/dialog/Delete.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from "@phosphor-icons/vue";
+import { useToast } from "~/components/ui/toast";
+import { ToastLifetime } from "~/components/ui/toast/use-toast";
+import type { Calendar } from "@@/models/CalendarConfig";
+
+const { toast } = useToast()
+const { t } = useI18n()
+
+const props = defineProps<{
+  modalState: boolean,
+  calendar: Calendar | null
+}>()
+
+const isLoading = ref<boolean>(false)
+
+const emit = defineEmits(["on-close"])
+
+async function handleAction(): Promise<void> {
+  if (isLoading.value) return
+  if (!props.calendar) return
+
+  isLoading.value = true
+
+  const { error } = await tryCatch($fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" }))
+
+  if (error) {
+    toast({
+      title: error.message,
+      variant: "destructive"
+    })
+    isLoading.value = false
+    return
+  }
+
+  toast({
+    title: t("entity.calendar.deletedToast.title", { calendar: props.calendar.name }),
+    variant: "success",
+    duration: ToastLifetime.SHORT
+  })
+
+  emit("on-close")
+  isLoading.value = false
+}
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing() {
+  if (!isLoading.value) {
+    emit("on-close")
+  }
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="min-w-96"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+      @close-auto-focus="(e) => e.preventDefault()"
+    >
+      <UiAlertDialogTitle>
+        {{ $t('entity.calendar.deleteDialog.title') }}
+      </UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        {{ $t('entity.calendar.deleteDialog.subtitle') }}
+      </UiAlertDialogDescription>
+
+      <form @submit.prevent="handleAction">
+        <footer class="flex gap-2 justify-between">
+          <UiButton type="button" size="sm" variant="outline" @click="handleClosing">
+            {{ $t('ui.action.back') }}
+          </UiButton>
+
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+                {{ $t('ui.action.cancel') }}
+              </UiButton>
+            </Transition>
+
+            <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              {{ $t('entity.deleteOne', { entity: calendar?.name }) }}
+            </UiButton>
+          </div>
+        </footer>
+      </form>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>