Pass Through options added to documentation

pull/4258/head
Tuğçe Küçükoğlu 2023-08-10 12:07:31 +03:00
parent eca735c8c8
commit d474f11d35
3 changed files with 33 additions and 7 deletions

View File

@ -275,6 +275,14 @@
text-decoration: underline; text-decoration: underline;
} }
} }
.doc-option-type-options-container {
display: flex;
align-items: center;
}
span.doc-option-type-options {
color: var(--primary-700);
}
} }
&.doc-option-default { &.doc-option-default {
@ -289,7 +297,7 @@
} }
.doc-option-name, .doc-option-name,
> i { > i:not(.pi) {
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;
position: relative; position: relative;
scroll-margin-top: 6.5rem; scroll-margin-top: 6.5rem;

View File

@ -19,7 +19,7 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="prop in data" :key="prop"> <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', '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' }">
<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 {{ v
@ -34,6 +34,14 @@
</template> </template>
</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>
</div>
</template>
</template>
<template v-else-if="k === 'parameters'"> <template v-else-if="k === 'parameters'">
<span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ v.name }} : </span> <span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ 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">

View File

@ -2,14 +2,24 @@ import APIDocs from '@/doc/common/apidoc/index.json';
export const getPTOption = (name) => { export const getPTOption = (name) => {
const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`] || APIDocs[name.toLowerCase()].interfaces.values[`${name}DirectivePassThroughOptions`]; const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`] || APIDocs[name.toLowerCase()].interfaces.values[`${name}DirectivePassThroughOptions`];
const options = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughMethodOptions`];
let data = []; let data = [];
for (const [i, prop] of props.entries()) { for (const [i, prop] of props.entries()) {
data.push({ if (options) {
value: i + 1, data.push({
label: prop.name, value: i + 1,
description: prop.description label: prop.name,
}); options: options?.props,
description: prop.description
});
} else {
data.push({
value: i + 1,
label: prop.name,
description: prop.description
});
}
} }
return data; return data;