Update form demo codes

apps/showcase/doc/forms/BasicDoc.vue

@@ -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>
-    <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+    <div class="card flex justify-center">
-        <div class="flex flex-col gap-2">
+        <Toast />
-            <InputText name="username" type="text" placeholder="Username" fluid />
+
-            <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
+        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-        </div>
+            <div class="flex flex-col gap-2">
-        <Button type="submit" severity="secondary" label="Submit" />
+                <InputText name="username" type="text" placeholder="Username" fluid />
-    </Form>
+                <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>
+    <div class="card flex justify-center">
-        <template #title>Simple Card</template>
+        <Toast />
-        <template #content>
+
-            <p class="m-0">
+        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-                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
+            <div class="flex flex-col gap-2">
-                quas!
+                <InputText name="username" type="text" placeholder="Username" fluid />
-            </p>
+                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
-        </template>
+            </div>
-    </Card>
+            <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>
 `
             }

apps/showcase/doc/forms/DynamicDoc.vue

@@ -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">
+    <div class="card grid md:grid-cols-2 gap-4 w-full">
-        <DynamicForm @submit="onFormSubmit('Form 1', $event)">
+        <Toast />
-            <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">
+        <Fieldset legend="Form 1" pt:content:class="flex justify-center">
-        <DynamicForm :fields @submit="onFormSubmit('Form 2', $event)" />
+            <DynamicForm @submit="onFormSubmit('Form 1', $event)">
-    </Fieldset>
+                <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>
+    <div class="card grid md:grid-cols-2 gap-4 w-full">
-        <template #title>Simple Card</template>
+        <Toast />
-        <template #content>
+
-            <p class="m-0">
+        <Fieldset legend="Form 1" pt:content:class="flex justify-center">
-                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
+            <DynamicForm @submit="onFormSubmit('Form 1', $event)">
-                quas!
+                <DynamicFormField groupId="userId_1" name="username">
-            </p>
+                    <DynamicFormLabel>Username</DynamicFormLabel>
-        </template>
+                    <DynamicFormControl defaultValue="PrimeVue" fluid :schema="userNameSchema" />
-    </Card>
+                    <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>
 `
             }

apps/showcase/doc/forms/RegisterDoc.vue

@@ -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>

apps/showcase/doc/forms/ResolversDoc.vue

@@ -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>

apps/showcase/doc/forms/SubmitDoc.vue

@@ -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>