Update form demo codes
Mert Sincan
parent
85f8be65fd
commit
960927bcb2
|
|
@ -8,7 +8,7 @@
|
|||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -28,20 +28,24 @@ export default {
|
|||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Toast />
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -76,18 +80,50 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<Card>
|
||||
<template #title>Simple Card</template>
|
||||
<template #content>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
|
||||
quas!
|
||||
</p>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="card flex justify-center">
|
||||
<Toast />
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const initialValues = reactive({
|
||||
username: ''
|
||||
});
|
||||
|
||||
const resolver = ({ values }) => {
|
||||
const errors = {};
|
||||
|
||||
if (!values.username) {
|
||||
errors.username = [{ message: 'Username is required.' }];
|
||||
}
|
||||
|
||||
return {
|
||||
errors
|
||||
};
|
||||
};
|
||||
|
||||
const onFormSubmit = ({ valid }) => {
|
||||
if (valid) {
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Form is submitted.',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<DynamicForm :fields @submit="onFormSubmit('Form 2', $event)" />
|
||||
</Fieldset>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
<DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -121,6 +121,9 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card grid md:grid-cols-2 gap-4 w-full">
|
||||
<Toast />
|
||||
|
||||
<Fieldset legend="Form 1" pt:content:class="flex justify-center">
|
||||
<DynamicForm @submit="onFormSubmit('Form 1', $event)">
|
||||
<DynamicFormField groupId="userId_1" name="username">
|
||||
|
|
@ -144,6 +147,7 @@ export default {
|
|||
<Fieldset legend="Form 2" pt:content:class="flex justify-center">
|
||||
<DynamicForm :fields @submit="onFormSubmit('Form 2', $event)" />
|
||||
</Fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -231,18 +235,101 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<Card>
|
||||
<template #title>Simple Card</template>
|
||||
<template #content>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
|
||||
quas!
|
||||
</p>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="card grid md:grid-cols-2 gap-4 w-full">
|
||||
<Toast />
|
||||
|
||||
<Fieldset legend="Form 1" pt:content:class="flex justify-center">
|
||||
<DynamicForm @submit="onFormSubmit('Form 1', $event)">
|
||||
<DynamicFormField groupId="userId_1" name="username">
|
||||
<DynamicFormLabel>Username</DynamicFormLabel>
|
||||
<DynamicFormControl defaultValue="PrimeVue" fluid :schema="userNameSchema" />
|
||||
<DynamicFormMessage />
|
||||
</DynamicFormField>
|
||||
<DynamicFormField groupId="passId_1" name="password">
|
||||
<DynamicFormLabel>Password</DynamicFormLabel>
|
||||
<DynamicFormControl as="Password" :feedback="false" fluid :schema="passwordSchema" />
|
||||
<DynamicFormMessage errorType="minimum" />
|
||||
<DynamicFormMessage errorType="maximum" />
|
||||
<DynamicFormMessage errorType="uppercase" severity="warn" />
|
||||
<DynamicFormMessage errorType="lowercase" severity="warn" />
|
||||
<DynamicFormMessage errorType="number" severity="secondary" />
|
||||
</DynamicFormField>
|
||||
<DynamicFormSubmit />
|
||||
</DynamicForm>
|
||||
</Fieldset>
|
||||
|
||||
<Fieldset legend="Form 2" pt:content:class="flex justify-center">
|
||||
<DynamicForm :fields @submit="onFormSubmit('Form 2', $event)" />
|
||||
</Fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { z } from 'zod';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import DynamicForm from './dynamic/DynamicForm.vue';
|
||||
import DynamicFormControl from './dynamic/DynamicFormControl.vue';
|
||||
import DynamicFormField from './dynamic/DynamicFormField.vue';
|
||||
import DynamicFormLabel from './dynamic/DynamicFormLabel.vue';
|
||||
import DynamicFormMessage from './dynamic/DynamicFormMessage.vue';
|
||||
import DynamicFormSubmit from './dynamic/DynamicFormSubmit.vue';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const userNameSchema = z.string().min(1, { message: 'Username is required.' });
|
||||
|
||||
const passwordSchema = z
|
||||
.string()
|
||||
.min(3, { message: 'Password must be at least 3 characters long.' })
|
||||
.max(8, { message: 'Password must not exceed 8 characters.' })
|
||||
.refine((value) => /[a-z]/.test(value), {
|
||||
errorType: 'lowercase',
|
||||
message: 'Password must contain at least one lowercase letter.'
|
||||
})
|
||||
.refine((value) => /[A-Z]/.test(value), {
|
||||
errorType: 'uppercase',
|
||||
message: 'Password must contain at least one uppercase letter.'
|
||||
})
|
||||
.refine((value) => /\d/.test(value), {
|
||||
errorType: 'number',
|
||||
message: 'Password must contain at least one number.'
|
||||
});
|
||||
|
||||
const fields = reactive({
|
||||
username: {
|
||||
groupId: 'userId_2',
|
||||
label: 'Username',
|
||||
defaultValue: 'PrimeVue',
|
||||
fluid: true,
|
||||
schema: userNameSchema
|
||||
},
|
||||
password: {
|
||||
groupId: 'passId_2',
|
||||
label: 'Password',
|
||||
as: 'Password',
|
||||
feedback: false,
|
||||
fluid: true,
|
||||
messages: [
|
||||
{ errorType: 'minimum' },
|
||||
{ errorType: 'maximum' },
|
||||
{ errorType: 'uppercase', severity: 'warn' },
|
||||
{ errorType: 'lowercase', severity: 'warn' },
|
||||
{ errorType: 'number', severity: 'secondary' }
|
||||
],
|
||||
schema: passwordSchema
|
||||
}
|
||||
});
|
||||
|
||||
const onFormSubmit = (text, { valid }) => {
|
||||
if (valid) {
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: \`\${text} is submitted.\`,
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
<DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
<DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
<DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue