Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add meta tables

Browse Source
This commit is contained in:
zernonia 2024-04-26 22:01:50 +08:00
parent 4ec3dd9d76
commit 9cf07be61b
15 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/www/.vitepress/theme/components/APITable.vue Normal file
View File

@ -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>

1
apps/www/.vitepress/theme/components/index.ts
View File

@ -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'

14
apps/www/scripts/autogen.ts
View File

@ -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,
})

2
apps/www/src/content/docs/charts/area.md
View File

@ -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 -->

2
apps/www/src/content/docs/charts/bar.md
View File

@ -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 -->

2
apps/www/src/content/docs/charts/donut.md
View File

@ -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 -->

2
apps/www/src/content/docs/charts/line.md
View File

@ -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 -->

8
apps/www/src/content/meta/AreaChart.md
View File

@ -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]'

6
apps/www/src/content/meta/BarChart.md
View File

@ -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]'

2
apps/www/src/content/meta/ChartCrosshair.md
View File

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

4
apps/www/src/content/meta/ChartLegend.md
View File

@ -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]'

4
apps/www/src/content/meta/ChartSingleTooltip.md
View File

@ -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': '',

2
apps/www/src/content/meta/ChartTooltip.md
View File

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

4
apps/www/src/content/meta/DonutChart.md
View File

@ -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
},
{

8
apps/www/src/content/meta/LineChart.md
View File

@ -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]'