vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'v4.2.0-form' of https://github.com/primefaces/primevue into v4.2.0-form

pull/6632/head
tugcekucukoglu 2024-10-23 14:35:54 +03:00
parent 0fad8717d0 f414474c38
commit 3f2510ed18
1 changed files with 53 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
apps/showcase/doc/forms/RegisterDoc.vue
View File

@ -8,7 +8,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">
<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>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -35,21 +35,25 @@ export default {
basic: `
<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">
<input name="username" type="text" placeholder="Username" v-bind="$form.register('username')" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
<input type="text" placeholder="Username" v-bind="$form.register('username')" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
`,
options: `
<template>
<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">
<input name="username" type="text" placeholder="Username" v-bind="$form.register('username')" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
<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">
<div class="flex flex-col gap-2">
<input type="text" placeholder="Username" v-bind="$form.register('username')" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
</template>
<script>
@ -89,19 +93,49 @@ input {
`,
composition: `
<template>
<Card>
<template #title>Simple Card</template>
<template #content>
<p class="m-0">
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
quas!
</p>
</template>
</Card>
<div class="card flex justify-center">
<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">
<input type="text" placeholder="Username" v-bind="$form.register('username')" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
</template>
<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>
<style scoped>
input {
width: 100%;
color: var(--p-inputtext-color);
background: var(--p-inputtext-background);
border: 1px solid var(--p-inputtext-border-color);
}
<\/style>
`
}
};