docs(ComponentCard): show all props for the code (#797)

Co-authored-by: Benjamin Canac <[email protected]>
nuxt · Oct 15, 2023 · 8867936 · 8867936 · vercel · Oct 15, 2023
1 parent 9f4d88e
commit 8867936
Show file tree

Hide file tree

Showing 16 changed files with 157 additions and 99 deletions.
diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
@@ -41,7 +41,7 @@
         <ContentSlot v-if="$slots.default" :use="$slots.default" />
 
         <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-          <ContentSlot :name="slot" />
+          <ContentSlot :name="slot" unwrap="p" />
         </template>
       </component>
     </div>
@@ -113,6 +113,7 @@ const props = defineProps({
 const baseProps = reactive({ ...props.baseProps })
 const componentProps = reactive({ ...props.props })
 
+const { $prettier } = useNuxtApp()
 const appConfig = useAppConfig()
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
@@ -124,7 +125,7 @@ const meta = await fetchComponentMeta(name)
 
 // Computed
 
-const fullProps = computed(() => ({ ...baseProps, ...componentProps }))
+const fullProps = computed(() => ({ ...componentProps, ...baseProps }))
 const vModel = computed({
   get: () => baseProps.modelValue,
   set: (value) => {
@@ -186,7 +187,7 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
 const code = computed(() => {
   let code = `\`\`\`html
 <${name}`
-  for (const [key, value] of Object.entries(componentProps)) {
+  for (const [key, value] of Object.entries(fullProps.value)) {
     if (value === 'undefined' || value === null) {
       continue
     }
@@ -206,7 +207,7 @@ const code = computed(() => {
       code += `>
   ${props.code}</${name}>`
     } else {
-      code += `>${props.code}</${name}>`
+      code += `>${props.code.endsWith('>') ? `${props.code}\n` : props.code}</${name}>`
     }
   } else {
     code += ' />'
@@ -235,16 +236,27 @@ function renderObject (obj: any) {
 
 const shikiHighlighter = useShikiHighlighter({})
 const codeHighlighter = async (code: string, lang: string, theme: any, highlights: number[]) => shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
-const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots })}`, () => transformContent('content:_markdown.md', code.value, {
-  markdown: {
-    highlight: {
-      highlighter: codeHighlighter,
-      theme: {
-        light: 'material-theme-lighter',
-        default: 'material-theme',
-        dark: 'material-theme-palenight'
-      }
+const { data: ast } = await useAsyncData(
+  `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots })}`,
+  async () => {
+    let formatted = ''
+    try {
+      formatted = await $prettier.format(code.value) || code.value
+    } catch (error) {
+      formatted = code.value
     }
-  }
-}), { watch: [code] })
+
+    return transformContent('content:_markdown.md', formatted, {
+      markdown: {
+        highlight: {
+          highlighter: codeHighlighter,
+          theme: {
+            light: 'material-theme-lighter',
+            default: 'material-theme',
+            dark: 'material-theme-palenight'
+          }
+        }
+      }
+    })
+  }, { watch: [code] })
 </script>
diff --git a/docs/components/content/examples/FormGroupErrorSlotExample.vue b/docs/components/content/examples/FormGroupErrorSlotExample.vue
@@ -5,8 +5,9 @@
     </template>
 
     <template #error="{ error }">
-      <UAlert v-if="error" icon="i-heroicons-exclamation-triangle-20-solid" :title="error" color="red" />
-      <UAlert v-else icon="i-heroicons-check-circle-20-solid" title="Your email is valid" color="green" />
+      <span :class="[error ? 'text-red-500 dark:text-red-400' : 'text-primary-500 dark:text-primary-400']">
+        {{ error ? error : 'Your email is valid' }}
+      </span>
     </template>
   </UFormGroup>
 </template>

diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.elements/4.badge.md
@@ -38,6 +38,7 @@ Use the `color` and `variant` props to change the visual style of the Badge.
 props:
   color: 'primary'
   variant: 'solid'
+code: Badge
 ---
 
 Badge
@@ -59,6 +60,7 @@ options:
       - solid
 excludedProps:
   - color
+code: Badge
 ---
 
 Badge
@@ -78,6 +80,7 @@ options:
       - solid
 excludedProps:
   - color
+code: Badge
 ---
 
 Badge
@@ -97,6 +100,7 @@ options:
       - solid
 excludedProps:
   - color
+code: Badge
 ---
 
 Badge
@@ -110,6 +114,7 @@ Use the `size` prop to change the size of the Badge.
 ---
 props:
   size: 'sm'
+code: Badge
 ---
 
 Badge
@@ -126,6 +131,7 @@ props:
     rounded: 'rounded-full'
 excludedProps:
   - ui
+code: Badge
 ---
 
 Badge

diff --git a/docs/content/2.elements/5.button.md b/docs/content/2.elements/5.button.md
@@ -36,6 +36,7 @@ Use the `color` and `variant` props to change the visual style of the Button.
 props:
   color: 'primary'
   variant: 'solid'
+code: Button
 ---
 
 Button
@@ -56,9 +57,10 @@ options:
     restriction: expected
     values:
       - solid
-      - ghost  
+      - ghost
 excludedProps:
   - color
+code: Button
 ---
 
 Button
@@ -77,9 +79,10 @@ options:
     values:
       - solid
       - ghost
-      - link  
+      - link
 excludedProps:
   - color
+code: Button
 ---
 
 Button
@@ -97,9 +100,10 @@ options:
     restriction: expected
     values:
       - solid
-      - link      
+      - link
 excludedProps:
   - color
+code: Button
 ---
 
 Button
@@ -113,6 +117,7 @@ Use the `size` prop to change the size of the Button.
 ---
 props:
   size: 'sm'
+code: Button
 ---
 
 Button
@@ -129,6 +134,7 @@ props:
     rounded: 'rounded-full'
 excludedProps:
   - ui
+code: Button
 ---
 
 Button
@@ -183,6 +189,7 @@ Use the `disabled` prop to disable the Button.
 ---
 props:
   disabled: true
+code: Button
 ---
 
 Button
@@ -198,6 +205,7 @@ Use the `loading-icon` prop to set a different icon or change it globally in `ui
 ---
 props:
   loading: true
+code: Button
 ---
 
 Button
@@ -211,6 +219,7 @@ Use the `block` prop to make the Button fill the width of its container.
 ---
 props:
   block: true
+code: Button
 ---
 
 Button
@@ -225,6 +234,7 @@ Use the `to` prop to make the Button a link.
 props:
   to: 'https://volta.net'
   target: '_blank'
+code: Button
 ---
 
 Button

diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md
@@ -19,7 +19,6 @@ Use the `color` and `variant` props to change the visual style of the Input.
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   color: 'primary'
@@ -34,7 +33,6 @@ Besides all the colors from the `ui.colors` object, you can also use the `white`
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   color: 'white'
@@ -49,7 +47,6 @@ excludedProps:
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   color: 'gray'
@@ -65,8 +62,6 @@ Use the `size` prop to change the size of the Input.
 
 ::component-card
 ---
-baseProps:
-  name: 'input'
 props:
   size: 'sm'
 ---
@@ -80,8 +75,6 @@ We have improved the implementation of certain types such as [Checkbox](/forms/c
 
 ::component-card
 ---
-baseProps:
-  name: 'input'
 props:
   type: 'password'
 ---
@@ -93,8 +86,6 @@ Use the `placeholder` prop to set a placeholder text.
 
 ::component-card
 ---
-baseProps:
-  name: 'input'
 props:
   placeholder: 'Search...'
 ---
@@ -109,7 +100,6 @@ Use the `leading` and `trailing` props to set the icon position or the `leading-
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
@@ -134,7 +124,6 @@ Use the `disabled` prop to disable the Input.
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   disabled: true
@@ -150,7 +139,6 @@ Use the `loading-icon` prop to set a different icon or change it globally in `ui
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Searching...'
 props:
   loading: true
@@ -171,7 +159,6 @@ Use the `#leading` slot to set the content of the leading icon.
 slots:
   leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 ---
 
@@ -188,7 +175,6 @@ Use the `#trailing` slot to set the content of the trailing icon.
 slots:
   trailing: <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 ---
 

diff --git a/docs/content/3.forms/2.textarea.md b/docs/content/3.forms/2.textarea.md
@@ -19,7 +19,6 @@ Use the `color` and `variant` props to change the visual style of the Textarea.
 ::component-card
 ---
 baseProps:
-  name: 'textarea'
   placeholder: 'Search...'
 props:
   color: 'primary'
@@ -34,7 +33,6 @@ Besides all the colors from the `ui.colors` object, you can also use the `white`
 ::component-card
 ---
 baseProps:
-  name: 'textarea'
   placeholder: 'Search...'
 props:
   color: 'white'
@@ -49,7 +47,6 @@ excludedProps:
 ::component-card
 ---
 baseProps:
-  name: 'textarea'
   placeholder: 'Search...'
 props:
   color: 'gray'
@@ -66,7 +63,6 @@ Use the `size` prop to change the size of the Textarea.
 ::component-card
 ---
 baseProps:
-  name: 'textarea'
 props:
   size: 'sm'
 ---
@@ -78,8 +74,6 @@ Use the `placeholder` prop to set a placeholder text.
 
 ::component-card
 ---
-baseProps:
-  name: 'textarea'
 props:
   placeholder: 'Search...'
 ---
@@ -92,7 +86,6 @@ Use the `rows` prop to set the number of rows of the Textarea.
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   rows: 1
@@ -106,7 +99,6 @@ Use the `disabled` prop to disable the Textarea.
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   disabled: true
@@ -120,7 +112,6 @@ Use the `autoresize` prop to enable the autoresize. Writing more lines than the
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
   modelValue: 'Here is an autoresize Textarea, write new lines to make the Textarea grow up...'
 props:
@@ -135,7 +126,6 @@ Use the `resize` prop to enable the resize control.
 ::component-card
 ---
 baseProps:
-  name: 'input'
   placeholder: 'Search...'
 props:
   resize: true