Docapitable styling changes

api-generator/build-apidoc.js

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

assets/styles/layout/_doc.scss

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

components/confirmationoptions/ConfirmationOptions.d.ts

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

components/confirmationservice/ConfirmationService.d.ts

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

components/datatable/DataTable.d.ts

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

components/terminalservice/TerminalService.d.ts

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

layouts/doc/DocApiSection.vue

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

layouts/doc/DocApiTable.vue

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

layouts/doc/DocSectionNav.vue

@@ -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);
+        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 });
     },
@@ -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: {

layouts/doc/DocSections.vue

@@ -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" />
-                    <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" :header="$attrs.header" />
                 </template>
             </template>