docs(ComponentCode/ComponentExample/ComponentTheme): handle collapse

docs/app/components/content/ComponentCode.vue

@@ -22,6 +22,11 @@ const props = defineProps<{
    * @defaultValue false
    */
   prettier?: boolean
+  /**
+   * Whether to collapse the code block
+   * @defaultValue false
+   */
+  collapse?: boolean
 }>()
 
 const route = useRoute()
@@ -84,7 +89,14 @@ const options = computed(() => {
 })
 
 const code = computed(() => {
-  let code = `\`\`\`vue`
+  let code = ''
+
+  if (props.collapse) {
+    code += `::code-collapse
+`
+  }
+
+  code += `\`\`\`vue`
 
   if (props.external?.length) {
     code += `
@@ -157,6 +169,11 @@ const code = computed(() => {
 \`\`\`
 `
 
+  if (props.collapse) {
+    code += `
+::`
+  }
+
   return code
 })
 
@@ -243,6 +260,6 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
       </div>
     </div>
 
-    <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
+    <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0" />
   </div>
 </template>