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

feat(command-dialog): add filter-function prop for CommandDialog component

Browse Source 
Closes: #158
This commit is contained in:
hrynevych.romann 2024-01-16 23:10:50 +02:00
parent 825f14e8b5
commit a906ca1883
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,15 @@
<script setup lang="ts"> <script setup lang="ts" generic="T">
import { useEmitAsProps } from 'radix-vue' import { useEmitAsProps } from 'radix-vue'
import type { DialogRootEmits, DialogRootProps } from 'radix-vue' 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>() 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 emits = defineEmits<DialogRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const emitsAsProps = useEmitAsProps(emits)
@ -13,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
<template> <template>
<Dialog v-bind="{ ...props, ...emitsAsProps }"> <Dialog v-bind="{ ...props, ...emitsAsProps }">
<DialogContent class="p-0 overflow-hidden shadow-lg"> <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 /> <slot />
</Command> </Command>
</DialogContent> </DialogContent>

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

@ -1,10 +1,15 @@
<script setup lang="ts"> <script setup lang="ts" generic="T">
import type { DialogRootEmits, DialogRootProps } from 'radix-vue' import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
import { useEmitAsProps } from 'radix-vue' import { useEmitAsProps } from 'radix-vue'
import Command from './Command.vue' import Command from './Command.vue'
import { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog' 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 emits = defineEmits<DialogRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const emitsAsProps = useEmitAsProps(emits)
@ -13,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
<template> <template>
<Dialog v-bind="{ ...props, ...emitsAsProps }"> <Dialog v-bind="{ ...props, ...emitsAsProps }">
<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="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 /> <slot />
</Command> </Command>
</DialogContent> </DialogContent>