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

Validation examples added

pull/3758/head
Tuğçe Küçükoğlu 2023-03-16 15:57:15 +03:00
parent 23c2210493
commit a0b0c29290
20 changed files with 1717 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
doc/autocomplete/form/VeeValidateDoc.vue
View File

@ -5,9 +5,9 @@
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="ac">Value</label>
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
<small id="ac-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
@ -49,9 +49,9 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="ac">Value</label>
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
<small class="p-error" id="ac-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
</template>`,
@ -60,9 +60,9 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="ac">Value</label>
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
<small class="p-error" id="ac-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
@ -112,9 +112,9 @@ export default {
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="ac">Value</label>
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
<small class="p-error" id="ac-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>

141
doc/calendar/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small id="date-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Date is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.toLocaleDateString(), life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Date is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.toLocaleDateString(), life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Date is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.toLocaleDateString(), life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

380
doc/cascadeselect/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,380 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<CascadeSelect
v-model="value"
:class="{ 'p-invalid': errorMessage }"
:options="countries"
optionLabel="cname"
optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']"
style="min-width: 14rem"
placeholder="Select a City"
aria-describedby="cc-error"
/>
<small id="cc-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'City is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.cname, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" aria-describedby="cc-error" />
<small class="p-error" id="cc-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" aria-describedby="cc-error" />
<small class="p-error" id="cc-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'City is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.cname, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]
}
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" aria-describedby="cc-error" />
<small class="p-error" id="cc-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
const selectedCity = ref();
const countries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]);
function validateField(value) {
if (!value) {
return 'City is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.cname, life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

138
doc/checkbox/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="chbx">I've read and accept the terms & conditions.</label>
<Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
<small id="chbx-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Accept is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="chbx">I've read and accept the terms & conditions.</label>
<Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
<small class="p-error" id="chbx-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="chbx">I've read and accept the terms & conditions.</label>
<Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
<small class="p-error" id="chbx-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Accept is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
}
});
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="chbx">I've read and accept the terms & conditions.</label>
<Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
<small class="p-error" id="chbx-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Accept is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
}
});
<\/script>
`
}
};
}
};
</script>

137
doc/chips/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small id="chips-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'At least one chip is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.join(','), life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<template>
<div class="card">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'At least one chip is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.join(','), life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>`,
composition: `
<template>
<div class="card">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'At least one chip is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.join(','), life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

134
doc/colorpicker/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
<small id="cp-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Color is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
<small class="p-error" id="cp-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
<small class="p-error" id="cp-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Color is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
}
});
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
<small class="p-error" id="cp-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Color is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
}
});
<\/script>
`
}
};
}
};
</script>

178
doc/dropdown/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label>
</span>
<small id="dd-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'City is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.name) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
:class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label>
</span>
<small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
:class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label>
</span>
<small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'City is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.name) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
}
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
:class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label>
</span>
<small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
function validateField(value) {
if (!value) {
return 'City is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.name) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

177
doc/editor/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card">
<form @submit="onSubmit">
<Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
<template v-slot:toolbar>
<span class="ql-formats">
<button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
<button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
<button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
</span>
</template>
</Editor>
<div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
<small id="editor-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</div>
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2', quill: '1.3.7' }" component="Editor" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Content is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Blog Submitted', detail: 'The blog is uploaded', life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<template>
<div class="card">
<form @submit="onSubmit">
<Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
<template v-slot:toolbar>
<span class="ql-formats">
<button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
<button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
<button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
</span>
</template>
</Editor>
<div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
<small class="p-error" id="editor-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</div>
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card">
<form @submit="onSubmit">
<Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
<template v-slot:toolbar>
<span class="ql-formats">
<button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
<button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
<button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
</span>
</template>
</Editor>
<div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
<small class="p-error" id="editor-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</div>
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Content is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Blog Submitted', detail: 'The blog is uploaded', life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>`,
composition: `
<template>
<div class="card">
<form @submit="onSubmit">
<Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
<template v-slot:toolbar>
<span class="ql-formats">
<button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
<button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
<button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
</span>
</template>
</Editor>
<div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
<small class="p-error" id="editor-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</div>
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Content is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Blog Submitted', detail: 'The blog is uploaded', life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

140
doc/inputmask/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999" :class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
<small id="mask-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Phone is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
:class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
<small class="p-error" id="mask-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
:class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
<small class="p-error" id="mask-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Phone is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
:class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
<small class="p-error" id="mask-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Phone is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

147
doc/inputnumber/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,147 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="year">Enter a year between 1960-2050.</label>
<InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
<small id="number-error" class="p-error">{{ errorMessage || (errors.length > 0 ? errors : '&nbsp;') }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage, errors } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Year is required.';
}
return true;
}
const onSubmit = handleSubmit((values, actions) => {
if (values.value && values.value >= 1960 && values.value <= 2050) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
} else {
actions.setErrors({ value: 'Enter a valid year.' });
}
});
return { value, handleSubmit, onSubmit, errorMessage, errors };
},
data() {
return {
code: {
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="year">Enter a year between 1960-2050.</label>
<InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
<small class="p-error" id="number-error">{{ errorMessage || (errors.length > 0 ? errors : '&nbsp;') }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="year">Enter a year between 1960-2050.</label>
<InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
<small class="p-error" id="number-error">{{ errorMessage || (errors.length > 0 ? errors : '&nbsp;') }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage, errors } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Year is required.';
}
return true;
}
const onSubmit = handleSubmit((values, actions) => {
if (values.value && values.value >= 1960 && values.value <= 2050) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
} else {
actions.setErrors({ value: 'Enter a valid year.' });
}
});
return { value, handleSubmit, onSubmit, errorMessage, errors };
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="year">Enter a year between 1960-2050.</label>
<InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
<small class="p-error" id="number-error">{{ errorMessage || (errors.length > 0 ? errors : '&nbsp;') }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage, errors } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Year is required.';
}
return true;
}
const onSubmit = handleSubmit((values, actions) => {
if (values.value && values.value >= 1960 && values.value <= 2050) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
} else {
actions.setErrors({ value: 'Enter a valid year.' });
}
});
<\/script>
`
}
};
}
};
</script>

32
doc/inputtext/form/VeeValidateDoc.vue
View File

@ -2,14 +2,14 @@
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
@ -47,28 +47,28 @@ export default {
code: {
basic: `
<template>
<div class="card flex justify-content-center p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
@ -105,14 +105,14 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center p-fluid">
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>

13
pages/calendar/index.vue
View File

@ -9,6 +9,7 @@ import ButtonBarDoc from '@/doc/calendar/ButtonBarDoc';
import DateTemplateDoc from '@/doc/calendar/DateTemplateDoc';
import DisabledDoc from '@/doc/calendar/DisabledDoc';
import FloatLabelDoc from '@/doc/calendar/FloatLabelDoc';
import VeeValidateDoc from '@/doc/calendar/form/VeeValidateDoc.vue';
import FormatDoc from '@/doc/calendar/FormatDoc';
import IconDoc from '@/doc/calendar/IconDoc';
import ImportDoc from '@/doc/calendar/ImportDoc';
@ -124,6 +125,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/cascadeselect/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc';
import BasicDoc from '@/doc/cascadeselect/BasicDoc';
import DisabledDoc from '@/doc/cascadeselect/DisabledDoc';
import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc';
import VeeValidateDoc from '@/doc/cascadeselect/form/VeeValidateDoc';
import ImportDoc from '@/doc/cascadeselect/ImportDoc';
import InvalidDoc from '@/doc/cascadeselect/InvalidDoc';
import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc';
@ -52,6 +53,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/checkbox/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/checkbox/AccessibilityDoc';
import BasicDoc from '@/doc/checkbox/BasicDoc';
import DisabledDoc from '@/doc/checkbox/DisabledDoc';
import DynamicDoc from '@/doc/checkbox/DynamicDoc';
import VeeValidateDoc from '@/doc/checkbox/form/VeeValidateDoc';
import GroupDoc from '@/doc/checkbox/GroupDoc';
import ImportDoc from '@/doc/checkbox/ImportDoc';
import InvalidDoc from '@/doc/checkbox/InvalidDoc';
@ -46,6 +47,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/chips/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/chips/AccessibilityDoc';
import BasicDoc from '@/doc/chips/BasicDoc';
import DisabledDoc from '@/doc/chips/DisabledDoc';
import FloatLabelDoc from '@/doc/chips/FloatLabelDoc';
import VeeValidateDoc from '@/doc/chips/form/VeeValidateDoc';
import ImportDoc from '@/doc/chips/ImportDoc';
import InvalidDoc from '@/doc/chips/InvalidDoc';
import SeparatorDoc from '@/doc/chips/SeparatorDoc';
@ -52,6 +53,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/colorpicker/index.vue
View File

@ -6,6 +6,7 @@
import AccessibilityDoc from '@/doc/colorpicker/AccessibilityDoc';
import BasicDoc from '@/doc/colorpicker/BasicDoc';
import DisabledDoc from '@/doc/colorpicker/DisabledDoc';
import VeeValidateDoc from '@/doc/colorpicker/form/VeeValidateDoc';
import FormatDoc from '@/doc/colorpicker/FormatDoc';
import ImportDoc from '@/doc/colorpicker/ImportDoc';
import InlineDoc from '@/doc/colorpicker/InlineDoc';
@ -40,6 +41,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/dropdown/index.vue
View File

@ -10,6 +10,7 @@ import DisabledDoc from '@/doc/dropdown/DisabledDoc';
import EditableDoc from '@/doc/dropdown/EditableDoc';
import FilterDoc from '@/doc/dropdown/FilterDoc';
import FloatLabelDoc from '@/doc/dropdown/FloatLabelDoc';
import VeeValidateDoc from '@/doc/dropdown/form/VeeValidateDoc';
import GroupDoc from '@/doc/dropdown/GroupDoc';
import ImportDoc from '@/doc/dropdown/ImportDoc';
import InvalidDoc from '@/doc/dropdown/InvalidDoc';
@ -88,6 +89,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/editor/index.vue
View File

@ -5,6 +5,7 @@
<script>
import AccessibilityDoc from '@/doc/editor/AccessibilityDoc.vue';
import BasicDoc from '@/doc/editor/BasicDoc.vue';
import VeeValidateDoc from '@/doc/editor/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/editor/ImportDoc.vue';
import QuillDoc from '@/doc/editor/QuillDoc.vue';
import ReadOnlyDoc from '@/doc/editor/ReadOnlyDoc.vue';
@ -40,6 +41,18 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/inputmask/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
import VeeValidateDoc from '@/doc/inputmask/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
@ -58,6 +59,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',

13
pages/inputnumber/index.vue
View File

@ -8,6 +8,7 @@ import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc';
import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc';
import DisabledDoc from '@/doc/inputnumber/DisabledDoc';
import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc';
import VeeValidateDoc from '@/doc/inputnumber/form/VeeValidateDoc';
import ImportDoc from '@/doc/inputnumber/ImportDoc';
import InvalidDoc from '@/doc/inputnumber/InvalidDoc';
import LocaleDoc from '@/doc/inputnumber/LocaleDoc';
@ -65,6 +66,18 @@ export default {
label: 'Invalid',
component: InvalidDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'disabled',
label: 'Disabled',