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

chore: fix ComboboxDemo.vue types (#233)

Browse Source 
* chore: fix `ComboboxDemo.vue` example types

* chore: update `radix-vue`
This commit is contained in:
Sadegh Barati 2023-12-31 22:37:23 +03:30 committed by GitHub
parent ef3ec54a4e
commit f6f87d3cd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/package.json
View File

@ -28,7 +28,7 @@
"codesandbox": "^2.2.3", "codesandbox": "^2.2.3",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"lucide-vue-next": "^0.276.0", "lucide-vue-next": "^0.276.0",
"radix-vue": "^1.2.3", "radix-vue": "^1.2.5",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2", "v-calendar": "^3.1.2",
"vee-validate": "4.12.3", "vee-validate": "4.12.3",

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>

14
pnpm-lock.yaml
View File

@ -87,8 +87,8 @@ importers:
specifier: ^0.276.0 specifier: ^0.276.0
version: 0.276.0(vue@3.3.7) version: 0.276.0(vue@3.3.7)
radix-vue: radix-vue:
specifier: ^1.2.3 specifier: ^1.2.5
version: 1.2.3(vue@3.3.7) version: 1.2.5(vue@3.3.7)
tailwindcss-animate: tailwindcss-animate:
specifier: ^1.0.7 specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.3.5) version: 1.0.7(tailwindcss@3.3.5)
@ -11379,22 +11379,22 @@ packages:
resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==} resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
dev: false dev: false
/radix-vue@1.2.3(vue@3.3.7): /radix-vue@1.2.3(vue@3.3.9):
resolution: {integrity: sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==} resolution: {integrity: sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==}
dependencies: dependencies:
'@floating-ui/dom': 1.5.3 '@floating-ui/dom': 1.5.3
'@floating-ui/vue': 1.0.2(vue@3.3.7) '@floating-ui/vue': 1.0.2(vue@3.3.9)
fast-deep-equal: 3.1.3 fast-deep-equal: 3.1.3
transitivePeerDependencies: transitivePeerDependencies:
- '@vue/composition-api' - '@vue/composition-api'
- vue - vue
dev: false dev: false
/radix-vue@1.2.3(vue@3.3.9): /radix-vue@1.2.5(vue@3.3.7):
resolution: {integrity: sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==} resolution: {integrity: sha512-m4OIGmq5MFvRwzS841vKiX0jYVC6bIRH+MYk/cJTQC0feY7aifppjfqh7XV9FtDsjEetSrDnm1JSd0YIKh3kwQ==}
dependencies: dependencies:
'@floating-ui/dom': 1.5.3 '@floating-ui/dom': 1.5.3
'@floating-ui/vue': 1.0.2(vue@3.3.9) '@floating-ui/vue': 1.0.2(vue@3.3.7)
fast-deep-equal: 3.1.3 fast-deep-equal: 3.1.3
transitivePeerDependencies: transitivePeerDependencies:
- '@vue/composition-api' - '@vue/composition-api'