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

chore: fix ComboboxDemo.vue example types

Browse Source
This commit is contained in:
Sadegh Barati 2023-12-31 22:32:39 +03:30
parent c2e05239f6
commit 34cefe24bd
2 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
apps/www/src/lib/registry/default/example/ComboboxDemo.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Check, ChevronsUpDown } from 'lucide-vue-next'
import { ref } from 'vue' import { ref } from 'vue'
import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/default/ui/button' import { Button } from '@/lib/registry/default/ui/button'
import { import {
@ -27,9 +27,9 @@ const frameworks = [
] ]
const open = ref(false) const open = ref(false)
const value = ref<typeof frameworks[number]>() const value = ref<string>('')
const filterFunction = (list: typeof frameworks, search: string) => list.filter(i => i.value.toLowerCase().includes(search.toLowerCase())) // const filterFunction = (list: typeof frameworks, search: string) => list.filter(i => i.value.toLowerCase().includes(search.toLowerCase()))
</script> </script>
<template> <template>
@ -41,33 +41,36 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
:aria-expanded="open" :aria-expanded="open"
class="w-[200px] justify-between" class="w-[200px] justify-between"
> >
{{ value ? value.label : 'Select framework...' }} {{ value
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" /> ? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..." }}
<CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0"> <PopoverContent class="w-[200px] p-0">
<Command :filter-function="filterFunction"> <Command>
<CommandInput placeholder="Search framework..." /> <CommandInput class="h-9" placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty> <CommandEmpty>No framework found.</CommandEmpty>
<CommandList> <CommandList>
<CommandGroup> <CommandGroup>
<CommandItem <CommandItem
v-for="framework in frameworks" v-for="framework in frameworks"
:key="framework.value" :key="framework.value"
:value="framework" :value="framework.value"
@select="(ev) => { @select="(ev) => {
value = ev.detail.value if (typeof ev.detail.value === 'string') {
console.log(ev) value = ev.detail.value
}
open = false open = false
}" }"
> >
<Check {{ framework.label }}
<CheckIcon
:class="cn( :class="cn(
'mr-2 h-4 w-4', 'ml-auto h-4 w-4',
value?.value === framework.value ? 'opacity-100' : 'opacity-0', value === framework.value ? 'opacity-100' : 'opacity-0',
)" )"
/> />
{{ framework.label }}
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>

18
apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
View File

@ -27,9 +27,9 @@ const frameworks = [
] ]
const open = ref(false) const open = ref(false)
const value = ref<typeof frameworks[number]>() const value = ref<string>('')
const filterFunction = (list: typeof frameworks, search: string) => list.filter(i => i.value.toLowerCase().includes(search.toLowerCase())) // const filterFunction = (list: typeof frameworks, search: string) => list.filter(i => i.value.toLowerCase().includes(search.toLowerCase()))
</script> </script>
<template> <template>
@ -41,12 +41,14 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
:aria-expanded="open" :aria-expanded="open"
class="w-[200px] justify-between" class="w-[200px] justify-between"
> >
{{ value ? value.label : 'Select framework...' }} {{ value
? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..." }}
<CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0"> <PopoverContent class="w-[200px] p-0">
<Command v-model="value" :filter-function="filterFunction"> <Command>
<CommandInput class="h-9" placeholder="Search framework..." /> <CommandInput class="h-9" placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty> <CommandEmpty>No framework found.</CommandEmpty>
<CommandList> <CommandList>
@ -54,9 +56,11 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
<CommandItem <CommandItem
v-for="framework in frameworks" v-for="framework in frameworks"
:key="framework.value" :key="framework.value"
:value="framework" :value="framework.value"
@select="(ev) => { @select="(ev) => {
value = ev.detail.value if (typeof ev.detail.value === 'string') {
value = ev.detail.value
}
open = false open = false
}" }"
> >
@ -64,7 +68,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
<CheckIcon <CheckIcon
:class="cn( :class="cn(
'ml-auto h-4 w-4', 'ml-auto h-4 w-4',
value?.value === framework.value ? 'opacity-100' : 'opacity-0', value === framework.value ? 'opacity-100' : 'opacity-0',
)" )"
/> />
</CommandItem> </CommandItem>