chore(docs): auto-register components

packages/docs/.vuepress/clientAppEnhance.js

@@ -1,13 +1,9 @@
 import { defineClientAppEnhance } from '@vuepress/client';
 import Chusho, { $chusho, components } from 'chusho';
 
-import Docgen from './components/Docgen.vue';
-import PropsTable from './components/PropsTable.vue';
-import Showcase from './components/Showcase.vue';
-
 import './assets/extras.scss';
 
-import chushoConfig from '../chusho.config';
+import chushoConfig from '../chusho.config.js';
 
 if (import.meta.hot) {
   import.meta.hot.accept('../chusho.config.js', (newConfig) => {
@@ -16,10 +12,6 @@ if (import.meta.hot) {
 }
 
 export default defineClientAppEnhance(({ app }) => {
-  app.component('Docgen', Docgen);
-  app.component('PropsTable', PropsTable);
-  app.component('Showcase', Showcase);
-
   app.use(Chusho, chushoConfig);
 
   Object.values(components).forEach((component) => {

packages/docs/.vuepress/components/Docgen.vue

@@ -1,28 +1,35 @@
 <template>
-  <div class="mt-4">
-    <div v-for="(doc, i) in docs" :key="i" :id="doc.displayName">
-      <h3>{{ doc.displayName }}</h3>
-      <PropsTable
-        :sections="[
-          {
-            label: 'Props',
-            type: 'props',
-            rows: doc.props,
-          },
-          {
-            label: 'Events',
-            type: 'events',
-            rows: doc.events,
-          },
-          {
-            label: 'Slots',
-            type: 'slots',
-            rows: doc.slots,
-          },
-        ]"
-      />
-    </div>
-  </div>
+  <CTabs class="mt-4">
+    <CTabList>
+      <CTab :target="doc.displayName" v-for="(doc, i) in docs">
+        {{ doc.displayName }}
+      </CTab>
+    </CTabList>
+
+    <CTabPanels>
+      <CTabPanel :id="doc.displayName" v-for="(doc, i) in docs">
+        <PropsTable
+          :sections="[
+            {
+              label: 'Props',
+              type: 'props',
+              rows: doc.props,
+            },
+            {
+              label: 'Events',
+              type: 'events',
+              rows: doc.events,
+            },
+            {
+              label: 'Slots',
+              type: 'slots',
+              rows: doc.slots,
+            },
+          ]"
+        />
+      </CTabPanel>
+    </CTabPanels>
+  </CTabs>
 </template>
 
 <script>

packages/docs/.vuepress/config.js

@@ -1,3 +1,5 @@
+const { path } = require('@vuepress/utils');
+
 module.exports = {
   title: 'Chūshō',
   description:
@@ -14,6 +16,14 @@ module.exports = {
         indexName: 'chusho',
       },
     ],
+    [
+      '@vuepress/register-components',
+      {
+        componentsDir: path.resolve(__dirname, './components'),
+        getComponentName: (filename) =>
+          path.trimExt(filename.replace(/\/|\\/g, '')),
+      },
+    ],
     [require('./plugins/docgen'), true],
   ],
 

packages/docs/guide/components/README.md

@@ -1,9 +1,9 @@
 # Components
 
--   [Alert](alert.html)
--   [Button](button.html)
--   [Dialog](dialog.html)
--   [Icon](icon.html)
--   [Picture](picture.html)
--   [Tabs](tabs.html)
--   [Collapse](collapse.html)
+- [Alert](alert.html)
+- [Button](button.html)
+- [Dialog](dialog.html)
+- [Icon](icon.html)
+- [Picture](picture.html)
+- [Tabs](tabs.html)
+- [Collapse](collapse.html)

packages/docs/guide/components/alert.md

@@ -26,10 +26,8 @@ The options below are to be set in the [global configuration](/guide/config.html
 ```js
 {
   components: {
-    alert: {
-      // ...
-    }
-  }
+    alert: { ... },
+  },
 }
 ```
 

packages/docs/guide/components/button.md

@@ -29,10 +29,8 @@ The options below are to be set in the [global configuration](/guide/config.html
 ```js
 {
   components: {
-    btn: {
-      // ...
-    }
-  }
+    btn: { ... },
+  },
 }
 ```
 

packages/docs/guide/components/collapse.md

@@ -21,20 +21,14 @@ The options below are to be set in the [global configuration](/guide/config.html
 ```js
 {
     components: {
-        collapse: {
-            // ...
-        },
-        collapseBtn: {
-            // ...
-        }
-        collapseContent: {
-            // ...
-        }
-    }
+        collapse: { ... },
+        collapseBtn: { ... },
+        collapseContent: { ... },
+    },
 }
 ```
 
-### CCollapse, CCollapseBtn and CCollapseContent
+### All components
 
 #### class
 

packages/docs/guide/components/dialog.md

@@ -11,10 +11,8 @@ The options below are to be set in the [global configuration](/guide/config.html
 ```js
 {
     components: {
-        dialog: {
-            // ...
-        },
-    }
+        dialog: { ... },
+    },
 }
 ```
 

packages/docs/guide/components/icon.md

@@ -23,10 +23,8 @@ The options below are to be set in the [global configuration](/guide/config.html
 ```js
 {
     components: {
-        icon: {
-            // ...
-        },
-    }
+        icon: { ... },
+    },
 }
 ```
 

packages/docs/guide/components/picture.md

@@ -18,10 +18,8 @@ The options below are to be set in the [global configuration](/guide/config.html
 ```js
 {
     components: {
-        picture: {
-            // ...
-        },
-    }
+        picture: { ... },
+    },
 }
 ```
 

packages/docs/guide/components/tabs.md

@@ -48,26 +48,16 @@ The options below are to be set in the [global configuration](/guide/config.html
 ```js
 {
     components: {
-        tabs: {
-            // ...
-        },
-        tabList: {
-            // ...
-        },
-        tab: {
-            // ...
-        },
-        tabPanels: {
-            // ...
-        },
-        tabPanel: {
-            // ...
-        },
-    }
+        tabs: { ... },
+        tabList: { ... },
+        tab: { ... },
+        tabPanels: { ... },
+        tabPanel: { ... },
+    },
 }
 ```
 
-### CTabs, CTabList, CTab, CTabPanels and CTabPanel
+### All components
 
 #### class
 

packages/docs/guide/config.md

@@ -25,8 +25,8 @@ app.use(Chusho, {
 
 Configure components globally, see [each component](/guide/components) page for available options.
 
--   **type:** `object`
--   **default:** `null`
+- **type:** `object`
+- **default:** `null`
 
 This object accept the following properties, one for each component:
 
@@ -52,10 +52,10 @@ This object accept the following properties, one for each component:
 
 Define if the current document direction is Right-to-left. This is used internally to adapt some behaviors.
 
--   **type:** `function`
--   **default:**
-    ```js
-    function () {
-      return document && document.dir === 'rtl';
-    }
-    ```
+- **type:** `function`
+- **default:**
+  ```js
+  function () {
+    return document && document.dir === 'rtl';
+  }
+  ```

packages/docs/guide/directives/README.md

@@ -1,3 +1,3 @@
 # Directives
 
--   [Click Outside](click-outside.html)
+- [Click Outside](click-outside.html)

packages/docs/guide/directives/click-outside.md

@@ -4,22 +4,22 @@ Trigger a function when a click happens outside the element with the said direct
 
 ```vue
 <template>
-    <CBtn v-clickOutside="handleClickOutside">Label</CBtn>
+  <CBtn v-clickOutside="handleClickOutside">Label</CBtn>
 </template>
 
 <script>
 export default {
-    methods: {
-        handleClickOutside(event) {
-            // Do something
-        },
+  methods: {
+    handleClickOutside(event) {
+      // Do something
     },
+  },
 };
 </script>
 ```
 
 ## v-clickOutside
 
--   **Expects:** `Function`
+- **Expects:** `Function`
 
 The function receive the original click Event as the first argument.