Doc API Cosmetics

pull/4591/head
Cagatay Civici 2023-10-06 21:43:54 +03:00
parent 9b30ce7d1a
commit 67706acd01
4 changed files with 248 additions and 229 deletions

View File

@ -385,14 +385,14 @@ if (project) {
child.type?.declaration?.signatures[0]?.parameters.map((param, index) => { child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
if (index !== 0) functionParameters += `, `; 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 { } else {
const childType = child.type.elementType ? child.type.elementType.name : child.type.name; 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 `;
} }
} }
}); });

View File

@ -259,7 +259,7 @@
th { th {
border-bottom: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border);
padding: .75rem; padding: .75rem 1rem;
text-align: left; text-align: left;
text-transform: capitalize; text-transform: capitalize;
} }
@ -270,37 +270,36 @@
} }
td { td {
padding: .75rem; padding: .75rem 1rem;
border-bottom: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border);
white-space: pre-wrap; white-space: pre-line;
line-height: 1.5; line-height: 1.5;
scroll-margin-top: 6.5rem; scroll-margin-top: 6.5rem;
&:first-child {
color: var(--primary-color);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
}
.doc-option-type { .doc-option-type {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
color: var(--primary-500); color: var(--primary-500);
font-weight: 500; font-weight: 500;
> a {
color: var(--primary-500);
&:hover {
text-decoration: underline;
}
}
.doc-option-type-options-container { .doc-option-type-options-container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
span.doc-option-type-options { span.doc-option-type-options {
color: var(--primary-700); color: var(--primary-700);
} }
}
&:first-child { &.doc-option-link {
color: var(--primary-color); &:hover {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; text-decoration: underline;
}
}
} }
.doc-option-name, .doc-option-name,
@ -312,8 +311,9 @@
color: var(--highlight-text-color); color: var(--highlight-text-color);
border-radius: 6px; border-radius: 6px;
padding: 2px 6px; padding: 2px 6px;
font-weight: 400; font-weight: 600;
font-style: normal; font-style: normal;
white-space: nowrap;
.doc-option-link { .doc-option-link {
position: absolute; position: absolute;
@ -326,16 +326,6 @@
} }
} }
.doc-option-default,
.doc-option-returnType {
display: flex;
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding: 2px 6px;
max-width: min-content;
}
&:hover { &:hover {
.doc-option-name { .doc-option-name {
.doc-option-link { .doc-option-link {
@ -348,6 +338,33 @@
} }
} }
.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 { .doc-option-light {
background: var(--bluegray-50); background: var(--bluegray-50);
border-color: var(--bluegray-100); border-color: var(--bluegray-100);

View File

@ -42,11 +42,13 @@
</template> </template>
<template v-else-if="k === 'parameters'"> <template v-else-if="k === 'parameters'">
<span v-if="v.name" :class="{ 'font-medium text-600': label === 'Slots', 'doc-option-parameter-name': label === 'Emits' }"> {{ v.name }} : </span> <div class="doc-option-params">
<template v-for="(value, i) in getType(v.type)" :key="value"> <span v-if="v.name" :class="{ 'text-primary-700': label === 'Slots', 'doc-option-parameter-name': label === 'Emits' }"> {{ v.name }} : </span>
{{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link doc-option-parameter-type"> {{ value }} </NuxtLink> <template v-for="(value, i) in getType(v.type)" :key="value">
<span v-else :class="{ 'doc-option-parameter-type': label === 'Emits' }" v-html="value"> </span> {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link doc-option-parameter-type"> {{ value }} </NuxtLink>
</template> <span v-else :class="{ 'doc-option-parameter-type': label === 'Emits' }" v-html="value"> </span>
</template>
</div>
</template> </template>
<div v-else-if="k === 'default'" :id="id + '.' + k" :class="['doc-option-default', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']"> <div v-else-if="k === 'default'" :id="id + '.' + k" :class="['doc-option-default', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']">

File diff suppressed because it is too large Load Diff