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

chore: fix demo reactivitiy

Browse Source
This commit is contained in:
zernonia 2023-10-06 13:23:49 +08:00
parent d03067db67
commit 9b4b0c289e
5 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/src/content/docs/components/combobox.md
View File

@ -96,9 +96,9 @@ const value = ref({})
<ComponentPreview name="ComboboxPopover" />
### Dropdown menu
<!-- ### Dropdown menu
<ComponentPreview name="ComboboxDropdownMenu" />
<ComponentPreview name="ComboboxDropdownMenu" /> -->
### Form

12
apps/www/src/lib/registry/default/example/ComboboxForm.vue
View File

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

10
apps/www/src/lib/registry/default/example/ComboboxPopover.vue
View File

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

12
apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
View File

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

10
apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
View File

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