355 lines
12 KiB
Vue
355 lines
12 KiB
Vue
<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>
|