Here you can interactively play and test components with a fresh Vue.js instance. Please
- refer to the Docs section for more information about
+ refer to the Docs section for more information about
available components and usage.
diff --git a/docs/plugins/codemirror.js b/docs/plugins/codemirror.js
index a9b2770eba7..6e0aa29f4e6 100644
--- a/docs/plugins/codemirror.js
+++ b/docs/plugins/codemirror.js
@@ -1,4 +1,4 @@
import Vue from 'vue'
-import CodeMirror from '../components/codemirror.vue'
+import CodeMirror from '../components/codemirror'
Vue.component('codemirror', CodeMirror)
diff --git a/docs/static/click-confirm.png b/docs/static/click-confirm.png
deleted file mode 100644
index 3f7a122a1f8..00000000000
Binary files a/docs/static/click-confirm.png and /dev/null differ
diff --git a/docs/utils/index.js b/docs/utils/index.js
index 89e37299b5a..4163b93048a 100644
--- a/docs/utils/index.js
+++ b/docs/utils/index.js
@@ -1,5 +1,4 @@
import kebabCase from 'lodash/kebabCase'
-import startCase from 'lodash/startCase'
// Parse a fully qualified version from a string
export const parseVersion = version => {
@@ -69,115 +68,116 @@ export const relativeUrl = url => {
return pathname + (hash || '')
}
-// Process an HTML readme and create a page TOC array
-// IDs are the only attribute on auto generated heading tags, so we take
-// advantage of that when using our RegExpr matches
-// Note IDs may not have quotes when the README's are parsed in production mode !?!?
+// Process an HTML README and create a page TOC array
+// IDs are the only attribute on auto generated heading tags,
+// so we take advantage of that when using our RegExpr matches
+// Note: IDs may not have quotes when the README's are parsed in production mode !?!?
// Expected format: heading content
// Also grabs meta data if available to generate auto headings
export const makeTOC = (readme, meta = null) => {
if (!readme) {
return {}
}
- const toc = []
+
let top = ''
let title = ''
+ let toc = []
+ let parentIdx = 0
- // Grab the first H1 tag with ID from readme
+ // Get the first
tag with ID
const h1 = readme.match(/
]+)>(.+?)<\/h1>/) || []
if (h1) {
top = `#${stripQuotes(h1[1])}`
title = stripHTML(h1[2])
}
- // Grab all the H2 and H3 headings with ID's from readme
+ // Get all the
and
headings with ID's
const headings = readme.match(/ ]+>.+?<\/h\1>/g) || []
- let idx = 0
- // Process the h2 and h3 headings into a TOC structure
- headings.forEach(heading => {
- // Pass the link, label and heading level
- const h2h3 = heading.match(/^<(h[23]) id=([^> ]+)>(.+?)<\/\1>$/)
- if (h2h3) {
- const tag = h2h3[1]
- const href = `#${stripQuotes(h2h3[2])}`
- const label = stripHTML(h2h3[3])
+ // Process the
and
headings into a TOC structure
+ headings
+ // Create a match `[value, tag, id, content]`
+ .map(heading => heading.match(/^<(h[23]) id=([^> ]+)>(.+?)<\/\1>$/))
+ // Filter out un-matched values
+ .filter(v => Array.isArray(v))
+ // Create TOC structure
+ .forEach(([value, tag, id, content]) => {
+ const href = `#${stripQuotes(id)}`
+ const label = stripHTML(content)
if (tag === 'h2') {
toc.push({ href, label })
- idx = toc.length
+ parentIdx = toc.length - 1
} else if (tag === 'h3') {
- // We nest h3 tags as a sub array
- toc[idx] = toc[idx] || []
- toc[idx].push({ href, label })
+ let parent = toc[parentIdx]
+ if (parent) {
+ // We nest
tags as a sub array
+ parent.toc = parent.toc || []
+ parent.toc.push({ href, label })
+ }
}
- }
- })
+ })
// Process meta information for component pages
- // IDs for headings are defined in componentdoc.vue and importdoc.vue
- if (meta && (meta.component || (meta.components && meta.components.length))) {
- // Append component reference info to the TOC
- const comps = [].concat(meta, meta.components).filter(m => m)
- if (comps.length) {
- // Add the reference heading
- toc.push({
- label: 'Component reference',
- href: '#component-reference'
- })
- // Add component sub entries
- toc.push(
- comps.map(c => {
- const tag = kebabCase(c.component)
- return {
- label: tag,
- href: `#comp-ref-${tag}`
+ if (meta) {
+ const isDirective = !!meta.directive
+ const hasComponents = meta.components && meta.components.length > 0
+ const hasDirectives = meta.directives && meta.directives.length > 0
+ if (!isDirective && (hasComponents || hasDirectives)) {
+ let componentToc = []
+ if (hasComponents) {
+ componentToc.push(
+ // Add component sub-headings
+ ...meta.components.map(({ component }) => {
+ const tag = kebabCase(component)
+ return { label: `<${tag}>`, href: `#comp-ref-${tag}` }
+ }),
+ // Add component import sub-heading
+ {
+ label: 'Importing individual components',
+ href: '#importing-individual-components'
}
- })
- )
- // Add component import sub entry
- toc[toc.length - 1].push({
- label: 'Importing individual components',
- href: '#importing-individual-components'
- })
- // Add directive import sub entry
- if (meta.directives && meta.directives.length) {
- toc[toc.length - 1].push({
+ )
+ }
+ // Add directive import sub-heading
+ if (hasDirectives) {
+ componentToc.push({
label: 'Importing individual directives',
href: '#importing-individual-directives'
})
}
- // Add plugin import sub entry
- toc[toc.length - 1].push({
+ // Add plugin import sub-heading
+ componentToc.push({
label: 'Importing as a Vue.js plugin',
href: '#importing-as-a-plugin'
})
+ // Add component reference heading
+ toc.push({
+ label: 'Component reference',
+ href: '#component-reference',
+ toc: componentToc
+ })
+ } else if (isDirective) {
+ // Add directive reference heading
+ toc.push({
+ label: 'Directive reference',
+ href: '#directive-reference',
+ toc: [
+ // Directive import sub-heading
+ {
+ label: 'Importing individual directives',
+ href: '#importing-individual-directives'
+ },
+ // Plugin import sub-heading
+ {
+ label: 'Importing as a Vue.js plugin',
+ href: '#importing-as-a-plugin'
+ }
+ ]
+ })
}
}
- // Process meta information for directive pages.
- // Directive pages only reference a single directive
- // IDs for headings are defined in importdoc.vue
- if (meta && meta.directive && !meta.directives) {
- // Add the reference heading
- toc.push({
- label: `${startCase(meta.title)} Directive Reference`,
- href: '#directive-reference'
- })
- // Add directive import sub entry
- toc.push([
- {
- label: `Importing Individual ${startCase(meta.title)} Directive`,
- href: '#importing-individual-directives'
- }
- ])
- // Add plugin import sub entry
- toc[toc.length - 1].push({
- label: `Importing ${startCase(meta.title)} as a Vue Plugin`,
- href: '#importing-as-a-plugin'
- })
- }
-
- return { toc, title, top }
+ return { title, top, toc }
}
export const importAll = r => {
@@ -197,7 +197,7 @@ export const importAll = r => {
})
.forEach(m => {
if (m.components) {
- // Normalize meta.components to array of objects form
+ // Normalize `meta.components` to array of objects form
m.components = m.components.map(c => (typeof c === 'string' ? { component: c } : c))
}
obj[m.slug] = m
diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md
index 38da1604dcf..fccc6baa08c 100644
--- a/src/components/form-file/README.md
+++ b/src/components/form-file/README.md
@@ -189,7 +189,7 @@ be rendered when there are no file(s) selected.
## Non custom file input
You can have `` render a browser native file input by setting the `plain` prop. Note
-that many of the customer form-file features do not apply when `plain` is set.
+that many of the custom form-file features do not apply when `plain` is set.
## Contextual state feedback
diff --git a/src/components/toast/README.md b/src/components/toast/README.md
index 29c36c36d89..f15d8b36e60 100644
--- a/src/components/toast/README.md
+++ b/src/components/toast/README.md
@@ -66,7 +66,7 @@ purposes of toast transparency only.
BootstrapVue uses [PortalVue](https://portal-vue.linusb.org/) to transport toasts into the toasters.
-## On demand toasts
+## Toasts on demand
Generate a dynamic toast from anywhere in your app via the `this.$bvToast` Vue instance injection,
without the need to place a [``](#b-toast-component) component in your app.
@@ -111,8 +111,17 @@ exception of `static`, and `visible`) in camelCase name format.
```
+Once a toast which was generated using `this.$bvToast.toast()` has been hidden, it will
+automatically be destroyed and removed from the document.
+
## Options
+Toasts have various options that can control their style and behaviour. Options are available both
+as props on the `` component and as properties of the options object passed to
+`this.$bvToast.toast()`. When passing options to `this.$bvToast.toast()`, use the
+camelCase version of the component prop name, i.e. use `noAutoHide` instead of
+`no-auto-hide`.
+
### Transparency
Toasts have a semi-transparent background by default. To disabled the default transparency, just set
@@ -219,7 +228,7 @@ For more information, please the the [Accessibility](#accessibility) section bel
### Links
-Optionally convert the toast body to a link (``) or `` (or `` via the
+Optionally convert the toast body to a link (``) or `` (or ``) via the
`href` and `to` props respectively. When set, the entire toast body becomes a link.
### Slots
@@ -233,6 +242,8 @@ Both slots are optionally scoped with the following scope:
| ------------------ | ------------------------------------------------------------------------------- |
| `hide()` | Hides the toast when called. Useful if you are providing your own close button. |
+Slots are only available when using the `` component.
+
## `` component
When you have an custom component that would like to display just a single toast at a time, use the