Skip to content

Commit c31b4ff

Browse files
tmorehousetmorehouse
authored
feat(toast): add Bootstrap v4.3 Toasts (#3093)
1 parent 65242f6 commit c31b4ff

File tree

23 files changed

+1384
-20
lines changed

23 files changed

+1384
-20
lines changed

‎docs/assets/scss/styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
-webkit-font-smoothing: antialiased;
66
}
77

8+
main {
9+
min-height: 100vh;
10+
}
11+
812
.nuxt-progress {
913
position: fixed;
1014
top: 0;

‎docs/components/componentdoc.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</b-col>
99
<b-col sm="3" class="text-sm-right">
1010
<b-btn variant="outline-secondary" size="sm" :href="githubURL" target="_blank">
11-
view source
11+
View source
1212
</b-btn>
1313
</b-col>
1414
</b-row>

‎docs/content/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,9 @@ export const nav = [
4343
]
4444

4545
export const bootstrapVersion = parseVersion(dependencies.bootstrap)
46-
export const vueVersion = parseVersion(devDependencies.vue)
4746
export const nuxtVersion = parseVersion(devDependencies.nuxt)
47+
export const portalVueVersion = parseVersion(dependencies['portal-vue'])
48+
export const vueVersion = parseVersion(devDependencies.vue)
4849
export const defaultConfig = getDefaults()
4950
export const bvDescription = description
5051

‎docs/markdown/intro/README.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@
33
> Get started with BootstrapVue, based on the world's most popular framework - Bootstrap V4, for
44
> building responsive, mobile-first sites using Vue.js.
55
6-
- [Vue.js](https://vuejs.org) version <code>{{ vueVersion }}</code> (or greater) is recommended
7-
- BootstrapVue requires [Bootstrap](https://getbootstrap.com) version
8-
<code>{{ bootstrapVersion }}</code> SCSS/CSS
9-
- jQuery is **not** required
6+
- [Vue.js](https://vuejs.org/) `v2.5` is required, `v{{ vueVersion }}` is recommended
7+
- [Bootstrap](https://getbootstrap.com/) `v4.3` is required, `v{{ bootstrapVersion }}` is
8+
recommended
9+
- [PortalVue](https://portal-vue.linusb.org/) `v2.0` is required, `v{{ portalVueVersion }}` is
10+
recommended
11+
- [jQuery](https://jquery.com/) is **not** required
1012

1113
## Using module bundlers
1214

1315
If you are using module bundlers like [webpack](https://webpack.js.org/),
14-
[rollup.js](https://rollupjs.org), etc you may prefer to directly include the package into your
16+
[rollup.js](https://rollupjs.org/), etc you may prefer to directly include the package into your
1517
project. To get started, use `yarn` or `npm` to get the latest version of Vue.js, BootstrapVue and
1618
Bootstrap 4:
1719

@@ -70,7 +72,7 @@ section.
7072

7173
## Nuxt.js module
7274

73-
[Nuxt.js](https://nuxtjs.org) version <code>{{ nuxtVersion }}</code> (or greater) is recommended.
75+
[Nuxt.js](https://nuxtjs.org/) version <code>{{ nuxtVersion }}</code> (or greater) is recommended.
7476

7577
Install dependencies:
7678

@@ -402,9 +404,9 @@ bundler supports es modules, it will automatically prefer it over commonjs.
402404
| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` |
403405
| UMD | Browser | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` |
404406

405-
BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), and
406-
`vue-functional-data-merge` (for functional components). These two dependencies are included in the
407-
`commonjs2` and `UMD` bundles.
407+
BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), `PortalVue` (for
408+
toasts, etc), and `vue-functional-data-merge` (for functional components). These three dependencies
409+
are included in the `commonjs2` and `UMD` bundles.
408410

409411
## Migrating a project already using Bootstrap
410412

@@ -436,7 +438,7 @@ Following features and APIs are used by BootstrapVue:
436438
- `MutationObserver`
437439

438440
If you want to support older IE, Android and iOS devices, you may want to use
439-
[@babel/polyfill](https://babeljs.io/docs/usage/polyfill) and
441+
[@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill/) and
440442
[mutationobserver-shim](https://www.npmjs.com/package/mutationobserver-shim):
441443

442444
- `npm install @babel/polyfill mutationobserver-shim`

‎docs/pages/docs/index.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import Main from '~/components/main'
22
import Section from '~/components/section'
33
import docsMixin from '~/plugins/docs-mixin'
4-
import { bootstrapVersion, vueVersion, nuxtVersion, defaultConfig } from '~/content'
4+
import {
5+
bootstrapVersion,
6+
defaultConfig,
7+
nuxtVersion,
8+
portalVueVersion,
9+
vueVersion
10+
} from '~/content'
511
import readme from '~/markdown/intro/README.md'
612

713
export default {
@@ -16,11 +22,12 @@ export default {
1622
mixins: [docsMixin],
1723
data() {
1824
return {
19-
readme,
2025
bootstrapVersion,
21-
vueVersion,
26+
defaultConfig,
2227
nuxtVersion,
23-
defaultConfig
28+
portalVueVersion,
29+
readme,
30+
vueVersion
2431
}
2532
}
2633
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
"bootstrap": "^4.3.1",
7272
"core-js": ">=2.6.5 <3.0.0",
7373
"popper.js": "^1.15.0",
74+
"portal-vue": "^2.1.0",
7475
"vue-functional-data-merge": "^2.0.7"
7576
},
7677
"devDependencies": {

‎scripts/rollup.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const externals = ['vue', ...Object.keys(dependencies)]
1616
// are expected to be provided later
1717
// In some cases, wee want to include some of them in the build,
1818
// so we exclude the external here
19-
const externalExcludes = ['core-js', 'popper.js', 'vue-functional-data-merge']
19+
const externalExcludes = ['core-js', 'popper.js', 'portal-vue', 'vue-functional-data-merge']
2020

2121
// The base rollup configuration
2222
const baseConfig = {

‎src/_variables.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,14 @@ $bv-alert-transition: $transition-fade !default;
33

44
// --- Tables ---
55
$b-table-busy-opacity: 0.55 !default;
6+
7+
// --- Toasts ---
8+
$b-toaster-zindex: 1100 !default;
9+
$b-toaster-offset-top: 0.5rem !default;
10+
$b-toaster-offset-bottom: $b-toaster-offset-top !default;
11+
$b-toaster-offset-left: $b-toaster-offset-top !default;
12+
$b-toaster-offset-right: $b-toaster-offset-top !default;
13+
14+
$b-toast-bg-level: $alert-bg-level !default;
15+
$b-toast-border-level: $alert-border-level !default;
16+
$b-toast-color-level: $alert-color-level !default;

‎src/components/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import Progress from './progress'
3434
import Spinner from './spinner'
3535
import Table from './table'
3636
import Tabs from './tabs'
37+
import Toast from './toast'
3738
import Tooltip from './tooltip'
3839

3940
export {
@@ -73,5 +74,6 @@ export {
7374
Spinner,
7475
Table,
7576
Tabs,
77+
Toast,
7678
Tooltip
7779
}

‎src/components/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@
99
@import "pagination/index";
1010
@import "pagination-nav/index";
1111
@import "table/index";
12+
@import "toast/index";

0 commit comments

Comments
 (0)