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

62
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"> <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>
` `
} }
}; };