feat(toast): add Bootstrap v4.3 Toasts (bootstrap-vue#3093)

Author: tmorehouse

docs/assets/scss/styles.scss

@@ -5,6 +5,10 @@
   -webkit-font-smoothing: antialiased;
 }
 
+main {
+  min-height: 100vh;
+}
+
 .nuxt-progress {
   position: fixed;
   top: 0;

docs/components/componentdoc.vue

@@ -8,7 +8,7 @@
       </b-col>
       <b-col sm="3" class="text-sm-right">
         <b-btn variant="outline-secondary" size="sm" :href="githubURL" target="_blank">
-          view source
+          View source
         </b-btn>
       </b-col>
     </b-row>

docs/content/index.js

@@ -43,8 +43,9 @@ export const nav = [
 ]
 
 export const bootstrapVersion = parseVersion(dependencies.bootstrap)
-export const vueVersion = parseVersion(devDependencies.vue)
 export const nuxtVersion = parseVersion(devDependencies.nuxt)
+export const portalVueVersion = parseVersion(dependencies['portal-vue'])
+export const vueVersion = parseVersion(devDependencies.vue)
 export const defaultConfig = getDefaults()
 export const bvDescription = description
 

docs/markdown/intro/README.md

@@ -3,15 +3,17 @@
 > Get started with BootstrapVue, based on the world's most popular framework - Bootstrap V4, for
 > building responsive, mobile-first sites using Vue.js.
 
-- [Vue.js](https://vuejs.org) version <code>{{ vueVersion }}</code> (or greater) is recommended
-- BootstrapVue requires [Bootstrap](https://getbootstrap.com) version
-  <code>{{ bootstrapVersion }}</code> SCSS/CSS
-- jQuery is **not** required
+- [Vue.js](https://vuejs.org/) `v2.5` is required, `v{{ vueVersion }}` is recommended
+- [Bootstrap](https://getbootstrap.com/) `v4.3` is required, `v{{ bootstrapVersion }}` is
+  recommended
+- [PortalVue](https://portal-vue.linusb.org/) `v2.0` is required, `v{{ portalVueVersion }}` is
+  recommended
+- [jQuery](https://jquery.com/) is **not** required
 
 ## Using module bundlers
 
 If you are using module bundlers like [webpack](https://webpack.js.org/),
-[rollup.js](https://rollupjs.org), etc you may prefer to directly include the package into your
+[rollup.js](https://rollupjs.org/), etc you may prefer to directly include the package into your
 project. To get started, use `yarn` or `npm` to get the latest version of Vue.js, BootstrapVue and
 Bootstrap 4:
 
@@ -70,7 +72,7 @@ section.
 
 ## Nuxt.js module
 
-[Nuxt.js](https://nuxtjs.org) version <code>{{ nuxtVersion }}</code> (or greater) is recommended.
+[Nuxt.js](https://nuxtjs.org/) version <code>{{ nuxtVersion }}</code> (or greater) is recommended.
 
 Install dependencies:
 
@@ -402,9 +404,9 @@ bundler supports es modules, it will automatically prefer it over commonjs.
 | commonjs2      | webpack 1 / ...       | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` |
 | UMD            | Browser               | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js`               |
 
-BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), and
-`vue-functional-data-merge` (for functional components). These two dependencies are included in the
-`commonjs2` and `UMD` bundles.
+BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), `PortalVue` (for
+toasts, etc), and `vue-functional-data-merge` (for functional components). These three dependencies
+are included in the `commonjs2` and `UMD` bundles.
 
 ## Migrating a project already using Bootstrap
 
@@ -436,7 +438,7 @@ Following features and APIs are used by BootstrapVue:
 - `MutationObserver`
 
 If you want to support older IE, Android and iOS devices, you may want to use
-[@babel/polyfill](https://babeljs.io/docs/usage/polyfill) and
+[@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill/) and
 [mutationobserver-shim](https://www.npmjs.com/package/mutationobserver-shim):
 
 - `npm install @babel/polyfill mutationobserver-shim`

docs/pages/docs/index.js

@@ -1,7 +1,13 @@
 import Main from '~/components/main'
 import Section from '~/components/section'
 import docsMixin from '~/plugins/docs-mixin'
-import { bootstrapVersion, vueVersion, nuxtVersion, defaultConfig } from '~/content'
+import {
+  bootstrapVersion,
+  defaultConfig,
+  nuxtVersion,
+  portalVueVersion,
+  vueVersion
+} from '~/content'
 import readme from '~/markdown/intro/README.md'
 
 export default {
@@ -16,11 +22,12 @@ export default {
   mixins: [docsMixin],
   data() {
     return {
-      readme,
       bootstrapVersion,
-      vueVersion,
+      defaultConfig,
       nuxtVersion,
-      defaultConfig
+      portalVueVersion,
+      readme,
+      vueVersion
     }
   }
 }

package.json

@@ -71,6 +71,7 @@
     "bootstrap": "^4.3.1",
     "core-js": ">=2.6.5 <3.0.0",
     "popper.js": "^1.15.0",
+    "portal-vue": "^2.1.0",
     "vue-functional-data-merge": "^2.0.7"
   },
   "devDependencies": {

scripts/rollup.config.js

@@ -16,7 +16,7 @@ const externals = ['vue', ...Object.keys(dependencies)]
 // are expected to be provided later
 // In some cases, wee want to include some of them in the build,
 // so we exclude the external here
-const externalExcludes = ['core-js', 'popper.js', 'vue-functional-data-merge']
+const externalExcludes = ['core-js', 'popper.js', 'portal-vue', 'vue-functional-data-merge']
 
 // The base rollup configuration
 const baseConfig = {

src/_variables.scss

@@ -3,3 +3,14 @@ $bv-alert-transition: $transition-fade !default;
 
 // --- Tables ---
 $b-table-busy-opacity: 0.55 !default;
+
+// --- Toasts ---
+$b-toaster-zindex: 1100 !default;
+$b-toaster-offset-top: 0.5rem !default;
+$b-toaster-offset-bottom: $b-toaster-offset-top !default;
+$b-toaster-offset-left: $b-toaster-offset-top !default;
+$b-toaster-offset-right: $b-toaster-offset-top !default;
+
+$b-toast-bg-level: $alert-bg-level !default;
+$b-toast-border-level: $alert-border-level !default;
+$b-toast-color-level: $alert-color-level !default;

src/components/index.js

@@ -34,6 +34,7 @@ import Progress from './progress'
 import Spinner from './spinner'
 import Table from './table'
 import Tabs from './tabs'
+import Toast from './toast'
 import Tooltip from './tooltip'
 
 export {
@@ -73,5 +74,6 @@ export {
   Spinner,
   Table,
   Tabs,
+  Toast,
   Tooltip
 }

src/components/index.scss

@@ -9,3 +9,4 @@
 @import "pagination/index";
 @import "pagination-nav/index";
 @import "table/index";
+@import "toast/index";