feat(Table): implement component (#2364)

docs/app/components/content/ComponentExample.vue

@@ -22,13 +22,11 @@ const props = withDefaults(defineProps<{
    * @defaultValue true
    */
   preview?: boolean
-
   /**
    * Whether to show the source code
    * @defaultValue true
    */
   source?: boolean
-
   /**
    * A list of variable props to link to the component.
    */
@@ -40,6 +38,10 @@ const props = withDefaults(defineProps<{
     default: any
     multiple?: boolean
   }>
+  /**
+   * A list of line numbers to highlight in the code block
+   */
+  highlights?: number[]
 }>(), {
   preview: true,
   source: true
@@ -65,7 +67,7 @@ const code = computed(() => {
 `
   }
 
-  code += `\`\`\`vue${props.preview ? '' : ` [${data.pascalName}.vue]`}
+  code += `\`\`\`vue ${props.preview ? '' : ` [${data.pascalName}.vue]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
 ${data?.code ?? ''}
 \`\`\``
 
@@ -87,7 +89,8 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, async
     formatted = await $prettier.format(code.value, {
       trailingComma: 'none',
       semi: false,
-      singleQuote: true
+      singleQuote: true,
+      printWidth: 100
     })
   } catch {
     formatted = code.value
@@ -113,7 +116,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
 
 <template>
   <div class="my-5">
-    <div v-if="preview">
+    <template v-if="preview">
       <div class="border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
         <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)]">
           <slot name="options" />
@@ -170,7 +173,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
           <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>
-    </div>
+    </template>
 
     <MDCRenderer v-if="ast && props.source" :body="ast.body" :data="ast.data" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0" />
   </div>