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

docs: update

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-28 16:19:25 +02:00
parent fae627ed65
commit c9f9a248b7
23 changed files with 90 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
docs/app/components/content/ComponentApi.vue
View File

@@ -1,94 +0,0 @@
<script setup lang="ts">
import { upperFirst, camelCase } from 'scule'
import type { ComponentMeta } from 'vue-component-meta'
import * as theme from '#build/ui'
const route = useRoute()
const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
const name = `U${upperFirst(camelName)}`
const componentTheme = theme[camelName]
const componentMeta = await useComponentMeta(name as any)
const meta: ComputedRef<ComponentMeta> = computed(() => {
const meta = componentMeta.value.meta
if (meta.props?.length) {
meta.props = meta.props.map((prop) => {
prop.default = prop.default ?? componentTheme.defaultVariants?.[prop.name]
return prop
})
}
return meta
})
const { data: ast } = await useAsyncData(`${name}-api`, () => parseMarkdown(`
## API
${section('props')}
${section('slots')}
${section('events')}
`))
function section(type: string) {
const columns = {
props: [{ key: 'name', label: 'Prop' }, { key: 'default', label: 'Default' }, { key: 'type', addKey: 'description', label: 'Type' }],
slots: [{ key: 'name', label: 'Slot' }, { key: 'type', addKey: 'description', label: 'Type' }],
events: [{ key: 'name', label: 'Event' }, { key: 'type', addKey: 'description', label: 'Type' }]
}
const items = meta.value[type]
if (!items?.length) {
return ''
}
return `
### ${upperFirst(type)}
${table(items, columns[type])}
`
}
function table(items: any[], columns?: { key: string, addKey?: string, label: string }[], align: string = 'left') {
let table = ''
const separator = {
left: ':---',
right: '---:',
center: '---'
}
// Generate columns
const cols = columns?.length ? columns : Object.keys(items[0]).map(key => ({ key, label: upperFirst(key) }))
// Generate table headers
table += cols.map(col => col.label).join(' | ')
table += '\r\n'
// Generate table separator
table += cols.map(() => {
return separator[align] || separator.center
}).join(' | ')
table += '\r\n'
// Generate table body
items.forEach((item) => {
table += cols.map((col) => {
let code = item[col.key] ? `<code>${item[col.key].replaceAll('|', '&#124;')}</code>` : ''
if (col.addKey) {
code += item[col.addKey] ? `<p class="!mt-2">${item[col.addKey].replaceAll('\n\n', '<br>').replaceAll('\n', '<br>')}</p>` : ''
}
return code
}).join(' | ') + '\r\n'
})
return table
}
</script>
<template>
<MDCRenderer v-if="ast && (meta.props?.length || meta.slots?.length || meta.events?.length)" :body="ast.body" :data="ast.data" />
</template>

7
docs/app/components/content/ComponentEvents.vue
View File

@@ -1,15 +1,12 @@
<script setup lang="ts">
import { upperFirst, camelCase } from 'scule'
import type { ComponentMeta } from 'vue-component-meta'
const route = useRoute()
const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
const name = `U${upperFirst(camelName)}`
const componentMeta = await useComponentMeta(name as any)
const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta)
const meta = await fetchComponentMeta(name as any)
</script>
<template>
@@ -25,7 +22,7 @@ const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta
</ProseTr>
</ProseThead>
<ProseTbody>
<ProseTr v-for="event in meta.events" :key="event.name">
<ProseTr v-for="event in meta.meta.events" :key="event.name">
<ProseTd>
<ProseCodeInline class="text-primary-500 dark:text-primary-400">
{{ event.name }}

24
docs/app/components/content/ComponentProps.vue
View File

@@ -9,22 +9,18 @@ const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
const name = `U${upperFirst(camelName)}`
const componentTheme = theme[camelName]
const componentMeta = await useComponentMeta(name as any)
const meta = await fetchComponentMeta(name as any)
const meta: ComputedRef<ComponentMeta> = computed(() => {
const meta = componentMeta.value.meta
if (meta.props?.length) {
meta.props = meta.props.map((prop) => {
prop.default = prop.default ?? componentTheme.defaultVariants?.[prop.name]
return prop
})
const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
if (!meta?.meta?.props?.length) {
return []
}
return meta
return meta.meta.props.map((prop) => {
prop.default = prop.default ?? componentTheme?.defaultVariants?.[prop.name]
return prop
})
})
console.log('meta.value', meta.value)
</script>
<template>
@@ -43,9 +39,9 @@ console.log('meta.value', meta.value)
</ProseTr>
</ProseThead>
<ProseTbody>
<ProseTr v-for="prop in meta.props" :key="prop.name">
<ProseTr v-for="prop in metaProps" :key="prop.name">
<ProseTd>
<ProseCodeInline class="text-primary-500 dark:text-primary-400">
<ProseCodeInline>
{{ prop.name }}
</ProseCodeInline>
</ProseTd>

9
docs/app/components/content/ComponentSlots.vue
View File

@@ -1,15 +1,12 @@
<script setup lang="ts">
import { upperFirst, camelCase } from 'scule'
import type { ComponentMeta } from 'vue-component-meta'
const route = useRoute()
const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
const name = `U${upperFirst(camelName)}`
const componentMeta = await useComponentMeta(name as any)
const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta)
const meta = await fetchComponentMeta(name as any)
</script>
<template>
@@ -25,9 +22,9 @@ const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta
</ProseTr>
</ProseThead>
<ProseTbody>
<ProseTr v-for="slot in meta.slots" :key="slot.name">
<ProseTr v-for="slot in meta.meta.slots" :key="slot.name">
<ProseTd>
<ProseCodeInline class="text-primary-500 dark:text-primary-400">
<ProseCodeInline>
{{ slot.name }}
</ProseCodeInline>
</ProseTd>