Doc update

primefaces · Nov 1, 2024 · ba27cfc · ba27cfc
1 parent d018dcf
commit ba27cfc
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 244 deletions.
diff --git a/apps/showcase/doc/forms/FormFieldDoc.vue b/apps/showcase/doc/forms/FormFieldDoc.vue
diff --git a/apps/showcase/doc/forms/formfield/BuiltInDoc.vue b/apps/showcase/doc/forms/formfield/BuiltInDoc.vue
@@ -1,10 +1,13 @@
 <template>
     <DocSectionText label="Built-in" :level="2" v-bind="$attrs">
-        <p>It can be easily integrated with PrimeVue built-in components by wrapping them inside the FormField and using its props to manage validation and state.</p>
+        <p>
+            Although PrimeVue components have built-in support for the Form API, you may still prefer to utilize the components as wrapped with the FormField. This is a matter of preference, for example in case you are also using FormField for other
+            3rd party components, your own custom components, and native elements, for consistency it may be an option.
+        </p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
                 <InputText type="text" placeholder="Username" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>
@@ -29,7 +32,7 @@ export default {
             code: {
                 basic: `
 <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+    <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
         <InputText type="text" placeholder="Username" />
         <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
     </FormField>
@@ -42,7 +45,7 @@ export default {
         <Toast />
 
         <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
                 <InputText type="text" placeholder="Username" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>
@@ -79,7 +82,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
                 <InputText type="text" placeholder="Username" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>

diff --git a/apps/showcase/doc/forms/formfield/FormFieldDoc.vue b/apps/showcase/doc/forms/formfield/FormFieldDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <i>FormField</i> is a helper component that provides validation and tracking for input elements, offering a more flexible structure to bind PrimeVue, non-PrimeVue components or native HTML elements to Form API. Additionally, with
+            props like <i>validateOn*</i>, <i>initialValue</i>, <i>resolver</i>, and <i>name</i>, behaviors can be controlled directly from this component.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { FormField } from '@primevue/forms';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/forms/formfield/NonPrimeVueDoc.vue b/apps/showcase/doc/forms/formfield/NonPrimeVueDoc.vue
@@ -1,14 +1,14 @@
 <template>
     <DocSectionText label="Non-PrimeVue" :level="2" v-bind="$attrs">
-        <p>It can also be used with non-PrimeVue components, providing a flexible way to manage validation and state for any custom HTML elements or third-party libraries.</p>
+        <p>Form API is not strictly tied to PrimeVue components, providing a flexible way to manage validation and state for any native HTML elements, your own custom components or third-party libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
                 <input type="text" placeholder="Username" :class="[{ error: $field?.invalid }]" v-bind="$field.props" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>
-            <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-1">
                 <input v-model="$field.value" type="password" placeholder="Password" :class="[{ error: $field?.invalid }]" @input="$field.onInput" @blur="$field.onBlur" @change="$field.onChange" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>
@@ -34,11 +34,11 @@ export default {
             code: {
                 basic: `
 <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+    <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
         <input type="text" placeholder="Username" :class="[{ error: $field?.invalid }]" v-bind="$field.props" />
         <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
     </FormField>
-    <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-2">
+    <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-1">
         <input v-model="$field.value" type="password" placeholder="Password" :class="[{ error: $field?.invalid }]" @input="$field.onInput" @blur="$field.onBlur" @change="$field.onChange" />
         <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
     </FormField>
@@ -51,11 +51,11 @@ export default {
         <Toast />
 
         <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
                 <input type="text" placeholder="Username" :class="[{ error: $field?.invalid }]" v-bind="$field.props" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>
-            <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-1">
                 <input v-model="$field.value" type="password" placeholder="Password" :class="[{ error: $field?.invalid }]" @input="$field.onInput" @blur="$field.onBlur" @change="$field.onChange" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>
@@ -105,11 +105,11 @@ input.error {
 <template>
     <div class="card flex justify-center">
         <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
                 <input type="text" placeholder="Username" :class="[{ error: $field?.invalid }]" v-bind="$field.props" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>
-            <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-1">
                 <input v-model="$field.value" type="password" placeholder="Password" :class="[{ error: $field?.invalid }]" @input="$field.onInput" @blur="$field.onBlur" @change="$field.onChange" />
                 <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
             </FormField>