vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update doc components structure

Browse source
This commit is contained in:
mertsincan 2023-04-01 03:36:59 +01:00
parent cf5dd67244
commit 036b90fc82
16 changed files with 18 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

354
components/doc/DocApiSection.vue Normal file
View file

@ -0,0 +1,354 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>{{ header }} API</h1>
<p>{{ description }}</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: [],
docName: docName
};
const values = APIDocs[moduleName]?.interfaces?.values;
const componentValues = APIDocs[moduleName]?.components;
const modelValues = APIDocs[moduleName]?.model;
let props = null;
let emits = null;
let slots = null;
let events = null;
let options = null;
let interfaces = null;
if (values) {
props = values[`${docName}Props`];
emits = values[`${docName}Emits`];
slots = values[`${docName}Slots`];
events = this.findEvents(values);
options = this.findOptions(values, docName); // MenuItem && ConfirmationOptions
interfaces = this.findOtherInterfaces(values, docName);
}
const methods = componentValues ? componentValues['default'].methods : null;
const types = APIDocs[moduleName]['types'];
const services = modelValues; // (TerminalService && ConfirmationService && ToastService)
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 > 0) {
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.options.${options[0].key}`,
label: 'Options',
component: DocApiTable,
data: this.setPropsData(options[0].values.props)
});
}
if (services) {
newDoc.children.push({
id: `api.${moduleName}.services`,
label: 'Services',
component: DocApiTable,
data: this.setServicesData(moduleName, services),
description: Object.values(services)[0].description || null
});
}
newDocs.push(newDoc);
}
return newDocs;
},
setEmitData(emits) {
const data = [];
for (const emit of emits) {
data.push({
name: emit.name,
parameters: {
name: emit.parameters[0]?.name,
type: emit.parameters[0]?.type
},
returnType: emit.returnType,
description: emit.description,
deprecated: emit.deprecated
});
}
return data;
},
setPropsData(props) {
const data = [];
for (const prop of props) {
data.push({
name: prop.name,
type: prop.type,
default: prop.default,
description: prop.description,
deprecated: prop.deprecated
});
}
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,
default: prop.default,
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;
},
setServicesData(moduleName, services) {
const data = [];
for (const key of Object.keys(services)) {
const value = services[key];
value?.methods.values.forEach((method) => {
data.push({
name: method.name,
parameters: {
name: method.parameters[0]?.name,
type: method.parameters[0]?.type
},
returnType: method.returnType,
description: method.description
});
});
}
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) {
const validOptionsDocNames = ['MenuItem', 'ConfirmationOptions'];
if (!validOptionsDocNames.includes(docName)) return;
const options = [];
for (const key of Object.keys(values)) {
if (key === 'MenuItem' || key === 'ConfirmationOptions') {
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;
}
},
computed: {
description() {
return this.doc && this.doc.length > 0 ? `API defines helper props, events and others for the PrimeVue ${this.header} module.` : `${this.header} is a CSS feature so does not provide a Javascript API`;
}
}
};
</script>