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