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

docs: fix demo after refactoring

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/www/src/content/docs/components/combobox.md
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,22 +73,24 @@ 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>
<CommandGroup> <CommandList>
<CommandItem <CommandGroup>
v-for="framework in frameworks" <CommandItem
:key="framework.value" v-for="framework in frameworks"
:value="framework" :key="framework.value"
@select="open = false" :value="framework"
> @select="open = false"
<Check >
:class="cn( <Check
'mr-2 h-4 w-4', :class="cn(
value === framework.value ? 'opacity-100' : 'opacity-0', 'mr-2 h-4 w-4',
)" value === framework.value ? 'opacity-100' : 'opacity-0',
/> )"
{{ framework.label }} />
</CommandItem> {{ framework.label }}
</CommandGroup> </CommandItem>
</CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

42
apps/www/src/lib/registry/default/example/ComboboxDemo.vue
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,25 +49,28 @@ 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>
<CommandGroup> <CommandList>
<CommandItem <CommandGroup>
v-for="framework in frameworks" <CommandItem
:key="framework.value" v-for="framework in frameworks"
:value="framework" :key="framework.value"
@select="(ev) => { :value="framework"
value = ev.detail.value as typeof framework @select="(ev) => {
open = false value = ev.detail.value
}" console.log(ev)
> open = false
<Check }"
:class="cn( >
'mr-2 h-4 w-4', <Check
value?.value === framework.value ? 'opacity-100' : 'opacity-0', :class="cn(
)" 'mr-2 h-4 w-4',
/> value?.value === framework.value ? 'opacity-100' : 'opacity-0',
{{ framework.label }} )"
</CommandItem> />
</CommandGroup> {{ framework.label }}
</CommandItem>
</CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

37
apps/www/src/lib/registry/default/example/ComboboxForm.vue
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,23 +84,25 @@ const onSubmit = handleSubmit((values) => {
<Command> <Command>
<CommandInput placeholder="Search language..." /> <CommandInput placeholder="Search language..." />
<CommandEmpty>Nothing found.</CommandEmpty> <CommandEmpty>Nothing found.</CommandEmpty>
<CommandGroup> <CommandList>
<CommandItem <CommandGroup>
v-for="language in languages" <CommandItem
:key="language.value" v-for="language in languages"
:value="language.label" :key="language.value"
@select="() => { :value="language.label"
setValues({ @select="() => {
language: language.value, setValues({
}) language: language.value,
}" })
> }"
<Check >
:class="cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" <Check
/> :class="cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
{{ language.label }} />
</CommandItem> {{ language.label }}
</CommandGroup> </CommandItem>
</CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

41
apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
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,25 +49,27 @@ 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>
<CommandGroup> <CommandList>
<CommandItem <CommandGroup>
v-for="framework in frameworks" <CommandItem
:key="framework.value" v-for="framework in frameworks"
:value="framework" :key="framework.value"
@select="(ev) => { :value="framework"
value = ev.detail.value as typeof framework @select="(ev) => {
open = false value = ev.detail.value
}" open = false
> }"
{{ framework.label }} >
<CheckIcon {{ framework.label }}
:class="cn( <CheckIcon
'ml-auto h-4 w-4', :class="cn(
value?.value === framework.value ? 'opacity-100' : 'opacity-0', 'ml-auto h-4 w-4',
)" value?.value === framework.value ? 'opacity-100' : 'opacity-0',
/> )"
</CommandItem> />
</CommandGroup> </CommandItem>
</CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

37
apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
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,23 +87,25 @@ const onSubmit = handleSubmit((values) => {
<Command> <Command>
<CommandInput placeholder="Search language..." /> <CommandInput placeholder="Search language..." />
<CommandEmpty>Nothing found.</CommandEmpty> <CommandEmpty>Nothing found.</CommandEmpty>
<CommandGroup> <CommandList>
<CommandItem <CommandGroup>
v-for="language in languages" <CommandItem
:key="language.value" v-for="language in languages"
:value="language.label" :key="language.value"
@select="() => { :value="language.label"
setValues({ @select="() => {
language: language.value, setValues({
}) language: language.value,
}" })
> }"
{{ language.label }} >
<CheckIcon {{ language.label }}
:class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" <CheckIcon
/> :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
</CommandItem> />
</CommandGroup> </CommandItem>
</CommandGroup>
</CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>