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

Remove old files

pull/5756/head
tugcekucukoglu 2024-05-13 13:51:02 +03:00
parent db09d00a43
commit a4add65a65
36 changed files with 0 additions and 4546 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/menu/menu.json
View File

@ -277,10 +277,6 @@
"name": "Tabs",
"to": "/tabs"
},
{
"name": "TabView",
"to": "/tabview"
},
{
"name": "Toolbar",
"to": "/toolbar"

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

@ -1,164 +0,0 @@
<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="ac">Value</label>
<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' }" />
</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 'Value 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 {
items: [],
code: {
basic: `
<template>
<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" aria-describedby="ac-error" />
<small class="p-error" id="ac-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
</template>
`,
options: `
<template>
<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" aria-describedby="ac-error" />
<small class="p-error" id="ac-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 'Value 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 {
items: []
}
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
<\/script>
`,
composition: `
<template>
<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" aria-describedby="ac-error" />
<small class="p-error" id="ac-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 items = ref([]);
function validateField(value) {
if (!value) {
return 'Value 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();
}
});
const search = (event) => {
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
};
<\/script>
`
}
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
</script>

382
doc/cascadeselect/form/VeeValidateDoc.vue
View File

@ -1,382 +0,0 @@
<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>

142
doc/checkbox/form/VeeValidateDoc.vue
View File

@ -1,142 +0,0 @@
<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>

136
doc/colorpicker/form/VeeValidateDoc.vue
View File

@ -1,136 +0,0 @@
<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>

143
doc/datepicker/form/VeeValidateDoc.vue
View File

@ -1,143 +0,0 @@
<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>
<DatePicker 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>
<DatePicker 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>
<DatePicker 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>
<DatePicker 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>

179
doc/editor/form/VeeValidateDoc.vue
View File

@ -1,179 +0,0 @@
<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>

139
doc/inputchips/form/VeeValidateDoc.vue
View File

@ -1,139 +0,0 @@
<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 p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputChips 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 p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputChips 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 p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputChips 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 p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<InputChips 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>

142
doc/inputmask/form/VeeValidateDoc.vue
View File

@ -1,142 +0,0 @@
<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>

149
doc/inputnumber/form/VeeValidateDoc.vue
View File

@ -1,149 +0,0 @@
<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>

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

@ -1,151 +0,0 @@
<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">
<FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</FloatLabel>
<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' }" />
</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 'Name - Surname 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">
<FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</FloatLabel>
<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">
<form @submit="onSubmit" class="flex flex-column gap-2">
<FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</FloatLabel>
<small class="p-error" id="text-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 'Name - Surname 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">
<FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</FloatLabel>
<small class="p-error" id="text-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 'Name - Surname 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>

159
doc/knob/form/VeeValidateDoc.vue
View File

@ -1,159 +0,0 @@
<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">
<Knob v-model="value" aria-describedby="text-error" />
<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' }" />
</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, {
validateOnValueUpdate: false,
initialValue: 0
});
const toast = useToast();
function validateField(value) {
if (!value) {
return 'The value must be greater than zero.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm({
values: {
value: 0
}
});
}
});
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">
<Knob v-model="value" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
</template>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Knob v-model="value" aria-describedby="text-error" />
<small id="text-error" class="p-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, {
validateOnValueUpdate: false,
initialValue: 0
});
const toast = useToast();
function validateField(value) {
if (!value) {
return 'The value must be greater than zero.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm({
values: {
value: 0
}
});
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Knob id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-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, {
validateOnValueUpdate: false,
initialValue: 0
});
const toast = useToast();
function validateField(value) {
if (!value) {
return 'The value must be greater than zero.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm({
values: {
value: 0
}
});
}
});
<\/script>
`
}
};
}
};
</script>

165
doc/listbox/form/VeeValidateDoc.vue
View File

@ -1,165 +0,0 @@
<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">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<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' }" />
</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.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 align-items-center gap-2">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<small id="text-error" class="p-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">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<small id="text-error" class="p-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.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 align-items-center gap-2">
<Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
<small id="text-error" class="p-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();
const cities = [
{ 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) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

183
doc/multiselect/form/VeeValidateDoc.vue
View File

@ -1,183 +0,0 @@
<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">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<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' }" />
</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) => {
let detail = '';
values.value.map((value, i) => {
detail += value.name + (i < values.value.length - 1 ? ', ' : '');
});
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: detail, 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 align-items-center gap-2">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<small id="text-error" class="p-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">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<small id="text-error" class="p-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) => {
let detail = '';
values.value.map((value, i) => {
detail += value.name + (i < values.value.length - 1 ? ', ' : '');
});
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: detail, 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 align-items-center gap-2">
<MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
<small id="text-error" class="p-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();
const cities = [
{ 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) => {
let detail = '';
values.value.map((value, i) => {
detail += value.name + (i < values.value.length - 1 ? ', ' : '');
});
if (values.value && values.value.length > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: detail, life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

143
doc/password/form/VeeValidateDoc.vue
View File

@ -1,143 +0,0 @@
<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="value">Password</label>
<Password id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<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' }" />
</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 'Password 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">
<label for="value">Password</label>
<Password id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<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">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="value">Password</label>
<Password id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-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 'Password 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">
<label for="value">Password</label>
<Password id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-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 'Password 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>

209
doc/radiobutton/form/VeeValidateDoc.vue
View File

@ -1,209 +0,0 @@
<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">
<div>Please choose your ingredient.</div>
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_1" name="pizza2" value="Cheese" />
<label for="ingredient_1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_2" name="pizza2" value="Mushroom" />
<label for="ingredient_2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_3" name="pizza2" value="Pepper" />
<label for="ingredient_3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_4" name="pizza2" value="Onion" />
<label for="ingredient_4" class="ml-2">Onion</label>
</div>
</div>
<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' }" />
</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 'Value 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: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>Please choose your ingredient.</div>
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_1" name="pizza2" value="Cheese" />
<label for="ingredient_1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_2" name="pizza2" value="Mushroom" />
<label for="ingredient_2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_3" name="pizza2" value="Pepper" />
<label for="ingredient_3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_4" name="pizza2" value="Onion" />
<label for="ingredient_4" class="ml-2">Onion</label>
</div>
</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>Please choose your ingredient.</div>
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_1" name="pizza2" value="Cheese" />
<label for="ingredient_1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_2" name="pizza2" value="Mushroom" />
<label for="ingredient_2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_3" name="pizza2" value="Pepper" />
<label for="ingredient_3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_4" name="pizza2" value="Onion" />
<label for="ingredient_4" class="ml-2">Onion</label>
</div>
</div>
<small id="text-error" class="p-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 'Value 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">
<div>Please choose your ingredient.</div>
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_1" name="pizza2" value="Cheese" />
<label for="ingredient_1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_2" name="pizza2" value="Mushroom" />
<label for="ingredient_2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_3" name="pizza2" value="Pepper" />
<label for="ingredient_3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient_4" name="pizza2" value="Onion" />
<label for="ingredient_4" class="ml-2">Onion</label>
</div>
</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</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 'Value 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>

180
doc/select/form/VeeValidateDoc.vue
View File

@ -1,180 +0,0 @@
<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">
<FloatLabel>
<Select 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>
</FloatLabel>
<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">
<FloatLabel>
<Select 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>
</FloatLabel>
<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">
<FloatLabel>
<Select 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>
</FloatLabel>
<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">
<FloatLabel>
<Select 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>
</FloatLabel>
<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>

147
doc/selectbutton/form/VeeValidateDoc.vue
View File

@ -1,147 +0,0 @@
<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="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<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' }" />
</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 'Engine State 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 {
options: ['Off', 'On'],
code: {
basic: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<small id="text-error" class="p-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 'Engine State 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 {
options: ['Off', 'On']
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
<SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
<small id="text-error" class="p-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();
const options = ['Off', 'On'];
function validateField(value) {
if (!value) {
return 'Engine State 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>

74
doc/tabview/AccessibilityDoc.vue
View File

@ -1,74 +0,0 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
TabView container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the TabView. Each tab header has a
<i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding tab content element. The content element of each tab has <i>tabpanel</i> role, an id to match the
<i>aria-controls</i> of the header and <i>aria-labelledby</i> reference to the header as the accessible name.
</p>
<h3>Tab Header Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through the header.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused tab header.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused tab header.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the last header.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the first header.</td>
</tr>
<tr>
<td><i>pageUp</i></td>
<td>Moves scroll position to first header.</td>
</tr>
<tr>
<td><i>pageDown</i></td>
<td>Moves scroll position to last header.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>

121
doc/tabview/BasicDoc.vue
View File

@ -1,121 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>TabView consists of one or more TabPanel elements.</p>
</DocSectionText>
<div class="card">
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
`,
options: `
<template>
<div class="card">
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
</template>
<script>
<\/script>
`,
composition: `
<template>
<div class="card">
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
</template>
<script setup>
<\/script>
`
}
};
}
};
</script>

154
doc/tabview/ControlledDoc.vue
View File

@ -1,154 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
</DocSectionText>
<div class="card">
<div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
</div>
<TabView v-model:activeIndex="active">
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
active: 0,
code: {
basic: `
<div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
</div>
<TabView v-model:activeIndex="active">
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
`,
options: `
<template>
<div class="card">
<div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
</div>
<TabView v-model:activeIndex="active">
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
</template>
<script>
export default {
data() {
return {
active: 0
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
</div>
<TabView v-model:activeIndex="active">
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
</template>
<script setup>
import { ref } from 'vue';
const active = ref(0);
<\/script>
`
}
};
}
};
</script>

124
doc/tabview/DisabledDoc.vue
View File

@ -1,124 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Enabling <i>disabled</i> property of a TabPanel prevents user interaction.</p>
</DocSectionText>
<div class="card">
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>
`,
options: `
<template>
<div class="card">
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>
</div>
</template>
<script>
<\/script>
`,
composition: `
<template>
<div class="card">
<TabView>
<TabPanel header="Header I">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel header="Header II">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>
</div>
</template>
<script setup>
<\/script>
`
}
};
}
};
</script>

82
doc/tabview/DynamicDoc.vue
View File

@ -1,82 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
</DocSectionText>
<div class="card">
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
tabs: [
{ title: 'Tab 1', content: 'Tab 1 Content' },
{ title: 'Tab 2', content: 'Tab 2 Content' },
{ title: 'Tab 3', content: 'Tab 3 Content' }
],
code: {
basic: `
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
`,
options: `
<template>
<div class="card">
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ title: 'Tab 1', content: 'Tab 1 Content' },
{ title: 'Tab 2', content: 'Tab 2 Content' },
{ title: 'Tab 3', content: 'Tab 3 Content' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
</div>
</template>
<script setup>
import { ref } from 'vue';
const tabs = ref([
{ title: 'Tab 1', content: 'Tab 1 Content' },
{ title: 'Tab 2', content: 'Tab 2 Content' },
{ title: 'Tab 3', content: 'Tab 3 Content' }
]);
<\/script>
`
}
};
}
};
</script>

20
doc/tabview/ImportDoc.vue
View File

@ -1,20 +0,0 @@
<template>
<div class="doc-notification">TabView is deprecated, use <NuxtLink to="/tabs" class="doc-link">Tabs</NuxtLink> instead.</div>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
`
}
};
}
};
</script>

70
doc/tabview/ScrollableDoc.vue
View File

@ -1,70 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Adding <i>scrollable</i> property displays navigational buttons at each side to scroll between tabs.</p>
</DocSectionText>
<div class="card">
<TabView :scrollable="true">
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` })),
code: {
basic: `
<TabView :scrollable="true">
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
`,
options: `
<template>
<div class="card">
<TabView :scrollable="true">
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
</div>
</template>
<script>
export default {
data() {
return {
scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` }))
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<TabView :scrollable="true">
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p class="m-0">{{ tab.content }}</p>
</TabPanel>
</TabView>
</div>
</template>
<script setup>
import { ref } from 'vue';
const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` })));
<\/script>
`
}
};
}
};
</script>

195
doc/tabview/TemplateDoc.vue
View File

@ -1,195 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Custom content for the title section of a panel is defined using the header template.</p>
</DocSectionText>
<div class="card">
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
</template>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />
</div>
</template>
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
</template>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />
</div>
</template>
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
`,
options: `
<template>
<div class="card">
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
</template>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />
</div>
</template>
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
</template>
<script>
<\/script>
`,
composition: `
<template>
<div class="card">
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</template>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
</template>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel>
<template #header>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />
</div>
</template>
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</TabPanel>
</TabView>
</div>
</template>
<script setup>
<\/script>
`
}
};
}
};
</script>

8
doc/tabview/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tabview.jpg" />
</div>
</template>

41
doc/tabview/pt/index.vue
View File

@ -1,41 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>TabView Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.tabview',
label: 'TabView PT Options',
component: DocApiTable,
data: getPTOption('TabView')
},
{
id: 'pt.doc.tabpanel',
label: 'TabPanel PT Options',
component: DocApiTable,
data: getPTOption('TabPanel')
}
]
};
}
};
</script>

37
doc/tabview/theming/StyledDoc.vue
View File

@ -1,37 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tabview</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-tabview-nav</td>
<td>Container of headers.</td>
</tr>
<tr>
<td>p-tabview-selected</td>
<td>Selected tab header.</td>
</tr>
<tr>
<td>p-tabview-panels</td>
<td>Container panels.</td>
</tr>
<tr>
<td>p-tabview-panel</td>
<td>Content of a tab.</td>
</tr>
</tbody>
</table>
</div>
</template>

6
doc/tabview/theming/TailwindDoc.vue
View File

@ -1,6 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
Tailwind CSS.
</DocSectionText>
</template>

40
doc/tabview/theming/index.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>TabView Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import TailwindDoc from './TailwindDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'theming.styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'theming.unstyled',
label: 'Unstyled',
description: 'Theming is implemented with the pass through properties in unstyled mode.',
children: [
{
id: 'theming.tailwind',
label: 'Tailwind',
component: TailwindDoc
}
]
}
]
};
}
};
</script>

147
doc/textarea/form/VeeValidateDoc.vue
View File

@ -1,147 +0,0 @@
<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">
<FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</FloatLabel>
<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' }" />
</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 'Description 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: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</FloatLabel>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</FloatLabel>
<small id="text-error" class="p-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 'Description 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">
<FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label>
</FloatLabel>
<small id="text-error" class="p-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 'Description 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>

136
doc/togglebutton/form/VeeValidateDoc.vue
View File

@ -1,136 +0,0 @@
<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">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<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' }" />
</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 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
nodes: null,
code: {
basic: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<small id="text-error" class="p-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 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', 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">
<ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
<small id="text-error" class="p-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 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

142
doc/toggleswitch/form/VeeValidateDoc.vue
View File

@ -1,142 +0,0 @@
<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">
<div>I've read and accept the terms & conditions.</div>
<ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<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' }" />
</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 'Accept is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', 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">
<div>I've read and accept the terms & conditions.</div>
<ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
</template>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>I've read and accept the terms & conditions.</div>
<ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-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 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', 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">
<div>I've read and accept the terms & conditions.</div>
<ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small id="text-error" class="p-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 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

157
doc/treeselect/form/VeeValidateDoc.vue
View File

@ -1,157 +0,0 @@
<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 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<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' }" :service="['NodeService']" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
import { NodeService } from '/service/NodeService';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
nodes: null,
code: {
basic: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<small id="text-error" class="p-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';
import { NodeService } from '@/service/NodeService';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (!value) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
nodes: null
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
<TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
import { NodeService } from '@/service/NodeService';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
const nodes = ref(null);
onMounted(() => {
NodeService.getTreeNodes().then((data) => (nodes.value = data));
});
function validateField(value) {
if (!value) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
</script>

75
pages/tabview/index.vue
View File

@ -1,75 +0,0 @@
<template>
<DocComponent
title="Vue Tabs Component"
header="TabView"
description="TabView is a container component to group content with tabs."
:componentDocs="docs"
:apiDocs="['TabView', 'TabPanel']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import AccessibilityDoc from '@/doc/tabview/AccessibilityDoc.vue';
import BasicDoc from '@/doc/tabview/BasicDoc.vue';
import ControlledDoc from '@/doc/tabview/ControlledDoc.vue';
import DisabledDoc from '@/doc/tabview/DisabledDoc.vue';
import DynamicDoc from '@/doc/tabview/DynamicDoc.vue';
import ImportDoc from '@/doc/tabview/ImportDoc.vue';
import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
import PTComponent from '@/doc/tabview/pt/index.vue';
import ThemingDoc from '@/doc/tabview/theming/index.vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'controlled',
label: 'Controlled',
component: ControlledDoc
},
{
id: 'scrollable',
label: 'Scrollable',
component: ScrollableDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};
</script>