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

docs: use toast in form demos

Browse Source
This commit is contained in:
Sadegh Barati 2023-10-30 22:59:42 +03:30
parent 849596e870
commit a49cf90226
27 changed files with 142 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/www/src/examples/forms/components/AccountForm.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue'
import { h, ref } from 'vue'
import * as z from 'zod'
import { format } from 'date-fns'
import { toTypedSchema } from '@vee-validate/zod'
@ -26,6 +26,7 @@ import {
PopoverTrigger,
} from '@/lib/registry/default/ui/popover'
import { Calendar } from '@/lib/registry/new-york/ui/calendar'
import { toast } from '@/lib/registry/new-york/ui/toast'
const open = ref(false)
@ -63,7 +64,10 @@ const filterFunction = (list: typeof languages, search: string) => list.filter(i
// https://github.com/logaretm/vee-validate/issues/3521
// https://github.com/logaretm/vee-validate/discussions/3571
async function onSubmit(values: any) {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
}
</script>

7
apps/www/src/examples/forms/components/AppearanceForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -9,6 +10,7 @@ import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessa
import { Separator } from '@/lib/registry/new-york/ui/separator'
import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
import { toast } from '@/lib/registry/new-york/ui/toast'
const appearanceFormSchema = toTypedSchema(z.object({
theme: z.enum(['light', 'dark'], {
@ -29,7 +31,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/examples/forms/components/DisplayForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -7,6 +8,7 @@ import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessa
import { Separator } from '@/lib/registry/new-york/ui/separator'
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
import { Button } from '@/lib/registry/new-york/ui/button'
import { toast } from '@/lib/registry/new-york/ui/toast'
const items = [
{
@ -53,7 +55,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/examples/forms/components/NotificationsForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -9,6 +10,7 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-gro
import { Switch } from '@/lib/registry/new-york/ui/switch'
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
import { Button } from '@/lib/registry/new-york/ui/button'
import { toast } from '@/lib/registry/new-york/ui/toast'
const notificationsFormSchema = toTypedSchema(z.object({
type: z.enum(['all', 'mentions', 'none'], {
@ -32,7 +34,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values, { resetForm }) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

8
apps/www/src/examples/forms/components/ProfileForm.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue'
import { h, ref } from 'vue'
import { FieldArray, useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -19,6 +19,7 @@ import {
SelectValue,
} from '@/lib/registry/new-york/ui/select'
import { Button } from '@/lib/registry/new-york/ui/button'
import { toast } from '@/lib/registry/new-york/ui/toast'
const verifiedEmails = ref(['m@example.com', 'm@google.com', 'm@support.com'])
@ -58,7 +59,10 @@ const { handleSubmit, resetForm } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -13,6 +14,7 @@ import {
FormMessage,
} from '@/lib/registry/default/ui/form'
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
import { toast } from '@/lib/registry/default/ui/toast'
const items = [
{
@ -55,7 +57,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -13,6 +14,7 @@ import {
FormMessage,
} from '@/lib/registry/default/ui/form'
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
mobile: z.boolean().default(false).optional(),
@ -26,7 +28,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/ComboboxForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -26,6 +27,7 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/lib/registry/default/ui/popover'
import { toast } from '@/lib/registry/default/ui/toast'
const languages = [
{ label: 'English', value: 'en' },
@ -50,7 +52,10 @@ const { handleSubmit, setValues, values } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/DatePickerForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { format } from 'date-fns'
import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { useForm } from 'vee-validate'
@ -22,6 +23,7 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/lib/registry/default/ui/popover'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
dob: z.date({
@ -34,7 +36,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

4
apps/www/src/lib/registry/default/example/InputForm.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import { h } from 'vue'
import { Button } from '@/lib/registry/default/ui/button'
import {
FormControl,
@ -14,7 +14,7 @@ import {
FormMessage,
} from '@/lib/registry/default/ui/form'
import { Input } from '@/lib/registry/default/ui/input'
import { toast } from '@/lib/registry/default/ui/toast/use-toast'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
username: z.string().min(2).max(50),

7
apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -14,6 +15,7 @@ import {
FormMessage,
} from '@/lib/registry/default/ui/form'
import { Input } from '@/lib/registry/default/ui/input'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
username: z.string().min(2).max(50),
@ -24,7 +26,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/RadioGroupForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -12,6 +13,7 @@ import {
FormMessage,
} from '@/lib/registry/default/ui/form'
import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
type: z.enum(['all', 'mentions', 'none'], {
@ -24,7 +26,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/SelectForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -20,6 +21,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/lib/registry/default/ui/select'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
email: z
@ -34,7 +36,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/SwitchForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -12,6 +13,7 @@ import {
FormLabel,
} from '@/lib/registry/default/ui/form'
import { Switch } from '@/lib/registry/default/ui/switch'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
marketing_emails: z.boolean().default(false).optional(),
@ -26,7 +28,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/default/example/TextareaForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -13,6 +14,7 @@ import {
FormMessage,
} from '@/lib/registry/default/ui/form'
import { Textarea } from '@/lib/registry/default/ui/textarea'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
bio: z
@ -30,7 +32,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

1
apps/www/src/lib/registry/default/ui/switch/Switch.vue
View File

@ -12,7 +12,6 @@ const props = defineProps<SwitchRootProps & { class?: string }>()
const emits = defineEmits<SwitchRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
console.log(props, forwarded)
</script>
<template>

2
apps/www/src/lib/registry/default/ui/toast/index.ts
View File

@ -6,7 +6,7 @@ export { default as ToastClose } from './ToastClose.vue'
export { default as ToastTitle } from './ToastTitle.vue'
export { default as ToastDescription } from './ToastDescription.vue'
export { default as ToastProvider } from './ToastProvider.vue'
export { useToast } from './use-toast'
export { toast, useToast } from './use-toast'
import { cva } from 'class-variance-authority'

7
apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -13,6 +14,7 @@ import {
FormMessage,
} from '@/lib/registry/new-york/ui/form'
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
import { toast } from '@/lib/registry/new-york/ui/toast'
const items = [
{
@ -55,7 +57,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -13,6 +14,7 @@ import {
FormMessage,
} from '@/lib/registry/new-york/ui/form'
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
mobile: z.boolean().default(false).optional(),
@ -26,7 +28,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -26,6 +27,7 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/lib/registry/new-york/ui/popover'
import { toast } from '@/lib/registry/new-york/ui/toast'
const languages = [
{ label: 'English', value: 'en' },
@ -53,7 +55,10 @@ const { handleSubmit, setValues, values } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { format } from 'date-fns'
import { CalendarIcon } from '@radix-icons/vue'
import { useForm } from 'vee-validate'
@ -22,6 +23,7 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/lib/registry/new-york/ui/popover'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
dob: z.date({
@ -34,7 +36,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -14,6 +15,7 @@ import {
FormMessage,
} from '@/lib/registry/new-york/ui/form'
import { Input } from '@/lib/registry/new-york/ui/input'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
username: z.string().min(2).max(50),
@ -24,7 +26,10 @@ const { isFieldDirty, handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -12,6 +13,7 @@ import {
FormMessage,
} from '@/lib/registry/new-york/ui/form'
import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
type: z.enum(['all', 'mentions', 'none'], {
@ -24,7 +26,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/SelectForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -20,6 +21,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/lib/registry/new-york/ui/select'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
email: z
@ -34,7 +36,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/SwitchForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -12,6 +13,7 @@ import {
FormLabel,
} from '@/lib/registry/new-york/ui/form'
import { Switch } from '@/lib/registry/new-york/ui/switch'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
marketing_emails: z.boolean().default(false).optional(),
@ -26,7 +28,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

7
apps/www/src/lib/registry/new-york/example/TextareaForm.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -13,6 +14,7 @@ import {
FormMessage,
} from '@/lib/registry/new-york/ui/form'
import { Textarea } from '@/lib/registry/new-york/ui/textarea'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
bio: z
@ -30,7 +32,10 @@ const { handleSubmit } = useForm({
})
const onSubmit = handleSubmit((values) => {
console.log('Form submitted!', values)
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>

2
apps/www/src/lib/registry/new-york/ui/toast/index.ts
View File

@ -6,7 +6,7 @@ export { default as ToastClose } from './ToastClose.vue'
export { default as ToastTitle } from './ToastTitle.vue'
export { default as ToastDescription } from './ToastDescription.vue'
export { default as ToastProvider } from './ToastProvider.vue'
export { useToast } from './use-toast'
export { toast, useToast } from './use-toast'
import { cva } from 'class-variance-authority'