Merge branch 'master' into PV4555

api-generator/build-apidoc.js

@@ -385,14 +385,14 @@ if (project) {
 
                                                         child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
                                                             if (index !== 0) functionParameters += `, `;
-                                                            functionParameters += `<span class="text-800">${param.name}</span>: ${param.type?.name}`;
+                                                            functionParameters += `<span class="text-primary-700">${param.name}</span>: ${param.type?.name}`;
                                                         });
 
-                                                        type += `\t <span class="text-900">${child.name}</span>: <span class="text-600">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-500">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
+                                                        type += `\t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
                                                     } else {
                                                         const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
 
-                                                        type += ` \t <span class="text-900">${child.name}</span>: <span class="text-600">${childType}</span>, <span class="text-500">// ${child.comment?.summary[0]?.text}</span>\n `;
+                                                        type += ` \t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">${childType}</span>, <span class="text-primary-300">// ${child.comment?.summary[0]?.text}</span>\n `;
                                                     }
                                                 }
                                             });

assets/styles/layout/_code.scss

@@ -402,8 +402,7 @@ pre[class*="language-"] {
         margin: 0;
         color: var(--surface-900);
         font-size: 14px;
-        border-bottom-left-radius: 10px;
+        border-radius: 10px;
-        border-bottom-right-radius: 10px;
     }
     }
 

assets/styles/layout/_doc.scss

@@ -63,11 +63,12 @@
 }
 
 .doc-intro {
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
 
     p {
         font-size: 1.125rem;
         color: var(--surface-900);
+        margin: 0;
     }
 }
 
@@ -238,6 +239,10 @@
     pre {
         margin: 0;
     }
+
+    &:not(:last-child) {
+        margin-bottom: 1rem;
+    }
 }
 
 .doc-tablewrapper {
@@ -254,7 +259,7 @@
 
     th {
         border-bottom: 1px solid var(--surface-border);
-        padding: 1rem;
+        padding: .75rem 1rem;
         text-align: left;
         text-transform: capitalize;
     }
@@ -265,38 +270,36 @@
         }
 
         td {
-            padding: 1rem;
+            padding: .75rem 1rem;
             border-bottom: 1px solid var(--surface-border);
-            white-space: pre-wrap;
+            white-space: pre-line;
             line-height: 1.5;
             scroll-margin-top: 6.5rem;
 
-            &.doc-option-type {
+            &:first-child {
+                color: var(--primary-color);
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-type {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 color: var(--primary-500);
                 font-weight: 500;
 
-                > a {
-                    color: var(--primary-500);
-
-                    &:hover {
-                        text-decoration: underline;
-                    }
-                }
-
                 .doc-option-type-options-container {
                     display: flex;
                     align-items: center;
                 }
+
                 span.doc-option-type-options {
                     color: var(--primary-700);
                 }
-            }
 
-            &:first-child {
+                &.doc-option-link {
-                color: var(--primary-color);
+                    &:hover {
-                font-weight: 700;
+                        text-decoration: underline;
-                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                    }
+                }
             }
 
             .doc-option-name,
@@ -308,8 +311,9 @@
                 color: var(--highlight-text-color);
                 border-radius: 6px;
                 padding: 2px 6px;
-                font-weight: 400;
+                font-weight: 600;
                 font-style: normal;
+                white-space: nowrap;
 
                 .doc-option-link {
                     position: absolute;
@@ -322,16 +326,6 @@
                 }
             }
 
-            .doc-option-props {
-                display: flex;
-                background: var(--bluegray-50);
-                border-width: 1px;
-                border-style: solid;
-                border-radius: 6px;
-                padding: 2px 6px;
-                max-width: min-content;
-            }
-
             &:hover {
                 .doc-option-name {
                     .doc-option-link {
@@ -343,6 +337,43 @@
                     }
                 }
             }
+
+            .doc-option-default,
+            .doc-option-returnType {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 400;
+                font-style: normal;
+                display: flex;
+                border-width: 1px;
+                border-style: solid;
+                border-radius: 6px;
+                padding: 2px 6px;
+                max-width: min-content;
+            }
+
+            .doc-option-parameter-name {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-700);
+            }
+
+            .doc-option-parameter-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-500);
+            }
+
+            .doc-option-params {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-light {
+                background: var(--bluegray-50);
+                border-color: var(--bluegray-100);
+            }
+
+            .doc-option-dark {
+                background: var(--bluegray-800);
+                border-color: var(--bluegray-800);
+            }
         }
     }
 }

components/doc/DocApiTable.vue

@@ -19,45 +19,47 @@
             </thead>
             <tbody>
                 <tr v-for="prop in data" :key="prop">
-                    <td
+                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }">
-                        v-for="[k, v] in Object.entries(prop)"
-                        :key="k"
-                        :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }"
-                        :style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }"
-                    >
                         <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
                             <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
-                                {{ v }}<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" :class="['doc-option-link', optionLinkClass]"> <i class="pi pi-link"></i> </NuxtLink>
+                                {{ 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', optionLinkClass]">{{ value }}</NuxtLink
+                                    <span v-if="i !== 0" class="doc-option-type">{{ ' | ' }}</span>
-                                    ><span v-else>{{ value }}</span>
+                                    <NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-type doc-option-link">{{ value }}</NuxtLink
+                                    ><span v-else class="doc-option-type">{{ value }}</span>
                                 </template>
                             </template>
 
                             <template v-else-if="k === 'options'">
                                 <template v-for="val in v" :key="val.name">
                                     <div class="doc-option-type-options-container">
-                                        {{ val.name }}: <span class="doc-option-type-options">{{ val.type }}</span>
+                                        {{ val.name }}: <span class="doc-option-type-options doc-option-type">{{ val.type }}</span>
                                     </div>
                                 </template>
                             </template>
 
                             <template v-else-if="k === 'parameters'">
-                                <span v-if="v.name" :class="{ 'font-medium text-600': label === 'Slots' }"> {{ v.name }} : </span>
+                                <div class="doc-option-params">
+                                    <span v-if="v.name" :class="{ 'text-primary-700': label === 'Slots', 'doc-option-parameter-name': label === 'Emits' }"> {{ 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', optionLinkClass]"> {{ value }} </NuxtLink>
+                                        {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link doc-option-parameter-type"> {{ value }} </NuxtLink>
-                                    <span v-else v-html="value"> </span>
+                                        <span v-else :class="{ 'doc-option-parameter-type': label === 'Emits' }" v-html="value"> </span>
                                     </template>
+                                </div>
                             </template>
 
-                            <div v-else-if="k === 'default' || k === 'returnType'" :id="id + '.' + k" :class="['doc-option-props', optionPropClass]">
+                            <div v-else-if="k === 'default'" :id="id + '.' + k" :class="['doc-option-default', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']">
                                 {{ v === '' || v === undefined ? 'null' : v }}
                             </div>
 
-                            <span v-else :id="id + '.' + k"> {{ v }} </span>
+                            <div v-else-if="k === 'returnType'" :id="id + '.' + k" :class="['doc-option-returnType', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']">
+                                {{ v }}
+                            </div>
+
+                            <span v-else :id="id + '.' + k" class="doc-option-description"> {{ v }} </span>
                         </template>
                     </td>
                 </tr>
@@ -165,12 +167,6 @@ export default {
             }
 
             return this.data[0].data ? 1 : 2;
-        },
-        optionLinkClass() {
-            return this.$appState.darkTheme ? 'text-primary-400' : 'text-primary-600';
-        },
-        optionPropClass() {
-            return this.$appState.darkTheme ? 'border-bluegray-800 bg-bluegray-800' : 'border-bluegray-100 bg-bluegray-50';
         }
     }
 };

components/doc/DocSectionCode.vue

@@ -1,6 +1,10 @@
 <template>
-    <div v-if="!embedded" class="surface-card mb-4" :class="scrollable ? '' : 'relative'" style="border-radius: 10px">
+    <div v-if="!embedded" :class="scrollable ? 'doc-section-code' : 'relative doc-section-code'">
-        <div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1" :style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }">
+        <div
+            class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1"
+            :style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }"
+            style="gap: 0.75rem"
+        >
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
                     :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
@@ -76,7 +80,7 @@
             ></Button>
         </div>
 
-        <div class="relative doc-section-code overflow-auto" :style="scrollable ? { 'max-height': '40rem' } : undefined" style="border-radius: 10px">
+        <div :style="scrollable ? { 'max-height': '40rem' } : undefined">
             <template v-if="codeMode === 'basic' && importCode">
                 <pre v-code.script><code>{{ code.basic }}
 </code></pre>

components/doc/DocSections.vue

@@ -1,6 +1,6 @@
 <template>
     <template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
-        <section class="py-3">
+        <section class="py-4">
             <template v-if="doc.children">
                 <div :id="doc.id">
                     <DocSectionText :id="doc.id" :label="doc.label">

components/lib/scrollpanel/style/ScrollPanelStyle.js

@@ -16,7 +16,7 @@ const css = `
         width: calc(100% + 18px);
         padding: 0 18px 18px 0;
         position: relative;
-        overflow: scroll;
+        overflow: auto;
         box-sizing: border-box;
         scrollbar-width: none;
     }

components/lib/splitter/Splitter.d.ts

@@ -55,6 +55,21 @@ export interface SplitterResizeStartEvent {
     sizes: number[];
 }
 
+/**
+ * Custom resize event.
+ * @see {@link SplitterEmits.resize}
+ */
+export interface SplitterResizeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Sizes of the panels
+     */
+    sizes: number[];
+}
+
 /**
  * Custom resize end event.
  * @see {@link SplitterEmits.resizeend}
@@ -185,6 +200,11 @@ export interface SplitterEmits {
      * @param {SplitterResizeStartEvent} event - Custom resize start event.
      */
     resizestart(event: SplitterResizeStartEvent): void;
+    /**
+     * Callback to invoke during the resizing process.
+     * @param {SplitterResizeEvent} event - Custom resize event.
+     */
+    resize(event: SplitterResizeEvent): void;
     /**
      * Callback to invoke when resize ends.
      * @param {SplitterResizeEndEvent} event - Custom resize end event.

components/lib/splitter/Splitter.vue

@@ -28,7 +28,7 @@ import BaseSplitter from './BaseSplitter.vue';
 export default {
     name: 'Splitter',
     extends: BaseSplitter,
-    emits: ['resizestart', 'resizeend'],
+    emits: ['resizestart', 'resizeend', 'resize'],
     dragging: false,
     mouseMoveListener: null,
     mouseUpListener: null,
@@ -141,6 +141,8 @@ export default {
                 this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
                 this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
             }
+
+            this.$emit('resize', { originalEvent: event, sizes: this.panelSizes });
         },
         onResizeEnd(event) {
             if (this.isStateful()) {