Merged new Docs and Demos

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
         requireConfigFile: false
     },
     plugins: ['prettier'],
-    ignorePatterns: ['**/public/**', '/layouts/AppDocumentation.vue'],
+    ignorePatterns: ['**/public/**'],
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2022 PrimeTek
+Copyright (c) 2018-2023 PrimeTek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -61,7 +61,7 @@ Finally you'll be able to utilize the component in your application. See the Sty
 ### CDN
 
 ```javascript
-<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>/script>
+<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
 <script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"></script>
 ```
 

api-generator/build-apidoc.js

@@ -0,0 +1,405 @@
+const TypeDoc = require('typedoc');
+const path = require('path');
+const fs = require('fs');
+
+const rootDir = path.resolve(__dirname, '../');
+const outputPath = path.resolve(rootDir, 'doc/common/apidoc');
+
+const staticMessages = {
+    methods: "Defines methods that can be accessed by the component's reference.",
+    emits: 'Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.',
+    slots: 'Defines the slots used by the component.',
+    functions: 'Defines the custom functions used by the module.',
+    events: "Defines the custom events used by the component's emit.",
+    interfaces: 'Defines the custom interfaces used by the module.',
+    types: 'Defines the custom types used by the module.'
+};
+
+const app = new TypeDoc.Application();
+
+// If you want TypeDoc to load tsconfig.json / typedoc.json files
+app.options.addReader(new TypeDoc.TSConfigReader());
+app.options.addReader(new TypeDoc.TypeDocReader());
+
+app.bootstrap({
+    // typedoc options here
+    name: 'PrimeVue',
+    entryPoints: [`components`],
+    entryPointStrategy: 'expand',
+    hideGenerator: true,
+    excludeExternals: true,
+    includeVersion: true,
+    searchInComments: true,
+    disableSources: true,
+    logLevel: 'Error',
+    exclude: ['node_modules', 'components/**/*.js']
+});
+
+const project = app.convert();
+
+if (project) {
+    const doc = {};
+
+    const parseText = (text) => {
+        return text.replace(/{/g, '{').replace(/}/g, '}');
+    };
+
+    project.children.forEach((module) => {
+        const { name, comment } = module;
+
+        /*  if (name === 'knob') {
+            console.log('module', module);
+        } */ // REMOVE
+
+        // if (name !== 'datatable') return; // REMOVE
+
+        const description = comment && comment.summary.map((s) => s.text || '').join(' ');
+
+        doc[name] = {
+            description
+        };
+
+        const module_component_group = module.groups.find((g) => g.title === 'Component');
+        let methods = {
+            description: staticMessages['methods'],
+            values: []
+        };
+
+        module_component_group &&
+            module_component_group.children.forEach((component) => {
+                const description =
+                    component.comment &&
+                    component.comment.summary
+                        .map((s) => {
+                            const text = s.text || '';
+                            const splittedText = text.split('_');
+
+                            return splittedText[1] ? splittedText[1] : text;
+                        })
+                        .join(' ');
+
+                !doc[name]['components'] && (doc[name]['components'] = {});
+
+                const component_method_group = component.groups && component.groups.find((g) => g.title === 'Methods');
+
+                component_method_group &&
+                    component_method_group.children.forEach((method) => {
+                        const signature = method.getAllSignatures()[0];
+
+                        methods.values.push({
+                            name: signature.name,
+                            parameters: signature.parameters.map((param) => {
+                                return {
+                                    name: param.name,
+                                    type: param.type.toString(),
+                                    description: param.comment && param.comment.summary.map((s) => s.text || '').join(' ')
+                                };
+                            }),
+                            returnType: signature.type.toString(),
+                            description: signature.comment && signature.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                const component_props_id = component.extendedTypes && component.extendedTypes[0].typeArguments && component.extendedTypes[0].typeArguments[0] && component.extendedTypes[0].typeArguments[0]._target;
+                const module_properties_group = module.groups.find((g) => g.title === 'Properties');
+                const component_props = module_properties_group && module_properties_group.children.find((c) => (component_props_id ? c.id === component_props_id : true));
+
+                const props = {
+                    description: '',
+                    values: []
+                };
+                const emit = {
+                    description: staticMessages['emit'],
+                    values: []
+                };
+
+                if (component_props) {
+                    props.description = component_props.comment ? component_props.comment.summary.map((s) => parseText(s.text || '')).join(' ') : '';
+
+                    const component_props_group = component_props.groups && component_props.groups.find((g) => g.title === 'Properties');
+
+                    component_props_group &&
+                        component_props_group.children.forEach((prop) => {
+                            if (!prop.inheritedFrom || (prop.inheritedFrom && !prop.inheritedFrom.toString().startsWith('Omit.data-pr-'))) {
+                                props.values.push({
+                                    name: prop.name,
+                                    optional: prop.flags.isOptional,
+                                    readonly: prop.flags.isReadonly,
+                                    type: prop.type.toString(),
+                                    default: prop.comment && prop.comment.getTag('@defaultValue') ? parseText(prop.comment.getTag('@defaultValue').content[0].text) : '', // TODO: Check
+                                    description: prop.comment && prop.comment.summary.map((s) => parseText(s.text || '')).join(' '),
+                                    deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0].text) : undefined
+                                });
+                            }
+                        });
+
+                    const component_props_methods_group = component_props.groups && component_props.groups.find((g) => g.title === 'Methods');
+
+                    component_props_methods_group &&
+                        component_props_methods_group.children.forEach((method) => {
+                            const signature = method.getAllSignatures()[0];
+
+                            methods.values.push({
+                                name: signature.name,
+                                parameters: signature.parameters.map((param) => {
+                                    return {
+                                        name: param.name,
+                                        optional: param.flags.isOptional,
+                                        type: param.type.toString(),
+                                        description: param.comment && param.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                    };
+                                }),
+                                returnType: signature.type.toString(),
+                                description: signature.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                            });
+                        });
+                }
+
+                doc[name]['components'][component.name] = {
+                    description,
+                    methods
+                };
+            });
+
+        const module_model_group = module.groups.find((g) => g.title === 'Model');
+
+        module_model_group &&
+            module_model_group.children.forEach((model) => {
+                const event_props_description = model.comment && model.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['model'] && (doc[name]['model'] = {});
+
+                const props = {
+                    description: '',
+                    values: []
+                };
+                const model_props_group = model.groups.find((g) => g.title === 'Properties');
+
+                model_props_group &&
+                    model_props_group.children.forEach((prop) => {
+                        props.values.push({
+                            name: prop.name,
+                            optional: prop.flags.isOptional,
+                            readonly: prop.flags.isReadonly,
+                            type: prop.type.toString(),
+                            default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                            description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                doc[name]['model'][model.name] = {
+                    description: event_props_description,
+                    props
+                };
+            });
+
+        const module_functions_group = module.groups.find((g) => g.title === 'Functions');
+
+        module_functions_group &&
+            module_functions_group.children.forEach((method) => {
+                !doc[name]['functions'] &&
+                    (doc[name]['functions'] = {
+                        description: staticMessages['functions'],
+                        values: {}
+                    });
+
+                const signatures = method.getAllSignatures();
+
+                if (signatures && signatures.length > 0) {
+                    const signature = signatures[0];
+
+                    doc[name]['functions'].values[method.name] = {
+                        name: signature.name,
+                        parameters: signature.parameters.map((param) => {
+                            return {
+                                name: param.name,
+                                type: param.type.toString(),
+                                description: param.comment && param.comment.summary.map((s) => s.text || '').join(' ')
+                            };
+                        }),
+                        returnType: signature.type.toString(),
+                        description: signature.comment && signature.comment.summary.map((s) => s.text || '').join(' ')
+                    };
+                }
+            });
+
+        const module_events_group = module.groups.find((g) => g.title === 'Events');
+
+        module_events_group &&
+            module_events_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                const component_prop = event.comment && event.comment.getTag('@see') ? event.comment.getTag('@see').content[0].text : ''; // TODO: Check
+                const event_extendedBy = event.extendedBy && event.extendedBy.toString();
+
+                !doc[name]['events'] &&
+                    (doc[name]['events'] = {
+                        description: staticMessages['events'],
+                        values: {}
+                    });
+
+                const props = [];
+                const event_props_group = event.groups.find((g) => g.title === 'Properties');
+
+                event_props_group &&
+                    event_props_group.children.forEach((prop) => {
+                        props.push({
+                            name: prop.name,
+                            optional: prop.flags.isOptional,
+                            readonly: prop.flags.isReadonly,
+                            type: prop.type.toString(),
+                            //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                            description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                doc[name]['events'].values[event.name] = {
+                    description: event_props_description,
+                    relatedProp: component_prop,
+                    props,
+                    extendedBy: event_extendedBy
+                };
+            });
+
+        const module_interfaces_group = module.groups.find((g) => g.title === 'Interfaces');
+
+        module_interfaces_group &&
+            module_interfaces_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                const component_prop = event.comment && event.comment.getTag('@see') ? event.comment.getTag('@see').content[0].text : ''; // TODO: Check
+                const event_extendedBy = event.extendedBy && event.extendedBy.toString();
+                const event_extendedTypes = event.extendedTypes && event.extendedTypes.toString();
+
+                !doc[name]['interfaces'] &&
+                    (doc[name]['interfaces'] = {
+                        description: staticMessages['interfaces'],
+                        eventDescription: staticMessages['events'],
+                        methodDescription: staticMessages['methods'],
+                        typeDescription: staticMessages['types'],
+                        emitDescription: staticMessages['emits'],
+                        slotDescription: staticMessages['slots'],
+                        values: {}
+                    });
+
+                const props = [];
+                const methods = [];
+
+                if (event.groups) {
+                    const event_props_group = event.groups.find((g) => g.title === 'Properties');
+
+                    event_props_group &&
+                        event_props_group.children.forEach((prop) => {
+                            props.push({
+                                name: prop.name,
+                                optional: prop.flags.isOptional,
+                                readonly: prop.flags.isReadonly,
+                                type: prop.type.toString(),
+                                default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                                description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                            });
+                        });
+
+                    const event_methods_group = event.groups.find((g) => g.title === 'Methods');
+
+                    event_methods_group &&
+                        event_methods_group.children.forEach((method) => {
+                            const signature = method.getAllSignatures()[0];
+
+                            methods.push({
+                                name: signature.name,
+                                parameters: signature.parameters.map((param) => {
+                                    let type = param.type.toString();
+
+                                    if (param.type.declaration) {
+                                        type = '';
+
+                                        param.type.declaration.children.forEach((child) => {
+                                            type += ` \t ${child.name}: ${child.type.name}, // ${child.comment?.summary[0].text}\n `;
+                                        });
+
+                                        type = `{\n ${type} }`;
+                                    }
+
+                                    return {
+                                        name: param.name,
+                                        optional: param.flags.isOptional,
+                                        type: type,
+                                        description: param.comment && param.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                    };
+                                }),
+                                returnType: signature.type.toString(),
+                                description: signature.comment && signature.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                            });
+                        });
+                }
+
+                const signature = event.getAllSignatures();
+
+                if (signature && signature.length > 0) {
+                    const parameter = signature[0].parameters[0];
+
+                    props.push({
+                        name: `[${parameter.name}: ${parameter.type.toString()}]`,
+                        optional: parameter.flags.isOptional,
+                        readonly: parameter.flags.isReadonly,
+                        type: signature[0].type.toString(),
+                        //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                        description: signature[0].comment && signature[0].comment.summary.map((s) => s.text || '').join(' ')
+                    });
+                }
+
+                doc[name]['interfaces'].values[event.name] = {
+                    description: event_props_description,
+                    relatedProp: component_prop,
+                    props,
+                    methods,
+                    extendedBy: event_extendedBy,
+                    extendedTypes: event_extendedTypes
+                };
+            });
+
+        const module_types_group = module.groups.find((g) => g.title === 'Type Aliases');
+
+        module_types_group &&
+            module_types_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['types'] &&
+                    (doc[name]['types'] = {
+                        description: staticMessages['types'],
+                        values: {}
+                    });
+
+                let values = event.type.toString();
+                const declaration = event.type.declaration;
+
+                if (declaration) {
+                    const groups = declaration.groups && declaration.groups.find((g) => g.title === 'Properties');
+
+                    const map = {};
+
+                    groups &&
+                        groups.children.forEach((prop) => {
+                            const description = prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ');
+
+                            map[`${prop.name}${prop.flags.isOptional ? '?' : ''}`] = `${prop.type.toString()}, ${description ? '// ' + description : ''}`;
+                        });
+
+                    values = JSON.stringify(map, null, 4);
+                }
+
+                doc[name]['types'].values[event.name] = {
+                    values,
+                    description: event_props_description
+                };
+            });
+
+        // app.generateJson(module, `./api-generator/module-typedoc.json`);
+    });
+
+    const typedocJSON = JSON.stringify(doc, null, 4);
+
+    !fs.existsSync(outputPath) && fs.mkdirSync(outputPath);
+    fs.writeFileSync(path.resolve(outputPath, 'index.json'), typedocJSON);
+
+    /*  app.generateJson(project, `./api-generator/typedoc.json`); */
+}

app.vue

@@ -5,12 +5,13 @@
 </template>
 
 <script>
-import EventBus from '@/layouts/AppEventBus';
 import News from '@/assets/data/news.json';
+import EventBus from '@/layouts/AppEventBus';
 
 export default {
     themeChangeListener: null,
     newsActivate: null,
+    newsService: null,
     data() {
         return {
             layout: 'custom'
@@ -36,12 +37,10 @@ export default {
             if (itemString) {
                 const item = JSON.parse(itemString);
 
-                if (!item.hiddenNews || item.hiddenNews !== News.id)
+                if (!item.hiddenNews || item.hiddenNews !== News.id) {
                     this.$appState.newsActive = true;
-                
+                } else this.$appState.newsActive = false;
-                else this.$appState.newsActive = false;
+            } else {
-            } 
-            else {
                 this.$appState.newsActive = true;
             }
         };
@@ -75,6 +74,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/assets/styles/landing/landing.scss';
+@import '@/assets/styles/layout/landing/landing.scss';
-@import '@/assets/styles/app/app.scss';
+@import '@/assets/styles/layout/layout.scss';
+@import '@/assets/styles/demo/demo.scss';
 </style>

assets/styles/app/_config.scss

@@ -1,204 +0,0 @@
-.layout-config {
-    position: fixed;
-    padding: 0;
-    top: 0;
-    right: 0;
-    display: block;
-    width: 550px;
-    z-index: 1101;
-    height: 100%;
-    transition: transform .4s cubic-bezier(.05,.74,.2,.99);
-    transform: translateX(100%);
-    backface-visibility: hidden;
-
-    &.layout-config-active {
-        transform: translateX(0);
-
-        .layout-config-content-wrapper {
-            .layout-config-button {
-                i {
-                    transform: rotate(0deg);
-                }
-            }
-        }
-    }
-
-    .layout-config-content-wrapper {
-        position: relative;
-        height: 100%;
-        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
-        color: var(--text-color);
-        background-color: var(--surface-overlay);
-
-        .layout-config-button {
-            display: block;
-            position: absolute;
-            width: 52px;
-            height: 52px;
-            line-height: 52px;
-            background-color: var(--primary-color);
-            text-align: center;
-            color: var(--primary-color-text);
-            top: 270px;
-            left: -51px;
-            z-index: -1;
-            overflow: hidden;
-            cursor: pointer;
-            border-top-left-radius: 3px;
-            border-top-right-radius: 3px;
-            border-bottom-left-radius: 3px;
-            border-bottom-right-radius: 3px;
-            animation-name: rubberBand;
-            animation-duration: 1s;
-            animation-iteration-count: 3;
-            animation-delay: 5s;
-            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-
-            i {
-                font-size: 26px;
-                line-height: inherit;
-                cursor: pointer;
-                transform: rotate(360deg);
-                transition: transform 1s;
-            }
-        }
-    }
-
-    a {
-        color: $linkColor;
-        font-weight: 600;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    .layout-config-content {
-        overflow: auto;
-        height: 100%;
-        padding: 2rem;
-    }
-
-    .config-scale {
-        display: flex;
-        align-items: center;
-        margin: 1rem 0 2rem 0;
-
-        .p-button {
-            margin-right: .5rem;
-        }
-
-        i {
-            margin-right: .5rem;
-            font-size: .75rem;
-            color: var(--text-color-secondary);
-
-            &.scale-active {
-                font-size: 1.25rem;
-                color: var(--primary-color);
-            }
-        }
-    }
-
-    .layout-config-close {
-        position: absolute;
-        width: 25px;
-        height: 25px;
-        line-height: 25px;
-        text-align: center;
-        right: 20px;
-        top: 20px;
-        z-index: 999;
-        background-color: var(--primary-color);
-        border-radius: 50%;
-        transition: background-color .2s, box-shadow .2s, transform .2s;
-
-        i {
-            color:  var(--primary-color-text);
-            line-height: inherit;
-            font-size: 14px;
-        }
-
-        &:hover {
-            transform: scale(1.1);
-        }
-
-        &:focus {
-            outline: 0 none;
-            box-shadow: 0 0 0 0.2rem $focusBorderColor;
-        }
-    }
-
-    .grid > div {
-        padding: 1rem;
-        text-align: center;
-
-        span {
-            display: block;
-        }
-
-        button {
-            position: relative;
-            display: inline-flex;
-            justify-content: center;
-        }
-    }
-
-    .free-themes {
-        img {
-            width: 50px;
-            border-radius: 4px;
-            transition: transform .2s;
-
-            &:hover {
-                transform: scale(1.1);
-            }
-        }
-
-        span {
-            font-size: .875rem;
-            margin-top: .25rem;
-        }
-    }
-
-    .premium-themes {
-        img {
-            width: 100%;
-            transition: transform .2s;
-
-            &:hover {
-                transform: scale(1.1);
-            }
-        }
-    }
-}
-
-@keyframes rubberBand {
-    from {
-      transform: scale3d(1, 1, 1);
-    }
-  
-    30% {
-      transform: scale3d(1.25, 0.75, 1);
-    }
-  
-    40% {
-      transform: scale3d(0.75, 1.25, 1);
-    }
-  
-    50% {
-      transform: scale3d(1.15, 0.85, 1);
-    }
-  
-    65% {
-      transform: scale3d(.95, 1.05, 1);
-    }
-  
-    75% {
-      transform: scale3d(1.05, .95, 1);
-    }
-  
-    to {
-      transform: scale3d(1, 1, 1);
-    }
-  }

assets/styles/app/_content.scss

@@ -1,239 +0,0 @@
-.layout-content {
-    margin-left: 250px;
-    padding-top: 5rem;
-
-    .content-section {
-        padding: 2rem 4rem;
-
-        &.introduction {
-            color: var(--text-color);
-            padding-bottom: 0;
-            display: flex;
-            align-items: top;
-            justify-content: space-between;
-
-            .feature-intro {
-                h1 {
-                    color: var(--surface-900);
-                }
-
-                p {
-                    margin: 0;
-                    font-size: 1.25rem;
-                }
-
-                a {
-                    text-decoration: none;
-                    color: $linkColor;
-                    font-weight: 600;
-
-                    &:hover {
-                        text-decoration: underline;
-                    }
-                }
-            }
-
-            .app-demoactions {
-                .p-button-icon-only {
-                    padding: .5rem 0;
-                }
-            }
-        }
-
-        &.implementation {
-            color: var(--text-color);
-
-            h1, h2, h3, h4, h5, h6 {
-                color: var(--surface-900);
-            }
-
-            +.documentation {
-                padding-top: 0;
-            }
-        }
-
-        &.documentation {
-            color: var(--text-color);
-
-            li {
-                line-height: 1.5;
-            }
-
-            a {
-                text-decoration: none;
-                color: $linkColor;
-                font-weight: 600;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-
-            .doc-tablewrapper {
-                margin: 1rem 0;
-                overflow: auto;
-                border-radius: 10px;
-            }
-
-            i:not([class~="pi"]) {
-                background-color: var(--surface-card);
-                color: #2196f3;
-                font-family: Monaco, courier, monospace;
-                font-style: normal;
-                font-size: 12px;
-                font-weight: 500;
-                padding: 2px 4px;
-                letter-spacing: .5px;
-                border-radius: 3px;
-                font-weight: 600;
-                margin: 0 2px;
-                white-space: nowrap;
-            }
-
-            h1, h2, h3, h4, h5, h6 {
-                color: var(--surface-900);
-            }
-
-            .p-tabview {
-                background: transparent;
-                border: 0 none;
-
-                .p-tabview-nav {
-                    border-radius: 0;
-                    padding: 0;
-                    border-bottom: 1px solid var(--surface-border);
-                    background-color: transparent;
-
-                    li {
-                        margin-right: 0;
-                        border: 0 none;
-                        top: 1px;
-                        line-height: 1;
-
-                        a, a:visited {
-                            color: var(--text-color-secondary);
-                            text-shadow: none;
-                            height: inherit;
-                            background-color: transparent;
-                            border: 0 none;
-                            border-bottom: 1px solid transparent;
-                            margin-bottom: -1px;
-                            transition: border-bottom-color .2s;
-
-                            &:focus {
-                                outline: 0 none;
-                                transition: background-color .2s, box-shadow .2s;
-                                box-shadow: inset 0 0 0 0.2em $focusBorderColor;
-                            }
-
-                            &:hover {
-                                background: transparent;
-                                text-decoration: none;
-                            }
-                        }
-
-                        &.p-highlight a,
-                        &.p-highlight:hover a {
-                            background: transparent;
-                            color: var(--primary-color);
-                            border-bottom: 1px solid var(--primary-color);
-                        }
-
-                        &:not(.p-highlight):not(.p-disabled):hover a {
-                            color: var(--text-color);
-                            border-bottom: 1px solid var(--primary-color);
-                        }
-                    }
-
-                    .p-tabview-ink-bar {
-                        display: none;
-                    }
-                }
-
-                .p-tabview-panels {
-                    background: transparent;
-                    border: 0 none;
-                    padding: 2rem 1rem;
-
-                    .btn-viewsource {
-                        display: inline-block;
-                        padding: .5rem 1rem;
-                    }
-
-                    a {
-                        text-decoration: none;
-                        color: $linkColor;
-                        font-weight: 600;
-
-                        &:hover {
-                            text-decoration: underline;
-                        }
-                    }
-
-                    .liveEditorButton a,
-                    .liveEditorSplitButton a {
-                        padding: 0.75rem 0.5rem;
-                        font-weight: normal;
-
-                        &:hover {
-                            text-decoration: none;
-                        }
-                    }
-                }
-            }
-        }
-
-        .doc-table {
-            border-collapse: collapse;
-            width: 100%;
-            background-color: var(--surface-card);
-
-            th {
-                border-bottom: 1px solid var(--surface-border);
-                padding: 1rem;
-                text-align: left;
-                white-space: nowrap;
-            }
-
-            tbody {
-                tr:hover {
-                    background: var(--surface-hover);
-                }
-
-                td {
-                    padding: 1rem;
-                    border-bottom: 1px solid var(--surface-border);
-
-                    &:first-child {
-                        font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
-                        font-weight: 700;
-                        color: var(--text-color-secondary);
-                    }
-                }
-            }
-
-            &.browsers {
-                td {
-                    &:first-child {
-                        font-family: var(--font-family);
-                        font-weight: normal;
-                        color: var(--text-color);
-                    }
-                }
-            }
-        }
-    }
-
-    .card {
-        background: var(--surface-card);
-        padding: 2rem;
-        border-radius: 10px;
-        margin-bottom: 2rem;
-
-        .card-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-    }
-}

assets/styles/app/_core.scss

@@ -1,149 +0,0 @@
-$linkColor: #2196f3;
-$focusBorderColor:#BBDEFB;
-
-html {
-    font-size: 14px;
-}
-
-body {
-    margin: 0px;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: var(--surface-ground);
-    font-family: var(--font-family);
-    font-weight: normal;
-    color: var(--text-color);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-    text-decoration: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 1.5rem 0 1rem 0;
-    font-family: inherit;
-    font-weight: 600;
-    line-height: 1.2;
-    color: inherit;
-
-    &:first-child {
-        margin-top: 0;
-    }
-}
-
-h1 {
-    font-size: 2.5rem;
-}
-
-h2 {
-    font-size: 2rem;
-}
-
-h3 {
-    font-size: 1.75rem;
-}
-
-h4 {
-    font-size: 1.5rem;
-}
-
-h5 {
-    font-size: 1.25rem;
-}
-
-h6 {
-    font-size: 1rem;
-}
-
-p {
-    line-height: 1.5;
-    margin: 0 0 1rem 0;
-}
-
-input[type="number"] {
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-}
-
-
-@keyframes pulse {
-    0% {
-        background-color: rgba(165, 165, 165, 0.1)
-    }
-    50% {
-        background-color: rgba(165, 165, 165, 0.3)
-    }
-    100% {
-        background-color: rgba(165, 165, 165, 0.1)
-    }
-}
-
-pre[class*="language-"] {
-    background: none !important;
-
-    &:before, &:after {
-        display: none !important;
-    } 
-
-    code {
-        border-left: 10px solid var(--surface-border) !important;
-        box-shadow: none !important;
-        background: var(--surface-card) !important;
-        color: var(--text-color);
-        font-size: 14px;
-    
-        .token {
-            &.tag,
-            &.keyword {
-                color: #2196F3 !important;
-            }
-    
-            &.attr-name,
-            &.attr-string {
-                color: #2196F3 !important;
-            }
-    
-            &.attr-value {
-                color: #4CAF50 !important;
-            }
-    
-            &.punctuation {
-                color: var(--text-color);
-            }
-    
-            &.operator,
-            &.string {
-                background: transparent;
-            }
-        }
-    }
-}
-
-.p-toast.p-toast-topright,
-.p-toast.p-toast-topleft {
-    top: 100px;
-}
-
-.action-button {
-    font-weight: bold;
-    text-align: center;
-    color: #ffffff !important;
-    background-color: #455C71;
-    padding: 10px 24px 9px 24px;
-    border-radius: 3px;
-    transition: background-color .2s;
-
-    &:hover {
-        background-color: #576c7f;
-        color: #ffffff;
-        text-decoration: none !important;
-    }
-}

assets/styles/app/_demo.scss

@@ -1,128 +0,0 @@
-.customer-badge {
-    border-radius: 2px;
-    padding: .25em .5rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: .3px;
-
-    &.status-qualified {
-        background-color: #C8E6C9;
-        color: #256029;
-    }
-
-    &.status-unqualified {
-        background-color: #FFCDD2;
-        color: #C63737;
-    }
-
-    &.status-negotiation {
-        background-color: #FEEDAF;
-        color: #8A5340;
-    }
-
-    &.status-new {
-        background-color: #B3E5FC;
-        color: #23547B;
-    }
-
-    &.status-renewal {
-        background-color: #ECCFFF;
-        color: #694382;
-    }
-
-    &.status-proposal {
-        background-color: #FFD8B2;
-        color: #805B36;
-    }
-}
-
-.product-badge {
-    border-radius: 2px;
-    padding: .25em .5rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: .3px;
-
-    &.status-instock {
-        background: #C8E6C9;
-        color: #256029;
-    }
-    
-    &.status-outofstock {
-        background: #FFCDD2;
-        color: #C63737;
-    }
-    
-    &.status-lowstock {
-        background: #FEEDAF;
-        color: #8A5340;
-    }
-}
-
-.order-badge {
-    border-radius: 2px;
-    padding: .25em .5rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: .3px;
-
-    &.order-delivered {
-        background: #C8E6C9;
-        color: #256029;
-    }
-    
-    &.order-cancelled {
-        background: #FFCDD2;
-        color: #C63737;
-    }
-    
-    &.order-pending {
-        background: #FEEDAF;
-        color: #8A5340;
-    }
-    
-    &.order-returned {
-        background: #ECCFFF;
-        color: #694382;
-    }
-}
-
-.true-icon {
-    color: #256029;
-}
-
-.false-icon {
-    color: #C63737;
-}
-
-.image-text {
-    vertical-align: middle;
-    margin-left: .5rem;
-}
-
-.p-multiselect-representative-option {
-    display: inline-block;
-    vertical-align: middle;
-
-    img {
-        vertical-align: middle;
-        width: 24px;
-    }
-
-    span {
-        margin-top: .125rem;
-    }
-}
-
-.country-item {
-    display: flex;
-    align-items: center;
-
-    img.flag {
-        width: 18px;
-        margin-right: .5rem;
-    }
-}

assets/styles/app/_designer.scss

@@ -1 +0,0 @@
-/* DESIGNER */

assets/styles/app/_footer.scss

@@ -1,21 +0,0 @@
-.layout-footer {
-    font-size: 1rem;
-    padding: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    a {
-        color: var(--text-color);
-        font-weight: 600;
-    }
-
-    .layout-footer-right {
-        a {
-            i {
-                color: var(--text-secondary-color);
-                font-size: 1.5rem;
-            }
-        }
-    }
-}

assets/styles/app/_menu.scss

@@ -1,127 +0,0 @@
-.layout-sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background-color: var(--surface-overlay);
-    width: 250px;
-    user-select: none;
-    transition: transform .4s cubic-bezier(.05,.74,.2,.99);
-    display: flex;
-    flex-direction: column;
-
-    .logo {
-        min-height: 70px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 1;
-
-        &:focus {
-            outline: 0 none;
-            transition: box-shadow .2s;
-            box-shadow: 0 0 0 0.2rem $focusBorderColor;
-        }
-    }
-
-    .layout-menu {
-        padding: 0 2rem;
-        overflow-y: auto;
-        flex-grow: 1;
-
-        .menu-category {
-            display: flex;
-            align-items: center;
-            color: var(--surface-900);
-            font-weight: 700;
-            user-select: none;
-            padding: .5rem .25rem;
-            font-size: 0.857rem;
-            text-transform: uppercase;
-
-            .layout-menu-badge {
-                padding: .14rem .5rem;
-                font-size: .7rem;
-                line-height: 1.4;
-            }
-        }
-
-        .menu-items {
-            padding: 0 0 1rem 0;
-            display: flex;
-            flex-direction: column;
-
-            a {
-                color: var(--text-color);
-                display: flex;
-                align-items: center;
-                padding: .5rem .75rem;
-                border-radius: 10px;
-                cursor: pointer;
-                
-                .layout-menu-badge {
-                    padding: .14rem .5rem;
-                    font-size: .7rem;
-                    line-height: 1.4;
-                }
-
-                &:hover {
-                    background-color: var(--surface-hover);
-                }
-
-                &:focus {
-                    z-index: 1;
-                    outline: 0 none;
-                    transition: box-shadow .2s;
-                    box-shadow: var(--focus-ring);
-                }
-
-                &.router-link-exact-active {
-                    font-weight: 700;
-                    color: var(--primary-color);
-                }
-
-                .p-tag {
-                    padding-top:.125rem;
-                    padding-bottom: .125rem;
-                    margin-left: .5rem;
-                }
-            }
-
-            div {
-                &.router-link-exact-active {
-                    > a {
-                        font-weight: 700;
-                    }
-                    
-                    ul {
-                        display: block;
-                    }
-                }
-
-                ul {
-                    padding: .5rem 0;
-                    margin: 0;
-                    list-style-type: none;
-
-                    a {
-                        font-size: .875rem;
-                        padding: .475rem .5rem .475rem 2rem;
-                    }
-                }
-            }
-        }
-
-        .menu-image {
-            padding: 0 0 1rem 0;
-            
-            img {
-                width: 100%;
-            }
-        }
-    }
-
-    .layout-sidebar-filter {
-        padding: 1rem 2rem 2rem;
-    }
-}

assets/styles/app/_responsive.scss

@@ -1,146 +0,0 @@
-@media screen and (min-width: 1729px) {
-    .layout-content-inner {
-        max-width: 1478px;
-        margin: 0 auto;
-    }
-}
-
-@media screen and (max-width: 960px) {
-    .layout-wrapper {
-        &.layout-news-active {
-            .layout-content {
-                padding-top: 10rem;
-            }
-        }
-    
-        .layout-topbar {
-            height: 8rem;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            padding: 0;
-            left: 0;
-            width: 100%;
-    
-            .menu-button {
-                display: block;
-            }
-    
-            .app-theme {
-                margin-left: 0;
-                margin-right: 23px;
-            }
-    
-            .topbar-menu {
-                width: 100%;
-                height: 3rem;
-                margin: 0;
-    
-                > li {
-                    width: 25%;
-                    margin-right: 0;
-                    position: static;
-    
-                    > a,
-                    > .p-link {
-                        display: flex;
-                        height: 100%;
-                        width: 100%;
-                        justify-content: center;
-                        align-items: center;
-                        border-radius: 0;
-                    }
-    
-                    &.topbar-submenu > ul {
-                        right: auto;
-                        width: 100vw;
-                        left: 0;
-                        top: 8rem;
-                    }
-                }
-            }
-        }
-    
-        .layout-sidebar {
-            top: 0;
-            z-index: 1102;
-            height: 100%;
-            transform: translateX(-100%);
-    
-            &.active {
-                transform: translateX(0);
-            }
-        }
-    
-        .layout-content {
-            margin-left: 0;
-            padding-top: 8rem;
-    
-            .content-section {
-                &.introduction {
-                    flex-direction: column;
-                }
-            }
-    
-            .video-container {
-                position: relative;
-                width: 100%;
-                height: 0;
-                padding-bottom: 56.25%;
-    
-                iframe {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-    
-        .layout-mask {
-            background-color: rgba(0, 0, 0, 0.1);
-    
-            &.layout-mask-active {
-                z-index: 1101;
-                width: 100%;
-                height: 100%;
-                position: fixed;
-                top: 0;
-                left: 0;
-                background-color: rgba(0, 0, 0, 0.4);
-                transition: background-color .5s;
-            }
-        }
-    
-        .layout-config {
-            &.layout-config-active {
-                width: 100%;
-            }
-        }
-    }
-
-    .blocked-scroll {
-        overflow: hidden;
-    }
-}
-
-@media screen and (max-width: 640px) {
-    .layout-wrapper {
-        .layout-content {
-            .content-section {
-                padding-left: 1rem;
-                padding-right: 1rem;
-            }
-        }
-    }
-
-    .layout-news {
-        padding-left: 1rem;
-        padding-right: 1rem;
-        font-size: 12px;
-
-        > i {
-            display: none;
-        }
-    }
-}

assets/styles/app/_topbar.scss

@@ -1,205 +0,0 @@
-.layout-topbar {
-    padding: 0;
-    height: 5rem;
-    position: fixed;
-    top: 0;
-    left: 250px;
-    width: calc(100% - 250px);
-    z-index: 1100;
-    display: flex;
-    align-items: center;
-    padding: 0 4rem;
-    
-    &.layout-topbar-sticky {
-        backdrop-filter: blur(12px);
-    }
-
-    .logo {
-        display: none;
-    }
-
-    .menu-button {
-        display: none;
-        color: var(--text-color);
-        width: 70px;
-        height: 70px;
-        line-height: 70px;
-        text-align: center;
-        transition: background-color .2s;
-        cursor: pointer;
-
-        &:hover {
-            background-color: var(--surface-hover);
-        }
-
-        i {
-            font-size: 24px;
-            line-height: inherit;
-        }
-    }
-
-    .logo {
-        &:focus {
-            outline: 0 none;
-            transition: box-shadow .2s;
-            box-shadow: var(--focus-ring);
-        }
-    }
-
-    .app-theme {
-        background-color: var(--primary-color);
-        color: var(--primary-color-text);
-        padding: .5rem;
-        border-radius: 4px;
-        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-        width: 39px;
-        height: 39px;
-    
-        img {
-            width: 25px;
-        }
-    }
-
-    .topbar-menu {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        margin-left: auto;
-        display: flex;
-
-        > li {
-            margin-right: .5rem;
-
-            > a {
-                font-weight: 500;
-                text-decoration: none;
-                color: var(--text-color);
-                padding: .5rem 1.5rem;
-                display: block;
-                text-align: center;
-                user-select: none;
-                border-radius: 10px;
-                cursor: pointer;
-                transition: background-color .3s;
-
-                &:focus {
-                    z-index: 1;
-                    outline: 0 none;
-                    transition: box-shadow .2s;
-                    box-shadow: var(--focus-ring);
-                }
-
-                &:hover {
-                    background-color: var(--surface-hover);
-                }
-            }
-
-            &.topbar-submenu {
-                position: relative;
-
-                > ul {
-                    position: absolute;
-                    transform-origin: top;
-                    top: 3rem;
-                    right: 0;
-                    width: 275px;
-                    max-height: 400px;
-                    background-color: var(--surface-overlay);
-                    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-                    overflow: auto;
-                    list-style-type: none;
-                    padding: 1rem;
-                    margin: 0;
-                    border-radius: 10px;
-
-                    > li {
-                        line-height: 1;
-
-                        &.topbar-submenu-header {
-                            display: block;
-                            color: var(--text-color-secondary);
-                            font-weight: 600;
-                            user-select: none;
-                            padding: 1.5rem 0 1rem 0;
-                            font-size: 0.857rem;
-                            text-transform: uppercase;
-                
-                            &:first-child {
-                                padding-top: 1rem;
-                            }
-                        }
-                    }
-
-                    a {
-                        text-decoration: none;
-                        color: var(--text-color);
-                        padding: .5rem;
-                        display: flex;
-                        align-items: center;
-                        user-select: none;
-                        border-radius: 10px;
-                        cursor: pointer;
-                        width: 100%;
-
-                        &:hover {
-                            background-color: var(--surface-hover);
-                        }
-
-                        span {
-                            margin-left: .5rem;
-                        }
-
-                        i {
-                            font-size: 18px;
-                            color: var(--text-color-secondary);
-                        }
-
-                        img {
-                            width: 32px;
-                            margin-right: .5rem;
-                        }
-                    }
-                }
-            }
-        }
-
-        .theme-badge {
-            padding: 2px 4px;
-            vertical-align: middle;
-            border-radius: 3px;
-            color: #ffffff;
-            font-weight: bold;
-            font-size: 11px;
-            position: relative;
-            top: -1px;
-        }
-
-        .theme-badge.material {
-            background: linear-gradient(to bottom, #2196F3, #2196F3);
-        }
-
-        .theme-badge.bootstrap {
-            background: linear-gradient(to bottom, #563D7C, #966BD8);
-        }
-
-        .theme-badge.darkmode {
-            background: linear-gradient(to bottom, #141d26, #5a6067);
-        }
-    }
-}
-
-.layout-wrapper-dark {
-    .layout-topbar {
-        &.layout-topbar-sticky {
-            background-color: rgba(0, 0, 0 , 0.3);
-        }
-    }
-}
-
-.layout-wrapper-light {
-    .layout-topbar {
-        &.layout-topbar-sticky {
-            background-color: rgba(255, 255, 255, 0.85);
-        }
-    }
-}

assets/styles/demo/_common.scss

@@ -0,0 +1,4 @@
+.mypanel .p-panel-header {
+    background-color: #07c4e8;
+    color: #ffffff;
+}

assets/styles/demo/demo.scss

@@ -0,0 +1 @@
+@import './_common';

assets/styles/layout/_code.scss

@@ -21,7 +21,7 @@ pre[class*="language-"] {
     hyphens: none;
 }
 
-/* Code blocks */
+ /* Code blocks */
 pre[class*="language-"] {
     position: relative;
     margin: .5em 0;
@@ -31,7 +31,6 @@ pre[class*="language-"] {
 
 pre[class*="language-"] > code {
     position: relative;
-    z-index: 1;
     border-left: 10px solid #358ccb;
     box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
     background-color: #fdfdfd;
@@ -230,7 +229,7 @@ div.code-toolbar:hover > .toolbar {
 }
 
 /* Separate line b/c rules are thrown out if selector is invalid.
-   IE11 and old Edge versions don't support :focus-within. */
+IE11 and old Edge versions don't support :focus-within. */
 div.code-toolbar:focus-within > .toolbar {
     opacity: 1;
 }
@@ -409,32 +408,8 @@ pre[class*="language-"] {
         font-size: 14px;
         border-radius: 10px;
     }
-}
-
-.code-toolbar {
-    div.toolbar {
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-
-        .toolbar-item {
-            > button.copy-to-clipboard-button {
-                appearance: none;
-                border: 0 none !important;
-                padding: 0.3rem 1rem;
-                background: var(--surface-50) !important;
-                border-radius: 6px;
-                color: var(--surface-500) !important;
-                font-weight: 600;
-                transition: all .15s;
-                cursor: pointer;
-                box-shadow: none !important;
-    
-                &:hover {
-                    background-color: var(--surface-100) !important;
-                    color: var(--surface-600) !important;
-                }
-            }
-        }
     }
+
+.copy-to-clipboard-button {
+    display: none;
 }

assets/styles/layout/_config.scss

@@ -0,0 +1,15 @@
+.layout-config {
+    .grid {
+        > div {
+            padding: 1rem;
+        }
+
+    }
+    img {
+        transition: transform .2s;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+    }
+}

assets/styles/layout/_content.scss

@@ -0,0 +1,12 @@
+.layout-content {
+    margin-left: 250px;
+    padding-top: 5rem;
+
+    .layout-content-inner {
+        padding: 2rem 4rem;
+    }
+
+    .card {
+        @include card;
+    }
+}

assets/styles/layout/_core.scss

@@ -0,0 +1,76 @@
+html {
+    font-size: 14px;
+}
+
+body {
+    margin: 0px;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--surface-ground);
+    font-family: var(--font-family);
+    font-weight: normal;
+    color: var(--text-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 1.5rem 0 1rem 0;
+    font-family: inherit;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--surface-900);
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+h1 {
+    font-size: 2.25rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.25rem;
+}
+
+h4 {
+    font-size: 1.125rem;
+}
+
+h5 {
+    font-size: 1rem;
+}
+
+h6 {
+    font-size: .875rem;
+}
+
+p {
+    line-height: 1.5;
+    margin: 0 0 1rem 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+.p-toast.p-toast-top-right,
+.p-toast.p-toast-top-left {
+    top: 7rem;
+}

assets/styles/layout/_doc.scss

@@ -0,0 +1,320 @@
+.doc-tabmenu {
+    list-style: none;
+    margin: 0 17rem 0 0;
+    padding: 0;
+    display: flex;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--surface-border);
+
+    li {
+        margin-bottom: -1px;
+
+        button {
+            background-color: transparent;
+            border: 0 none;
+            display: block;
+            padding: 1rem 0;
+            min-width: 12rem;
+            text-align: center;
+            color: var(--text-color-secondary);
+            font-size: 1.125rem;
+            letter-spacing: 2px;
+            cursor: pointer;
+            margin: 0;
+            transition: all 0.3s;
+            border-bottom: 1px solid transparent;
+            border-top-right-radius: var(--border-round);
+            border-top-left-radius: var(--border-round);
+
+            &:hover {
+                border-bottom-color: var(--text-color);
+            }
+
+            &:focus {
+                outline: 0 none;
+            }
+        }
+
+        &.doc-tabmenu-active {
+            button {
+                color: var(--primary-color);
+                border-bottom-color: var(--primary-color);
+            }
+        }
+    }
+}
+
+.doc-tabpanel,
+.doc {
+    display: flex;
+}
+
+.doc-main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    min-width: 0;
+}
+
+.doc-intro {
+    margin-bottom: 2rem;
+
+    p {
+        font-size: 1.25rem;
+        color: var(--surface-800);
+    }
+}
+
+.doc-section-label {
+    display: flex;
+    align-items: center;
+    scroll-margin-top: 6.5rem;
+
+    > a {
+        color: var(--primary-color);
+        opacity: 0.7;
+        margin-left: 1rem;
+        display: none;
+        transition: opacity 0.3s, colors 0.3s;
+    }
+
+    &:hover {
+        > a {
+            display: block;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.doc-section-description {
+    > p {
+        font-size: 1.125rem;
+        color: var(--surface-800);
+
+        i {
+            border-radius: 6px;
+            padding: 2px 6px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            font-style: normal;
+        }
+
+        a {
+            color: var(--primary-color);
+            font-weight: 600;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+.layout-wrapper-light {
+    .doc-section-description {
+        > p {
+            i {
+                background-color: var(--primary-100);
+                color: var(--primary-900);
+            }
+        }
+    }
+}
+
+.layout-wrapper-dark {
+    .doc-section-description {
+        > p {
+            i {
+                background-color: var(--highlight-bg);
+                color: var(--highlight-text-color);
+            }
+        }
+    }
+}
+
+.doc-section-nav {
+    position: sticky;
+    top: 7rem;
+    right: 0;
+    width: 14rem;
+    max-height: calc(100vh - 15rem);
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+    margin-left: 4rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    align-self: flex-start;
+
+    > .navbar-item {
+        .navbar-item-content {
+            border-left: 1px solid var(--surface-border);
+            padding-left: .25rem;
+        }
+    }
+
+    .navbar-item {
+        > .navbar-item-content {
+            display: flex;
+
+            .p-link {
+                padding: 0.25rem 1rem 0.25rem 1rem;
+                color: var(--text-color);
+                white-space: nowrap;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:hover {
+                    color: var(--primary-color);
+                }
+            }
+        }
+
+        &.active-navbar-item {
+            > .navbar-item-content {
+                border-color: var(--primary-color);
+
+                .p-link {
+                    font-weight: 700;
+                    color: var(--primary-color);
+                }
+            }
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            .navbar-item {
+                .navbar-item-content {
+                    padding-left: 1rem;
+                }
+            }
+        }
+    }
+}
+
+.doc-section-code-tooltip .p-tooltip-text {
+    padding: 0.5rem;
+    font-size: 11px;
+}
+
+.doc-section-code {
+    div {
+        &::-webkit-scrollbar {
+            width: 5px;
+        }
+    }
+
+    .p-button-label {
+        font-weight: normal;
+        font-size: 0.875rem;
+    }
+
+    .doc-section-code-active {
+        .p-button-label {
+            font-weight: bold;
+        }
+    }
+
+    pre {
+        margin: 0 0 1.5rem 0;
+    }
+}
+
+.doc-tablewrapper {
+    overflow: auto;
+    @include card;
+}
+
+.doc-table {
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 960px;
+    background-color: var(--surface-card);
+    margin-bottom: 1.5rem;
+
+    th {
+        border-bottom: 1px solid var(--surface-border);
+        padding: 1rem;
+        text-align: left;
+        text-transform: capitalize;
+    }
+
+    tbody {
+        tr:hover {
+            background: var(--surface-hover);
+        }
+
+        td {
+            padding: 1rem;
+            border-bottom: 1px solid var(--surface-border);
+            white-space: pre-wrap;
+            line-height: 1.5;
+
+            &.doc-option-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-500);
+
+                > a {
+                    color: var(--primary-500);
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+
+            &.doc-option-default {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-color);
+            }
+
+            &:first-child {
+                color: var(--primary-color);
+                font-weight: 700;
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-name,
+            > i {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                position: relative;
+                scroll-margin-top: 6.5rem;
+                background-color: var(--highlight-bg);
+                color: var(--highlight-text-color);
+                border-radius: 6px;
+                padding: 2px 6px;
+                font-weight: 600;
+                font-style: normal;
+
+                .doc-option-link {
+                    position: absolute;
+                    top: 0;
+                    right: -1.5rem;
+                    color: var(--primary-color);
+                    opacity: 0.7;
+                    display: none;
+                    transition: opacity 0.3s, colors 0.3s;
+                }
+            }
+
+            &:hover {
+                .doc-option-name {
+                    .doc-option-link {
+                        display: inline;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

assets/styles/layout/_docsearch.scss

@@ -0,0 +1,115 @@
+.DocSearch-Button {
+    border-radius: var(--border-radius);
+    border: 1px solid var(--surface-border);
+    width: 14rem;
+    margin: 0;
+    transition: border-color .3s;
+    height: 3rem;
+    padding: 0 .75rem;
+    font-family: var(--font-family);
+
+    &:hover {
+        border-color: var(--primary-color);
+        box-shadow: none;
+    }
+
+    .DocSearch-Search-Icon {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+
+    .DocSearch-Button-Keys {
+        background: transparent;
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        min-width: auto;
+        height: 1.5rem;
+
+        .DocSearch-Button-Key {
+            padding: 0;
+            margin: 0;
+            top: 0;
+            border-radius: 0;
+            height: auto;
+            font-family: var(--font-family);
+            width: 1.25rem;
+
+            &:first-child {
+                justify-content: end;
+            }
+
+            &:last-child {
+                justify-content: start;
+                padding-left: 2px;
+            }
+        }        
+    }
+}
+
+.DocSearch-Container {
+    z-index: 1101;
+}
+
+.DocSearch-Modal {
+    border: 1px solid var(--surface-border);
+    box-shadow: none;
+}
+
+.DocSearch-Footer {
+    box-shadow: none;
+    border-top: 1px solid var(--surface-border);
+    background-color: var(--surface-overlay);
+}
+
+.DocSearch-Form {
+    background: var(--surface-card);
+    box-shadow: none;
+    border: 1px solid var(--surface-border);
+    border-radius: var(--border-radius);
+    transition: border-color .3s;
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+
+    .DocSearch-MagnifierLabel, .DocSearch-Reset {
+        color: var(--text-color);
+    }
+}
+
+.DocSearch-Hit {
+    border-bottom: 1px solid var(--surface-border);
+    padding-bottom: 0;
+    margin-bottom: .25rem;
+}
+
+.DocSearch-Hits mark {
+    color: var(--highlight-text-color);
+}
+
+.DocSearch-Hit-source {
+    color: var(--primary-color);
+}
+
+.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
+    fill: var(--primary-color);
+}
+
+:root {
+    --docsearch-searchbox-focus-background: var(--surface-card);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-muted-color: var(--text-color);
+    --docsearch-searchbox-background: var(--surface-card);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-modal-background: var(--surface-overlay);
+    --docsearch-highlight-color: var(--primary-color);
+    --docsearch-key-gradient: var(--surface-ground);
+    --docsearch-key-shadow: none;
+    --docsearch-container-background: var(--maskbg);
+    --docsearch-hit-background: var(--surface-overlay);
+    --docsearch-hit-shadow: none;
+    --docsearch-spacing: 1rem;
+    --docsearch-hit-color: var(--text-color);
+    --docsearch-highlight-color: var(--highlight-bg);
+    --docsearch-hit-active-color: var(--highlight-text-color);
+}

assets/styles/layout/_footer.scss

@@ -0,0 +1,20 @@
+.layout-footer {
+    padding: 2rem 0;
+    margin-top: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    font-weight: 500;
+    color: var(--text-800);
+    border-top: 1px solid var(--surface-border);
+
+    a {
+        color: var(--primary-color);
+        font-weight: 700;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}

assets/styles/layout/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin card {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}

assets/styles/layout/_news.scss

@@ -28,21 +28,11 @@
     }
 
     .layout-news-link {
-        margin-left: .5rem;
+        margin-left: 0.5rem;
         line-height: 1.5;
         white-space: nowrap;
     }
 
-    .layout-news-link,
-    .layout-news-link:visited,
-    .layout-news-link:active {
-        color:#ffffff;
-        font-weight:700;
-    }
-    .layout-news-link:hover {
-        text-decoration: underline;
-    }
-
     .layout-news-close {
         line-height: 1.5;
         cursor: pointer;
@@ -52,13 +42,13 @@
         border-radius: 50%;
         width: 1.5rem;
         height: 1.5rem;
-        transition: background-color .3s;
+        transition: background-color 0.3s;
-        margin-left: .5rem;
+        margin-left: 0.5rem;
 
         &:hover {
-            background-color: rgba(255,255,255,.2);
+            background-color: rgba(255, 255, 255, 0.2);
         }
-    } 
+    }
 }
 
 .landing-news-active {
@@ -74,11 +64,13 @@
         top: 2rem;
     }
 
-    .layout-menu {
-        padding-bottom: 2rem;
-    }
-
     .layout-content {
         padding-top: 7rem;
     }
-}
+
+    .doc-section-label,
+    .doc-table tbody td .doc-option-name,
+    .doc-table tbody td > i {
+        scroll-margin-top: 8.5rem;
+    }
+}

assets/styles/layout/_responsive.scss

@@ -0,0 +1,144 @@
+@media screen and (min-width: 1729px) {
+    .layout-content-inner {
+        max-width: 1478px;
+        margin: 0 auto;
+    }
+
+    .layout-topbar-inner {
+        max-width: 1478px;
+        margin: 0 auto;
+    }
+}
+
+@media screen and (max-width: 991px) {
+    .layout-wrapper {    
+        .layout-topbar {
+            left: 0;
+            width: 100%;
+    
+            .menu-button {
+                display: flex;
+            }
+
+            .DocSearch-Button {
+                margin-right: 0;
+                margin-left: auto;
+                width: 2rem;
+                height: 2rem;
+                overflow: hidden;
+                padding: 0;
+                justify-content: center;
+                align-items: center;
+
+                .DocSearch-Search-Icon {
+                    width: 1rem;
+                    height: 1rem;
+                }
+
+                .DocSearch-Button-Placeholder,
+                .DocSearch-Button-Keys {
+                    display: none;
+                }
+            }
+        }
+    
+        .layout-sidebar {
+            top: 0;
+            z-index: 1102;
+            height: 100%;
+            transform: translateX(-100%);
+    
+            &.active {
+                transform: translateX(0);
+            }
+        }
+    
+        .layout-content {
+            margin-left: 0;            
+        }
+    
+        .layout-mask {
+            background-color: rgba(0, 0, 0, 0.1);
+    
+            &.layout-mask-active {
+                z-index: 1101;
+                width: 100%;
+                height: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                background-color: rgba(0, 0, 0, 0.4);
+                transition: background-color .5s;
+            }
+        }
+
+        .doc-section-nav {
+            display: none;
+        }
+
+        .doc-tabmenu {
+            margin-right: 0;
+        }
+
+        .video-container {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%;
+
+            iframe {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .blocked-scroll {
+        overflow: hidden;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .layout-wrapper {
+        .layout-topbar-inner {
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        .layout-content {
+            .layout-content-inner {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+        }
+
+        .layout-footer {
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        .doc-tabmenu {
+            li {
+                flex: 1 1 0;
+
+                button {
+                    width: 100%;
+                    min-width: auto;
+                }
+            }
+        }
+    }
+
+    .layout-news {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-size: 12px;
+
+        > i {
+            display: none;
+        }
+    }
+}

assets/styles/layout/_sidebar.scss

@@ -0,0 +1,132 @@
+.layout-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background-color: var(--surface-overlay);
+    width: 250px;
+    user-select: none;
+    transition: transform .4s cubic-bezier(.05,.74,.2,.99);
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 0;
+
+    .logo {
+        display: flex;
+        justify-content: center;
+    }
+
+    nav {
+        padding: .5rem 1rem 2rem 1rem;
+        margin-top: 2rem;
+        flex-grow: 1;
+        overflow-y: auto;
+    }
+
+    .layout-menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            margin-bottom: .25rem;
+        }
+
+        > li {
+            > button, 
+            > a {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                padding: .5rem;
+                color: var(--surface-900);
+                font-weight: 600;
+                transition: box-shadow .2s;
+                border-radius: var(--border-radius);
+    
+                &:hover {
+                    background-color: var(--surface-hover);
+                }
+
+                .menu-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    border-radius: var(--border-radius);
+                    margin-right: .5rem;
+                    border: 1px solid var(--surface-border);
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+    
+                    i {
+                        color: var(--surface-700);
+                    }
+                }
+    
+                .menu-toggle-icon {
+                    color: var(--surface-600);
+                    margin-left: auto;
+                }
+            }
+            
+            > div {
+                > ol {
+                    margin: 0 0 0 1.5rem;
+                    padding: .25rem 0 0 .5rem;
+                    border-left: 1px solid var(--surface-border);
+
+                    > li {
+                        > ol {
+                            margin-bottom: 1.5rem;
+                        }
+                    }
+                }
+            }
+        }
+
+        a.router-link-active {
+            background-color: var(--highlight-bg);
+            color: var(--highlight-text-color);
+
+            > .menu-icon {
+                i {
+                    color: var(--highlight-text-color);
+                }
+            }
+        }
+
+        .menu-child-category {
+            display: flex;
+            padding: .5rem .5rem .5rem 1rem;
+            font-size: .875rem;
+            font-weight: 700;
+            letter-spacing: 1px;
+            color: var(--surface-900);
+            border-bottom: 1px solid var(--surface-border);
+            margin-bottom: .25rem;
+        }
+
+        ol {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            a {
+                display: flex;
+                padding: .5rem .5rem .5rem 1rem;
+                color: var(--surface-900);
+                border-radius: var(--border-radius);
+                transition: box-shadow .2s;
+                
+                &:focus {
+                    outline: 0 none;
+                    box-shadow: inset var(--focus-ring);
+                }
+
+                &:hover {
+                    background-color: var(--surface-hover);
+                }
+            }
+        }
+    }
+}

assets/styles/layout/_topbar.scss

@@ -0,0 +1,43 @@
+.layout-topbar {
+    padding: 0;
+    height: 5rem;
+    position: fixed;
+    top: 0;
+    left: 250px;
+    width: calc(100% - 250px);
+    z-index: 1100;
+    border-bottom: 1px solid var(--surface-border);
+
+    .layout-topbar-inner {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 4rem;
+    }
+
+    &.layout-topbar-sticky {
+        backdrop-filter: blur(8px);
+    }
+
+    .menu-button {
+        display: none;
+        color: var(--text-color);
+        width: 3rem;
+        height: 3rem;
+        background-color: var(--surface-card);
+        border: 1px solid var(--surface-border);
+        align-items: center;
+        justify-content: center;
+        transition: border-color .3s;
+        cursor: pointer;
+
+        &:hover {
+            border-color: var(--primary-color);
+        }
+
+        i {
+            font-size: 1.5rem;
+        }
+    }
+}

assets/styles/layout/landing/_designer.scss

@@ -86,6 +86,13 @@
                 box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
             }
         }
+    
+        .p-listbox {
+            .p-listbox-list .p-listbox-item.p-highlight {
+                background-color: transparent;
+                box-shadow: inset 0 0 0 0.15rem var(--dd-primary);
+            }
+        }
 
         .p-inputtext, .p-button, .p-listbox-item, .p-slider {
             transition: all .5s;

assets/styles/layout/landing/_hero.scss

@@ -124,7 +124,7 @@
         .hero-strip-left {
             transition: 1.6s;
             position: absolute;
-            top: 45.6%;
+            top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             width: 0%;

assets/styles/layout/landing/_templates.scss

@@ -25,7 +25,7 @@
             &.block-1 {
                 animation: animated-block-1 2s ease-in-out alternate infinite;
             }
-              
+
             &.block-2 {
                 animation: animated-block-2 2s 0.2s ease-in-out alternate infinite;
             }

assets/styles/layout/layout.scss

@@ -1,11 +1,15 @@
+@charset 'UTF-8';
+
+@import './_mixins';
 @import './_core';
-@import './_code';
 @import './_topbar';
-@import './_menu';
+@import './_sidebar';
 @import './_content';
 @import './_news';
 @import './_footer';
 @import './_config';
-@import './_designer';
 @import './_responsive';
-@import './_demo';
+@import './_code';
+@import './_doc';
+@import './_docsearch';
+@import './landing/_landing';

components/accordion/Accordion.d.ts

@@ -1,6 +1,19 @@
+/**
+ *
+ * Accordion groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordion
+ *
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Custom tab open event.
+ * @see {@link AccordionEmits.tab-open}
+ */
 export interface AccordionTabOpenEvent {
     /**
      * Browser mouse event.
@@ -14,77 +27,107 @@ export interface AccordionTabOpenEvent {
 }
 
 /**
+ * Custom tab close event.
+ * @see {@link AccordionEmits.tab-close}
  * @extends {AccordionTabOpenEvent}
  */
 export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
 
 /**
+ * Custom tab open event.
+ * @see {@link AccordionEmits.tab-open}
  * @extends AccordionTabOpenEvent
  */
 export interface AccordionClickEvent extends AccordionTabOpenEvent {}
 
+/**
+ * Defines valid properties in AccordionTab component.
+ */
 export interface AccordionProps {
     /**
      * When enabled, multiple tabs can be activated at the same time.
+     * @defaultValue false
      */
     multiple?: boolean | undefined;
     /**
      * Index of the active tab or an array of indexes in multiple mode.
+     * @defaultValue null
      */
     activeIndex?: number | number[] | undefined;
     /**
      * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
+     * @defaultValue false
      */
     lazy?: boolean | undefined;
     /**
      * Icon of a collapsed tab.
+     * @defaultValue pi pi-chevron-right
      */
     expandIcon?: string | undefined;
     /**
      * Icon of an expanded tab.
+     * @defaultValue pi pi-chevron-down
      */
     collapseIcon?: string | undefined;
     /**
      * Index of the element in tabbing order.
+     * @defaultValue 0
      */
     tabindex?: number | undefined;
     /**
      * When enabled, the focused tab is activated.
+     * @defaultValue false
      */
     selectOnFocus?: boolean | undefined;
 }
 
+/**
+ * Defines valid slots in Acordion slots.
+ */
 export interface AccordionSlots {
     /**
      * Default slot to detect AccordionTab components.
      */
-    default: () => VNode[];
+    default(): VNode[];
 }
 
-export declare type AccordionEmits = {
+/**
+ * Defines valid emits in Acordion component.
+ */
+export interface AccordionEmits {
     /**
      * Emitted when the active tab changes.
      * @param {number | undefined} value - Index of new active tab.
      */
-    'update:activeIndex': (value: number | undefined) => void;
+    'update:activeIndex'(value: number | undefined): void;
     /**
      * Callback to invoke when a tab gets expanded.
      * @param {AccordionTabOpenEvent} event - Custom tab open event.
      */
-    'tab-open': (event: AccordionTabOpenEvent) => void;
+    'tab-open'(event: AccordionTabOpenEvent): void;
     /**
      * Callback to invoke when an active tab is collapsed by clicking on the header.
      * @param {AccordionTabCloseEvent} event - Custom tab close event.
      */
-    'tab-close': (event: AccordionTabCloseEvent) => void;
+    'tab-close'(event: AccordionTabCloseEvent): void;
     /**
      * Callback to invoke when an active tab is clicked.
      * @param {AccordionClickEvent} event - Custom tab click event.
      */
-    'tab-click': (event: AccordionClickEvent) => void;
+    'tab-click'(event: AccordionClickEvent): void;
-};
+}
 
-declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> {}
+/**
+ * **PrimeVue - Accordion**
+ *
+ * _Accordion groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ */
+export declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {

components/accordiontab/AccordionTab.d.ts

@@ -1,6 +1,18 @@
+/**
+ *
+ * Accordion groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordiontab
+ *
+ */
 import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in AccordionTab component.
+ */
 export interface AccordionTabProps {
     /**
      * Orientation of tab headers.
@@ -40,18 +52,24 @@ export interface AccordionTabProps {
     disabled?: boolean | undefined;
 }
 
+/**
+ * Defines valid slots in Acordion slots.
+ */
 export interface AccordionTabSlots {
     /**
      * Default slot for content.
      */
-    default: () => VNode[];
+    default(): VNode[];
     /**
      * Custom content for the title section of a panel is defined using the header template.
      */
-    header: () => VNode[];
+    header(): VNode[];
 }
 
-export declare type AccordionTabEmits = {};
+/**
+ * Defines valid emits in Acordion component.
+ */
+export interface AccordionTabEmits {}
 
 declare class AccordionTab extends ClassComponent<AccordionTabProps, AccordionTabSlots, AccordionTabEmits> {}
 

components/column/Column.d.ts

@@ -1,7 +1,9 @@
+/**
+ * @module column
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerLoaderOptions } from '../virtualscroller';
-
 type ColumnFieldType = string | ((item: any) => string) | undefined;
 
 type ColumnSelectionModeType = 'single' | 'multiple' | undefined;
@@ -252,7 +254,7 @@ export interface ColumnSlots {
      * Custom body template.
      * @param {Object} scope - body slot's params.
      */
-    body: (scope: {
+    body(scope: {
         /**
          * Row data.
          */
@@ -281,32 +283,32 @@ export interface ColumnSlots {
          * Callback function
          */
         editorInitCallback: () => void;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom header template.
      * @param {Object} scope - header slot's params.
      */
-    header: (scope: {
+    header(scope: {
         /**
          * Column node.
          */
         column: Column;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom footer template.
      * @param {Object} scope - footer slot's params.
      */
-    footer: (scope: {
+    footer(scope: {
         /**
          * Column node.
          */
         column: Column;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom editor template.
      * @param {Object} scope - editor slot's params.
      */
-    editor: (scope: {
+    editor(scope: {
         /**
          * Row data.
          */
@@ -335,12 +337,12 @@ export interface ColumnSlots {
          * Callback function
          */
         editorCancelCallback: () => void;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom filter template.
      * @param {Object} scope - filter slot's params.
      */
-    filter: (scope: {
+    filter(scope: {
         /**
          * Column field.
          */
@@ -354,12 +356,12 @@ export interface ColumnSlots {
          * Callback function
          */
         filterCallback: () => void;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom filter header template.
      * @param {Object} scope - filter header slot's params.
      */
-    filterheader: (scope: {
+    filterheader(scope: {
         /**
          * Column field.
          */
@@ -373,12 +375,12 @@ export interface ColumnSlots {
          * Callback function
          */
         filterCallback: () => void;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom filter footer template.
      * @param {Object} scope - filter footer slot's params.
      */
-    filterfooter: (scope: {
+    filterfooter(scope: {
         /**
          * Column field.
          */
@@ -392,12 +394,12 @@ export interface ColumnSlots {
          * Callback function
          */
         filterCallback: () => void;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom filter clear template.
      * @param {Object} scope - filter clear slot's params.
      */
-    filterclear: (scope: {
+    filterclear(scope: {
         /**
          * Column field.
          */
@@ -411,12 +413,12 @@ export interface ColumnSlots {
          * Callback function
          */
         filterCallback: () => void;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom filter apply template.
      * @param {Object} scope - filter apply slot's params.
      */
-    filterapply: (scope: {
+    filterapply(scope: {
         /**
          * Column field.
          */
@@ -430,12 +432,12 @@ export interface ColumnSlots {
          * Callback function
          */
         filterCallback: () => void;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom loading template.
      * @param {Object} scope - loading slot's params.
      */
-    loading: (scope: {
+    loading(scope: {
         /**
          * Row data.
          */
@@ -461,10 +463,10 @@ export interface ColumnSlots {
          * @see ColumnLoadingOptions
          */
         loadingOptions: ColumnLoadingOptions;
-    }) => VNode[];
+    }): VNode[];
 }
 
-export declare type ColumnEmits = {};
+export interface ColumnEmits {}
 
 declare class Column extends ClassComponent<ColumnProps, ColumnSlots, ColumnEmits> {}
 

components/columngroup/ColumnGroup.d.ts

@@ -1,12 +1,13 @@
+/**
+ * @module columngroup
+ */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type ColumnGroupType = 'header' | 'footer' | undefined;
-
 export interface ColumnGroupProps {
     /**
      * Type of column group
      */
-    type?: ColumnGroupType;
+    type?: 'header' | 'footer' | undefined;
 }
 
 export interface ColumnGroupSlots {}

components/datatable/DataTable.d.ts

@@ -1,40 +1,49 @@
+/**
+ *
+ * DataTable displays data in tabular format.
+ *
+ * [Live Demo](https://www.primereact.org/datatable/)
+ *
+ * @module datatable
+ *
+ */
 import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 import { VirtualScrollerProps } from '../virtualscroller';
 
-type DataTablePaginatorPositionType = 'top' | 'bottom' | 'both' | undefined;
+export declare type DataTablePaginatorPositionType = 'top' | 'bottom' | 'both' | undefined;
 
-type DataTableSortFieldType = string | ((item: any) => string) | undefined | null;
+export declare type DataTableSortFieldType = string | ((item: any) => string) | undefined | null;
 
-type DataTableDataKeyType = string | ((item: any) => string) | undefined;
+export declare type DataTableDataKeyType = string | ((item: any) => string) | undefined;
 
-type DataTableMultiSortMetaType = DataTableSortMeta[] | undefined | null;
+export declare type DataTableMultiSortMetaType = DataTableSortMeta[] | undefined | null;
 
-type DataTableSortOrderType = 1 | 0 | -1 | undefined | null;
+export declare type DataTableSortOrderType = 1 | 0 | -1 | undefined | null;
 
-type DataTableSortModeType = 'single' | 'multiple' | undefined;
+export declare type DataTableSortModeType = 'single' | 'multiple' | undefined;
 
-type DataTableFilterMatchModeType = 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | undefined;
+export declare type DataTableFilterMatchModeType = 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | undefined;
 
-type DataTableFilterDisplayType = 'menu' | 'row' | undefined;
+export declare type DataTableFilterDisplayType = 'menu' | 'row' | undefined;
 
-type DataTableSelectionModeType = 'single' | 'multiple' | undefined;
+export declare type DataTableSelectionModeType = 'single' | 'multiple' | undefined;
 
-type DataTableCompareSelectionBy = 'equals' | 'deepEquals' | undefined;
+export declare type DataTableCompareSelectionByType = 'equals' | 'deepEquals' | undefined;
 
-type DataTableColumnResizeModeType = 'fit' | 'expand' | undefined;
+export declare type DataTableColumnResizeModeType = 'fit' | 'expand' | undefined;
 
-type DataTableRowGroupModeType = 'subheader' | 'rowspan' | undefined;
+export declare type DataTableRowGroupModeType = 'subheader' | 'rowspan' | undefined;
 
-type DataTableStateStorageType = 'session' | 'local' | undefined;
+export declare type DataTableStateStorageType = 'session' | 'local' | undefined;
 
-type DataTableEditModeType = 'cell' | 'row' | undefined;
+export declare type DataTableEditModeType = 'cell' | 'row' | undefined;
 
-type DataTableScrollDirectionType = 'vertical' | 'horizontal' | 'both' | undefined;
+export declare type DataTableScrollDirectionType = 'vertical' | 'horizontal' | 'both' | undefined;
 
-type DataTableScrollHeightType = 'flex' | string | undefined;
+export declare type DataTableScrollHeightType = 'flex' | string | undefined;
 
-type DataTableResponsiveLayoutType = 'stack' | 'scroll' | undefined;
+export declare type DataTableResponsiveLayoutType = 'stack' | 'scroll' | undefined;
 
 export interface DataTableExportFunctionOptions {
     /**
@@ -105,6 +114,10 @@ export interface DataTableExportCSVOptions {
     selectionOnly: boolean;
 }
 
+/**
+ * Custom tab open event.
+ * @see {@link DataTableEmits.sort}
+ */
 export interface DataTableSortEvent {
     /**
      * Browser event.
@@ -146,6 +159,8 @@ export interface DataTableSortEvent {
 }
 
 /**
+ * Custom pagination event.
+ * @see {@link DataTableEmits.page}
  * @extends DataTableSortEvent
  */
 export interface DataTablePageEvent extends DataTableSortEvent {
@@ -160,6 +175,8 @@ export interface DataTablePageEvent extends DataTableSortEvent {
 }
 
 /**
+ * Custom sort event.
+ * @see {@link DataTableEmits.sort}
  * @extends DataTableSortEvent
  */
 export interface DataTableFilterEvent extends DataTableSortEvent {
@@ -459,6 +476,9 @@ export interface DataTableStateEvent {
     selectionKeys: any[];
 }
 
+/**
+ * Defines valid properties in Datatable component.
+ */
 export interface DataTableProps {
     /**
      * An array of objects to display.
@@ -602,10 +622,10 @@ export interface DataTableProps {
     selectionMode?: DataTableSelectionModeType;
     /**
      * Algorithm to define if a row is selected, valid values are 'equals' that compares by reference and 'deepEquals' that compares all fields.
-     * @see DataTableCompareSelectionBy
+     * @see DataTableCompareSelectionByType
      * Default value is 'deepEquals'.
      */
-    compareSelectionBy?: DataTableCompareSelectionBy;
+    compareSelectionBy?: DataTableCompareSelectionByType;
     /**
      * Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and
      * when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
@@ -784,33 +804,34 @@ export interface DataTableProps {
      */
     filterInputProps?: InputHTMLAttributes | undefined;
 }
-
+/**
+ * Defines valid slots in Datatable component.
+ */
 export interface DataTableSlots {
     /**
      * Custom header template.
      */
-    header: () => VNode[];
+    header(): VNode[];
     /**
      * Custom footer template.
      */
-    footer: () => VNode[];
+    footer(): VNode[];
     /**
      * Custom paginator start template.
      */
-    paginatorstart: () => VNode[];
+    paginatorstart(): VNode[];
     /**
      * Custom paginator end template.
      */
-    paginatorend: () => VNode[];
+    paginatorend(): VNode[];
     /**
      * Custom empty template.
      */
-    empty: () => VNode[];
+    empty(): VNode[];
     /**
      * Custom group header template.
-     * @param {Object} scope - group header slot's params.
      */
-    groupheader: (scope: {
+    groupheader(scope: {
         /**
          * Row data
          */
@@ -819,12 +840,12 @@ export interface DataTableSlots {
          * Row index
          */
         index: number;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom group footer template.
      * @param {Object} scope - group footer slot's params.
      */
-    groupfooter: (scope: {
+    groupfooter(scope: {
         /**
          * Row data
          */
@@ -833,16 +854,16 @@ export interface DataTableSlots {
          * Row index
          */
         index: number;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom loading template.
      */
-    loading: () => VNode[];
+    loading(): VNode[];
     /**
      * Custom expansion template.
      * @param {Object} scope - expansion slot's params.
      */
-    expansion: (scope: {
+    expansion(scope: {
         /**
          * Row data
          */
@@ -851,209 +872,222 @@ export interface DataTableSlots {
          * Row index
          */
         index: number;
-    }) => VNode[];
+    }): VNode[];
 }
-
+/**
-export declare type DataTableEmits = {
+ * Defines valid emits in Datatable component.
+ */
+export interface DataTableEmits {
     /**
      * Emitted when the first changes.
      * @param {number} value - New value.
      */
-    'update:first': (value: number) => void;
+    'update:first'(value: number): void;
     /**
      * Emitted when the rows changes.
      * @param {number} value - New value.
      */
-    'update:rows': (value: number) => void;
+    'update:rows'(value: number): void;
     /**
      * Emitted when the sortField changes.
      * @param {string} value - New value.
      */
-    'update:sortField': (value: string) => void;
+    'update:sortField'(value: string): void;
     /**
      * Emitted when the sortOrder changes.
      * @param {number | undefined} value - New value.
      */
-    'update:sortOrder': (value: number | undefined) => void;
+    'update:sortOrder'(value: number | undefined): void;
     /**
      * Emitted when the multiSortMeta changes.
      * @param {DataTableMultiSortMetaType} value - New value.
      */
-    'update:multiSortMeta': (value: DataTableMultiSortMetaType) => void;
+    'update:multiSortMeta'(value: DataTableMultiSortMetaType): void;
     /**
      * Emitted when the selection changes.
      * @param {*} value - New value.
      */
-    'update:selection': (value: any[] | any | undefined) => void;
+    'update:selection'(value: any[] | any | undefined): void;
     /**
      * Emitted when the contextMenuSelection changes.
      * @param {*} value - New value.
      */
-    'update:contextMenuSelection': (value: any[] | any | undefined) => void;
+    'update:contextMenuSelection'(value: any[] | any | undefined): void;
     /**
      * Emitted when the expandedRows changes.
      * @param {DataTableExpandedRows} value - New value.
      */
-    'update:expandedRows': (value: any[] | DataTableExpandedRows) => void;
+    'update:expandedRows'(value: any[] | DataTableExpandedRows): void;
     /**
      * Emitted when the expandedRowGroups changes.
      * @param {DataTableExpandedRows} value - New value.
      */
-    'update:expandedRowGroups': (value: any[] | DataTableExpandedRows) => void;
+    'update:expandedRowGroups'(value: any[] | DataTableExpandedRows): void;
     /**
      * Emitted when the filters changes.
      * @param {DataTableFilterMeta} value - New value.
      */
-    'update:filters': (value: DataTableFilterMeta) => void;
+    'update:filters'(value: DataTableFilterMeta): void;
     /**
      * Emitted when the editingRows changes.
      * @param {DataTableEditingRows} value - New value.
      */
-    'update:editingRows': (value: any[] | DataTableEditingRows) => void;
+    'update:editingRows'(value: any[] | DataTableEditingRows): void;
     /**
      * Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
      * @param {DataTablePageEvent} event - Custom page event.
      */
-    page: (event: DataTablePageEvent) => void;
+    page(event: DataTablePageEvent): void;
     /**
      * Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
      * @param {DataTableSortEvent} event - Custom sort event.
      */
-    sort: (event: DataTableSortEvent) => void;
+    sort(event: DataTableSortEvent): void;
     /**
      * Event to emit after filtering, not triggered in lazy mode.
      * @param {DataTableFilterEvent} event - Custom filter event.
      */
-    filter: (event: DataTableFilterEvent) => void;
+    filter(event: DataTableFilterEvent): void;
     /**
      * Callback to invoke after filtering, sorting, pagination and cell editing to pass the rendered value.
      * @param {*} value - Value displayed by the table.
      */
-    'value-change': (value: any[]) => void;
+    'value-change'(value: any[]): void;
     /**
      * Callback to invoke when a row is clicked.
      * @param {DataTableRowClickEvent} event - Custom row click event.
      */
-    'row-click': (event: DataTableRowClickEvent) => void;
+    'row-click'(event: DataTableRowClickEvent): void;
     /**
      * Callback to invoke when a row is double clicked.
      * @param {DataTableRowDoubleClickEvent} event - Custom row double click event.
      */
-    'row-dblclick': (event: DataTableRowDoubleClickEvent) => void;
+    'row-dblclick'(event: DataTableRowDoubleClickEvent): void;
     /**
      * Callback to invoke when a row is selected with a ContextMenu.
      * @param {DataTableRowContextMenuEvent} event - Custom row context menu event.
      */
-    'row-contextmenu': (event: DataTableRowContextMenuEvent) => void;
+    'row-contextmenu'(event: DataTableRowContextMenuEvent): void;
     /**
      * Callback to invoke when a row is selected.
      * @param {DataTableRowSelectEvent} event - Custom row select event.
      */
-    'row-select': (event: DataTableRowSelectEvent) => void;
+    'row-select'(event: DataTableRowSelectEvent): void;
     /**
      * Fired when header checkbox is checked.
      * @param {DataTableRowSelectAllEvent} event - Custom row select all event.
      */
-    'row-select-all': (event: DataTableRowSelectAllEvent) => void;
+    'row-select-all'(event: DataTableRowSelectAllEvent): void;
     /**
      * Fired when header checkbox is unchecked.
      * @param {DataTableRowUnselectAllEvent} event - Custom row unselect all event.
      */
-    'row-unselect-all': (event: DataTableRowUnselectAllEvent) => void;
+    'row-unselect-all'(event: DataTableRowUnselectAllEvent): void;
     /**
      * Callback to invoke when a row is unselected.
      * @param {DataTableRowUnselectEvent} event - Custom row unselect event.
      */
-    'row-unselect': (event: DataTableRowUnselectEvent) => void;
+    'row-unselect'(event: DataTableRowUnselectEvent): void;
     /**
      * Callback to invoke when all data is selected.
      * @param {DataTableSelectAllChangeEvent} event - Custom select all change event.
      */
-    'select-all-change': (event: DataTableSelectAllChangeEvent) => void;
+    'select-all-change'(event: DataTableSelectAllChangeEvent): void;
     /**
      * Callback to invoke when a column is resized.
      * @param {DataTableColumnResizeEndEvent} - Custom column resize event.
      */
-    'column-resize-end': (event: DataTableColumnResizeEndEvent) => void;
+    'column-resize-end'(event: DataTableColumnResizeEndEvent): void;
     /**
      * Callback to invoke when a column is reordered.
      * @param {DataTableColumnReorderEvent} event - Custom column reorder event.
      */
-    'column-reorder': (event: DataTableColumnReorderEvent) => void;
+    'column-reorder'(event: DataTableColumnReorderEvent): void;
     /**
      * Callback to invoke when a row is reordered.
      * @param {DataTableRowReorderEvent} event - Custom row reorder event.
      */
-    'row-reorder': (event: DataTableRowReorderEvent) => void;
+    'row-reorder'(event: DataTableRowReorderEvent): void;
     /**
      * Callback to invoke when a row is expanded.
      * @param {DataTableRowExpandEvent} event - Custom row expand event.
      */
-    'row-expand': (event: DataTableRowExpandEvent) => void;
+    'row-expand'(event: DataTableRowExpandEvent): void;
     /**
      * Callback to invoke when a row is collapsed.
      * @param {DataTableRowCollapseEvent} event - Custom row collapse event.
      */
-    'row-collapse': (event: DataTableRowCollapseEvent) => void;
+    'row-collapse'(event: DataTableRowCollapseEvent): void;
     /**
      * Callback to invoke when a row group is expanded.
      * @param {DataTableRowExpandEvent} event - Custom row expand event.
      */
-    'rowgroup-expand': (event: DataTableRowExpandEvent) => void;
+    'rowgroup-expand'(event: DataTableRowExpandEvent): void;
     /**
      * Callback to invoke when a row group is collapsed.
      * @param {DataTableRowCollapseEvent} event - Custom row collapse event.
      */
-    'rowgroup-collapse': (event: DataTableRowCollapseEvent) => void;
+    'rowgroup-collapse'(event: DataTableRowCollapseEvent): void;
     /**
      * Callback to invoke when cell edit is initiated.
      * @param {DataTableCellEditInitEvent} event - Custom cell edit init.
      */
-    'cell-edit-init': (event: DataTableCellEditInitEvent) => void;
+    'cell-edit-init'(event: DataTableCellEditInitEvent): void;
     /**
      * Callback to invoke when cell edit is completed.
      * @param {DataTableCellEditCompleteEvent} event - Custom cell edit complete event.
      */
-    'cell-edit-complete': (event: DataTableCellEditCompleteEvent) => void;
+    'cell-edit-complete'(event: DataTableCellEditCompleteEvent): void;
     /**
      * Callback to invoke when cell edit is cancelled with escape key.
      * @param {DataTableCellEditCancelEvent} event - Custom cell edit cancel event.
      */
-    'cell-edit-cancel': (event: DataTableCellEditCancelEvent) => void;
+    'cell-edit-cancel'(event: DataTableCellEditCancelEvent): void;
     /**
      * Callback to invoke when row edit is initiated.
      * @param {DataTableRowEditInitEvent} event - Custom row edit init event.
      */
-    'row-edit-init': (event: DataTableRowEditInitEvent) => void;
+    'row-edit-init'(event: DataTableRowEditInitEvent): void;
     /**
      * Callback to invoke when row edit is saved.
      * @param {DataTableRowEditSaveEvent} event - Custom row edit save event.
      */
-    'row-edit-save': (event: DataTableRowEditSaveEvent) => void;
+    'row-edit-save'(event: DataTableRowEditSaveEvent): void;
     /**
      * Callback to invoke when row edit is cancelled.
      * @param {DataTableRowEditCancelEvent} event - Custom row edit cancel event.
      */
-    'row-edit-cancel': (event: DataTableRowEditCancelEvent) => void;
+    'row-edit-cancel'(event: DataTableRowEditCancelEvent): void;
     /**
      * Invoked when a stateful table saves the state.
      * @param {DataTableStateEvent} event - Custom state event.
      */
-    'state-restore': (event: DataTableStateEvent) => void;
+    'state-restore'(event: DataTableStateEvent): void;
     /**
      * Invoked when a stateful table restores the state.
      * @param {DataTableStateEvent} event - Custom state event.
      */
-    'state-save': (event: DataTableStateEvent) => void;
+    'state-save'(event: DataTableStateEvent): void;
-};
+}
 
-declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, DataTableEmits> {
+/**
+ * **PrimeReact - DataTable**
+ *
+ *  * _DataTable displays data in tabular format._
+ *
+ * [Live Demo](https://www.primevue.org/datatable/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ * @group Interfaces
+ */
+export declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, DataTableEmits> {
     /**
      * Exports the data to CSV format.
      * @param {DataTableExportCSVOptions} [options] - Export options.
      * @param {Object[]} [data] - Custom exportable data. This param can be used on lazy dataTable.
      */
-    exportCSV: (options?: DataTableExportCSVOptions, data?: any[]) => void;
+    exportCSV(options?: DataTableExportCSVOptions, data?: any[]): void;
 }
 
 declare module '@vue/runtime-core' {
@@ -1070,6 +1104,7 @@ declare module '@vue/runtime-core' {
  *
  * - Column
  * - ColumnGroup
+ * - Row
  *
  * Demos:
  *

components/deferredcontent/DeferredContent.spec.js

@@ -5,7 +5,7 @@ describe('DeferredContent', () => {
     it('should exist', async () => {
         const wrapper = mount(DeferredContent, {
             slots: {
-                default: '<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature"/>'
+                default: '<img src="/images/nature/nature4.jpg" alt="Nature"/>'
             }
         });
 

components/inplace/Inplace.spec.js

@@ -33,7 +33,7 @@ describe('Inplace.vue', () => {
                     <span class="pi pi-search" style="vertical-align: middle"></span>
                     <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
                 `,
-                content: `<img src="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" />`
+                content: `<img src="/images/nature/nature1.jpg" />`
             }
         });
 

components/knob/Knob.d.ts

@@ -1,5 +1,17 @@
+/**
+ *
+ * Knob is a form component to define number inputs with a dial.
+ *
+ * [Live Demo](https://www.primevue.org/knob/)
+ *
+ * @module knob
+ *
+ */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in Knob component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ */
 export interface KnobProps {
     /**
      * Value of the component.
@@ -7,7 +19,7 @@ export interface KnobProps {
     modelValue?: number | undefined;
     /**
      * Size of the component in pixels.
-     * Default value is 100.
+     * @defaultValue 100
      */
     size?: number | undefined;
     /**
@@ -24,12 +36,12 @@ export interface KnobProps {
     step?: number | undefined;
     /**
      * Mininum boundary value.
-     * Default value is 0.
+     * @defaultValue 0
      */
     min?: number | undefined;
     /**
      * Maximum boundary value.
-     * Default value is 100.
+     * @defaultValue 100
      */
     max?: number | undefined;
     /**
@@ -46,17 +58,15 @@ export interface KnobProps {
     textColor?: string | undefined;
     /**
      * Width of the knob stroke.
-     * Default value is 14.
+     * @defaultValue 100
      */
     strokeWidth?: number | undefined;
     /**
      * Whether the show the value inside the knob.
-     * Default value is true.
      */
     showValue?: boolean | undefined;
     /**
      * Template string of the value.
-     * Default value is '{value}'.
      */
     valueTemplate?: string | undefined;
     /**
@@ -73,22 +83,38 @@ export interface KnobProps {
     'aria-label'?: string | undefined;
 }
 
+/**
+ * Defines valid slots in Knob component.
+ */
 export interface KnobSlots {}
 
-export declare type KnobEmits = {
+/**
+ * Defines valid emits in Knob component.
+ */
+export interface KnobEmits {
     /**
      * Emitted when the value changes.
-     * @param {number} value - New value.
+     * @param {number} event - New value.
      */
-    'update:modelValue': (value: number) => void;
+    'update:modelValue'(value: number): void;
     /**
      * Callback to invoke when the value changes.
-     * @param {number} value - New value
+     * @param {number} event - New value
      */
-    change: (value: number) => void;
+    change(value: number): void;
-};
+}
 
-declare class Knob extends ClassComponent<KnobProps, KnobSlots, KnobEmits> {}
+/**
+ * **PrimeVue - Knob**
+ *
+ * _Knob groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevue.org/knob/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ */
+export declare class Knob extends ClassComponent<KnobProps, KnobSlots, KnobEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
@@ -96,13 +122,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Knob is a form component to define number inputs with a dial.
- *
- * Demos:
- *
- * - [Knob](https://www.primefaces.org/primevue/knob)
- *
- */
 export default Knob;

components/row/Row.d.ts

@@ -1,10 +1,13 @@
+/**
+ * @module row
+ */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface RowProps {}
 
 export interface RowSlots {}
 
-export declare type RowEmits = {};
+export interface RowEmits {}
 
 declare class Row extends ClassComponent<RowProps, RowSlots, RowEmits> {}
 

components/ts-helpers.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomProps, VNodeProps, EmitsOptions, AllowedComponentProps, ObjectEmitsOptions } from 'vue';
+import { AllowedComponentProps, ComponentCustomProps, ObjectEmitsOptions, VNodeProps } from 'vue';
 
 declare type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps;
 
@@ -14,7 +14,7 @@ declare type EmitFn<Options = ObjectEmitsOptions, Event extends keyof Options =
           }[Event]
       >;
 
-export class ClassComponent<Props, Slots, Emits extends EmitsOptions = {}> {
+export class ClassComponent<Props, Slots, Emits> {
     $props: Props & PublicProps;
     $slots: Slots;
     $emit: EmitFn<Emits>;

doc/accessibility/ColorsDoc.vue

@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Colors on a web page should aim a contrast ratio of at least <strong>4.5:1</strong> and consider a selection of colors that do not cause vibration.</p>
+    </DocSectionText>
+    <h3>Good Contrast</h3>
+    <p class="doc-section-description">Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
+
+    <div class="flex">
+        <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="borderradius: 10px">
+            <span class="text-white">GOOD</span>
+        </div>
+        <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="borderradius: 10px">
+            <span class="text-white">BAD</span>
+        </div>
+    </div>
+
+    <h3>Vibration</h3>
+    <p class="doc-section-description">Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.</p>
+
+    <div class="flex">
+        <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="borderradius: 10px">
+            <span class="text-blue-500">VIBRATE</span>
+        </div>
+    </div>
+
+    <h3>Dark Mode</h3>
+    <p class="doc-section-description">Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.</p>
+
+    <div class="flex">
+        <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
+            <span class="text-indigo-500">Indigo 500</span>
+            <i class="text-indigo-500 pi pi-times-circle mt-3 text-xl"></i>
+        </div>
+        <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
+            <span class="text-indigo-200">Indigo 200</span>
+            <i class="text-indigo-200 pi pi-check-circle mt-3 text-xl"></i>
+        </div>
+    </div>
+</template>

doc/accessibility/FormControlsDoc.vue

@@ -0,0 +1,34 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used with
+            space key as well to trigger.
+        </p>
+    </DocSectionText>
+    <pre v-code.script><code>
+&lt;button @click="onButtonClick(event)"&gt;Click&lt;/button&gt;
+        
+</code></pre>
+
+    <p class="doc-section-description">On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
+    <pre v-code.script><code>
+&lt;div class="fancy-button" @click="onButtonClick(event)"&gt;Click&lt;/div&gt;
+
+</code></pre>
+
+    <p class="doc-section-description">
+        <i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form controls
+        should be preferred.
+    </p>
+    <pre v-code.script><code>
+&lt;div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0"&gt;Click&lt;/div&gt;
+
+</code></pre>
+
+    <p class="doc-section-description">Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p>
+    <pre v-code.script><code>
+&lt;label for="myinput"&gt;Username:&lt;/label&gt;
+&lt;input id="myinput" type="text" name="username" /&gt;
+
+</code></pre>
+</template>

doc/accessibility/IntroductionDoc.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to
+            ensure content can be consumed by anyone.
+        </p>
+        <p>Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories;</p>
+    </DocSectionText>
+
+    <h3>Visual Impairments</h3>
+    <p class="doc-section-description">
+        Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page developers
+        are required to make sure content is readable by the readers. Popular readers are
+        <a href="https://www.nvaccess.org" alt="NVDA Reader"> NVDA </a>
+        ,
+        <a href="https://www.freedomscientific.com/Products/software/JAWS/" alt="JAWS Reader"> JAWS </a> and
+        <a href="https://www.chromevox.com" alt="ChromeVox Reader"> ChromeVox </a>
+        .
+    </p>
+
+    <h3>Hearing Impairments</h3>
+    <p class="doc-section-description">
+        Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing
+        textual alternatives, transcripts and captions for content with audio.
+    </p>
+
+    <h3>Mobility Impairments</h3>
+    <p class="doc-section-description">
+        People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a trackpad
+        remain as solutions for people who are not able to utilize a mouse.
+    </p>
+
+    <h3>Cognitive Impairments</h3>
+    <p class="doc-section-description">
+        Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive
+        impairments result in better design for any user.
+    </p>
+</template>

doc/accessibility/SemanticHTMLDoc.vue

@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular <i>div</i>
+            elements with classes are used. Consider the following example that do not mean too much for readers.
+        </p>
+    </DocSectionText>
+
+    <pre v-code.script><code>
+&lt;div class="header"&gt;
+    &lt;div class="header-text"&gt;Header&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="nav"&gt;&lt;/div&gt;
+
+&lt;div class="main"&gt;
+    &lt;div class="content"&gt;
+    &lt;/div&gt;
+
+    &lt;div class="sidebar"&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="footer"&gt;
+&lt;/div&gt;
+
+</code></pre>
+
+    <p class="doc-section-description">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
+    <pre v-code.script><code>
+&lt;header&gt;
+    &lt;h1&gt;Header&lt;/h1&gt;
+&lt;/header&gt;
+
+&lt;nav&gt;&lt;/nav&gt;
+
+&lt;main&gt;
+    &lt;article&gt;&lt;/article&gt;
+
+    &lt;aside&gt;&lt;/aside&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+&lt;/footer&gt;
+
+</code></pre>
+</template>

doc/accessibility/WAIAriaDoc.vue

@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as a
+            datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeVue. These types of components must provide
+            keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized.
+        </p>
+        <p>
+            ARIA consists of roles, properties and attributes. <b>Roles</b> define what the element is mainly used for e.g. <i>checkbox</i>, <i>dialog</i>, <i>tablist</i> whereas <b>States</b> and <b>Properties</b> define the metadata of the element
+            like <i>aria-checked</i>, <i>aria-disabled</i>.
+        </p>
+
+        <p>Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.</p>
+    </DocSectionText>
+
+    <pre v-code.script><code>
+&lt;input type="checkbox" value="Prime" name="ui" checked&gt;
+
+</code></pre>
+
+    <p class="doc-section-description">
+        A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be read
+        by a reader.
+    </p>
+    <pre v-code.script><code>
+&lt;div class="fancy-checkbox"&gt;
+    &lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+</code></pre>
+
+    <p class="doc-section-description">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with for.</p>
+    <pre v-code.script><code>
+&lt;span id="chk-label"&gt;Remember Me&lt;/span&gt;
+&lt;div class="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
+    @click="toggle" @keydown="onKeyDown(event)"&gt;
+    &lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+</code></pre>
+
+    <p class="doc-section-description">
+        However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of
+        <i>p-sr-only</i>
+        that hides the elements from the user but not from the screen reader.
+    </p>
+    <pre v-code.script><code>
+&lt;label for="chkbox"&gt;Remember Me&lt;/label&gt;
+&lt;div class="fancy-checkbox" @click="toggle"&gt;
+    &lt;input class="p-sr-only" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
+        @keydown="onKeyDown(event)"&gt;
+    &lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+</code></pre>
+
+    <p class="doc-section-description">A working sample is the PrimeVue checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
+
+    <div class="card flex align-items-center justify-content-center">
+        <label for="binary" class="mr-2">Remember Me</label>
+        <Checkbox id="binary" v-model="checked" binary />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        };
+    }
+};
+</script>

doc/accessibility/WCAGDoc.vue

@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Correct page structure with the aid of assistive technologies are the core ingridients for an accessible web content. HTML is based on an accessible foundation, form controls can be used by keyboard by default and semantic HTML is easier
+            to be processed by a screen reader.
+        </p>
+        <p>
+            <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" alt="WCAG Website"> WCAG </a>
+            refers to <strong>Web Content Accessibility Guideline</strong>, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible.
+            PrimeVue components aim high level of WCAG compliancy in the near future.
+        </p>
+
+        <p>
+            Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are <a href="https://www.section508.gov/manage/laws-and-policies/">Section 508</a> in the US and
+            <a href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">Web Accessibility Directive</a> of the European Union.
+        </p>
+    </DocSectionText>
+</template>

doc/accordion/AccessibilityDoc.vue

@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value of
+            the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
+        </p>
+        <p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
+
+        <h3>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 to the next focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down 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>up 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 first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>

doc/accordion/BasicDoc.vue

@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Accordion consists of one or more AccordionTab elements which are collapsed by default. Tab to expand initially can be defined with the <i>activeIndex</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion :activeIndex="0">
+    <AccordionTab header="Header I">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p>
+            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>
+    </AccordionTab>
+</Accordion>`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/accordion/ControlledDoc.vue

@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Accordion can be controlled programmatically using a binding to <i>activeIndex</i> along with <i>v-model</i> to update the active index.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="pb-3">
+            <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+            <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+        </div>
+
+        <Accordion v-model:activeIndex="active">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            code: {
+                basic: `
+<div class="pb-3">
+    <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+    <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+    <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+</div>
+
+<Accordion v-model:activeIndex="active">
+    <AccordionTab header="Header I">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p>
+            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>
+    </AccordionTab>
+</Accordion>`,
+                options: `
+<template>
+    <div class="card">
+        <div class="pb-3">
+            <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+            <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+        </div>
+
+        <Accordion v-model:activeIndex="active">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                active: 0
+            }
+        }
+    }
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="pb-3">
+            <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+            <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+        </div>
+
+        <Accordion v-model:activeIndex="active">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+
+    const active = ref(0);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/accordion/DisabledDoc.vue

@@ -0,0 +1,121 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>disabled</i> property of an AccordionTab prevents user interaction.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :multiple="true" :activeIndex="[0]">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion :multiple="true" :activeIndex="[0]">
+    <AccordionTab header="Header I">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
+</Accordion>`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion :multiple="true" :activeIndex="[0]">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :multiple="true" :activeIndex="[0]">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/accordion/ImportDoc.vue

@@ -0,0 +1,17 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';`
+            }
+        };
+    }
+};
+</script>

doc/accordion/MultipleDoc.vue

@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Only one tab at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple tabs. In this case <i>activeIndex</i> needs to be an array.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :multiple="true" :activeIndex="[0]">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion :multiple="true" :activeIndex="[0]">
+    <AccordionTab header="Header I">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p>
+            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>
+    </AccordionTab>
+</Accordion>`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion :multiple="true" :activeIndex="[0]">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :multiple="true" :activeIndex="[0]">
+            <AccordionTab header="Header I">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/accordion/StyleDoc.vue

@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText id="style" label="Style" v-bind="$attrs">
+        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-accordion</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-accordion-header</td>
+                    <td>Header of a tab.</td>
+                </tr>
+                <tr>
+                    <td>p-accordion-content</td>
+                    <td>Container of a tab.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/accordion/TemplateDoc.vue

@@ -0,0 +1,213 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Title section of a tab is customized with the <i>header</i> slot.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion class="accordion-custom" :activeIndex="0">
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-calendar"></i>
+                    <span>Header I</span>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-user"></i>
+                    <span>Header II</span>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-search"></i>
+                    <span>Header III</span>
+                    <i class="pi pi-cog"></i>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion class="accordion-custom" :activeIndex="0">
+    <AccordionTab>
+        <template #header>
+            <i class="pi pi-calendar"></i>
+            <span>Header I</span>
+        </template>
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab>
+        <template #header>
+            <i class="pi pi-user"></i>
+            <span>Header II</span>
+        </template>
+        <p>
+            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>
+    </AccordionTab>
+    <AccordionTab>
+        <template #header>
+            <i class="pi pi-search"></i>
+            <span>Header III</span>
+            <i class="pi pi-cog"></i>
+        </template>
+        <p>
+            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>
+    </AccordionTab>
+</Accordion>`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion class="accordion-custom" :activeIndex="0">
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-calendar"></i>
+                    <span>Header I</span>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-user"></i>
+                    <span>Header II</span>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-search"></i>
+                    <span>Header III</span>
+                    <i class="pi pi-cog"></i>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>
+
+<style scoped>
+.accordion-custom i span {
+    vertical-align: middle;
+}
+
+.accordion-custom span {
+    margin: 0 0.5rem;
+}
+
+.p-accordion p {
+    line-height: 1.5;
+    margin: 0;
+}
+</style>`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion class="accordion-custom" :activeIndex="0">
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-calendar"></i>
+                    <span>Header I</span>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-user"></i>
+                    <span>Header II</span>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+            <AccordionTab>
+                <template #header>
+                    <i class="pi pi-search"></i>
+                    <span>Header III</span>
+                    <i class="pi pi-cog"></i>
+                </template>
+                <p>
+                    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>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+
+<style scoped>
+.accordion-custom i span {
+    vertical-align: middle;
+}
+
+.accordion-custom span {
+    margin: 0 0.5rem;
+}
+
+.p-accordion p {
+    line-height: 1.5;
+    margin: 0;
+}
+</style>`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.accordion-custom i span {
+    vertical-align: middle;
+}
+
+.accordion-custom span {
+    margin: 0 0.5rem;
+}
+
+.p-accordion p {
+    line-height: 1.5;
+    margin: 0;
+}
+</style>

doc/autocomplete/AccessibilityDoc.vue

@@ -0,0 +1,176 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
+            <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen
+            reader which option to read during keyboard navigation within the popup list.
+        </p>
+        <p>In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input
+            element.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+
+        <h3>Closed State 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 to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the first option.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup 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 to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Chips Input 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>backspace</i></td>
+                        <td>Deletes the previous chip if the input field is empty.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available and input field is empty.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Chip 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>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the chips and adds focus to the input field.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="ac1">;Username</label>
+<AutoComplete inputId="ac1" />
+
+<span id="ac2">Email</span>
+<AutoComplete aria-labelledby="ac2" />
+
+<AutoComplete aria-label="City" />`
+            }
+        };
+    }
+};
+</script>

doc/autocomplete/BasicDoc.vue

@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AutoComplete is used as a controlled component with <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+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>

doc/autocomplete/DisabledDoc.vue

@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete disabled placeholder="Disabled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<AutoComplete disabled placeholder="Disabled" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>

doc/autocomplete/DropdownDoc.vue

@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using <i>dropdownMode</i> property that takes <strong>blank</strong> or <strong>current</strong> as possible values.
+            <i>blank</i> is the default mode to send a query with an empty string whereas <i>current</i> setting sends a query with the current value of the input.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            let _items = [...Array(10).keys()];
+
+            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    let _items = [...Array(10).keys()];
+
+    items.value = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            let _items = [...Array(10).keys()];
+
+            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+        }
+    }
+};
+</script>

doc/autocomplete/FloatLabelDoc.vue

@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <span class="p-float-label">
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+            <label for="ac">Float Label</label>
+        </span>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<span class="p-float-label">
+    <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+    <label for="ac">Float Label</label>
+</span>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <span class="p-float-label">
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+            <label for="ac">Float Label</label>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <span class="p-float-label">
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+            <label for="ac">Float Label</label>
+        </span>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+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>

doc/autocomplete/ForceSelectionDoc.vue

@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply enable
+            <i>forceSelection</i> to enforce that input is always from the suggestion list.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+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>

doc/autocomplete/GroupDoc.vue

@@ -0,0 +1,233 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Option groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+            <template #optiongroup="slotProps">
+                <div class="flex align-items-center country-item">
+                    <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.item.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.item.label }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import { FilterMatchMode, FilterService } from 'primevue/api';
+
+export default {
+    data() {
+        return {
+            cities: null,
+            selectedCity: null,
+            filteredCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+    <template #optiongroup="slotProps">
+        <div class="flex align-items-center country-item">
+            <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.item.label }}</div>
+        </div>
+    </template>
+</AutoComplete>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+            <template #optiongroup="slotProps">
+                <div class="flex align-items-center country-item">
+                    <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.item.label }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script>
+import { FilterMatchMode, FilterService } from 'primevue/api';
+
+export default {
+    data() {
+        return {
+            cities: null,
+            selectedCity: null,
+            filteredCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        search(event) {
+            let query = event.query;
+            let filteredCities = [];
+
+            for (let country of this.groupedCities) {
+                let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+
+                if (filteredItems && filteredItems.length) {
+                    filteredCities.push({ ...country, ...{ items: filteredItems } });
+                }
+            }
+
+            this.filteredCities = filteredCities;
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+            <template #optiongroup="slotProps">
+                <div class="flex align-items-center country-item">
+                    <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.item.label }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { FilterMatchMode, FilterService } from 'primevue/api';
+
+const cities = ref();
+const selectedCity = ref();
+const filteredCities = ref();
+const groupedCities = ref([
+    {
+        label: 'Germany',
+        code: 'DE',
+        items: [
+            { label: 'Berlin', value: 'Berlin' },
+            { label: 'Frankfurt', value: 'Frankfurt' },
+            { label: 'Hamburg', value: 'Hamburg' },
+            { label: 'Munich', value: 'Munich' }
+        ]
+    },
+    {
+        label: 'USA',
+        code: 'US',
+        items: [
+            { label: 'Chicago', value: 'Chicago' },
+            { label: 'Los Angeles', value: 'Los Angeles' },
+            { label: 'New York', value: 'New York' },
+            { label: 'San Francisco', value: 'San Francisco' }
+        ]
+    },
+    {
+        label: 'Japan',
+        code: 'JP',
+        items: [
+            { label: 'Kyoto', value: 'Kyoto' },
+            { label: 'Osaka', value: 'Osaka' },
+            { label: 'Tokyo', value: 'Tokyo' },
+            { label: 'Yokohama', value: 'Yokohama' }
+        ]
+    }
+]);
+
+const search = (event) => {
+    let query = event.query;
+    let newFilteredCities = [];
+
+    for (let country of groupedCities.value) {
+        let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+        if (filteredItems && filteredItems.length) {
+            newFilteredCities.push({...country, ...{items: filteredItems}});
+        }
+    }
+
+    filteredCities.value = newFilteredCities;
+
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            let query = event.query;
+            let filteredCities = [];
+
+            for (let country of this.groupedCities) {
+                let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+
+                if (filteredItems && filteredItems.length) {
+                    filteredCities.push({ ...country, ...{ items: filteredItems } });
+                }
+            }
+
+            this.filteredCities = filteredCities;
+        }
+    }
+};
+</script>

doc/autocomplete/ImportDoc.vue

@@ -0,0 +1,17 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import AutoComplete from 'primevue/autocomplete';`
+            }
+        };
+    }
+};
+</script>

doc/autocomplete/InvalidDoc.vue

@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+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>

doc/autocomplete/MultipleDoc.vue

@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
+    </DocSectionText>
+    <div class="card p-fluid">
+        <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
+                options: `
+<template>
+    <div class="card p-fluid">
+        <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card p-fluid">
+        <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+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>

doc/autocomplete/ObjectsDoc.vue

@@ -0,0 +1,114 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            AutoComplete can work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
+            Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" :service="['CountryService']" />
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
+
+
+const search = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+}
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+</script>

doc/autocomplete/StyleDoc.vue

@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText id="style" label="Style" v-bind="$attrs">
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-autocomplete</td>
+                    <td>Container element</td>
+                </tr>
+                <tr>
+                    <td>p-autocomplete-panel</td>
+                    <td>Overlay panel of suggestions.</td>
+                </tr>
+                <tr>
+                    <td>p-autocomplete-items</td>
+                    <td>List container of suggestions.</td>
+                </tr>
+                <tr>
+                    <td>p-autocomplete-item</td>
+                    <td>List item of a suggestion.</td>
+                </tr>
+                <tr>
+                    <td>p-autocomplete-token</td>
+                    <td>Element of a selected item in multiple mode.</td>
+                </tr>
+                <tr>
+                    <td>p-autocomplete-token-icon</td>
+                    <td>Close icon element of a selected item in multiple mode.</td>
+                </tr>
+                <tr>
+                    <td>p-autocomplete-token-label</td>
+                    <td>Label of a selected item in multiple mode.</td>
+                </tr>
+                <tr>
+                    <td>p-autocomplete-empty-message</td>
+                    <td>Container element when there is no suggestion to display.</td>
+                </tr>
+                <tr>
+                    <td>p-overlay-open</td>
+                    <td>Container element when overlay is visible.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/autocomplete/TemplateDoc.vue

@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
+            <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex align-options-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+    <DocSectionCode :code="code" :service="['CountryService']" />
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: null,
+            filteredCountries: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+    <template #option="slotProps">
+        <div class="flex align-options-center">
+            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.name }}</div>
+        </div>
+    </template>
+</AutoComplete>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex align-options-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex align-options-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
+
+
+const search = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+}
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+</script>

doc/autocomplete/VirtualScrollDoc.vue

@@ -0,0 +1,110 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Virtual Scrolling is a performant way to render large lists. Configuration of the scroll behavior is defined with <i>virtualScrollerOptions</i> that requires <i>itemSize</i> as the mandatory value to set the height of an item. Visit
+            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> documentation for more information about the configuration API.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
+            selectedItem: null,
+            filteredItems: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
+    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
+            selectedItem: null,
+            filteredItems: null,
+        };
+    },
+    methods: {
+        searchItems(event) {
+            //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+            let query = event.query;
+            let _filteredItems = [];
+
+            for (let i = 0; i < this.items.length; i++) {
+                let item = this.items[i];
+
+                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                    _filteredItems.push(item);
+                }
+            }
+
+            this.filteredItems = _filteredItems;
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+const selectedItem = ref();
+const filteredItems = ref();
+const searchItems = (event) => {
+    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+    let query = event.query;
+    let _filteredItems = [];
+
+    for (let i = 0; i < items.value.length; i++) {
+        let item = items.value[i];
+
+        if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+            _filteredItems.push(item);
+        }
+    }
+
+    filteredItems.value = _filteredItems;
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        searchItems(event) {
+            //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+            let query = event.query;
+            let _filteredItems = [];
+
+            for (let i = 0; i < this.items.length; i++) {
+                let item = this.items[i];
+
+                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                    _filteredItems.push(item);
+                }
+            }
+
+            this.filteredItems = _filteredItems;
+        }
+    }
+};
+</script>

doc/avatar/AccessibilityDoc.vue

@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
+            avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>

doc/avatar/AvatarGroupDoc.vue

@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+            <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
+        </AvatarGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<AvatarGroup>
+    <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
+    <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+    <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
+    <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
+    <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+    <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
+</AvatarGroup>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+            <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+            <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/avatar/IconDoc.vue

@@ -0,0 +1,107 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
+                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
+<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+
+<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
+<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+
+<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
+                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
+                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/avatar/ImageDoc.vue

@@ -0,0 +1,99 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>image</i> property to display an image as an Avatar.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+<Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
+
+<Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
+
+<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/avatar/ImportDoc.vue

@@ -0,0 +1,17 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import Avatar from 'primevue/avatar';
+import AvatarGroup from 'primevue/avatargroup';   //Optional for grouping`
+            }
+        };
+    }
+};
+</script>

doc/avatar/LabelDoc.vue

@@ -0,0 +1,103 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A letter Avatar is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
+                <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <Avatar v-badge="4" label="U" size="xlarge" style="background-color: #4caf4f; color: #ffffff" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Avatar label="P" class="mr-2" size="xlarge" />
+<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
+
+<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+
+<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />`,
+                options: `
+<template>
+    <div class="flex flex-wrap gap-5">
+        <div class="flex-auto">
+            <h5>Label</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
+            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Circle</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
+            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Badge</h5>
+            <Avatar v-badge="4" label="U" size="xlarge" style="background-color: #4caf4f; color: #ffffff" />
+        </div>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="flex flex-wrap gap-5">
+        <div class="flex-auto">
+            <h5>Label</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
+            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Circle</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
+            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Badge</h5>
+            <Avatar v-badge="4" label="U" size="xlarge" style="background-color: #4caf4f; color: #ffffff" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/avatar/StylingAvatarDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText id="stylingofavatar" label="Styling of Avatar" v-bind="$attrs">
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-avatar</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-avatar-image</td>
+                    <td>Container element in image mode.</td>
+                </tr>
+                <tr>
+                    <td>p-avatar-circle</td>
+                    <td>Container element with a circle shape.</td>
+                </tr>
+                <tr>
+                    <td>p-avatar-text</td>
+                    <td>Text of the Avatar.</td>
+                </tr>
+                <tr>
+                    <td>p-avatar-icon</td>
+                    <td>Icon of the Avatar.</td>
+                </tr>
+                <tr>
+                    <td>p-avatar-lg</td>
+                    <td>Container element with a large size.</td>
+                </tr>
+                <tr>
+                    <td>p-avatar-xl</td>
+                    <td>Container element with an xlarge size.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/avatar/StylingAvatarGroupDoc.vue

@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-avatar-group</td>
+                    <td>Container element.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/badge/AccessibilityDoc.vue

@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
+            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>

doc/badge/BasicDoc.vue

@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display is defined with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Badge value="2"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `<Badge value="2"></Badge>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Badge value="2"></Badge>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Badge value="2"></Badge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/badge/ButtonDoc.vue

@@ -0,0 +1,46 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons have built-in support for badges to display a badge inline.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button type="button" label="Emails" badge="8" />
+<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/badge/ImportDoc.vue

@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `// import as component
+import Badge from 'primevue/badge';
+
+// import as directive
+import BadgeDirective from 'primevue/badgedirective';
+
+app.directive('badge', BadgeDirective);`
+            }
+        };
+    }
+};
+</script>

doc/badge/PositionDoc.vue

@@ -0,0 +1,50 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A Badge can be positioned at the top right corner of an element by adding <i>p-overlay-badge</i> style class to the element and embedding the badge inside.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-content-center gap-4">
+        <i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
+        <i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
+        <i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
+<i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
+<i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-4">
+        <i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
+        <i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
+        <i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-4">
+        <i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
+        <i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
+        <i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/badge/SeverityDoc.vue

@@ -0,0 +1,58 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Severity defines the color of the badge, possible values are <i>success</i>, <i>info</i>, <i>warning</i> and <i>danger</i> in addition to the default theme color.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="12" severity="warning"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Badge value="2"></Badge>
+<Badge value="8" severity="success"></Badge>
+<Badge value="4" severity="info"></Badge>
+<Badge value="12" severity="warning"></Badge>
+<Badge value="3" severity="danger"></Badge>`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="12" severity="warning"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="12" severity="warning"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/badge/SizeDoc.vue

@@ -0,0 +1,50 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>size</i> property to customize the size of a Badge, currently <i>large</i> and <i>xlarge</i> are available as size options.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
+        <Badge value="6" size="xlarge" severity="success"></Badge>
+        <Badge value="4" size="large" severity="warning"></Badge>
+        <Badge value="2"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Badge value="6" size="xlarge" severity="success"></Badge>
+<Badge value="4" size="large" severity="warning"></Badge>
+<Badge value="2"></Badge>`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
+        <Badge value="6" size="xlarge" severity="success"></Badge>
+        <Badge value="4" size="large" severity="warning"></Badge>
+        <Badge value="2"></Badge>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
+        <Badge value="6" size="xlarge" severity="success"></Badge>
+        <Badge value="4" size="large" severity="warning"></Badge>
+        <Badge value="2"></Badge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/badge/StyleDoc.vue

@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText id="style" label="Style" v-bind="$attrs">
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-badge</td>
+                    <td>Badge element</td>
+                </tr>
+                <tr>
+                    <td>p-overlay-badge</td>
+                    <td>Wrapper of a badge and its target.</td>
+                </tr>
+                <tr>
+                    <td>p-badge-dot</td>
+                    <td>Badge element with no value.</td>
+                </tr>
+                <tr>
+                    <td>p-badge-success</td>
+                    <td>Badge element with success severity.</td>
+                </tr>
+                <tr>
+                    <td>p-badge-info</td>
+                    <td>Badge element with info severity.</td>
+                </tr>
+                <tr>
+                    <td>p-badge-warning</td>
+                    <td>Badge element with warning severity.</td>
+                </tr>
+                <tr>
+                    <td>p-badge-danger</td>
+                    <td>Badge element with danger severity.</td>
+                </tr>
+                <tr>
+                    <td>p-badge-lg</td>
+                    <td>Large badge element</td>
+                </tr>
+                <tr>
+                    <td>p-badge-xl</td>
+                    <td>Extra large badge element</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/blockui/AccessibilityDoc.vue

@@ -0,0 +1,11 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>

doc/blockui/BasicDoc.vue

@@ -0,0 +1,95 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="mb-3">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <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>
+            </Panel>
+        </BlockUI>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false,
+            code: {
+                basic: `
+<div class="mb-3">
+    <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+    <Button label="Unblock" @click="blocked = false"></Button>
+</div>
+<BlockUI :blocked="blocked">
+    <Panel header="Basic">
+        <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>
+    </Panel>
+</BlockUI>`,
+                options: `
+<template>
+    <div class="card">
+        <div class="mb-3">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <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>
+            </Panel>
+        </BlockUI>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="mb-3">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <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>
+            </Panel>
+        </BlockUI>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const blocked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/blockui/DocumentDoc.vue

@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>fullScreen</i> property controls the document.</p>
+    </DocSectionText>
+    <div class="card">
+        <BlockUI :blocked="blocked" fullScreen />
+        <Button label="Block" @click="blockDocument" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false,
+            code: {
+                basic: `
+<BlockUI :blocked="blocked" fullScreen />
+<Button label="Block" @click="blocked = true" />`,
+                options: `
+<template>
+    <div class="card">
+        <BlockUI :blocked="blocked" fullScreen />
+        <Button label="Block" @click="blockDocument" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false
+        }
+    },
+    methods: {
+        blockDocument() {
+            this.blocked = true;
+
+            setTimeout(() => {
+                this.blocked = false;
+            }, 3000);
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <BlockUI :blocked="blocked" fullScreen />
+        <Button label="Block" @click="blockDocument" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const blocked = ref(false);
+const blockDocument = () => {
+    blocked.value = true;
+
+    setTimeout(() => {
+        blocked.value = false;
+    }, 3000);
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        blockDocument() {
+            this.blocked = true;
+
+            setTimeout(() => {
+                this.blocked = false;
+            }, 3000);
+        }
+    }
+};
+</script>