Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update CommandDialog.vue to add custom filter-function

Browse Source 
Add a custom filter-function to CommandDialog
This commit is contained in:
Mael 2024-03-01 11:00:38 +01:00 committed by GitHub
parent 3d3c5ab3e6
commit bdad527afd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,16 +4,24 @@ import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
import Command from './Command.vue' import Command from './Command.vue'
import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog' 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 emits = defineEmits<DialogRootEmits>()
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits)
const forwardedExceptFilterFunction = computed(() => {
const { filterFunction: _, ...rest } = forwarded.value;
return rest;
});
</script> </script>
<template> <template>
<Dialog v-bind="forwarded"> <Dialog v-bind="forwardedExceptFilterFunction">
<DialogContent class="overflow-hidden p-0 shadow-lg"> <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 /> <slot />
</Command> </Command>
</DialogContent> </DialogContent>