Skip to content

Commit c9e1878

Browse files
lepturelepture
committed
docs: Add PropsTable
1 parent accedea commit c9e1878

File tree

7 files changed

+212
-10
lines changed

7 files changed

+212
-10
lines changed

‎docs/.vitepress/components/Example.vue‎

Lines changed: 75 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,105 @@
11
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
import { ScrollArea } from '#components'
4+
25
defineProps<{ name: string }>()
6+
7+
const expanded = ref(false)
38
</script>
49

510
<template>
611
<div class="vp-Example">
7-
<div class="vp-ExampleRun">
8-
<slot></slot>
12+
<div class="vp-ExampleComponent">
13+
<ScrollArea scrollbars="horizontal">
14+
<slot></slot>
15+
</ScrollArea>
916
</div>
10-
<div class="vp-ExampleSource">
11-
<slot name="source"></slot>
17+
<div class="vp-ExampleSource" :data-expanded="expanded">
18+
<ScrollArea scrollbars="horizontal">
19+
<slot name="source"></slot>
20+
</ScrollArea>
1221
</div>
22+
<button class="vp-ExampleAction" @click.prevent="expanded = !expanded">
23+
<span v-if="expanded">Hide code</span>
24+
<span v-else>Show code</span>
25+
</button>
1326
</div>
1427
</template>
1528

1629
<style>
30+
:root {
31+
--example-mask: linear-gradient(#fff0, #fff9);
32+
}
33+
.dark {
34+
--example-mask: linear-gradient(#0000, #0009);
35+
}
1736
.vp-Example {
1837
margin-top: var(--space-4);
1938
margin-bottom: var(--space-6);
2039
border: 1px solid var(--gray-a4);
2140
border-radius: var(--radius-4);
41+
overflow: hidden;
2242
}
23-
.vp-ExampleRun {
24-
padding: var(--space-4);
43+
.vp-ExampleComponent {
2544
border-bottom: 1px solid var(--gray-a4);
45+
width: 100%;
46+
box-sizing: border-box;
47+
}
48+
.vp-ExampleComponent .ui-ScrollAreaViewport {
49+
padding: var(--space-3) var(--space-4);
2650
}
2751
.vp-ExampleSource {
2852
--vp-code-block-bg: transparent;
2953
--vp-code-line-height: 1.6;
3054
--vp-code-font-size: 14px;
31-
background: var(--accent-a2);
55+
position: relative;
56+
display: flex;
57+
flex-direction: column;
58+
outline: 0;
59+
}
60+
.vp-ExampleSource[data-expanded="false"]:before {
61+
position: absolute;
62+
content: "";
63+
pointer-events: none;
64+
background: var(--example-mask);
65+
height: 7.5rem;
66+
bottom: 0;
67+
left: 0;
68+
right: 0;
69+
z-index: 10;
3270
}
33-
.vp-ExampleSource div.language-vue {
34-
margin-top: 0;
35-
margin-bottom: 0;
71+
.vp-ExampleSource[data-expanded="false"] .ui-ScrollAreaViewport {
72+
max-height: calc(8.75lh + .5rem);
73+
overflow: hidden;
74+
}
75+
.vp-Example .vp-ExampleSource div.language-vue {
76+
margin: 0;
77+
}
78+
.vp-Example .vp-ExampleSource pre.shiki {
79+
padding-top: var(--space-2);
80+
padding-bottom: var(--space-2);
81+
}
82+
.vp-Example .vp-ExampleSource .shiki code {
83+
padding-left: var(--space-4);
84+
padding-right: var(--space-4);
3685
}
3786
.vp-ExampleSource span.lang {
3887
display: none;
3988
}
89+
.vp-ExampleSource button.copy {
90+
width: 28px !important;
91+
height: 28px !important;
92+
background-size: 14px !important;
93+
}
94+
.vp-ExampleSource button.copy:before {
95+
height: 28px !important;
96+
}
97+
.vp-ExampleAction {
98+
width: 100%;
99+
font-size: 13px;
100+
border-top: 1px solid var(--gray-a4);
101+
background: var(--gray-2);
102+
color: var(--gray-11);
103+
padding: var(--space-1);
104+
}
40105
</style>

‎docs/.vitepress/components/PropsTable.vue‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<script lang="ts">
2+
interface PropData {
3+
name: string
4+
description: string
5+
type: string
6+
required: boolean
7+
default: string
8+
}
9+
10+
interface ComponentMeta {
11+
props: PropData[]
12+
}
13+
14+
interface PropsTableProps {
15+
name: string
16+
}
17+
18+
const _regex = /\/(\w+)\.json$/
19+
const _modules: Record<string, ComponentMeta> = import.meta.glob('../meta/*.json', { eager: true })
20+
const modules: Record<string, ComponentMeta> = {}
21+
Object.keys(_modules).forEach(name => {
22+
const m = name.match(_regex)
23+
modules[m![1]] = _modules[name]
24+
})
25+
26+
console.log(modules)
27+
</script>
28+
29+
<script setup lang="ts">
30+
import { computed } from 'vue'
31+
import {
32+
Table,
33+
Badge,
34+
Icon,
35+
IconButton,
36+
PopoverRoot,
37+
PopoverTrigger,
38+
PopoverContent,
39+
} from '#components'
40+
41+
const props = defineProps<PropsTableProps>()
42+
const items = computed(() => {
43+
return modules[props.name].props
44+
})
45+
</script>
46+
47+
<template>
48+
<Table class="vp-PropsTable" variant="surface">
49+
<thead>
50+
<tr>
51+
<th>Prop</th>
52+
<th>Default</th>
53+
<th>Type</th>
54+
</tr>
55+
</thead>
56+
<tbody>
57+
<tr v-for="item in items" :key="item.name">
58+
<td>
59+
<Badge class="font-mono" variant="surface">{{ item.name }}</Badge>
60+
</td>
61+
<td>
62+
<Badge
63+
v-if="item.default"
64+
class="font-mono"
65+
color="gray"
66+
variant="surface"
67+
>
68+
{{ item.default }}
69+
</Badge>
70+
</td>
71+
<td>
72+
<div class="flex flex-col">
73+
<div v-if="item.type.length < 48">
74+
<Badge variant="outline" color="gray">{{ item.type }}</Badge>
75+
</div>
76+
<div v-else class="flex items-center gap-1">
77+
<span class="text-sm font-medium">Enum</span>
78+
<PopoverRoot>
79+
<PopoverTrigger as-child>
80+
<IconButton size="1" variant="ghost" color="gray">
81+
<Icon icon="lucide:circle-question-mark" />
82+
</IconButton>
83+
</PopoverTrigger>
84+
<PopoverContent :side-offset="4">
85+
<div class="text-sm max-w-96">
86+
<code>{{ item.type }}</code>
87+
</div>
88+
</PopoverContent>
89+
</PopoverRoot>
90+
</div>
91+
<div
92+
v-if="item.description"
93+
class="text-sm text-muted-foreground"
94+
v-html="item.description"
95+
>
96+
</div>
97+
</div>
98+
</td>
99+
</tr>
100+
</tbody>
101+
</Table>
102+
</template>
103+
104+
<style>
105+
.vp-doc .vp-PropsTable p {
106+
margin-top: var(--space-2);
107+
margin-bottom: 0;
108+
}
109+
</style>

‎docs/.vitepress/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎docs/.vitepress/theme/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Theme } from 'vitepress'
22
import * as components from '#components'
33
import Example from '../components/Example.vue'
4+
import PropsTable from '../components/PropsTable.vue'
45
import Layout from './Layout.vue'
56

67
import "./style.css"
@@ -9,6 +10,7 @@ export default {
910
Layout,
1011
async enhanceApp({ app }) {
1112
app.component('Example', Example)
13+
app.component('PropsTable', PropsTable)
1214
Object.keys(components).forEach((name) => {
1315
app.component(name, components[name as 'Button'])
1416
})

‎docs/.vitepress/theme/reset.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.vp-doc .ui-Table table {
2+
display: table;
3+
margin: 0;
4+
}
5+
6+
.vp-doc .ui-Table tr {
7+
background-color: inherit;
8+
border-top: none;
9+
}
10+
11+
.vp-doc .ui-Table th {
12+
color: inherit;
13+
background-color: inherit;
14+
}
15+
16+
.vp-doc .ui-Table th,
17+
.vp-doc .ui-Table td {
18+
border: 0;
19+
padding: var(--table-cell-padding);
20+
}

‎docs/.vitepress/theme/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@import "tailwindcss";
22
@import "../../../tailwind/index.css";
33
@import "../../../src/styles/index.css";
4+
@import "./reset.css";
45

56
/** adding tailwind sources */
7+
@source "../components/";
68
@source "../../examples/";

‎docs/content/components/button.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
22
title: Button
3+
description: Trigger an action or event, such as submitting a form or displaying a dialog.
34
---
45

6+
<PropsTable name="Button" />
7+
58
## Examples
69

710
### Size

0 commit comments

Comments
 (0)