From 90c7b0d6aa2940d4382f5500571f354379ca5d94 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 23 Oct 2024 14:59:52 +0300
Subject: [PATCH] Forms doc updates

---
 apps/showcase/doc/forms/ResolversDoc.vue  |  6 +++---
 apps/showcase/doc/forms/StatesDoc.vue     |  4 ++--
 apps/showcase/doc/forms/SubmitDoc.vue     |  6 +++---
 apps/showcase/doc/forms/ValidateOnDoc.vue | 14 +++++++-------
 apps/showcase/doc/forms/pt/PTViewer.vue   |  2 +-
 apps/showcase/doc/select/FormDoc.vue      |  8 ++++----
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/showcase/doc/forms/ResolversDoc.vue b/apps/showcase/doc/forms/ResolversDoc.vue
index 63cb9c1a5..c202571dc 100644
--- a/apps/showcase/doc/forms/ResolversDoc.vue
+++ b/apps/showcase/doc/forms/ResolversDoc.vue
@@ -34,7 +34,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>
@@ -91,7 +91,7 @@ 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>
@@ -126,7 +126,7 @@ 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>
diff --git a/apps/showcase/doc/forms/StatesDoc.vue b/apps/showcase/doc/forms/StatesDoc.vue
index 311590577..472d4ca44 100644
--- a/apps/showcase/doc/forms/StatesDoc.vue
+++ b/apps/showcase/doc/forms/StatesDoc.vue
@@ -5,8 +5,8 @@
     <div class="card flex justify-center">
         <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="grid lg:grid-cols-2 gap-4 w-full">
             <div class="flex flex-col justify-center items-center gap-4">
-                <InputText name="username" type="text" placeholder="Username" />
-                <Button type="submit" severity="secondary" label="Submit" />
+                <InputText name="username" type="text" placeholder="Username" fluid class="sm:w-56" />
+                <Button type="submit" severity="secondary" label="Submit" fluid class="sm:w-56" />
             </div>
             <Fieldset legend="Form States">
                 <pre class="whitespace-pre-wrap">{{ $form }}</pre>
diff --git a/apps/showcase/doc/forms/SubmitDoc.vue b/apps/showcase/doc/forms/SubmitDoc.vue
index c91c46def..e09e1ff36 100644
--- a/apps/showcase/doc/forms/SubmitDoc.vue
+++ b/apps/showcase/doc/forms/SubmitDoc.vue
@@ -6,7 +6,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>
             <div class="flex flex-col gap-2">
                 <Password name="password" placeholder="Password" :feedback="false" fluid />
@@ -56,7 +56,7 @@ 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>
     <div class="flex flex-col gap-2">
         <Password name="password" placeholder="Password" :feedback="false" fluid />
@@ -74,7 +74,7 @@ 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>
         <div class="flex flex-col gap-2">
             <Password name="password" placeholder="Password" :feedback="false" fluid />
diff --git a/apps/showcase/doc/forms/ValidateOnDoc.vue b/apps/showcase/doc/forms/ValidateOnDoc.vue
index f5d1cb5d2..4ed06ee58 100644
--- a/apps/showcase/doc/forms/ValidateOnDoc.vue
+++ b/apps/showcase/doc/forms/ValidateOnDoc.vue
@@ -9,15 +9,15 @@
         <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @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>
             <div class="flex flex-col gap-2">
                 <InputText name="name" type="text" placeholder="Name" fluid />
-                <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.errors[0]?.message }}</Message>
+                <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
             </div>
             <div class="flex flex-col gap-2">
                 <InputText name="surname" type="text" placeholder="Surname" fluid />
-                <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.errors[0]?.message }}</Message>
+                <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -39,15 +39,15 @@ export default {
 <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @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>
     <div class="flex flex-col gap-2">
         <InputText name="name" type="text" placeholder="Name" fluid />
-        <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.errors[0]?.message }}</Message>
+        <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
     </div>
     <div class="flex flex-col gap-2">
         <InputText name="surname" type="text" placeholder="Surname" fluid />
-        <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.errors[0]?.message }}</Message>
+        <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -57,7 +57,7 @@ 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>
diff --git a/apps/showcase/doc/forms/pt/PTViewer.vue b/apps/showcase/doc/forms/pt/PTViewer.vue
index 213acc89e..ab78888fe 100644
--- a/apps/showcase/doc/forms/pt/PTViewer.vue
+++ b/apps/showcase/doc/forms/pt/PTViewer.vue
@@ -3,7 +3,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @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>
diff --git a/apps/showcase/doc/select/FormDoc.vue b/apps/showcase/doc/select/FormDoc.vue
index 632787e12..b43b63472 100644
--- a/apps/showcase/doc/select/FormDoc.vue
+++ b/apps/showcase/doc/select/FormDoc.vue
@@ -4,7 +4,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-2">
                 <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -44,7 +44,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
     <div class="flex flex-col gap-2">
         <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -55,7 +55,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-2">
                 <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -107,7 +107,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-2">
                 <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>