add ComponentProps support

Author: stevethomas

app/components/ComponentProps.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@/components/table"
+import { type ComponentProp, type Meta } from "@app/types/globals"
+
+defineProps<{
+  props: ComponentProp[]
+  meta: Meta
+}>()
+</script>
+
+<template>
+  <h2 class="mb-2 mt-8 text-2xl">Props</h2>
+
+  <Table>
+
+    <TableHeader>
+      <TableRow>
+        <TableHead class="w-[100px]"> Prop</TableHead>
+
+        <TableHead>Default</TableHead>
+
+        <TableHead>Type</TableHead>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody>
+      <TableRow v-for="(prop, index) in props" :key="index">
+        <TableCell class="font-medium">
+          {{ prop.name }}
+        </TableCell>
+
+        <TableCell>
+          <span v-if="prop.default" class="bg-muted px-2 py-1 font-mono">{{ prop.default }}</span>
+
+          <span v-else>-</span>
+        </TableCell>
+
+        <TableCell>
+          <div class="mb-4">
+            <span class="bg-muted px-2 py-1 font-mono">
+              <template v-if="typeof prop.type === 'string'">
+              {{ prop.type }}
+              </template>
+
+              <template v-else>
+              {{ prop.type.join(" | ") }}
+              </template>
+            </span>
+          </div>
+
+          {{ prop.description }}
+
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>

app/components/ComponentSummary.vue

@@ -6,12 +6,7 @@ import { Button } from "@/components/button"
 import { Heading } from "@"
 import ShadcnLogo from "@app/components/ShadcnLogo.vue"
 import CodingLabsLogo from "@app/components/CodingLabsLogo.vue"
-
-type Meta = {
-  layout: Component
-  shadcn?: boolean | string
-  modified?: boolean
-}
+import { type Meta } from "@app/types/globals"
 
 const props = defineProps<{
   meta: Meta

app/pages/components/Toast.vue

@@ -2,6 +2,8 @@
 import { Ghost } from "lucide-vue-next"
 import { Toaster, useToast } from "@/components/toast"
 import { Button } from "@/components/button"
+import ComponentProps from "@app/components/ComponentProps.vue"
+import { type ComponentProp } from "@app/types/globals"
 
 const { toast } = useToast()
 
@@ -20,6 +22,35 @@ function calculateDaysUntilHalloween() {
 
   return Math.ceil(timeDiff / (1000 * 60 * 60 * 24))
 }
+
+const componentProps: ComponentProp[] = [
+  {
+    name: "icon",
+    type: ["string", "component"],
+    description: "Icon component or URL to display in the toast"
+  },
+  {
+    name: "iconClasses",
+    type: "string",
+    description: "CSS classes to apply to the icon"
+  },
+  {
+    name: "title",
+    type: "string",
+    description: "Title text of the toast"
+  },
+  {
+    name: "description",
+    type: ["string", "object"],
+    description: "Description text or object to display in the toast"
+  },
+  {
+    name: "objectFormat",
+    default: "value",
+    type: "string",
+    description: "Format for object descriptions: \"value\", \"key\", or \"both\""
+  }
+]
 </script>
 
 <template>
@@ -133,5 +164,9 @@ function calculateDaysUntilHalloween() {
     <li>Support for icon and iconClasses prop</li>
 
     <li>Support for object descriptions (value only (default), key only, and key + value)</li>
+
+    <li>Emit a click event</li>
   </ul>
+
+  <ComponentProps :props="componentProps" :meta="$route.meta" />
 </template>

app/types/globals.ts

@@ -0,0 +1,14 @@
+import type { Component } from "vue"
+
+export type Meta = {
+  layout: Component
+  shadcn?: boolean | string
+  modified?: boolean
+}
+
+export type ComponentProp = {
+  name: string
+  default?: string | boolean | null
+  type: string | Array<string>
+  description: string
+}