chore: ⬆️ Upgrade to the latest Shadcn-Vue version

components/ui/command/Command.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
-import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
-import { type HTMLAttributes, computed } from "vue";
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { type HTMLAttributes, computed, reactive, ref, watch } from "vue";
+import { provideCommandContext } from ".";
 
 const props = withDefaults(
-    defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(),
+    defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(),
     {
-        open: true,
         modelValue: "",
     },
 );
 
-const emits = defineEmits<ComboboxRootEmits>();
+const emits = defineEmits<ListboxRootEmits>();
 
 const delegatedProps = computed(() => {
     const { class: _, ...delegated } = props;
@@ -21,11 +21,84 @@ const delegatedProps = computed(() => {
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const allItems = ref<Map<string, string>>(new Map());
+const allGroups = ref<Map<string, Set<string>>>(new Map());
+
+const { contains } = useFilter({ sensitivity: "base" });
+const filterState = reactive({
+    search: "",
+    filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: new Map() as Map<string, number>,
+        /** Set of groups with at least one visible item. */
+        groups: new Set() as Set<string>,
+    },
+});
+
+function filterItems() {
+    if (!filterState.search) {
+        filterState.filtered.count = allItems.value.size;
+        // Do nothing, each item will know to show itself because search is empty
+        return;
+    }
+
+    // Reset the groups
+    filterState.filtered.groups = new Set();
+    let itemCount = 0;
+
+    // Check which items should be included
+    for (const [id, value] of allItems.value) {
+        const score = contains(value, filterState.search);
+        filterState.filtered.items.set(id, score ? 1 : 0);
+        if (score) {
+            itemCount++;
+        }
+    }
+
+    // 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)) {
+                filterState.filtered.groups.add(groupId);
+                break;
+            }
+        }
+    }
+
+    filterState.filtered.count = itemCount;
+}
+
+function handleSelect() {
+    filterState.search = "";
+}
+
+watch(
+    () => filterState.search,
+    () => {
+        filterItems();
+    },
+);
+
+provideCommandContext({
+    allItems,
+    allGroups,
+    filterState,
+});
 </script>
 
 <template>
-    <ComboboxRoot v-bind="forwarded"
-        :class="cn('flex h-full w-full flex-col overflow-hidden rounded bg-popover text-popover-foreground', props.class)">
+    <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 />
-    </ComboboxRoot>
+    </ListboxRoot>
 </template>

components/ui/command/CommandDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "radix-vue";
-import { useForwardPropsEmits } from "radix-vue";
-import { Dialog, DialogContent } from "~/components/ui/dialog";
+import { Dialog, DialogContent } 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>();

components/ui/command/CommandEmpty.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxEmptyProps } from "radix-vue";
-import { ComboboxEmpty } from "radix-vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
+import { useCommand } from ".";
 
 const props = defineProps<
-    ComboboxEmptyProps & { class?: HTMLAttributes["class"] }
+    PrimitiveProps & { class?: HTMLAttributes["class"] }
 >();
 
 const delegatedProps = computed(() => {
@@ -13,10 +14,15 @@ const delegatedProps = computed(() => {
 
     return delegated;
 });
+
+const { filterState } = useCommand();
+const isRender = computed(
+    () => !!filterState.search && filterState.filtered.count === 0,
+);
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
-  </ComboboxEmpty>
+  </Primitive>
 </template>

components/ui/command/CommandGroup.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxGroupProps } from "radix-vue";
-import { ComboboxGroup, ComboboxLabel } from "radix-vue";
-import { type HTMLAttributes, computed } from "vue";
+import type { ListboxGroupProps } from "reka-ui";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { type HTMLAttributes, computed, onMounted, onUnmounted } from "vue";
+import { provideCommandGroupContext, useCommand } from ".";
 
 const props = defineProps<
-    ComboboxGroupProps & {
+    ListboxGroupProps & {
         class?: HTMLAttributes["class"];
         heading?: string;
     }
@@ -16,16 +17,43 @@ const delegatedProps = computed(() => {
 
     return delegated;
 });
+
+const { allGroups, filterState } = useCommand();
+const id = useId();
+
+const isRender = computed(() =>
+    filterState.search ? filterState.filtered.groups.has(id) : true,
+);
+
+provideCommandGroupContext({ id });
+onMounted(() => {
+    if (!allGroups.value.has(id)) {
+        allGroups.value.set(id, new Set());
+    }
+});
+onUnmounted(() => {
+    allGroups.value.delete(id);
+});
 </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>
+    <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>
 </template>

components/ui/command/CommandInput.vue

@@ -2,18 +2,19 @@
 import { cn } from "@/lib/utils";
 import { Search } from "lucide-vue-next";
 import {
-    ComboboxInput,
-    type ComboboxInputProps,
+    ListboxFilter,
+    type ListboxFilterProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
+import { useCommand } from ".";
 
 defineOptions({
     inheritAttrs: false,
 });
 
 const props = defineProps<
-    ComboboxInputProps & {
+    ListboxFilterProps & {
         class?: HTMLAttributes["class"];
     }
 >();
@@ -25,12 +26,18 @@ const delegatedProps = computed(() => {
 });
 
 const forwardedProps = useForwardProps(delegatedProps);
+
+const { filterState } = useCommand();
 </script>
 
 <template>
-    <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-        <Search 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-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
-    </div>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      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)"
+    />
+  </div>
 </template>

components/ui/command/CommandItem.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";
-import { ComboboxItem, useForwardPropsEmits } from "radix-vue";
-import { type HTMLAttributes, computed } from "vue";
+import { useCurrentElement } from "@vueuse/core";
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import {
+    type HTMLAttributes,
+    computed,
+    onMounted,
+    onUnmounted,
+    ref,
+} from "vue";
+import { useCommand, useCommandGroup } from ".";
 
 const props = defineProps<
-    ComboboxItemProps & { class?: HTMLAttributes["class"] }
+    ListboxItemProps & { class?: HTMLAttributes["class"] }
 >();
-const emits = defineEmits<ComboboxItemEmits>();
+const emits = defineEmits<ListboxItemEmits>();
 
 const delegatedProps = computed(() => {
     const { class: _, ...delegated } = props;
@@ -16,13 +24,72 @@ const delegatedProps = computed(() => {
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
+
+const isRender = computed(() => {
+    if (filterState.search) {
+        const filteredCurrentItem = filterState.filtered.items.get(id);
+        // If the filtered items is undefined means not in the all times map yet
+        // Do the first render to add into the map
+        if (filteredCurrentItem === undefined) {
+            return true;
+        }
+
+        // Check with filter
+        return filteredCurrentItem > 0;
+    }
+
+    return true;
+});
+
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
+onMounted(() => {
+    if (!(currentElement.value instanceof HTMLElement)) {
+        return;
+    }
+
+    // textValue to perform filter
+    allItems.value.set(
+        id,
+        currentElement.value.textContent ?? props.value?.toString() ?? "",
+    );
+
+    const groupId = groupContext?.id;
+    if (groupId) {
+        if (allGroups.value.has(groupId)) {
+            allGroups.value.get(groupId)?.add(id);
+        } else {
+            allGroups.value.set(groupId, new Set([id]));
+        }
+    }
+});
+onUnmounted(() => {
+    allItems.value.delete(id);
+});
 </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-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
-  >
-    <slot />
-  </ComboboxItem>
+    <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>
 </template>

components/ui/command/CommandList.vue

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

components/ui/command/CommandSeparator.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxSeparatorProps } from "radix-vue";
-import { ComboboxSeparator } from "radix-vue";
+import type { SeparatorProps } from "reka-ui";
+import { Separator } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
-    ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }
+    SeparatorProps & { class?: HTMLAttributes["class"] }
 >();
 
 const delegatedProps = computed(() => {
@@ -16,10 +16,10 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator
+  <Separator
     v-bind="delegatedProps"
     :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
-  </ComboboxSeparator>
+  </Separator>
 </template>

components/ui/command/index.ts

@@ -1,3 +1,6 @@
+import { createContext } from "reka-ui";
+import type { Ref } from "vue";
+
 export { default as Command } from "./Command.vue";
 export { default as CommandDialog } from "./CommandDialog.vue";
 export { default as CommandEmpty } from "./CommandEmpty.vue";
@@ -7,3 +10,20 @@ export { default as CommandItem } from "./CommandItem.vue";
 export { default as CommandList } from "./CommandList.vue";
 export { default as CommandSeparator } from "./CommandSeparator.vue";
 export { default as CommandShortcut } from "./CommandShortcut.vue";
+
+export const [useCommand, provideCommandContext] = createContext<{
+    allItems: Ref<Map<string, string>>;
+    allGroups: Ref<Map<string, Set<string>>>;
+    filterState: {
+        search: string;
+        filtered: {
+            count: number;
+            items: Map<string, number>;
+            groups: Set<string>;
+        };
+    };
+}>("Command");
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+    id?: string;
+}>("CommandGroup");