Forms doc updates
parent
3f2510ed18
commit
90c7b0d6aa
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue