[docs] ScrollSpy

docs/directives/index.js

@@ -0,0 +1,5 @@
+/* eslint-disable quote-props */
+
+export default {
+    'scrollspy': require('./scrollspy').default,
+};

docs/directives/scrollspy/README.md

@@ -6,57 +6,65 @@ based on the scrolling of another element (i.e. `body`).
 **Note:** The directive is applied backwards compared to native Bootstrap V4. In **Bootstrap-Vue** the `v-b-scrollspy` directive
 is applied to the target element that has the nav-links, and the option(s) specify the element to monitor scrolling on.
 
-## Usage:
+## Usage
 Assume body is the scroll element, and use default offset of 10 pixels
 ```html
 <b-nav v-b-scrollspy>
   <b-nav-item href="#bar">Foo</b-nav-item>
   <b-nav-item href="#baz">Bar</b-nav-item>
 </b-nav>
+
 ```
+
 Assume body is the scroll element, and use offset of 20 pixels
 ```html
 <b-nav v-b-scrollspy="20">
   <b-nav-item href="#bar">Foo</b-nav-item>
   <b-nav-item href="#baz">Bar</b-nav-item>
 </b-nav>
 ```
+
 Element with ID #foo is the scroll element, and use default offset of 10 pixels
 ```html
 <b-nav v-b-scrollspy:foo>
   <b-nav-item href="#bar">Foo</b-nav-item>
   <b-nav-item href="#baz">Bar</b-nav-item>
 </b-nav>
 ```
+
 Element #foo is the scroll element, and use offset of 20 pixels
 ```html
 <b-nav v-b-scrollspy:foo="20">
   <b-nav-item href="#bar">Foo</b-nav-item>
   <b-nav-item href="#baz">Bar</b-nav-item>
 </b-nav>
 ```
+
 Element  #foo is the scroll element, and use offset of 25 pixels
 ```html
 <b-nav v-b-scrollspy:foo.25>
   <b-nav-item href="#bar">Foo</b-nav-item>
   <b-nav-item href="#baz">Bar</b-nav-item>
 </b-nav>
 ```
+
 Element #foo is the scroll element, and use default offset of 10 pixels (note single quotes around value)
 ```html
 <b-nav v-b-scrollspy="'#foo'">
   <b-nav-item href="#bar">Foo</b-nav-item>
   <b-nav-item href="#baz">Bar</b-nav-item>
 </b-nav>
 ```
+
 Pass object as config element can be a CSS ID (i.e `#foo`), a CSS selector (i.e. `body`), or a node reference
 ```html
 <b-nav v-b-scrollspy="{element: '#id', offset: 50}">
   <b-nav-item href="#bar">Foo</b-nav-item>
   <b-nav-item href="#baz">Bar</b-nav-item>
 </b-nav>
 ```
-## Config notes:
+
+## Config notes
 - If scroll element is not present, then we assume scrolling on `body`
 - If scroll element is a CSS selector, the first found element is chosen
 - If scroll element is not found, then ScrollSpy silently does nothing
@@ -70,41 +78,40 @@ Where:
 - `mod1` & `mod2` can be an `offset` number or string `method` (see below). Order of the modifiers is not important. Both are optional
 - `option` can be a string identifying the `element` to monitor scrolling on, a numeric `offset`, or a configuration object (see below). Optional
 
-## Config object properties:
+## Config object properties
 ```
-   config = {
-      element: <css-string|element-ref>,
-      offset: <number>,
-      method: <string: auto|position|offset>,
-      throttle: <number>
-   }
+config = {
+  element: <css-string|element-ref>,
+  offset: <number>,
+  method: <string: auto|position|offset>,
+  throttle: <number>
+}
 ```
 
-### `element`:
+### `element`
 - Element to be monitored for scrolling. defaults to `body`. can be an ID (`#foo`), a css Selector (`#foo div`), or a reference to an element node. If a CSS string, then the first matching element is used. if an ID is used it must start with `#`
 
-### `offset`:
+### `offset`
 - offset from top of scrolling viewport before triggering active state.
 - number of pixels
 Default: `10`
 
-### `method`:
+### `method`
 method for calculating target offsets.
  - `auto` will choose `offset` if  scroll element is `body`, else the method is `position`
  - `position` will calculate target offsets relative to the scroll container.
  - `offset` will calculate the target offsets relative to the top of the window/viewport
 Default: `auto`
 
-### `throttle`:
+### `throttle`
 - Timeout in ms for resize events to stop firing before recalculating offsets.
 Default: 200
 
 If args/modifiers and a value (object or number) is passed, the value takes precedence over the arg and modifiers
 
 If any of the options are invalid types, then an error is written to the console.
 
-## Events:
-
+## Events
 Whenever a target is activated, the event `scrollspy::activate` is emitted on `$root` with the
 targets HREF (ID) as the argument (i.e. `#bar`)
 

docs/directives/scrollspy/index.js

@@ -0,0 +1,8 @@
+import readme from './README.md';
+
+export default {
+    readme,
+    meta : {
+        title:'ScrollSpy'
+    }
+};

docs/index.js

@@ -1,5 +1,6 @@
 import package_info from '../package.json';
 import components from './components';
+import directives from './directives';
 
 export default {
     package_info,
@@ -8,10 +9,7 @@ export default {
             title: 'BootstrapVue',
             slug: '',
             pages: [
-                {title: 'Quick Start', slug: 'setup'},
-                {title: 'CLI', slug: 'cli'},
-                {title: 'Validation', slug: 'validation'},
-                {title: 'Contributing', slug: 'contributing'}
+                {title: 'Quick Start', slug: 'setup'}
             ]
         },
         {
@@ -24,6 +22,25 @@ export default {
                     slug: key
                 };
             })
-        }
+        },
+        {
+            title: 'Directives',
+            slug: 'directives/',
+            pages: Object.keys(directives).map(key => {
+                return {
+                    title: directives[key].meta.title,
+                    slug: key
+                };
+            })
+        },
+        {
+            title: 'Misc',
+            slug: '',
+            pages: [
+                {title: 'CLI', slug: 'cli'},
+                {title: 'Validation', slug: 'validation'},
+                {title: 'Contributing', slug: 'contributing'}
+            ]
+        },
     ]
 };

docs/nuxt/pages/docs/directives/_directive.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="container">
+        <div v-html="readme"></div>
+    </div>
+</template>
+
+
+<script>
+    import directives from '../../../../directives';
+
+    export default {
+        components: {},
+        layout: 'docs',
+
+        asyncData({params: {directive}, redirect}) {
+            const doc = directives[directive];
+            if (!doc) {
+                redirect('/docs');
+                return {};
+            }
+            return {...doc};
+        },
+
+        head() {
+            return {
+                title: `${this.meta.title} - BootstrapVue`
+            };
+        }
+    };
+</script>