From a561fb59c2c40c03dfe42e81c430ef83da7a7559 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: Fri, 6 Oct 2023 17:29:31 +0300
Subject: [PATCH] Apidoc table updates

---
 assets/styles/layout/_doc.scss |  9 +--------
 components/doc/DocApiTable.vue | 20 ++++++++------------
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 1983f485c..007aca2ab 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -271,7 +271,7 @@
             line-height: 1.5;
             scroll-margin-top: 6.5rem;
 
-            &.doc-option-type {
+            .doc-option-type {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 color: var(--primary-500);
                 font-weight: 500;
@@ -293,13 +293,6 @@
                 }
             }
 
-            &.doc-option-parameter {
-                > .doc-option-parameter-scope {
-                    font-weight: 500;
-                    color: var(--surface-600);
-                }
-            }
-
             &:first-child {
                 color: var(--primary-color);
                 font-weight: 700;
diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue
index 38deae290..febc56c3e 100644
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@@ -19,12 +19,7 @@
             </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-parameter': k === 'parameters' }"
-                        :style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }"
-                    >
+                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :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>
@@ -32,24 +27,25 @@
 
                             <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>
+                                    <span v-if="i !== 0" class="doc-option-type">{{ ' | ' }}</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="{ 'doc-option-parameter-scope': label === 'Slots', 'doc-option-parameter-type': label === 'Emits' }"> {{ v.name }} : </span>
+                                <span v-if="v.name" :class="{ 'font-medium text-600': 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 doc-option-parameter-name"> {{ value }} </NuxtLink>
-                                    <span v-else v-html="value"> </span>
+                                    {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link doc-option-parameter-type"> {{ value }} </NuxtLink>
+                                    <span v-else :class="{ 'doc-option-parameter-type': label === 'Emits' }" v-html="value"> </span>
                                 </template>
                             </template>