bootstrap-vue · tmorehouse · Nov 5, 2018 · Nov 4, 2018 · Nov 4, 2018 · Nov 4, 2018
diff --git a/docs/components/componentdoc.vue b/docs/components/componentdoc.vue
@@ -6,7 +6,7 @@
     <b-row
       tag="header"
       align-v="center">
-      <b-col sm="9"><h2><code>{{ tag }}</code></h2></b-col>
+      <b-col sm="9"><h2 :id="`comp-ref-${componentName}`"><code>{{ tag }}</code></h2></b-col>
       <b-col
         sm="3"
         class="text-sm-right">
@@ -18,8 +18,16 @@
       </b-col>
     </b-row>
 
+    <article v-if="aliases && aliases.length > 0">
+      <h4 :id="`comp-ref-${componentName}-aliases`">Component aliases</h4>
+      <p><code>{{ tag }}</code> can also be used via the following aliases:</p>
+      <ul>
+        <li v-for="alias in aliases" :key="alias"><code>&lt;{{ kebabCase(alias) }}&gt;</code></li>
+      </ul>
+    </article>
+
     <article v-if="props_items && props_items.length > 0">
-      <h4>Properties</h4>
+      <h4 :id="`comp-ref-${componentName}-props`">Properties</h4>
       <b-table
         :items="props_items"
         :fields="props_fields"
@@ -35,7 +43,7 @@
     </article>
 
     <article v-if="slots && slots.length > 0">
-      <h4>Slots</h4>
+      <h4 :id="`comp-ref-${componentName}-slots`">Slots</h4>
       <b-table
         :items="slots"
         :fields="slots_fields"
@@ -45,7 +53,7 @@
     </article>
 
     <article v-if="events && events.length > 0">
-      <h4>Events</h4>
+      <h4 :id="`comp-ref-${componentName}-events`">Events</h4>
       <b-table
         :items="events"
         :fields="events_fields"
@@ -88,8 +96,15 @@ export default {
     events: {
       type: Array,
       default: () => []
+    },
+    aliases: {
+      type: Array,
+      default: () => []
     }
   },
+  methods: {
+    kebabCase
+  },
   computed: {
     componentOptions () {
       const component = Vue.options.components[this.component]

diff --git a/docs/components/importdoc.vue b/docs/components/importdoc.vue
@@ -4,7 +4,7 @@
     v-if="components.length > 0 || directives.length > 0">
 
     <article v-if="components.length > 0">
-      <h3>Importing Individual Components</h3>
+      <h3 id="importing-individual-components">Importing Individual  {{ pluginTitle }} Components</h3>
       <b-table
         :items="componentImports"
         small
@@ -32,7 +32,7 @@
     </article>
 
     <article v-if="directives.length > 0">
-      <h3>Importing Individual Directives</h3>
+      <h3 id="importing-individual-directives">Importing Individual  {{ pluginTitle }} Directives</h3>
       <b-table
         :items="directiveImports"
         small
@@ -62,7 +62,7 @@
     </article>
 
     <article class="pb-5">
-      <h3>Importing {{ pluginTitle }} as a Vue plugin</h3>
+      <h3 id="importing-as-a-plugin">Importing {{ pluginTitle }} as a Vue plugin</h3>
       <p v-if="$route.name === 'docs-components-slug'">
         This plugin includes all of the above listed individual
         components<span v-if="directives.length"> and directives</span>.
@@ -105,6 +105,7 @@
 <script>
 import kebabCase from 'lodash/kebabCase'
 import startCase from 'lodash/startCase'
+
 export default {
   props: {
     meta: {}
@@ -133,7 +134,12 @@ export default {
       })
     },
     components () {
-      return [].concat(this.meta.component, this.meta.components).filter(c => c)
+      let subcomponents = []
+      if (this.meta.components) {
+        // We just want the sub-component name
+        subcomponents = this.meta.components.map(m => m.component)
+      }
+      return [].concat(this.meta.component, subcomponents).filter(c => c)
     },
     directives () {
       return [].concat(this.meta.directive, this.meta.directives).filter(d => d)

diff --git a/docs/components/search.vue b/docs/components/search.vue
@@ -42,26 +42,26 @@ function process(readme, section, page) {
 }
 
 // Async build the search database
-import('~/markdown/intro/README.md').then(readme => {
+import('~/markdown/intro/README.md' /* webpackChunkName: "docs/intro" */).then(readme => {
   process(readme.default, '', '');
 });
 Object.keys(_components).forEach(page => {
-  import('~/../src/components/' + page + '/README.md').then(readme => {
+  import('~/../src/components/' + page + '/README.md'  /* webpackChunkName: "docs/components" */).then(readme => {
     process(readme.default, 'components', page);
   });
 });
 Object.keys(_directives).forEach(page => {
-  import('~/../src/directives/' + page + '/README.md').then(readme => {
+  import('~/../src/directives/' + page + '/README.md' /* webpackChunkName: "docs/directives" */).then(readme => {
     process(readme.default, 'directives', page);
   });
 });
 Object.keys(_reference).forEach(page => {
-  import('~/markdown/reference/' + page + '/README.md').then(readme => {
+  import('~/markdown/reference/' + page + '/README.md' /* webpackChunkName: "docs/reference" */).then(readme => {
     process(readme.default, 'reference', page);
   });
 });
 Object.keys(_misc).forEach(page => {
-  import('~/markdown/misc/' + page + '/README.md').then(readme => {
+  import('~/markdown/misc/' + page + '/README.md' /* webpackChunkName: "docs/misc" */).then(readme => {
     process(readme.default, 'misc', page);
   });
 });

diff --git a/docs/components/toc.vue b/docs/components/toc.vue
@@ -77,17 +77,19 @@ import { scrollTo, offsetTop, makeTOC } from '~/utils'
 export default {
   data () {
     return {
-      readme: ''
+      readme: '',
+      meta: null
     }
   },
   computed: {
     toc () {
-      return makeTOC(this.readme)
+      return makeTOC(this.readme, this.meta)
     }
   },
   mounted () {
-    this.$root.$on('setTOC', readme => {
+    this.$root.$on('setTOC', (readme, meta) => {
       this.readme = readme
+      this.meta = meta || null
     })
   },
   methods: {

diff --git a/docs/pages/docs/components/_slug.vue b/docs/pages/docs/components/_slug.vue
@@ -1,25 +1,31 @@
 <template>
-    <div class="container">
-        <div class="bd-content" v-html="readme" v-play></div>
-
-        <componentdoc :component="meta.component" :events="meta.events" :slots="meta.slots"></componentdoc>
-
-        <b-card class="my-4">
-            <small class="font-italic">
-                Trying to get native browser events working on your component? Use the
-                <code>.native</code>
-                modifier to capture browser native events such as:
-                <code>@click.native="..."</code>,
-                <code>@mouseover.native="..."</code>, etc. See the the official
-                <a href="https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components">Vue.js documentation</a>
-                for more information.
-            </small>
-        </b-card>
-
-        <componentdoc :component="component" :key="component" v-for="component in meta.components"></componentdoc>
-
-        <importdoc :meta="meta"></importdoc>
-    </div>
+  <main class="container">
+    <div class="bd-content" v-html="readme" v-play></div>
+
+    <section class="bd-content">
+      <h2 id="component-reference">{{ startCase(meta.title)}} Component Reference</h2>
+
+      <!-- main component reference information -->
+      <componentdoc :component="meta.component"
+                    :events="meta.events"
+                    :slots="meta.slots"
+                    :aliases="meta.aliases">
+      </componentdoc>
+
+      <!-- sub-component reference information -->
+      <componentdoc v-for="meta in meta.components"
+                    :key="meta.component"
+                    :component="meta.component"
+                    :events="meta.events"
+                    :slots="meta.slots"
+                    :aliases="meta.aliases">
+      </componentdoc>
+
+      <!-- Component importing information -->
+      <importdoc :meta="meta"></importdoc>
+    </section>
+
+  </main>
 </template>
 
 
@@ -28,18 +34,20 @@ import componentdoc from "~/components/componentdoc.vue";
 import importdoc from "~/components/importdoc.vue";
 import { components as _meta } from "~/content";
 import docsMixin from "~/plugins/docs-mixin";
+import startCase from 'lodash/startCase'
 
 const getReadMe = name => import('~/../src/components/' + name + '/README.md' /* webpackChunkName: "docs/components" */)
 
 export default {
   components: { componentdoc, importdoc },
   mixins: [docsMixin],
   layout: "docs",
-
+  methods: {
+    startCase
+  },
   validate({ params }) {
       return Boolean(_meta[params.slug])
   },
-
   async asyncData({ params }) {
       const readme = await getReadMe(params.slug)
       const meta = _meta[params.slug]

diff --git a/docs/pages/docs/directives/_slug.vue b/docs/pages/docs/directives/_slug.vue
@@ -1,35 +1,40 @@
 <template>
-    <div class="container">
-        <div class="bd-content" v-html="readme" v-play></div>
-
-        <importdoc :meta="meta"></importdoc>
-    </div>
+  <main class="container">
+    <div class="bd-content" v-html="readme" v-play></div>
+    <section class="bd-content">
+      <h2 id="directive-reference">{{ metaTitle }} Directive Reference</h2>
+      <importdoc :meta="meta"></importdoc>
+    </section>
+  </main>
 </template>
 
 <script>
 import importdoc from '~/components/importdoc.vue';
 import { directives as _meta } from "~/content";
 import docsMixin from "~/plugins/docs-mixin";
+import startCase from 'lodash/startCase'
 
 const getReadMe = name => import('~/../src/directives/' + name + '/README.md' /* webpackChunkName: "docs/directives" */)
 
 export default {
   mixins: [docsMixin],
   components: { importdoc },
+  computed: {
+    metaTitle () {
+      return startCase(this.meta.title)
+    }
+  },
   layout: "docs",
-
   validate({ params }) {
-      return Boolean(_meta[params.slug])
+    return Boolean(_meta[params.slug])
   },
-
   async asyncData({ params }) {
-      const readme = await getReadMe(params.slug)
-      const meta = _meta[params.slug]
-
-      return {
-          readme: readme.default,
-          meta
-      }
+    const readme = await getReadMe(params.slug)
+    const meta = _meta[params.slug]
+    return {
+      readme: readme.default,
+      meta
+    }
   }
-};
+}
 </script>
diff --git a/docs/plugins/docs-mixin.js b/docs/plugins/docs-mixin.js
@@ -26,7 +26,7 @@ export default {
     clearTimeout(this.scrollTimeout)
     this.scrollTimeout = null
     this.focusScroll()
-    this.$root.$emit('setTOC', this.readme)
+    this.$root.$emit('setTOC', this.readme, this.meta || null)
   },
 
   updated () {