feat: Props component

docs/content/2.usage/2.components.md

@@ -64,13 +64,7 @@ Check out a **danger** alert with `code` and a [link](/).
 </code-block>
 </code-group>
 
-<table-container>
-
-| Prop | Type | Default | Values |
-|---------|------|-------------| ---|
-| `type` | `String` | `'info'` | `['info', 'success', 'warning', 'danger']` |
-
-</table-container>
+<props of="atoms/Alert"></props>
 
 ### `<list>`
 
@@ -117,15 +111,7 @@ danger:
 </code-block>
 </code-group>
 
-<table-container>
-
-| Prop | Type | Default | Values |
-|---------|------|-------------| ---|
-| `items` | `Array` | `[]` | Array of strings |
-| `type` | `String` | `'primary'` | `['primary', 'success', 'info', 'warning', 'danger']` |
-| `icon` | `String` | `null` | Used to override the default `type` icon. Check out the [icons available](https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons) |
-
-</table-container>
+<props of="atoms/List"></props>
 
 ### `<badge>`
 
@@ -192,14 +178,7 @@ This component uses `slots`. See [`code-block`](#code-block) below.
   </code-block>
 </code-group>
 
-<table-container>
-
-| Prop | Type | Required | Default | Description |
-|---------|------|-------------| ---| -- |
-| `label` | `String` | yes | | Label to display for the tab |
-| `active` | `Boolean` | no | `false` | Select which tab should be active |
-
-</table-container>
+<props of="atoms/CodeBlock"></props>
 
 ### `<inject-content>`
 
@@ -220,13 +199,7 @@ Cross-reference other files within your documentation (such as example code you
   </code-block>
 </code-group>
 
-<table-container>
-
-| Prop | Type | Required | Value |
-|---------|------|-------------| ---|
-| `query` | `String` | `true` | The query you would pass to `$content` (the relative directory path and filename of the file you want to inject, without the final `.md`, e.g. `category/article`.) |
-
-</table-container>
+<props of="atoms/InjectContent"></props>
 
 ### `<code-sandbox>`
 
@@ -251,13 +224,7 @@ link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dar
   </code-block>
 </code-group>
 
-<table-container>
-
-| Prop | Type | Required | Value |
-|---------|------|-------------| ---|
-| `src` | `String` | `true` | Url to CodeSandbox embed |
-
-</table-container>
+<props of="atoms/CodeSandbox"></props>
 
 ### `<tweet>`
 
@@ -271,7 +238,6 @@ Embed tweets easily in your documentation - with great performance. Tweets will
 
 </div>
 
-
   </code-block>
   <code-block label="Code">
 
@@ -282,10 +248,28 @@ Embed tweets easily in your documentation - with great performance. Tweets will
   </code-block>
 </code-group>
 
-<table-container>
+<props of="atoms/Tweet"></props>
+
+### `<props>`
+
+List accepted properties of a component. 
+
+<code-group>
+  <code-block label="Preview" active>
+<div class="p-4 pb-0 border-2 border-t-0 border-gray-700 rounded-b-md">
+
+  <props of="atoms/CodeBlock"></props>
+
+</div>
+
+  </code-block>
+  <code-block label="Code">
 
-| Prop | Type | Required | Value |
-|---------|------|-------------| ---|
-| `id` | `String` | `true` | Tweet id |
+```md
+<props of="atoms/CodeBlock"></props>
+```
+
+  </code-block>
+</code-group>
 
-</table-container>
+<props of="atoms/Props"></props>

package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@docsearch/css": "^1.0.0-alpha.28",
     "@docsearch/js": "^1.0.0-alpha.28",
-    "@nuxt/content": "^1.13.1",
+    "@nuxt/content": "^1.14.0",
     "@nuxtjs/color-mode": "^2.0.3",
     "@nuxtjs/google-fonts": "1.2.0",
     "@nuxtjs/pwa": "^3.3.5",
@@ -40,7 +40,8 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "theme-colors": "^0.0.5",
     "ufo": "^0.6.7",
-    "universal-cookie": "^4.0.4"
+    "universal-cookie": "^4.0.4",
+    "vue-docgen-api": "^4.35.0"
   },
   "devDependencies": {
     "@nuxt/types": "^2.14.12",

theme/components/atoms/Alert.vue

@@ -11,6 +11,9 @@
 <script>
 export default {
   props: {
+    /**
+     * @values info, success, warning, danger
+     */
     type: {
       type: String,
       default: 'info',

theme/components/atoms/CodeBlock.vue

@@ -7,10 +7,16 @@
 <script>
 export default {
   props: {
+    /**
+     * Label to display for the tab
+     */
     label: {
       type: String,
       required: true
     },
+    /**
+     * Select which tab should be active
+     */
     active: {
       type: Boolean,
       default: false

theme/components/atoms/CodeSandbox.vue

@@ -16,6 +16,9 @@
 <script>
 export default {
   props: {
+    /**
+     * Url to CodeSandbox embed
+     */
     src: {
       type: String,
       required: true

theme/components/atoms/InjectContent.vue

@@ -5,6 +5,10 @@
 <script>
 export default {
   props: {
+    /**
+     * The query you would pass to <code>$content</code> (the relative directory path and filename of the file you want to inject,
+     *  without the final <code>.md</code>, e.g. <code>category/article</code>.)
+     */
     query: { type: String, required: true }
   },
   data: () => ({

theme/components/atoms/List.vue

@@ -12,10 +12,17 @@
 <script>
 export default {
   props: {
+    /**
+     * Array of string
+     */
     items: {
       type: Array,
       default: () => []
     },
+    /**
+     * Used to override the default <code>type</code> icon, check out the
+     *  <a href="https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons">icons available</a>
+     */
     icon: {
       type: String,
       default: null

theme/components/atoms/Props.vue

@@ -0,0 +1,110 @@
+<template>
+  <table-container>
+    <table v-if="component">
+      <thead>
+        <tr>
+          <th>Prop</th>
+          <th>Type</th>
+          <th v-if="showRequired">Required</th>
+          <th v-if="showDefault">Default</th>
+          <th v-if="showValues">Values</th>
+          <th v-if="showDescription">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="prop in props" :key="prop.name">
+          <td><code>{{ prop.name }}</code></td>
+          <td><code>{{ prop.type && prop.type.name }}</code></td>
+          <td v-if="showRequired">{{ prop.required ? "Yes" : "No" }}</td>
+          <td v-if="showDefault"><code v-if="prop.defaultValue">{{ prop.defaultValue && prop.defaultValue.value }}</code></td>
+          <td v-if="showValues">
+            <code v-if="prop.values">{{ prop.values && JSON.stringify(prop.values).replace(/,/g, ', ') }}</code>
+            <span v-else>-</span>
+          </td>
+          <td v-if="showDescription">
+            <div v-html="prop.description"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </table-container>
+</template>
+
+<script>
+export default {
+  props: {
+    of: {
+      type: String,
+      default: undefined
+    },
+    /**
+     * @ignore
+     */
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Toggle required column.
+     */
+    required: {
+      type: Boolean,
+      default: undefined
+    },
+    /**
+     * Toggle values column.
+     */
+    values: {
+      type: Boolean,
+      default: undefined
+    },
+    /**
+     * Toggle description column.
+     */
+    description: {
+      type: Boolean,
+      default: undefined
+    },
+    /**
+     * Toglle default column.
+     */
+    defaultValue: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  computed: {
+    component () {
+      return this.data
+    },
+    props () {
+      // hide ignored properties
+      return this.component.props.filter(prop => !prop.tags?.ignore)
+    },
+    showRequired () {
+      if (this.required !== undefined) {
+        return this.required
+      }
+      return this.props.find(prop => prop.required !== undefined)
+    },
+    showValues () {
+      if (this.values !== undefined) {
+        return this.values
+      }
+      return this.props.find(prop => prop.values)
+    },
+    showDescription () {
+      if (this.description !== undefined) {
+        return this.description
+      }
+      return this.props.find(prop => prop.description)
+    },
+    showDefault () {
+      if (this.defaultValue !== undefined) {
+        return this.defaultValue
+      }
+      return this.props.find(prop => prop.defaultValue)
+    }
+  }
+}
+</script>

theme/components/atoms/Tweet.vue

@@ -40,12 +40,39 @@
 <script>
 export default {
   props: {
-    id: { type: String, default: '' },
+    /**
+     * Tweet id
+     */
+    id: { type: String, required: true },
+    /**
+     *
+     * @ignore
+     */
     name: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     username: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     avatar: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     heartCount: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     createdAt: { type: Number, default: 0 },
+    /**
+     *
+     * @ignore
+     */
     layout: { type: String, default: 'tweet' }
   },
   computed: {

theme/nuxt.config.js

@@ -63,7 +63,8 @@ export default {
         [r('utils/remark-prose'), {
           proseClass: 'prose dark:prose-dark'
         }],
-        [r('utils/remark-tweet'), {}]
+        [r('utils/remark-tweet'), {}],
+        [r('utils/remark-vue'), {}]
       ],
       remarkAutolinkHeadings: {
         behavior: 'wrap'

theme/utils/remark-prose.js

@@ -1,9 +1,10 @@
 const TAG_REGEX = /^\s*<\/?([A-Za-z0-9-_]+) ?[^>]*>/
 const PROSE_ELEMENTS = [
   // HTML tags
-  'div', 'p', 'ul'
+  'div', 'p', 'ul',
 
   // Global tags
+  'props'
 ]
 
 const isJsNode = (node, customProsElements = []) => {