Migration to nuxt 4

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

app/components/global/input/Color.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { type RPGColor, rpgColors } from "@@/models/Color";
+
+const { id, theme = "normal", position = "popper" } = defineProps<{
+  id: string
+  theme?: "normal" | "subtle"
+  position?: "item-aligned" | "popper" | undefined
+}>();
+
+const model = defineModel<RPGColor>({ default: "white" });
+</script>
+
+<template>
+  <UiSelect v-model="model">
+    <UiSelectTrigger :id :class="cn({ 'h-9': theme === 'subtle' })">
+      <UiSelectValue
+        :placeholder="$t('ui.colors.selectOne')"
+        class="bgc"
+        :class="cn(`element-${model}`)"
+      />
+    </UiSelectTrigger>
+    <UiSelectContent :position>
+      <UiSelectGroup>
+        <UiSelectItem
+          v-for="color in rpgColors"
+          :key="color"
+          :value="color"
+          class="bgc"
+          :class="
+            cn(
+              `element-${color}`,
+            )
+          "
+        >
+          {{ $t(`ui.colors.${color}`) }}
+        </UiSelectItem>
+      </UiSelectGroup>
+    </UiSelectContent>
+  </UiSelect>
+</template>

app/components/global/input/ContentState.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { contentStates, type ContentState } from "@@/models/Entity";
+
+defineProps<{
+  id: string
+}>();
+
+const model = defineModel<ContentState>({ default: "draft" });
+</script>
+
+<template>
+  <UiSelect v-model="model">
+    <UiSelectTrigger :id>
+      <UiSelectValue
+        :placeholder="$t('ui.contentState.selectOne')"
+      />
+    </UiSelectTrigger>
+    <UiSelectContent position="popper">
+      <UiSelectGroup>
+        <UiSelectItem
+          v-for="state in contentStates"
+          :key="state"
+          :value="state"
+        >
+          {{ $t(`ui.contentState.${state}`) }}
+        </UiSelectItem>
+      </UiSelectGroup>
+    </UiSelectContent>
+  </UiSelect>
+</template>