Migration to nuxt 4

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

app/components/ui/command/Command.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue"
+import { ComboboxRoot, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  open: true,
+  modelValue: ""
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ComboboxRoot>
+</template>

app/components/ui/command/CommandDialog.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from "radix-vue"
+import type { DialogRootEmits, DialogRootProps } from "radix-vue"
+import Command from "./Command.vue"
+import { Dialog, DialogContent } from "~/components/ui/dialog"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+      >
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

app/components/ui/command/CommandEmpty.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxEmptyProps } from "radix-vue"
+import { ComboboxEmpty } from "radix-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>

app/components/ui/command/CommandGroup.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxGroupProps } from "radix-vue"
+import { ComboboxGroup, ComboboxLabel } from "radix-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<
+  ComboboxGroupProps & {
+    class?: HTMLAttributes["class"]
+    heading?: string
+  }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        props.class
+      )
+    "
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

app/components/ui/command/CommandInput.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
+import { PhMagnifyingGlass } from "@phosphor-icons/vue"
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps<
+  ComboboxInputProps & {
+    class?: HTMLAttributes["class"]
+  }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <PhMagnifyingGlass class="mr-2 size-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="
+        cn(
+          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          props.class
+        )
+      "
+    />
+  </div>
+</template>

app/components/ui/command/CommandItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue"
+import { ComboboxItem, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-highlighted:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ComboboxItem>
+</template>

app/components/ui/command/CommandList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue"
+import { ComboboxContent, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    dismissable: false
+  }
+)
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>

app/components/ui/command/CommandSeparator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxSeparatorProps } from "radix-vue"
+import { ComboboxSeparator } from "radix-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 h-px bg-border', props.class)">
+    <slot />
+  </ComboboxSeparator>
+</template>

app/components/ui/command/CommandShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

app/components/ui/command/index.ts

@@ -0,0 +1,11 @@
+export { ComboboxPortal } from "radix-vue"
+
+export { default as Command } from "@/components/ui/command/Command.vue"
+export { default as CommandDialog } from "@/components/ui/command/CommandDialog.vue"
+export { default as CommandEmpty } from "@/components/ui/command/CommandEmpty.vue"
+export { default as CommandGroup } from "@/components/ui/command/CommandGroup.vue"
+export { default as CommandInput } from "@/components/ui/command/CommandInput.vue"
+export { default as CommandItem } from "@/components/ui/command/CommandItem.vue"
+export { default as CommandList } from "@/components/ui/command/CommandList.vue"
+export { default as CommandSeparator } from "@/components/ui/command/CommandSeparator.vue"
+export { default as CommandShortcut } from "@/components/ui/command/CommandShortcut.vue"