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

chore: update NumberFieldForm.vue

Browse Source
This commit is contained in:
sadeghbarati 2024-05-26 08:37:30 +03:30
parent 4b62d273b5
commit e2fe0ceedd
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/www/src/lib/registry/default/example/NumberFieldForm.vue
View File

@ -26,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'), payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),
})) }))
const { handleSubmit } = useForm({ const { handleSubmit, setFieldValue } = useForm({
validationSchema: formSchema, validationSchema: formSchema,
initialValues: { initialValues: {
payment: 10, payment: 10,
@ -43,12 +43,11 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="w-2/3 space-y-6" @submit="onSubmit"> <form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ value, handleChange }" name="payment"> <FormField name="payment">
<FormItem> <FormItem>
<FormLabel>Payment</FormLabel> <FormLabel>Payment</FormLabel>
<NumberField <NumberField
class="gap-2" class="gap-2"
:model-value="value"
:min="0" :min="0"
:format-options="{ :format-options="{
style: 'currency', style: 'currency',
@ -56,7 +55,14 @@ const onSubmit = handleSubmit((values) => {
currencyDisplay: 'code', currencyDisplay: 'code',
currencySign: 'accounting', currencySign: 'accounting',
}" }"
@update:model-value="handleChange" @update:model-value="(v) => {
if (v) {
setFieldValue('payment', v)
}
else {
setFieldValue('payment', undefined)
}
}"
> >
<NumberFieldContent> <NumberFieldContent>
<NumberFieldDecrement /> <NumberFieldDecrement />

14
apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue
View File

@ -26,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'), payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),
})) }))
const { handleSubmit } = useForm({ const { handleSubmit, setFieldValue } = useForm({
validationSchema: formSchema, validationSchema: formSchema,
initialValues: { initialValues: {
payment: 10, payment: 10,
@ -43,12 +43,11 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="w-2/3 space-y-6" @submit="onSubmit"> <form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ value, handleChange }" name="payment"> <FormField name="payment">
<FormItem> <FormItem>
<FormLabel>Payment</FormLabel> <FormLabel>Payment</FormLabel>
<NumberField <NumberField
class="gap-2" class="gap-2"
:model-value="value"
:min="0" :min="0"
:format-options="{ :format-options="{
style: 'currency', style: 'currency',
@ -56,7 +55,14 @@ const onSubmit = handleSubmit((values) => {
currencyDisplay: 'code', currencyDisplay: 'code',
currencySign: 'accounting', currencySign: 'accounting',
}" }"
@update:model-value="handleChange" @update:model-value="(v) => {
if (v) {
setFieldValue('payment', v)
}
else {
setFieldValue('payment', undefined)
}
}"
> >
<NumberFieldContent> <NumberFieldContent>
<NumberFieldDecrement /> <NumberFieldDecrement />