docs: improve props

docs/app/components/content/ComponentProps.vue

@@ -52,6 +52,8 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
           <HighlightInlineType v-if="prop.type" :type="prop.type" />
 
           <MDC v-if="prop.description" :value="prop.description" class="text-gray-600 dark:text-gray-300 mt-1" />
+
+          <ComponentPropsSchema v-if="prop.schema" :prop="prop" />
         </ProseTd>
       </ProseTr>
     </ProseTbody>

docs/app/components/content/ComponentPropsSchema.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PropertyMeta } from 'vue-component-meta'
+
+const props = defineProps<{
+  prop: PropertyMeta
+}>()
+
+function getSchemaProps(schema: PropertyMeta['schema']) {
+  if (!schema || typeof schema === 'string') {
+    return []
+  }
+
+  if (schema.kind === 'object') {
+    return Object.values(schema.schema)
+  }
+
+  return (Array.isArray(schema.schema) ? schema.schema : Object.values(schema.schema)).flatMap(getSchemaProps)
+}
+
+const schemaProps = computed(() => getSchemaProps(props.prop.schema))
+</script>
+
+<template>
+  <Collapsible v-if="schemaProps?.length" class="mt-1" :ui="{ trigger: 'ml-1.5' }">
+    <ProseUl>
+      <ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
+        <HighlightInlineType :type="`${schemaProp.name}: ${schemaProp.type}`" />
+      </ProseLi>
+    </ProseUl>
+  </Collapsible>
+</template>

docs/app/components/content/HighlightInlineType.vue

@@ -5,7 +5,18 @@ const props = defineProps<{
   type: string
 }>()
 
-const { data: ast } = await useAsyncData<any>(`hightlight-inline-code-` + props.type, () => parseMarkdown(`\`${props.type}\`{lang="ts-type"}`))
+const type = computed(() => {
+  if (props.type.includes(', "as" | "asChild" | "forceMount">')) {
+    return props.type.replace(`, "as" | "asChild" | "forceMount">`, ``).replace('Omit<', '')
+  }
+  if (props.type.includes(', "as" | "asChild">')) {
+    return props.type.replace(', "as" | "asChild">', '').replace('Omit<', '')
+  }
+
+  return props.type
+})
+
+const { data: ast } = await useAsyncData<any>(`hightlight-inline-code-` + props.type, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
 </script>
 
 <template>