From bdad527afdf8140ad47f4edabc0e3498f8ad53e8 Mon Sep 17 00:00:00 2001
From: Mael <mael.primet@gmail.com>
Date: Fri, 1 Mar 2024 11:00:38 +0100
Subject: [PATCH] Update CommandDialog.vue to add custom filter-function

Add a custom filter-function to CommandDialog
---
 .../registry/default/ui/command/CommandDialog.vue  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
index 37c8406a..d46606d5 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
@@ -4,16 +4,24 @@ 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>()
+const props = defineProps<
+  DialogRootProps & {
+    filterFunction?: (val: Array<string | any>, term: string) => Array<any>;
+  }
+>();
 const emits = defineEmits<DialogRootEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
+const forwardedExceptFilterFunction = computed(() => {
+  const { filterFunction: _, ...rest } = forwarded.value;
+  return rest;
+});
 </script>
 
 <template>
-  <Dialog v-bind="forwarded">
+  <Dialog v-bind="forwardedExceptFilterFunction">
     <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="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>