bootstrap-vue · tmorehouse · Mar 29, 2019 · Mar 28, 2019 · Mar 28, 2019 · Mar 28, 2019
diff --git a/docs/components/componentdoc.vue b/docs/components/componentdoc.vue
@@ -34,15 +34,19 @@
         head-variant="default"
         striped
       >
-        <template slot="prop" slot-scope="{ value }">
-          <code>{{ value }}</code>
+        <template slot="prop" slot-scope="{ value, item }">
+          <code class="text-nowrap">{{ value }}</code>
+          <b-badge v-if="item.required" variant="info">Required</b-badge>
+          <b-badge v-else-if="item.deprecated" variant="danger">Deprecated</b-badge>
+          <b-badge v-else-if="item.deprecation" variant="warning">Deprecation</b-badge>
         </template>
         <template slot="row-details" slot-scope="{ item }">
-          <b-badge variant="warning">
-            {{ typeof item.deprecated === 'string' ? 'deprecation' : 'deprecated' }}
-          </b-badge>
-          <!-- If deprecated is a string, show the string value -->
-          <small v-if="typeof item.deprecated === 'string'">{{ item.deprecated }}</small>
+          <p v-if="typeof item.deprecated === 'string'" class="mb-1 small">
+            {{ item.deprecated }}
+          </p>
+          <p v-if="typeof item.deprecation === 'string'" class="mb-1 small">
+            {{ item.deprecation }}
+          </p>
         </template>
         <template slot="defaultValue" slot-scope="{ value }">
           <code v-if="value">{{ value }}</code>
@@ -80,7 +84,11 @@
         small
         head-variant="default"
         striped
-      ></b-table>
+      >
+        <template slot="name" slot-scope="{ value }">
+          <code class="text-nowrap">{{ value }}</code>
+        </template>
+      </b-table>
     </article>
 
     <article v-if="events && events.length > 0">
@@ -94,13 +102,16 @@
         head-variant="default"
         striped
       >
+        <template slot="event" slot-scope="{ value }">
+          <code class="text-nowrap">{{ value }}</code>
+        </template>
         <template slot="args" slot-scope="{ value, item }">
           <div
             v-for="arg in value"
             :key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"
           >
             <template v-if="arg.arg"><code>{{ arg.arg }}</code> - </template>
-            <span v-html="arg.description"></span>
+            <span>{{ arg.description }}</span>
           </div>
         </template>
       </b-table>
@@ -121,13 +132,18 @@
         head-variant="default"
         striped
       >
+        <template slot="event" slot-scope="{ value }">
+          <code class="text-nowrap">{{ value }}</code>
+        </template>
         <template slot="args" slot-scope="{ value, item }">
           <div
             v-for="arg in value"
             :key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"
           >
-            <template v-if="arg.arg"><code>{{ arg.arg }}</code> - </template>
-            <span v-html="arg.description"></span>
+            <template v-if="arg.arg">
+              <code>{{ arg.arg }}</code>
+              <span v-if="arg.description"> - {{ arg.description }}</span>
+            </template>
           </div>
         </template>
       </b-table>
@@ -203,22 +219,11 @@ export default {
       return this.componentOptions.props || {}
     },
     propsFields() {
-      const props = this.componentProps
-      const hasRequired = Object.keys(props).some(p => props[p].required)
-
-      const fields = [
+      return [
         { key: 'prop', label: 'Property' },
         { key: 'type', label: 'Type' },
         { key: 'defaultValue', label: 'Default Value' }
       ]
-
-      // Add the required column if there are required field(s)
-      if (hasRequired) {
-        // Insert required field after prop name
-        fields.splice(1, 0, { key: 'required', label: 'Required' })
-      }
-
-      return fields
     },
     eventsFields() {
       return [
@@ -267,19 +272,15 @@ export default {
         }
         defaultVal = (defaultVal || '').replace(/"/g, "'")
 
-        // Requied prop?
-        const required = p.required ? 'Yes' : ''
-        // Deprecation?
-        const deprecated = p.deprecated || false
-
         return {
           prop: kebabCase(prop),
           type,
-          required,
           typeClass,
           defaultValue: defaultVal,
-          deprecated,
-          _showDetails: !!deprecated
+          required: p.required || false,
+          deprecated: p.deprecated || false,
+          deprecation: p.deprecation || false,
+          _showDetails: typeof p.deprecated === 'string' || typeof p.deprecation === 'string'
         }
       })
     },

diff --git a/docs/components/importdoc.vue b/docs/components/importdoc.vue
@@ -10,17 +10,17 @@
         </anchored-heading>
 
         <b-table :items="componentImports" small head-variant="default" striped>
-          <template slot="component" slot-scope="field">
-            <code>{{ field.value }}</code>
+          <template slot="component" slot-scope="{ value }">
+            <code class="text-nowrap">{{ value }}</code>
           </template>
-          <template slot="importPath" slot-scope="field">
-            <code>{{ field.value }}</code>
+          <template slot="importPath" slot-scope="{ value }">
+            <code>{{ value }}</code>
           </template>
         </b-table>
 
         <p><strong>Example:</strong></p>
 
-        <pre class="hljs js text-monospace p-2"><code v-html="componentImportCode"></code></pre>
+        <pre class="hljs js text-monospace p-2">{{ componentImportCode }}</pre>
       </article>
     </template>
 
@@ -31,17 +31,17 @@
         </anchored-heading>
 
         <b-table :items="directiveImports" small head-variant="default" striped>
-          <template slot="directive" slot-scope="field">
-            <code>{{ field.value }}</code>
+          <template slot="directive" slot-scope="{ value }">
+            <code class="text-nowrap">{{ value }}</code>
           </template>
-          <template slot="importPath" slot-scope="field">
-            <code>{{ field.value }}</code>
+          <template slot="importPath" slot-scope="{ value }">
+            <code>{{ value }}</code>
           </template>
         </b-table>
 
         <p><strong>Example:</strong></p>
 
-        <pre class="hljs js text-monospace p-2"><code v-html="directiveImportCode"></code></pre>
+        <pre class="hljs js text-monospace p-2">{{ directiveImportCode }}</pre>
       </article>
     </template>
 
@@ -59,7 +59,7 @@
         This plugin includes all of the above listed individual directives.
       </p>
 
-      <pre class="hljs js text-monospace p-2"><code v-html="pluginImportCode"></code></pre>
+      <pre class="hljs js text-monospace p-2">{{ pluginImportCode }}</pre>
 
       <template v-if="meta.plugins && meta.plugins.length > 0">
         <p>This plugin also automatically includes the following plugins:</p>
@@ -71,6 +71,16 @@
   </section>
 </template>
 
+<style scoped>
+h1,
+h2,
+h3,
+h4,
+h5 {
+  padding: 20px 0;
+}
+</style>
+
 <script>
 import hljs from 'highlightjs'
 import kebabCase from 'lodash/kebabCase'

diff --git a/docs/components/search.vue b/docs/components/search.vue
@@ -3,7 +3,9 @@
     <b-form-input
       id="bd-search-input"
       v-model="search"
+      type="search"
       placeholder="Search keywords..."
+      aria-label="Search site"
     ></b-form-input>
     <button
       v-b-toggle.bd-docs-nav
@@ -38,6 +40,7 @@
         v-for="(results, section, idx) in results"
         :key="section"
         :class="idx > 0 ? 'mt-2' : ''"
+        role="group"
       >
         <h6 class="bd-text-purple my-1" v-html="section"></h6>
         <div v-for="t in results" :key="t.href" class="my-1">

diff --git a/docs/components/toc.vue b/docs/components/toc.vue
@@ -1,50 +1,52 @@
 <template>
-  <nav
-    v-if="toc.toc && toc.toc.length > 0"
-    aria-label="Page table of contents"
-  >
-    <b-nav v-b-scrollspy.72 vertical class="m-toc section-nav">
-      <b-nav-item
-        v-if="toc.title && toc.top"
-        :href="toc.top"
-        class="toc-entry font-weight-bold mb-2"
-        @click="scrollIntoView($event, toc.top)"
-      >
-        <span v-html="toc.title"></span>
-      </b-nav-item>
-
-      <template v-for="(h2, index) in toc.toc">
-        <b-nav
-          v-if="isArray(h2) && h2.length > 0"
-          :key="index"
-          vertical
-          class="mb-1"
+  <div>
+    <nav
+      v-if="toc.toc && toc.toc.length > 0"
+      aria-label="Page table of contents"
+    >
+      <b-nav v-b-scrollspy.72 vertical class="m-toc section-nav">
+        <b-nav-item
+          v-if="toc.title && toc.top"
+          :href="toc.top"
+          class="toc-entry font-weight-bold mb-2"
+          @click="scrollIntoView($event, toc.top)"
         >
-          <b-nav-item
-            v-for="h3 in h2"
-            :key="h3.href"
+          <span v-html="toc.title"></span>
+        </b-nav-item>
+
+        <template v-for="(h2, index) in toc.toc">
+          <b-nav
+            v-if="isArray(h2) && h2.length > 0"
+            :key="index"
             vertical
-            pills
-            :href="h3.href"
-            class="toc-entry toc-h3 mb-2"
-            @click="scrollIntoView($event, h3.href)"
+            class="mb-1"
           >
-            <span v-html="h3.label"></span>
-          </b-nav-item>
-        </b-nav>
+            <b-nav-item
+              v-for="h3 in h2"
+              :key="h3.href"
+              vertical
+              pills
+              :href="h3.href"
+              class="toc-entry toc-h3 mb-2"
+              @click="scrollIntoView($event, h3.href)"
+            >
+              <span v-html="h3.label"></span>
+            </b-nav-item>
+          </b-nav>
 
-        <b-nav-item
-          v-else
-          :key="h2.href"
-          :href="h2.href"
-          class="toc-entry toc-h2 mb-2"
-          @click="scrollIntoView($event, h2.href)"
-        >
-          <span v-html="h2.label"></span>
-        </b-nav-item>
-      </template>
-    </b-nav>
-  </nav>
+          <b-nav-item
+            v-else
+            :key="h2.href"
+            :href="h2.href"
+            class="toc-entry toc-h2 mb-2"
+            @click="scrollIntoView($event, h2.href)"
+          >
+            <span v-html="h2.label"></span>
+          </b-nav-item>
+        </template>
+      </b-nav>
+    </nav>
+  </div>
 </template>
 
 <style scoped>

diff --git a/docs/plugins/docs-mixin.js b/docs/plugins/docs-mixin.js
@@ -27,7 +27,9 @@ export default {
     clearTimeout(this.scrollTimeout)
     this.scrollTimeout = null
     this.focusScroll()
-    this.$root.$emit('setTOC', this.readme, this.meta || null)
+    this.$nextTick(() => {
+      this.$root.$emit('setTOC', this.readme || '', this.meta || null)
+    })
   },
 
   updated() {