[Feature]: Make custom filter-function for CommandDialog Component

apps/www/__registry__/index.ts

@@ -311,6 +311,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CommandDialogDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CommandDialogDemo.vue'],
     },
+    CommandDialogUseFuseDemo: {
+      name: 'CommandDialogUseFuseDemo',
+      type: 'components:example',
+      registryDependencies: ['command'],
+      component: () => import('../src/lib/registry/default/example/CommandDialogUseFuseDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CommandDialogUseFuseDemo.vue'],
+    },
     ContextMenuDemo: {
       name: 'ContextMenuDemo',
       type: 'components:example',
@@ -1265,6 +1272,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CommandDialogDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CommandDialogDemo.vue'],
     },
+    CommandDialogUseFuseDemo: {
+      name: 'CommandDialogUseFuseDemo',
+      type: 'components:example',
+      registryDependencies: ['command'],
+      component: () => import('../src/lib/registry/new-york/example/CommandDialogUseFuseDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CommandDialogUseFuseDemo.vue'],
+    },
     ContextMenuDemo: {
       name: 'ContextMenuDemo',
       type: 'components:example',

apps/www/package.json

@@ -24,6 +24,7 @@
     "@unovis/vue": "^1.3.3",
     "@vee-validate/zod": "^4.12.5",
     "@vueuse/core": "^10.7.2",
+    "@vueuse/integrations": "^10.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "codesandbox": "^2.2.3",

apps/www/src/content/docs/components/command.md

@@ -137,7 +137,106 @@ watch(CmdJ, (v) => {
   </div>
 </template>
 ```
+### Dialog with custom filter (Fuse.js)
 
+<ComponentPreview name="CommandDialogUseFuseDemo" />
+
+For this Demo we will use the [useFuse](https://vueuse.org/integrations/useFuse/) integration. Don't forget to install `fuse.js` and `@vueuse/integrations`:
+
+```bash
+  pnpm install fuse.js @vueuse/integrations
+```
+
+Code Example:
+```vue 
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/lib/registry/default/ui/command'
+
+const open = ref(false)
+
+const { Meta_M, Ctrl_M } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'm' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
+
+watch([Meta_M, Ctrl_M], (v) => {
+  if (v[0] || v[1])
+    handleOpenChange()
+})
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+function customFiltering(val: string[], term: string) {
+  const { results } = useFuse(term, val, {
+    matchAllWhenSearchEmpty: true,
+    fuseOptions: {
+      shouldSort: false,
+    },
+  })
+
+  return results.value?.map(v => v.item)
+}
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>M
+      </kbd>
+    </p>
+    <CommandDialog v-model:open="open" :filter-function="customFiltering">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>
+```
 ### Combobox
 
 You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.

apps/www/src/lib/registry/default/example/CommandDialogUseFuseDemo.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/lib/registry/default/ui/command'
+
+const open = ref(false)
+
+const { Meta_M, Ctrl_M } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'm' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
+
+watch([Meta_M, Ctrl_M], (v) => {
+  if (v[0] || v[1])
+    handleOpenChange()
+})
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+function customFiltering(val: string[], term: string) {
+  const { results } = useFuse(term, val, {
+    matchAllWhenSearchEmpty: true,
+    fuseOptions: {
+      shouldSort: false,
+    },
+  })
+
+  return results.value?.map(v => v.item)
+}
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>M
+      </kbd>
+    </p>
+    <CommandDialog v-model:open="open" :filter-function="customFiltering">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>

apps/www/src/lib/registry/default/ui/command/CommandDialog.vue

@@ -1,19 +1,31 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
+import { computed } from 'vue'
 import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
 import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 
-const props = defineProps<DialogRootProps>()
+type ArrayOrWrapped<T> = T extends any[] ? T : Array<T>
+interface CommandDialogProps extends DialogRootProps {
+  filterFunction?: (val: ArrayOrWrapped<T>, term: string) => ArrayOrWrapped<T>
+}
+
+const props = defineProps<CommandDialogProps>()
 const emits = defineEmits<DialogRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { filterFunction: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, 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">
+      <Command :filter-function="props.filterFunction" 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>

apps/www/src/lib/registry/new-york/example/CommandDialogUseFuseDemo.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/lib/registry/default/ui/command'
+
+const open = ref(false)
+
+const { Meta_M, Ctrl_M } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'm' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
+
+watch([Meta_M, Ctrl_M], (v) => {
+  if (v[0] || v[1])
+    handleOpenChange()
+})
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+function customFiltering(val: string[], term: string) {
+  const { results } = useFuse(term, val, {
+    matchAllWhenSearchEmpty: true,
+    fuseOptions: {
+      shouldSort: false,
+    },
+  })
+
+  return results.value?.map(v => v.item)
+}
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>M
+      </kbd>
+    </p>
+    <CommandDialog v-model:open="open" :filter-function="customFiltering">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue

@@ -1,19 +1,31 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
+import { computed } from 'vue'
 import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
 import Command from './Command.vue'
-import { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'
+import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 
-const props = defineProps<DialogRootProps>()
+type ArrayOrWrapped<T> = T extends any[] ? T : Array<T>
+interface CommandDialogProps extends DialogRootProps {
+  filterFunction?: (val: ArrayOrWrapped<T>, term: string) => ArrayOrWrapped<T>
+}
+
+const props = defineProps<CommandDialogProps>()
 const emits = defineEmits<DialogRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { filterFunction: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, 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">
+      <Command :filter-function="props.filterFunction" 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>