primevue-mirror/layouts/doc/DocApiSection.vue

<template>
    <div className="doc-main">
        <div className="doc-intro">
            <h1>{{ header }} API</h1>
            <p>API defines helper props, events and others for the PrimeVue {{ header }} module.</p>
        </div>
        <DocSections :docs="docs" />
    </div>
    <DocSectionNav :docs="docs" />
</template>

<script>
import APIDocs from '@/doc/common/apidoc/index.json';
import DocApiTable from './DocApiTable.vue';
export default {
    props: {
        header: {
            type: String,
            default: ''
        },
        doc: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            docs: []
        };
    },
    mounted() {
        this.docs = this.createDocs();
    },

    methods: {
        createDocs() {
            const newDocs = [];

            for (const docName of this.doc) {
                const moduleName = docName.toLowerCase();
                const regex = /\[Live Demo][\s\S]*/g;

                let newDoc = {
                    id: `api.${moduleName}`,
                    label: docName,
                    description: APIDocs[moduleName]?.description.replace(regex, '') || null,
                    children: []
                };

                const values = APIDocs[moduleName].interfaces.values;
                const componentValues = APIDocs[moduleName]?.components;

                const props = values[`${docName}Props`];
                const emits = values[`${docName}Emits`];
                const slots = values[`${docName}Slots`];
                const methods = componentValues ? componentValues['default'].methods : null;
                const types = APIDocs[moduleName]['types'];
                let events = this.findEvents(values);
                const interfaces = this.findOtherInterfaces(values, docName);

                const options = this.findOptions(values, docName); // Only for MenuItem

                if (props && props.props.length) {
                    newDoc.children.push({
                        id: `api.${moduleName}.props`,
                        label: 'Props',
                        component: DocApiTable,
                        data: this.setPropsData(props.props),
                        description: props.description
                    });
                }

                if (emits && emits.methods.length) {
                    newDoc.children.push({
                        id: `api.${moduleName}.emits`,
                        label: 'Emits',
                        component: DocApiTable,
                        data: this.setEmitData(emits.methods),
                        description: emits.description
                    });
                }

                if (slots && slots.methods.length > 0) {
                    newDoc.children.push({
                        id: `api.${moduleName}.slots`,
                        label: 'Slots',
                        component: DocApiTable,
                        data: this.setEmitData(slots.methods),
                        description: slots.description
                    });
                }

                if (methods && methods.values.length > 0) {
                    newDoc.children.push({
                        id: `api.${moduleName}.methods`,
                        label: 'Methods',
                        component: DocApiTable,
                        data: this.setEmitData(methods.values),
                        description: APIDocs[moduleName].interfaces.methodDescription
                    });
                }

                if (events && events.length) {
                    newDoc.children.push({
                        id: `api.${moduleName}.events`,
                        label: 'Events',
                        component: DocApiTable,
                        data: this.setEventsData(moduleName, events),
                        description: APIDocs[moduleName].interfaces.eventDescription
                    });
                }

                if (interfaces && interfaces.length > 0) {
                    const isValidDirective = this.checkDirectiveInterfaces(interfaces);

                    if (!isValidDirective) return;

                    newDoc.children.push({
                        id: `api.${moduleName}.interfaces`,
                        label: 'Interfaces',
                        component: DocApiTable,
                        data: this.setInterfacesData(moduleName, interfaces),
                        description: APIDocs[moduleName].interfaces.description || null
                    });
                }

                if (types) {
                    newDoc.children.push({
                        id: `api.${moduleName}.types`,
                        label: 'Types',
                        component: DocApiTable,
                        data: this.setTypesData(moduleName, types.values),
                        description: APIDocs[moduleName].interfaces.typeDescription || null
                    });
                }

                if (options) {
                    newDoc.children.push({
                        id: `api.${moduleName}.options`,
                        label: 'Options',
                        component: DocApiTable,
                        data: this.setPropsData(options[0].values.props)
                    });
                }

                newDocs.push(newDoc);
            }

            return newDocs;
        },
        setEmitData(emits) {
            const data = [];

            for (const emit of emits) {
                const parameters = emit.parameters.reduce((acc, param) => {
                    acc.push(`${param.name}: ${param.type}`);

                    return acc;
                }, []);

                data.push({
                    name: emit.name,
                    parameters: parameters.join(', '),
                    returnType: emit.returnType,
                    description: emit.description
                });
            }

            return data;
        },
        setPropsData(props) {
            const data = [];

            for (const prop of props) {
                data.push({
                    name: prop.name,
                    type: prop.type,
                    default: prop.defaultValue,
                    description: prop.description,
                    default: prop.default
                });
            }

            return data;
        },
        setEventsData(moduleName, events) {
            const data = [];

            for (const event of events) {
                const eventData = {
                    id: `api.${moduleName}.events.${event.key}`,
                    label: event.key,
                    component: DocApiTable,
                    description: event.values.description,
                    relatedProp: event.values.relatedProp,
                    data: []
                };

                if (event.values.relatedProp) {
                    eventData.relatedProp = event.values.relatedProp;
                }

                event.values.props.forEach((prop) => {
                    eventData.data.push({
                        name: prop.name,
                        type: prop.type,
                        description: prop.description
                    });
                });

                data.push(eventData);
            }

            return data;
        },
        setInterfacesData(moduleName, interfaces) {
            const data = [];

            for (const interfaceData of interfaces) {
                const interfaceDatas = {
                    id: `api.${moduleName}.interfaces.${interfaceData.key}`,
                    label: interfaceData.key,
                    component: DocApiTable,
                    description: interfaceData.values.description,
                    data: []
                };

                interfaceData.values.props.forEach((prop) => {
                    interfaceDatas.data.push({
                        name: prop.name,
                        type: prop.type,
                        description: prop.description
                    });
                });

                data.push(interfaceDatas);
            }

            return data;
        },
        setTypesData(moduleName, types) {
            const data = [];

            for (const key of Object.keys(types)) {
                const value = types[key];
                const typeData = {
                    id: `api.${moduleName}.types.${key}`,
                    label: key,
                    component: DocApiTable,
                    data: []
                };

                typeData.data.push({
                    values: value.values
                });

                data.push(typeData);
            }

            return data;
        },
        findEvents(values) {
            const events = [];

            for (const key of Object.keys(values)) {
                if (key.includes('Event')) {
                    events.push({ key, values: values[key] });
                }
            }

            return events;
        },
        findOtherInterfaces(values, docName) {
            const interfaces = [];

            for (const key of Object.keys(values)) {
                if (!key.includes('Event') && !key.includes('Props') && !key.includes('Emits') && !key.includes('Slots') && key !== docName) {
                    interfaces.push({ key, values: values[key] });
                }
            }

            return interfaces;
        },
        findOptions(values, docName) {
            if (docName !== 'MenuItem') return;

            const options = [];

            for (const key of Object.keys(values)) {
                if (key === 'MenuItem') {
                    options.push({ key, values: values[key] });
                }
            }

            return options;
        },
        checkDirectiveInterfaces(interfaces) {
            const findMainInterface = interfaces.find((interfaceData) => interfaceData.key.includes('DirectiveBinding'));

            return !findMainInterface || findMainInterface.values.props.length > 0;
        }
    }
};
</script>