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
radix-vue · Jan 30, 2024 · 60b6f39 · 60b6f39
1 parent 8122133
commit 60b6f39
Show file tree

Hide file tree

Showing 331 changed files with 8,452 additions and 7,088 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+*.js
diff --git a/docs/.vitepress/components/NewHeroCodeGroup.vue b/docs/.vitepress/components/NewHeroCodeGroup.vue
@@ -27,7 +27,7 @@ const cssFrameworkOptions = computed(() => [
 const tabs = computed(
   () => {
     const currentFramework = slots.default?.().find(slot => slot.props?.key?.toString().includes(cssFramework.value))
-    const childSlots = (currentFramework?.children as VNode[]).sort((a, b) => a?.props?.title.localeCompare(b?.props?.title))
+    const childSlots = (currentFramework?.children as VNode[]).sort((a, b) => a?.props?.title?.localeCompare(b?.props?.title))
     return childSlots?.map((slot, index) => {
       return {
         label: slot.props?.title || `${index}`,

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -56,6 +56,9 @@ export default defineConfig({
     ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
   ],
   lastUpdated: true,
+  sitemap: {
+    hostname: ogUrl,
+  },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
@@ -96,7 +99,8 @@ export default defineConfig({
           { text: 'Animation/Transition', link: '/guides/animation' },
           { text: 'Composition', link: '/guides/composition' },
           { text: 'Server side rendering', link: '/guides/server-side-rendering' },
-          { text: `Namespaced ${BadgeHTML('New')}`, link: '/guides/namespaced-components' },
+          { text: 'Namespaced', link: '/guides/namespaced-components' },
+          // { text: `Namespaced ${BadgeHTML('New')}`, link: '/guides/namespaced-components' },
         ],
       },
       {
@@ -118,7 +122,7 @@ export default defineConfig({
           { text: 'Menubar', link: '/components/menubar' },
           { text: 'Navigation Menu', link: '/components/navigation-menu' },
           { text: 'Pagination', link: '/components/pagination' },
-          { text: `Pin Input ${BadgeHTML('Alpha')}`, link: '/components/pin-input' },
+          { text: 'Pin Input', link: '/components/pin-input' },
           { text: 'Popover', link: '/components/popover' },
           { text: 'Progress', link: '/components/progress' },
           { text: 'Radio Group', link: '/components/radio-group' },
@@ -128,7 +132,7 @@ export default defineConfig({
           { text: 'Slider', link: '/components/slider' },
           { text: 'Switch', link: '/components/switch' },
           { text: 'Tabs', link: '/components/tabs' },
-          { text: `Tags Input ${BadgeHTML('Alpha')}`, link: '/components/tags-input' },
+          { text: 'Tags Input', link: '/components/tags-input' },
           { text: 'Toast', link: '/components/toast' },
           { text: 'Toggle', link: '/components/toggle' },
           { text: 'Toggle Group', link: '/components/toggle-group' },

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -136,6 +136,10 @@ body {
   @apply bg-[var(--vp-c-brand-1)]
 }
 
+.content-container {
+  @apply !max-w-[720px];
+}
+
 li > span {
   @apply text-[15px] md:text-base;
 }

diff --git a/docs/components/tables/EmitsTable.vue b/docs/components/tables/EmitsTable.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from '../prose'
-import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
 import { Icon } from '@iconify/vue'
 
 type PropDef = {
@@ -24,57 +23,28 @@ const props = defineProps<EmitsTableProps>()
     </div>
     <thead class="">
       <ProseTr class="">
-        <ProseTh class="w-[45%]">
+        <ProseTh class="w-1/3">
           <span>Emit</span>
         </ProseTh>
         <ProseTh>
-          <span>Type</span>
+          <span>Payload</span>
         </ProseTh>
       </ProseTr>
     </thead>
     <tbody>
       <ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
         <ProseTd>
-          <div class="flex items-center gap-1">
+          <div class="flex h-full items-start gap-1">
             <ProseCodeInline class=" !text-[13px]">
               {{ prop.name }}{{ prop.required ? "*" : null }}
             </ProseCodeInline>
-            <template v-if="prop.description">
-              <PopoverRoot>
-                <PopoverTrigger class="p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-2 outline-neutral-800">
-                  <Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
-                </PopoverTrigger>
-                <PopoverContent
-                  side="top"
-                  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"
-                >
-                  <span size="2" class="leading-5" v-html="prop.description" />
-                  <PopoverArrow class="dark:fill-neutral-800 fill-white" :size="8" />
-                </PopoverContent>
-              </PopoverRoot>
-            </template>
           </div>
         </ProseTd>
         <ProseTd>
           <ProseCodeInline variant="secondary">
-            {{ prop.typeSimple ? prop.typeSimple : prop.type }}
+            {{ prop.type }}
           </ProseCodeInline>
-          <template v-if="prop.typeSimple">
-            <PopoverRoot>
-              <PopoverTrigger class="p-1.5 rounded hover:bg-neutral-900 focus:outline-2 outline-neutral-800">
-                <Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
-              </PopoverTrigger>
-              <PopoverContent
-                side="top"
-                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"
-              >
-                <ProseCodeInline class="whitespace-nowrap !text-[12px]">
-                  {{ prop.type }}
-                </ProseCodeInline>
-                <PopoverArrow class="fill-neutral-800" :size="8" />
-              </PopoverContent>
-            </PopoverRoot>
-          </template>
+          <div class="vp-raw [&_a]:underline flex flex-col gap-2  mt-2 text-sm dark:text-neutral-300" v-html="prop.description" />
         </ProseTd>
       </ProseTr>
     </tbody>

diff --git a/docs/components/tables/PropsTable.vue b/docs/components/tables/PropsTable.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from '../prose'
-import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
 import { Icon } from '@iconify/vue'
 
 type PropDef = {
@@ -25,65 +24,30 @@ const props = defineProps<PropsTableProps>()
     </div>
     <thead class="">
       <ProseTr class="">
-        <ProseTh class="w-[45%]">
+        <ProseTh class="w-1/6">
           <span>Prop</span>
         </ProseTh>
-        <ProseTh>
-          <span>Type</span>
-        </ProseTh>
-        <ProseTh>
+        <ProseTh class="w-1/6">
           <span>Default</span>
         </ProseTh>
+        <ProseTh class="w-2/3">
+          <span>Type</span>
+        </ProseTh>
       </ProseTr>
     </thead>
+
     <tbody>
       <ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
         <ProseTd>
-          <div class="flex items-center gap-1">
+          <div class="flex h-full items-start gap-1">
             <ProseCodeInline class="!text-[13px]">
               {{ prop.name }}{{ prop.required ? "*" : null }}
             </ProseCodeInline>
-            <template v-if="prop.description">
-              <PopoverRoot>
-                <PopoverTrigger class="p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-2 outline-neutral-800">
-                  <Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
-                </PopoverTrigger>
-                <PopoverContent
-                  side="top"
-                  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"
-                >
-                  <span size="2" class="leading-5" v-html="prop.description" />
-                  <PopoverArrow class="dark:fill-neutral-800 fill-white" :size="8" />
-                </PopoverContent>
-              </PopoverRoot>
-            </template>
-          </div>
-        </ProseTd>
-        <ProseTd>
-          <div class="flex items-center gap-1">
-            <ProseCodeInline variant="secondary">
-              {{ prop.typeSimple ? prop.typeSimple : prop.type }}
-            </ProseCodeInline>
-            <template v-if="prop.typeSimple">
-              <PopoverRoot>
-                <PopoverTrigger class="p-1.5 rounded hover:bg-neutral-900 focus:outline-2 outline-neutral-800">
-                  <Icon icon="radix-icons:info-circled" class="h-4 w-4 text-neutral-400" />
-                </PopoverTrigger>
-                <PopoverContent
-                  side="top"
-                  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"
-                >
-                  <ProseCodeInline class="whitespace-nowrap !text-[12px]">
-                    {{ prop.type }}
-                  </ProseCodeInline>
-                  <PopoverArrow class="fill-neutral-800" :size="8" />
-                </PopoverContent>
-              </PopoverRoot>
-            </template>
           </div>
         </ProseTd>
+
         <ProseTd>
-          <div v-if="prop.default" class="flex items-center gap-1">
+          <div v-if="prop.default" class="flex  h-full items-start gap-1">
             <ProseCodeInline variant="secondary">
               {{ prop.default }}
             </ProseCodeInline>
@@ -94,6 +58,17 @@ const props = defineProps<PropsTableProps>()
             </div>
           </template>
         </ProseTd>
+
+        <ProseTd>
+          <div class="flex items-center gap-1">
+            <div>
+              <ProseCodeInline variant="secondary">
+                {{ prop.typeSimple ? prop.typeSimple : prop.type }}
+              </ProseCodeInline>
+              <div class="vp-raw [&_a]:underline flex flex-col gap-2 mt-2 text-sm dark:text-neutral-300" v-html="prop.description" />
+            </div>
+          </div>
+        </ProseTd>
       </ProseTr>
     </tbody>
   </ProseTable>