vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Apidoc emit-prop type navigate completed

pull/3711/head
Bahadır Sofuoğlu 2023-03-04 16:43:35 +03:00
parent 22077da98c
commit df4d30c4cd
5 changed files with 89 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/datatable/DataTable.d.ts vendored
View File

@ -171,7 +171,6 @@ export interface DataTableFilterEvent extends DataTableSortEvent {
/** /**
* Custom row click event. * Custom row click event.
* @event
*/ */
export interface DataTableRowClickEvent { export interface DataTableRowClickEvent {
/** /**
@ -204,7 +203,7 @@ export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {}
/** /**
* Custom row select event. * Custom row select event.
* @event *
*/ */
export interface DataTableRowSelectEvent { export interface DataTableRowSelectEvent {
/** /**
@ -234,7 +233,7 @@ export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {}
/** /**
* Custom row select all event. * Custom row select all event.
* @event *
*/ */
export interface DataTableRowSelectAllEvent { export interface DataTableRowSelectAllEvent {
/** /**
@ -249,7 +248,7 @@ export interface DataTableRowSelectAllEvent {
/** /**
* Custom row unselect all event. * Custom row unselect all event.
* @event *
*/ */
export interface DataTableRowUnselectAllEvent { export interface DataTableRowUnselectAllEvent {
/** /**
@ -260,7 +259,7 @@ export interface DataTableRowUnselectAllEvent {
/** /**
* Custom row select all change event. * Custom row select all change event.
* @event *
*/ */
export interface DataTableSelectAllChangeEvent { export interface DataTableSelectAllChangeEvent {
/** /**
@ -275,7 +274,7 @@ export interface DataTableSelectAllChangeEvent {
/** /**
* Custom row resize end event. * Custom row resize end event.
* @event *
*/ */
export interface DataTableColumnResizeEndEvent { export interface DataTableColumnResizeEndEvent {
/** /**
@ -290,7 +289,7 @@ export interface DataTableColumnResizeEndEvent {
/** /**
* Custom row column reorder event. * Custom row column reorder event.
* @event *
*/ */
export interface DataTableColumnReorderEvent { export interface DataTableColumnReorderEvent {
/** /**
@ -309,7 +308,7 @@ export interface DataTableColumnReorderEvent {
/** /**
* Custom row reorder event. * Custom row reorder event.
* @event *
*/ */
export interface DataTableRowReorderEvent { export interface DataTableRowReorderEvent {
/** /**
@ -332,7 +331,7 @@ export interface DataTableRowReorderEvent {
/** /**
* Custom row expand event. * Custom row expand event.
* @event *
*/ */
export interface DataTableRowExpandEvent { export interface DataTableRowExpandEvent {
/** /**
@ -354,7 +353,7 @@ export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {}
/** /**
* Custom cell edit init event. * Custom cell edit init event.
* @event *
*/ */
export interface DataTableCellEditInitEvent { export interface DataTableCellEditInitEvent {
/** /**
@ -378,14 +377,13 @@ export interface DataTableCellEditInitEvent {
/** /**
* Custom cell edit cancel event. * Custom cell edit cancel event.
* @see cell-edit-init * @see cell-edit-init
* @todo
* @extends DataTableCellEditInitEvent * @extends DataTableCellEditInitEvent
*/ */
export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {} export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {}
/** /**
* Custom cell edit complete event. * Custom cell edit complete event.
* @event *
*/ */
export interface DataTableCellEditCompleteEvent { export interface DataTableCellEditCompleteEvent {
/** /**
@ -424,7 +422,7 @@ export interface DataTableCellEditCompleteEvent {
/** /**
* Custom row edit complete event. * Custom row edit complete event.
* @event *
*/ */
export interface DataTableRowEditInitEvent { export interface DataTableRowEditInitEvent {
/** /**
@ -465,7 +463,7 @@ export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {
/** /**
* Custom state event. * Custom state event.
* @event *
*/ */
export interface DataTableStateEvent { export interface DataTableStateEvent {
/** /**

11
layouts/doc/DocApiSection.vue
View File

@ -4,7 +4,7 @@
<h1>{{ header }} API</h1> <h1>{{ header }} API</h1>
<p>API defines helper props, events and others for the PrimeVue {{ header }} module.</p> <p>API defines helper props, events and others for the PrimeVue {{ header }} module.</p>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" :header="header" />
</div> </div>
<DocSectionNav :docs="docs" /> <DocSectionNav :docs="docs" />
</template> </template>
@ -152,15 +152,18 @@ export default {
const data = []; const data = [];
for (const emit of emits) { for (const emit of emits) {
const parameters = emit.parameters.reduce((acc, param) => { /* const parameters = emit.parameters.reduce((acc, param) => {
acc.push(`${param.name}: ${param.type}`); acc.push(`${param.name}: ${param.type}`);
return acc; return acc;
}, []); }, []); */
data.push({ data.push({
name: emit.name, name: emit.name,
parameters: parameters.join(', '), parameters: {
name: emit.parameters[0]?.name,
type: emit.parameters[0]?.type
},
returnType: emit.returnType, returnType: emit.returnType,
description: emit.description description: emit.description
}); });

66
layouts/doc/DocApiTable.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<section class="pt-3"> <section class="pt-3">
<div :id="id"> <div :id="id">
<DocSectionText :id="id" :label="label"> <DocSectionText :id="id" :label="label" :level="componentLevel">
{{ description || null }} {{ description || null }}
<p v-if="relatedProp" class="inline-block"> <p v-if="relatedProp" class="inline-block">
See <i>{{ relatedProp }}</i> See <i>{{ relatedProp }}</i>
@ -30,8 +30,22 @@
<i class="pi pi-link"></i> <i class="pi pi-link"></i>
</NuxtLink> </NuxtLink>
</span> </span>
<template v-else-if="k === 'type'">
<template v-for="(value, i) in getType(v)" :key="value">
{{ i !== 0 ? ' |' : '' }}
<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
<span v-else> {{ value }} </span>
</template>
</template>
<NuxtLink v-else-if="isLinkType(k, v)" :to="setLinkPath(v)" class="doc-option-link"> {{ v }} </NuxtLink> <template v-else-if="k === 'parameters'">
<span v-if="v.name"> {{ v.name }} : </span>
<template v-for="(value, i) in getType(v.type)" :key="value">
{{ i !== 0 ? ' |' : '' }}
<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
<span v-else> {{ value }} </span>
</template>
</template>
<span v-else :id="id + '.' + v"> <span v-else :id="id + '.' + v">
{{ v }} {{ v }}
@ -45,7 +59,7 @@
<template v-if="data[0].data && data[0].data.length > 0"> <template v-if="data[0].data && data[0].data.length > 0">
<template v-for="childData in data" :key="childData"> <template v-for="childData in data" :key="childData">
<DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" /> <DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" :level="3" />
</template> </template>
</template> </template>
</section> </section>
@ -68,21 +82,59 @@ export default {
}, },
relatedProp: { relatedProp: {
type: String type: String
},
level: {
type: Number,
default: 1
},
header: {
type: String,
default: null
} }
}, },
methods: { methods: {
isLinkType(key, value) { getType(value) {
const primitiveTypes = ['string', 'number', 'boolean', 'object', 'array', 'function', 'symbol', 'null', 'undefined', 'any', 'Event']; const newValue = value?.split('|').map((item) => {
return item
.replace(/"/g, '')
.replace(/(\[|\]|<|>).*$/gm, '')
.trim();
});
return key === 'type' && !primitiveTypes.includes(value); return newValue;
},
getParameters(value) {
const newValue = value.split(':').map((item) => {
return item
.replace(/"/g, '')
.replace(/(\[|\]|<|>).*$/gm, '')
.trim();
});
return this.getType(newValue[1]);
},
isLinkType(value) {
return value.includes(this.header);
}, },
setLinkPath(value) { setLinkPath(value) {
const currentRoute = this.$router.currentRoute.value.name; const currentRoute = this.$router.currentRoute.value.name;
const definationType = value.includes('Type') ? 'types' : 'interfaces'; const definationType = value.includes('Type') ? 'types' : value.includes('Event') ? 'events' : 'interfaces';
return `/${currentRoute}/#api.${currentRoute}.${definationType}.${value}`; return `/${currentRoute}/#api.${currentRoute}.${definationType}.${value}`;
} }
},
computed: {
componentLevel() {
if (this.label === 'Interfaces' || this.label === 'Events') {
return 2;
} else if (this.level === 3) {
return 3;
}
return this.data[0].data ? 1 : 2;
}
} }
}; };
</script> </script>

11
layouts/doc/DocSectionText.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<component :is="$attrs.level === 2 ? 'h3' : 'h2'" class="doc-section-label"> <component :is="headerTag" class="doc-section-label">
{{ $attrs.label }} {{ $attrs.label }}
<NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink> <NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
</component> </component>
@ -32,6 +32,15 @@ export default {
} }
return path; return path;
},
headerTag() {
if (this.$attrs.level === 3) {
return 'h4';
} else if (this.$attrs.level === 2) {
return 'h3';
}
return 'h2';
} }
} }
}; };

2
layouts/doc/DocSections.vue
View File

@ -9,7 +9,7 @@
</div> </div>
<template v-for="comp of doc.children" :key="comp.label"> <template v-for="comp of doc.children" :key="comp.label">
{{ comp.relatedProp }} {{ comp.relatedProp }}
<component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" /> <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" :header="$attrs.header" />
</template> </template>
</template> </template>