docs(ComponentCode/ComponentExample): disable prettier by default

docs/app/components/content/ComponentCode.vue

@@ -16,6 +16,11 @@ const props = defineProps<{
   items?: { [key: string]: string[] }
   props?: { [key: string]: any }
   slots?: { [key: string]: any }
+  /**
+   * Whether to format the code with Prettier
+   * @defaultValue false
+   */
+  prettier?: boolean
 }>()
 
 const route = useRoute()
@@ -85,23 +90,26 @@ const code = computed(() => {
 <script setup lang="ts">
 `
     for (const key of props.external) {
-      code += `const ${key} = ${json5.stringify(componentProps[key], null, 2).replace(/,([ |\t\n]+[}|\]])/g, '$1')}
-
+      code += `const ${key === 'modelValue' ? 'value' : key} = ref(${json5.stringify(componentProps[key], null, 2).replace(/,([ |\t\n]+[}|\]])/g, '$1')})
 `
     }
-    code += `
-<\/script>
+    code += `<\/script>
 `
   }
 
   code += `
 <template>
-<${name}`
+  <${name}`
   for (const [key, value] of Object.entries(componentProps)) {
     if (value === undefined || value === null || value === '' || props.hide?.includes(key)) {
       continue
     }
 
+    if (key === 'modelValue') {
+      code += ` v-model="value"`
+      continue
+    }
+
     const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
     const name = kebabCase(key)
 
@@ -130,13 +138,7 @@ const code = computed(() => {
 
   if (props.slots) {
     if (props.slots && Object.keys(props.slots).length === 1 && props.slots.default) {
-      if (Object.keys(props.props || {}).length > 0) {
-        code += `>
-${props.slots.default}
-</${name}>`
-      } else {
-        code += `>${props.slots.default}</${name}>`
-      }
+      code += `>${props.slots.default}</${name}>`
     } else {
       code += `>
   ${Object.entries(props.slots).map(([key, value]) => `<template #${key}>
@@ -155,6 +157,10 @@ ${props.slots.default}
 })
 
 const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringify({ props: componentProps, slots: props.slots })}`, async () => {
+  if (!props.prettier) {
+    return parseMarkdown(code.value)
+  }
+
   let formatted = ''
   try {
     formatted = await $prettier.format(code.value, {

docs/app/components/content/ComponentExample.vue

@@ -4,6 +4,11 @@ import { camelCase } from 'scule'
 const props = defineProps<{
   name: string
   props?: { [key: string]: any }
+  /**
+   * Whether to format the code with Prettier
+   * @defaultValue false
+   */
+  prettier?: boolean
 }>()
 
 const { $prettier } = useNuxtApp()
@@ -17,6 +22,10 @@ const componentProps = reactive({ ...(props.props || {}) })
 const code = computed(() => `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``)
 
 const { data: ast } = await useAsyncData(`component-example-${camelName}`, async () => {
+  if (!props.prettier) {
+    return parseMarkdown(code.value)
+  }
+
   let formatted = ''
   try {
     formatted = await $prettier.format(code.value, {

docs/content/3.components/alert.md

@@ -23,6 +23,7 @@ Use the `description` prop to set the description of the Alert.
 
 ::component-code
 ---
+prettier: true
 props:
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
@@ -35,6 +36,7 @@ Use the `icon` prop to show an [Icon](/components/icon).
 
 ::component-code
 ---
+prettier: true
 ignore:
   - title
   - description
@@ -51,6 +53,7 @@ Use the `avatar` prop to show an [Avatar](/components/avatar).
 
 ::component-code
 ---
+prettier: true
 ignore:
   - title
   - description
@@ -67,6 +70,7 @@ Use the `color` and `variant` props to change the style of the Alert.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - title
   - description
@@ -92,6 +96,7 @@ Use the `close-icon` prop to customize the button [Icon](/components/icon). Defa
 
 ::component-code
 ---
+prettier: true
 ignore:
   - title
   - description
@@ -112,6 +117,7 @@ You can pass all the props of the [Button](/components/button) component to cust
 
 ::component-code
 ---
+prettier: true
 ignore:
   - title
   - description
@@ -133,6 +139,7 @@ Use the `actions` prop to add some [Button](/components/button) actions to the A
 
 ::component-code
 ---
+prettier: true
 ignore:
   - title
   - actions
@@ -159,6 +166,7 @@ Use the `class` prop to override the base styles of the Button.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - title
   - description
@@ -175,6 +183,7 @@ Use the `ui` prop to override the slots styles of the Button.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - ui
   - title

docs/content/3.components/avatar-group.md

@@ -13,6 +13,7 @@ Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
 
 ::component-code
 ---
+prettier: true
 slots:
   default: |
 
@@ -31,6 +32,7 @@ Use the `size` prop to change the size of all the avatars.
 
 ::component-code
 ---
+prettier: true
 props:
   size: md
 slots:
@@ -51,10 +53,12 @@ Use the `max` prop to limit the number of avatars displayed. The rest will be di
 
 ::component-code
 ---
+prettier: true
 props:
   max: 2
 slots:
-  default: >
+  default: |
+
     <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
     <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
     <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />

docs/content/3.components/button-group.md

@@ -13,6 +13,7 @@ Wrap multiple [Button](/components/button) within a ButtonGroup to group them to
 
 ::component-code
 ---
+prettier: true
 slots:
   default: |
 
@@ -29,6 +30,7 @@ Use the `size` prop to change the size of all the buttons.
 
 ::component-code
 ---
+prettier: true
 props:
   size: md
 slots:
@@ -47,6 +49,7 @@ Use the `orientation` prop to change the orientation of the buttons.
 
 ::component-code
 ---
+prettier: true
 props:
   orientation: vertical
 slots:
@@ -67,6 +70,7 @@ You can use components like [Input](/components/input), [InputMenu](/components/
 
 ::component-code
 ---
+prettier: true
 slots:
   default: |
 

docs/content/3.components/button.md

@@ -172,6 +172,7 @@ Use the `ui` prop to override the slots styles of the Button.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - ui
   - color

docs/content/3.components/tabs.md

@@ -72,6 +72,7 @@ You can also choose to only render the content of the active tab by setting `con
 
 ::component-code
 ---
+prettier: true
 ignore:
   - content.forceMount
 external:

docs/content/3.components/tooltip.md

@@ -21,10 +21,13 @@ Use the `text` prop to set the content of the Tooltip.
 
 ::component-code
 ---
+prettier: true
 props:
   text: 'Open on GitHub'
 slots:
-  default: <UButton icon="i-simple-icons-github" />
+  default: |
+
+    <UButton icon="i-simple-icons-github" />
 ---
 
 :u-button{icon="i-simple-icons-github"}
@@ -36,6 +39,7 @@ Use the `kbds` prop to render [Kbd](/components/kbd) components in the Tooltip.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - text
   - kbds
@@ -45,7 +49,9 @@ props:
     - meta
     - G
 slots:
-  default: <UButton icon="i-simple-icons-github" />
+  default: |
+
+    <UButton icon="i-simple-icons-github" />
 ---
 
 :u-button{icon="i-simple-icons-github"}
@@ -61,13 +67,16 @@ Use the `delay-duration` prop to change the delay before the Tooltip appears. Fo
 
 ::component-code
 ---
+prettier: true
 ignore:
   - text
 props:
   delayDuration: 0
   text: 'Open on GitHub'
 slots:
-  default: <UButton icon="i-simple-icons-github" />
+  default: |
+
+    <UButton icon="i-simple-icons-github" />
 ---
 
 :u-button{icon="i-simple-icons-github"}
@@ -83,6 +92,7 @@ Use the `arrow` prop to display an arrow on the Tooltip.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - text
   - arrow
@@ -90,7 +100,9 @@ props:
   arrow: true
   text: 'Open on GitHub'
 slots:
-  default: <UButton icon="i-simple-icons-github" />
+  default: |
+
+    <UButton icon="i-simple-icons-github" />
 ---
 
 :u-button{icon="i-simple-icons-github"}
@@ -102,6 +114,7 @@ Use the `content` prop to control how the Tooltip content is rendered, like its
 
 ::component-code
 ---
+prettier: true
 ignore:
   - text
 items:
@@ -116,7 +129,9 @@ props:
     sideOffset: 8
   text: 'Open on GitHub'
 slots:
-  default: <UButton icon="i-simple-icons-github" />
+  default: |
+
+    <UButton icon="i-simple-icons-github" />
 ---
 
 :u-button{icon="i-simple-icons-github"}
@@ -132,13 +147,16 @@ Use the `disabled` prop to disable the Tooltip.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - text
 props:
   disabled: true
   text: 'Open on GitHub'
 slots:
-  default: <UButton icon="i-simple-icons-github" />
+  default: |
+
+    <UButton icon="i-simple-icons-github" />
 ---
 
 :u-button{icon="i-simple-icons-github"}