From 9d6c6436b60f38ae4d6d147591fbb003f697d2c5 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Wed, 23 Oct 2024 12:20:41 +0100
Subject: [PATCH] Update RegisterDoc.vue

---
 apps/showcase/doc/forms/RegisterDoc.vue | 72 ++++++++++++++++++-------
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/apps/showcase/doc/forms/RegisterDoc.vue b/apps/showcase/doc/forms/RegisterDoc.vue
index ac3e7d0b5..9838a8bbf 100644
--- a/apps/showcase/doc/forms/RegisterDoc.vue
+++ b/apps/showcase/doc/forms/RegisterDoc.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">
                 <input type="text" placeholder="Username" v-bind="$form.register('username')" />
-                <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>
@@ -35,21 +35,25 @@ export default {
                 basic: `
 <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">
-        <input name="username" type="text" placeholder="Username" v-bind="$form.register('username')" />
-        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
+        <input type="text" placeholder="Username" v-bind="$form.register('username')" />
+        <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="flex flex-col gap-2">
-            <input name="username" type="text" placeholder="Username" v-bind="$form.register('username')" />
-            <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
-        </div>
-        <Button type="submit" severity="secondary" label="Submit" />
-    </Form>
+    <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">
+                <input type="text" placeholder="Username" v-bind="$form.register('username')" />
+                <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>
@@ -89,19 +93,49 @@ input {
 `,
                 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">
+        <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">
+                <input type="text" placeholder="Username" v-bind="$form.register('username')" />
+                <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 { zodResolver } from '@primevue/form/resolvers';
+import { z } from 'zod';
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+
+const initialValues = reactive({
+  username: ''
+});
+
+const resolver = zodResolver(
+  z.object({
+    username: z.string().min(1, { message: 'Username is required.' })
+  })
+);
+
+const onFormSubmit = ({ valid }) => {
+  if (valid) {
+    toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+  }
+};
 <\/script>
+<style scoped>
+input {
+    width: 100%;
+    color: var(--p-inputtext-color);
+    background: var(--p-inputtext-background);
+    border: 1px solid var(--p-inputtext-border-color);
+}
+<\/style>
 `
             }
         };