From 1817467bfd0be8c248952b03ccf30d27bff5c205 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 29 Oct 2024 00:22:08 +0300
Subject: [PATCH] Update FormsDoc.vue

---
 apps/showcase/doc/message/FormsDoc.vue | 78 +++++++++++++-------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/apps/showcase/doc/message/FormsDoc.vue b/apps/showcase/doc/message/FormsDoc.vue
index 54113cc7a..0190ca896 100644
--- a/apps/showcase/doc/message/FormsDoc.vue
+++ b/apps/showcase/doc/message/FormsDoc.vue
@@ -4,14 +4,15 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-            <div class="flex flex-col">
-                <InputText placeholder="Username" aria-label="username" invalid />
-                <Message severity="error" variant="plain" size="small">Username is required</Message>
+            <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+            <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+            <div class="flex flex-col gap-1">
+                <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+                <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
             </div>
-            <div class="flex flex-col">
-                <InputText placeholder="Email" aria-label="email" invalid />
-                <Message severity="error" variant="plain" size="small">Email is not valid</Message>
+            <div class="flex flex-col gap-1">
+                <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+                <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
             </div>
         </div>
     </div>
@@ -22,33 +23,33 @@
 export default {
     data() {
         return {
+            username: null,
+            email: null,
             code: {
                 basic: `
-<div class="flex flex-col gap-4">
-    <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-    <div class="flex flex-col">
-        <InputText placeholder="Username" aria-label="username" invalid />
-        <Message severity="error" variant="plain" size="small">Username is required</Message>
-    </div>
-    <div class="flex flex-col">
-        <InputText placeholder="Email" aria-label="email" invalid />
-        <Message severity="error" variant="plain" size="small">Email is not valid</Message>
-    </div>
+<Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+<Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+<div class="flex flex-col gap-1">
+    <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+    <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+</div>
+<div class="flex flex-col gap-1">
+    <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+    <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
 </div>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-            <div class="flex flex-col">
-                <InputText placeholder="Username" aria-label="username" invalid />
-                <Message severity="error" variant="plain" size="small">Username is required</Message>
-            </div>
-            <div class="flex flex-col">
-                <InputText placeholder="Email" aria-label="email" invalid />
-                <Message severity="error" variant="plain" size="small">Email is not valid</Message>
-            </div>
+    <div class="flex flex-col gap-4">
+        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
         </div>
     </div>
 </template>
@@ -58,17 +59,16 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-            <div class="flex flex-col">
-                <InputText placeholder="Username" aria-label="username" invalid />
-                <Message severity="error" variant="plain" size="small">Username is required</Message>
-            </div>
-            <div class="flex flex-col">
-                <InputText placeholder="Email" aria-label="email" invalid />
-                <Message severity="error" variant="plain" size="small">Email is not valid</Message>
-            </div>
+    <div class="flex flex-col gap-4">
+        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
         </div>
     </div>
 </template>