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

fix: passing the generic type that is expected in command.vue

Browse Source
This commit is contained in:
Shl 2024-07-08 17:40:02 +07:00
parent 8291ef452d
commit 8c143aed99
2 changed files with 3 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
View File

@ -31,22 +31,6 @@ const props = defineProps<DataTableFacetedFilter>()
const facets = computed(() => props.column?.getFacetedUniqueValues()) const facets = computed(() => props.column?.getFacetedUniqueValues())
const selectedValues = computed(() => new Set(props.column?.getFilterValue() as string[])) const selectedValues = computed(() => new Set(props.column?.getFilterValue() as string[]))
type ReturnTypeFilterFunction = string[] | number[] | false[] | true[] | Record<string, any>[]
function isListOptions(list: ReturnTypeFilterFunction | DataTableFacetedFilter['options']): list is DataTableFacetedFilter['options'] {
return Array.isArray(list) && list.length > 0 && 'value' in (list[0] as DataTableFacetedFilter['options'])
}
function filterFunction(list: ReturnTypeFilterFunction | DataTableFacetedFilter['options'], term: string): DataTableFacetedFilter['options'] {
if (isListOptions(list)) {
return list.filter(i => i.label.toLowerCase()?.includes(term))
}
else {
console.error('List is not a DataTableFacetedFilter options')
return []
}
}
</script> </script>
<template> <template>
@ -89,7 +73,7 @@ function filterFunction(list: ReturnTypeFilterFunction | DataTableFacetedFilter[
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0" align="start"> <PopoverContent class="w-[200px] p-0" align="start">
<Command <Command
:filter-function="filterFunction" :filter-function="(list: DataTableFacetedFilter['options'], term) => list.filter(i => i.label.toLowerCase()?.includes(term))"
> >
<CommandInput :placeholder="title" /> <CommandInput :placeholder="title" />
<CommandList> <CommandList>

5
apps/www/src/lib/registry/new-york/ui/command/Command.vue
View File

@ -1,12 +1,11 @@
<script setup lang="ts"> <script setup lang="ts" generic="T extends string | number | boolean | Record<string, any>">
import { type HTMLAttributes, computed } from 'vue' import { type HTMLAttributes, computed } from 'vue'
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue' import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue' import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), { const props = withDefaults(defineProps<ComboboxRootProps<T> & { class?: HTMLAttributes['class'] }>(), {
open: true, open: true,
modelValue: '',
}) })
const emits = defineEmits<ComboboxRootEmits>() const emits = defineEmits<ComboboxRootEmits>()