Docapitable styling changes
parent
be462ac500
commit
2ce28e2d7b
|
@ -47,12 +47,6 @@ if (project) {
|
|||
project.children.forEach((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(' ');
|
||||
|
||||
doc[name] = {
|
||||
|
@ -265,7 +259,19 @@ if (project) {
|
|||
module_interfaces_group &&
|
||||
module_interfaces_group.children.forEach((event) => {
|
||||
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_extendedTypes = event.extendedTypes && event.extendedTypes.toString();
|
||||
|
||||
|
|
|
@ -256,6 +256,7 @@
|
|||
border-bottom: 1px solid var(--surface-border);
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
scroll-margin-top: 6.5rem;
|
||||
|
||||
&.doc-option-type {
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
||||
|
|
|
@ -8,8 +8,6 @@
|
|||
|
||||
/**
|
||||
* Confirmation Service options.
|
||||
*
|
||||
* @group Interfaces
|
||||
*/
|
||||
export interface ConfirmationOptions {
|
||||
/**
|
||||
|
|
|
@ -22,11 +22,11 @@ export interface ConfirmationServiceMethods {
|
|||
* Displays the dialog using the confirmation object options.
|
||||
* @param {ConfirmationOptions} options - Confirmation Object
|
||||
*/
|
||||
require: (options: ConfirmationOptions) => void;
|
||||
require(options: ConfirmationOptions): void;
|
||||
/**
|
||||
* Hides the dialog without invoking accept or reject callbacks.
|
||||
*/
|
||||
close: () => void;
|
||||
close(): void;
|
||||
}
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
|
|
|
@ -103,7 +103,7 @@ export interface DataTableExportCSVOptions {
|
|||
|
||||
/**
|
||||
* Custom tab open event.
|
||||
* @see sort
|
||||
* @see {@link DataTableEmits.sort}
|
||||
*/
|
||||
export interface DataTableSortEvent {
|
||||
/**
|
||||
|
@ -143,7 +143,7 @@ export interface DataTableSortEvent {
|
|||
|
||||
/**
|
||||
* Custom pagination event.
|
||||
* @see page
|
||||
* @see {@link DataTableEmits.page}
|
||||
* @extends DataTableSortEvent
|
||||
*/
|
||||
export interface DataTablePageEvent extends DataTableSortEvent {
|
||||
|
@ -159,7 +159,7 @@ export interface DataTablePageEvent extends DataTableSortEvent {
|
|||
|
||||
/**
|
||||
* Custom sort event.
|
||||
* @see sort
|
||||
* @see {@link DataTableEmits.sort}
|
||||
* @extends DataTableSortEvent
|
||||
*/
|
||||
export interface DataTableFilterEvent extends DataTableSortEvent {
|
||||
|
@ -171,6 +171,7 @@ export interface DataTableFilterEvent extends DataTableSortEvent {
|
|||
|
||||
/**
|
||||
* Custom row click event.
|
||||
* @see {@link DataTableEmits['row-click']}
|
||||
*/
|
||||
export interface DataTableRowClickEvent {
|
||||
/**
|
||||
|
@ -189,21 +190,21 @@ export interface DataTableRowClickEvent {
|
|||
|
||||
/**
|
||||
* Custom row double click event.
|
||||
* @see row-click
|
||||
* @see {@link DataTableEmits['row-dblclick']]}
|
||||
* @extends DataTableRowClickEvent
|
||||
*/
|
||||
export interface DataTableRowDoubleClickEvent extends DataTableRowClickEvent {}
|
||||
|
||||
/**
|
||||
* Custom context menu event.
|
||||
* @see row-click
|
||||
* @see {@link DataTableEmits['row-contextmenu']}
|
||||
* @extends DataTableRowClickEvent
|
||||
*/
|
||||
export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {}
|
||||
|
||||
/**
|
||||
* Custom row select event.
|
||||
*
|
||||
* @see {@link DataTableEmits['row-select']}
|
||||
*/
|
||||
export interface DataTableRowSelectEvent {
|
||||
/**
|
||||
|
@ -226,14 +227,14 @@ export interface DataTableRowSelectEvent {
|
|||
|
||||
/**
|
||||
* Custom row unselect event.
|
||||
* @see row-select
|
||||
* @see {@link DataTableEmits['row-unselect']}
|
||||
* @extends DataTableRowSelectEvent
|
||||
*/
|
||||
export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {}
|
||||
|
||||
/**
|
||||
* Custom row select all event.
|
||||
*
|
||||
* @see {@link DataTableEmits['row-select-all']}
|
||||
*/
|
||||
export interface DataTableRowSelectAllEvent {
|
||||
/**
|
||||
|
@ -248,7 +249,7 @@ export interface DataTableRowSelectAllEvent {
|
|||
|
||||
/**
|
||||
* Custom row unselect all event.
|
||||
*
|
||||
* @see {@link DataTableEmits['row-unselect-all']}
|
||||
*/
|
||||
export interface DataTableRowUnselectAllEvent {
|
||||
/**
|
||||
|
@ -259,7 +260,7 @@ export interface DataTableRowUnselectAllEvent {
|
|||
|
||||
/**
|
||||
* Custom row select all change event.
|
||||
*
|
||||
* @see {@link DataTableEmits['select-all-change']}
|
||||
*/
|
||||
export interface DataTableSelectAllChangeEvent {
|
||||
/**
|
||||
|
@ -274,7 +275,7 @@ export interface DataTableSelectAllChangeEvent {
|
|||
|
||||
/**
|
||||
* Custom row resize end event.
|
||||
*
|
||||
* @see {@link DataTableEmits['column-resize-end']}
|
||||
*/
|
||||
export interface DataTableColumnResizeEndEvent {
|
||||
/**
|
||||
|
@ -289,7 +290,7 @@ export interface DataTableColumnResizeEndEvent {
|
|||
|
||||
/**
|
||||
* Custom row column reorder event.
|
||||
*
|
||||
* @see {@link DataTableEmits['column-reorder']}
|
||||
*/
|
||||
export interface DataTableColumnReorderEvent {
|
||||
/**
|
||||
|
@ -308,7 +309,7 @@ export interface DataTableColumnReorderEvent {
|
|||
|
||||
/**
|
||||
* Custom row reorder event.
|
||||
*
|
||||
* @see {@link DataTableEmits['row-reorder']}
|
||||
*/
|
||||
export interface DataTableRowReorderEvent {
|
||||
/**
|
||||
|
@ -331,7 +332,7 @@ export interface DataTableRowReorderEvent {
|
|||
|
||||
/**
|
||||
* Custom row expand event.
|
||||
*
|
||||
* @see {@link DataTableEmits['row-expand']}
|
||||
*/
|
||||
export interface DataTableRowExpandEvent {
|
||||
/**
|
||||
|
@ -346,14 +347,14 @@ export interface DataTableRowExpandEvent {
|
|||
|
||||
/**
|
||||
* Custom row collapse event.
|
||||
* @see rowgroup-collapse
|
||||
* @see {@link DataTableEmits['row-expand']}
|
||||
* @extends DataTableRowExpandEvent
|
||||
*/
|
||||
export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {}
|
||||
|
||||
/**
|
||||
* Custom cell edit init event.
|
||||
*
|
||||
* @see {@link DataTableEmits['cell-edit-init']}
|
||||
*/
|
||||
export interface DataTableCellEditInitEvent {
|
||||
/**
|
||||
|
@ -376,14 +377,14 @@ export interface DataTableCellEditInitEvent {
|
|||
|
||||
/**
|
||||
* Custom cell edit cancel event.
|
||||
* @see cell-edit-init
|
||||
* @see {@link DataTableEmits['cell-edit-cancel']}
|
||||
* @extends DataTableCellEditInitEvent
|
||||
*/
|
||||
export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {}
|
||||
|
||||
/**
|
||||
* Custom cell edit complete event.
|
||||
*
|
||||
* @see {@link DataTableEmits['cell-edit-complete']}
|
||||
*/
|
||||
export interface DataTableCellEditCompleteEvent {
|
||||
/**
|
||||
|
@ -422,7 +423,7 @@ export interface DataTableCellEditCompleteEvent {
|
|||
|
||||
/**
|
||||
* Custom row edit complete event.
|
||||
*
|
||||
* @see {@link DataTableEmits['row-edit-init']}
|
||||
*/
|
||||
export interface DataTableRowEditInitEvent {
|
||||
/**
|
||||
|
@ -449,21 +450,21 @@ export interface DataTableRowEditInitEvent {
|
|||
|
||||
/**
|
||||
* Custom row edit init event.
|
||||
* @see row-edit-init
|
||||
* @see {@link DataTableEmits['row-edit-complete']}
|
||||
* @extends DataTableRowEditInitEvent
|
||||
*/
|
||||
export interface DataTableRowEditSaveEvent extends DataTableRowEditInitEvent {}
|
||||
|
||||
/**
|
||||
* Custom row edit cancel event.
|
||||
* @see row-edit-init
|
||||
* @see {@link DataTableEmits['row-edit-cancel']}
|
||||
* @extends DataTableRowEditCancelEvent
|
||||
*/
|
||||
export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {}
|
||||
|
||||
/**
|
||||
* Custom state event.
|
||||
*
|
||||
* @see {@link DataTableEmits['state-save']}
|
||||
*/
|
||||
export interface DataTableStateEvent {
|
||||
/**
|
||||
|
|
|
@ -14,15 +14,15 @@ export interface TerminalServiceOptions {
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
emit: (action: 'command' | 'response' | undefined, params?: any) => void;
|
||||
emit(action: 'command' | 'response' | undefined, params?: any): void;
|
||||
/**
|
||||
* 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;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -4,7 +4,7 @@
|
|||
<h1>{{ header }} API</h1>
|
||||
<p>API defines helper props, events and others for the PrimeVue {{ header }} module.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" :header="header" />
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
@ -44,7 +44,8 @@ export default {
|
|||
id: `api.${moduleName}`,
|
||||
label: docName,
|
||||
description: APIDocs[moduleName]?.description.replace(regex, '') || null,
|
||||
children: []
|
||||
children: [],
|
||||
docName: docName
|
||||
};
|
||||
|
||||
const values = APIDocs[moduleName].interfaces.values;
|
||||
|
@ -279,12 +280,14 @@ export default {
|
|||
return interfaces;
|
||||
},
|
||||
findOptions(values, docName) {
|
||||
if (docName !== 'MenuItem') return;
|
||||
const validOptionsDocNames = ['MenuItem', 'ConfirmationOptions'];
|
||||
|
||||
if (!validOptionsDocNames.includes(docName)) return;
|
||||
|
||||
const options = [];
|
||||
|
||||
for (const key of Object.keys(values)) {
|
||||
if (key === 'MenuItem') {
|
||||
if (key === 'MenuItem' || key === 'ConfirmationOptions') {
|
||||
options.push({ key, values: values[key] });
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,13 +1,10 @@
|
|||
<template>
|
||||
<section class="pt-3">
|
||||
<div :id="id">
|
||||
<DocSectionText :id="id" :label="label" :level="componentLevel">
|
||||
{{ description || null }}
|
||||
<p v-if="relatedProp" class="inline-block">
|
||||
See <i>{{ relatedProp }}</i>
|
||||
See <NuxtLink :to="setRelatedPropPath(relatedProp)" class="doc-option-link"> {{ relatedProp }} </NuxtLink>
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</div>
|
||||
|
||||
<div v-if="!data[0].data" class="doc-tablewrapper mt-3">
|
||||
<table class="doc-table">
|
||||
|
@ -62,7 +59,6 @@
|
|||
<DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" :level="3" />
|
||||
</template>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
@ -86,10 +82,6 @@ export default {
|
|||
level: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -115,14 +107,41 @@ export default {
|
|||
return this.getType(newValue[1]);
|
||||
},
|
||||
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 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: {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
|
||||
<div class="navbar-item-content">
|
||||
<NuxtLink :to="`${checkRouteName}/#${doc.id}`">
|
||||
<button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
|
||||
<button class="p-link">{{ doc.label }}</button>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
|
@ -37,16 +37,13 @@ export default {
|
|||
topbarHeight: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.hash'() {
|
||||
this.scrollCurrentUrl();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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);
|
||||
this.scrollCurrentUrl();
|
||||
|
||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||
},
|
||||
|
@ -57,6 +54,7 @@ export default {
|
|||
onScroll() {
|
||||
if (!this.isScrollBlocked) {
|
||||
const labels = document.querySelectorAll(':is(h1,h2,h3).doc-section-label');
|
||||
|
||||
const windowScrollTop = DomHandler.getWindowScrollTop();
|
||||
|
||||
labels.forEach((label) => {
|
||||
|
@ -103,6 +101,17 @@ export default {
|
|||
},
|
||||
getIdOfTheSection(section) {
|
||||
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: {
|
||||
|
|
|
@ -8,8 +8,7 @@
|
|||
</DocSectionText>
|
||||
</div>
|
||||
<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" :header="$attrs.header" />
|
||||
<component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
|
|
Loading…
Reference in New Issue