✨ docs: add props

docs/components/content/ComponentProps.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { ComponentMeta } from 'vue-component-meta'
+import { camelCase, upperFirst } from 'scule'
+
+const route = useRoute()
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null,
+  },
+})
+
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
+const componentCamelName = camelCase(slug)
+const componentName = `Ray${upperFirst(componentCamelName)}`
+
+const meta = await fetchComponentMeta(componentName)
+const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => meta?.meta?.props || [])
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>Prop</ProseTh>
+        <ProseTh>Default</ProseTh>
+        <ProseTh>Type</ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="prop in metaProps" :key="prop.name">
+        <ProseTd>
+          {{ prop.name }}
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.default">
+            {{ prop.default }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.type">
+            {{ prop.type }}
+          </ProseCodeInline>
+          <MDC v-if="prop.description" :value="prop.description" class="mt-1" />
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>

docs/components/content/ComponentSlots.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { camelCase, upperFirst } from 'scule'
+
+const route = useRoute()
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null,
+  },
+})
+
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
+const componentCamelName = camelCase(slug)
+const componentName = `Ray${upperFirst(componentCamelName)}`
+
+const meta = await fetchComponentMeta(componentName)
+</script>
+
+<template>
+  <div class="flex flex-col not-prose font-mono divide-y divide-gray-100 dark:divide-gray-800">
+    <div v-for="(slot, k) in meta?.meta?.slots" :key="k" class="py-2">
+      <pre>{{ slot }}</pre>
+    </div>
+  </div>
+</template>

docs/content/2.components/button.md

@@ -114,7 +114,14 @@ props:
 Button
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::

docs/content/2.components/input.md

@@ -142,7 +142,14 @@ const modal = ref<string>("");
 </template>
 ```
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::

docs/content/2.components/kbd.md

@@ -44,7 +44,14 @@ props:
 K
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::

docs/content/2.components/mark.md

@@ -82,7 +82,14 @@ slots:
 :RayButton{icon="tabler:message" label="messages" color="invert"}
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::

docs/content/2.components/message.md

@@ -60,7 +60,14 @@ props:
 ---
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::

docs/content/2.components/textarea.md

@@ -176,7 +176,14 @@ const modal = ref<string>("");
 </template>
 ```
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::

docs/content/2.components/toggle.md

@@ -63,7 +63,14 @@ props:
 ---
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::

docs/nuxt.config.ts

@@ -60,7 +60,7 @@ export default defineNuxtConfig({
       type: false,
       props: true,
       slots: true,
-      events: false,
+      events: true,
       exposed: false,
     },
   },