vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Apidoc style improvements

pull/4485/head
Tuğçe Küçükoğlu 2023-09-20 20:52:07 +03:00
parent dbbd4e4486
commit b60095b3c6
3 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/build-apidoc.js
View File

@ -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 `;
}
}
});

22
assets/styles/layout/_doc.scss
View File

@ -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);
}
}
}
}

31
components/doc/DocApiTable.vue
View File

@ -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';
}
}
};