docs: improve props and preset

This commit is contained in:
Benjamin Canac
2023-07-28 14:09:13 +02:00
parent 94f1c4e6a0
commit e6d1106b83
2 changed files with 17 additions and 32 deletions

View File

@@ -23,7 +23,7 @@ const name = `U${useUpperFirst(camelName)}`
const preset = appConfig.ui[camelName] const preset = appConfig.ui[camelName]
const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', ` const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
\`\`\`json \`\`\`json [appConfig.ui.${camelName}]
${JSON.stringify(preset, null, 2)} ${JSON.stringify(preset, null, 2)}
\`\`\`\ \`\`\`\
`, { `, {

View File

@@ -1,36 +1,21 @@
<template> <template>
<div> <div>
<table class="table-fixed"> <FieldGroup>
<thead> <Field v-for="prop in metaProps" :key="prop.name" v-bind="prop">
<tr> <code v-if="prop.default">{{ prop.default }}</code>
<th class="w-[25%]">
Prop <Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
</th> <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
<th class="w-[50%]"> <Field v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" v-bind="subProp" />
Default </FieldGroup>
</th> </Collapsible>
<th>Description</th> <Collapsible v-else-if="prop.schema?.kind === 'object' && Object.values(prop.schema.schema)?.length">
</tr> <FieldGroup class="!mt-0">
</thead> <Field v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" v-bind="subProp" />
<tbody> </FieldGroup>
<tr v-for="prop in metaProps" :key="prop.name"> </Collapsible>
<td class="relative flex-shrink-0"> </Field>
<code>{{ prop.name }}</code><span v-if="prop.required" class="font-bold text-red-500 dark:text-red-400 absolute top-0 ml-1">*</span> </FieldGroup>
</td>
<td>
<code v-if="prop.default">{{ prop.default }}</code>
</td>
<td>
<a v-if="prop.default === `appConfig.ui.${camelName}`" href="#preset">
<code>{{ prop.type }}</code>
</a>
<code v-else class="break-all">
{{ prop.type }}
</code>
</td>
</tr>
</tbody>
</table>
</div> </div>
</template> </template>