79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from '@/lib/registry/new-york/ui/command'
|
|
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@/lib/registry/new-york/ui/popover'
|
|
import { cn } from '@/lib/utils'
|
|
import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
|
|
import { ref } from 'vue'
|
|
|
|
const frameworks = [
|
|
{ value: 'next.js', label: 'Next.js' },
|
|
{ value: 'sveltekit', label: 'SvelteKit' },
|
|
{ value: 'nuxt', label: 'Nuxt' },
|
|
{ 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"
|
|
>
|
|
{{ value
|
|
? frameworks.find((framework) => framework.value === value)?.label
|
|
: "Select framework..." }}
|
|
<CaretSortIcon 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.value"
|
|
@select="(ev) => {
|
|
if (typeof ev.detail.value === 'string') {
|
|
value = ev.detail.value
|
|
}
|
|
open = false
|
|
}"
|
|
>
|
|
{{ framework.label }}
|
|
<CheckIcon
|
|
:class="cn(
|
|
'ml-auto h-4 w-4',
|
|
value === framework.value ? 'opacity-100' : 'opacity-0',
|
|
)"
|
|
/>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</template>
|