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>

docs/app/components/content/ComponentExample.vue

@@ -10,6 +10,11 @@ const props = defineProps<{
    * @defaultValue false
    */
   prettier?: boolean
+  /**
+   * Whether to collapse the code block
+   * @defaultValue false
+   */
+  collapse?: boolean
 }>()
 
 const { $prettier } = useNuxtApp()
@@ -20,7 +25,25 @@ const data = await fetchComponentExample(camelName)
 
 const componentProps = reactive({ ...(props.props || {}) })
 
-const code = computed(() => `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``)
+const code = computed(() => {
+  let code = ''
+
+  if (props.collapse) {
+    code += `::code-collapse
+`
+  }
+
+  code += `\`\`\`vue
+${data?.code ?? ''}
+\`\`\``
+
+  if (props.collapse) {
+    code += `
+::`
+  }
+
+  return code
+})
 
 const { data: ast } = await useAsyncData(`component-example-${camelName}`, async () => {
   if (!props.prettier) {
@@ -50,6 +73,6 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, async
       </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>

docs/app/components/content/ComponentTheme.vue

@@ -44,6 +44,7 @@ const component = computed(() => {
 
 const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
   const md = `
+::code-collapse
 \`\`\`ts [app.config.ts]
 export default defineAppConfig({
   ui: {
@@ -52,6 +53,8 @@ export default defineAppConfig({
 })
 \`\`\`\
 
+::
+
 ${strippedCompoundVariants.value
 ? `
 ::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/theme/${name}.ts"}