From b60095b3c6a57f9a37a63659d517507a81026c3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 20 Sep 2023 20:52:07 +0300
Subject: [PATCH] Apidoc style improvements

---
 api-generator/build-apidoc.js  |  6 +++---
 assets/styles/layout/_doc.scss | 22 ++++++++++++----------
 components/doc/DocApiTable.vue | 31 +++++++++++++++++++++----------
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/api-generator/build-apidoc.js b/api-generator/build-apidoc.js
index ca1d5f8b4..e5ce7c4ef 100644
--- a/api-generator/build-apidoc.js
+++ b/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 += `${param.name}: ${param.type?.name}`;
+                                                            functionParameters += `<span class="text-800">${param.name}</span>: ${param.type?.name}`;
                                                         });
 
-                                                        type += `\t <span class="font-medium">${child.name}</span>: (${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`;
+                                                        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`;
                                                     } else {
                                                         const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
 
-                                                        type += ` \t <span class="font-medium">${child.name}</span>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
+                                                        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 `;
                                                     }
                                                 }
                                             });
diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 0627b3521..2f980cfe0 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -276,6 +276,7 @@
             &.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);
@@ -294,11 +295,6 @@
                 }
             }
 
-            &.doc-option-default {
-                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
-                color: var(--primary-color);
-            }
-
             &:first-child {
                 color: var(--primary-color);
                 font-weight: 700;
@@ -307,7 +303,7 @@
 
             .doc-option-name,
             > i:not(.pi) {
-                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-family: Inter, sans-serif;;
                 position: relative;
                 scroll-margin-top: 6.5rem;
                 background-color: var(--highlight-bg);
@@ -328,6 +324,16 @@
                 }
             }
 
+            .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 {
@@ -339,10 +345,6 @@
                     }
                 }
             }
-
-            .doc-option-link {
-                color: var(--primary-color);
-            }
         }
     }
 }
diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue
index bbd19a608..83d289af1 100644
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@@ -19,17 +19,20 @@
             </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' || k === 'options', 'doc-option-default': k === 'defaultValue' }">
+                    <td
+                        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">
-                                    <i class="pi pi-link"></i>
-                                </NuxtLink>
+                                {{ v }}<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" :class="['doc-option-link', optionLinkClass]"> <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
+                                    {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" :class="['doc-option-link', optionLinkClass]">{{ value }}</NuxtLink
                                     ><span v-else>{{ value }}</span>
                                 </template>
                             </template>
@@ -43,16 +46,18 @@
                             </template>
 
                             <template v-else-if="k === 'parameters'">
-                                <span v-if="v.name" :class="{ 'font-bold': label === 'Slots' }"> {{ v.name }} : </span>
+                                <span v-if="v.name" :class="{ 'font-medium text-600': label === 'Slots' }"> {{ 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>
+                                    {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" :class="['doc-option-link', optionLinkClass]"> {{ value }} </NuxtLink>
                                     <span v-else v-html="value"> </span>
                                 </template>
                             </template>
 
-                            <span v-else :id="id + '.' + k">
+                            <div v-else-if="(k === 'default' && v !== '') || k === 'returnType'" :id="id + '.' + k" :class="['doc-option-props', optionPropClass]">
                                 {{ v }}
-                            </span>
+                            </div>
+
+                            <span v-else :id="id + '.' + k"> {{ v }} </span>
                         </template>
                     </td>
                 </tr>
@@ -160,6 +165,12 @@ 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';
         }
     }
 };