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`
74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { addDays, format } from 'date-fns'
|
|
import { Calendar as CalendarIcon } from 'lucide-vue-next'
|
|
|
|
import { ref } from 'vue'
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/lib/registry/default/ui/button'
|
|
import { Calendar } from '@/lib/registry/default/ui/calendar'
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@/lib/registry/default/ui/popover'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/lib/registry/default/ui/select'
|
|
|
|
const date = ref<Date>()
|
|
</script>
|
|
|
|
<template>
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
variant="outline"
|
|
:class="cn(
|
|
'w-[280px] justify-start text-left font-normal',
|
|
!date && 'text-muted-foreground',
|
|
)"
|
|
>
|
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
|
<template v-if="date">
|
|
{{ format(date, "PPP") }}
|
|
</template>
|
|
<template v-else>
|
|
<span>Pick a date</span>
|
|
</template>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="flex w-auto flex-col space-y-2 p-2">
|
|
<Select
|
|
@update:model-value="(value) => {
|
|
date = addDays(new Date(), parseInt(value))
|
|
}"
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select" />
|
|
</SelectTrigger>
|
|
<SelectContent position="popper">
|
|
<SelectItem value="0">
|
|
Today
|
|
</SelectItem>
|
|
<SelectItem value="1">
|
|
Tomorrow
|
|
</SelectItem>
|
|
<SelectItem value="3">
|
|
In 3 days
|
|
</SelectItem>
|
|
<SelectItem value="7">
|
|
In a week
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<div class="rounded-md border">
|
|
<Calendar v-model="date" mode="single" />
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</template>
|