From a906ca1883d921d7464d817f3688961457a73012 Mon Sep 17 00:00:00 2001
From: "hrynevych.romann" <hrynevych.romann@gmail.com>
Date: Tue, 16 Jan 2024 23:10:50 +0200
Subject: [PATCH] feat(command-dialog): add filter-function prop for
 CommandDialog component

Closes: #158
---
 .../lib/registry/default/ui/command/CommandDialog.vue | 11 ++++++++---
 .../registry/new-york/ui/command/CommandDialog.vue    | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 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 ff7747fe..b7556374 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
@@ -1,10 +1,15 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import { useEmitAsProps } 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 emitsAsProps = useEmitAsProps(emits)
@@ -13,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
 <template>
   <Dialog v-bind="{ ...props, ...emitsAsProps }">
     <DialogContent class="p-0 overflow-hidden 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>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
index 7a5e3ff8..86ce24d0 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
@@ -1,10 +1,15 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
 import { useEmitAsProps } from 'radix-vue'
 import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/new-york/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 emitsAsProps = useEmitAsProps(emits)
@@ -13,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
 <template>
   <Dialog v-bind="{ ...props, ...emitsAsProps }">
     <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>