chore: fix ComboboxDemo.vue types (#233)

* chore: fix `ComboboxDemo.vue` example types

* chore: update `radix-vue`

apps/www/package.json

@@ -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",

apps/www/src/lib/registry/default/example/ComboboxDemo.vue

@@ -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>

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

@@ -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,30 +41,34 @@ 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>
           <CommandGroup>
             <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
               }"
             >
               {{ framework.label }}
               <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>