Skip to content

Commit 60b6f39

Browse files
zernoniazernonia
authored
feat: jsDoc type hint (#635)
* chore: add neccessary package * docs: update props table styling * chore: add comment to Primitive props * feat: add vue styleguidist * chore: rerun pnpm * feat: codegen for component meta * chore: run autogen * chore: remove undefined type * chore: lint, update emitsTable * chore: dont populate default if no value * chore: replace static content with generated one * chore: checkpoint * chore: update all component * fix: parsing error * chore: capture missing case * chore: fix pipeline, add more props * chore: cleanup * chore: wrap true with codeblock * chore: upgrade vitepress * docs: update all the props/emits table * chore: remove undefined text * chore: cleanup * chore: fix main build * chore: populate interface * chore: parse jsdoc link * chore: fix emit code, update table design * chore: fix link styling * chore: update asChild prop * chore: update popper docs * chore: update styling
1 parent 8122133 commit 60b6f39

File tree

331 files changed

+8452
-7088
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

331 files changed

+8452
-7088
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.js

‎docs/.vitepress/components/NewHeroCodeGroup.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const cssFrameworkOptions = computed(() => [
2727
const tabs = computed(
2828
() => {
2929
const currentFramework = slots.default?.().find(slot => slot.props?.key?.toString().includes(cssFramework.value))
30-
const childSlots = (currentFramework?.children as VNode[]).sort((a, b) => a?.props?.title.localeCompare(b?.props?.title))
30+
const childSlots = (currentFramework?.children as VNode[]).sort((a, b) => a?.props?.title?.localeCompare(b?.props?.title))
3131
return childSlots?.map((slot, index) => {
3232
return {
3333
label: slot.props?.title || `${index}`,

‎docs/.vitepress/config.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ export default defineConfig({
5656
['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
5757
],
5858
lastUpdated: true,
59+
sitemap: {
60+
hostname: ogUrl,
61+
},
5962
themeConfig: {
6063
// https://vitepress.dev/reference/default-theme-config
6164
nav: [
@@ -96,7 +99,8 @@ export default defineConfig({
9699
{ text: 'Animation/Transition', link: '/guides/animation' },
97100
{ text: 'Composition', link: '/guides/composition' },
98101
{ text: 'Server side rendering', link: '/guides/server-side-rendering' },
99-
{ text: `Namespaced ${BadgeHTML('New')}`, link: '/guides/namespaced-components' },
102+
{ text: 'Namespaced', link: '/guides/namespaced-components' },
103+
// { text: `Namespaced ${BadgeHTML('New')}`, link: '/guides/namespaced-components' },
100104
],
101105
},
102106
{
@@ -118,7 +122,7 @@ export default defineConfig({
118122
{ text: 'Menubar', link: '/components/menubar' },
119123
{ text: 'Navigation Menu', link: '/components/navigation-menu' },
120124
{ text: 'Pagination', link: '/components/pagination' },
121-
{ text: `Pin Input ${BadgeHTML('Alpha')}`, link: '/components/pin-input' },
125+
{ text: 'Pin Input', link: '/components/pin-input' },
122126
{ text: 'Popover', link: '/components/popover' },
123127
{ text: 'Progress', link: '/components/progress' },
124128
{ text: 'Radio Group', link: '/components/radio-group' },
@@ -128,7 +132,7 @@ export default defineConfig({
128132
{ text: 'Slider', link: '/components/slider' },
129133
{ text: 'Switch', link: '/components/switch' },
130134
{ text: 'Tabs', link: '/components/tabs' },
131-
{ text: `Tags Input ${BadgeHTML('Alpha')}`, link: '/components/tags-input' },
135+
{ text: 'Tags Input', link: '/components/tags-input' },
132136
{ text: 'Toast', link: '/components/toast' },
133137
{ text: 'Toggle', link: '/components/toggle' },
134138
{ text: 'Toggle Group', link: '/components/toggle-group' },

‎docs/.vitepress/theme/style.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@ body {
136136
@apply bg-[var(--vp-c-brand-1)]
137137
}
138138

139+
.content-container {
140+
@apply !max-w-[720px];
141+
}
142+
139143
li > span {
140144
@apply text-[15px] md:text-base;
141145
}

‎docs/components/tables/EmitsTable.vue

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from '../prose'
3-
import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
43
import { Icon } from '@iconify/vue'
54
65
type PropDef = {
@@ -24,57 +23,28 @@ const props = defineProps<EmitsTableProps>()
2423
</div>
2524
<thead class="">
2625
<ProseTr class="">
27-
<ProseTh class="w-[45%]">
26+
<ProseTh class="w-1/3">
2827
<span>Emit</span>
2928
</ProseTh>
3029
<ProseTh>
31-
<span>Type</span>
30+
<span>Payload</span>
3231
</ProseTh>
3332
</ProseTr>
3433
</thead>
3534
<tbody>
3635
<ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
3736
<ProseTd>
38-
<div class="flex items-center gap-1">
37+
<div class="flex h-full items-start gap-1">
3938
<ProseCodeInline class=" !text-[13px]">
4039
{{ prop.name }}{{ prop.required ? "*" : null }}
4140
</ProseCodeInline>
42-
<template v-if="prop.description">
43-
<PopoverRoot>
44-
<PopoverTrigger class="p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-2 outline-neutral-800">
45-
<Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
46-
</PopoverTrigger>
47-
<PopoverContent
48-
side="top"
49-
class="text-xs rounded-lg px-3 py-2.5 bg-white dark:bg-neutral-800 w-[265px] shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
50-
>
51-
<span size="2" class="leading-5" v-html="prop.description" />
52-
<PopoverArrow class="dark:fill-neutral-800 fill-white" :size="8" />
53-
</PopoverContent>
54-
</PopoverRoot>
55-
</template>
5641
</div>
5742
</ProseTd>
5843
<ProseTd>
5944
<ProseCodeInline variant="secondary">
60-
{{ prop.typeSimple ? prop.typeSimple : prop.type }}
45+
{{ prop.type }}
6146
</ProseCodeInline>
62-
<template v-if="prop.typeSimple">
63-
<PopoverRoot>
64-
<PopoverTrigger class="p-1.5 rounded hover:bg-neutral-900 focus:outline-2 outline-neutral-800">
65-
<Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
66-
</PopoverTrigger>
67-
<PopoverContent
68-
side="top"
69-
class="text-xs rounded-lg px-3 py-2.5 bg-neutral-800 max-w-[265px] min-w-max shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
70-
>
71-
<ProseCodeInline class="whitespace-nowrap !text-[12px]">
72-
{{ prop.type }}
73-
</ProseCodeInline>
74-
<PopoverArrow class="fill-neutral-800" :size="8" />
75-
</PopoverContent>
76-
</PopoverRoot>
77-
</template>
47+
<div class="vp-raw [&_a]:underline flex flex-col gap-2 mt-2 text-sm dark:text-neutral-300" v-html="prop.description" />
7848
</ProseTd>
7949
</ProseTr>
8050
</tbody>

‎docs/components/tables/PropsTable.vue

Lines changed: 20 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from '../prose'
3-
import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
43
import { Icon } from '@iconify/vue'
54
65
type PropDef = {
@@ -25,65 +24,30 @@ const props = defineProps<PropsTableProps>()
2524
</div>
2625
<thead class="">
2726
<ProseTr class="">
28-
<ProseTh class="w-[45%]">
27+
<ProseTh class="w-1/6">
2928
<span>Prop</span>
3029
</ProseTh>
31-
<ProseTh>
32-
<span>Type</span>
33-
</ProseTh>
34-
<ProseTh>
30+
<ProseTh class="w-1/6">
3531
<span>Default</span>
3632
</ProseTh>
33+
<ProseTh class="w-2/3">
34+
<span>Type</span>
35+
</ProseTh>
3736
</ProseTr>
3837
</thead>
38+
3939
<tbody>
4040
<ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
4141
<ProseTd>
42-
<div class="flex items-center gap-1">
42+
<div class="flex h-full items-start gap-1">
4343
<ProseCodeInline class="!text-[13px]">
4444
{{ prop.name }}{{ prop.required ? "*" : null }}
4545
</ProseCodeInline>
46-
<template v-if="prop.description">
47-
<PopoverRoot>
48-
<PopoverTrigger class="p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-2 outline-neutral-800">
49-
<Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
50-
</PopoverTrigger>
51-
<PopoverContent
52-
side="top"
53-
class="text-xs rounded-lg px-3 py-2.5 bg-white dark:bg-neutral-800 w-[265px] shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
54-
>
55-
<span size="2" class="leading-5" v-html="prop.description" />
56-
<PopoverArrow class="dark:fill-neutral-800 fill-white" :size="8" />
57-
</PopoverContent>
58-
</PopoverRoot>
59-
</template>
60-
</div>
61-
</ProseTd>
62-
<ProseTd>
63-
<div class="flex items-center gap-1">
64-
<ProseCodeInline variant="secondary">
65-
{{ prop.typeSimple ? prop.typeSimple : prop.type }}
66-
</ProseCodeInline>
67-
<template v-if="prop.typeSimple">
68-
<PopoverRoot>
69-
<PopoverTrigger class="p-1.5 rounded hover:bg-neutral-900 focus:outline-2 outline-neutral-800">
70-
<Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
71-
</PopoverTrigger>
72-
<PopoverContent
73-
side="top"
74-
class="text-xs rounded-lg px-3 py-2.5 bg-neutral-800 max-w-[265px] min-w-max shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
75-
>
76-
<ProseCodeInline class="whitespace-nowrap !text-[12px]">
77-
{{ prop.type }}
78-
</ProseCodeInline>
79-
<PopoverArrow class="fill-neutral-800" :size="8" />
80-
</PopoverContent>
81-
</PopoverRoot>
82-
</template>
8346
</div>
8447
</ProseTd>
48+
8549
<ProseTd>
86-
<div v-if="prop.default" class="flex items-center gap-1">
50+
<div v-if="prop.default" class="flex h-full items-start gap-1">
8751
<ProseCodeInline variant="secondary">
8852
{{ prop.default }}
8953
</ProseCodeInline>
@@ -94,6 +58,17 @@ const props = defineProps<PropsTableProps>()
9458
</div>
9559
</template>
9660
</ProseTd>
61+
62+
<ProseTd>
63+
<div class="flex items-center gap-1">
64+
<div>
65+
<ProseCodeInline variant="secondary">
66+
{{ prop.typeSimple ? prop.typeSimple : prop.type }}
67+
</ProseCodeInline>
68+
<div class="vp-raw [&_a]:underline flex flex-col gap-2 mt-2 text-sm dark:text-neutral-300" v-html="prop.description" />
69+
</div>
70+
</div>
71+
</ProseTd>
9772
</ProseTr>
9873
</tbody>
9974
</ProseTable>

0 commit comments

Comments
 (0)