chore: add meta tables

apps/www/.vitepress/theme/components/APITable.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  type: 'prop' | 'emit' | 'slot' | 'method'
+  data: { name: string, description: string, type: string, required: boolean }[]
+}>()
+</script>
+
+<template>
+  <div>
+    <h2 class="capitalize">
+      {{ type }}
+    </h2>
+
+    <div v-for="(item, index) in data" :key="index" class="py-4 border-b text-sm">
+      <div class="flex items-center gap-2 flex-wrap">
+        <h5 class="text-sm">
+          <code>{{ item.name }}</code>
+        </h5>
+        <code>{{ item.type }}</code>
+        <span v-if="item.required" class="font-normal text-red-500 text-xs">Required*</span>
+      </div>
+
+      <div class="[&_p]:!my-2 ml-1" v-html="item.description" />
+    </div>
+  </div>
+</template>

apps/www/.vitepress/theme/components/index.ts

@@ -1,5 +1,6 @@
 export { default as CodeWrapper } from './CodeWrapper'
 export { default as ComponentPreview } from './ComponentPreview.vue'
+export { default as APITable } from './APITable.vue'
 export { default as TabPreview } from './TabPreview.vue'
 export { default as TabMarkdown } from './TabMarkdown.vue'
 export { default as TabsMarkdown } from './TabsMarkdown.vue'

apps/www/scripts/autogen.ts

@@ -42,16 +42,16 @@ components.forEach((componentPath) => {
 
     let parsedString = '<!-- This file was automatic generated. Do not edit it manually -->\n\n'
     if (meta.props.length)
-      parsedString += `<PropsTable :data="${JSON.stringify(meta.props, null, 2).replace(/"/g, '\'')}" />\n`
+      parsedString += `<APITable :type="'prop'" :data="${JSON.stringify(meta.props, null, 2).replace(/"/g, '\'')}" />\n`
 
     if (meta.events.length)
-      parsedString += `\n<EmitsTable :data="${JSON.stringify(meta.events, null, 2).replace(/"/g, '\'')}" />\n`
+      parsedString += `\n<APITable :type="'emit'" :data="${JSON.stringify(meta.events, null, 2).replace(/"/g, '\'')}" />\n`
 
     if (meta.slots.length)
-      parsedString += `\n<SlotsTable :data="${JSON.stringify(meta.slots, null, 2).replace(/"/g, '\'')}" />\n`
+      parsedString += `\n<APITable :type="'slot'" :data="${JSON.stringify(meta.slots, null, 2).replace(/"/g, '\'')}" />\n`
 
     if (meta.methods.length)
-      parsedString += `\n<MethodsTable :data="${JSON.stringify(meta.methods, null, 2).replace(/"/g, '\'')}" />\n`
+      parsedString += `\n<APITable :type="'method'" :data="${JSON.stringify(meta.methods, null, 2).replace(/"/g, '\'')}" />\n`
 
     writeFileSync(metaMdFilePath, parsedString)
   }
@@ -90,7 +90,6 @@ function parseMeta(meta: ComponentMeta) {
     .filter(prop => !prop.global)
     .map((prop) => {
       let defaultValue = prop.default
-      let type = prop.type
       const { name, description, required } = prop
 
       if (name === 'as')
@@ -99,13 +98,10 @@ function parseMeta(meta: ComponentMeta) {
       if (defaultValue === 'undefined')
         defaultValue = undefined
 
-      if (!type.includes('AcceptableValue'))
-        type = parseTypeFromSchema(prop.schema) || type
-
       return ({
         name,
         description: md.render(description),
-        type: type.replace(/\s*\|\s*undefined/g, ''),
+        type: prop.type.replace(/\s*\|\s*undefined/g, ''),
         required,
         default: defaultValue ?? undefined,
       })

apps/www/src/content/docs/charts/area.md

@@ -26,3 +26,5 @@ npx shadcn-vue@latest add chart-area
 Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
+
+<!-- @include: @/content/meta/AreaChart.md -->

apps/www/src/content/docs/charts/bar.md

@@ -26,3 +26,5 @@ npx shadcn-vue@latest add chart-bar
 Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
+
+<!-- @include: @/content/meta/BarChart.md -->

apps/www/src/content/docs/charts/donut.md

@@ -26,3 +26,5 @@ npx shadcn-vue@latest add chart-donut
 Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
+
+<!-- @include: @/content/meta/DonutChart.md -->

apps/www/src/content/docs/charts/line.md

@@ -26,3 +26,5 @@ npx shadcn-vue@latest add chart-line
 Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
+
+<!-- @include: @/content/meta/LineChart.md -->

apps/www/src/content/meta/AreaChart.md

@@ -1,10 +1,10 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'data',
     'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
-    'type': 'Record<string, any>',
+    'type': 'Record<string, any>[]',
     'required': true
   },
   {
@@ -95,7 +95,7 @@
   {
     'name': 'curveType',
     'description': '<p>Type of curve</p>\n',
-    'type': 'CurveType.Basis | CurveType.BasisClosed | CurveType.BasisOpen | CurveType.Bundle | CurveType.Cardinal | CurveType.CardinalClosed | CurveType.CardinalOpen | CurveType.CatmullRom | CurveType.CatmullRomClosed | CurveType.CatmullRomOpen | CurveType.Linear | CurveType.LinearClosed | CurveType.MonotoneX | CurveType.MonotoneY | CurveType.Natural | CurveType.Step | CurveType.StepAfter | CurveType.StepBefore',
+    'type': 'CurveType',
     'required': false,
     'default': 'CurveType.MonotoneX'
   },
@@ -108,7 +108,7 @@
   }
 ]" />
 
-<EmitsTable :data="[
+<APITable :type="'emit'" :data="[
   {
     'name': 'legendItemClick',
     'type': '[d: BulletLegendItemInterface, i: number]'

apps/www/src/content/meta/BarChart.md

@@ -1,10 +1,10 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'data',
     'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
-    'type': 'Record<string, any>',
+    'type': 'Record<string, any>[]',
     'required': true
   },
   {
@@ -108,7 +108,7 @@
   }
 ]" />
 
-<EmitsTable :data="[
+<APITable :type="'emit'" :data="[
   {
     'name': 'legendItemClick',
     'type': '[d: BulletLegendItemInterface, i: number]'

apps/www/src/content/meta/ChartCrosshair.md

@@ -1,6 +1,6 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'colors',
     'description': '',

apps/www/src/content/meta/ChartLegend.md

@@ -1,6 +1,6 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'items',
     'description': '',
@@ -10,7 +10,7 @@
   }
 ]" />
 
-<EmitsTable :data="[
+<APITable :type="'emit'" :data="[
   {
     'name': 'legendItemClick',
     'type': '[d: BulletLegendItemInterface, i: number]'

apps/www/src/content/meta/ChartSingleTooltip.md

@@ -1,6 +1,6 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'valueFormatter',
     'description': '',
@@ -34,7 +34,7 @@
   }
 ]" />
 
-<MethodsTable :data="[
+<APITable :type="'method'" :data="[
   {
     'name': 'valueFormatter',
     'description': '',

apps/www/src/content/meta/ChartTooltip.md

@@ -1,6 +1,6 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'title',
     'description': '',

apps/www/src/content/meta/DonutChart.md

@@ -1,6 +1,6 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'colors',
     'description': '<p>Change the default colors.</p>\n',
@@ -16,7 +16,7 @@
   {
     'name': 'data',
     'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
-    'type': 'Record<string, any>',
+    'type': 'Record<string, any>[]',
     'required': true
   },
   {

apps/www/src/content/meta/LineChart.md

@@ -1,10 +1,10 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
-<PropsTable :data="[
+<APITable :type="'prop'" :data="[
   {
     'name': 'data',
     'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
-    'type': 'Record<string, any>',
+    'type': 'Record<string, any>[]',
     'required': true
   },
   {
@@ -95,13 +95,13 @@
   {
     'name': 'curveType',
     'description': '<p>Type of curve</p>\n',
-    'type': 'CurveType.Basis | CurveType.BasisClosed | CurveType.BasisOpen | CurveType.Bundle | CurveType.Cardinal | CurveType.CardinalClosed | CurveType.CardinalOpen | CurveType.CatmullRom | CurveType.CatmullRomClosed | CurveType.CatmullRomOpen | CurveType.Linear | CurveType.LinearClosed | CurveType.MonotoneX | CurveType.MonotoneY | CurveType.Natural | CurveType.Step | CurveType.StepAfter | CurveType.StepBefore',
+    'type': 'CurveType',
     'required': false,
     'default': 'CurveType.MonotoneX'
   }
 ]" />
 
-<EmitsTable :data="[
+<APITable :type="'emit'" :data="[
   {
     'name': 'legendItemClick',
     'type': '[d: BulletLegendItemInterface, i: number]'