docs: update

docs/app/components/content/ComponentApi.vue

@@ -1,16 +1,28 @@
 <script setup lang="ts">
 import { upperFirst, camelCase } from 'scule'
 import type { ComponentMeta } from 'vue-component-meta'
-
-const props = defineProps<{ slug?: string }>()
+import * as theme from '#build/ui'
 
 const route = useRoute()
 
-const name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+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(() => componentMeta.value.meta)
+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
@@ -66,7 +78,7 @@ function table(items: any[], columns?: { key: string, addKey?: string, label: st
       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>` : ''
+        code += item[col.addKey] ? `<p class="!mt-2">${item[col.addKey].replaceAll('\n\n', '<br>').replaceAll('\n', '<br>')}</p>` : ''
       }
 
       return code
@@ -78,5 +90,5 @@ function table(items: any[], columns?: { key: string, addKey?: string, label: st
 </script>
 
 <template>
-  <MDCRenderer v-if="ast && (meta.props?.length || meta.slots?.length || meta.events?.length)" :body="ast.body" :data="ast.data" :tag="false" />
+  <MDCRenderer v-if="ast && (meta.props?.length || meta.slots?.length || meta.events?.length)" :body="ast.body" :data="ast.data" />
 </template>

docs/app/components/content/ComponentEvents.vue

@@ -0,0 +1,42 @@
+<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)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Event
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="event in meta.events" :key="event.name">
+        <ProseTd>
+          <ProseCodeInline>
+            {{ event.name }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="event.type" lang="ts">
+            {{ event.type }}
+          </ProseCodeInline>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>

docs/app/components/content/ComponentProps.vue

@@ -0,0 +1,69 @@
+<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
+})
+
+console.log('meta.value', meta.value)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Prop
+        </ProseTh>
+        <ProseTh>
+          Default
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="prop in meta.props" :key="prop.name">
+        <ProseTd>
+          <ProseCodeInline>
+            {{ prop.name }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.default">
+            {{ prop.default }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.type" lang="ts">
+            {{ prop.type }}
+          </ProseCodeInline>
+
+          <ProseP class="mt-1 mb-0 text-gray-500 dark:text-gray-400">
+            {{ prop.description }}
+          </ProseP>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>

docs/app/components/content/ComponentSlots.vue

@@ -0,0 +1,46 @@
+<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)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Slot
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="slot in meta.slots" :key="slot.name">
+        <ProseTd>
+          <ProseCodeInline>
+            {{ slot.name }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="slot.type" lang="ts">
+            {{ slot.type }}
+          </ProseCodeInline>
+
+          <ProseP class="mt-1 mb-0 text-gray-500 dark:text-gray-400">
+            {{ slot.description }}
+          </ProseP>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>

docs/app/components/content/ComponentTheme.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import json5 from 'json5'
+import { camelCase } from 'scule'
 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 name = camelCase(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')}
 \`\`\`\

docs/content/2.components/accordion.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/alert.md

@@ -9,6 +9,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/avatar-group.md

@@ -11,6 +11,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/avatar.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/badge.md

@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/breadcrumb.md

@@ -11,6 +11,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/button-group.md

@@ -11,6 +11,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/button.md

@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/card.md

@@ -20,6 +20,20 @@ componentProps:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/carousel.md

@@ -16,6 +16,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/checkbox.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/chip.md

@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/collapsible.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/command-palette.md

@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/container.md

@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/context-menu.md

@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/drawer.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/dropdown-menu.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/form-field.md

@@ -265,6 +265,20 @@ componentProps:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/input-menu.md

@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/input.md

@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/kbd.md

@@ -13,6 +13,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/meter.md

@@ -17,6 +17,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/modal.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/navigation-menu.md

@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/pagination.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/popover.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/progress.md

@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/radio-group.md

@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/select-menu.md

@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/select.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/separator.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/skeleton.md

@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/slideover.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/slider.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/switch.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/table.md

@@ -16,6 +16,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/tabs.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/textarea.md

@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/toast.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme

docs/content/2.components/tooltip.md

@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme