From f6f87d3cd6a5aa37458f6e00b3b65f18f5446c0e Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Sun, 31 Dec 2023 22:37:23 +0330
Subject: [PATCH] chore: fix `ComboboxDemo.vue` types (#233)

* chore: fix `ComboboxDemo.vue` example types

* chore: update `radix-vue`
---
 apps/www/package.json                         |  2 +-
 .../registry/default/example/ComboboxDemo.vue | 33 ++++++++++---------
 .../new-york/example/ComboboxDemo.vue         | 18 ++++++----
 pnpm-lock.yaml                                | 14 ++++----
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 6522331a..c5ace61e 100644
--- a/apps/www/package.json
+++ b/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",
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
index 758020bd..8e37ef5d 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
index 9d2e4506..f5f197a2 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
+++ b/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,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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 708b4485..4c7de87b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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'