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" /> <ComponentPreview name="ComboboxPopover" />
### Dropdown menu <!-- ### Dropdown menu
<ComponentPreview name="ComboboxDropdownMenu" /> <ComponentPreview name="ComboboxDropdownMenu" /> -->
### Form ### 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, validationSchema: formSchema,
}) })
@ -56,7 +56,7 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="space-y-6" @submit="onSubmit"> <form class="space-y-6" @submit="onSubmit">
<FormField v-slot="{ value }" name="language"> <FormField name="language">
<FormItem class="flex flex-col"> <FormItem class="flex flex-col">
<FormLabel>Language</FormLabel> <FormLabel>Language</FormLabel>
<Popover> <Popover>
@ -65,10 +65,10 @@ const onSubmit = handleSubmit((values) => {
<Button <Button
variant="outline" variant="outline"
role="combobox" 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( {{ values.language ? languages.find(
(language) => language.value === value, (language) => language.value === values.language,
)?.label : 'Select language...' }} )?.label : 'Select language...' }}
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
@ -90,7 +90,7 @@ const onSubmit = handleSubmit((values) => {
}" }"
> >
<Check <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 }} {{ language.label }}
</CommandItem> </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 open = ref(false)
const value = ref<typeof statuses[number]>() const value = ref<typeof statuses[number]>()
const selectedStatus = ref<Status | null>(null) const selectedStatus = ref<Status>()
</script> </script>
<template> <template>
@ -70,7 +70,7 @@ const selectedStatus = ref<Status | null>(null)
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Status Status
</p> </p>
<Popover :open="open"> <Popover v-model:open="open">
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button <Button
variant="outline" variant="outline"
@ -78,7 +78,7 @@ const selectedStatus = ref<Status | null>(null)
class="w-[150px] justify-start" class="w-[150px] justify-start"
> >
<template v-if="selectedStatus"> <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 }} {{ selectedStatus?.label }}
</template> </template>
<template v-else> <template v-else>
@ -97,12 +97,12 @@ const selectedStatus = ref<Status | null>(null)
:key="status.value" :key="status.value"
:value="status.value" :value="status.value"
@select="(value) => { @select="(value) => {
selectedStatus = statuses.find((priority) => priority.value === value) || null selectedStatus = status
open = false open = false
}" }"
> >
<component <component
:is="h(status.icon)" :is="status.icon"
:key="status.value" :key="status.value"
:class="cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40', :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, validationSchema: formSchema,
initialValues: { initialValues: {
language: '', language: '',
@ -59,7 +59,7 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="space-y-6" @submit="onSubmit"> <form class="space-y-6" @submit="onSubmit">
<FormField v-slot="{ value }" name="language"> <FormField name="language">
<FormItem class="flex flex-col"> <FormItem class="flex flex-col">
<FormLabel>Language</FormLabel> <FormLabel>Language</FormLabel>
<Popover> <Popover>
@ -68,10 +68,10 @@ const onSubmit = handleSubmit((values) => {
<Button <Button
variant="outline" variant="outline"
role="combobox" 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( {{ values.language ? languages.find(
(language) => language.value === value, (language) => language.value === values.language,
)?.label : 'Select language...' }} )?.label : 'Select language...' }}
<CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
@ -94,7 +94,7 @@ const onSubmit = handleSubmit((values) => {
> >
{{ language.label }} {{ language.label }}
<CheckIcon <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> </CommandItem>
</CommandGroup> </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 open = ref(false)
const selectedStatus = ref<Status | null>(null) const selectedStatus = ref<Status>()
</script> </script>
<template> <template>
@ -53,7 +53,7 @@ const selectedStatus = ref<Status | null>(null)
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
Status Status
</p> </p>
<Popover :open="open"> <Popover v-model:open="open">
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button <Button
variant="outline" variant="outline"
@ -77,9 +77,9 @@ const selectedStatus = ref<Status | null>(null)
<CommandItem <CommandItem
v-for="status in statuses" v-for="status in statuses"
:key="status.value" :key="status.value"
:value="status" :value="status.value"
@select="(value) => { @select="() => {
selectedStatus = statuses.find((priority) => priority.value === value) || null selectedStatus = status
open = false open = false
}" }"
> >