Permalink
Browse files

feat(docs): Add TOC section in right hand column (#1077)

* feat(docs): TOC right sidebar component

* feat(docs): Add TOC to components

* feat(docs): Add TOC to directives

* feat(docs): Add TOC to layout

* feat(docs): Add TOC to reference

* feat(docs): Add TOC to docs index

* feat(docs): Add TOC to changelog

* feat(docs): Add TOC to changelog

* feat(docs): Add TOC compoent to layout

* [gettingstrted.md] Fix header levels

* [changewlog.md] Correct header levels

* Remove HTML markup in TOC links

* Create index.vue

* Update and rename docs/nuxt/pages/docs/changelog.vue to docs/nuxt/pages/docs/misc/changelog.vue

* Update and rename docs/nuxt/pages/docs/contributing.vue to docs/nuxt/pages/docs/misc/contributing.vue

* Update index.js

* `m-toc` Regexp fix

* Allow HTML entities in TOC markup

* Handle changelog duplicate h3 IDs (by filtering them out)

* Update changelog.vue

* Update CHANGELOG.md

* Update toc.vue

* Update CONTRIBUTING.md

* [alert] Add component ref heading

* [badge] add component ref heading

* Update README.md

* [breadcrumb] add component ref heading

* [button-group] add component ref heading

* [button-toolbar] add component ref heading and fix headre levels

* [button] Add component ref heading and fix heading levels

* [card] add component ref heading

* [carousel] add component ref heading

* [collapse] add component ref heading

* [dropdown] Add compoent ref heading

* [table] add compoent ref header

* [tabs] add component ref header and fix heading levels

* [ttolspi] add compoent reference heading

* [progress] add component reference header

* [popover] add component ref header

* [embed] add component ref header

* [form-chjeckboxes] add component ref header

* [form-file] add component ref heading

* [form-group] add component reference heder

* [form-input] add component reference heading

* [form-radios] add component ref heading

* [form-select] ad component ref heading

* [form-textarea] Add component ref heading

* [form] add compoent ref heading

* [img] add component ref heading

* [imput-group] ad component ref heading and fix header levels

* [jumbotron] add component ref header

* [list-group] add component ref heading

* [media] ad component ref heading

* [modal] add component ref header

* [nav] add component ref header and fix heading levels

* [navbar] add component ref header and fix heading levels

* [pagination-nav] add component reference heading

* [pagination] ad component ref header and fix heading levels

* Update README.md

* [changelog]  Heading ID's not allowed to start with a number

* Update nuxt.config.js

* Update index.vue

* [badge] fix header levels

* Update _component.vue

* Update _directive.vue

* Update changelog.vue

* Update contributing.vue

* Update _reference.vue

* Update index.vue
  • Loading branch information...
tmorehouse committed Sep 19, 2017
1 parent 4447c7c commit b9d15f8323f41d0d00c71d37ffe0eae472349cde
Showing with 393 additions and 192 deletions.
  1. +18 −37 CHANGELOG.md
  2. +9 −8 CONTRIBUTING.md
  3. +8 −8 docs/README.md
  4. +2 −0 docs/components/alert/README.md
  5. +5 −3 docs/components/badge/README.md
  6. +3 −0 docs/components/breadcrumb/README.md
  7. +7 −8 docs/components/button-group/README.md
  8. +8 −6 docs/components/button-toolbar/README.md
  9. +12 −6 docs/components/button/README.md
  10. +2 −0 docs/components/card/README.md
  11. +7 −5 docs/components/carousel/README.md
  12. +2 −0 docs/components/collapse/README.md
  13. +5 −1 docs/components/dropdown/README.md
  14. +2 −0 docs/components/embed/README.md
  15. +2 −0 docs/components/form-checkboxes/README.md
  16. +1 −0 docs/components/form-file/README.md
  17. +4 −2 docs/components/form-group/README.md
  18. +3 −0 docs/components/form-input/README.md
  19. +2 −0 docs/components/form-radios/README.md
  20. +2 −0 docs/components/form-select/README.md
  21. +3 −0 docs/components/form-textarea/README.md
  22. +2 −0 docs/components/form/README.md
  23. +2 −0 docs/components/img/README.md
  24. +8 −6 docs/components/input-group/README.md
  25. +2 −0 docs/components/jumbotron/README.md
  26. +6 −0 docs/components/list-group/README.md
  27. +2 −0 docs/components/media/README.md
  28. +9 −6 docs/components/modal/README.md
  29. +18 −14 docs/components/nav/README.md
  30. +12 −10 docs/components/navbar/README.md
  31. +4 −2 docs/components/pagination-nav/README.md
  32. +12 −9 docs/components/pagination/README.md
  33. +2 −0 docs/components/popover/README.md
  34. +3 −0 docs/components/progress/README.md
  35. +1 −14 docs/components/table/README.md
  36. +11 −9 docs/components/tabs/README.md
  37. +1 −0 docs/components/tooltip/README.md
  38. +1 −1 docs/index.js
  39. +2 −0 docs/layout/README.md
  40. +89 −0 docs/nuxt/components/toc.vue
  41. +3 −1 docs/nuxt/layouts/docs.vue
  42. +0 −18 docs/nuxt/pages/docs/changelog.vue
  43. +8 −0 docs/nuxt/pages/docs/components/_component.vue
  44. +0 −18 docs/nuxt/pages/docs/contributing.vue
  45. +8 −0 docs/nuxt/pages/docs/directives/_directive.vue
  46. +8 −0 docs/nuxt/pages/docs/index.vue
  47. +4 −0 docs/nuxt/pages/docs/layout/index.vue
  48. +26 −0 docs/nuxt/pages/docs/misc/changelog.vue
  49. +24 −0 docs/nuxt/pages/docs/misc/contributing.vue
  50. +9 −0 docs/nuxt/pages/docs/misc/index.vue
  51. +8 −0 docs/nuxt/pages/docs/reference/_reference.vue
  52. +1 −0 nuxt.config.js
@@ -2,9 +2,8 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
<a name="1.0.0-beta.7"></a>
# [1.0.0-beta.7](https://github.com/bootstrap-vue/bootstrap-vue/compare/v1.0.0-beta.6...v1.0.0-beta.7) (2017-09-01)
## [v1.0.0-beta.7](https://github.com/bootstrap-vue/bootstrap-vue/compare/v1.0.0-beta.6...v1.0.0-beta.7)
Released: 2017-09-01
### Bug Fixes
@@ -22,7 +21,6 @@ All notable changes to this project will be documented in this file. See [standa
* **tooltip+popover components:** Delay instantiation on mounted() ([#969](https://github.com/bootstrap-vue/bootstrap-vue/issues/969)) ([4fc18ec](https://github.com/bootstrap-vue/bootstrap-vue/commit/4fc18ec))
* **tooltip+popover components:** Emit events and minor adjustments ([#972](https://github.com/bootstrap-vue/bootstrap-vue/issues/972)) ([cf7c538](https://github.com/bootstrap-vue/bootstrap-vue/commit/cf7c538))
### Features
* **b-img-lazy:** Lazy loaded image component ([#943](https://github.com/bootstrap-vue/bootstrap-vue/issues/943)) ([68138cb](https://github.com/bootstrap-vue/bootstrap-vue/commit/68138cb))
@@ -41,10 +39,8 @@ All notable changes to this project will be documented in this file. See [standa
* **tooltips+popovers:** Automatically hide when trigger element is no longer visible ([#978](https://github.com/bootstrap-vue/bootstrap-vue/issues/978)) ([09eaaa2](https://github.com/bootstrap-vue/bootstrap-vue/commit/09eaaa2))
<a name="1.0.0-beta.6"></a>
# [1.0.0-beta.6](https://github.com/bootstrap-vue/bootstrap-vue/compare/v1.0.0-beta.5...v1.0.0-beta.6) (2017-08-30)
## [v1.0.0-beta.6](https://github.com/bootstrap-vue/bootstrap-vue/compare/v1.0.0-beta.5...v1.0.0-beta.6)
Released: 2017-08-30
### Bug Fixes
@@ -65,7 +61,6 @@ All notable changes to this project will be documented in this file. See [standa
* **tabs:** minor logic update ([add0fb6](https://github.com/bootstrap-vue/bootstrap-vue/commit/add0fb6))
* **tabs:** Show first tab when set to active ([#912](https://github.com/bootstrap-vue/bootstrap-vue/issues/912)) ([d920b1c](https://github.com/bootstrap-vue/bootstrap-vue/commit/d920b1c))
### Features
* **b-col:** restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 ([#929](https://github.com/bootstrap-vue/bootstrap-vue/issues/929)) ([023f078](https://github.com/bootstrap-vue/bootstrap-vue/commit/023f078))
@@ -84,10 +79,8 @@ All notable changes to this project will be documented in this file. See [standa
* **table:** use computedFields for easier usage ([b9980f0](https://github.com/bootstrap-vue/bootstrap-vue/commit/b9980f0))
<a name="1.0.0-beta.5"></a>
# [1.0.0-beta.5](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.20.2...v1.0.0-beta.5) (2017-08-21)
## [v1.0.0-beta.5](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.20.2...v1.0.0-beta.5)
Released: 2017-08-21
### Bug Fixes
@@ -140,7 +133,6 @@ All notable changes to this project will be documented in this file. See [standa
* **tabs:** Better handling of active tab and transitions ([#903](https://github.com/bootstrap-vue/bootstrap-vue/issues/903)) ([d5b81dd](https://github.com/bootstrap-vue/bootstrap-vue/commit/d5b81dd))
* **tabs:** update to use card-block ([d881c37](https://github.com/bootstrap-vue/bootstrap-vue/commit/d881c37))
### Features
* **addEventListenerOnce:** add to utils ([0869ffd](https://github.com/bootstrap-vue/bootstrap-vue/commit/0869ffd))
@@ -175,10 +167,8 @@ All notable changes to this project will be documented in this file. See [standa
* link, breadcrumb, & button functional components ([#830](https://github.com/bootstrap-vue/bootstrap-vue/issues/830)) ([cdbef2d](https://github.com/bootstrap-vue/bootstrap-vue/commit/cdbef2d))
<a name="0.20.2"></a>
## [0.20.2](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.20.1...v0.20.2) (2017-08-11)
## [v0.20.2](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.20.1...v0.20.2)
Released: 2017-08-11
### Bug Fixes
@@ -192,15 +182,12 @@ All notable changes to this project will be documented in this file. See [standa
* **v-play:** disable vue global errorHandler ([9a7bdaf](https://github.com/bootstrap-vue/bootstrap-vue/commit/9a7bdaf))
## [v0.20.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.20.0...v0.20.1)
Released: 2017-08-10
<a name="0.20.1"></a>
## [0.20.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.20.0...v0.20.1) (2017-08-10)
<a name="0.20.0"></a>
# [0.20.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.19.0...v0.20.0) (2017-08-10)
## [v0.20.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.19.0...v0.20.0)
Released: 2017-08-10
### Bug Fixes
@@ -222,10 +209,8 @@ All notable changes to this project will be documented in this file. See [standa
* **table:** Add row-dblclicked event ([#780](https://github.com/bootstrap-vue/bootstrap-vue/issues/780)) ([1aaf915](https://github.com/bootstrap-vue/bootstrap-vue/commit/1aaf915))
<a name="0.19.0"></a>
# [0.19.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.18.0...v0.19.0) (2017-08-09)
## [v0.19.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.18.0...v0.19.0)
Released: 2017-08-09
### Bug Fixes
@@ -292,10 +277,8 @@ All notable changes to this project will be documented in this file. See [standa
* **utils:** wrap-up as ES6 module ([#656](https://github.com/bootstrap-vue/bootstrap-vue/issues/656)) ([b5f7cfc](https://github.com/bootstrap-vue/bootstrap-vue/commit/b5f7cfc))
<a name="0.18.0"></a>
# [0.18.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.17.1...v0.18.0) (2017-07-04)
## [v0.18.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v0.17.1...v0.18.0)
Released: 2017-07-04
### Bug Fixes
@@ -335,10 +318,8 @@ All notable changes to this project will be documented in this file. See [standa
* **mixin:** Automate event registration & removal on root vm ([#581](https://github.com/bootstrap-vue/bootstrap-vue/issues/581)) ([be5f834](https://github.com/bootstrap-vue/bootstrap-vue/commit/be5f834))
<a name="0.17.1"></a>
## [0.17.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/0.17.0...0.17.1) (2017-06-30)
## [v0.17.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/0.17.0...0.17.1)
Released: 2017-06-30
### Bug Fixes
@@ -2,17 +2,18 @@
👍🎉 First off, thanks for taking the time to contribute! 🎉👍
### Playground & Issue Reports
## Playground & Issue Reports
If you want to play with BootstrapVue components without any local setup just head to
[OnlinePlayground](https://bootstrap-vue.github.io/play) and you can interactively play and test components with a fresh Vue instance.
[OnlinePlayground](https://bootstrap-vue.js.org/play) and you can interactively play and test components with a fresh Vue instance.
If you want to keep your changes or make PRs reporting a component's misbehaviour you can save them in JSFiddle and provide that link in issues.
### Setup
- Clone this repo.
## Setup
- Clone this repo (`git clone https://github.com/bootstrap-vue/bootstrap-vue --branch=dev`)
- Make sure you have node & yarn installed locally.
- `cd bootstrap-vue`
- Run `yarn install` to get all dependencies installed.
### Work on components
## Work on components
If you want to hack and improve components locally, you can follow these steps:
- Run `yarn docs-dev` to run a local development server.
@@ -21,13 +22,13 @@ If you want to hack and improve components locally, you can follow these steps:
Changes will be applied with webpack hot-reloading without needing to reload the page.
- Finally feel free to share your awesome hacks with others and opening a PR.
### Test inside your project
## Test inside your project
If you want to see your changes in your project instead of the playground:
- Execute `yarn link` inside *bootstrap-vue* directory.
- In your project run `yarn link bootstrap-vue`
- Run `yarn watch` inside *bootstrap-vue*
- Now every time you change a component, a new production version will be built and ready on your project.
### Pull requests
Please ensure all pull requests are made aganst the `dev` branch on GitHub.
## Pull requests
Please ensure all pull requests related to `v1.x` are made aganst the `dev` branch on GitHub.
@@ -1,6 +1,6 @@
# Getting Started
### Webpack
## Webpack
If you are using module bundlers such as Webpack, Rollup, Laravel elixir/mix, etc you may prefer directly include package
into your project. To get started use yarn or npm to get latest version first:
@@ -29,7 +29,7 @@ manually include both [Bootstrap](https://v4-alpha.getbootstrap.com/getting-star
and [BootstrapVue](https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css) CSS files
in your bundle or reference them from `static/` via `index.html`.
### Nuxt.js
## Nuxt.js
You can use official [Nuxt.js](https://nuxtjs.org) module to add BootstrapVue support. ([module docs](https://github.com/nuxt-community/modules/tree/master/modules/bootstrap-vue))
- Add `@nuxtjs/bootstrap-vue` dependency using yarn or npm to your project:
@@ -46,7 +46,7 @@ You can use official [Nuxt.js](https://nuxtjs.org) module to add BootstrapVue su
}
```
### vue-cli
## vue-cli
Download the dependencies:
@@ -66,7 +66,7 @@ import 'bootstrap/dist/css/bootstrap.css'
Vue.use(BootstrapVue)
```
### Individual components and directives
## Individual components and directives
If for any reason just want to use a specific component, you can do this by directly importing that component.
This is not recommended as entire package gzipped size is ~40Kb (including Popper.js)!
@@ -88,7 +88,7 @@ new Vue({
// ...
})
```
### Browser
## Browser
```html
<!-- Add this to <head> -->
@@ -119,19 +119,19 @@ If you've already been using Bootstrap 4, there are a couple adjustments you may
## Browsers Support
**CSS**
### CSS
BootstrapVue is to be used with Bootstrap 4 CSS.
Please see [Browsers and devices](https://v4-alpha.getbootstrap.com/getting-started/browsers-devices)
for more information about browsers currently supported by Bootstrap 4.
**JS**
### JS
BootstrapVue is written in Vue! So this is up to your project and bundler that which browsers are supported.
If you want to support older IE, Android and IOS devices, you may want to use
[Babel Polyfill](https://babeljs.io/docs/usage/polyfill)
**IE 11**
### IE 11
You'll need babel-polyfill for BootstrapVue to work properly. In order to support this browser:
- `npm install babel-polyfill`
@@ -205,3 +205,5 @@ export default {
<!-- alert-auto-dismiss-1.vue -->
```
## Component Reference
@@ -12,18 +12,20 @@
<!-- badges.vue -->
```
### Contextual variations
## Contextual variations
Add any of the following variants via the `variant` prop to change the
appearance of a `<b-badge>`: `default`, `primary`, `success`, `warning`, `info`,
and `danger`. If no variant is specified `default` will be used.
#### Conveying meaning to assistive technologies:
### Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not
be conveyed to users of assistive technologies – such as screen readers. Ensure
that information denoted by the color is either obvious from the content itself
(e.g. the visible text), or is included through alternative means, such as
additional text hidden with the `.sr-only` class.
### Pill badges
## Pill badges
Use the `pill` prop to make badges more rounded (with a larger border-radius
and additional horizontal padding). Useful if you miss the badges from Bootstrap v3.
## Component Reference
@@ -28,6 +28,7 @@ export default {
<!-- breadcrumb.vue -->
```
## Breadcrumb items
Items are rendered using `:items` prop.
It can be an array of objects to provide link and active state.
Links can be `href`'s for anchor tags, or `to`'s for router-links.
@@ -47,3 +48,5 @@ items = [
}
]
```
## Component Reference
@@ -26,7 +26,7 @@
<!-- button-group-1.vue -->
```
### Sizing
## Sizing
Set the size prop to `lg` or `sm` to render larger or smaller, respectively, buttons.
There is no need to specify the size on the individual buttons.
@@ -55,7 +55,7 @@ There is no need to specify the size on the individual buttons.
<!-- button-group-2.vue -->
```
### Vertical variation
## Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally by setting
the `vertical` prop. Split button dropdowns are not supported here.
@@ -72,7 +72,7 @@ the `vertical` prop. Split button dropdowns are not supported here.
<!-- button-group-3.vue -->
```
### Dropdown menu support
## Dropdown menu support
Add [`<b-dropdown>`](./dropdown) menus directly inside your `<b-button-group>`. Note
that split dropdown menus are not supported when prop `vertical` is set.
@@ -101,13 +101,12 @@ that split dropdown menus are not supported when prop `vertical` is set.
<!-- button-group-4.vue -->
```
### Alias
## Alias
`<b-button-group>` can also be used by its shorter alias `<b-btn-group>`.
### See also
## See also
Also check out the [`<b-button-toolabr>`](./button-toolbar) component for generating
toolbars containing button groups and input groups.
### Tooltips and popovers
Due to the specific implementation (and some other components), tooltips and popovers
on elements within a button-group will have adverse effect on styling.
## Component Reference
@@ -76,20 +76,20 @@
<!-- button-toolbar-3.vue -->
```
### Usage
## Usage
Feel free to mix input groups and dropdowns with button groups in your toolbars.
Similar to the example above, you’ll likely need some utility classes
though to space things properly.
### Sizing
## Sizing
Note, if you want smaller or larger buttons or controls, set the `size`
prop directly on the `<b-button-group>`, `<b-input-group>`, and `<b-dropdown>` components.
### Justify
## Justify
Make the toolbar span the maximum available width, by increasing spacing between the
button groups, input groups and dropdowns, by setting the prop `justify`.
### Keyboard Navigation
## Keyboard Navigation
Enable optional keyboard navigation by setting the prop `key-nav`.
| Keypress | Action
@@ -104,9 +104,11 @@ Enable optional keyboard navigation by setting the prop `key-nav`.
**Caution:** If you have text or text-like inputs in your toolbar, leave keyboard navigation off,
as it is not possble to use key presses to jump out of a text (or test-like) inputs.
### Alias
## Alias
`<b-button-toolbar>` can also be used via the shorthand alias `<b-btn-toolbar>`
### See Also
## See Also
- [`<b-button-group>`](./button-group)
- [`<b-dropdown>`](./dropdown)
## Component Reference
Oops, something went wrong.

0 comments on commit b9d15f8

Please sign in to comment.