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

MultiSelect form

pull/6632/head
tugcekucukoglu 2024-10-22 15:13:26 +03:00
parent b76a9cb102
commit c71ea19850
1 changed files with 105 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
apps/showcase/doc/multiselect/FormDoc.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" /> <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" 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.errors[0]?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" class="self-center p-2">Submit</Button> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
</template> </template>
<script> <script>
@ -22,6 +22,17 @@ export default {
initialValues: { initialValues: {
city: [] city: []
}, },
resolver: zodResolver(
z.object({
city: z
.array(
z.object({
name: z.string().min(1, 'Option cannot be empty')
})
)
.min(1, 'At least one city should be selected.')
})
),
cities: [ cities: [
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },
@ -29,42 +40,64 @@ export default {
{ name: 'Istanbul', code: 'IST' }, { name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' } { name: 'Paris', code: 'PRS' }
], ],
resolver: null, code: {
schema: z.object({ basic: `
city: z <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
`,
options: `
<template>
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
</template>
<script>
import { zodResolver } from '@primevue/form/resolvers';
import { z } from 'zod';
export default {
data() {
return {
initialValues: {
city: []
},
resolver: zodResolver(
z.object({
city: z
.array( .array(
z.object({ z.object({
name: z.string().min(1, 'Option cannot be empty') name: z.string().min(1, 'Option cannot be empty')
}) })
) )
.min(1, 'At least one city should be selected.') .min(1, 'At least one city should be selected.')
}), })
code: { ),
basic: ` cities: [
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4"> { name: 'New York', code: 'NY' },
<div class="flex flex-col gap-2"> { name: 'Rome', code: 'RM' },
<InputText name="username" type="text" placeholder="Username" /> { name: 'London', code: 'LDN' },
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message> { name: 'Istanbul', code: 'IST' },
</div> { name: 'Paris', code: 'PRS' }
<div class="flex flex-col gap-2"> ]
<InputText name="email" type="text" placeholder="Email" /> }
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message> },
</div> methods: {
<Button type="submit" severity="secondary" class="self-center p-2">Submit</Button> onFormSubmit({ valid }) {
</Form> if (valid) {
`, this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
options: ` }
<template>
<div class="card flex justify-center">
<InputText type="text" v-model="value" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
} }
} }
} }
@ -74,22 +107,55 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<InputText type="text" v-model="value" /> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { zodResolver } from '@primevue/form/resolvers';
import { useToast } from "primevue/usetoast";
import { z } from 'zod';
const value = ref(null); const toast = useToast();
const initialValues = ref({
city: []
});
const resolver = ref(zodResolver(
z.object({
city: z
.array(
z.object({
name: z.string().min(1, 'Option cannot be empty')
})
)
.min(1, 'At least one city should be selected.')
})
));
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const onFormSubmit = ({ valid }) => {
if (valid) {
toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
}
};
<\/script> <\/script>
` `
} }
}; };
}, },
mounted() {
this.resolver = zodResolver(this.schema);
},
methods: { methods: {
onFormSubmit({ valid }) { onFormSubmit({ valid }) {
if (valid) { if (valid) {