vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-11 09:52:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update form demo codes

Browse source
This commit is contained in:
Mert Sincan 2024-10-23 12:06:59 +01:00
parent 85f8be65fd
commit 960927bcb2
5 changed files with 176 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

151
apps/showcase/doc/forms/DynamicDoc.vue
View file

@ -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,29 +121,33 @@ export default {
`,
options: `
<template>
<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>
<div class="card grid md:grid-cols-2 gap-4 w-full">
<Toast />
<Fieldset legend="Form 2" pt:content:class="flex justify-center">
<DynamicForm :fields @submit="onFormSubmit('Form 2', $event)" />
</Fieldset>
<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>
@ -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>
`
}