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

Docapitable styling changes

pull/3711/head
Bahadır Sofuoğlu 2023-03-06 13:59:56 +03:00
parent be462ac500
commit 2ce28e2d7b
11 changed files with 1027 additions and 1052 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
api-generator/build-apidoc.js
View File

@ -47,12 +47,6 @@ if (project) {
project.children.forEach((module) => { project.children.forEach((module) => {
const { name, comment } = module; const { name, comment } = module;
/* if (name === 'knob') {
console.log('module', module);
} */ // REMOVE
/* if (name !== 'autocomplete') return; */ // REMOVE
const description = comment && comment.summary.map((s) => s.text || '').join(' '); const description = comment && comment.summary.map((s) => s.text || '').join(' ');
doc[name] = { doc[name] = {
@ -265,7 +259,19 @@ if (project) {
module_interfaces_group && module_interfaces_group &&
module_interfaces_group.children.forEach((event) => { module_interfaces_group.children.forEach((event) => {
const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' '); 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 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_extendedBy = event.extendedBy && event.extendedBy.toString();
const event_extendedTypes = event.extendedTypes && event.extendedTypes.toString(); const event_extendedTypes = event.extendedTypes && event.extendedTypes.toString();

1
assets/styles/layout/_doc.scss
View File

@ -256,6 +256,7 @@
border-bottom: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border);
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.5; line-height: 1.5;
scroll-margin-top: 6.5rem;
&.doc-option-type { &.doc-option-type {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;

2
components/confirmationoptions/ConfirmationOptions.d.ts vendored
View File

@ -8,8 +8,6 @@
/** /**
* Confirmation Service options. * Confirmation Service options.
*
* @group Interfaces
*/ */
export interface ConfirmationOptions { export interface ConfirmationOptions {
/** /**

4
components/confirmationservice/ConfirmationService.d.ts vendored
View File

@ -22,11 +22,11 @@ export interface ConfirmationServiceMethods {
* Displays the dialog using the confirmation object options. * Displays the dialog using the confirmation object options.
* @param {ConfirmationOptions} options - Confirmation Object * @param {ConfirmationOptions} options - Confirmation Object
*/ */
require: (options: ConfirmationOptions) => void; require(options: ConfirmationOptions): void;
/** /**
* Hides the dialog without invoking accept or reject callbacks. * Hides the dialog without invoking accept or reject callbacks.
*/ */
close: () => void; close(): void;
} }
declare module 'vue/types/vue' { declare module 'vue/types/vue' {

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

@ -103,7 +103,7 @@ export interface DataTableExportCSVOptions {
/** /**
* Custom tab open event. * Custom tab open event.
* @see sort * @see {@link DataTableEmits.sort}
*/ */
export interface DataTableSortEvent { export interface DataTableSortEvent {
/** /**
@ -143,7 +143,7 @@ export interface DataTableSortEvent {
/** /**
* Custom pagination event. * Custom pagination event.
* @see page * @see {@link DataTableEmits.page}
* @extends DataTableSortEvent * @extends DataTableSortEvent
*/ */
export interface DataTablePageEvent extends DataTableSortEvent { export interface DataTablePageEvent extends DataTableSortEvent {
@ -159,7 +159,7 @@ export interface DataTablePageEvent extends DataTableSortEvent {
/** /**
* Custom sort event. * Custom sort event.
* @see sort * @see {@link DataTableEmits.sort}
* @extends DataTableSortEvent * @extends DataTableSortEvent
*/ */
export interface DataTableFilterEvent extends DataTableSortEvent { export interface DataTableFilterEvent extends DataTableSortEvent {
@ -171,6 +171,7 @@ export interface DataTableFilterEvent extends DataTableSortEvent {
/** /**
* Custom row click event. * Custom row click event.
* @see {@link DataTableEmits['row-click']}
*/ */
export interface DataTableRowClickEvent { export interface DataTableRowClickEvent {
/** /**
@ -189,21 +190,21 @@ export interface DataTableRowClickEvent {
/** /**
* Custom row double click event. * Custom row double click event.
* @see row-click * @see {@link DataTableEmits['row-dblclick']]}
* @extends DataTableRowClickEvent * @extends DataTableRowClickEvent
*/ */
export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent {} export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent {}
/** /**
* Custom context menu event. * Custom context menu event.
* @see row-click * @see {@link DataTableEmits['row-contextmenu']}
* @extends DataTableRowClickEvent * @extends DataTableRowClickEvent
*/ */
export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {} export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {}
/** /**
* Custom row select event. * Custom row select event.
* * @see {@link DataTableEmits['row-select']}
*/ */
export interface DataTableRowSelectEvent { export interface DataTableRowSelectEvent {
/** /**
@ -226,14 +227,14 @@ export interface DataTableRowSelectEvent {
/** /**
* Custom row unselect event. * Custom row unselect event.
* @see row-select * @see {@link DataTableEmits['row-unselect']}
* @extends DataTableRowSelectEvent * @extends DataTableRowSelectEvent
*/ */
export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {} export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {}
/** /**
* Custom row select all event. * Custom row select all event.
* * @see {@link DataTableEmits['row-select-all']}
*/ */
export interface DataTableRowSelectAllEvent { export interface DataTableRowSelectAllEvent {
/** /**
@ -248,7 +249,7 @@ export interface DataTableRowSelectAllEvent {
/** /**
* Custom row unselect all event. * Custom row unselect all event.
* * @see {@link DataTableEmits['row-unselect-all']}
*/ */
export interface DataTableRowUnselectAllEvent { export interface DataTableRowUnselectAllEvent {
/** /**
@ -259,7 +260,7 @@ export interface DataTableRowUnselectAllEvent {
/** /**
* Custom row select all change event. * Custom row select all change event.
* * @see {@link DataTableEmits['select-all-change']}
*/ */
export interface DataTableSelectAllChangeEvent { export interface DataTableSelectAllChangeEvent {
/** /**
@ -274,7 +275,7 @@ export interface DataTableSelectAllChangeEvent {
/** /**
* Custom row resize end event. * Custom row resize end event.
* * @see {@link DataTableEmits['column-resize-end']}
*/ */
export interface DataTableColumnResizeEndEvent { export interface DataTableColumnResizeEndEvent {
/** /**
@ -289,7 +290,7 @@ export interface DataTableColumnResizeEndEvent {
/** /**
* Custom row column reorder event. * Custom row column reorder event.
* * @see {@link DataTableEmits['column-reorder']}
*/ */
export interface DataTableColumnReorderEvent { export interface DataTableColumnReorderEvent {
/** /**
@ -308,7 +309,7 @@ export interface DataTableColumnReorderEvent {
/** /**
* Custom row reorder event. * Custom row reorder event.
* * @see {@link DataTableEmits['row-reorder']}
*/ */
export interface DataTableRowReorderEvent { export interface DataTableRowReorderEvent {
/** /**
@ -331,7 +332,7 @@ export interface DataTableRowReorderEvent {
/** /**
* Custom row expand event. * Custom row expand event.
* * @see {@link DataTableEmits['row-expand']}
*/ */
export interface DataTableRowExpandEvent { export interface DataTableRowExpandEvent {
/** /**
@ -346,14 +347,14 @@ export interface DataTableRowExpandEvent {
/** /**
* Custom row collapse event. * Custom row collapse event.
* @see rowgroup-collapse * @see {@link DataTableEmits['row-expand']}
* @extends DataTableRowExpandEvent * @extends DataTableRowExpandEvent
*/ */
export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {} export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {}
/** /**
* Custom cell edit init event. * Custom cell edit init event.
* * @see {@link DataTableEmits['cell-edit-init']}
*/ */
export interface DataTableCellEditInitEvent { export interface DataTableCellEditInitEvent {
/** /**
@ -376,14 +377,14 @@ export interface DataTableCellEditInitEvent {
/** /**
* Custom cell edit cancel event. * Custom cell edit cancel event.
* @see cell-edit-init * @see {@link DataTableEmits['cell-edit-cancel']}
* @extends DataTableCellEditInitEvent * @extends DataTableCellEditInitEvent
*/ */
export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {} export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {}
/** /**
* Custom cell edit complete event. * Custom cell edit complete event.
* * @see {@link DataTableEmits['cell-edit-complete']}
*/ */
export interface DataTableCellEditCompleteEvent { export interface DataTableCellEditCompleteEvent {
/** /**
@ -422,7 +423,7 @@ export interface DataTableCellEditCompleteEvent {
/** /**
* Custom row edit complete event. * Custom row edit complete event.
* * @see {@link DataTableEmits['row-edit-init']}
*/ */
export interface DataTableRowEditInitEvent { export interface DataTableRowEditInitEvent {
/** /**
@ -449,21 +450,21 @@ export interface DataTableRowEditInitEvent {
/** /**
* Custom row edit init event. * Custom row edit init event.
* @see row-edit-init * @see {@link DataTableEmits['row-edit-complete']}
* @extends DataTableRowEditInitEvent * @extends DataTableRowEditInitEvent
*/ */
export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent {} export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent {}
/** /**
* Custom row edit cancel event. * Custom row edit cancel event.
* @see row-edit-init * @see {@link DataTableEmits['row-edit-cancel']}
* @extends DataTableRowEditCancelEvent * @extends DataTableRowEditCancelEvent
*/ */
export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {} export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {}
/** /**
* Custom state event. * Custom state event.
* * @see {@link DataTableEmits['state-save']}
*/ */
export interface DataTableStateEvent { export interface DataTableStateEvent {
/** /**

6
components/terminalservice/TerminalService.d.ts vendored
View File

@ -14,15 +14,15 @@ export interface TerminalServiceOptions {
/** /**
* Displays the terminal using the action options. * Displays the terminal using the action options.
*/ */
on: (action: 'command' | 'response' | undefined, fn: any) => void; on(action: 'command' | 'response' | undefined, fn: any): void;
/** /**
* Emits the terminal using the action options. * Emits the terminal using the action options.
*/ */
emit: (action: 'command' | 'response' | undefined, params?: any) => void; emit(action: 'command' | 'response' | undefined, params?: any): void;
/** /**
* Closes the terminal using the action options. * Closes the terminal using the action options.
*/ */
off: (action: 'command' | 'response' | undefined, fn: any) => void; off(action: 'command' | 'response' | undefined, fn: any): void;
} }
declare const TerminalService: TerminalServiceOptions; declare const TerminalService: TerminalServiceOptions;

1805
doc/common/apidoc/index.json
View File

File diff suppressed because it is too large Load Diff

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" :header="header" /> <DocSections :docs="docs" />
</div> </div>
<DocSectionNav :docs="docs" /> <DocSectionNav :docs="docs" />
</template> </template>
@ -44,7 +44,8 @@ export default {
id: `api.${moduleName}`, id: `api.${moduleName}`,
label: docName, label: docName,
description: APIDocs[moduleName]?.description.replace(regex, '') || null, description: APIDocs[moduleName]?.description.replace(regex, '') || null,
children: [] children: [],
docName: docName
}; };
const values = APIDocs[moduleName].interfaces.values; const values = APIDocs[moduleName].interfaces.values;
@ -279,12 +280,14 @@ export default {
return interfaces; return interfaces;
}, },
findOptions(values, docName) { findOptions(values, docName) {
if (docName !== 'MenuItem') return; const validOptionsDocNames = ['MenuItem', 'ConfirmationOptions'];
if (!validOptionsDocNames.includes(docName)) return;
const options = []; const options = [];
for (const key of Object.keys(values)) { for (const key of Object.keys(values)) {
if (key === 'MenuItem') { if (key === 'MenuItem' || key === 'ConfirmationOptions') {
options.push({ key, values: values[key] }); options.push({ key, values: values[key] });
} }
} }

153
layouts/doc/DocApiTable.vue
View File

@ -1,68 +1,64 @@
<template> <template>
<section class="pt-3"> <DocSectionText :id="id" :label="label" :level="componentLevel">
<div :id="id"> {{ description || null }}
<DocSectionText :id="id" :label="label" :level="componentLevel"> <p v-if="relatedProp" class="inline-block">
{{ description || null }} See <NuxtLink :to="setRelatedPropPath(relatedProp)" class="doc-option-link"> {{ relatedProp }} </NuxtLink>
<p v-if="relatedProp" class="inline-block"> </p>
See <i>{{ relatedProp }}</i> </DocSectionText>
</p>
</DocSectionText>
</div>
<div v-if="!data[0].data" class="doc-tablewrapper mt-3"> <div v-if="!data[0].data" class="doc-tablewrapper mt-3">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th v-for="header in Object.keys(data[0])" :key="header"> <th v-for="header in Object.keys(data[0])" :key="header">
<template v-if="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'"> <template v-if="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'">
{{ header }} {{ header }}
</template> </template>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="prop in data" :key="prop"> <tr v-for="prop in data" :key="prop">
<td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }"> <td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }">
<template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'"> <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
<span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name"> <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name">
{{ v }} {{ v }}
<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" class="doc-option-link"> <NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" class="doc-option-link">
<i class="pi pi-link"></i> <i class="pi pi-link"></i>
</NuxtLink> </NuxtLink>
</span> </span>
<template v-else-if="k === 'type'"> <template v-else-if="k === 'type'">
<template v-for="(value, i) in getType(v)" :key="value"> <template v-for="(value, i) in getType(v)" :key="value">
{{ i !== 0 ? ' |' : '' }} {{ i !== 0 ? ' |' : '' }}
<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink> <NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
<span v-else> {{ value }} </span> <span v-else> {{ value }} </span>
</template>
</template> </template>
<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">
{{ v }}
</span>
</template> </template>
</td>
</tr>
</tbody>
</table>
</div>
<template v-if="data[0].data && data[0].data.length > 0"> <template v-else-if="k === 'parameters'">
<template v-for="childData in data" :key="childData"> <span v-if="v.name"> {{ v.name }} : </span>
<DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" :level="3" /> <template v-for="(value, i) in getType(v.type)" :key="value">
</template> {{ 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">
{{ v }}
</span>
</template>
</td>
</tr>
</tbody>
</table>
</div>
<template v-if="data[0].data && data[0].data.length > 0">
<template v-for="childData in data" :key="childData">
<DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" :level="3" />
</template> </template>
</section> </template>
</template> </template>
<script> <script>
export default { export default {
@ -86,10 +82,6 @@ export default {
level: { level: {
type: Number, type: Number,
default: 1 default: 1
},
header: {
type: String,
default: null
} }
}, },
methods: { methods: {
@ -115,14 +107,41 @@ export default {
return this.getType(newValue[1]); return this.getType(newValue[1]);
}, },
isLinkType(value) { isLinkType(value) {
return value.includes(this.header); if (this.label === 'Slots') return false;
return value.toLowerCase().includes(this.$route.hash.replace('#api.', '').split('.')[0].toLowerCase());
}, },
setLinkPath(value) { setLinkPath(value, type) {
console.log('test');
const currentRoute = this.$router.currentRoute.value.name; const currentRoute = this.$router.currentRoute.value.name;
const componentName = this.$route.hash.replace('#api.', '').split('.')[0];
const definationType = value.includes('Type') ? 'types' : value.includes('Event') ? 'events' : 'interfaces'; const definationType = type ? type : value.includes('Type') ? 'types' : value.includes('Event') ? 'events' : 'interfaces';
return `/${currentRoute}/#api.${currentRoute}.${definationType}.${value}`; return `/${currentRoute}/#api.${componentName}.${definationType}.${value}`;
},
setRelatedPropPath(value) {
let firstPart = '';
let secondPart = '';
if (value.includes('.')) {
const parts = value.split('.');
firstPart = parts[0].trim();
secondPart = parts[1].trim();
} else if (value.includes('[')) {
const start = value.indexOf("['") + 2;
const end = value.indexOf("']");
firstPart = value.slice(0, start - 2).trim();
secondPart = value.slice(start, end).trim();
}
const docName = this.$route.name;
firstPart = firstPart.toLowerCase().replace(docName, '');
return this.setLinkPath(secondPart, firstPart);
} }
}, },
computed: { computed: {

29
layouts/doc/DocSectionNav.vue
View File

@ -3,7 +3,7 @@
<li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]"> <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
<div class="navbar-item-content"> <div class="navbar-item-content">
<NuxtLink :to="`${checkRouteName}/#${doc.id}`"> <NuxtLink :to="`${checkRouteName}/#${doc.id}`">
<button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button> <button class="p-link">{{ doc.label }}</button>
</NuxtLink> </NuxtLink>
</div> </div>
@ -37,16 +37,13 @@ export default {
topbarHeight: 0 topbarHeight: 0
}; };
}, },
watch: {
'$route.hash'() {
this.scrollCurrentUrl();
}
},
mounted() { mounted() {
const hash = window.location.hash.substring(1); this.scrollCurrentUrl();
const hasHash = ObjectUtils.isNotEmpty(hash);
const id = hasHash ? hash : (this.docs[0] || {}).id;
this.activeId = id;
hasHash &&
setTimeout(() => {
this.scrollToLabelById(id);
}, 1);
window.addEventListener('scroll', this.onScroll, { passive: true }); window.addEventListener('scroll', this.onScroll, { passive: true });
}, },
@ -57,6 +54,7 @@ export default {
onScroll() { onScroll() {
if (!this.isScrollBlocked) { if (!this.isScrollBlocked) {
const labels = document.querySelectorAll(':is(h1,h2,h3).doc-section-label'); const labels = document.querySelectorAll(':is(h1,h2,h3).doc-section-label');
const windowScrollTop = DomHandler.getWindowScrollTop(); const windowScrollTop = DomHandler.getWindowScrollTop();
labels.forEach((label) => { labels.forEach((label) => {
@ -103,6 +101,17 @@ export default {
}, },
getIdOfTheSection(section) { getIdOfTheSection(section) {
return section.querySelector('a').getAttribute('id'); return section.querySelector('a').getAttribute('id');
},
scrollCurrentUrl() {
const hash = window.location.hash.substring(1);
const hasHash = ObjectUtils.isNotEmpty(hash);
const id = hasHash ? hash : (this.docs[0] || {}).id;
this.activeId = id;
hasHash &&
setTimeout(() => {
this.scrollToLabelById(id);
}, 1);
} }
}, },
computed: { computed: {

3
layouts/doc/DocSections.vue
View File

@ -8,8 +8,7 @@
</DocSectionText> </DocSectionText>
</div> </div>
<template v-for="comp of doc.children" :key="comp.label"> <template v-for="comp of doc.children" :key="comp.label">
{{ 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>