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",
"date-fns": "^2.30.0",
"lucide-vue-next": "^0.276.0",
"radix-vue": "^1.2.3",
"radix-vue": "^1.2.5",
"tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2",
"vee-validate": "4.12.3",

31
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) => {
if (typeof ev.detail.value === 'string') {
value = ev.detail.value
console.log(ev)
}
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>

16
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) => {
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>

14
pnpm-lock.yaml
View File

@ -87,8 +87,8 @@ importers:
specifier: ^0.276.0
version: 0.276.0(vue@3.3.7)
radix-vue:
specifier: ^1.2.3
version: 1.2.3(vue@3.3.7)
specifier: ^1.2.5
version: 1.2.5(vue@3.3.7)
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.3.5)
@ -11379,22 +11379,22 @@ packages:
resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
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==}
dependencies:
'@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
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/radix-vue@1.2.3(vue@3.3.9):
resolution: {integrity: sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==}
/radix-vue@1.2.5(vue@3.3.7):
resolution: {integrity: sha512-m4OIGmq5MFvRwzS841vKiX0jYVC6bIRH+MYk/cJTQC0feY7aifppjfqh7XV9FtDsjEetSrDnm1JSd0YIKh3kwQ==}
dependencies:
'@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
transitivePeerDependencies:
- '@vue/composition-api'