Revert "Remove unused files"

This reverts commit bc1e47e09c.

apps/showcase/api-generator/build-api.js

@@ -0,0 +1,175 @@
+const fs = require('fs');
+const path = require('path');
+
+const rootDir = path.resolve(__dirname, '../');
+const distDir = path.resolve(rootDir, 'dist');
+const componentPath = path.join(__dirname, './components');
+
+// Import project `package.json`
+const pkg = require(path.resolve(rootDir, 'package.json'));
+const libraryName = 'PrimeVue';
+const libraryVersion = pkg.version;
+
+const showcaseURL = 'https://primevue.org/';
+
+const fileModules = {},
+    veturTags = {},
+    veturAttributes = {};
+
+const files = fs.readdirSync(componentPath);
+
+files.forEach((file) => {
+    const { name } = path.parse(file);
+
+    fileModules[name] = require(`./components//${name}`);
+});
+
+const webTypes = {
+    $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
+    framework: 'vue',
+    name: libraryName,
+    version: libraryVersion,
+    contributions: {
+        html: {
+            'types-syntax': 'typescript',
+            'description-markup': 'markdown',
+            tags: [],
+            attributes: []
+        }
+    }
+};
+
+const addURL = (attr, url, value) => {
+    const newArray = [];
+
+    attr.forEach((att) => {
+        const newObj = {};
+
+        Object.keys(att).forEach((key) => {
+            newObj[key] = att[key];
+            if (key === value) newObj['doc-url'] = url;
+        });
+
+        newArray.push(newObj);
+    });
+
+    return newArray;
+};
+
+const createWebTypes = (component) => {
+    const url = showcaseURL + `${component['doc-url'] ? component['doc-url'] : component.name.toLowerCase()}`;
+
+    // components
+    const tag = {
+        name: component.name,
+        source: {
+            module: libraryName,
+            symbol: component.name
+        },
+        'doc-url': url,
+        description: component.description
+    };
+
+    // directives
+    const attribute = {
+        name: component.name,
+        source: {
+            module: libraryName,
+            symbol: component.name
+        },
+        description: component.description,
+        'doc-url': url,
+        value: {
+            kind: 'expression',
+            type: 'function'
+        }
+    };
+
+    if (component.props) {
+        tag.attributes = addURL(component.props, url, 'default');
+        tag.attributes.forEach((k) => {
+            k['value'] = {
+                kind: 'expression',
+                type: k['type']
+            };
+
+            delete k['type'];
+        });
+    }
+
+    if (component.events) {
+        tag.events = addURL(component.events, url, 'name');
+        tag.events.forEach((k) => {
+            if (k.arguments) {
+                k.arguments = addURL(k.arguments, url, 'name');
+            }
+        });
+    }
+
+    if (component.slots) {
+        tag.slots = addURL(component.slots, url, 'name');
+    }
+
+    if (component['vue-modifiers']) {
+        attribute.required = false;
+        attribute['vue-modifiers'] = addURL(component['vue-modifiers'], url, 'name');
+
+        if (attribute['vue-modifiers'].length < 1) delete attribute['vue-modifiers'];
+
+        webTypes.contributions.html.attributes.push(attribute);
+    }
+
+    webTypes.contributions.html.tags.push(tag);
+};
+
+const createVeturTags = (component) => {
+    const attributes = [];
+
+    if (component.props) {
+        component.props.forEach((comp) => {
+            attributes.push(comp.name);
+        });
+    }
+
+    if (attributes.length > 0) {
+        veturTags[component.name] = {
+            description: component.description,
+            attributes
+        };
+    }
+};
+
+const createVeturAttributes = (component) => {
+    if (component.props) {
+        component.props.forEach((comp) => {
+            veturAttributes[component.name.toLowerCase() + `/${comp.name}`] = {
+                description: comp.description,
+                type: comp.type
+            };
+        });
+    }
+};
+
+Object.keys(fileModules).forEach((p) => {
+    const component = fileModules[p][p];
+
+    if (component) {
+        createWebTypes(component);
+        createVeturTags(component);
+        createVeturAttributes(component);
+    }
+});
+
+!fs.existsSync(distDir) && fs.mkdirSync(distDir);
+
+const webTypesJson = JSON.stringify(webTypes, null, 2);
+
+fs.writeFileSync(path.resolve(distDir, 'web-types.json'), webTypesJson);
+
+const veturTagsJson = JSON.stringify(veturTags, null, 2);
+
+fs.writeFileSync(path.resolve(distDir, 'vetur-tags.json'), veturTagsJson);
+
+const veturAttributesJson = JSON.stringify(veturAttributes, null, 2);
+
+fs.writeFileSync(path.resolve(distDir, 'vetur-attributes.json'), veturAttributesJson);

apps/showcase/api-generator/build-apidoc.js

@@ -0,0 +1,760 @@
+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.',
+    tokens: 'Define design tokens used by the component.'
+};
+
+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/lib/`],
+    entryPointStrategy: 'expand',
+    hideGenerator: true,
+    excludeExternals: true,
+    includeVersion: true,
+    searchInComments: true,
+    disableSources: true,
+    logLevel: 'Error',
+    sort: ['source-order'],
+    exclude: ['node_modules', 'components/lib/**/*.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;
+
+        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 methods = {
+                    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(' ')
+                        });
+                    });
+
+                const model_methods_group = model.groups.find((g) => g.title === 'Methods');
+
+                model_methods_group &&
+                    model_methods_group.children.forEach((method) => {
+                        const signature = method.getAllSignatures()[0];
+                        const isSlot = model.name.includes('Slots');
+
+                        methods.values.push({
+                            name: signature.name,
+                            parameters: signature.parameters.map((param) => {
+                                let type = param.type.toString();
+
+                                if (param.type.declaration && isSlot) {
+                                    type = '';
+
+                                    if (param.type.declaration.children) {
+                                        param.type.declaration.children.forEach((child) => {
+                                            if (child.signatures) {
+                                                const childSinature = child.signatures[0];
+                                                const parameters = childSinature.parameters.reduce((acc, { name, type }, index) => (index === 0 ? `${name}: ${type.name}` : `${acc}, ${name}: ${type.name}`), '');
+
+                                                type += ` \t ${childSinature.name}(${parameters}): ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
+                                            } else {
+                                                const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
+
+                                                type += ` \t ${child.name}: ${childType}, // ${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(' '),
+                            deprecated: signature.comment && signature.comment.getTag('@deprecated') ? parseText(signature.comment.getTag('@deprecated').content[0]?.text) : undefined
+                        });
+                    });
+
+                doc[name]['model'][model.name] = {
+                    description: event_props_description,
+                    props,
+                    methods
+                };
+            });
+
+        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(' ');
+                let component_prop = '';
+
+                if (event.comment && event.comment.getTag('@see')) {
+                    const tag = event.comment.getTag('@see');
+                    const content = tag.content[0];
+
+                    if (content.text.includes("['")) {
+                        component_prop = `${content.target.name}${content.text}`;
+                    } else {
+                        component_prop = `${content.text === content.target?.name ? content.target.parent.name : content.target?.name}.${content.text}`;
+                    }
+                }
+
+                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'],
+
+                        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) => {
+                                            if (s.text.indexOf('[here]') > -1) {
+                                                return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                            }
+
+                                            return s.text || '';
+                                        })
+                                        .join(' '),
+                                deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
+                            });
+                        });
+
+                    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];
+                            const isSlot = event.name.includes('Slots');
+
+                            methods.push({
+                                name: signature.name,
+                                parameters: signature.parameters.map((param) => {
+                                    let type = param.type.toString();
+
+                                    if (param.type.declaration && isSlot) {
+                                        type = '';
+
+                                        if (param.type.declaration.children) {
+                                            param.type.declaration.children.forEach((child) => {
+                                                if (child.signatures) {
+                                                    const childSinature = child.signatures[0];
+                                                    const parameters = childSinature.parameters.reduce((acc, { name, type }, index) => (index === 0 ? `${name}: ${type.name}` : `${acc}, ${name}: ${type.name}`), '');
+
+                                                    type += ` \t <span class="font-medium">${childSinature.name}(${parameters})</span>: ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
+                                                } else {
+                                                    if (child.type?.declaration?.signatures) {
+                                                        let functionParameters = '';
+
+                                                        child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
+                                                            if (index !== 0) functionParameters += `, `;
+                                                            functionParameters += `<span class="doc-option-parameter-name">${param.name}</span>: ${param.type?.name}`;
+                                                        });
+
+                                                        if (child.type?.declaration?.signatures[0]?.comment?.getTag('@deprecated')?.content[0]?.text) {
+                                                            type += `\t <span class="ml-3 doc-option-parameter-name line-through">${child.name}</span>: <span class="doc-option-parameter-type line-through">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="doc-option-parameter-type line-through">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
+                                                        } else {
+                                                            type += `\t <span class="ml-3 doc-option-parameter-name">${child.name}</span>: <span class="doc-option-parameter-type">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="doc-option-parameter-type">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
+                                                        }
+                                                    } else {
+                                                        const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
+
+                                                        type += ` \t <span class="ml-3 doc-option-parameter-name">${child.name}</span>: <span class="doc-option-parameter-type">${childType}</span>, <span class="doc-option-parameter-type">// ${child.comment?.summary[0]?.text}</span>\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(' '),
+                                deprecated: signature.comment && signature.comment.getTag('@deprecated') ? parseText(signature.comment.getTag('@deprecated').content[0]?.text) : undefined
+                            });
+                        });
+                }
+
+                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
+                };
+
+                !doc[name]['tokens'] &&
+                    (doc[name]['tokens'] = {
+                        description: staticMessages['tokens'],
+                        values: {}
+                    });
+
+                const tokens = [];
+
+                const setTokens = (_declaration, _name) => {
+                    if (_declaration?.groups) {
+                        const event_props_group = _declaration.groups.find((g) => g.title === 'Properties');
+
+                        event_props_group &&
+                            event_props_group.children.forEach((prop) => {
+                                if (prop.type?.declaration) {
+                                    setTokens(prop.type?.declaration, prop.name);
+                                } else if (prop.comment?.getTag('@designToken')) {
+                                    tokens.push({
+                                        name: _name ? `${_name}.${prop.name}` : prop.name,
+                                        token: prop.comment.getTag('@designToken').content[0]?.text || '',
+                                        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) => {
+                                                    if (s.text.indexOf('[here]') > -1) {
+                                                        return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                                    }
+
+                                                    return s.text || '';
+                                                })
+                                                .join(' '),
+                                        deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
+                                    });
+                                }
+                            });
+                    }
+                };
+
+                setTokens(event);
+
+                doc[name]['tokens'].values[event.name] = {
+                    description: event_props_description,
+                    props: tokens
+                };
+            });
+
+        const module_enumerations_group = module.groups?.find((g) => g.title === 'Enumerations');
+
+        module_enumerations_group &&
+            module_enumerations_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['enumerations'] &&
+                    (doc[name]['enumerations'] = {
+                        description: staticMessages['enumerations'],
+
+                        values: {}
+                    });
+
+                const members = [];
+
+                if (event.groups) {
+                    const event_members_group = event.groups.find((g) => g.title === 'Enumeration Members');
+
+                    event_members_group &&
+                        event_members_group.children.forEach((prop) => {
+                            members.push({
+                                name: prop.name,
+                                optional: prop.flags.isOptional,
+                                readonly: prop.flags.isReadonly,
+                                value: prop.type.toString(),
+                                description:
+                                    prop.comment &&
+                                    prop.comment.summary
+                                        .map((s) => {
+                                            if (s.text.indexOf('[here]') > -1) {
+                                                return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                            }
+
+                                            return s.text || '';
+                                        })
+                                        .join(' '),
+                                deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
+                            });
+                        });
+                }
+
+                doc[name]['enumerations'].values[event.name] = {
+                    description: event_props_description,
+                    members
+                };
+            });
+
+        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();
+
+                if (values.includes('Function') && event.type.types) {
+                    values = '';
+
+                    for (const [i, type] of event.type.types.entries()) {
+                        if (type.declaration && type.declaration.signatures) {
+                            const signature = type.declaration.signatures[0];
+                            const parameters = signature.parameters.reduce((acc, { name, type }, index) => (index === 0 ? `${name}: ${type.name}` : `${acc}, ${name}: ${type.name}`), '');
+
+                            values += i === 0 ? `(${parameters}) => ${signature.type?.name}` : ` | (${parameters}) => ${signature.type?.name}`;
+                        } else {
+                            const typeName = type.name || type.value;
+
+                            values += i === 0 ? `${typeName}` : ` | ${typeName}`;
+                        }
+                    }
+                }
+
+                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
+                };
+            });
+
+        const module_namespaces_group = module.groups?.find((g) => g.title === 'Namespaces');
+
+        module_namespaces_group &&
+            module_namespaces_group.children.forEach((pevent) => {
+                const module_interfaces_group = pevent?.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(' ');
+                        let component_prop = '';
+
+                        if (event.comment && event.comment.getTag('@see')) {
+                            const tag = event.comment.getTag('@see');
+                            const content = tag.content[0];
+
+                            if (content.text.includes("['")) {
+                                component_prop = `${content.target.name}${content.text}`;
+                            } else {
+                                component_prop = `${content.text === content.target?.name ? content.target.parent.name : content.target?.name}.${content.text}`;
+                            }
+                        }
+
+                        !doc[name]['tokens'] &&
+                            (doc[name]['tokens'] = {
+                                description: staticMessages['tokens'],
+                                values: {}
+                            });
+
+                        const props = [];
+
+                        const setProps = (_declaration, _name) => {
+                            if (_declaration?.groups) {
+                                const event_props_group = _declaration.groups.find((g) => g.title === 'Properties');
+
+                                event_props_group &&
+                                    event_props_group.children.forEach((prop) => {
+                                        if (prop.type?.declaration) {
+                                            setProps(prop.type?.declaration, prop.name);
+                                        } else if (prop.comment?.getTag('@designToken')) {
+                                            props.push({
+                                                name: _name ? `${_name}.${prop.name}` : prop.name,
+                                                token: prop.comment.getTag('@designToken').content[0]?.text || '',
+                                                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) => {
+                                                            if (s.text.indexOf('[here]') > -1) {
+                                                                return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(
+                                                                    s.text.indexOf(')') + 1
+                                                                )}`;
+                                                            }
+
+                                                            return s.text || '';
+                                                        })
+                                                        .join(' '),
+                                                deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
+                                            });
+                                        }
+                                    });
+                            }
+                        };
+
+                        setProps(event);
+
+                        doc[name]['tokens'].values[event.name] = {
+                            description: event_props_description,
+                            props
+                        };
+                    });
+            });
+
+        const module_designtokens_group = module.groups?.find((g) => g.title === 'DesignTokens');
+
+        module_designtokens_group &&
+            module_designtokens_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                let component_prop = '';
+
+                if (event.comment && event.comment.getTag('@see')) {
+                    const tag = event.comment.getTag('@see');
+                    const content = tag.content[0];
+
+                    if (content.text.includes("['")) {
+                        component_prop = `${content.target.name}${content.text}`;
+                    } else {
+                        component_prop = `${content.text === content.target?.name ? content.target.parent.name : content.target?.name}.${content.text}`;
+                    }
+                }
+
+                !doc[name]['tokens'] &&
+                    (doc[name]['tokens'] = {
+                        description: staticMessages['tokens'],
+                        values: {}
+                    });
+
+                const props = [];
+
+                const setProps = (_declaration, _name) => {
+                    if (_declaration?.groups) {
+                        const event_props_group = _declaration.groups.find((g) => g.title === 'Properties');
+
+                        event_props_group &&
+                            event_props_group.children.forEach((prop) => {
+                                if (prop.type?.declaration) {
+                                    setProps(prop.type?.declaration, prop.name);
+                                } else if (prop.comment?.getTag('@designToken')) {
+                                    props.push({
+                                        name: _name ? `${_name}.${prop.name}` : prop.name,
+                                        token: prop.comment.getTag('@designToken').content[0]?.text || '',
+                                        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) => {
+                                                    if (s.text.indexOf('[here]') > -1) {
+                                                        return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                                    }
+
+                                                    return s.text || '';
+                                                })
+                                                .join(' '),
+                                        deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
+                                    });
+                                }
+                            });
+                    }
+                };
+
+                setProps(event);
+
+                doc[name]['tokens'].values[event.name] = {
+                    description: event_props_description,
+                    props
+                };
+            });
+
+        // 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`);
+}

apps/showcase/api-generator/build-tokens.js

@@ -0,0 +1,165 @@
+const fs = require('fs');
+const path = require('path');
+
+// prettier-ignore
+const THEME_COMPONENTS = ['Accordion','AutoComplete','Avatar','Badge','BlockUI','Breadcrumb','Button','Card','Carousel','CascadeSelect','Checkbox','Chip','ColorPicker','ConfirmDialog','ConfirmPopup','ContextMenu','DataTable','DataView','DatePicker','Dialog','Divider','Dock','Drawer','Editor','Fieldset','FileUpload','FloatLabel','Galleria','IconField','Image','InlineMessage','Inplace','InputChips','InputGroup','InputNumber','InputText','Knob','Listbox','MegaMenu','Menu','Menubar','Message','MeterGroup','MultiSelect','OrderList','OrganizationChart','OverlayBadge','Paginator','Panel','PanelMenu','Password','PickList','Popover','ProgressBar','ProgressSpinner','RadioButton','Rating','Ripple','ScrollPanel','Select','SelectButton','Skeleton','Slider','SpeedDial','SplitButton','Splitter','Stepper','Steps','Tabmenu','Tabs','TabView','Tag','Terminal','Textarea','TieredMenu','Timeline','Toast','ToggleButton','ToggleSwitch','Toolbar','Tooltip','Tree','TreeSelect','TreeTable'];
+
+const themeName = 'aura';
+const rootDir = path.resolve(__dirname, '../');
+const overwrittenDirPath = path.resolve(rootDir, 'components/lib/themes/types/overwritten');
+
+try {
+    !fs.existsSync(overwrittenDirPath) && fs.mkdirSync(overwrittenDirPath, { recursive: true });
+} catch (err) {
+    console.error(err);
+}
+
+THEME_COMPONENTS.forEach((comp) => {
+    const data = fs.readFileSync(path.resolve(rootDir, `components/lib/themes/${themeName}/${comp.toLowerCase()}/index.js`), { encoding: 'utf8', flag: 'r' });
+    let theme = data.replace('export default', 'module.exports = ');
+
+    try {
+        fs.writeFileSync(path.resolve(rootDir, `components/lib/themes/types/overwritten/${comp.toLowerCase()}.js`), theme);
+
+        const component = require(path.resolve(rootDir, `components/lib/themes/types/overwritten/${comp.toLowerCase()}.js`));
+        const filePath = path.resolve(rootDir, `components/lib/themes/types/${comp.toLowerCase()}`);
+        let outputFile = path.resolve(filePath, `index.d.ts`);
+        let defaultText = '';
+
+        !fs.existsSync(filePath) && fs.mkdirSync(filePath);
+
+        const splitTokenName = (text) => {
+            return text.split(/(?=[A-Z])/).map((part) => part.toLowerCase());
+        };
+
+        const createSubTokens = (tokenKeys, tokenValue) => {
+            let subTokens = '';
+
+            Object.entries(tokenValue).forEach(([tokenKey, tokenSubValue]) => {
+                if (typeof tokenSubValue === 'string') {
+                    subTokens += createToken([...tokenKeys, tokenKey]);
+                } else {
+                    subTokens += createNestedToken([...tokenKeys, tokenKey], tokenSubValue);
+                }
+            });
+
+            return subTokens;
+        };
+
+        const createDescription = (tokenKeys) => {
+            let description = '';
+
+            tokenKeys.forEach((tokenPart, i) => {
+                if (i !== 0) description += `${splitTokenName(tokenPart).join(' ')} `;
+            });
+            description = description.charAt(0).toUpperCase() + description.slice(1);
+
+            return `${description}of ${splitTokenName(tokenKeys[0]).join(' ')}`;
+        };
+
+        const createToken = (tokenKey) => {
+            let tokenName = tokenKey[tokenKey.length - 1];
+            let designTokenName = `${comp.toLowerCase()}`;
+            let tokenDescription = createDescription(tokenKey);
+
+            tokenKey.forEach((t) => {
+                if (t !== 'root') {
+                    designTokenName += `.${splitTokenName(t).join('.')}`;
+                }
+
+                if (tokenName.indexOf('.') > -1 && tokenName.indexOf("'")) {
+                    tokenName = `'${tokenName}'`;
+                }
+            });
+
+            return `
+    /**
+    * ${tokenDescription}
+    *
+    * @designToken ${designTokenName}
+    */
+    ${tokenName}?: string;`;
+        };
+
+        const createNestedToken = (tokenKeys, tokenValue) => {
+            let tokenName = tokenKeys[tokenKeys.length - 1];
+            let tokenDescription = createDescription(tokenKeys);
+
+            return `
+    /**
+    * ${tokenDescription}
+    */
+    ${tokenName}?: {
+        ${createSubTokens(tokenKeys, tokenValue)}
+    };`;
+        };
+
+        const generateTokens = (tokenKey, tokenValue) => {
+            let subTokens = '';
+
+            Object.entries(tokenValue).forEach(([subTokenKey, subTokenValue]) => {
+                if (typeof subTokenValue === 'string') {
+                    subTokens += createToken([tokenKey, subTokenKey]);
+                } else {
+                    subTokens += createNestedToken([tokenKey, subTokenKey], subTokenValue);
+                }
+            });
+
+            defaultText += `
+    /**
+    * Used to pass tokens of the ${splitTokenName(tokenKey).join(' ')} section
+    */
+    ${tokenKey}?: {
+        ${subTokens}
+    }`;
+        };
+
+        Object.entries(component).forEach(([tname, tvalue]) => {
+            if (tname !== 'colorScheme') {
+                if (Object.keys(component).includes('colorScheme')) {
+                    if (Object.keys(component['colorScheme']['light']).includes(tname)) {
+                        tvalue = { ...tvalue, ...component['colorScheme']['light'][tname] };
+                    }
+                }
+
+                generateTokens(tname, tvalue);
+            } else {
+                Object.entries(tvalue['light']).forEach(([subtname, subtvalue]) => {
+                    if (!Object.keys(component).includes(subtname)) {
+                        generateTokens(subtname, subtvalue);
+                    }
+                });
+            }
+        });
+
+        let text = `
+/**
+ *
+ * ${comp} Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/${comp.toLowerCase()}/)
+ *
+ * @module themes/${comp.toLowerCase()}
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ${comp}DesignTokens extends ColorSchemeDesignToken<${comp}DesignTokens> {
+${defaultText}
+}
+`;
+
+        fs.writeFileSync(outputFile, text, 'utf8');
+    } catch (err) {
+        console.error(err);
+    }
+});
+
+try {
+    if (fs.existsSync(overwrittenDirPath)) {
+        fs.rmSync(overwrittenDirPath, { recursive: true, force: true });
+    }
+} catch (err) {
+    console.error(err);
+}

apps/showcase/api-generator/components/accordion.js

@@ -0,0 +1,132 @@
+const AccordionProps = [
+    {
+        name: 'multiple',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, multiple tabs can be activated at the same time.'
+    },
+    {
+        name: 'activeIndex',
+        type: 'number|array',
+        default: 'null',
+        description: 'Index of the active tab or an array of indexes in multiple mode.'
+    },
+    {
+        name: 'lazy',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.'
+    },
+    {
+        name: 'expandIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon of a collapsed tab.'
+    },
+    {
+        name: 'collapseIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon of a expanded tab.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'selectOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, the focused tab is activated.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const AccordionEvents = [
+    {
+        name: 'tab-open',
+        description: 'Callback to invoke when a tab gets expanded.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'index',
+                type: 'number',
+                description: 'Opened tab index'
+            }
+        ]
+    },
+    {
+        name: 'tab-close',
+        description: 'Callback to invoke when an active tab is collapsed by clicking on the header.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'index',
+                type: 'number',
+                description: 'Closed tab index'
+            }
+        ]
+    },
+    {
+        name: 'tab-click',
+        description: 'Callback to invoke when an active tab is clicked.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'index',
+                type: 'number',
+                description: 'Index of the clicked tab'
+            }
+        ]
+    }
+];
+
+const AccordioneSlots = [
+    {
+        name: 'default',
+        description: 'Custom template.'
+    },
+    {
+        name: 'collapseicon',
+        description: 'Custom collapse icon template.'
+    },
+    {
+        name: 'expandicon',
+        description: 'Custom expand icon template.'
+    }
+];
+
+module.exports = {
+    accordion: {
+        name: 'Accordion',
+        description: 'Accordion groups a collection of contents in tabs.',
+        props: AccordionProps,
+        events: AccordionEvents,
+        slots: AccordioneSlots
+    }
+};

apps/showcase/api-generator/components/accordiontab.js

@@ -0,0 +1,82 @@
+const AccordionTabProps = [
+    {
+        name: 'header',
+        type: 'string',
+        default: 'null',
+        description: 'Orientation of tab headers.'
+    },
+    {
+        name: 'headerStyle',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the tab header.'
+    },
+    {
+        name: 'headerClass',
+        type: 'any',
+        default: 'null',
+        description: 'Style class of the tab header.'
+    },
+    {
+        name: 'headerProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the tab header.'
+    },
+    {
+        name: 'headerActionProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
+    },
+    {
+        name: 'contentStyle',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the tab content.'
+    },
+    {
+        name: 'contentClass',
+        type: 'any',
+        default: 'null',
+        description: 'Style class of the tab content.'
+    },
+    {
+        name: 'contentProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the tab content.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the tab is disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const AccordionTabSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the title section of a AccordionTab is defined using the header template.'
+    },
+    {
+        name: 'headericon',
+        description: 'Custom icon for the header section of a AccordionTab is defined using the headericon template.'
+    }
+];
+
+module.exports = {
+    accordiontab: {
+        name: 'AccordionTab',
+        description: 'Accordion element consists of one or more AccordionTab elements.',
+        props: AccordionTabProps,
+        slots: AccordionTabSlots
+    }
+};

apps/showcase/api-generator/components/autocomplete.js

@@ -0,0 +1,470 @@
+const AutoCompleteProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'suggestions',
+        type: 'array',
+        default: 'null',
+        description: 'An array of suggestions to display.'
+    },
+    {
+        name: 'field',
+        type: 'any',
+        default: 'null',
+        description: 'Property name or getter function of a suggested object to resolve and display.'
+    },
+    {
+        name: 'optionLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option.'
+    },
+    {
+        name: 'optionDisabled',
+        type: 'boolean',
+        default: 'null',
+        description: 'Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.'
+    },
+    {
+        name: 'optionGroupLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option group.'
+    },
+    {
+        name: 'optionGroupChildren',
+        type: 'string',
+        default: 'null',
+        description: 'Property name or getter function that refers to the children options of option group.'
+    },
+    {
+        name: 'scrollHeight',
+        type: 'string',
+        default: '200px',
+        description: 'Maximum height of the suggestions panel.'
+    },
+    {
+        name: 'dropdown',
+        type: 'boolean',
+        default: 'false',
+        description: 'Displays a button next to the input field when enabled.'
+    },
+    {
+        name: 'dropdownMode',
+        type: 'string',
+        default: 'blank',
+        description: 'Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.'
+    },
+    {
+        name: 'autoHighlight',
+        type: 'boolean',
+        default: false,
+        description: 'Highlights automatically the first item of the dropdown to be selected.'
+    },
+    {
+        name: 'multiple',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies if multiple values can be selected.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Default text to display when no option is selected.'
+    },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the multiselect is in loading state.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'A property to uniquely identify an option.'
+    },
+    {
+        name: 'minLength',
+        type: 'number',
+        default: '1',
+        description: 'Minimum number of characters to initiate a search.'
+    },
+    {
+        name: 'delay',
+        type: 'number',
+        default: '300',
+        description: 'Delay between keystrokes to wait before sending a query.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'forceSelection',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.'
+    },
+    {
+        name: 'completeOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to run a query when input receives focus.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'dropdownIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the dropdown.'
+    },
+    {
+        name: 'dropdownClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the dropdown button.'
+    },
+    {
+        name: 'loadingIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in loading state.'
+    },
+    {
+        name: 'removeTokenIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in chip remove action.'
+    },
+    {
+        name: 'virtualScrollerOptions',
+        type: 'object',
+        default: 'null',
+        description: 'Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
+    },
+    {
+        name: 'selectOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, the focused option is selected.'
+    },
+    {
+        name: 'searchLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in searching. The default locale is the host environment's current locale."
+    },
+    {
+        name: 'searchMessage',
+        type: 'string',
+        default: '{0} results are available',
+        description: 'Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'selectionMessage',
+        type: 'string',
+        default: '{0} items selected',
+        description: 'Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySelectionMessage',
+        type: 'string',
+        default: 'No selected item',
+        description: 'Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySearchMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const AutoCompleteEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke when component receives focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke when component loses focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'item-select',
+        description: 'Callback to invoke when a suggestion is selected.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'value',
+                type: 'object',
+                description: 'Selected item'
+            }
+        ]
+    },
+    {
+        name: 'item-unselect',
+        description: 'Callback to invoke when a selected value is removed.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'value',
+                type: 'object',
+                description: 'Unselected item'
+            }
+        ]
+    },
+    {
+        name: 'dropdown-click',
+        description: 'Callback to invoke to when dropdown button is clicked.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'query',
+                type: 'string',
+                description: 'Current value of the input field'
+            }
+        ]
+    },
+    {
+        name: 'clear',
+        description: 'Callback to invoke when input is cleared by the user.'
+    },
+    {
+        name: 'complete',
+        description: 'Callback to invoke to search for suggestions.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'query',
+                type: 'string',
+                description: 'Value to search with'
+            }
+        ]
+    },
+    {
+        name: 'before-show',
+        description: 'Callback to invoke before the overlay is shown.'
+    },
+    {
+        name: 'before-hide',
+        description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when the overlay is hidden.'
+    }
+];
+
+const AutoCompleteSlots = [
+    {
+        name: 'chip',
+        description: 'Custom content for the chip display.'
+    },
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'footer',
+        description: 'Custom content for the component footer.'
+    },
+    {
+        name: 'item',
+        description: 'Custom content for the item.'
+    },
+    {
+        name: 'option',
+        description: 'Custom content for the item.'
+    },
+    {
+        name: 'optiongroup',
+        description: 'Custom content for the optiongroup item.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content for the virtual scroller.'
+    },
+    {
+        name: 'loader',
+        description: 'Custom content for the virtual scroller loader items.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom empty template when there is no data to display.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'removetokenicon',
+        description: 'Custom remove token icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    }
+];
+
+module.exports = {
+    autocomplete: {
+        name: 'AutoComplete',
+        description: 'AutoComplete is an input component that provides real-time suggestions when being typed.',
+        props: AutoCompleteProps,
+        events: AutoCompleteEvents,
+        slots: AutoCompleteSlots
+    }
+};

apps/showcase/api-generator/components/avatar.js

@@ -0,0 +1,75 @@
+const AvatarProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the text to display.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the icon to display.'
+    },
+    {
+        name: 'image',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the image to display.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Size of the element, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'shape',
+        type: 'string',
+        default: 'square',
+        description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const AvatarSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    }
+];
+
+const AvatarEvents = [
+    {
+        name: 'error',
+        description: 'Triggered when an error occurs while loading an image file.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    avatar: {
+        name: 'Avatar',
+        description: 'Avatar represents people using icons, labels and images.',
+        props: AvatarProps,
+        slots: AvatarSlots,
+        events: AvatarEvents
+    }
+};

apps/showcase/api-generator/components/avatargroup.js

@@ -0,0 +1,53 @@
+const AvatarGroupProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the text to display.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the icon to display.'
+    },
+    {
+        name: 'image',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the image to display.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Size of the element, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'shape',
+        type: 'string',
+        default: 'square',
+        description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    avatargroup: {
+        name: 'AvatarGroup',
+        'doc-url': 'avatar',
+        description: 'A set of Avatars can be displayed together using the AvatarGroup component.',
+        props: AvatarGroupProps
+    }
+};

apps/showcase/api-generator/components/badge.js

@@ -0,0 +1,40 @@
+const BadgeProps = [
+    {
+        name: 'value',
+        type: 'string | number',
+        default: 'null',
+        description: 'Value to display inside the badge.'
+    },
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'null',
+        description: 'Severity type of the badge. Valid severities are "secondary", "success", "info", "warn", "danger" and "contrast".'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Size of the badge, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    badge: {
+        name: 'Badge',
+        description: 'Badge is a small status indicator for another element.',
+        props: BadgeProps
+    }
+};

apps/showcase/api-generator/components/badgedirective.js

@@ -0,0 +1,26 @@
+const BadgeDirectiveModifiers = [
+    {
+        name: 'success',
+        description: 'Overrides default severity color'
+    },
+    {
+        name: 'info',
+        description: 'Default color for severity levels'
+    },
+    {
+        name: 'warn',
+        description: 'Overrides default severity color'
+    },
+    {
+        name: 'danger',
+        description: 'Overrides default severity color'
+    }
+];
+
+module.exports = {
+    badgedirective: {
+        name: 'BadgeDirective',
+        description: 'When Badge used as a directive, badge needs to be configured at the application with a name of your choice.',
+        'vue-modifiers': BadgeDirectiveModifiers
+    }
+};

apps/showcase/api-generator/components/blockui.js

@@ -0,0 +1,58 @@
+const BlockUIProps = [
+    {
+        name: 'blocked',
+        type: 'array',
+        default: 'null',
+        description: 'Controls the blocked state.'
+    },
+    {
+        name: 'fullscreen',
+        type: 'menuitem',
+        default: 'null',
+        description: 'When enabled, the whole document gets blocked.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const BlockUIEvents = [
+    {
+        name: 'block',
+        description: 'Fired when the element gets blocked.'
+    },
+    {
+        name: 'unblock',
+        description: 'Fired when the element gets unblocked.'
+    }
+];
+
+module.exports = {
+    blockui: {
+        name: 'BlockUI',
+        description: 'BlockUI can either block other components or the whole page.',
+        props: BlockUIProps,
+        events: BlockUIEvents
+    }
+};

apps/showcase/api-generator/components/breadcrumb.js

@@ -0,0 +1,50 @@
+const BreadcrumbProps = [
+    {
+        name: 'model',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'home',
+        type: 'menuitem',
+        default: 'null',
+        description: 'Configuration for the home icon.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const BreadcrumbSlots = [
+    {
+        name: 'item',
+        description: 'Custom item template.'
+    },
+    {
+        name: 'separator',
+        description: 'Custom separator template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    }
+];
+
+module.exports = {
+    breadcrumb: {
+        name: 'Breadcrumb',
+        description: 'Breadcrumb provides contextual information about page hierarchy.',
+        props: BreadcrumbProps,
+        slots: BreadcrumbSlots
+    }
+};

apps/showcase/api-generator/components/button.js

@@ -0,0 +1,133 @@
+const ButtonProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Text of the button.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the icon.'
+    },
+    {
+        name: 'iconPos',
+        type: 'string',
+        default: 'left',
+        description: 'Position of the icon, valid values are "left", "right", "bottom" and "top".'
+    },
+    {
+        name: 'iconClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the icon.'
+    },
+    {
+        name: 'badge',
+        type: 'string',
+        default: 'null',
+        description: 'Value of the badge.'
+    },
+    {
+        name: 'badgeClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the badge.'
+    },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the button is in loading state.'
+    },
+    {
+        name: 'loadingIcon',
+        type: 'string',
+        default: 'pi pi-spinner pi-spin',
+        description: 'Icon to display in loading state.'
+    },
+    {
+        name: 'link',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a link style to the button.'
+    },
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warn", "help", "danger", "contrast".'
+    },
+    {
+        name: 'raised',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a shadow to indicate elevation.'
+    },
+    {
+        name: 'rounded',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a circular border radius to the button.'
+    },
+    {
+        name: 'text',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a textual class to the button without a background initially.'
+    },
+    {
+        name: 'outlined',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a border class without a background initially.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the button, valid values are "small" and "large".'
+    },
+    {
+        name: 'plain',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a plain textual class to the button without a background initially.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ButtonEvents = [];
+
+const ButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    }
+];
+
+module.exports = {
+    button: {
+        name: 'Button',
+        description: 'Button is an extension to standard button element with icons and theming.',
+        props: ButtonProps,
+        events: ButtonEvents,
+        slots: ButtonSlots
+    }
+};

apps/showcase/api-generator/components/calendar.js

@@ -0,0 +1,512 @@
+const CalendarProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'selectionMode',
+        type: 'string',
+        default: 'single',
+        description: 'Defines the quantity of the selection, valid values are "single", "multiple" and "range".'
+    },
+    {
+        name: 'dateFormat',
+        type: 'string',
+        default: 'null',
+        description: 'Format of the date. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'inline',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, displays the calendar as inline instead of an overlay.'
+    },
+    {
+        name: 'showOtherMonths',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.'
+    },
+    {
+        name: 'selectOtherMonths',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.'
+    },
+    {
+        name: 'showIcon',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, displays a button with icon next to input.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon of the calendar button.'
+    },
+    {
+        name: 'prevIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in the previous button.'
+    },
+    {
+        name: 'nextIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in the next button.'
+    },
+    {
+        name: 'incrementIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in each of the increment buttons.'
+    },
+    {
+        name: 'decrementIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in each of the decrement buttons.'
+    },
+    {
+        name: 'numberOfMonths',
+        type: 'number',
+        default: '1',
+        description: 'Number of months to display.'
+    },
+    {
+        name: 'view',
+        type: 'string',
+        default: 'date',
+        description: 'Type of view to display, valid valids are "date" for datepicker and "month" for month picker.'
+    },
+    {
+        name: 'monthNavigator',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the month should be rendered as a dropdown instead of text.'
+    },
+    {
+        name: 'yearNavigator',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the year should be rendered as a dropdown instead of text.'
+    },
+    {
+        name: 'yearRange',
+        type: 'string',
+        default: 'null',
+        description: 'The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).'
+    },
+    {
+        name: 'panelClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the datetimepicker panel.'
+    },
+    {
+        name: 'minDate',
+        type: 'Date',
+        default: 'null',
+        description: 'The minimum selectable date.'
+    },
+    {
+        name: 'maxDate',
+        type: 'Date',
+        default: 'null',
+        description: 'The maximum selectable date.'
+    },
+    {
+        name: 'disabledDates',
+        type: 'array',
+        default: 'null',
+        description: 'Array with dates to disable.'
+    },
+    {
+        name: 'disabledDays',
+        type: 'array',
+        default: 'null',
+        description: 'Array with disabled weekday numbers.'
+    },
+    {
+        name: 'maxDateCount',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of selectable dates in multiple mode.'
+    },
+    {
+        name: 'showOnFocus',
+        type: 'boolean',
+        default: 'true',
+        description: 'When disabled, datepicker will not be visible with input focus.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'showButtonBar',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display today and clear buttons at the footer'
+    },
+    {
+        name: 'shortYearCutoff',
+        type: 'string',
+        default: '+10',
+        description: 'The cutoff year for determining the century for a date.'
+    },
+    {
+        name: 'showTime',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display timepicker.'
+    },
+    {
+        name: 'timeOnly',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display timepicker only.'
+    },
+    {
+        name: 'hourFormat',
+        type: 'string',
+        default: '24',
+        description: 'Specifies 12 or 24 hour format.'
+    },
+    {
+        name: 'stepHour',
+        type: 'number',
+        default: '1',
+        description: 'Hours to change per step.'
+    },
+    {
+        name: 'stepMinute',
+        type: 'number',
+        default: '1',
+        description: 'Minutes to change per step.'
+    },
+    {
+        name: 'stepSeconds',
+        type: 'number',
+        default: '1',
+        description: 'Seconds to change per step.'
+    },
+    {
+        name: 'showSeconds',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to show the seconds in time picker.'
+    },
+    {
+        name: 'hideOnDateTimeSelect',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to hide the overlay on date selection when showTime is enabled.'
+    },
+    {
+        name: 'hideOnRangeSelection',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to hide the overlay on date selection is completed when selectionMode is range.'
+    },
+    {
+        name: 'timeSeparator',
+        type: 'string',
+        default: ':',
+        description: 'Separator of time selector.'
+    },
+    {
+        name: 'showWeek',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, calendar will show week numbers.'
+    },
+    {
+        name: 'manualInput',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to allow entering the date manually via typing.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that an input field is read-only.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text for the input.'
+    },
+    {
+        name: 'id',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the element.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const CalendarEvents = [
+    {
+        name: 'input',
+        description: 'Callback to invoke when input field is being typed.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'New date'
+            }
+        ]
+    },
+    {
+        name: 'date-select',
+        description: 'Callback to invoke when a date is selected.',
+        arguments: [
+            {
+                name: 'value',
+                type: 'Date',
+                description: 'Selected value'
+            }
+        ]
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when datepicker panel is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when datepicker panel is hidden.'
+    },
+    {
+        name: 'today-click',
+        description: 'Callback to invoke when today button is clicked.',
+        arguments: [
+            {
+                name: 'date',
+                type: 'Date',
+                description: 'Today as a date instance'
+            }
+        ]
+    },
+    {
+        name: 'clear-click',
+        description: 'Callback to invoke when clear button is clicked.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Click event'
+            }
+        ]
+    },
+    {
+        name: 'month-change',
+        description: 'Callback to invoke when a month is changed using the navigators.',
+        arguments: [
+            {
+                name: 'event.month',
+                type: 'number',
+                description: 'New month'
+            },
+            {
+                name: 'event.year',
+                type: 'number',
+                description: 'New year'
+            }
+        ]
+    },
+    {
+        name: 'year-change',
+        description: 'Callback to invoke when a year is changed using the navigators.',
+        arguments: [
+            {
+                name: 'event.month',
+                type: 'number',
+                description: 'New month'
+            },
+            {
+                name: 'event.year',
+                type: 'number',
+                description: 'New year'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke on focus of input field.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Focus event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke on blur of input field.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Input value'
+            }
+        ]
+    },
+    {
+        name: 'keydown',
+        description: 'Callback to invoke when a key is pressed.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Keydown event'
+            }
+        ]
+    }
+];
+
+const CalendarSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'footer',
+        description: 'Custom content for the component footer.'
+    },
+    {
+        name: 'date',
+        description: 'Custom content for the calendar cell.'
+    },
+    {
+        name: 'decade',
+        description: 'Custom content for the calendar decade.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'prevIcon',
+        description: 'Custom previous icon template.'
+    },
+    {
+        name: 'nexticon',
+        description: 'Custom next icon template.'
+    },
+    {
+        name: 'incrementicon',
+        description: 'Custom increment icon template.'
+    },
+    {
+        name: 'decrementicon',
+        description: 'Custom decrement icon template.'
+    }
+];
+
+module.exports = {
+    calendar: {
+        name: 'Calendar',
+        description: 'Calendar is an input component to select a date.',
+        props: CalendarProps,
+        events: CalendarEvents,
+        slots: CalendarSlots
+    }
+};

apps/showcase/api-generator/components/card.js

@@ -0,0 +1,46 @@
+const CardProps = [
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const CardSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'title',
+        description: 'Custom content for the component title.'
+    },
+    {
+        name: 'subtitle',
+        description: 'Custom content for the component subtitle.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content for the component content.'
+    },
+    {
+        name: 'footer',
+        description: 'Custom content for the component footer.'
+    }
+];
+
+module.exports = {
+    card: {
+        name: 'Card',
+        description: 'Card is a flexible container component.',
+        props: CardProps,
+        slots: CardSlots
+    }
+};

apps/showcase/api-generator/components/carousel.js

@@ -0,0 +1,138 @@
+const CarouselProps = [
+    {
+        name: 'value',
+        type: 'array',
+        default: 'null',
+        description: 'An array of objects to display.'
+    },
+    {
+        name: 'page',
+        type: 'number',
+        default: 'null',
+        description: 'Index of the first item.'
+    },
+    {
+        name: 'circular',
+        type: 'boolean',
+        default: 'false',
+        description: 'Defines if scrolling would be infinite.'
+    },
+    {
+        name: 'autoplayInterval',
+        type: 'number',
+        default: 'null',
+        description: 'Time in milliseconds to scroll items automatically.'
+    },
+    {
+        name: 'numVisible',
+        type: 'number',
+        default: '1',
+        description: 'Number of items per page.'
+    },
+    {
+        name: 'numScroll',
+        type: 'number',
+        default: '1',
+        description: 'Number of items to scroll.'
+    },
+    {
+        name: 'responsiveOptions',
+        type: 'any',
+        default: 'null',
+        description: 'An array of options for responsive design.'
+    },
+    {
+        name: 'orientation',
+        type: 'string',
+        default: 'horizontal',
+        description: 'Specifies the layout of the component, valid values are "horizontal" and "vertical".'
+    },
+    {
+        name: 'verticalViewPortHeight',
+        type: 'string',
+        default: '300px',
+        description: 'Height of the viewport in vertical layout.'
+    },
+    {
+        name: 'contentClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of main content.'
+    },
+    {
+        name: 'containerClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the viewport container.'
+    },
+    {
+        name: 'indicatorsContentClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the indicator items.'
+    },
+    {
+        name: 'showNavigators',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display navigation buttons in container.'
+    },
+    {
+        name: 'showIndicators',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display indicator container.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const CarouselSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'footer',
+        description: 'Custom content for the component footer.'
+    },
+    {
+        name: 'item',
+        description: 'Custom content for the component item.'
+    },
+    {
+        name: 'previcon',
+        description: 'Custom previous icon template.'
+    },
+    {
+        name: 'nexticon',
+        description: 'Custom next icon template.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no data to display.'
+    }
+];
+
+module.exports = {
+    carousel: {
+        name: 'Carousel',
+        description: 'Carousel is a content slider featuring various customization options.',
+        props: CarouselProps,
+        slots: CarouselSlots
+    }
+};

apps/showcase/api-generator/components/cascadeselect.js

@@ -0,0 +1,333 @@
+const CascadeSelectProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'options',
+        type: 'array',
+        default: 'null',
+        description: 'An array of selectitems to display as the available options.'
+    },
+    {
+        name: 'optionLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option.'
+    },
+    {
+        name: 'optionValue',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the value of an option, defaults to the option itself when not defined.'
+    },
+    {
+        name: 'optionDisabled',
+        type: 'boolean',
+        default: 'null',
+        description: 'Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.'
+    },
+    {
+        name: 'optionGroupLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option group.'
+    },
+    {
+        name: 'optionGroupChildren',
+        type: 'array | function',
+        default: 'null',
+        description: 'Property name or getter function to retrieve the items of a group.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Default text to display when no option is selected.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'A property to uniquely identify an option.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the multiselect is in loading state.'
+    },
+    {
+        name: 'dropdownIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the dropdown.'
+    },
+    {
+        name: 'loadingIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in loading state.'
+    },
+    {
+        name: 'optionGroupIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the option group.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
+    },
+    {
+        name: 'selectOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, the focused option is selected/opened.'
+    },
+    {
+        name: 'searchLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in searching. The default locale is the host environment's current locale."
+    },
+    {
+        name: 'searchMessage',
+        type: 'string',
+        default: '{0} results are available',
+        description: 'Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'selectionMessage',
+        type: 'string',
+        default: '{0} items selected',
+        description: 'Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySelectionMessage',
+        type: 'string',
+        default: 'No selected item',
+        description: 'Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySearchMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const CascadeSelectEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'value',
+                type: 'object',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke when component receives focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke when component loses focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'click',
+        description: 'Callback to invoke on click.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'group-change',
+        description: 'Callback to invoke when a group changes.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'value',
+                type: 'object',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'before-show',
+        description: 'Callback to invoke before the overlay is shown.'
+    },
+    {
+        name: 'before-hide',
+        description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when the overlay is hidden.'
+    }
+];
+
+const CascadeSelectSlots = [
+    {
+        name: 'value',
+        description: "Custom content for the item's value."
+    },
+    {
+        name: 'option',
+        description: "Custom content for the item's option."
+    },
+    {
+        name: 'indicator',
+        description: 'Custom content for the dropdown indicator.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'optiongroupicon',
+        description: 'Custom content for the option group icon.'
+    }
+];
+
+module.exports = {
+    cascadeselect: {
+        name: 'CascadeSelect',
+        description: 'CascadeSelect displays a nested structure of options.',
+        props: CascadeSelectProps,
+        events: CascadeSelectEvents,
+        slots: CascadeSelectSlots
+    }
+};

apps/showcase/api-generator/components/chart.js

@@ -0,0 +1,104 @@
+const ChartProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Type of the chart.'
+    },
+    {
+        name: 'data',
+        type: 'any',
+        default: 'null',
+        description: 'Data to display.'
+    },
+    {
+        name: 'options',
+        type: 'any',
+        default: 'null',
+        description: 'Options to customize the chart.'
+    },
+    {
+        name: 'plugins',
+        type: 'any',
+        default: 'null',
+        description: 'Used to custom plugins of the chart.'
+    },
+    {
+        name: 'width',
+        type: 'number',
+        default: '300',
+        description: 'Width of the chart in non-responsive mode.'
+    },
+    {
+        name: 'height',
+        type: 'number',
+        default: '150',
+        description: 'Height of the chart in non-responsive mode.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ChartEvents = [
+    {
+        name: 'select',
+        description: 'Callback to invoke when a tab gets expanded.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'dataset',
+                type: 'object',
+                description: 'Selected dataset'
+            },
+            {
+                name: 'element',
+                type: 'object',
+                description: 'Selected element'
+            },
+            {
+                name: 'element._datasetIndex',
+                type: 'number',
+                description: 'Index of the dataset in data'
+            },
+            {
+                name: 'element._index',
+                type: 'number',
+                description: 'Index of the data in dataset'
+            }
+        ]
+    },
+    {
+        name: 'loaded',
+        description: 'Callback to invoke when chart is loaded.',
+        arguments: [
+            {
+                name: 'chart',
+                type: 'object',
+                description: 'Chart instance.'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    chart: {
+        name: 'Chart',
+        description: 'Chart components are based on Charts.js, an open source HTML5 based charting library.',
+        props: ChartProps,
+        events: ChartEvents
+    }
+};

apps/showcase/api-generator/components/checkbox.js

@@ -0,0 +1,148 @@
+const CheckboxProps = [
+    {
+        name: 'value',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the checkbox.'
+    },
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value binding of the checkbox.'
+    },
+    {
+        name: 'binary',
+        type: 'boolean',
+        default: 'false',
+        description: 'Allows to select a boolean value instead of multiple values.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that an input field is read-only.'
+    },
+    {
+        name: 'required',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element is required.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: 'null',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'trueValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in checked state.'
+    },
+    {
+        name: 'falseValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in unchecked state.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Establishes relationships between the component and label(s) where its value should be one or more element IDs.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const CheckboxEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on value click.'
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.'
+    },
+    {
+        name: 'input',
+        description: 'Callback to invoke on value change.'
+    }
+];
+
+const CheckboxSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    }
+];
+
+module.exports = {
+    checkbox: {
+        name: 'Checkbox',
+        description: 'Checkbox is an extension to standard checkbox element with theming.',
+        props: CheckboxProps,
+        events: CheckboxEvents,
+        slots: CheckboxSlots
+    }
+};

apps/showcase/api-generator/components/chip.js

@@ -0,0 +1,79 @@
+const ChipProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the text to display.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the icon to display.'
+    },
+    {
+        name: 'image',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the image to display.'
+    },
+    {
+        name: 'removable',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display a remove icon.'
+    },
+    {
+        name: 'removeIconClass',
+        type: 'string',
+        default: 'pi pi-times-circle',
+        description: 'Icon of the remove element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ChipEvents = [
+    {
+        name: 'remove',
+        description: 'Callback to invoke when a chip is removed.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+const ChipSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template of chip component.'
+    },
+    {
+        name: 'removeicon',
+        description: 'Custom remove icon template of chip component.'
+    }
+];
+
+module.exports = {
+    chip: {
+        name: 'Chip',
+        description: 'Chip represents entities using icons, labels and images',
+        props: ChipProps,
+        events: ChipEvents,
+        slots: ChipSlots
+    }
+};

apps/showcase/api-generator/components/chips.js

@@ -0,0 +1,148 @@
+const ChipsProps = [
+    {
+        name: 'modelValue',
+        type: 'array',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'max',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of entries allowed.'
+    },
+    {
+        name: 'separator',
+        type: 'string',
+        default: 'null',
+        description: 'Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","'
+    },
+    {
+        name: 'addOnBlur',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to add an item when the input loses focus.'
+    },
+    {
+        name: 'allowDuplicate',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to allow duplicate values or not.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text for the input.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the focus input to match a label defined for the chips.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ChipsEvents = [
+    {
+        name: 'add',
+        description: 'Callback to invoke when a chip is added.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'value',
+                type: 'array',
+                description: 'Added item value'
+            }
+        ]
+    },
+    {
+        name: 'remove',
+        description: 'Callback to invoke when a chip is removed.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'value',
+                type: 'array',
+                description: 'Removed item value'
+            }
+        ]
+    }
+];
+
+const ChipsSlots = [
+    {
+        name: 'chips',
+        description: 'Custom content for the chips'
+    },
+    {
+        name: 'removetokenicon',
+        description: 'Custom remove token icon template.'
+    }
+];
+
+module.exports = {
+    chips: {
+        name: 'chips',
+        description: 'Chips is used to enter multiple values on an input field.',
+        props: ChipsProps,
+        events: ChipsEvents,
+        slots: ChipsSlots
+    }
+};

apps/showcase/api-generator/components/colorpicker.js

@@ -0,0 +1,122 @@
+const ColorPickerProps = [
+    {
+        name: 'modelValue',
+        type: 'string',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'defaultColor',
+        type: 'string',
+        default: 'ff0000',
+        description: 'Initial color to display when value is not defined.'
+    },
+    {
+        name: 'inline',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display as an overlay or not.'
+    },
+    {
+        name: 'format',
+        type: 'string',
+        default: 'hex',
+        description: 'Format to use in value binding, supported formats are "hex", "rgb" and "hsb".'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'tabindex',
+        type: 'string',
+        default: 'null',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Establishes relationships between the component and label(s) where its value should be one or more element IDs.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ColorPickerEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke when a color is selected.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.value',
+                type: 'any',
+                description: 'Selected color'
+            }
+        ]
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when popup is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when popup is hidden.'
+    }
+];
+
+module.exports = {
+    colorpicker: {
+        name: 'ColorPicker',
+        description: 'ColorPicker is an input component to select a color.',
+        props: ColorPickerProps,
+        events: ColorPickerEvents
+    }
+};

apps/showcase/api-generator/components/column.js

@@ -0,0 +1,361 @@
+const ColumnProps = [
+    {
+        name: 'columnKey',
+        type: 'any',
+        default: 'null',
+        description: 'Identifier of a column if field property is not defined.'
+    },
+    {
+        name: 'field',
+        type: 'string',
+        default: 'null',
+        description: 'Property represented by the column.'
+    },
+    {
+        name: 'sortField',
+        type: 'string',
+        default: 'null',
+        description: 'Property name to use in sorting, defaults to field.'
+    },
+    {
+        name: 'filterField',
+        type: 'string',
+        default: 'null',
+        description: 'Property name to use in filtering, defaults to field.'
+    },
+    {
+        name: 'sortable',
+        type: 'any',
+        default: 'false',
+        description: 'Defines if a column is sortable.'
+    },
+    {
+        name: 'header',
+        type: 'any',
+        default: 'null',
+        description: 'Header content of the column.'
+    },
+    {
+        name: 'footer',
+        type: 'any',
+        default: 'null',
+        description: 'Footer content of the column.'
+    },
+    {
+        name: 'style',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of header, body and footer cells.'
+    },
+    {
+        name: 'class',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of header, body and footer cells.'
+    },
+    {
+        name: 'headerStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the column header.'
+    },
+    {
+        name: 'headerClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the column header.'
+    },
+    {
+        name: 'bodyStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the column body.'
+    },
+    {
+        name: 'bodyClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the column body.'
+    },
+    {
+        name: 'footerStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the column footer.'
+    },
+    {
+        name: 'footerClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the footer body.'
+    },
+    {
+        name: 'showFilterMenu',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display the filter overlay.'
+    },
+    {
+        name: 'showFilterOperator',
+        type: 'boolean',
+        default: 'true',
+        description: 'When enabled, match all and match any operator selector is displayed.'
+    },
+    {
+        name: 'showClearButton',
+        type: 'boolean',
+        default: 'true',
+        description: 'Displays a button to clear the column filtering.'
+    },
+    {
+        name: 'showApplyButton',
+        type: 'boolean',
+        default: 'true',
+        description: 'Displays a button to apply the column filtering.'
+    },
+    {
+        name: 'showFilterMatchModes',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show the match modes selector.'
+    },
+    {
+        name: 'showAddButton',
+        type: 'boolean',
+        default: 'true',
+        description: 'When enabled, a button is displayed to add more rules.'
+    },
+    {
+        name: 'filterMatchModeOptions',
+        type: 'array',
+        default: 'null',
+        description: 'An array of label-value pairs to override the global match mode options.'
+    },
+    {
+        name: 'maxConstraints',
+        type: 'number',
+        default: '2',
+        description: 'Maximum number of constraints for a column filter.'
+    },
+    {
+        name: 'excludeGlobalFilter',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to exclude from global filtering or not.'
+    },
+    {
+        name: 'filterHeaderStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the column filter header in row filter display.'
+    },
+    {
+        name: 'filterHeaderClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the column filter header in row filter display.'
+    },
+    {
+        name: 'filterMenuStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the column filter overlay.'
+    },
+    {
+        name: 'filterMenuClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the column filter overlay.'
+    },
+    {
+        name: 'selectionMode',
+        type: 'string',
+        default: 'null',
+        description: 'Defines column based selection mode, options are "single" and "multiple".'
+    },
+    {
+        name: 'expander',
+        type: 'boolean',
+        default: 'false',
+        description: 'Displays an icon to toggle row expansion.'
+    },
+    {
+        name: 'colspan',
+        type: 'number',
+        default: 'null',
+        description: 'Number of columns to span for grouping.'
+    },
+    {
+        name: 'rowspan',
+        type: 'number',
+        default: 'null',
+        description: 'Number of rows to span for grouping.'
+    },
+    {
+        name: 'rowReorder',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether this column displays an icon to reorder the rows.'
+    },
+    {
+        name: 'rowReorderIcon',
+        type: 'string',
+        default: 'pi pi-bars',
+        description: 'Icon of the drag handle to reorder rows.'
+    },
+    {
+        name: 'reorderableColumn',
+        type: 'boolean',
+        default: 'true',
+        description: 'Defines if the column itself can be reordered with dragging.'
+    },
+    {
+        name: 'rowEditor',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, column displays row editor controls.'
+    },
+    {
+        name: 'frozen',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the column is fixed in horizontal scrolling.'
+    },
+    {
+        name: 'alignFrozen',
+        type: 'string',
+        default: 'left',
+        description: 'Position of a frozen column, valid values are left and right.'
+    },
+    {
+        name: 'exportable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the column is included in data export.'
+    },
+    {
+        name: 'exportHeader',
+        type: 'string',
+        default: 'null',
+        description: 'Custom export header of the column to be exported as CSV.'
+    },
+    {
+        name: 'exportFooter',
+        type: 'string',
+        default: 'null',
+        description: 'Custom export footer of the column to be exported as CSV.'
+    },
+    {
+        name: 'hidden',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the column is rendered.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const ColumnSlots = [
+    {
+        name: 'header',
+        description: "Custom content for the component's header"
+    },
+    {
+        name: 'body',
+        description: "Custom content for the component's body"
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer"
+    },
+    {
+        name: 'editor',
+        description: 'Custom content for the editing cell'
+    },
+    {
+        name: 'filter',
+        description: 'Custom content for the filtering items'
+    },
+    {
+        name: 'filterheader',
+        description: "Custom content for the filter menu's header"
+    },
+    {
+        name: 'filterfooter',
+        description: "Custom content for the filter menu's footer"
+    },
+    {
+        name: 'filterclear',
+        description: "Custom content for the filter menu's clear section"
+    },
+    {
+        name: 'filterapply',
+        description: "Custom content for the filter menu's apply section"
+    },
+    {
+        name: 'loading',
+        description: 'Custom loading template.'
+    },
+    {
+        name: 'rowtoggleicon',
+        description: 'Custom row toggler icon template.'
+    },
+    {
+        name: 'rowcheckboxicon',
+        description: 'Custom row checkbox icon template.'
+    },
+    {
+        name: 'roweditoriniticon',
+        description: 'Custom row editor init icon template.'
+    },
+    {
+        name: 'roweditorsaveicon',
+        description: 'Custom row editor save icon template.'
+    },
+    {
+        name: 'roweditorcancelicon',
+        description: 'Custom row editor cancel icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    },
+    {
+        name: 'filterclearicon',
+        description: 'Custom filter clear icon template.'
+    },
+    {
+        name: 'filterremoveicon',
+        description: 'Custom filter remove icon template.'
+    },
+    {
+        name: 'filteraddicon',
+        description: 'Custom filter add icon template.'
+    },
+    {
+        name: 'sorticon',
+        description: 'Custom sort icon template.'
+    },
+    {
+        name: 'headercheckboxicon',
+        description: 'Custom header checkbox icon template.'
+    },
+    {
+        name: 'rowreordericon',
+        description: 'Custom row reorder icon template.'
+    }
+];
+
+module.exports = {
+    column: {
+        name: 'Column',
+        description: 'DataTable requires a value as an array of objects and columns defined with Column component.',
+        'doc-url': 'datatable',
+        props: ColumnProps,
+        slots: ColumnSlots
+    }
+};

apps/showcase/api-generator/components/columngroup.js

@@ -0,0 +1,23 @@
+const ColumnGroupProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    }
+];
+
+module.exports = {
+    columngroup: {
+        name: 'ColumnGroup',
+        description: 'Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns',
+        'doc-url': 'datatable',
+        props: ColumnGroupProps
+    }
+};

apps/showcase/api-generator/components/confirmdialog.js

@@ -0,0 +1,64 @@
+const ConfirmDialogProps = [
+    {
+        name: 'group',
+        type: 'string',
+        default: 'null',
+        description: 'Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.'
+    },
+    {
+        name: 'breakpoints',
+        type: 'object',
+        default: 'null',
+        description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'draggable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the dialog can be relocated by dragging.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ConfirmDialogSlots = [
+    {
+        name: 'message',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'accepticon',
+        description: 'Custom accept icon template.'
+    },
+    {
+        name: 'rejecticon',
+        description: 'Custom reject icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    confirmdialog: {
+        name: 'ConfirmDialog',
+        description: 'ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.',
+        props: ConfirmDialogProps,
+        slots: ConfirmDialogSlots
+    }
+};

apps/showcase/api-generator/components/confirmpopup.js

@@ -0,0 +1,52 @@
+const ConfirmPopupProps = [
+    {
+        name: 'group',
+        type: 'string',
+        default: 'null',
+        description: 'Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ConfirmPopupSlots = [
+    {
+        name: 'message',
+        description: 'Custom content for the component.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'accepticon',
+        description: 'Custom accept icon template.'
+    },
+    {
+        name: 'rejecticon',
+        description: 'Custom reject icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    confirmpopup: {
+        name: 'ConfirmPopup',
+        description: 'ConfirmPopup displays a confirmation overlay displayed relatively to its target.',
+        props: ConfirmPopupProps,
+        slots: ConfirmPopupSlots
+    }
+};

apps/showcase/api-generator/components/contextmenu.js

@@ -0,0 +1,68 @@
+const ContextMenuProps = [
+    {
+        name: 'model',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'global',
+        type: 'boolean',
+        default: 'false',
+        description: 'Attaches the menu to document instead of a particular item.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ContextMenuSlots = [
+    {
+        name: 'item',
+        description: 'Custom item template.'
+    },
+    {
+        name: 'submenuicon',
+        description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    }
+];
+
+module.exports = {
+    contextmenu: {
+        name: 'ContextMenu',
+        description: 'ContextMenu displays an overlay menu on right click of its target.',
+        props: ContextMenuProps,
+        slots: ContextMenuSlots
+    }
+};

apps/showcase/api-generator/components/dataview.js

@@ -0,0 +1,180 @@
+const DataViewProps = [
+    {
+        name: 'value',
+        type: 'array',
+        default: 'null',
+        description: 'An array of objects to display.'
+    },
+    {
+        name: 'layout',
+        type: 'string',
+        default: 'list',
+        description: 'Layout of the items, valid values are "list" and "grid".'
+    },
+    {
+        name: 'rows',
+        type: 'number',
+        default: '0',
+        description: 'Number of rows to display per page.'
+    },
+    {
+        name: 'first',
+        type: 'number',
+        default: '0',
+        description: 'ndex of the first record to render.'
+    },
+    {
+        name: 'totalRecords',
+        type: 'number',
+        default: 'null',
+        description: 'Number of total records, defaults to length of value when not defined.'
+    },
+    {
+        name: 'paginator',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified as true, enables the pagination.'
+    },
+    {
+        name: 'paginatorPosition',
+        type: 'string',
+        default: 'bottom',
+        description: 'Position of the paginator, options are "top","bottom" or "both".'
+    },
+    {
+        name: 'alwaysShowPaginator',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show it even there is only one page.'
+    },
+    {
+        name: 'paginatorTemplate',
+        type: 'string',
+        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+        description: 'Template of the paginator.'
+    },
+    {
+        name: 'pageLinkSize',
+        type: 'number',
+        default: '5',
+        description: 'Number of page links to display.'
+    },
+    {
+        name: 'rowsPerPageOptions',
+        type: 'array',
+        default: 'null',
+        description: 'Array of integer values to display inside rows per page dropdown.'
+    },
+    {
+        name: 'currentPageReportTemplate',
+        type: 'string',
+        default: '({currentPage} of {totalPages})',
+        description: 'Template of the current page report element.'
+    },
+    {
+        name: 'sortField',
+        type: 'string',
+        default: 'null',
+        description: 'Property name or a getter function of data to use in sorting by default.'
+    },
+    {
+        name: 'sortOrder',
+        type: 'number',
+        default: 'null',
+        description: 'Order to sort the data by default.'
+    },
+    {
+        name: 'lazy',
+        type: 'boolean',
+        default: 'false',
+        description: 'Defines if data is loaded and interacted with in lazy manner.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the data that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const DataViewEvents = [
+    {
+        name: 'page',
+        description: 'Callback to invoke when page changes, the event object contains information about the new state.',
+        arguments: [
+            {
+                name: 'event.page',
+                type: 'number',
+                description: 'New page number'
+            },
+            {
+                name: 'event.first',
+                type: 'number',
+                description: 'Index of first record'
+            },
+            {
+                name: 'event.rows',
+                type: 'number',
+                description: 'Number of rows to display in new page'
+            },
+            {
+                name: 'event.pageCount',
+                type: 'number',
+                description: 'Total number of pages'
+            }
+        ]
+    }
+];
+
+const DataViewSlots = [
+    {
+        name: 'header',
+        description: "Custom content for the component's header"
+    },
+    {
+        name: 'paginatorstart',
+        description: "Custom content for the component paginator's left side"
+    },
+    {
+        name: 'paginatorend',
+        description: "Custom content for the component paginator's right side"
+    },
+    {
+        name: 'list',
+        description: 'Content for the list layout'
+    },
+    {
+        name: 'grid',
+        description: 'Content for the grid layout'
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no data to display'
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer"
+    }
+];
+
+module.exports = {
+    dataview: {
+        name: 'DataView',
+        description: 'DataView displays data in grid or list layout with pagination and sorting features.',
+        props: DataViewProps,
+        events: DataViewEvents,
+        slots: DataViewSlots
+    }
+};

apps/showcase/api-generator/components/datepicker.js

@@ -0,0 +1,512 @@
+const DatePickerProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'selectionMode',
+        type: 'string',
+        default: 'single',
+        description: 'Defines the quantity of the selection, valid values are "single", "multiple" and "range".'
+    },
+    {
+        name: 'dateFormat',
+        type: 'string',
+        default: 'null',
+        description: 'Format of the date. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'inline',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, displays the calendar as inline instead of an overlay.'
+    },
+    {
+        name: 'showOtherMonths',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.'
+    },
+    {
+        name: 'selectOtherMonths',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.'
+    },
+    {
+        name: 'showIcon',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, displays a button with icon next to input.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon of the calendar button.'
+    },
+    {
+        name: 'previcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in the previous button.'
+    },
+    {
+        name: 'nextIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in the next button.'
+    },
+    {
+        name: 'incrementIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in each of the increment buttons.'
+    },
+    {
+        name: 'decrementIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show in each of the decrement buttons.'
+    },
+    {
+        name: 'numberOfMonths',
+        type: 'number',
+        default: '1',
+        description: 'Number of months to display.'
+    },
+    {
+        name: 'view',
+        type: 'string',
+        default: 'date',
+        description: 'Type of view to display, valid valids are "date" for datepicker and "month" for month picker.'
+    },
+    {
+        name: 'monthNavigator',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the month should be rendered as a dropdown instead of text.'
+    },
+    {
+        name: 'yearNavigator',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the year should be rendered as a dropdown instead of text.'
+    },
+    {
+        name: 'yearRange',
+        type: 'string',
+        default: 'null',
+        description: 'The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).'
+    },
+    {
+        name: 'panelClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the datetimepicker panel.'
+    },
+    {
+        name: 'minDate',
+        type: 'Date',
+        default: 'null',
+        description: 'The minimum selectable date.'
+    },
+    {
+        name: 'maxDate',
+        type: 'Date',
+        default: 'null',
+        description: 'The maximum selectable date.'
+    },
+    {
+        name: 'disabledDates',
+        type: 'array',
+        default: 'null',
+        description: 'Array with dates to disable.'
+    },
+    {
+        name: 'disabledDays',
+        type: 'array',
+        default: 'null',
+        description: 'Array with disabled weekday numbers.'
+    },
+    {
+        name: 'maxDateCount',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of selectable dates in multiple mode.'
+    },
+    {
+        name: 'showOnFocus',
+        type: 'boolean',
+        default: 'true',
+        description: 'When disabled, datepicker will not be visible with input focus.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'showButtonBar',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display today and clear buttons at the footer'
+    },
+    {
+        name: 'shortYearCutoff',
+        type: 'string',
+        default: '+10',
+        description: 'The cutoff year for determining the century for a date.'
+    },
+    {
+        name: 'showTime',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display timepicker.'
+    },
+    {
+        name: 'timeOnly',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display timepicker only.'
+    },
+    {
+        name: 'hourFormat',
+        type: 'string',
+        default: '24',
+        description: 'Specifies 12 or 24 hour format.'
+    },
+    {
+        name: 'stepHour',
+        type: 'number',
+        default: '1',
+        description: 'Hours to change per step.'
+    },
+    {
+        name: 'stepMinute',
+        type: 'number',
+        default: '1',
+        description: 'Minutes to change per step.'
+    },
+    {
+        name: 'stepSeconds',
+        type: 'number',
+        default: '1',
+        description: 'Seconds to change per step.'
+    },
+    {
+        name: 'showSeconds',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to show the seconds in time picker.'
+    },
+    {
+        name: 'hideOnDateTimeSelect',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to hide the overlay on date selection when showTime is enabled.'
+    },
+    {
+        name: 'hideOnRangeSelection',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to hide the overlay on date selection is completed when selectionMode is range.'
+    },
+    {
+        name: 'timeSeparator',
+        type: 'string',
+        default: ':',
+        description: 'Separator of time selector.'
+    },
+    {
+        name: 'showWeek',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, calendar will show week numbers.'
+    },
+    {
+        name: 'manualInput',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to allow entering the date manually via typing.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that an input field is read-only.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text for the input.'
+    },
+    {
+        name: 'id',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the element.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const DatePickerEvents = [
+    {
+        name: 'input',
+        description: 'Callback to invoke when input field is being typed.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'New date'
+            }
+        ]
+    },
+    {
+        name: 'date-select',
+        description: 'Callback to invoke when a date is selected.',
+        arguments: [
+            {
+                name: 'value',
+                type: 'Date',
+                description: 'Selected value'
+            }
+        ]
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when datepicker panel is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when datepicker panel is hidden.'
+    },
+    {
+        name: 'today-click',
+        description: 'Callback to invoke when today button is clicked.',
+        arguments: [
+            {
+                name: 'date',
+                type: 'Date',
+                description: 'Today as a date instance'
+            }
+        ]
+    },
+    {
+        name: 'clear-click',
+        description: 'Callback to invoke when clear button is clicked.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Click event'
+            }
+        ]
+    },
+    {
+        name: 'month-change',
+        description: 'Callback to invoke when a month is changed using the navigators.',
+        arguments: [
+            {
+                name: 'event.month',
+                type: 'number',
+                description: 'New month'
+            },
+            {
+                name: 'event.year',
+                type: 'number',
+                description: 'New year'
+            }
+        ]
+    },
+    {
+        name: 'year-change',
+        description: 'Callback to invoke when a year is changed using the navigators.',
+        arguments: [
+            {
+                name: 'event.month',
+                type: 'number',
+                description: 'New month'
+            },
+            {
+                name: 'event.year',
+                type: 'number',
+                description: 'New year'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke on focus of input field.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Focus event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke on blur of input field.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Input value'
+            }
+        ]
+    },
+    {
+        name: 'keydown',
+        description: 'Callback to invoke when a key is pressed.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Keydown event'
+            }
+        ]
+    }
+];
+
+const DatePickerSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'footer',
+        description: 'Custom content for the component footer.'
+    },
+    {
+        name: 'date',
+        description: 'Custom content for the calendar cell.'
+    },
+    {
+        name: 'decade',
+        description: 'Custom content for the calendar decade.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'previcon',
+        description: 'Custom previous icon template.'
+    },
+    {
+        name: 'nexticon',
+        description: 'Custom next icon template.'
+    },
+    {
+        name: 'incrementicon',
+        description: 'Custom increment icon template.'
+    },
+    {
+        name: 'decrementicon',
+        description: 'Custom decrement icon template.'
+    }
+];
+
+module.exports = {
+    calendar: {
+        name: 'DatePicker',
+        description: 'DatePicker is an input component to select a date.',
+        props: DatePickerProps,
+        events: DatePickerEvents,
+        slots: DatePickerSlots
+    }
+};

apps/showcase/api-generator/components/deferredcontent.js

@@ -0,0 +1,37 @@
+const DeferredContentProps = [
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const DeferredContentEvents = [
+    {
+        name: 'load',
+        description: 'Callback to invoke when deferred content is loaded..',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Event object'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    deferredcontent: {
+        name: 'DeferredContent',
+        description: 'DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.',
+        props: DeferredContentProps,
+        events: DeferredContentEvents
+    }
+};

apps/showcase/api-generator/components/dialog.js

@@ -0,0 +1,227 @@
+const DialogProps = [
+    {
+        name: 'header',
+        type: 'any',
+        default: 'null',
+        description: 'Title content of the dialog.'
+    },
+    {
+        name: 'footer',
+        type: 'any',
+        default: 'null',
+        description: 'Footer content of the dialog.'
+    },
+    {
+        name: 'visible',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies the visibility of the dialog.'
+    },
+    {
+        name: 'modal',
+        type: 'boolean',
+        default: 'null',
+        description: 'Defines if background should be blocked when dialog is displayed.'
+    },
+    {
+        name: 'closeOnEscape',
+        type: 'boolean',
+        default: 'true',
+        description: 'Specifies if pressing escape key should hide the dialog.'
+    },
+    {
+        name: 'dismissableMask',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies if clicking the modal background should hide the dialog.'
+    },
+    {
+        name: 'position',
+        type: 'string',
+        default: 'center',
+        description: 'Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".'
+    },
+    {
+        name: 'contentStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Style of the content section.'
+    },
+    {
+        name: 'contentClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the content section.'
+    },
+    {
+        name: 'closable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Adds a close icon to the header to hide the dialog.'
+    },
+    {
+        name: 'showHeader',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show the header or not.'
+    },
+    {
+        name: 'blockScroll',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether background scroll should be blocked when dialog is visible.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'ariaCloseLabel',
+        type: 'string',
+        default: 'close',
+        description: 'Aria label of the close icon.'
+    },
+    {
+        name: 'maximizable',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the dialog can be displayed full screen.'
+    },
+    {
+        name: 'breakpoints',
+        type: 'object',
+        default: 'null',
+        description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'draggable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the dialog can be relocated by dragging.'
+    },
+    {
+        name: 'minX',
+        type: 'number',
+        default: '0',
+        description: 'Minimum value for the left coordinate of dialog in dragging.'
+    },
+    {
+        name: 'minY',
+        type: 'number',
+        default: '0',
+        description: 'Minimum value for the top coordinate of dialog in dragging.'
+    },
+    {
+        name: 'keepInViewport',
+        type: 'boolean',
+        default: 'true',
+        description: 'Keeps dialog in the viewport when dragging.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const DialogEvents = [
+    {
+        name: 'hide',
+        description: 'Callback to invoke when dialog is hidden.'
+    },
+    {
+        name: 'after-hide',
+        description: 'Callback to invoke after dialog is hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when dialog is showed.'
+    },
+    {
+        name: 'maximize',
+        description: 'Fired when a dialog gets maximized.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Event Object'
+            }
+        ]
+    },
+    {
+        name: 'unmaximize',
+        description: 'Fired when a dialog gets unmaximized.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Event Object'
+            }
+        ]
+    },
+    {
+        name: 'dragend',
+        description: 'Fired when a dialog drag completes.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Event Object'
+            }
+        ]
+    }
+];
+
+const DialogSlots = [
+    {
+        name: 'header',
+        description: "Custom content for the component's header"
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer"
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'maximizeicon',
+        description: 'Custom maximizeicon icon template of dialog.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    dialog: {
+        name: 'Dialog',
+        description: 'Dialog is a container to display content in an overlay window.',
+        props: DialogProps,
+        events: DialogEvents,
+        slots: DialogSlots
+    }
+};

apps/showcase/api-generator/components/divider.js

@@ -0,0 +1,40 @@
+const DividerProps = [
+    {
+        name: 'align',
+        type: 'string',
+        default: 'null',
+        description: 'Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.'
+    },
+    {
+        name: 'layout',
+        type: 'string',
+        default: 'horizontal',
+        description: 'Specifies the orientation, valid values are "horizontal" and "vertical".'
+    },
+    {
+        name: 'type',
+        type: 'string',
+        default: 'solid',
+        description: 'Border style type, default is "solid" and other options are "dashed" and "dotted".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    divider: {
+        name: 'Divider',
+        description: 'Divider is used to separate contents.',
+        props: DividerProps
+    }
+};

apps/showcase/api-generator/components/dock.js

@@ -0,0 +1,64 @@
+const DockProps = [
+    {
+        name: 'model',
+        type: 'object',
+        default: 'null',
+        description: 'MenuModel instance to define the action items.'
+    },
+    {
+        name: 'position',
+        type: 'string',
+        default: 'bottom',
+        description: "Position of element. Valid values are 'bottom', 'top', 'left' and 'right'."
+    },
+    {
+        name: 'class',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the element.'
+    },
+    {
+        name: 'style',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the element.'
+    },
+    {
+        name: 'tooltipOptions',
+        type: 'object',
+        default: 'null',
+        description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const DockSlots = [
+    {
+        name: 'item',
+        description: 'Custom content for the item.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom content for the icon.'
+    }
+];
+
+module.exports = {
+    dock: {
+        name: 'Dock',
+        description: 'Dock is a navigation component consisting of menuitems.',
+        props: DockProps,
+        slots: DockSlots
+    }
+};

apps/showcase/api-generator/components/drawer.js

@@ -0,0 +1,114 @@
+const DrawerProps = [
+    {
+        name: 'visible',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies the visibility of the dialog.'
+    },
+    {
+        name: 'position',
+        type: 'string',
+        default: 'left',
+        description: 'Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'dismissable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether clicking outside closes the panel.'
+    },
+    {
+        name: 'showCloseIcon',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display a close icon inside the panel.'
+    },
+    {
+        name: 'modal',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to a modal layer behind the sidebar.'
+    },
+    {
+        name: 'ariaCloseLabel',
+        type: 'string',
+        default: 'close',
+        description: 'Aria label of the close icon.'
+    },
+    {
+        name: 'blockScroll',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether background scroll should be blocked when sidebar is visible.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Icon to display in the sidebar close button.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const DrawerEvents = [
+    {
+        name: 'hide',
+        description: 'Callback to invoke when sidebar gets hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when sidebar gets shown.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    }
+];
+
+const DrawerSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    sidebar: {
+        name: 'Drawer',
+        description: 'Drawer is a panel component displayed as an overlay at the edges of the screen.',
+        props: DrawerProps,
+        events: DrawerEvents,
+        slots: DrawerSlots
+    }
+};

apps/showcase/api-generator/components/dropdown.js

@@ -0,0 +1,432 @@
+const DropdownProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'options',
+        type: 'array',
+        default: 'null',
+        description: 'An array of selectitems to display as the available options.'
+    },
+    {
+        name: 'optionLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option.'
+    },
+    {
+        name: 'optionValue',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the value of an option, defaults to the option itself when not defined.'
+    },
+    {
+        name: 'optionDisabled',
+        type: 'boolean',
+        default: 'null',
+        description: 'Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.'
+    },
+    {
+        name: 'optionGroupLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option group.'
+    },
+    {
+        name: 'optionGroupChildren',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function that refers to the children options of option group.'
+    },
+    {
+        name: 'scrollHeight',
+        type: 'string',
+        default: '200px',
+        description: 'Height of the viewport, a scrollbar is defined if height of list exceeds this value.'
+    },
+    {
+        name: 'filter',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, displays a filter input at header.'
+    },
+    {
+        name: 'filterPlaceholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text to show when filter input is empty.'
+    },
+    {
+        name: 'filterLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in filtering. The default locale is the host environment's current locale."
+    },
+    {
+        name: 'filterMatchMode',
+        type: 'string',
+        default: 'contains',
+        description: 'Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"'
+    },
+    {
+        name: 'filterFields',
+        type: 'array',
+        default: 'null',
+        description: 'Fields used when filtering the options, defaults to optionLabel.'
+    },
+    {
+        name: 'editable',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, custom value instead of predefined options can be entered using the editable input field.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Default text to display when no option is selected.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'A property to uniquely identify an option.'
+    },
+    {
+        name: 'showClear',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, a clear icon is displayed to clear the value.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'filterInputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the component.'
+    },
+    {
+        name: 'clearIconProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLElement to the clear icon inside the component.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: "A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself."
+    },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the multiselect is in loading state.'
+    },
+    {
+        name: 'loadingIcon',
+        type: 'string',
+        default: 'pi pi-spinner pi-spin',
+        description: 'Icon to display in loading state.'
+    },
+    {
+        name: 'resetFilterOnHide',
+        type: 'boolean',
+        default: 'false',
+        description: 'Clears the filter value when hiding the dropdown.'
+    },
+    {
+        name: 'resetFilterOnClear',
+        type: 'boolean',
+        default: 'false',
+        description: 'Clears the filter value when clicking on the clear icon.'
+    },
+    {
+        name: 'virtualScrollerOptions',
+        type: 'object',
+        default: 'null',
+        description: 'Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
+    },
+    {
+        name: 'autoFilterFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the filter element when the overlay panel is shown.'
+    },
+    {
+        name: 'selectOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, the focused option is selected.'
+    },
+    {
+        name: 'filterMessage',
+        type: 'string',
+        default: '{0} results are available',
+        description: 'Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'selectionMessage',
+        type: 'string',
+        default: '{0} items selected',
+        description: 'Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySelectionMessage',
+        type: 'string',
+        default: 'No selected item',
+        description: 'Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyFilterMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const DropdownEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke when component receives focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke when component loses focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'before-show',
+        description: 'Callback to invoke before the overlay is shown.'
+    },
+    {
+        name: 'before-hide',
+        description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when the overlay is hidden.'
+    },
+    {
+        name: 'filter',
+        description: 'Callback to invoke when the overlay is shown.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Filter value'
+            }
+        ]
+    }
+];
+
+const DropdownSlots = [
+    {
+        name: 'value',
+        description: "Custom content for the item's value"
+    },
+    {
+        name: 'indicator',
+        description: 'Custom content for the dropdown indicator'
+    },
+    {
+        name: 'header',
+        description: "Custom content for the component's header"
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer"
+    },
+    {
+        name: 'option',
+        description: "Custom content for the item's option"
+    },
+    {
+        name: 'optiongroup',
+        description: "Custom content for the item's optiongroup"
+    },
+    {
+        name: 'emptyfilter',
+        description: 'Custom content when there is no filtered data to display'
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no data to display'
+    },
+    {
+        name: 'content',
+        description: 'Custom content for the virtual scroller'
+    },
+    {
+        name: 'loader',
+        description: 'Custom content for the virtual scroller loader items'
+    },
+    {
+        name: 'clearicon',
+        description: 'Custom clear icon template.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    }
+];
+
+module.exports = {
+    dropdown: {
+        name: 'Dropdown',
+        description: 'Dropdown is used to select an item from a list of options.',
+        props: DropdownProps,
+        events: DropdownEvents,
+        slots: DropdownSlots
+    }
+};

apps/showcase/api-generator/components/dynamicdialog.js

@@ -0,0 +1,15 @@
+const DynamicDialogProps = [];
+
+const DynamicDialogEvents = [];
+
+const DynamicDialogSlots = [];
+
+module.exports = {
+    dynamicdialog: {
+        name: 'DynamicDialog',
+        description: 'Dialogs can be created dynamically with any component as the content using a DialogService.',
+        props: DynamicDialogProps,
+        events: DynamicDialogEvents,
+        slots: DynamicDialogSlots
+    }
+};

apps/showcase/api-generator/components/editor.js

@@ -0,0 +1,148 @@
+const EditorProps = [
+    {
+        name: 'modelValue',
+        type: 'string',
+        default: 'null',
+        description: 'Value of the content.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text to show when editor is empty.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to instantiate the editor to readonly mode.'
+    },
+    {
+        name: 'formats',
+        type: 'string[]',
+        default: 'null',
+        description: 'Whitelist of formats to display.'
+    },
+    {
+        name: 'editorStyle',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the container.'
+    },
+    {
+        name: 'modules',
+        type: 'object',
+        default: 'null',
+        description: 'Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const EditorEvents = [
+    {
+        name: 'text-change',
+        description: 'Callback to invoke when text of editor changes.',
+        arguments: [
+            {
+                name: 'event.delta',
+                type: 'object',
+                description: 'Representation of the change.'
+            },
+            {
+                name: 'event.source',
+                type: 'string',
+                description: 'Source of change. Will be either "user" or "api".'
+            },
+            {
+                name: 'event.htmlValue',
+                type: 'string',
+                description: 'Current value as html.'
+            },
+            {
+                name: 'event.textValue',
+                type: 'string',
+                description: 'Current value as text.'
+            },
+            {
+                name: 'event.instance',
+                type: 'object',
+                description: 'Text editor instance.'
+            }
+        ]
+    },
+    {
+        name: 'selection-change',
+        description: 'Callback to invoke when selection of the text changes.',
+        arguments: [
+            {
+                name: 'event.range',
+                type: 'object',
+                description: 'Representation of the selection boundaries.'
+            },
+            {
+                name: 'event.oldRange',
+                type: 'string',
+                description: 'Representation of the previous selection boundaries.'
+            },
+            {
+                name: 'event.source',
+                type: 'string',
+                description: 'Source of change. Will be either "user" or "api".'
+            },
+            {
+                name: 'event.htmlValue',
+                type: 'string',
+                description: 'Current value as html.'
+            },
+            {
+                name: 'event.textValue',
+                type: 'string',
+                description: 'Current value as text.'
+            },
+            {
+                name: 'event.instance',
+                type: 'object',
+                description: 'Text editor instance.'
+            }
+        ]
+    },
+    {
+        name: 'load',
+        description: 'Callback to invoke when the quill modules are loaded.',
+        arguments: [
+            {
+                name: 'event.instance',
+                type: 'any',
+                description: 'Quill instance'
+            }
+        ]
+    }
+];
+
+const EditorSlots = [
+    {
+        name: 'toolbar',
+        description: "Custom content for the component's toolbar"
+    }
+];
+
+module.exports = {
+    editor: {
+        name: 'Editor',
+        description: 'Editor is rich text editor component based on Quill.',
+        props: EditorProps,
+        events: EditorEvents,
+        slots: EditorSlots
+    }
+};

apps/showcase/api-generator/components/fieldset.js

@@ -0,0 +1,78 @@
+const FieldsetProps = [
+    {
+        name: 'legend',
+        type: 'string',
+        default: 'null',
+        description: 'Header text of the fieldset.'
+    },
+    {
+        name: 'toggleable',
+        type: 'boolean',
+        default: 'null',
+        description: 'When specified, content can toggled by clicking the legend.'
+    },
+    {
+        name: 'collapsed',
+        type: 'boolean',
+        default: 'true',
+        description: 'Defines the default visibility state of the content.'
+    },
+    {
+        name: 'toggleButtonProps',
+        type: 'string',
+        default: 'null',
+        description: 'Used to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const FieldsetEvents = [
+    {
+        name: 'toggle',
+        description: 'Callback to invoke when a tab gets expanded or collapsed.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'boolean',
+                description: 'collapsed state as a boolean'
+            }
+        ]
+    }
+];
+
+const FieldsetSlots = [
+    {
+        name: 'legend',
+        description: 'Custom legend template.'
+    },
+    {
+        name: 'toggleicon',
+        description: 'Custom toggler icon template.'
+    }
+];
+
+module.exports = {
+    fieldset: {
+        name: 'Fieldset',
+        description: 'Fieldset is a grouping component with the optional content toggle feature.',
+        props: FieldsetProps,
+        events: FieldsetEvents,
+        slots: FieldsetSlots
+    }
+};

apps/showcase/api-generator/components/fileupload.js

@@ -0,0 +1,329 @@
+const FileUploadProps = [
+    {
+        name: 'name',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the request parameter to identify the files at backend.'
+    },
+    {
+        name: 'url',
+        type: 'string',
+        default: 'null',
+        description: 'Remote url to upload the files.'
+    },
+    {
+        name: 'mode',
+        type: 'string',
+        default: 'advanced',
+        description: 'Defines the UI of the component, possible values are "advanced" and "basic".'
+    },
+    {
+        name: 'multiple',
+        type: 'boolean',
+        default: 'false',
+        description: 'Used to select multiple files at once from file dialog.'
+    },
+    {
+        name: 'accept',
+        type: 'string',
+        default: 'null',
+        description: 'Pattern to restrict the allowed file types such as "image/*".'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disables the upload functionality.'
+    },
+    {
+        name: 'auto',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, upload begins automatically after selection is completed.'
+    },
+    {
+        name: 'maxFileSize',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum file size allowed in bytes.'
+    },
+    {
+        name: 'invalidFileSizeMessage',
+        type: 'string',
+        default: '"{0}: Invalid file size, file size should be smaller than {1}."',
+        description: 'Message of the invalid fize size.'
+    },
+    {
+        name: 'invalidFileLimitMessage',
+        type: 'string',
+        default: 'Maximum number of files exceeded, limit is {0} at most.',
+        description: 'Message to display when number of files to be uploaded exceeeds the limit.'
+    },
+    {
+        name: 'fileLimit',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of files that can be uploaded.'
+    },
+    {
+        name: 'withCredentials',
+        type: 'boolean',
+        default: 'false',
+        description: 'Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.'
+    },
+    {
+        name: 'previewWidth',
+        type: 'number',
+        default: '50',
+        description: 'Width of the image thumbnail in pixels.'
+    },
+    {
+        name: 'chooseLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Label of the choose button. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'uploadLabel',
+        type: 'string',
+        default: 'Upoad',
+        description: 'Label of the upload button. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'cancelLabel',
+        type: 'string',
+        default: 'Cancel',
+        description: 'Label of the cancel button. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'customUpload',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to use the default upload or a manual implementation defined in uploadHandler callback.'
+    },
+    {
+        name: 'showUploadButton',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show the upload button.'
+    },
+    {
+        name: 'showCancelButton',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to cancel the upload button.'
+    },
+    {
+        name: 'chooseIcon',
+        type: 'string',
+        default: 'pi pi-plus',
+        description: 'Icon of the choose button.'
+    },
+    {
+        name: 'uploadIcon',
+        type: 'string',
+        default: 'pi pi-upload',
+        description: 'Icon of the upload button.'
+    },
+    {
+        name: 'cancelIcon',
+        type: 'string',
+        default: 'pi pi-times',
+        description: 'Icon of the cancel button.'
+    },
+    {
+        name: 'style',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the component.'
+    },
+    {
+        name: 'class',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const FileUploadEvents = [
+    {
+        name: 'before-upload',
+        description: 'Callback to invoke before file upload begins to customize the request such as post parameters before the files.',
+        arguments: [
+            {
+                name: 'event.xhr',
+                type: 'object',
+                description: 'XmlHttpRequest instance.'
+            },
+            {
+                name: 'event.formData',
+                type: 'object',
+                description: 'FormData object.'
+            }
+        ]
+    },
+    {
+        name: 'before-send',
+        description: 'Callback to invoke before file send begins to customize the request such as adding headers.',
+        arguments: [
+            {
+                name: 'event.xhr',
+                type: 'object',
+                description: 'XmlHttpRequest instance.'
+            },
+            {
+                name: 'event.formData',
+                type: 'object',
+                description: 'FormData object.'
+            }
+        ]
+    },
+    {
+        name: 'upload',
+        description: 'Callback to invoke when file upload is complete.',
+        arguments: [
+            {
+                name: 'event.xhr',
+                type: 'object',
+                description: 'XmlHttpRequest instance.'
+            },
+            {
+                name: 'event.files',
+                type: 'object',
+                description: 'Uploaded files.'
+            }
+        ]
+    },
+    {
+        name: 'error',
+        description: 'Callback to invoke if file upload fails.',
+        arguments: [
+            {
+                name: 'event.xhr',
+                type: 'object',
+                description: 'XmlHttpRequest instance.'
+            },
+            {
+                name: 'event.files',
+                type: 'object',
+                description: 'Files that are not uploaded.'
+            }
+        ]
+    },
+    {
+        name: 'clear',
+        description: 'Callback to invoke when files in queue are removed without uploading.'
+    },
+    {
+        name: 'select',
+        description: 'Callback to invoke when file upload is complete.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original browser event.'
+            },
+            {
+                name: 'event.files',
+                type: 'object',
+                description: 'List of selected files.'
+            }
+        ]
+    },
+    {
+        name: 'progress',
+        description: 'Callback to invoke when files are selected.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original browser event.'
+            },
+            {
+                name: 'event.progress',
+                type: 'number',
+                description: 'Calculated progress value.'
+            }
+        ]
+    },
+    {
+        name: 'uploader',
+        description: 'Callback to invoke to implement a custom upload.',
+        arguments: [
+            {
+                name: 'event.files',
+                type: 'object',
+                description: 'List of selected files.'
+            }
+        ]
+    },
+    {
+        name: 'remove',
+        description: 'Callback to invoke when a singe file is removed from the list.',
+        arguments: [
+            {
+                name: 'event.file',
+                type: 'object',
+                description: 'Removed file.'
+            },
+            {
+                name: 'event.files',
+                type: 'object',
+                description: 'Remaining files to be uploaded.'
+            }
+        ]
+    }
+];
+
+const FileUploadSlots = [
+    {
+        name: 'header',
+        description: 'Custom header template.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content template.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no selected file'
+    },
+    {
+        name: 'chooseicon',
+        description: 'Custom choose icon template.'
+    },
+    {
+        name: 'uploadicon',
+        description: 'Custom upload icon template.'
+    },
+    {
+        name: 'cancelicon',
+        description: 'Custom cancel icon template.'
+    },
+    {
+        name: 'fileremoveicon',
+        description: 'Custom remove icon template for each file.'
+    }
+];
+
+module.exports = {
+    fileupload: {
+        name: 'FileUpload',
+        description: 'FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.',
+        props: FileUploadProps,
+        events: FileUploadEvents,
+        slots: FileUploadSlots
+    }
+};

apps/showcase/api-generator/components/galleria.js

@@ -0,0 +1,214 @@
+const GalleriaProps = [
+    {
+        name: 'id',
+        type: 'string',
+        default: 'null',
+        description: 'Unique identifier of the element.'
+    },
+    {
+        name: 'value',
+        type: 'array',
+        default: 'null',
+        description: 'An array of objects to display.'
+    },
+    {
+        name: 'activeIndex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the first item.'
+    },
+    {
+        name: 'fullscreen',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display the component on fullscreen.'
+    },
+    {
+        name: 'visible',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies the visibility of the mask on fullscreen mode.'
+    },
+    {
+        name: 'numVisible',
+        type: 'number',
+        default: '3',
+        description: 'Number of items per page.'
+    },
+    {
+        name: 'responsiveOptions',
+        type: 'any',
+        default: 'null',
+        description: 'An array of options for responsive design.'
+    },
+    {
+        name: 'showItemNavigators',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display navigation buttons in item section.'
+    },
+    {
+        name: 'showThumbnailNavigators',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display navigation buttons in thumbnail container.'
+    },
+    {
+        name: 'showItemNavigatorsOnHover',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display navigation buttons on item hover.'
+    },
+    {
+        name: 'changeItemOnIndicatorHover',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, item is changed on indicator hover.'
+    },
+    {
+        name: 'circular',
+        type: 'boolean',
+        default: 'false',
+        description: 'Defines if scrolling would be infinite.'
+    },
+    {
+        name: 'autoPlay',
+        type: 'boolean',
+        default: 'false',
+        description: 'Items are displayed with a slideshow in autoPlay mode.'
+    },
+    {
+        name: 'transitionInterval',
+        type: 'number',
+        default: '4000',
+        description: 'Time in milliseconds to scroll items.'
+    },
+    {
+        name: 'showThumbnails',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display thumbnail container.'
+    },
+    {
+        name: 'thumbnailsPosition',
+        type: 'string',
+        default: 'bottom',
+        description: 'Position of thumbnails. Valid values are "bottom", "top", "left" and "right".'
+    },
+    {
+        name: 'verticalThumbnailViewPortHeight',
+        type: 'string',
+        default: '300px',
+        description: 'Height of the viewport in vertical thumbnail.'
+    },
+    {
+        name: 'showIndicators',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display indicator container.'
+    },
+    {
+        name: 'showIndicatorsOnItem',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, indicator container is displayed on item container.'
+    },
+    {
+        name: 'indicatorsPosition',
+        type: 'string',
+        default: 'bottom',
+        description: 'Position of indicators. Valid values are "bottom", "top", "left" and "right".'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'ase zIndex value to use in layering.'
+    },
+    {
+        name: 'maskClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the mask on fullscreen mode.'
+    },
+    {
+        name: 'containerStyle',
+        type: 'any',
+        default: 'null',
+        description: "Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used."
+    },
+    {
+        name: 'containerClass',
+        type: 'any',
+        default: 'null',
+        description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const GalleriaSlots = [
+    {
+        name: 'header',
+        description: "Custom content for the component's header."
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'item',
+        description: 'Custom content for the item.'
+    },
+    {
+        name: 'caption',
+        description: 'Custom caption content.'
+    },
+    {
+        name: 'thumbnail',
+        description: 'Custom thumbnail content.'
+    },
+    {
+        name: 'indicator',
+        description: 'Custom indicator content.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'previousitemicon',
+        description: 'Custom navigator previous item icon template.'
+    },
+    {
+        name: 'nextitemicon',
+        description: 'Custom navigator next item icon template.'
+    },
+    {
+        name: 'previousthumbnailicon',
+        description: 'Custom thumbnail previous icon template.'
+    },
+    {
+        name: 'nextthumbnailicon',
+        description: 'Custom thumbnail next icon template.'
+    }
+];
+
+module.exports = {
+    galleria: {
+        name: 'Galleria',
+        description: 'Galleria is an advanced content gallery component.',
+        props: GalleriaProps,
+        slots: GalleriaSlots
+    }
+};

apps/showcase/api-generator/components/image.js

@@ -0,0 +1,98 @@
+const ImageProps = [
+    {
+        name: 'preview',
+        type: 'boolean',
+        default: 'false',
+        description: 'Controls the preview functionality.'
+    },
+    {
+        name: 'indicatorIcon',
+        type: 'string',
+        default: 'pi pi-eye',
+        description: 'Custom indicator icon.'
+    },
+    {
+        name: 'zoomInDisabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disable the zoom-in button'
+    },
+    {
+        name: 'zoomOutDisabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disable the zoom-out button'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ImageEvents = [
+    {
+        name: 'show',
+        description: 'Triggered when the preview overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Triggered when the preview overlay is hidden.'
+    },
+    {
+        name: 'error',
+        description: 'Triggered when an error occurs while loading an image file.'
+    }
+];
+
+const ImageSlots = [
+    {
+        name: 'indicator',
+        description: 'Custom content for the preview indicator.'
+    },
+    {
+        name: 'refresh',
+        description: 'Custom content for the component refresh.'
+    },
+    {
+        name: 'undo',
+        description: 'Custom content for the component undo.'
+    },
+    {
+        name: 'zoomout',
+        description: 'Custom content for the component zoomout.'
+    },
+    {
+        name: 'zoomin',
+        description: 'Custom content for the component zoomin.'
+    },
+    {
+        name: 'close',
+        description: 'Custom content for the component close.'
+    },
+    {
+        name: 'image',
+        description: 'Custom content for the component image.'
+    },
+    {
+        name: 'preview',
+        description: 'Custom content for the component preview.'
+    }
+];
+
+module.exports = {
+    image: {
+        name: 'Image',
+        description: 'Displays an image with preview and tranformation options.',
+        props: ImageProps,
+        events: ImageEvents,
+        slots: ImageSlots
+    }
+};

apps/showcase/api-generator/components/inlinemessage.js

@@ -0,0 +1,43 @@
+const InlineMessageProps = [
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'error',
+        description: 'Severity level of the message. Valid severities are "success", "info", "warn", "error", "secondary" and "contrast".'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const MessageSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    }
+];
+
+module.exports = {
+    inlinemessage: {
+        name: 'InlineMessage',
+        description: 'InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms',
+        'doc-url': 'message',
+        props: InlineMessageProps,
+        slots: MessageSlots
+    }
+};

apps/showcase/api-generator/components/inplace.js

@@ -0,0 +1,72 @@
+const InplaceProps = [
+    {
+        name: 'active',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the content is displayed or not.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InplaceEvents = [
+    {
+        name: 'open',
+        description: 'Callback to invoke when inplace is opened.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'close',
+        description: 'Callback to invoke when inplace is closed.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+const InplaceSlots = [
+    {
+        name: 'display',
+        description: 'Custom display template.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content template.'
+    }
+];
+
+module.exports = {
+    inplace: {
+        name: 'Inplace',
+        description: 'Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.',
+        props: InplaceProps,
+        events: InplaceEvents,
+        slots: InplaceSlots
+    }
+};

apps/showcase/api-generator/components/inputchips.js

@@ -0,0 +1,148 @@
+const InputChipsProps = [
+    {
+        name: 'modelValue',
+        type: 'array',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'max',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of entries allowed.'
+    },
+    {
+        name: 'separator',
+        type: 'string',
+        default: 'null',
+        description: 'Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","'
+    },
+    {
+        name: 'addOnBlur',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to add an item when the input loses focus.'
+    },
+    {
+        name: 'allowDuplicate',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to allow duplicate values or not.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text for the input.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the focus input to match a label defined for the chips.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InputChipsEvents = [
+    {
+        name: 'add',
+        description: 'Callback to invoke when a chip is added.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'value',
+                type: 'array',
+                description: 'Added item value'
+            }
+        ]
+    },
+    {
+        name: 'remove',
+        description: 'Callback to invoke when a chip is removed.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'value',
+                type: 'array',
+                description: 'Removed item value'
+            }
+        ]
+    }
+];
+
+const InputChipsSlots = [
+    {
+        name: 'chips',
+        description: 'Custom content for the chips'
+    },
+    {
+        name: 'removetokenicon',
+        description: 'Custom remove token icon template.'
+    }
+];
+
+module.exports = {
+    chips: {
+        name: 'InputChips',
+        description: 'InputChips is used to enter multiple values on an input field.',
+        props: InputChipsProps,
+        events: InputChipsEvents,
+        slots: InputChipsSlots
+    }
+};

apps/showcase/api-generator/components/inputmask.js

@@ -0,0 +1,64 @@
+const InputMaskProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'mask',
+        type: 'string',
+        default: 'null',
+        description: 'Mask pattern.'
+    },
+    {
+        name: 'slotChar',
+        type: 'string',
+        default: '-',
+        description: 'Placeholder character in mask, default is underscore.'
+    },
+    {
+        name: 'autoClear',
+        type: 'boolean',
+        default: 'true',
+        description: 'Clears the incomplete value on blur.'
+    },
+    {
+        name: 'unmask',
+        type: 'boolean',
+        default: 'false',
+        description: 'Defines if model sets the raw unmasked value to bound value or the formatted mask value.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    inputmask: {
+        name: 'InputMask',
+        description: 'InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.',
+        props: InputMaskProps
+    }
+};

apps/showcase/api-generator/components/inputnumber.js

@@ -0,0 +1,277 @@
+const InputNumberProps = [
+    {
+        name: 'modelValue',
+        type: 'number',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'format',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to format the value.'
+    },
+    {
+        name: 'showButtons',
+        type: 'boolean',
+        default: 'false',
+        description: 'Displays spinner buttons.'
+    },
+    {
+        name: 'buttonLayout',
+        type: 'string',
+        default: 'stacked',
+        description: 'Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".'
+    },
+    {
+        name: 'incrementButtonClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the increment button.'
+    },
+    {
+        name: 'decrementButtonClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the decrement button.'
+    },
+    {
+        name: 'incrementButtonIcon',
+        type: 'string',
+        default: 'pi pi-angle-up',
+        description: 'Style class of the increment button.'
+    },
+    {
+        name: 'decrementButtonIcon',
+        type: 'string',
+        default: 'pi pi-angle-down',
+        description: 'Style class of the decrement button.'
+    },
+    {
+        name: 'locale',
+        type: 'string',
+        default: 'null',
+        description: 'Locale to be used in formatting.'
+    },
+    {
+        name: 'localeMatcher',
+        type: 'string',
+        default: 'best fit',
+        description: 'The locale matching algorithm to use. Possible values are "lookup" and "best fit".'
+    },
+    {
+        name: 'mode',
+        type: 'string',
+        default: 'decimal',
+        description: 'Defines the behavior of the component, valid values are "decimal" and "currency".'
+    },
+    {
+        name: 'prefix',
+        type: 'string',
+        default: 'null',
+        description: 'Text to display before the value.'
+    },
+    {
+        name: 'suffix',
+        type: 'string',
+        default: 'decimal',
+        description: 'Text to display after the value.'
+    },
+    {
+        name: 'currency',
+        type: 'string',
+        default: 'null',
+        description:
+            'The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.'
+    },
+    {
+        name: 'currencyDisplay',
+        type: 'string',
+        default: 'symbol',
+        description:
+            'How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".'
+    },
+    {
+        name: 'useGrouping',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.'
+    },
+    {
+        name: 'minFractionDigits',
+        type: 'number',
+        default: 'null',
+        description:
+            "The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information)."
+    },
+    {
+        name: 'maxFractionDigits',
+        type: 'number',
+        default: 'null',
+        description:
+            "The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information)."
+    },
+    {
+        name: 'min',
+        type: 'number',
+        default: 'null',
+        description: 'Mininum boundary value.'
+    },
+    {
+        name: 'max',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum boundary value.'
+    },
+    {
+        name: 'step',
+        type: 'number',
+        default: '1',
+        description: 'Step factor to increment/decrement the value.'
+    },
+    {
+        name: 'allowEmpty',
+        type: 'boolean',
+        default: 'true',
+        description: 'Determines whether the input field is empty.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that an input field is read-only.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text for the input.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'incrementButtonProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLButtonElement to increment button inside the component.'
+    },
+    {
+        name: 'decrementButtonProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLButtonElement to decrement button inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InputNumberEvents = [
+    {
+        name: 'input',
+        description: 'Callback to invoke when the value is entered.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'number',
+                description: 'New value'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke on focus of input field.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Focus event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke on blur of input field.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Input value'
+            }
+        ]
+    }
+];
+
+const InputNumberSlots = [
+    {
+        name: 'incrementbuttonicon',
+        description: 'Custom increment button icon template.'
+    },
+    {
+        name: 'decrementbuttonicon',
+        description: 'Custom decrement button icon template.'
+    }
+];
+
+module.exports = {
+    inputnumber: {
+        name: 'InputNumber',
+        description: 'InputNumber is an input component to provide numerical input.',
+        props: InputNumberProps,
+        events: InputNumberEvents,
+        slots: InputNumberSlots
+    }
+};

apps/showcase/api-generator/components/inputotp.js

@@ -0,0 +1,80 @@
+const InputOtpProps = [
+    {
+        name: 'modelValue',
+        type: 'boolean',
+        default: 'null',
+        description: 'Specifies whether a inputOtp should be checked or not.'
+    },
+    {
+        name: 'trueValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in checked state.'
+    },
+    {
+        name: 'falseValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in unchecked state.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InputOtpEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on click.'
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.'
+    },
+    {
+        name: 'input',
+        description: 'Callback to invoke on value change.'
+    }
+];
+
+module.exports = {
+    inputotp: {
+        name: 'InputOtp',
+        description: 'InputOtp  is used to enter one time passwords.',
+        props: InputOtpProps,
+        events: InputOtpEvents
+    }
+};

apps/showcase/api-generator/components/inputswitch.js

@@ -0,0 +1,80 @@
+const InputSwitchProps = [
+    {
+        name: 'modelValue',
+        type: 'boolean',
+        default: 'null',
+        description: 'Specifies whether a inputswitch should be checked or not.'
+    },
+    {
+        name: 'trueValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in checked state.'
+    },
+    {
+        name: 'falseValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in unchecked state.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InputSwitchEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on click.'
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.'
+    },
+    {
+        name: 'input',
+        description: 'Callback to invoke on value change.'
+    }
+];
+
+module.exports = {
+    inputswitch: {
+        name: 'InputSwitch',
+        description: 'InputSwitch is used to select a boolean value.',
+        props: InputSwitchProps,
+        events: InputSwitchEvents
+    }
+};

apps/showcase/api-generator/components/inputtext.js

@@ -0,0 +1,46 @@
+const InputTextProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the component, valid values are "small" and "large".'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    inputtext: {
+        name: 'InputText',
+        description: 'InputText renders a text field to enter data.',
+        props: InputTextProps
+    }
+};

apps/showcase/api-generator/components/knob.js

@@ -0,0 +1,133 @@
+const KnobProps = [
+    {
+        name: 'modelValue',
+        type: 'number',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'size',
+        type: 'number',
+        default: '100',
+        description: 'Size of the component in pixels.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component value cannot be edited.'
+    },
+    {
+        name: 'step',
+        type: 'number',
+        default: 'null',
+        description: 'Step factor to increment/decrement the value.'
+    },
+    {
+        name: 'min',
+        type: 'number',
+        default: '0',
+        description: 'Mininum boundary value.'
+    },
+    {
+        name: 'max',
+        type: 'number',
+        default: '100',
+        description: 'Maximum boundary value.'
+    },
+    {
+        name: 'valueColor',
+        type: 'string',
+        default: 'null',
+        description: 'Background of the value.'
+    },
+    {
+        name: 'rangeColor',
+        type: 'string',
+        default: 'null',
+        description: 'Background color of the range.'
+    },
+    {
+        name: 'textColor',
+        type: 'string',
+        default: 'null',
+        description: 'Color of the value text.'
+    },
+    {
+        name: 'strokeWidth',
+        type: 'number',
+        default: '14',
+        description: 'Width of the knob stroke.'
+    },
+    {
+        name: 'showValue',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the show the value inside the knob.'
+    },
+    {
+        name: 'valueTemplate',
+        type: 'function | string',
+        default: '{value}',
+        description: 'Template of the value.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: 'null',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Establishes relationships between the component and label(s) where its value should be one or more element IDs.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const KnobEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke when the value changes.',
+        arguments: [
+            {
+                name: 'value',
+                type: 'number',
+                description: 'New value'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    knob: {
+        name: 'Knob',
+        description: 'Knob is a form component to define number inputs with a dial.',
+        props: KnobProps,
+        events: KnobEvents
+    }
+};

apps/showcase/api-generator/components/listbox.js

@@ -0,0 +1,301 @@
+const ListboxProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'options',
+        type: 'array',
+        default: 'null',
+        description: 'An array of selectitems to display as the available options.'
+    },
+    {
+        name: 'optionLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option.'
+    },
+    {
+        name: 'optionValue',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the value of an option, defaults to the option itself when not defined.'
+    },
+    {
+        name: 'optionDisabled',
+        type: 'boolean | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.'
+    },
+    {
+        name: 'optionGroupLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option group.'
+    },
+    {
+        name: 'optionGroupChildren',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function that refers to the children options of option group.'
+    },
+    {
+        name: 'listStyle',
+        type: 'string',
+        default: 'null',
+        description: 'Inline style of inner list element.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, disables the component.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'A property to uniquely identify an option.'
+    },
+    {
+        name: 'multiple',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, allows selecting multiple values.'
+    },
+    {
+        name: 'metaKeySelection',
+        type: 'boolean',
+        default: 'true',
+        description:
+            'Defines how multiple items can be selected, 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.'
+    },
+    {
+        name: 'filter',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, displays a filter input at header.'
+    },
+    {
+        name: 'filterPlaceholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text to show when filter input is empty.'
+    },
+    {
+        name: 'filterLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in filtering. The default locale is the host environment's current locale."
+    },
+    {
+        name: 'filterMatchMode',
+        type: 'string',
+        default: 'contains',
+        description: 'Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"'
+    },
+    {
+        name: 'filterFields',
+        type: 'array',
+        default: 'null',
+        description: 'Fields used when filtering the options, defaults to optionLabel.'
+    },
+    {
+        name: 'filterInputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the component.'
+    },
+    {
+        name: 'virtualScrollerOptions',
+        type: 'object',
+        default: 'null',
+        description: 'Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element.'
+    },
+    {
+        name: 'selectOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, the focused option is selected.'
+    },
+    {
+        name: 'filterMessage',
+        type: 'string',
+        default: '{0} results are available',
+        description: 'Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'selectionMessage',
+        type: 'string',
+        default: '{0} items selected',
+        description: 'Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySelectionMessage',
+        type: 'string',
+        default: 'No selected item',
+        description: 'Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyFilterMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ListboxEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'object',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke when component receives focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke when component loses focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'filter',
+        description: 'Callback to invoke on filter input.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Filter value'
+            }
+        ]
+    }
+];
+
+const ListboxSlots = [
+    {
+        name: 'option',
+        description: "Custom content for the item's option."
+    },
+    {
+        name: 'optiongroup',
+        description: "Custom content for the item's optiongroup."
+    },
+    {
+        name: 'header',
+        description: "Custom content for the component's header."
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'emptyfilter',
+        description: 'Custom content when there is no filtered data to display.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no data to display.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content for the virtual scroller.'
+    },
+    {
+        name: 'loader',
+        description: 'Custom content for the virtual scroller loader items.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    }
+];
+
+module.exports = {
+    listbox: {
+        name: 'Listbox',
+        description: 'Listbox is used to select one or more values from a list of items.',
+        props: ListboxProps,
+        events: ListboxEvents,
+        slots: ListboxSlots
+    }
+};

apps/showcase/api-generator/components/megamenu.js

@@ -0,0 +1,58 @@
+const MegaMenuProps = [
+    {
+        name: 'modelValue',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'orientation',
+        type: 'string',
+        default: 'horizontal',
+        description: 'Defines the orientation, valid values are horizontal and vertical.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const MegaMenuSlots = [
+    {
+        name: 'start',
+        description: 'Custom content before the content'
+    },
+    {
+        name: 'end',
+        description: 'Custom content after the content'
+    },
+    {
+        name: 'item',
+        description: 'Custom item template.'
+    },
+    {
+        name: 'submenuicon',
+        description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    }
+];
+
+module.exports = {
+    megamenu: {
+        name: 'MegaMenu',
+        description: 'MegaMenu is navigation component that displays submenus together.',
+        props: MegaMenuProps,
+        slots: MegaMenuSlots
+    }
+};

apps/showcase/api-generator/components/menu.js

@@ -0,0 +1,88 @@
+const MenuProps = [
+    {
+        name: 'modelValue',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'popup',
+        type: 'boolean',
+        default: 'false',
+        description: 'Defines if menu would displayed as a popup.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const MenuEvents = [
+    {
+        name: 'show',
+        description: 'Callback to invoke when the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when the overlay is hidden.'
+    }
+];
+
+const MenuSlots = [
+    {
+        name: 'start',
+        description: 'Custom start content.'
+    },
+    {
+        name: 'end',
+        description: 'Custom end content.'
+    },
+    {
+        name: 'item',
+        description: 'Custom item template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    },
+    {
+        name: 'submenuheader',
+        description: 'Custom submenu header template.'
+    }
+];
+
+module.exports = {
+    menu: {
+        name: 'Menu',
+        description: 'Menu is a navigation / command component that supports dynamic and static positioning.',
+        props: MenuProps,
+        events: MenuEvents,
+        slots: MenuSlots
+    }
+};

apps/showcase/api-generator/components/menubar.js

@@ -0,0 +1,56 @@
+const MenubarProps = [
+    {
+        name: 'modelValue',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const MenubarSlots = [
+    {
+        name: 'start',
+        description: 'Custom content before the content.'
+    },
+    {
+        name: 'end',
+        description: 'Custom content after the content.'
+    },
+    {
+        name: 'item',
+        description: 'Custom menuitem template.'
+    },
+    {
+        name: 'baricon',
+        description: 'Custom bar icon template.'
+    },
+    {
+        name: 'submenuicon',
+        description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    }
+];
+
+module.exports = {
+    menubar: {
+        name: 'Menubar',
+        description: 'Menubar is a horizontal menu component.',
+        props: MenubarProps,
+        slots: MenubarSlots
+    }
+};

apps/showcase/api-generator/components/message.js

@@ -0,0 +1,93 @@
+const MessageProps = [
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'info',
+        description: 'Severity level of the message. Valid severities are "success", "info", "warn", "error", "secondary" and "contrast".'
+    },
+    {
+        name: 'closable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the message can be closed manually using the close icon.'
+    },
+    {
+        name: 'sticky',
+        type: 'boolean',
+        default: 'null',
+        description: 'When enabled, message is not removed automatically.'
+    },
+    {
+        name: 'life',
+        type: 'number',
+        default: '300',
+        description: 'Delay in milliseconds to close the message automatically.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom icon for the message.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom close icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const MessageSlots = [
+    {
+        name: 'messageicon',
+        description: 'Custom message icon template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+const MessageEvents = [
+    {
+        name: 'close',
+        description: 'Callback to invoke when a message is closed.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'life-end',
+        description: "Callback to invoke when the message's timeout is over."
+    }
+];
+
+module.exports = {
+    message: {
+        name: 'Message',
+        description: 'Messages is used to display inline messages with various severities.',
+        props: MessageProps,
+        slots: MessageSlots,
+        events: MessageEvents
+    }
+};

apps/showcase/api-generator/components/multiselect.js

@@ -0,0 +1,500 @@
+const MultiSelectProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'options',
+        type: 'array',
+        default: 'null',
+        description: 'An array of selectitems to display as the available options.'
+    },
+    {
+        name: 'optionLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option.'
+    },
+    {
+        name: 'optionValue',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the value of an option, defaults to the option itself when not defined.'
+    },
+    {
+        name: 'optionDisabled',
+        type: 'boolean | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.'
+    },
+    {
+        name: 'optionGroupLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option group.'
+    },
+    {
+        name: 'optionGroupChildren',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function that refers to the children options of option group.'
+    },
+    {
+        name: 'scrollHeight',
+        type: 'string',
+        default: '200px',
+        description: 'Height of the viewport, a scrollbar is defined if height of list exceeds this value.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Label to display when there are no selections.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel.'
+    },
+    {
+        name: 'filterInputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.'
+    },
+    {
+        name: 'closeButtonProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLButtonElement to the close button inside the overlay panel.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'A property to uniquely identify an option.'
+    },
+    {
+        name: 'filter',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, displays a filter input at header.'
+    },
+    {
+        name: 'filterPlaceholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text to show when filter input is empty.'
+    },
+    {
+        name: 'filterLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in filtering. The default locale is the host environment's current locale."
+    },
+    {
+        name: 'filterMatchMode',
+        type: 'string',
+        default: 'contains',
+        description: 'Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"'
+    },
+    {
+        name: 'filterFields',
+        type: 'array',
+        default: 'null',
+        description: 'Fields used when filtering the options, defaults to optionLabel.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: "A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself."
+    },
+    {
+        name: 'display',
+        type: 'string',
+        default: 'comma',
+        description: 'Defines how the selected items are displayed, valid values are "comma" and "chip".'
+    },
+    {
+        name: 'selectedItemsLabel',
+        type: 'string',
+        default: '{0} items selected',
+        description: 'Label to display after exceeding max selected labels.'
+    },
+    {
+        name: 'maxSelectedLabels',
+        type: 'number',
+        default: 'null',
+        description: 'Decides how many selected item labels to show at most.'
+    },
+    {
+        name: 'selectionLimit',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of selectable items.'
+    },
+    {
+        name: 'showToggleAll',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to show the header checkbox to toggle the selection of all items at once.'
+    },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the multiselect is in loading state.'
+    },
+    {
+        name: 'loadingIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in loading state.'
+    },
+    {
+        name: 'checkboxIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the checkboxes.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the dropdown close button.'
+    },
+    {
+        name: 'dropdownIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in the dropdown.'
+    },
+    {
+        name: 'filterIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in filter input.'
+    },
+    {
+        name: 'removeTokenIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to display in chip remove action.'
+    },
+    {
+        name: 'selectAll',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether all data is selected.'
+    },
+    {
+        name: 'resetFilterOnHide',
+        type: 'boolean',
+        default: 'false',
+        description: 'Clears the filter value when hiding the dropdown.'
+    },
+    {
+        name: 'virtualScrollerOptions',
+        type: 'object',
+        default: 'null',
+        description: 'Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
+    },
+    {
+        name: 'autoFilterFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the filter element when the overlay panel is shown.'
+    },
+    {
+        name: 'highlightOnSelect',
+        type: 'boolean',
+        default: 'false',
+        description: 'Highlights automatically the first item.'
+    },
+    {
+        name: 'filterMessage',
+        type: 'string',
+        default: '{0} results are available',
+        description: 'Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'selectionMessage',
+        type: 'string',
+        default: '{0} items selected',
+        description: 'Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySelectionMessage',
+        type: 'string',
+        default: 'No selected item',
+        description: 'Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyFilterMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const MultiSelectEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'array',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke when component receives focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke when component loses focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'before-show',
+        description: 'Callback to invoke before the overlay is shown.'
+    },
+    {
+        name: 'before-hide',
+        description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when the overlay is hidden.'
+    },
+    {
+        name: 'filter',
+        description: 'Callback to invoke on filter input.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Filter value'
+            }
+        ]
+    },
+    {
+        name: 'selectall-change',
+        description: 'Callback to invoke when all data is selected.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.checked',
+                type: 'boolean',
+                description: 'Whether all data is selected.'
+            }
+        ]
+    }
+];
+
+const MultiSelectSlots = [
+    {
+        name: 'value',
+        description: 'Custom content for the item value.'
+    },
+    {
+        name: 'chip',
+        description: 'Custom content for the chip display.'
+    },
+    {
+        name: 'indicator',
+        description: 'Custom content for the dropdown indicator.'
+    },
+    {
+        name: 'header',
+        description: "Custom content for the component's header."
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'option',
+        description: "Custom content for the item's option."
+    },
+    {
+        name: 'optiongroup',
+        description: "Custom content for the item's optiongroup."
+    },
+    {
+        name: 'emptyfilter',
+        description: 'Custom content when there is no filtered data to display.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no data to display.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content for the virtual scroller.'
+    },
+    {
+        name: 'loader',
+        description: 'Custom content for the virtual scroller loader items.'
+    },
+    {
+        name: 'removetokenicon',
+        description: 'Custom remove token icon template.'
+    },
+    {
+        name: 'headercheckboxicon',
+        description: 'Custom header checkbox icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'itemcheckboxicon',
+        description: 'Custom item checkbox icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    }
+];
+
+module.exports = {
+    multiselect: {
+        name: 'MultiSelect',
+        description: 'MultiSelect is used to multiple values from a list of options.',
+        props: MultiSelectProps,
+        events: MultiSelectEvents,
+        slots: MultiSelectSlots
+    }
+};

apps/showcase/api-generator/components/orderlist.js

@@ -0,0 +1,154 @@
+const OrderListProps = [
+    {
+        name: 'modelValue',
+        type: 'array',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'selection',
+        type: 'any',
+        default: 'null',
+        description: 'Selected items in the list.'
+    },
+    {
+        name: 'metaKeySelection',
+        type: 'boolean',
+        default: 'true',
+        description:
+            '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.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the field that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'listStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the the list element.'
+    },
+    {
+        name: 'responsive',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the list optimizes layout based on screen size.'
+    },
+    {
+        name: 'breakpoint',
+        type: 'string',
+        default: '960px',
+        description: 'The breakpoint to define the maximum width boundary when responsiveness is enabled.'
+    },
+    {
+        name: 'striped',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to displays rows with alternating colors.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const OrderListEvents = [
+    {
+        name: 'reorder',
+        description: 'Callback to invoke when the list is reordered.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'array',
+                description: 'Ordered list'
+            },
+            {
+                name: 'event.direction',
+                type: 'string',
+                description: 'Direction of the change; "up", "down", "bottom", "top"'
+            }
+        ]
+    },
+    {
+        name: 'selection-change',
+        description: 'Callback to invoke when selection changes.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'array',
+                description: 'Ordered list'
+            }
+        ]
+    }
+];
+
+const OrderListSlots = [
+    {
+        name: 'header',
+        description: "Custom content for the component's header."
+    },
+    {
+        name: 'item',
+        description: 'Custom content for the item.'
+    },
+    {
+        name: 'controlsstart',
+        description: 'Custom content before the buttons.'
+    },
+    {
+        name: 'controlsend',
+        description: 'Custom content after the buttons.'
+    },
+    {
+        name: 'movetopicon',
+        description: 'Custom move top icon template.'
+    },
+    {
+        name: 'moveupicon',
+        description: 'Custom move up icon template.'
+    },
+    {
+        name: 'movedownicon',
+        description: 'Custom move down icon template.'
+    },
+    {
+        name: 'movebottomicon',
+        description: 'Custom move bottom icon template.'
+    }
+];
+
+module.exports = {
+    orderlist: {
+        name: 'OrderList',
+        description: 'OrderList is used to managed the order of a collection.',
+        props: OrderListProps,
+        events: OrderListEvents,
+        slots: OrderListSlots
+    }
+};

apps/showcase/api-generator/components/organizationchart.js

@@ -0,0 +1,108 @@
+const OrganizationChartProps = [
+    {
+        name: 'value',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'selectionKeys',
+        type: 'object',
+        default: 'null',
+        description: 'A map instance of key-value pairs to represented the selected nodes.'
+    },
+    {
+        name: 'selectionMode',
+        type: 'string',
+        default: 'null',
+        description: 'Type of the selection, valid values are "single" and "multiple".'
+    },
+    {
+        name: 'collapsible',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the nodes can be expanded or toggled.'
+    },
+    {
+        name: 'collapsedKeys',
+        type: 'object',
+        default: 'null',
+        description: 'A map instance of key-value pairs to represented the collapsed nodes.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const OrganizationChartEvents = [
+    {
+        name: 'node-select',
+        description: 'Callback to invoke when a node is selected.',
+        arguments: [
+            {
+                name: 'node',
+                type: 'object',
+                description: 'Node instance'
+            }
+        ]
+    },
+    {
+        name: 'node-unselect',
+        description: 'Callback to invoke when a node is unselected.',
+        arguments: [
+            {
+                name: 'node',
+                type: 'object',
+                description: 'Node instance'
+            }
+        ]
+    },
+    {
+        name: 'node-expand',
+        description: 'Callback to invoke when a node is expanded.',
+        arguments: [
+            {
+                name: 'node',
+                type: 'object',
+                description: 'Node instance'
+            }
+        ]
+    },
+    {
+        name: 'node-collapse',
+        description: 'Callback to invoke when a node is collapsed.',
+        arguments: [
+            {
+                name: 'node',
+                type: 'object',
+                description: 'Node instance'
+            }
+        ]
+    }
+];
+
+const OrganizationChartSlots = [
+    {
+        name: 'toggleicon',
+        description: 'Custom toggler icon template.'
+    }
+];
+
+module.exports = {
+    organizationchart: {
+        name: 'OrganizationChart',
+        description: 'OrganizationChart visualizes hierarchical organization data.',
+        props: OrganizationChartProps,
+        events: OrganizationChartEvents,
+        slots: OrganizationChartSlots
+    }
+};

apps/showcase/api-generator/components/overlaypanel.js

@@ -0,0 +1,100 @@
+const OverlayPanelProps = [
+    {
+        name: 'dismissable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Enables to hide the overlay when outside is clicked.'
+    },
+    {
+        name: 'showCloseIcon',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, displays a close icon at top right corner.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'ariaCloseLabel',
+        type: 'string',
+        default: 'close',
+        description: 'Aria label of the close icon.'
+    },
+    {
+        name: 'breakpoints',
+        type: 'object',
+        default: 'null',
+        description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom close icon for the message.'
+    },
+    {
+        name: 'closeOnEscape',
+        type: 'boolean',
+        default: 'true',
+        description: 'Specifies if pressing escape key should hide the dialog.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const OverlayPanelSlots = [
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    }
+];
+
+const OverlayPanelEvents = [
+    {
+        name: 'show',
+        description: 'Callback to invoke before the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    overlaypanel: {
+        name: 'OverlayPanel',
+        description: 'OverlayPanel is a container component positioned as connected to its target.',
+        props: OverlayPanelProps,
+        slots: OverlayPanelSlots,
+        events: OverlayPanelEvents
+    }
+};

apps/showcase/api-generator/components/paginator.js

@@ -0,0 +1,128 @@
+const PaginatorProps = [
+    {
+        name: 'totalRecords',
+        type: 'number',
+        default: '0',
+        description: 'Number of total records.'
+    },
+    {
+        name: 'rows',
+        type: 'number',
+        default: '0',
+        description: 'Data count to display per page.'
+    },
+    {
+        name: 'first',
+        type: 'number',
+        default: '0',
+        description: 'Zero-relative number of the first row to be displayed.'
+    },
+    {
+        name: 'pageLinkSize',
+        type: 'number',
+        default: '5',
+        description: 'Number of page links to display.'
+    },
+    {
+        name: 'rowsPerPageOptions',
+        type: 'array',
+        default: 'null',
+        description: 'Array of integer values to display inside rows per page dropdown.'
+    },
+    {
+        name: 'template',
+        type: 'string',
+        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+        description: 'Template of the paginator.'
+    },
+    {
+        name: 'currentPageReportTemplate',
+        type: 'string',
+        default: '({currentPage} of {totalPages})',
+        description: 'Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}'
+    },
+    {
+        name: 'alwaysShow',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show the paginator even there is only one page.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const PaginatorEvents = [
+    {
+        name: 'page',
+        description: 'Callback to invoke when page changes, the event object contains information about the new state.',
+        arguments: [
+            {
+                name: 'event.page',
+                type: 'number',
+                description: 'New page number'
+            },
+            {
+                name: 'event.first',
+                type: 'number',
+                description: 'Index of first record'
+            },
+            {
+                name: 'event.rows',
+                type: 'number',
+                description: 'Number of rows to display in new page'
+            },
+            {
+                name: 'event.pageCount',
+                type: 'number',
+                description: 'Total number of pages'
+            }
+        ]
+    }
+];
+
+const PaginatorSlots = [
+    {
+        name: 'start',
+        description: "Custom content for the component's left side."
+    },
+    {
+        name: 'end',
+        description: "Custom content for the component's right side."
+    },
+    {
+        name: 'firstpagelinkicon',
+        description: 'Custom first page link icon template.'
+    },
+    {
+        name: 'prevpagelinkicon',
+        description: 'Custom previous page link icon template.'
+    },
+    {
+        name: 'nextpagelinkicon',
+        description: 'Custom next page link icon template.'
+    },
+    {
+        name: 'lastpagelinkicon',
+        description: 'Custom last page link icon template.'
+    }
+];
+
+module.exports = {
+    paginator: {
+        name: 'Paginator',
+        description: 'Paginator is a generic component to display content in paged format.',
+        props: PaginatorProps,
+        events: PaginatorEvents,
+        slots: PaginatorSlots
+    }
+};

apps/showcase/api-generator/components/panel.js

@@ -0,0 +1,86 @@
+const PanelProps = [
+    {
+        name: 'header',
+        type: 'string',
+        default: 'null',
+        description: 'Header text of the panel.'
+    },
+    {
+        name: 'toggleable',
+        type: 'boolean',
+        default: 'null',
+        description: 'Defines if content of panel can be expanded and collapsed.'
+    },
+    {
+        name: 'collapsed',
+        type: 'boolean',
+        default: 'null',
+        description: 'Defines the initial state of panel content.'
+    },
+    {
+        name: 'toggleButtonProps',
+        type: 'string',
+        default: 'null',
+        description: 'Used to pass the custom value to read for the anchor inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const PanelEvents = [
+    {
+        name: 'toggle',
+        description: 'Callback to invoke when a tab toggle.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'boolean',
+                description: 'collapsed state as a boolean'
+            }
+        ]
+    }
+];
+
+const PanelSlots = [
+    {
+        name: 'header',
+        description: "Custom content for the component's header."
+    },
+    {
+        name: 'icons',
+        description: "Custom content for the header's icon."
+    },
+    {
+        name: 'toggleicon',
+        description: "Custom content for the component's toggler icon."
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer."
+    }
+];
+
+module.exports = {
+    panel: {
+        name: 'Panel',
+        description: 'Panel is a container with the optional content toggle feature.',
+        props: PanelProps,
+        events: PanelEvents,
+        slots: PanelSlots
+    }
+};

apps/showcase/api-generator/components/panelmenu.js

@@ -0,0 +1,54 @@
+const PanelMenuProps = [
+    {
+        name: 'model',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'expandedKeys',
+        type: 'object',
+        default: 'null',
+        description: 'A map of keys to represent the expansion state in controlled mode.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const PanelMenuSlots = [
+    {
+        name: 'item',
+        description: 'Custom item template.'
+    },
+    {
+        name: 'submenuicon',
+        description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'headericon',
+        description: 'Custom header icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    }
+];
+
+module.exports = {
+    panelmenu: {
+        name: 'PanelMenu',
+        description: 'PanelMenu is a hybrid of Accordion and Tree components',
+        props: PanelMenuProps,
+        slots: PanelMenuSlots
+    }
+};

apps/showcase/api-generator/components/password.js

@@ -0,0 +1,211 @@
+const PasswordProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'promptLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Text to prompt password entry. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'mediumRegex',
+        type: 'string',
+        default: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})',
+        description: 'Regex for a medium level password.'
+    },
+    {
+        name: 'strongRegex',
+        type: 'string',
+        default: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
+        description: 'Regex for a strong level password.'
+    },
+    {
+        name: 'weakLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Text for a weak password. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'mediumLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Text for a medium password. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'strongLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Text for a strong password. Defaults to PrimeVue Locale configuration.'
+    },
+    {
+        name: 'feedback',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show the strength indicator or not.'
+    },
+    {
+        name: 'toogleMask',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to show an icon to display the password as plain text.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'hideIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to hide displaying the password as plain text.'
+    },
+    {
+        name: 'showIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon to show displaying the password as plain text.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text for the input.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'required',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that an input field must be filled out before submitting the form.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying overlay panel element.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const PasswordSlots = [
+    {
+        name: 'header',
+        description: "Custom content for the component's header."
+    },
+    {
+        name: 'content',
+        description: 'Custom content for the component.'
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'hideicon',
+        description: 'Custom content for the hide icon.'
+    },
+    {
+        name: 'showicon',
+        description: 'Custom content for the show icon.'
+    }
+];
+
+const PasswordEmits = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    password: {
+        name: 'Password',
+        description: 'Password displays strength indicator for password fields.',
+        props: PasswordProps,
+        slots: PasswordSlots,
+        events: PasswordEmits
+    }
+};

apps/showcase/api-generator/components/picklist.js

@@ -0,0 +1,275 @@
+const PickListProps = [
+    {
+        name: 'modelValue',
+        type: 'array',
+        default: 'null',
+        description: 'Value of the component as a multidimensional array.'
+    },
+    {
+        name: 'selection',
+        type: 'array',
+        default: 'null',
+        description: 'Selected items in the list as a multidimensional array.'
+    },
+    {
+        name: 'metaKeySelection',
+        type: 'boolean',
+        default: 'true',
+        description:
+            '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.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the field that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'listStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the the list element.'
+    },
+    {
+        name: 'responsive',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the list optimizes layout based on screen size.'
+    },
+    {
+        name: 'breakpoint',
+        type: 'string',
+        default: '960px',
+        description: 'The breakpoint to define the maximum width boundary when responsiveness is enabled.'
+    },
+    {
+        name: 'striped',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to displays rows with alternating colors.'
+    },
+    {
+        name: 'showSourceControls',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show buttons of source list.'
+    },
+    {
+        name: 'showTargetControls',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to show buttons of target list.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const PickListEvents = [
+    {
+        name: 'reorder',
+        description: 'Callback to invoke when the list is reordered.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'array',
+                description: 'Ordered list'
+            },
+            {
+                name: 'event.direction',
+                type: 'string',
+                description: 'Direction of the change; "up", "down", "bottom", "top"'
+            },
+            {
+                name: 'event.listIndex',
+                type: 'number',
+                description: 'Index of the list that is ordered, 0 represents the source and 1 represents the target list.'
+            }
+        ]
+    },
+    {
+        name: 'move-to-target',
+        description: 'Callback to invoke when one or more items are moved to the target list.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.items',
+                type: 'object',
+                description: 'Moved items'
+            }
+        ]
+    },
+    {
+        name: 'move-all-to-target',
+        description: 'Callback to invoke when all items are moved to the target list.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.items',
+                type: 'object',
+                description: 'Moved items'
+            }
+        ]
+    },
+    {
+        name: 'move-to-source',
+        description: 'Callback to invoke when one or more items are moved to the source list.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.items',
+                type: 'object',
+                description: 'Moved items'
+            }
+        ]
+    },
+    {
+        name: 'move-all-to-source',
+        description: 'Callback to invoke when all items are moved to the source list.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.items',
+                type: 'object',
+                description: 'Moved items'
+            }
+        ]
+    },
+    {
+        name: 'selection-change',
+        description: 'Callback to invoke when one or more items are moved to the other list.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'array',
+                description: 'Selected items'
+            }
+        ]
+    }
+];
+
+const PickListSlots = [
+    {
+        name: 'header',
+        description: 'Custom header template.'
+    },
+    {
+        name: 'sourceheader',
+        description: "Custom content for the component's source header."
+    },
+    {
+        name: 'item',
+        description: 'Custom content for the item.'
+    },
+    {
+        name: 'targetheader',
+        description: "Custom content for the component's target header."
+    },
+    {
+        name: 'sourcecontrolsstart',
+        description: 'Custom content before source control buttons.'
+    },
+    {
+        name: 'sourcecontrolsend',
+        description: 'Custom content after source control buttons.'
+    },
+    {
+        name: 'movecontrolsstart',
+        description: 'Custom content before move buttons.'
+    },
+    {
+        name: 'movecontrolsend',
+        description: 'Custom content after move buttons.'
+    },
+    {
+        name: 'targetcontrolsstart',
+        description: 'Custom content before target control buttons.'
+    },
+    {
+        name: 'targetcontrolsend',
+        description: 'Custom content after target control buttons.'
+    },
+    {
+        name: 'moveupicon',
+        description: 'Custom move up icon template.'
+    },
+    {
+        name: 'movetopicon',
+        description: 'Custom move top icon template.'
+    },
+    {
+        name: 'movedownicon',
+        description: 'Custom move down icon template.'
+    },
+    {
+        name: 'movebottomicon',
+        description: 'Custom move bottom icon template.'
+    },
+    {
+        name: 'movetotargeticon',
+        description: 'Custom move to target icon template.'
+    },
+    {
+        name: 'movealltotargeticon',
+        description: 'Custom move all to target icon template.'
+    },
+    {
+        name: 'movetosourceicon',
+        description: 'Custom move to source icon template.'
+    },
+    {
+        name: 'movealltosourceicon',
+        description: 'Custom move all to source icon template.'
+    }
+];
+
+module.exports = {
+    picklist: {
+        name: 'PickList',
+        description: 'PickList is used to reorder items between different lists.',
+        props: PickListProps,
+        events: PickListEvents,
+        slots: PickListSlots
+    }
+};

apps/showcase/api-generator/components/popover.js

@@ -0,0 +1,100 @@
+const PopoverProps = [
+    {
+        name: 'dismissable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Enables to hide the overlay when outside is clicked.'
+    },
+    {
+        name: 'showCloseIcon',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, displays a close icon at top right corner.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'ariaCloseLabel',
+        type: 'string',
+        default: 'close',
+        description: 'Aria label of the close icon.'
+    },
+    {
+        name: 'breakpoints',
+        type: 'object',
+        default: 'null',
+        description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom close icon for the message.'
+    },
+    {
+        name: 'closeOnEscape',
+        type: 'boolean',
+        default: 'true',
+        description: 'Specifies if pressing escape key should hide the dialog.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const PopoverSlots = [
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    }
+];
+
+const PopoverEvents = [
+    {
+        name: 'show',
+        description: 'Callback to invoke before the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    overlaypanel: {
+        name: 'Popover',
+        description: 'Popover is a container component positioned as connected to its target.',
+        props: PopoverProps,
+        slots: PopoverSlots,
+        events: PopoverEvents
+    }
+};

apps/showcase/api-generator/components/portal.js

@@ -0,0 +1,28 @@
+const PortalProps = [
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'If disabled, the Portal feature is eliminated and the content is displayed directly.'
+    }
+];
+
+const PortalEvents = [];
+
+const PortalSlots = [];
+
+module.exports = {
+    portal: {
+        name: 'Portal',
+        description: 'Portal moves its container to a specific location based on target elements. Basically it uses <Teleport> in the background.',
+        props: PortalProps,
+        events: PortalEvents,
+        slots: PortalSlots
+    }
+};

apps/showcase/api-generator/components/progressbar.js

@@ -0,0 +1,40 @@
+const ProgressbarProps = [
+    {
+        name: 'value',
+        type: 'number',
+        default: 'null',
+        description: 'Current value of the progress.'
+    },
+    {
+        name: 'mode',
+        type: 'string',
+        default: 'determinate',
+        description: 'Defines the mode of the progress, valid values are "determinate" and "indeterminate".'
+    },
+    {
+        name: 'showValue',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display the progress bar value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    progressbar: {
+        name: 'ProgressBar',
+        description: 'ProgressBar is a process status indicator.',
+        props: ProgressbarProps
+    }
+};

apps/showcase/api-generator/components/progressspinner.js

@@ -0,0 +1,40 @@
+const ProgressSpinnerProps = [
+    {
+        name: 'strokeWidth',
+        type: 'string',
+        default: '2',
+        description: 'Width of the circle stroke.'
+    },
+    {
+        name: 'fill',
+        type: 'string',
+        default: 'null',
+        description: 'Color for the background of the circle.'
+    },
+    {
+        name: 'animationDuration',
+        type: 'string',
+        default: '2s',
+        description: 'Duration of the rotate animation.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    progressspinner: {
+        name: 'ProgressSpinner',
+        description: 'ProgressSpinner is a process status indicator',
+        props: ProgressSpinnerProps
+    }
+};

apps/showcase/api-generator/components/radiobutton.js

@@ -0,0 +1,120 @@
+const RadioButtonProps = [
+    {
+        name: 'value',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the checkbox.'
+    },
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value binding of the checkbox.'
+    },
+    {
+        name: 'name',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the input element.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Establishes relationships between the component and label(s) where its value should be one or more element IDs.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const RadioButtonEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on radio button click.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on radio button value change.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    radiobutton: {
+        name: 'RadioButton',
+        description: 'RadioButton is an extension to standard radio button element with theming.',
+        props: RadioButtonProps,
+        events: RadioButtonEvents
+    }
+};

apps/showcase/api-generator/components/rating.js

@@ -0,0 +1,90 @@
+const RatingProps = [
+    {
+        name: 'modelValue',
+        type: 'number',
+        default: 'null',
+        description: 'Value of the rating.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that component is read-only.'
+    },
+    {
+        name: 'stars',
+        type: 'number',
+        default: '5',
+        description: 'Number of stars.'
+    },
+    {
+        name: 'onIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon for the on state.'
+    },
+    {
+        name: 'offIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon for the off state.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const RatingSlots = [
+    {
+        name: 'onicon',
+        description: 'Custom on icon template.'
+    },
+    {
+        name: 'officon',
+        description: 'Custom off icon template.'
+    }
+];
+
+const RatingEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'number',
+                description: 'Selected option value'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    rating: {
+        name: 'rating',
+        description: 'Rating component is a star based selection input.',
+        props: RatingProps,
+        slots: RatingSlots,
+        events: RatingEvents
+    }
+};

apps/showcase/api-generator/components/ripple.js

@@ -0,0 +1,7 @@
+module.exports = {
+    ripple: {
+        name: 'Ripple',
+        description: 'Ripple directive adds ripple effect to the host element.',
+        'vue-modifiers': []
+    }
+};

apps/showcase/api-generator/components/row.js

@@ -0,0 +1,23 @@
+const RowProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    }
+];
+
+module.exports = {
+    row: {
+        name: 'Row',
+        description: 'DataTable can be grouped by defining a Row component with nested columns',
+        'doc-url': 'datatable',
+        props: RowProps
+    }
+};

apps/showcase/api-generator/components/scrollpanel.js

@@ -0,0 +1,28 @@
+const ScrollPanelProps = [
+    {
+        name: 'step',
+        type: 'number',
+        default: '5',
+        description: 'Step factor to scroll the content while pressing the arrow keys.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    scrollpanel: {
+        name: 'ScrollPanel',
+        description: 'ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.',
+        props: ScrollPanelProps
+    }
+};

apps/showcase/api-generator/components/scrolltop.js

@@ -0,0 +1,54 @@
+const ScrollTopProps = [
+    {
+        name: 'target',
+        type: 'string',
+        default: 'window',
+        description: 'Target of the ScrollTop, valid values are "window" and "parent".'
+    },
+    {
+        name: 'threshold',
+        type: 'number',
+        default: '400',
+        description: 'Defines the threshold value of the vertical scroll position of the target to toggle the visibility.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Icon to display.'
+    },
+    {
+        name: 'behavior',
+        type: 'string',
+        default: 'smooth',
+        description: 'Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ScrollTopSlots = [
+    {
+        name: 'icon',
+        description: 'Custom scrolltop icon template.'
+    }
+];
+
+module.exports = {
+    scrolltop: {
+        name: 'ScrollTop',
+        description: 'ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.',
+        props: ScrollTopProps,
+        slots: ScrollTopSlots
+    }
+};

apps/showcase/api-generator/components/select.js

@@ -0,0 +1,432 @@
+const SelectProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'options',
+        type: 'array',
+        default: 'null',
+        description: 'An array of selectitems to display as the available options.'
+    },
+    {
+        name: 'optionLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option.'
+    },
+    {
+        name: 'optionValue',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the value of an option, defaults to the option itself when not defined.'
+    },
+    {
+        name: 'optionDisabled',
+        type: 'boolean',
+        default: 'null',
+        description: 'Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.'
+    },
+    {
+        name: 'optionGroupLabel',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option group.'
+    },
+    {
+        name: 'optionGroupChildren',
+        type: 'string | function',
+        default: 'null',
+        description: 'Property name or getter function that refers to the children options of option group.'
+    },
+    {
+        name: 'scrollHeight',
+        type: 'string',
+        default: '200px',
+        description: 'Height of the viewport, a scrollbar is defined if height of list exceeds this value.'
+    },
+    {
+        name: 'filter',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, displays a filter input at header.'
+    },
+    {
+        name: 'filterPlaceholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text to show when filter input is empty.'
+    },
+    {
+        name: 'filterLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in filtering. The default locale is the host environment's current locale."
+    },
+    {
+        name: 'filterMatchMode',
+        type: 'string',
+        default: 'contains',
+        description: 'Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"'
+    },
+    {
+        name: 'filterFields',
+        type: 'array',
+        default: 'null',
+        description: 'Fields used when filtering the options, defaults to optionLabel.'
+    },
+    {
+        name: 'editable',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, custom value instead of predefined options can be entered using the editable input field.'
+    },
+    {
+        name: 'placeholder',
+        type: 'string',
+        default: 'null',
+        description: 'Default text to display when no option is selected.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'A property to uniquely identify an option.'
+    },
+    {
+        name: 'showClear',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, a clear icon is displayed to clear the value.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'panelStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the overlay panel.'
+    },
+    {
+        name: 'panelClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the overlay panel.'
+    },
+    {
+        name: 'panelProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'filterInputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the component.'
+    },
+    {
+        name: 'clearIconProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLElement to the clear icon inside the component.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: "A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself."
+    },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the multiselect is in loading state.'
+    },
+    {
+        name: 'loadingIcon',
+        type: 'string',
+        default: 'pi pi-spinner pi-spin',
+        description: 'Icon to display in loading state.'
+    },
+    {
+        name: 'resetFilterOnHide',
+        type: 'boolean',
+        default: 'false',
+        description: 'Clears the filter value when hiding the dropdown.'
+    },
+    {
+        name: 'resetFilterOnClear',
+        type: 'boolean',
+        default: 'false',
+        description: 'Clears the filter value when clicking on the clear icon.'
+    },
+    {
+        name: 'virtualScrollerOptions',
+        type: 'object',
+        default: 'null',
+        description: 'Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.'
+    },
+    {
+        name: 'autoOptionFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
+    },
+    {
+        name: 'autoFilterFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to focus on the filter element when the overlay panel is shown.'
+    },
+    {
+        name: 'selectOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, the focused option is selected.'
+    },
+    {
+        name: 'filterMessage',
+        type: 'string',
+        default: '{0} results are available',
+        description: 'Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'selectionMessage',
+        type: 'string',
+        default: '{0} items selected',
+        description: 'Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptySelectionMessage',
+        type: 'string',
+        default: 'No selected item',
+        description: 'Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyFilterMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'emptyMessage',
+        type: 'string',
+        default: 'No results found',
+        description: 'Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const SelectEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke when component receives focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke when component loses focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'before-show',
+        description: 'Callback to invoke before the overlay is shown.'
+    },
+    {
+        name: 'before-hide',
+        description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when the overlay is shown.'
+    },
+    {
+        name: 'hide',
+        description: 'Callback to invoke when the overlay is hidden.'
+    },
+    {
+        name: 'filter',
+        description: 'Callback to invoke when the overlay is shown.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'string',
+                description: 'Filter value'
+            }
+        ]
+    }
+];
+
+const SelectSlots = [
+    {
+        name: 'value',
+        description: "Custom content for the item's value"
+    },
+    {
+        name: 'indicator',
+        description: 'Custom content for the dropdown indicator'
+    },
+    {
+        name: 'header',
+        description: "Custom content for the component's header"
+    },
+    {
+        name: 'footer',
+        description: "Custom content for the component's footer"
+    },
+    {
+        name: 'option',
+        description: "Custom content for the item's option"
+    },
+    {
+        name: 'optiongroup',
+        description: "Custom content for the item's optiongroup"
+    },
+    {
+        name: 'emptyfilter',
+        description: 'Custom content when there is no filtered data to display'
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no data to display'
+    },
+    {
+        name: 'content',
+        description: 'Custom content for the virtual scroller'
+    },
+    {
+        name: 'loader',
+        description: 'Custom content for the virtual scroller loader items'
+    },
+    {
+        name: 'clearicon',
+        description: 'Custom clear icon template.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    }
+];
+
+module.exports = {
+    dropdown: {
+        name: 'Select',
+        description: 'Select is used to select an item from a list of options.',
+        props: SelectProps,
+        events: SelectEvents,
+        slots: SelectSlots
+    }
+};

apps/showcase/api-generator/components/selectbutton.js

@@ -0,0 +1,144 @@
+const SelectButtonProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'options',
+        type: 'array',
+        default: 'null',
+        description: 'An array of selectitems to display as the available options.'
+    },
+    {
+        name: 'optionLabel',
+        type: 'string',
+        default: 'null',
+        description: 'Property name or getter function to use as the label of an option.'
+    },
+    {
+        name: 'optionValue',
+        type: 'string',
+        default: 'null',
+        description: 'Property name or getter function to use as the value of an option, defaults to the option itself when not defined.'
+    },
+    {
+        name: 'optionDisabled',
+        type: 'boolean',
+        default: 'null',
+        description: 'Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.'
+    },
+    {
+        name: 'multiple',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, allows selecting multiple values.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'A property to uniquely identify an option.'
+    },
+    {
+        name: 'unselectable',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether selection can not be cleared.'
+    },
+    {
+        name: 'allowEmpty',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether selection can be cleared.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const SelectButtonEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'any',
+                description: 'Single value or an array of values that are selected.'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke on focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke on blur.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+const SelectButtonSlots = [
+    {
+        name: 'option',
+        description: "Custom content for the item's option"
+    }
+];
+
+module.exports = {
+    selectbutton: {
+        name: 'SelectButton',
+        description: 'SelectButton is a form component to choose a value from a list of options using button elements.',
+        props: SelectButtonProps,
+        events: SelectButtonEvents,
+        slots: SelectButtonSlots
+    }
+};

apps/showcase/api-generator/components/sidebar.js

@@ -0,0 +1,114 @@
+const SidebarProps = [
+    {
+        name: 'visible',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies the visibility of the dialog.'
+    },
+    {
+        name: 'position',
+        type: 'string',
+        default: 'left',
+        description: 'Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'dismissable',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether clicking outside closes the panel.'
+    },
+    {
+        name: 'showCloseIcon',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display a close icon inside the panel.'
+    },
+    {
+        name: 'modal',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to a modal layer behind the sidebar.'
+    },
+    {
+        name: 'ariaCloseLabel',
+        type: 'string',
+        default: 'close',
+        description: 'Aria label of the close icon.'
+    },
+    {
+        name: 'blockScroll',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether background scroll should be blocked when sidebar is visible.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Icon to display in the sidebar close button.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const SidebarEvents = [
+    {
+        name: 'hide',
+        description: 'Callback to invoke when sidebar gets hidden.'
+    },
+    {
+        name: 'show',
+        description: 'Callback to invoke when sidebar gets shown.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    }
+];
+
+const SidebarSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    sidebar: {
+        name: 'Sidebar',
+        description: 'Sidebar is a panel component displayed as an overlay at the edges of the screen.',
+        props: SidebarProps,
+        events: SidebarEvents,
+        slots: SidebarSlots
+    }
+};

apps/showcase/api-generator/components/skeleton.js

@@ -0,0 +1,58 @@
+const SkeletonProps = [
+    {
+        name: 'shape',
+        type: 'string',
+        default: 'rectangle',
+        description: 'Shape of the element, options are "rectangle" and "circle".'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Size of the Circle or Square.'
+    },
+    {
+        name: 'width',
+        type: 'string',
+        default: '100%',
+        description: 'Width of the element.'
+    },
+    {
+        name: 'height',
+        type: 'string',
+        default: '1rem',
+        description: 'Height of the element.'
+    },
+    {
+        name: 'borderRadius',
+        type: 'string',
+        default: 'null',
+        description: 'Border radius of the element, defaults to value from theme.'
+    },
+    {
+        name: 'animation',
+        type: 'string',
+        default: 'wave',
+        description: 'Type of the animation, valid options are "wave" and "none".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    skeleton: {
+        name: 'Skeleton',
+        description: 'Skeleton is a placeholder to display instead of the actual content.',
+        props: SkeletonProps
+    }
+};

apps/showcase/api-generator/components/slider.js

@@ -0,0 +1,113 @@
+const SliderProps = [
+    {
+        name: 'modelValue',
+        type: 'number',
+        default: '0',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'min',
+        type: 'number',
+        default: '0',
+        description: 'Mininum boundary value.'
+    },
+    {
+        name: 'max',
+        type: 'number',
+        default: '100',
+        description: 'Maximum boundary value.'
+    },
+    {
+        name: 'orientation',
+        type: 'string',
+        default: 'horizontal',
+        description: 'Orientation of the slider, valid values are horizontal and vertical.'
+    },
+    {
+        name: 'step',
+        type: 'number',
+        default: '1',
+        description: 'Step factor to increment/decrement the value.'
+    },
+    {
+        name: 'range',
+        type: 'boolean',
+        default: 'false',
+        description: 'When speficed, allows two boundary values to be picked.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should be disabled.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: 'null',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Establishes relationships between the component and label(s) where its value should be one or more element IDs.'
+    },
+    {
+        name: 'aria-label',
+        type: 'string',
+        default: 'null',
+        description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const SliderEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'value',
+                type: 'number',
+                description: 'Selected option value'
+            }
+        ]
+    },
+    {
+        name: 'slideend',
+        description: 'Callback to invoke when slide ends.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.value',
+                type: 'number',
+                description: 'New value.'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    slider: {
+        name: 'Slider',
+        description: 'Slider is an input component to provide a numerical input',
+        props: SliderProps,
+        events: SliderEvents
+    }
+};

apps/showcase/api-generator/components/speeddial.js

@@ -0,0 +1,169 @@
+const SpeedDialProps = [
+    {
+        name: 'model',
+        type: 'object',
+        default: 'any',
+        description: 'MenuModel instance to define the action items.'
+    },
+    {
+        name: 'visible',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies the visibility of the overlay.'
+    },
+    {
+        name: 'direction',
+        type: 'string',
+        default: 'up',
+        description: "Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'"
+    },
+    {
+        name: 'transitionDelay',
+        type: 'number',
+        default: '30',
+        description: 'Transition delay step for each action item.'
+    },
+    {
+        name: 'type',
+        type: 'string',
+        default: 'linear',
+        description: 'Specifies the opening type of actions.'
+    },
+    {
+        name: 'radius',
+        type: 'number',
+        default: '0',
+        description: 'Radius for *circle types.'
+    },
+    {
+        name: 'mask',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to show a mask element behind the speeddial'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the component is disabled.'
+    },
+    {
+        name: 'hideOnClickOutside',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the actions close when clicked outside.'
+    },
+    {
+        name: 'buttonClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the button element.'
+    },
+    {
+        name: 'maskClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the mask element.'
+    },
+    {
+        name: 'maskStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the mask element.'
+    },
+    {
+        name: 'showIcon',
+        type: 'string',
+        default: 'pi pi-plus',
+        description: 'Show icon of the button element.'
+    },
+    {
+        name: 'hideIcon',
+        type: 'string',
+        default: 'null',
+        description: '	Hide icon of the button element.'
+    },
+    {
+        name: 'rotateAnimation',
+        type: 'boolean',
+        default: 'true',
+        description: 'Defined to rotate showIcon when hideIcon is not present.'
+    },
+    {
+        name: 'class',
+        type: 'object',
+        default: 'null',
+        description: 'Style class of the element.'
+    },
+    {
+        name: 'style',
+        type: 'any',
+        default: 'null',
+        description: 'Style class of the element.'
+    },
+    {
+        name: 'tooltipOptions',
+        type: 'object',
+        default: 'null',
+        description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const SpeedDialEvents = [
+    {
+        name: 'click',
+        description: 'Fired when the button element clicked.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'show',
+        description: 'Fired when the actions are visible.'
+    },
+    {
+        name: 'hide',
+        description: 'Fired when the actions are hidden.'
+    }
+];
+
+const SpeedDialSlots = [
+    {
+        name: 'item',
+        description: 'Custom content for the item'
+    },
+    {
+        name: 'button',
+        description: 'Custom button template.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    }
+];
+
+module.exports = {
+    speeddial: {
+        name: 'SpeedDial',
+        description: 'When pressed, a floating action button can display multiple primary actions that can be performed on a page.',
+        props: SpeedDialProps,
+        events: SpeedDialEvents,
+        slots: SpeedDialSlots
+    }
+};

apps/showcase/api-generator/components/splitbutton.js

@@ -0,0 +1,155 @@
+const SplitButtonProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Text of the button.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the icon.'
+    },
+    {
+        name: 'model',
+        type: 'object',
+        default: 'null',
+        description: 'MenuModel instance to define the overlay items.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'class',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the component.'
+    },
+    {
+        name: 'style',
+        type: 'any',
+        default: 'null',
+        description: 'Inline of the component.'
+    },
+    {
+        name: 'menuButtonIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the menu button icon.'
+    },
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warn", "help", "danger", "contrast".'
+    },
+    {
+        name: 'raised',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a shadow to indicate elevation.'
+    },
+    {
+        name: 'rounded',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a circular border radius to the button.'
+    },
+    {
+        name: 'text',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a textual class to the button without a background initially.'
+    },
+    {
+        name: 'outlined',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a border class without a background initially.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the button, valid values are "small" and "large".'
+    },
+    {
+        name: 'plain',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a plain textual class to the button without a background initially.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const SplitButtonEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke when main button is clicked.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+const SplitButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'menubuttonicon',
+        description: 'Custom menu button icon template.'
+    },
+    {
+        name: 'menuitemicon',
+        description: 'Custom menu item icon template.'
+    }
+];
+
+module.exports = {
+    splitbutton: {
+        name: 'SplitButton',
+        description: 'SplitButton groups a set of commands in an overlay with a default command.',
+        props: SplitButtonProps,
+        events: SplitButtonEvents,
+        slots: SplitButtonSlots
+    }
+};

apps/showcase/api-generator/components/splitter.js

@@ -0,0 +1,72 @@
+const SplitterProps = [
+    {
+        name: 'layout',
+        type: 'string',
+        default: 'horizontal',
+        description: 'Orientation of the panels, valid values are "horizontal" and "vertical".'
+    },
+    {
+        name: 'gutterSize',
+        type: 'number',
+        default: '4',
+        description: 'Size of the divider in pixels.'
+    },
+    {
+        name: 'stateKey',
+        type: 'string',
+        default: 'null',
+        description: 'Storage identifier of a stateful Splitter.'
+    },
+    {
+        name: 'stateStorage',
+        type: 'string',
+        default: 'storage',
+        description: 'Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.'
+    },
+    {
+        name: 'step',
+        type: 'number',
+        default: '5',
+        description: 'Step factor to increment/decrement the size of the panels while pressing the arrow keys.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const SplitterEvents = [
+    {
+        name: 'resizened',
+        description: 'Callback to invoke when resize ends.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            },
+            {
+                name: 'event.sizes',
+                type: 'array',
+                description: 'Sizes of the panels as an array'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    splitter: {
+        name: 'Splitter',
+        description: 'Splitter is utilized to separate and resize panels',
+        props: SplitterProps,
+        events: SplitterEvents
+    }
+};

apps/showcase/api-generator/components/splitterpanel.js

@@ -0,0 +1,29 @@
+const SplitterPanelProps = [
+    {
+        name: 'size',
+        type: 'number',
+        default: 'null',
+        description: 'Size of the element relative to 100%.'
+    },
+    {
+        name: 'minSize',
+        type: 'number',
+        default: 'null',
+        description: 'Minimum size of the element relative to 100%.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    }
+];
+
+module.exports = {
+    splitterpanel: {
+        name: 'SplitterPanel',
+        description: 'Splitter requires two SplitterPanel components to wrap.',
+        'doc-url': 'splitter',
+        props: SplitterPanelProps
+    }
+};

apps/showcase/api-generator/components/steps.js

@@ -0,0 +1,54 @@
+const StepsProps = [
+    {
+        name: 'id',
+        type: 'string',
+        default: 'null',
+        description: 'Unique identifier of the element.'
+    },
+    {
+        name: 'model',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'activeStep',
+        type: 'number',
+        default: '0',
+        description: 'Active step index of menuitem.'
+    },
+    {
+        name: 'readonly',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether the items are clickable or not.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const StepsSlots = [
+    {
+        name: 'item',
+        description: 'Template of a menuitem.'
+    }
+];
+
+module.exports = {
+    steps: {
+        name: 'steps',
+        description: 'Steps components is an indicator for the steps in a wizard workflow.',
+        props: StepsProps,
+        slots: StepsSlots
+    }
+};

apps/showcase/api-generator/components/styleclass.js

@@ -0,0 +1,7 @@
+module.exports = {
+    styleclass: {
+        name: 'StyleClass',
+        description: 'StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.',
+        'vue-modifiers': []
+    }
+};

apps/showcase/api-generator/components/tabmenu.js

@@ -0,0 +1,66 @@
+const TabMenuProps = [
+    {
+        name: 'model',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'activeIndex',
+        type: 'number',
+        default: '0',
+        description: 'Active index of menuitem.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const TabMenuEvents = [
+    {
+        name: 'tab-change',
+        description: 'Callback to invoke when an active tab is changed.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.index',
+                type: 'number',
+                description: 'Index of the selected tab'
+            }
+        ]
+    }
+];
+
+const TabMenuSlots = [
+    {
+        name: 'item',
+        description: 'Template of a menuitem.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    }
+];
+
+module.exports = {
+    tabmenu: {
+        name: 'TabMenu',
+        description: 'TabMenu is a navigation component that displays items as tab headers.',
+        props: TabMenuProps,
+        events: TabMenuEvents,
+        slots: TabMenuSlots
+    }
+};

apps/showcase/api-generator/components/tabpanel.js

@@ -0,0 +1,107 @@
+const TabPanelProps = [
+    {
+        name: 'header',
+        type: 'string',
+        default: 'null',
+        description: 'Orientation of tab headers.'
+    },
+    {
+        name: 'headerStyle',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the tab header.'
+    },
+    {
+        name: 'headerClass',
+        type: 'any',
+        default: 'null',
+        description: 'Style class of the tab header.'
+    },
+    {
+        name: 'headerProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLLiElement to the tab header.'
+    },
+    {
+        name: 'headerActionProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
+    },
+    {
+        name: 'contentStyle',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the tab content.'
+    },
+    {
+        name: 'contentClass',
+        type: 'any',
+        default: 'null',
+        description: 'Style class of the tab content.'
+    },
+    {
+        name: 'contentProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLDivElement to the tab content.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'null',
+        description: 'Whether the tab is disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const TabPanelEvents = [
+    {
+        name: 'tab-change',
+        description: 'Callback to invoke when an active tab is changed.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.index',
+                type: 'number',
+                description: 'Index of the selected tab'
+            }
+        ]
+    },
+    {
+        name: 'tab-click',
+        description: 'Callback to invoke when an active tab is clicked.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.index',
+                type: 'number',
+                description: 'Index of the selected tab'
+            }
+        ]
+    }
+];
+
+module.exports = {
+    tabpanel: {
+        name: 'TabPanel',
+        description: 'TabView element consists of one or more TabPanel elements.',
+        'doc-url': 'tabview',
+        props: TabPanelProps,
+        events: TabPanelEvents
+    }
+};

apps/showcase/api-generator/components/tabview.js

@@ -0,0 +1,128 @@
+const TabViewProps = [
+    {
+        name: 'activeIndex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the active tab.'
+    },
+    {
+        name: 'lazy',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.'
+    },
+    {
+        name: 'scrollable',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled displays buttons at each side of the tab headers to scroll the tab list.'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: '0',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'selectOnFocus',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, the focused tab is activated.'
+    },
+    {
+        name: 'prevButtonProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLButtonElement to the previous button.'
+    },
+    {
+        name: 'nextButtonProps',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLButtonElement to the next button.'
+    },
+    {
+        name: 'prevIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Prev icon of the scrollable tabview.'
+    },
+    {
+        name: 'nextIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Next icon of the scrollable tabview.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const TabViewEvents = [
+    {
+        name: 'tab-change',
+        description: 'Callback to invoke when an active tab is changed.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'index',
+                type: 'number',
+                description: 'Index of the selected tab'
+            }
+        ]
+    },
+    {
+        name: 'tab-click',
+        description: 'Callback to invoke when an active tab is clicked.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'index',
+                type: 'number',
+                description: 'Index of the clicked tab'
+            }
+        ]
+    }
+];
+
+const TabViewSlots = [
+    {
+        name: 'default',
+        description: 'Default slot to detect TabPanel components.'
+    },
+    {
+        name: 'previcon',
+        description: 'Previous button icon template for the scrollable component.'
+    },
+    {
+        name: 'nexticon',
+        description: 'Next button icon template for the scrollable component.'
+    }
+];
+
+module.exports = {
+    tabview: {
+        name: 'TabView',
+        description: 'TabView is a container component to group content with tabs.',
+        props: TabViewProps,
+        event: TabViewEvents,
+        slots: TabViewSlots
+    }
+};

apps/showcase/api-generator/components/tag.js

@@ -0,0 +1,54 @@
+const TagProps = [
+    {
+        name: 'value',
+        type: 'any',
+        default: 'null',
+        description: 'Value to display inside the tag.'
+    },
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'null',
+        description: 'Severity type of the tag. Valid severities are "secondary", "success", "info", "warn", "danger" and "contrast".'
+    },
+    {
+        name: 'rounded',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the corners of the tag are rounded.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon of the tag to display next to the value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const TagSlots = [
+    {
+        name: 'icon',
+        description: 'custom icon template.'
+    }
+];
+
+module.exports = {
+    tag: {
+        name: 'Tag',
+        description: 'Tag component is used to categorize content.',
+        props: TagProps,
+        slots: TagSlots
+    }
+};

apps/showcase/api-generator/components/terminal.js

@@ -0,0 +1,34 @@
+const TerminalProps = [
+    {
+        name: 'welcomeMessage',
+        type: 'string',
+        default: 'null',
+        description: 'Initial text to display on terminal.'
+    },
+    {
+        name: 'prompt',
+        type: 'string',
+        default: 'null',
+        description: 'Prompt text for each command.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    terminal: {
+        name: 'Terminal',
+        description: 'Terminal is a text based user interface.',
+        props: TerminalProps
+    }
+};

apps/showcase/api-generator/components/textarea.js

@@ -0,0 +1,46 @@
+const TextareaProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'autoResize',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, height of textarea changes as being typed.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'variant',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the input variant of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+module.exports = {
+    textarea: {
+        name: 'Textarea',
+        description: 'Textarea is a multi-line text input element.',
+        props: TextareaProps
+    }
+};

apps/showcase/api-generator/components/tieredmenu.js

@@ -0,0 +1,76 @@
+const TieredMenuProps = [
+    {
+        name: 'model',
+        type: 'array',
+        default: 'null',
+        description: 'An array of menuitems.'
+    },
+    {
+        name: 'popup',
+        type: 'boolean',
+        default: 'false',
+        description: 'Defines if menu would displayed as a popup.'
+    },
+    {
+        name: 'appendTo',
+        type: 'string',
+        default: 'body',
+        description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const TieredMenuSlots = [
+    {
+        name: 'start',
+        description: 'Custom start content.'
+    },
+    {
+        name: 'end',
+        description: 'Custom end content.'
+    },
+    {
+        name: 'item',
+        description: 'Template of a menuitem.'
+    },
+    {
+        name: 'submenuicon',
+        description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
+    }
+];
+
+module.exports = {
+    tieredmenu: {
+        name: 'TieredMenu',
+        description: 'TieredMenu displays submenus in nested overlays.',
+        props: TieredMenuProps,
+        slots: TieredMenuSlots
+    }
+};

apps/showcase/api-generator/components/timeline.js

@@ -0,0 +1,66 @@
+const TimelineProps = [
+    {
+        name: 'value',
+        type: 'array',
+        default: 'null',
+        description: 'An array of events to display.'
+    },
+    {
+        name: 'align',
+        type: 'string',
+        default: 'left',
+        description: 'Position of the timeline bar relative to the content. Valid values are "left", "right" and "alternate" for vertical layout and "top", "bottom" for horizontal layout.'
+    },
+    {
+        name: 'layout',
+        type: 'string',
+        default: 'vertical',
+        description: 'Orientation of the timeline, valid values are "vertical" and "horizontal".'
+    },
+    {
+        name: 'dataKey',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the field that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const TimelineSlots = [
+    {
+        name: 'opposite',
+        description: 'Custom content for the content to be placed at the other side of the bar'
+    },
+    {
+        name: 'marker',
+        description: 'Custom content for the marker'
+    },
+    {
+        name: 'content',
+        description: 'Custom content'
+    },
+    {
+        name: 'connector',
+        description: 'Connector element'
+    }
+];
+
+module.exports = {
+    timeline: {
+        name: 'Timeline',
+        description: 'Timeline visualizes a series of chained events.',
+        props: TimelineProps,
+        slots: TimelineSlots
+    }
+};

apps/showcase/api-generator/components/toast.js

@@ -0,0 +1,98 @@
+const ToastProps = [
+    {
+        name: 'group',
+        type: 'string',
+        default: 'null',
+        description: 'Unique identifier of a message group.'
+    },
+    {
+        name: 'position',
+        type: 'string',
+        default: 'top-right',
+        description: 'Position of the toast in viewport. Other valid values are "top-left", "top-center", "bottom-left", "bottom-center", "bottom-right" and "center".'
+    },
+    {
+        name: 'autoZIndex',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'baseZIndex',
+        type: 'number',
+        default: '0',
+        description: 'Base zIndex value to use in layering.'
+    },
+    {
+        name: 'breakpoints',
+        type: 'object',
+        default: 'null',
+        description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ToastEvents = [
+    {
+        name: 'close',
+        description: 'Callback to invoke when the toast is closed.',
+        arguments: [
+            {
+                name: 'message',
+                type: 'any',
+                description: 'Message of toast.'
+            }
+        ]
+    },
+    {
+        name: 'life-end',
+        description: 'Callback to invoke when the toast timeout is over.',
+        arguments: [
+            {
+                name: 'message',
+                type: 'any',
+                description: 'Message of toast.'
+            }
+        ]
+    }
+];
+
+const ToastSlots = [
+    {
+        name: 'message',
+        description: 'Custom content for the toast message'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
+    }
+];
+
+module.exports = {
+    toast: {
+        name: 'Toast',
+        description: 'Toast is used to display messages in an overlay.',
+        props: ToastProps,
+        events: ToastEvents,
+        slots: ToastSlots
+    }
+};

apps/showcase/api-generator/components/togglebutton.js

@@ -0,0 +1,145 @@
+const ToggleButtonProps = [
+    {
+        name: 'modelValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value of the component.'
+    },
+    {
+        name: 'onIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon for the on state.'
+    },
+    {
+        name: 'offIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Icon for the off state.'
+    },
+    {
+        name: 'onLabel',
+        type: 'string',
+        default: 'yes',
+        description: 'Label for the on state.'
+    },
+    {
+        name: 'offLabel',
+        type: 'string',
+        default: 'no',
+        description: 'Label for the off state.'
+    },
+    {
+        name: 'iconPos',
+        type: 'string',
+        default: 'left',
+        description: 'Position of the icon, valid values are "left" and "right".'
+    },
+    {
+        name: 'tabindex',
+        type: 'number',
+        default: 'null',
+        description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'invalid',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the component should have invalid state style.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the focus input to match a label defined for the chips.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ToggleButtonEvents = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'focus',
+        description: 'Callback to invoke when the component receives focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
+    {
+        name: 'blur',
+        description: 'Callback to invoke when the component loses focus.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
+const ToggleButtonSlots = [
+    {
+        name: 'icon',
+        description: 'custom icon template.'
+    }
+];
+
+module.exports = {
+    togglebutton: {
+        name: 'ToggleButton',
+        description: 'ToggleButton is used to select a boolean value using a button.',
+        props: ToggleButtonProps,
+        slots: ToggleButtonSlots,
+        events: ToggleButtonEvents
+    }
+};

apps/showcase/api-generator/components/toggleswitch.js

@@ -0,0 +1,80 @@
+const ToggleSwitchProps = [
+    {
+        name: 'modelValue',
+        type: 'boolean',
+        default: 'null',
+        description: 'Specifies whether a inputswitch should be checked or not.'
+    },
+    {
+        name: 'trueValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in checked state.'
+    },
+    {
+        name: 'falseValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in unchecked state.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ToggleSwitchEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on click.'
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.'
+    },
+    {
+        name: 'input',
+        description: 'Callback to invoke on value change.'
+    }
+];
+
+module.exports = {
+    inputswitch: {
+        name: 'ToggleSwitch',
+        description: 'ToggleSwitch is used to select a boolean value.',
+        props: ToggleSwitchProps,
+        events: ToggleSwitchEvents
+    }
+};

apps/showcase/api-generator/components/toolbar.js

@@ -0,0 +1,44 @@
+const ToolbarProps = [
+    {
+        name: 'aria-labelledby',
+        type: 'string',
+        default: 'null',
+        description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const ToolbarSlots = [
+    {
+        name: 'start',
+        description: "Custom content for the component's left side"
+    },
+    {
+        name: 'end',
+        description: "Custom content for the component's right side"
+    },
+    {
+        name: 'center',
+        description: "Custom content for the component's center"
+    }
+];
+
+module.exports = {
+    toolbar: {
+        name: 'Toolbar',
+        description: 'Toolbar is a grouping component for buttons and other content.',
+        props: ToolbarProps,
+        slots: ToolbarSlots
+    }
+};

apps/showcase/api-generator/components/tooltip.js

@@ -0,0 +1,34 @@
+const TooltipModifiers = [
+    {
+        name: 'right',
+        description: 'Positions the tooltip on the right of the trigger element (default)'
+    },
+    {
+        name: 'top',
+        description: 'Positions the tooltip on the top of the trigger element'
+    },
+    {
+        name: 'bottom',
+        description: 'Positions the tooltip on the bottom of the trigger element'
+    },
+    {
+        name: 'left',
+        description: 'Positions the tooltip on the left of the trigger element'
+    },
+    {
+        name: 'focus',
+        description: 'Focus on the trigger element'
+    },
+    {
+        name: 'blur',
+        description: 'Blur the trigger element'
+    }
+];
+
+module.exports = {
+    tooltip: {
+        name: 'Tooltip',
+        description: 'Tooltip directive provides advisory information for a component.',
+        'vue-modifiers': TooltipModifiers
+    }
+};