From 18311d32d84c508c6b3b5597008d7efbb5a85c35 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 1 Jul 2024 17:26:03 +0200
Subject: [PATCH] docs: improve props

---
 .../app/components/content/ComponentProps.vue |  2 ++
 .../content/ComponentPropsSchema.vue          | 31 +++++++++++++++++++
 .../content/HighlightInlineType.vue           | 13 +++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/content/ComponentPropsSchema.vue

diff --git a/docs/app/components/content/ComponentProps.vue b/docs/app/components/content/ComponentProps.vue
index f2801d05..d6e124d1 100644
--- a/docs/app/components/content/ComponentProps.vue
+++ b/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>
diff --git a/docs/app/components/content/ComponentPropsSchema.vue b/docs/app/components/content/ComponentPropsSchema.vue
new file mode 100644
index 00000000..b33e5c96
--- /dev/null
+++ b/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>
diff --git a/docs/app/components/content/HighlightInlineType.vue b/docs/app/components/content/HighlightInlineType.vue
index 817800a0..0d259010 100644
--- a/docs/app/components/content/HighlightInlineType.vue
+++ b/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>