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

Apidoc latest updates

pull/4569/head
Tuğçe Küçükoğlu 2023-10-06 15:57:46 +03:00
parent 30bbdae2fc
commit b67a653952
2 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -293,6 +293,13 @@
} }
} }
&.doc-option-parameter {
> .doc-option-parameter-scope {
font-weight: 500;
color: var(--surface-600);
}
}
&:first-child { &:first-child {
color: var(--primary-color); color: var(--primary-color);
font-weight: 700; font-weight: 700;
@ -322,9 +329,9 @@
} }
} }
.doc-option-props { .doc-option-default,
.doc-option-returnType {
display: flex; display: flex;
background: var(--bluegray-50);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 6px; border-radius: 6px;
@ -343,6 +350,16 @@
} }
} }
} }
.doc-option-light {
background: var(--bluegray-50);
border-color: var(--bluegray-100);
}
.doc-option-dark {
background: var(--bluegray-800);
border-color: var(--bluegray-800);
}
} }
} }
} }

24
components/doc/DocApiTable.vue
View File

@ -22,17 +22,17 @@
<td <td
v-for="[k, v] in Object.entries(prop)" v-for="[k, v] in Object.entries(prop)"
:key="k" :key="k"
:class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }" :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-parameter': k === 'parameters' }"
:style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }" :style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }"
> >
<template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'"> <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"> <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> </span>
<template v-else-if="k === 'type'"> <template v-else-if="k === 'type'">
<template v-for="(value, i) in getType(v)" :key="value"> <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 {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link">{{ value }}</NuxtLink
><span v-else>{{ value }}</span> ><span v-else>{{ value }}</span>
</template> </template>
</template> </template>
@ -46,18 +46,22 @@
</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' }"> {{ v.name }} : </span> <span v-if="v.name" :class="{ 'doc-option-parameter-scope': label === 'Slots', 'doc-option-parameter-type': label === 'Emits' }"> {{ v.name }} : </span>
<template v-for="(value, i) in getType(v.type)" :key="value"> <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-name"> {{ value }} </NuxtLink>
<span v-else v-html="value"> </span> <span v-else v-html="value"> </span>
</template> </template>
</template> </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 }} {{ v === '' || v === undefined ? 'null' : v }}
</div> </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> </template>
</td> </td>
</tr> </tr>
@ -165,12 +169,6 @@ export default {
} }
return this.data[0].data ? 1 : 2; 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';
} }
} }
}; };