arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 00:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve props types (#588)

Browse Source
This commit is contained in:
Benjamin Canac
2023-09-04 13:48:55 +02:00
parent f12c149e4e
commit 53b2655ae5
16 changed files with 62 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/components/content/ComponentProps.vue
View File

@@ -1,20 +1,7 @@
<template>
<div>
<FieldGroup>
<Field v-for="prop in metaProps" :key="prop.name" v-bind="prop">
<code v-if="prop.default">{{ prop.default }}</code>
<Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
<FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
<Field v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" v-bind="subProp" />
</FieldGroup>
</Collapsible>
<Collapsible v-else-if="prop.schema?.kind === 'object' && Object.values(prop.schema.schema)?.length">
<FieldGroup class="!mt-0">
<Field v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" v-bind="subProp" />
</FieldGroup>
</Collapsible>
</Field>
<ComponentPropsField v-for="prop in meta?.meta?.props" :key="prop.name" :prop="prop" />
</FieldGroup>
</div>
</template>
@@ -34,8 +21,4 @@ const camelName = useCamelCase(slug)
const name = `U${useUpperFirst(camelName)}`
const meta = await fetchComponentMeta(name)
const metaProps = computed(() => useSortBy(meta?.meta?.props || [], [
prop => ['string', 'number', 'boolean', 'any'].indexOf(prop.type)
]))
</script>

43
docs/components/content/ComponentPropsField.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<Field v-bind="prop">
<code v-if="prop.default">{{ prop.default }}</code>
<Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
<FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
<ComponentPropsField v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" :prop="subProp" />
</FieldGroup>
</Collapsible>
<Collapsible v-else-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'array').length">
<FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
<template v-for="subSchema in schema.schema" :key="subSchema.name">
<ComponentPropsField v-for="subProp in Object.values(subSchema.schema)" :key="(subProp as any).name" :prop="subProp" />
</template>
</FieldGroup>
</Collapsible>
<Collapsible v-else-if="prop.schema?.kind === 'object' && prop.schema.type !== 'Function' && Object.values(prop.schema.schema)?.length">
<FieldGroup class="!mt-0">
<ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
</FieldGroup>
</Collapsible>
<div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type)" class="space-x-1 leading-7 -my-1">
<code v-for="value in prop.schema.schema" :key="value">{{ value }}</code>
</div>
</Field>
</template>
<script setup lang="ts">
defineProps({
prop: {
type: Object as PropType<any>,
default: () => ({})
}
})
function startsWithCapital (word) {
if (word.charAt(0).startsWith('"')) {
return false
}
return word.charAt(0) === word.charAt(0).toUpperCase()
}
</script>