chore: add combobox demo
This commit is contained in:
zernonia
parent
34f0786b0c
commit
893427b0d2
|
|
@ -618,12 +618,12 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/TabsDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TabsDemo.vue'],
|
||||
},
|
||||
TagsInputComboDemo: {
|
||||
name: 'TagsInputComboDemo',
|
||||
TagsInputComboboxDemo: {
|
||||
name: 'TagsInputComboboxDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'button', 'command', 'popover', 'tags-input'],
|
||||
component: () => import('../src/lib/registry/default/example/TagsInputComboDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TagsInputComboDemo.vue'],
|
||||
registryDependencies: ['command', 'tags-input'],
|
||||
component: () => import('../src/lib/registry/default/example/TagsInputComboboxDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TagsInputComboboxDemo.vue'],
|
||||
},
|
||||
TagsInputDemo: {
|
||||
name: 'TagsInputDemo',
|
||||
|
|
@ -1537,12 +1537,12 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/TabsDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TabsDemo.vue'],
|
||||
},
|
||||
TagsInputComboDemo: {
|
||||
name: 'TagsInputComboDemo',
|
||||
TagsInputComboboxDemo: {
|
||||
name: 'TagsInputComboboxDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'button', 'command', 'popover', 'tags-input'],
|
||||
component: () => import('../src/lib/registry/new-york/example/TagsInputComboDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TagsInputComboDemo.vue'],
|
||||
registryDependencies: ['command', 'tags-input'],
|
||||
component: () => import('../src/lib/registry/new-york/example/TagsInputComboboxDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TagsInputComboboxDemo.vue'],
|
||||
},
|
||||
TagsInputDemo: {
|
||||
name: 'TagsInputDemo',
|
||||
|
|
|
|||
|
|
@ -18,4 +18,4 @@ npx shadcn-vue@latest add tags-input
|
|||
|
||||
### Multiple Combobox
|
||||
|
||||
<ComponentPreview name="TagsInputComboDemo" />
|
||||
<ComponentPreview name="TagsInputComboboxDemo" />
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Check, ChevronsUpDown } from 'lucide-vue-next'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/lib/registry/default/ui/command'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/default/ui/popover'
|
||||
import { TagsInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
|
||||
|
||||
const frameworks = [
|
||||
{ value: 'next.js', label: 'Next.js' },
|
||||
{ value: 'sveltekit', label: 'SvelteKit' },
|
||||
{ value: 'nuxt.js', label: 'Nuxt.js' },
|
||||
{ value: 'remix', label: 'Remix' },
|
||||
{ value: 'astro', label: 'Astro' },
|
||||
]
|
||||
|
||||
const open = ref(false)
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
:aria-expanded="open"
|
||||
class="w-[200px] justify-between"
|
||||
>
|
||||
qwe
|
||||
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput class="h-9" placeholder="Search framework..." />
|
||||
<CommandEmpty>No framework found.</CommandEmpty>
|
||||
<CommandList>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="framework in frameworks"
|
||||
:key="framework.value"
|
||||
:value="framework"
|
||||
@select="(ev) => {
|
||||
console.log(ev.detail.value)
|
||||
// if (typeof ev.detail.value === 'string') {
|
||||
// value = ev.detail.value
|
||||
// }
|
||||
open = true
|
||||
}"
|
||||
>
|
||||
{{ framework.label }}
|
||||
<!-- <Check
|
||||
/> -->
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
|
||||
import { CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
|
||||
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
|
||||
|
||||
const frameworks = [
|
||||
{ value: 'next.js', label: 'Next.js' },
|
||||
{ value: 'sveltekit', label: 'SvelteKit' },
|
||||
{ value: 'nuxt.js', label: 'Nuxt.js' },
|
||||
{ value: 'remix', label: 'Remix' },
|
||||
{ value: 'astro', label: 'Astro' },
|
||||
]
|
||||
|
||||
const modelValue = ref<string[]>([])
|
||||
const open = ref(false)
|
||||
const searchTerm = ref('')
|
||||
|
||||
const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TagsInput :model-value="modelValue">
|
||||
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
|
||||
<TagsInputItemText />
|
||||
<TagsInputItemDelete />
|
||||
</TagsInputItem>
|
||||
|
||||
<ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm">
|
||||
<ComboboxAnchor>
|
||||
<ComboboxInput placeholder="Framework..." as-child>
|
||||
<TagsInputInput @keydown.enter.prevent />
|
||||
</ComboboxInput>
|
||||
</ComboboxAnchor>
|
||||
|
||||
<ComboboxPortal>
|
||||
<CommandList :position="'popper'" class="w-48 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">
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="framework in filteredFrameworks"
|
||||
:key="framework.value"
|
||||
:value="framework.label"
|
||||
@select.prevent="(ev) => {
|
||||
if (typeof ev.detail.value === 'string') {
|
||||
searchTerm = ''
|
||||
modelValue.push(ev.detail.value)
|
||||
open = false
|
||||
}
|
||||
}"
|
||||
>
|
||||
{{ framework.label }}
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</ComboboxPortal>
|
||||
</ComboboxRoot>
|
||||
</TagsInput>
|
||||
</template>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Check, ChevronsUpDown } from 'lucide-vue-next'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/lib/registry/default/ui/command'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/default/ui/popover'
|
||||
import { TagsInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
|
||||
|
||||
const frameworks = [
|
||||
{ value: 'next.js', label: 'Next.js' },
|
||||
{ value: 'sveltekit', label: 'SvelteKit' },
|
||||
{ value: 'nuxt.js', label: 'Nuxt.js' },
|
||||
{ value: 'remix', label: 'Remix' },
|
||||
{ value: 'astro', label: 'Astro' },
|
||||
]
|
||||
|
||||
const open = ref(false)
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
:aria-expanded="open"
|
||||
class="w-[200px] justify-between"
|
||||
>
|
||||
qwe
|
||||
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput class="h-9" placeholder="Search framework..." />
|
||||
<CommandEmpty>No framework found.</CommandEmpty>
|
||||
<CommandList>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="framework in frameworks"
|
||||
:key="framework.value"
|
||||
:value="frameworks"
|
||||
@select="(ev) => {
|
||||
// if (typeof ev.detail.value === 'string') {
|
||||
// value = ev.detail.value
|
||||
// }
|
||||
open = false
|
||||
}"
|
||||
>
|
||||
{{ framework.label }}
|
||||
<!-- <Check
|
||||
/> -->
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
|
||||
import { CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
|
||||
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
|
||||
|
||||
const frameworks = [
|
||||
{ value: 'next.js', label: 'Next.js' },
|
||||
{ value: 'sveltekit', label: 'SvelteKit' },
|
||||
{ value: 'nuxt.js', label: 'Nuxt.js' },
|
||||
{ value: 'remix', label: 'Remix' },
|
||||
{ value: 'astro', label: 'Astro' },
|
||||
]
|
||||
|
||||
const modelValue = ref<string[]>([])
|
||||
const open = ref(false)
|
||||
const searchTerm = ref('')
|
||||
|
||||
const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TagsInput :model-value="modelValue">
|
||||
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
|
||||
<TagsInputItemText />
|
||||
<TagsInputItemDelete />
|
||||
</TagsInputItem>
|
||||
|
||||
<ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm">
|
||||
<ComboboxAnchor>
|
||||
<ComboboxInput placeholder="Framework..." as-child>
|
||||
<TagsInputInput @keydown.enter.prevent />
|
||||
</ComboboxInput>
|
||||
</ComboboxAnchor>
|
||||
|
||||
<ComboboxPortal>
|
||||
<CommandList :position="'popper'" class="w-48 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">
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="framework in filteredFrameworks"
|
||||
:key="framework.value"
|
||||
:value="framework.label"
|
||||
@select.prevent="(ev) => {
|
||||
if (typeof ev.detail.value === 'string') {
|
||||
searchTerm = ''
|
||||
modelValue.push(ev.detail.value)
|
||||
open = false
|
||||
}
|
||||
}"
|
||||
>
|
||||
{{ framework.label }}
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</ComboboxPortal>
|
||||
</ComboboxRoot>
|
||||
</TagsInput>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user