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

View File

@ -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();

View File

@ -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;

View File

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

View File

@ -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' {

View File

@ -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 {
/**

View File

@ -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

View File

@ -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] });
}
}

View File

@ -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: {

View File

@ -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: {

View File

@ -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>