docs: fix demo after refactoring

This commit is contained in:
zernonia 2023-11-25 23:56:25 +08:00
parent 89874ca324
commit 8d1dfe8da9
5 changed files with 112 additions and 88 deletions

View File

@ -6,6 +6,14 @@ component: true
<ComponentPreview name="ComboboxDemo" /> <ComponentPreview name="ComboboxDemo" />
<br>
<Callout title="Note" class="bg-destructive">
[Radix Vue](https://github.com/radix-vue/radix-vue/releases/tag/v1.2.0) introduced a breaking change. You will need to wrap `ComboboxGroup` and `ComboboxItem` inside of `ComboboxList` now.
</Callout>
## Installation ## Installation
The Combobox is built using a composition of the `<Popover />` and the `<Command />` components. The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
@ -27,6 +35,7 @@ import {
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList
} from '@/components/ui/command' } from '@/components/ui/command'
import { import {
Popover, Popover,
@ -64,6 +73,7 @@ const value = ref({})
<Command v-model="value"> <Command v-model="value">
<CommandInput placeholder="Search framework..." /> <CommandInput placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty> <CommandEmpty>No framework found.</CommandEmpty>
<CommandList>
<CommandGroup> <CommandGroup>
<CommandItem <CommandItem
v-for="framework in frameworks" v-for="framework in frameworks"
@ -80,6 +90,7 @@ const value = ref({})
{{ framework.label }} {{ framework.label }}
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

View File

@ -10,6 +10,7 @@ import {
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList,
} from '@/lib/registry/default/ui/command' } from '@/lib/registry/default/ui/command'
import { import {
Popover, Popover,
@ -48,13 +49,15 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
<Command :filter-function="filterFunction"> <Command :filter-function="filterFunction">
<CommandInput placeholder="Search framework..." /> <CommandInput placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty> <CommandEmpty>No framework found.</CommandEmpty>
<CommandList>
<CommandGroup> <CommandGroup>
<CommandItem <CommandItem
v-for="framework in frameworks" v-for="framework in frameworks"
:key="framework.value" :key="framework.value"
:value="framework" :value="framework"
@select="(ev) => { @select="(ev) => {
value = ev.detail.value as typeof framework value = ev.detail.value
console.log(ev)
open = false open = false
}" }"
> >
@ -67,6 +70,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
{{ framework.label }} {{ framework.label }}
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

View File

@ -13,6 +13,7 @@ import {
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList,
} from '@/lib/registry/default/ui/command' } from '@/lib/registry/default/ui/command'
import { import {
FormControl, FormControl,
@ -83,6 +84,7 @@ const onSubmit = handleSubmit((values) => {
<Command> <Command>
<CommandInput placeholder="Search language..." /> <CommandInput placeholder="Search language..." />
<CommandEmpty>Nothing found.</CommandEmpty> <CommandEmpty>Nothing found.</CommandEmpty>
<CommandList>
<CommandGroup> <CommandGroup>
<CommandItem <CommandItem
v-for="language in languages" v-for="language in languages"
@ -100,6 +102,7 @@ const onSubmit = handleSubmit((values) => {
{{ language.label }} {{ language.label }}
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

View File

@ -10,6 +10,7 @@ import {
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList,
} from '@/lib/registry/new-york/ui/command' } from '@/lib/registry/new-york/ui/command'
import { import {
Popover, Popover,
@ -48,13 +49,14 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
<Command v-model="value" :filter-function="filterFunction"> <Command v-model="value" :filter-function="filterFunction">
<CommandInput class="h-9" placeholder="Search framework..." /> <CommandInput class="h-9" placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty> <CommandEmpty>No framework found.</CommandEmpty>
<CommandList>
<CommandGroup> <CommandGroup>
<CommandItem <CommandItem
v-for="framework in frameworks" v-for="framework in frameworks"
:key="framework.value" :key="framework.value"
:value="framework" :value="framework"
@select="(ev) => { @select="(ev) => {
value = ev.detail.value as typeof framework value = ev.detail.value
open = false open = false
}" }"
> >
@ -67,6 +69,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
/> />
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

View File

@ -13,6 +13,7 @@ import {
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList,
} from '@/lib/registry/new-york/ui/command' } from '@/lib/registry/new-york/ui/command'
import { import {
FormControl, FormControl,
@ -86,6 +87,7 @@ const onSubmit = handleSubmit((values) => {
<Command> <Command>
<CommandInput placeholder="Search language..." /> <CommandInput placeholder="Search language..." />
<CommandEmpty>Nothing found.</CommandEmpty> <CommandEmpty>Nothing found.</CommandEmpty>
<CommandList>
<CommandGroup> <CommandGroup>
<CommandItem <CommandItem
v-for="language in languages" v-for="language in languages"
@ -103,6 +105,7 @@ const onSubmit = handleSubmit((values) => {
/> />
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>