refactor: ⬆️ Upgrade to Tailwind v4

components/ui/command/Command.vue

@@ -61,7 +61,7 @@ function filterItems() {
     // Check which groups have at least 1 item shown
     for (const [groupId, group] of allGroups.value) {
         for (const itemId of group) {
-            if (filterState.filtered.items.get(itemId)) {
+            if ((filterState.filtered.items.get(itemId) ?? 0) > 0) {
                 filterState.filtered.groups.add(groupId);
                 break;
             }
@@ -90,15 +90,11 @@ provideCommandContext({
 </script>
 
 <template>
-    <ListboxRoot
-        v-bind="forwarded"
-        :class="
-            cn(
-                'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
-                props.class
-            )
-        "
-    >
-        <slot />
-    </ListboxRoot>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
 </template>

components/ui/command/CommandDialog.vue

@@ -1,10 +1,27 @@
 <script setup lang="ts">
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
 import type { DialogRootEmits, DialogRootProps } from "reka-ui";
 import { useForwardPropsEmits } from "reka-ui";
 import Command from "./Command.vue";
 
-const props = defineProps<DialogRootProps>();
+const props = withDefaults(
+    defineProps<
+        DialogRootProps & {
+            title?: string;
+            description?: string;
+        }
+    >(),
+    {
+        title: "Command Palette",
+        description: "Search for a command to run...",
+    },
+);
 const emits = defineEmits<DialogRootEmits>();
 
 const forwarded = useForwardPropsEmits(props, emits);
@@ -12,8 +29,12 @@ const forwarded = useForwardPropsEmits(props, emits);
 
 <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">
+    <DialogHeader class="sr-only">
+      <DialogTitle>{{ title }}</DialogTitle>
+      <DialogDescription>{{ description }}</DialogDescription>
+    </DialogHeader>
+    <DialogContent class="overflow-hidden p-0 ">
+      <Command>
         <slot />
       </Command>
     </DialogContent>

components/ui/command/CommandEmpty.vue

@@ -22,7 +22,11 @@ const isRender = computed(
 </script>
 
 <template>
-  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+  >
     <slot />
   </Primitive>
 </template>

components/ui/command/CommandGroup.vue

@@ -37,23 +37,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <ListboxGroup
-        v-bind="delegatedProps"
-        :id="id"
-        :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
-            )
-        "
-        :hidden="isRender ? undefined : true"
-    >
-        <ListboxGroupLabel
-            v-if="heading"
-            class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
-        >
-            {{ heading }}
-        </ListboxGroupLabel>
-        <slot />
-    </ListboxGroup>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
 </template>

components/ui/command/CommandInput.vue

@@ -31,13 +31,17 @@ const { filterState } = useCommand();
 </script>
 
 <template>
-  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-12 items-center gap-2 border-b px-3"
+  >
+    <Search class="size-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"
+      data-slot="command-input"
       auto-focus
-      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="cn('placeholder:text-muted-foreground flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     />
   </div>
 </template>

components/ui/command/CommandItem.vue

@@ -73,23 +73,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <ListboxItem
-        v-if="isRender"
-        v-bind="forwarded"
-        :id="id"
-        ref="itemRef"
-        :class="
-            cn(
-                'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
-                props.class
-            )
-        "
-        @select="
-            () => {
-                filterState.search = '';
-            }
-        "
-    >
-        <slot />
-    </ListboxItem>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
 </template>

components/ui/command/CommandList.vue

@@ -18,7 +18,11 @@ const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
     <div role="presentation">
       <slot />
     </div>

components/ui/command/CommandSeparator.vue

@@ -17,8 +17,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <Separator
+    data-slot="command-separator"
     v-bind="delegatedProps"
-    :class="cn('-mx-1 h-px bg-border', props.class)"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
   >
     <slot />
   </Separator>

components/ui/command/CommandShortcut.vue

@@ -8,7 +8,10 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
     <slot />
   </span>
 </template>