From 9b4b0c289e2f53177329931552e07b61c845aa5d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 6 Oct 2023 13:23:49 +0800
Subject: [PATCH] chore: fix demo reactivitiy

---
 apps/www/src/content/docs/components/combobox.md     |  4 ++--
 .../lib/registry/default/example/ComboboxForm.vue    | 12 ++++++------
 .../lib/registry/default/example/ComboboxPopover.vue | 10 +++++-----
 .../lib/registry/new-york/example/ComboboxForm.vue   | 12 ++++++------
 .../registry/new-york/example/ComboboxPopover.vue    | 10 +++++-----
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md
index 8f909099..122c9ca1 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -96,9 +96,9 @@ const value = ref({})
 
 <ComponentPreview name="ComboboxPopover" />
 
-### Dropdown menu
+<!-- ### Dropdown menu
 
-<ComponentPreview name="ComboboxDropdownMenu" />
+<ComponentPreview name="ComboboxDropdownMenu" /> -->
 
 ### Form
 
diff --git a/apps/www/src/lib/registry/default/example/ComboboxForm.vue b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
index 8080fd4f..d4981802 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
@@ -45,7 +45,7 @@ const formSchema = toTypedSchema(z.object({
   }),
 }))
 
-const { handleSubmit, setValues } = useForm({
+const { handleSubmit, setValues, values } = useForm({
   validationSchema: formSchema,
 })
 
@@ -56,7 +56,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ value }" name="language">
+    <FormField name="language">
       <FormItem class="flex flex-col">
         <FormLabel>Language</FormLabel>
         <Popover>
@@ -65,10 +65,10 @@ const onSubmit = handleSubmit((values) => {
               <Button
                 variant="outline"
                 role="combobox"
-                :class="cn('w-[200px] justify-between', !value && 'text-muted-foreground')"
+                :class="cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')"
               >
-                {{ value ? languages.find(
-                  (language) => language.value === value,
+                {{ values.language ? languages.find(
+                  (language) => language.value === values.language,
                 )?.label : 'Select language...' }}
                 <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
               </Button>
@@ -90,7 +90,7 @@ const onSubmit = handleSubmit((values) => {
                   }"
                 >
                   <Check
-                    :class="cn('mr-2 h-4 w-4', language.value === value ? 'opacity-100' : 'opacity-0')"
+                    :class="cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
                   />
                   {{ language.label }}
                 </CommandItem>
diff --git a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
index 9e8c741e..7b9f67d6 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
@@ -62,7 +62,7 @@ const statuses: Status[] = [
 const open = ref(false)
 const value = ref<typeof statuses[number]>()
 
-const selectedStatus = ref<Status | null>(null)
+const selectedStatus = ref<Status>()
 </script>
 
 <template>
@@ -70,7 +70,7 @@ const selectedStatus = ref<Status | null>(null)
     <p class="text-sm text-muted-foreground">
       Status
     </p>
-    <Popover :open="open">
+    <Popover v-model:open="open">
       <PopoverTrigger as-child>
         <Button
           variant="outline"
@@ -78,7 +78,7 @@ const selectedStatus = ref<Status | null>(null)
           class="w-[150px] justify-start"
         >
           <template v-if="selectedStatus">
-            <component :is="h(selectedStatus?.icon)" class="mr-2 h-4 w-4 shrink-0" />
+            <component :is="selectedStatus?.icon" class="mr-2 h-4 w-4 shrink-0" />
             {{ selectedStatus?.label }}
           </template>
           <template v-else>
@@ -97,12 +97,12 @@ const selectedStatus = ref<Status | null>(null)
                 :key="status.value"
                 :value="status.value"
                 @select="(value) => {
-                  selectedStatus = statuses.find((priority) => priority.value === value) || null
+                  selectedStatus = status
                   open = false
                 }"
               >
                 <component
-                  :is="h(status.icon)"
+                  :is="status.icon"
                   :key="status.value"
                   :class="cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',
                   )"
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
index 911cdf97..bd79d9ea 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
@@ -45,7 +45,7 @@ const formSchema = toTypedSchema(z.object({
   }),
 }))
 
-const { handleSubmit, setValues } = useForm({
+const { handleSubmit, setValues, values } = useForm({
   validationSchema: formSchema,
   initialValues: {
     language: '',
@@ -59,7 +59,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ value }" name="language">
+    <FormField name="language">
       <FormItem class="flex flex-col">
         <FormLabel>Language</FormLabel>
         <Popover>
@@ -68,10 +68,10 @@ const onSubmit = handleSubmit((values) => {
               <Button
                 variant="outline"
                 role="combobox"
-                :class="cn('w-[200px] justify-between', !value && 'text-muted-foreground')"
+                :class="cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')"
               >
-                {{ value ? languages.find(
-                  (language) => language.value === value,
+                {{ values.language ? languages.find(
+                  (language) => language.value === values.language,
                 )?.label : 'Select language...' }}
                 <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
               </Button>
@@ -94,7 +94,7 @@ const onSubmit = handleSubmit((values) => {
                 >
                   {{ language.label }}
                   <CheckIcon
-                    :class="cn('ml-auto h-4 w-4', language.value === value ? 'opacity-100' : 'opacity-0')"
+                    :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
                   />
                 </CommandItem>
               </CommandGroup>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
index 2546f25e..f9423dff 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
@@ -45,7 +45,7 @@ const statuses: Status[] = [
 ]
 
 const open = ref(false)
-const selectedStatus = ref<Status | null>(null)
+const selectedStatus = ref<Status>()
 </script>
 
 <template>
@@ -53,7 +53,7 @@ const selectedStatus = ref<Status | null>(null)
     <p class="text-sm text-muted-foreground">
       Status
     </p>
-    <Popover :open="open">
+    <Popover v-model:open="open">
       <PopoverTrigger as-child>
         <Button
           variant="outline"
@@ -77,9 +77,9 @@ const selectedStatus = ref<Status | null>(null)
               <CommandItem
                 v-for="status in statuses"
                 :key="status.value"
-                :value="status"
-                @select="(value) => {
-                  selectedStatus = statuses.find((priority) => priority.value === value) || null
+                :value="status.value"
+                @select="() => {
+                  selectedStatus = status
                   open = false
                 }"
               >