Docapitable styling changes

2023-03-06 13:59:56 +03:00 · 2023-03-06 13:59:56 +03:00 · 2ce28e2d7b
parent be462ac500
commit 2ce28e2d7b
11 changed files with 1027 additions and 1052 deletions
--- a/api-generator/build-apidoc.js
+++ b/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();

--- a/assets/styles/layout/_doc.scss
+++ b/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;
--- a/components/confirmationoptions/ConfirmationOptions.d.ts
+++ b/components/confirmationoptions/ConfirmationOptions.d.ts
@ -8,8 +8,6 @@

 /**
 * Confirmation Service options.
- *
- * @group Interfaces
 */
 export interface ConfirmationOptions {
    /**
--- a/components/confirmationservice/ConfirmationService.d.ts
+++ b/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' {
--- a/components/datatable/DataTable.d.ts
+++ b/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 {
    /**
--- a/components/terminalservice/TerminalService.d.ts
+++ b/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;
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
--- a/layouts/doc/DocApiSection.vue
+++ b/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] });
                }
            }
--- a/layouts/doc/DocApiTable.vue
+++ b/layouts/doc/DocApiTable.vue
@ -1,68 +1,64 @@
 <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>
-                </p>
-            </DocSectionText>
-        </div>
+    <DocSectionText :id="id" :label="label" :level="componentLevel">
+        {{ description || null }}
+        <p v-if="relatedProp" class="inline-block">
+            See <NuxtLink :to="setRelatedPropPath(relatedProp)" class="doc-option-link"> {{ relatedProp }} </NuxtLink>
+        </p>
+    </DocSectionText>

-        <div v-if="!data[0].data" class="doc-tablewrapper mt-3">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th v-for="header in Object.keys(data[0])" :key="header">
-                            <template v-if="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'">
-                                {{ header }}
-                            </template>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <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' }">
-                            <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
-                                <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name">
-                                    {{ v }}
-                                    <NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" class="doc-option-link">
-                                        <i class="pi pi-link"></i>
-                                    </NuxtLink>
-                                </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>
+    <div v-if="!data[0].data" class="doc-tablewrapper mt-3">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th v-for="header in Object.keys(data[0])" :key="header">
+                        <template v-if="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'">
+                            {{ header }}
+                        </template>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <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' }">
+                        <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
+                            <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name">
+                                {{ v }}
+                                <NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" class="doc-option-link">
+                                    <i class="pi pi-link"></i>
+                                </NuxtLink>
+                            </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 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>
-                        </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 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>
+                    </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>
-    </section>
+    </template>
 </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: {
--- a/layouts/doc/DocSectionNav.vue
+++ b/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);
-        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: {
--- a/layouts/doc/DocSections.vue
+++ b/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" :header="$attrs.header" />
+                    <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" />
                </template>
            </template>