docs: update

docs/app/components/Header.vue

@@ -30,7 +30,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
       </NuxtLink>
     </template>
 
-    <UNavigationMenu :items="items" variant="link" />
+    <!-- <UNavigationMenu :items="items" variant="link" /> -->
 
     <template #right>
       <!-- <ColorPicker /> -->

docs/app/components/content/ComponentApi.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { upperFirst, camelCase } from 'scule'
+import type { ComponentMeta } from 'vue-component-meta'
+
+const props = defineProps<{ slug?: string }>()
+
+const route = useRoute()
+
+const name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+const componentMeta = await useComponentMeta(name as any)
+
+const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.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-1">${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" :tag="false" />
+</template>

docs/app/components/content/ComponentTheme.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import json5 from 'json5'
+import { parseMarkdown } from '@nuxtjs/mdc/runtime'
+import * as theme from '#build/ui'
+
+const props = defineProps<{ slug?: string }>()
+
+const route = useRoute()
+
+const name = props.slug || route.params.slug[route.params.slug.length - 1]
+
+const { data: ast } = await useAsyncData(`${name}-theme`, () => parseMarkdown(`
+## Theme
+
+\`\`\`yml
+${json5.stringify(theme[name], null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
+\`\`\`\
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize this component in your \`app.config.ts\` under \`ui.card\` key.
+::
+`))
+</script>
+
+<template>
+  <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
+</template>