d03067db67
* feat: add `vee-validate` * chore: update * chore: update `AccountForm` example - add `FormDescription` component - include `src` in tsconfig * refactor: use radix-vue `Slot` component * chore: refresh lockfile * chore: update `ProfileForm.vue` and `AccountForm` fix vee-validate initialValues on components with `componentField` slotProp * chore: update `AppearanceForm.vue` update pnpm and some deps -_- * refactor: update - add new-york style - off eslint import/first rule - use `useId` from radix-vue * fix: class-name -> class * refactor: simplify validation for `Command` component * fix: v-bind="field" -> v-bind="componentField" * fix: useAttrs to prevent class duplication * docs: add `form.md` - change TabPreview.vue to showcase way of using vee-validate * docs: add form example for `checkbox` `input` and `datepicker` * docs: add `combobox`, `datepicker`, `radio-group`, `select`, `switch` and `textarea` form and some other exmaples * chore: typo, update `zod`, `vite`, and `@vitejs/plugin-vue`
71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
} from '@/lib/registry/new-york/ui/command'
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@/lib/registry/new-york/ui/popover'
|
|
|
|
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<typeof frameworks[number]>()
|
|
|
|
const filterFunction = (list: typeof frameworks, search: string) => list.filter(i => i.value.toLowerCase().includes(search.toLowerCase()))
|
|
</script>
|
|
|
|
<template>
|
|
<Popover v-model:open="open">
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
:aria-expanded="open"
|
|
class="w-[200px] justify-between"
|
|
>
|
|
{{ 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 v-model="value" :filter-function="filterFunction">
|
|
<CommandInput class="h-9" placeholder="Search framework..." />
|
|
<CommandEmpty>No framework found.</CommandEmpty>
|
|
<CommandGroup>
|
|
<CommandItem
|
|
v-for="framework in frameworks"
|
|
:key="framework.value"
|
|
:value="framework"
|
|
@select="open = false"
|
|
>
|
|
{{ framework.label }}
|
|
<CheckIcon
|
|
:class="cn(
|
|
'ml-auto h-4 w-4',
|
|
value?.value === framework.value ? 'opacity-100' : 'opacity-0',
|
|
)"
|
|
/>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</template>
|