Update RegisterDoc.vue
parent
755edbf7dd
commit
9d6c6436b6
|
@ -8,7 +8,7 @@
|
||||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
<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">
|
<div class="flex flex-col gap-2">
|
||||||
<input type="text" placeholder="Username" v-bind="$form.register('username')" />
|
<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>
|
</div>
|
||||||
<Button type="submit" severity="secondary" label="Submit" />
|
<Button type="submit" severity="secondary" label="Submit" />
|
||||||
</Form>
|
</Form>
|
||||||
|
@ -35,21 +35,25 @@ export default {
|
||||||
basic: `
|
basic: `
|
||||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
<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">
|
<div class="flex flex-col gap-2">
|
||||||
<input name="username" type="text" placeholder="Username" v-bind="$form.register('username')" />
|
<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>
|
</div>
|
||||||
<Button type="submit" severity="secondary" label="Submit" />
|
<Button type="submit" severity="secondary" label="Submit" />
|
||||||
</Form>
|
</Form>
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
|
<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">
|
<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">
|
<div class="flex flex-col gap-2">
|
||||||
<input name="username" type="text" placeholder="Username" v-bind="$form.register('username')" />
|
<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>
|
</div>
|
||||||
<Button type="submit" severity="secondary" label="Submit" />
|
<Button type="submit" severity="secondary" label="Submit" />
|
||||||
</Form>
|
</Form>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -89,19 +93,49 @@ input {
|
||||||
`,
|
`,
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<Card>
|
<div class="card flex justify-center">
|
||||||
<template #title>Simple Card</template>
|
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||||
<template #content>
|
<div class="flex flex-col gap-2">
|
||||||
<p class="m-0">
|
<input type="text" placeholder="Username" v-bind="$form.register('username')" />
|
||||||
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
|
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||||
quas!
|
</div>
|
||||||
</p>
|
<Button type="submit" severity="secondary" label="Submit" />
|
||||||
</template>
|
</Form>
|
||||||
</Card>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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>
|
<\/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>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue