From 56b774de7ac274df494230fcf062be5b78aa512a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sat, 5 Oct 2019 20:24:06 -0300 Subject: [PATCH 01/17] chore(deps): update devdependency terser to ^4.3.8 (#4202) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9105e3210a4..62a272d37d6 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "rollup-plugin-node-resolve": "^5.2.0", "sass-loader": "^8.0.0", "standard-version": "^7.0.0", - "terser": "^4.3.7", + "terser": "^4.3.8", "vue": "^2.6.10", "vue-jest": "^3.0.5", "vue-router": "^3.1.3", diff --git a/yarn.lock b/yarn.lock index abd88c6c94d..7466f34ca87 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11657,10 +11657,10 @@ terser@^4.3.4: source-map "~0.6.1" source-map-support "~0.5.12" -terser@^4.3.7: - version "4.3.7" - resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.7.tgz#9dafb4a6730868608c9c7af96d44182f4107b29f" - integrity sha512-rJFxzWIzJdgiOwYIPJHu6L3hDegEYJj2cHuKcngMraUfhMXGDEbok9Tqjw7yxzrU4IagvG74uTEKdiqeG6T7bg== +terser@^4.3.8: + version "4.3.8" + resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.8.tgz#707f05f3f4c1c70c840e626addfdb1c158a17136" + integrity sha512-otmIRlRVmLChAWsnSFNO0Bfk6YySuBp6G9qrHiJwlLDd4mxe2ta4sjI7TzIR+W1nBMjilzrMcPOz9pSusgx3hQ== dependencies: commander "^2.20.0" source-map "~0.6.1" From 15668c21cd4c6daab6a5dd1e6de864fd03f4d132 Mon Sep 17 00:00:00 2001 From: TitanFighter Date: Mon, 7 Oct 2019 00:05:11 +0300 Subject: [PATCH 02/17] chore(docs): fix navbar package.json typo (#4206) --- src/components/navbar/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json index c256a97346f..dbb8b881b18 100644 --- a/src/components/navbar/package.json +++ b/src/components/navbar/package.json @@ -19,7 +19,7 @@ }, { "prop": "toggleable", - "description": "Ste to 'true' for an always collapsed navbar, or to a specific breakpoint at which point the navbar will be expanded: 'sn', 'ms', 'lg' or 'xl'" + "description": "Set to 'true' for an always collapsed navbar, or to a specific breakpoint at which point the navbar will be expanded: 'sm', 'md', 'lg' or 'xl'" }, { "prop": "fixed", From 7e4f16072739661f15c8f61cdd63aa34da017e7f Mon Sep 17 00:00:00 2001 From: Chettapong Pinsuwan Date: Mon, 7 Oct 2019 19:58:13 +0700 Subject: [PATCH 03/17] chore(docs): remove excess closing tags (#4209) --- src/components/card/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/card/README.md b/src/components/card/README.md index f0f692dc900..25c8e3e0f45 100644 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -248,7 +248,7 @@ card. img-top > From 64d556d452ed8feefdb56a7f40ceb9a08b5e617f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 13:27:56 -0300 Subject: [PATCH 04/17] fix(carousel): disable the next/prev controls when the carousel is sliding (closes #4210) (#4212) --- src/components/carousel/carousel.js | 46 ++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js index 30ca32580e3..a8d8d199596 100644 --- a/src/components/carousel/carousel.js +++ b/src/components/carousel/carousel.js @@ -498,19 +498,36 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({ // Prev and next controls let controls = h() if (this.controls) { + const prevHandler = evt => { + /* istanbul ignore next */ + if (!this.isSliding) { + this.handleClick(evt, this.prev) + } else { + evt.preventDefault() + } + } + const nextHandler = evt => { + /* istanbul ignore next */ + if (!this.isSliding) { + this.handleClick(evt, this.next) + } else { + evt.preventDefault() + } + } controls = [ h( 'a', { class: ['carousel-control-prev'], - attrs: { href: '#', role: 'button', 'aria-controls': this.safeId('__BV_inner_') }, + attrs: { + href: '#', + role: 'button', + 'aria-controls': this.safeId('__BV_inner_'), + 'aria-disabled': this.isSliding ? 'true' : null + }, on: { - click: evt => { - this.handleClick(evt, this.prev) - }, - keydown: evt => { - this.handleClick(evt, this.prev) - } + click: prevHandler, + keydown: prevHandler } }, [ @@ -522,14 +539,15 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({ 'a', { class: ['carousel-control-next'], - attrs: { href: '#', role: 'button', 'aria-controls': this.safeId('__BV_inner_') }, + attrs: { + href: '#', + role: 'button', + 'aria-controls': this.safeId('__BV_inner_'), + 'aria-disabled': this.isSliding ? 'true' : null + }, on: { - click: evt => { - this.handleClick(evt, this.next) - }, - keydown: evt => { - this.handleClick(evt, this.next) - } + click: nextHandler, + keydown: nextHandler } }, [ From 2ec602f6f3d4471d6f76845d3c35896f73c7a925 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 8 Oct 2019 17:24:34 -0300 Subject: [PATCH 05/17] chore(docs): minor updates to the theming reference section (#4224) --- docs/markdown/reference/theming/README.md | 40 ++++++++++++++++------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/docs/markdown/reference/theming/README.md b/docs/markdown/reference/theming/README.md index 05c038bd45b..587f7c43da9 100644 --- a/docs/markdown/reference/theming/README.md +++ b/docs/markdown/reference/theming/README.md @@ -11,11 +11,11 @@ colors, etc) adjust the custom BootstrapVue css generation. ## SASS variable defaults -Every Sass variable in Bootstrap v4 includes the `!default` flag allowing you to override the -variable’s default value in your own Sass without modifying Bootstrap and BootstrapVue's source SCSS -code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a -variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap -and BootstrapVue. +Every Sass variable in Bootstrap v4 and BootstrapVue includes the `!default` flag allowing you to +override the variable’s default value in your own Sass without modifying Bootstrap and +BootstrapVue's source SCSS code. Copy and paste variables as needed, modify their values, and remove +the `!default` flag. If a variable has already been assigned, then it won’t be re-assigned by the +default values in Bootstrap and BootstrapVue. You will find the complete list of Bootstrap’s variables in `bootstrap/scss/_variables.scss`. Some variables are set to `null`, these variables don’t output the property unless they are overridden in @@ -82,6 +82,8 @@ docs for more details. All theme colors automatically become available as Customize Bootstrap 4 with the built-in custom variables file and easily toggle global CSS preferences with Bootstrap's `$enable-*` Sass variables. +### Bootstrap SASS variables + Some commonly used Bootstrap v4 variables are: | Variable | Type | Default | Description | @@ -96,6 +98,8 @@ Some commonly used Bootstrap v4 variables are: Refer to [Bootstrap's theming](https://getbootstrap.com/docs/4.3/getting-started/theming/) docs for additional Bootstrap v4 variable information. +### BootstrapVue SASS variables + BootstrapVue also defines several Sass variables for controlling BootstrapVue's custom CSS generation. If you are not using these features in your project, you can disable the feature's CSS generation to reduce the size of BootstrapVue's custom CSS bundle: @@ -114,14 +118,16 @@ Note that BootstrapVue's custom SCSS relies on Bootstrap's SASS variables, funct ## Generating custom themes To use your own theme and colors in BootstrapVue, you will need to create a `custom.scss` file in -your project, which you can include in your main app: +your project, which you can include in your main app `app.vue` file: **Via template:** ```html ``` -The `custom.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS, +The `custom-vars.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS, will include your Bootstrap v4 variable overrides (i.e. colors, shadows, font sizes, breakpoints, etc). **Via app main entry point:** -Create an SCSS file with your custom theme variables: +Create an SCSS file with your custom theme variables which also impoerts Bootstrap and BootstrapVue's +SCSS: ```scss // File: custom.scss @@ -165,10 +176,14 @@ $bv-enable-table-stacked: false; body { margin: 0; } + +.my-widget { + color: var(--danger); +} // ... ``` -Then import that single SCSS file into your app code entry point: +Then import that single SCSS file into your main app code entry point: ```js // app.js @@ -199,7 +214,8 @@ general prototyping. ### Available Bootstrap CSS variables -Here are the variables that are generated. The values shown are based on the Bootstrap v4 defaults: +Here are the CSS variables that are generated. The values shown are based on the Bootstrap v4 +_defaults_: ```scss :root { From fe7dc04c42f4c25cf8f119aeb0566828bc56a0da Mon Sep 17 00:00:00 2001 From: madflow Date: Tue, 8 Oct 2019 22:37:33 +0200 Subject: [PATCH 06/17] chore(core): docs show advanced scss import (#4207) --- docs/markdown/intro/README.md | 41 ++++++++++++++++++++++++++++------- package.json | 1 + 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index ce0f90972ad..df4ba17bad7 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -104,10 +104,10 @@ browsers and devices while providing slightly more opinionated resets to common ## 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 -project. To get started, use `yarn` or `npm` to get the latest version of Vue.js, BootstrapVue and -Bootstrap v4: +If you are using module bundlers like [Webpack](https://webpack.js.org/), +[Parcel](https://parceljs.org/) or [rollup.js](https://rollupjs.org/), 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 v4: ```bash # With npm @@ -117,7 +117,7 @@ npm install vue bootstrap-vue bootstrap yarn add vue bootstrap-vue bootstrap ``` -Then, register BootstrapVue plugin in your app entry point: +Then, register BootstrapVue in your app entry point: ```js // app.js @@ -143,9 +143,11 @@ Or import Bootstrap and BootstrapVue `scss` files via a single custom SCSS file: @import 'node_modules/bootstrap-vue/src/index.scss'; ``` +Finally import the `custom.scss` file in your app entry point: + ```js // app.js -import 'custom.scss' +import './custom.scss' ``` Be sure to `@import` or define your custom variable values _before_ including Bootstrap SCSS @@ -156,8 +158,31 @@ Place all of the SCSS `@import`s into a **single SCSS file**, and import that si project. Importing individual SCSS files into your project will **not** share variable values and functions between files by default. -**Note**: Requires webpack configuration to load CSS/SCSS files -([official guide](https://webpack.js.org/guides/asset-management/#loading-css)). +Webpack and Parcel support prepending the `scss` modules with tilde paths (`~`) when importing from +a `scss` file: + +```scss +// Webpack example +@import '~bootstrap'; +@import '~bootstrap-vue'; +``` + +```scss +// Parcel example +@import '~bootstrap/scss/bootstrap'; +@import '~bootstrap-vue/src/index.scss'; +``` + +For more details how to configure asset loading and how modules are resolved, please consult the +module bundlers documentation. + +**Notes**: + +- Webpack configuration to load CSS files + ([official guide](https://webpack.js.org/guides/asset-management/#loading-css)). +- Webpack Loader for SASS/SCSS files ([official guide](https://webpack.js.org/loaders/sass-loader/)) +- Parcel CSS ([official guide](https://parceljs.org/css.html)) +- Parcel SCSS ([official guide](https://parceljs.org/scss.html)) For information on theming Bootstrap, check out the [Theming](/docs/reference/theming) reference section. diff --git a/package.json b/package.json index 62a272d37d6..e3308244063 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "module": "esm/index.js", "jsnext:main": "esm/index.js", "source": "src/index.js", + "sass": "src/index.scss", "style": "dist/bootstrap-vue.css", "license": "MIT", "types": "src/index.d.ts", From 494d742361ca61d718b0b0f66537a4381f49bde5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 8 Oct 2019 17:52:29 -0300 Subject: [PATCH 07/17] chore(docs): tweaks to page quick-links styling (#4219) --- docs/components/quick-links.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/quick-links.vue b/docs/components/quick-links.vue index 3db70c2f991..4970b33e3c2 100644 --- a/docs/components/quick-links.vue +++ b/docs/components/quick-links.vue @@ -36,7 +36,7 @@