From a4add65a654e557bb1ff01f7de122153f05fc62b Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 13 May 2024 13:51:02 +0300
Subject: [PATCH] Remove old files

---
 assets/menu/menu.json                     |   4 -
 doc/autocomplete/form/VeeValidateDoc.vue  | 164 ----------
 doc/cascadeselect/form/VeeValidateDoc.vue | 382 ----------------------
 doc/checkbox/form/VeeValidateDoc.vue      | 142 --------
 doc/colorpicker/form/VeeValidateDoc.vue   | 136 --------
 doc/datepicker/form/VeeValidateDoc.vue    | 143 --------
 doc/editor/form/VeeValidateDoc.vue        | 179 ----------
 doc/inputchips/form/VeeValidateDoc.vue    | 139 --------
 doc/inputmask/form/VeeValidateDoc.vue     | 142 --------
 doc/inputnumber/form/VeeValidateDoc.vue   | 149 ---------
 doc/inputtext/form/VeeValidateDoc.vue     | 151 ---------
 doc/knob/form/VeeValidateDoc.vue          | 159 ---------
 doc/listbox/form/VeeValidateDoc.vue       | 165 ----------
 doc/multiselect/form/VeeValidateDoc.vue   | 183 -----------
 doc/password/form/VeeValidateDoc.vue      | 143 --------
 doc/radiobutton/form/VeeValidateDoc.vue   | 209 ------------
 doc/select/form/VeeValidateDoc.vue        | 180 ----------
 doc/selectbutton/form/VeeValidateDoc.vue  | 147 ---------
 doc/tabview/AccessibilityDoc.vue          |  74 -----
 doc/tabview/BasicDoc.vue                  | 121 -------
 doc/tabview/ControlledDoc.vue             | 154 ---------
 doc/tabview/DisabledDoc.vue               | 124 -------
 doc/tabview/DynamicDoc.vue                |  82 -----
 doc/tabview/ImportDoc.vue                 |  20 --
 doc/tabview/ScrollableDoc.vue             |  70 ----
 doc/tabview/TemplateDoc.vue               | 195 -----------
 doc/tabview/pt/PTImage.vue                |   8 -
 doc/tabview/pt/index.vue                  |  41 ---
 doc/tabview/theming/StyledDoc.vue         |  37 ---
 doc/tabview/theming/TailwindDoc.vue       |   6 -
 doc/tabview/theming/index.vue             |  40 ---
 doc/textarea/form/VeeValidateDoc.vue      | 147 ---------
 doc/togglebutton/form/VeeValidateDoc.vue  | 136 --------
 doc/toggleswitch/form/VeeValidateDoc.vue  | 142 --------
 doc/treeselect/form/VeeValidateDoc.vue    | 157 ---------
 pages/tabview/index.vue                   |  75 -----
 36 files changed, 4546 deletions(-)
 delete mode 100644 doc/autocomplete/form/VeeValidateDoc.vue
 delete mode 100644 doc/cascadeselect/form/VeeValidateDoc.vue
 delete mode 100644 doc/checkbox/form/VeeValidateDoc.vue
 delete mode 100644 doc/colorpicker/form/VeeValidateDoc.vue
 delete mode 100644 doc/datepicker/form/VeeValidateDoc.vue
 delete mode 100644 doc/editor/form/VeeValidateDoc.vue
 delete mode 100644 doc/inputchips/form/VeeValidateDoc.vue
 delete mode 100644 doc/inputmask/form/VeeValidateDoc.vue
 delete mode 100644 doc/inputnumber/form/VeeValidateDoc.vue
 delete mode 100644 doc/inputtext/form/VeeValidateDoc.vue
 delete mode 100644 doc/knob/form/VeeValidateDoc.vue
 delete mode 100644 doc/listbox/form/VeeValidateDoc.vue
 delete mode 100644 doc/multiselect/form/VeeValidateDoc.vue
 delete mode 100644 doc/password/form/VeeValidateDoc.vue
 delete mode 100644 doc/radiobutton/form/VeeValidateDoc.vue
 delete mode 100644 doc/select/form/VeeValidateDoc.vue
 delete mode 100644 doc/selectbutton/form/VeeValidateDoc.vue
 delete mode 100644 doc/tabview/AccessibilityDoc.vue
 delete mode 100644 doc/tabview/BasicDoc.vue
 delete mode 100644 doc/tabview/ControlledDoc.vue
 delete mode 100644 doc/tabview/DisabledDoc.vue
 delete mode 100644 doc/tabview/DynamicDoc.vue
 delete mode 100644 doc/tabview/ImportDoc.vue
 delete mode 100644 doc/tabview/ScrollableDoc.vue
 delete mode 100644 doc/tabview/TemplateDoc.vue
 delete mode 100644 doc/tabview/pt/PTImage.vue
 delete mode 100644 doc/tabview/pt/index.vue
 delete mode 100644 doc/tabview/theming/StyledDoc.vue
 delete mode 100644 doc/tabview/theming/TailwindDoc.vue
 delete mode 100644 doc/tabview/theming/index.vue
 delete mode 100644 doc/textarea/form/VeeValidateDoc.vue
 delete mode 100644 doc/togglebutton/form/VeeValidateDoc.vue
 delete mode 100644 doc/toggleswitch/form/VeeValidateDoc.vue
 delete mode 100644 doc/treeselect/form/VeeValidateDoc.vue
 delete mode 100755 pages/tabview/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 4ceaeb456..15d7166d9 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -277,10 +277,6 @@
                             "name": "Tabs",
                             "to": "/tabs"
                         },
-                        {
-                            "name": "TabView",
-                            "to": "/tabview"
-                        },
                         {
                             "name": "Toolbar",
                             "to": "/toolbar"
diff --git a/doc/autocomplete/form/VeeValidateDoc.vue b/doc/autocomplete/form/VeeValidateDoc.vue
deleted file mode 100644
index dde4ffbcd..000000000
--- a/doc/autocomplete/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/cascadeselect/form/VeeValidateDoc.vue b/doc/cascadeselect/form/VeeValidateDoc.vue
deleted file mode 100644
index 9ad869073..000000000
--- a/doc/cascadeselect/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/checkbox/form/VeeValidateDoc.vue b/doc/checkbox/form/VeeValidateDoc.vue
deleted file mode 100644
index 2cb30fd08..000000000
--- a/doc/checkbox/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/colorpicker/form/VeeValidateDoc.vue b/doc/colorpicker/form/VeeValidateDoc.vue
deleted file mode 100644
index 8244b6783..000000000
--- a/doc/colorpicker/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/datepicker/form/VeeValidateDoc.vue b/doc/datepicker/form/VeeValidateDoc.vue
deleted file mode 100644
index 11a6ff873..000000000
--- a/doc/datepicker/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/editor/form/VeeValidateDoc.vue b/doc/editor/form/VeeValidateDoc.vue
deleted file mode 100644
index 2e7c8f50e..000000000
--- a/doc/editor/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/inputchips/form/VeeValidateDoc.vue b/doc/inputchips/form/VeeValidateDoc.vue
deleted file mode 100644
index 913286520..000000000
--- a/doc/inputchips/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/inputmask/form/VeeValidateDoc.vue b/doc/inputmask/form/VeeValidateDoc.vue
deleted file mode 100644
index 64a988a20..000000000
--- a/doc/inputmask/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/inputnumber/form/VeeValidateDoc.vue b/doc/inputnumber/form/VeeValidateDoc.vue
deleted file mode 100644
index 60a8ad394..000000000
--- a/doc/inputnumber/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/inputtext/form/VeeValidateDoc.vue b/doc/inputtext/form/VeeValidateDoc.vue
deleted file mode 100644
index 00331092f..000000000
--- a/doc/inputtext/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/knob/form/VeeValidateDoc.vue b/doc/knob/form/VeeValidateDoc.vue
deleted file mode 100644
index 179768bdf..000000000
--- a/doc/knob/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/listbox/form/VeeValidateDoc.vue b/doc/listbox/form/VeeValidateDoc.vue
deleted file mode 100644
index 9a53972af..000000000
--- a/doc/listbox/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/multiselect/form/VeeValidateDoc.vue b/doc/multiselect/form/VeeValidateDoc.vue
deleted file mode 100644
index 14ee8148e..000000000
--- a/doc/multiselect/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/password/form/VeeValidateDoc.vue b/doc/password/form/VeeValidateDoc.vue
deleted file mode 100644
index 266276c59..000000000
--- a/doc/password/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/radiobutton/form/VeeValidateDoc.vue b/doc/radiobutton/form/VeeValidateDoc.vue
deleted file mode 100644
index c575be7fd..000000000
--- a/doc/radiobutton/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/select/form/VeeValidateDoc.vue b/doc/select/form/VeeValidateDoc.vue
deleted file mode 100644
index 9afca402e..000000000
--- a/doc/select/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/selectbutton/form/VeeValidateDoc.vue b/doc/selectbutton/form/VeeValidateDoc.vue
deleted file mode 100644
index 2f7fec748..000000000
--- a/doc/selectbutton/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/AccessibilityDoc.vue b/doc/tabview/AccessibilityDoc.vue
deleted file mode 100644
index dea179139..000000000
--- a/doc/tabview/AccessibilityDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/BasicDoc.vue b/doc/tabview/BasicDoc.vue
deleted file mode 100644
index a382fd6f4..000000000
--- a/doc/tabview/BasicDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/ControlledDoc.vue b/doc/tabview/ControlledDoc.vue
deleted file mode 100644
index c88f70b16..000000000
--- a/doc/tabview/ControlledDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/DisabledDoc.vue b/doc/tabview/DisabledDoc.vue
deleted file mode 100644
index 4c5050644..000000000
--- a/doc/tabview/DisabledDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/DynamicDoc.vue b/doc/tabview/DynamicDoc.vue
deleted file mode 100644
index 96016a963..000000000
--- a/doc/tabview/DynamicDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/ImportDoc.vue b/doc/tabview/ImportDoc.vue
deleted file mode 100644
index 6ba3c20a0..000000000
--- a/doc/tabview/ImportDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/ScrollableDoc.vue b/doc/tabview/ScrollableDoc.vue
deleted file mode 100644
index 74c7c03cf..000000000
--- a/doc/tabview/ScrollableDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/TemplateDoc.vue b/doc/tabview/TemplateDoc.vue
deleted file mode 100644
index b4f013ce2..000000000
--- a/doc/tabview/TemplateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/pt/PTImage.vue b/doc/tabview/pt/PTImage.vue
deleted file mode 100644
index e0aea3380..000000000
--- a/doc/tabview/pt/PTImage.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/pt/index.vue b/doc/tabview/pt/index.vue
deleted file mode 100644
index c26073919..000000000
--- a/doc/tabview/pt/index.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/theming/StyledDoc.vue b/doc/tabview/theming/StyledDoc.vue
deleted file mode 100644
index f8edab294..000000000
--- a/doc/tabview/theming/StyledDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/theming/TailwindDoc.vue b/doc/tabview/theming/TailwindDoc.vue
deleted file mode 100644
index fe4aadc26..000000000
--- a/doc/tabview/theming/TailwindDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tabview/theming/index.vue b/doc/tabview/theming/index.vue
deleted file mode 100644
index 139fbda52..000000000
--- a/doc/tabview/theming/index.vue
+++ /dev/null
@@ -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>
diff --git a/doc/textarea/form/VeeValidateDoc.vue b/doc/textarea/form/VeeValidateDoc.vue
deleted file mode 100644
index 512f71697..000000000
--- a/doc/textarea/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/togglebutton/form/VeeValidateDoc.vue b/doc/togglebutton/form/VeeValidateDoc.vue
deleted file mode 100644
index 95a7e98c6..000000000
--- a/doc/togglebutton/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/toggleswitch/form/VeeValidateDoc.vue b/doc/toggleswitch/form/VeeValidateDoc.vue
deleted file mode 100644
index 4d3186932..000000000
--- a/doc/toggleswitch/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/treeselect/form/VeeValidateDoc.vue b/doc/treeselect/form/VeeValidateDoc.vue
deleted file mode 100644
index b6aaa40a9..000000000
--- a/doc/treeselect/form/VeeValidateDoc.vue
+++ /dev/null
@@ -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>
diff --git a/pages/tabview/index.vue b/pages/tabview/index.vue
deleted file mode 100755
index 0e1bc80dd..000000000
--- a/pages/tabview/index.vue
+++ /dev/null
@@ -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>