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

docs: update Tags with Combobox example to make Popover close by clicking outside (#723)

Browse Source
This commit is contained in:
βoγ Woηdεr 2024-08-21 08:22:48 +03:00 committed by GitHub
parent 0fc50183e4
commit 1a1dd4a611
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue' import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command' import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input' import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
@ -36,29 +36,31 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
</ComboboxAnchor> </ComboboxAnchor>
<ComboboxPortal> <ComboboxPortal>
<CommandList <ComboboxContent>
position="popper" <CommandList
class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" position="popper"
> class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
<CommandEmpty /> >
<CommandGroup> <CommandEmpty />
<CommandItem <CommandGroup>
v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label" <CommandItem
@select.prevent="(ev) => { v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
if (typeof ev.detail.value === 'string') { @select.prevent="(ev) => {
searchTerm = '' if (typeof ev.detail.value === 'string') {
modelValue.push(ev.detail.value) searchTerm = ''
} modelValue.push(ev.detail.value)
}
if (filteredFrameworks.length === 0) { if (filteredFrameworks.length === 0) {
open = false open = false
} }
}" }"
> >
{{ framework.label }} {{ framework.label }}
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</ComboboxContent>
</ComboboxPortal> </ComboboxPortal>
</ComboboxRoot> </ComboboxRoot>
</TagsInput> </TagsInput>

48
apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue' import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command' import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input' import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
@ -36,29 +36,31 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
</ComboboxAnchor> </ComboboxAnchor>
<ComboboxPortal> <ComboboxPortal>
<CommandList <ComboboxContent>
position="popper" <CommandList
class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" position="popper"
> class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
<CommandEmpty /> >
<CommandGroup> <CommandEmpty />
<CommandItem <CommandGroup>
v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label" <CommandItem
@select.prevent="(ev) => { v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
if (typeof ev.detail.value === 'string') { @select.prevent="(ev) => {
searchTerm = '' if (typeof ev.detail.value === 'string') {
modelValue.push(ev.detail.value) searchTerm = ''
} modelValue.push(ev.detail.value)
}
if (filteredFrameworks.length === 0) { if (filteredFrameworks.length === 0) {
open = false open = false
} }
}" }"
> >
{{ framework.label }} {{ framework.label }}
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</ComboboxContent>
</ComboboxPortal> </ComboboxPortal>
</ComboboxRoot> </ComboboxRoot>
</TagsInput> </TagsInput>