docs(app): handle prose components (#3030)

Co-authored-by: Benjamin Canac <[email protected]>

docs/app/app.vue

@@ -151,4 +151,6 @@ html[data-module="ui-pro"] .ui-only,
 html[data-module="ui"] .ui-pro-only {
   display: none;
 }
+
+/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full */
 </style>

docs/app/components/content/ComponentCode.vue

@@ -42,6 +42,7 @@ const castMap: Record<string, Cast> = {
 
 const props = defineProps<{
   pro?: boolean
+  prose?: boolean
   prefix?: string
   /** Override the slug taken from the route */
   slug?: string
@@ -91,6 +92,10 @@ const component = defineAsyncComponent(() => {
       return import(`#ui-pro/components/${props.prefix}/${upperFirst(camelName)}.vue`)
     }
 
+    if (props.prose) {
+      return import(`#ui-pro/components/prose/${upperFirst(camelName)}.vue`)
+    }
+
     return import(`#ui-pro/components/${upperFirst(camelName)}.vue`)
   }
 
@@ -121,7 +126,7 @@ function setComponentProp(name: string, value: any) {
   set(componentProps, name, value)
 }
 
-const componentTheme = ((props.pro ? themePro : theme) as any)[camelName]
+const componentTheme = ((props.pro ? props.prose ? themePro.prose : themePro : theme) as any)[camelName]
 const meta = await fetchComponentMeta(name as any)
 
 function mapKeys(obj: object, parentKey = ''): any {
@@ -169,6 +174,30 @@ const options = computed(() => {
 const code = computed(() => {
   let code = ''
 
+  if (props.prose) {
+    code += `\`\`\`mdc
+::${camelName}`
+
+    const proseProps = Object.entries(componentProps).map(([key, value]) => {
+      if (value === undefined || value === null || value === '' || props.hide?.includes(key)) {
+        return
+      }
+
+      return `${key}="${value}"`
+    }).filter(Boolean).join(' ')
+
+    if (proseProps.length) {
+      code += `{${proseProps}}`
+    }
+
+    code += `
+${props.slots?.default}
+::
+\`\`\``
+
+    return code
+  }
+
   if (props.collapse) {
     code += `::code-collapse
 `

docs/app/components/content/ComponentEmits.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { upperFirst, camelCase } from 'scule'
 
+const props = defineProps<{
+  prose?: boolean
+}>()
+
 const route = useRoute()
 
 const camelName = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
-const name = `U${upperFirst(camelName)}`
+const name = props.prose ? `Prose${upperFirst(camelName)}` : `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name as any)
 </script>

docs/app/components/content/ComponentProps.vue

@@ -8,6 +8,7 @@ const props = withDefaults(defineProps<{
   name?: string
   ignore?: string[]
   pro?: boolean
+  prose?: boolean
 }>(), {
   ignore: () => [
     'activeClass',
@@ -34,9 +35,9 @@ const props = withDefaults(defineProps<{
 const route = useRoute()
 
 const camelName = camelCase(props.name ?? route.params.slug?.[route.params.slug.length - 1] ?? '')
-const componentName = `U${upperFirst(camelName)}`
+const componentName = props.prose ? `Prose${upperFirst(camelName)}` : `U${upperFirst(camelName)}`
 
-const componentTheme = ((props.pro ? themePro : theme) as any)[camelName]
+const componentTheme = ((props.pro ? props.prose ? themePro.prose : themePro : theme) as any)[camelName]
 const meta = await fetchComponentMeta(componentName as any)
 
 const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {

docs/app/components/content/ComponentSlots.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { upperFirst, camelCase } from 'scule'
 
+const props = defineProps<{
+  prose?: boolean
+}>()
+
 const route = useRoute()
 
 const camelName = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
-const name = `U${upperFirst(camelName)}`
+const name = props.prose ? `Prose${upperFirst(camelName)}` : `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name as any)
 </script>

docs/app/components/content/ComponentTheme.vue

@@ -6,18 +6,23 @@ import * as themePro from '#build/ui-pro'
 
 const props = defineProps<{
   pro?: boolean
+  prose?: boolean
+  slug?: string
+  extra?: string[]
 }>()
 
 const route = useRoute()
 const { framework } = useSharedData()
 
-const name = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
+const name = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '')
 
 const strippedCompoundVariants = ref(false)
 
+const computedTheme = computed(() => props.pro ? props.prose ? themePro.prose : themePro : theme)
+
 const strippedTheme = computed(() => {
   const strippedTheme = {
-    ...((props.pro ? themePro : theme) as any)[name]
+    ...(computedTheme.value as any)[name]
   }
 
   if (strippedTheme?.compoundVariants) {
@@ -54,10 +59,21 @@ const strippedTheme = computed(() => {
 })
 
 const component = computed(() => {
+  const baseKey = props.pro ? 'uiPro' : 'ui'
+
+  const content = props.prose
+    ? { prose: { [name]: strippedTheme.value } }
+    : { [name]: strippedTheme.value }
+
+  if (props.extra?.length) {
+    props.extra.forEach((extra) => {
+      const target = props.prose ? content.prose! : content
+      target[extra as keyof typeof target] = computedTheme.value[extra as keyof typeof computedTheme.value]
+    })
+  }
+
   return {
-    [props.pro ? 'uiPro' : 'ui']: {
-      [name]: strippedTheme.value
-    }
+    [baseKey]: content
   }
 })