diff --git a/.github/stale.yml b/.github/stale.yml
new file mode 100644
index 00000000000..ae5fe2d6fcd
--- /dev/null
+++ b/.github/stale.yml
@@ -0,0 +1,43 @@
+# Configuration for probot-stale - https://github.com/probot/stale
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 90
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+ - "Priority: Critical"
+ - "Priority: High"
+ - "Priority: Medium"
+ - "Priority: Low"
+ - "PR: Major"
+ - "PR: Minor"
+ - "PR: Patch"
+ - "Status: Coming Soon"
+ - "Status: In Progress"
+ - "Status: Intend To Implement"
+ - "Status: On Hold"
+ - "Status: On Roadmap"
+ - "Status: Review Needed"
+ - "Status: WIP"
+ - "Type: Bug"
+ - "Type: Nice 1st Contribution"
+ - "Type: RFC"
+ - "Type: Security"
+# Label to use when marking an issue as stale
+staleLabel: "Status: Stale"
+issues:
+ # Comment to post when marking an issue as stale
+ markComment: >
+ This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
+ Thank you for your contribution.
+ # Comment to post when closing a stale issue
+ closeComment: >
+ Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
+pulls:
+ # Comment to post when marking a pull request as stale
+ markComment: >
+ This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
+ Thank you for your contribution.
+ # Comment to post when closing a stale pull request
+ closeComment: >
+ Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1785cad9f7..99815575263 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,42 @@
> [standard-version](https://github.com/conventional-changelog/standard-version) for commit
> guidelines.
+
+
+## [v2.2.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.2.0...v2.2.1)
+
+Released: 2020-01-13
+
+### Bug Fixes v2.2.1
+
+- **icons:** make icon transform props work with IE11 (closes
+ [#4607](https://github.com/bootstrap-vue/bootstrap-vue/issues/4607))
+ ([#4608](https://github.com/bootstrap-vue/bootstrap-vue/issues/4608))
+ ([899779f](https://github.com/bootstrap-vue/bootstrap-vue/commit/899779f20015f719198a763136137eea01aa11ea))
+- **types:** add missing declarations for `b-form-select-option` & `b-form-select-option-group`
+ ([#4595](https://github.com/bootstrap-vue/bootstrap-vue/issues/4595))
+ ([8d60832](https://github.com/bootstrap-vue/bootstrap-vue/commit/8d60832d38e74231a4bda15aa045b84aae97d2ed))
+- **types:** include named export BootstrapVue in declaration file
+ ([#4590](https://github.com/bootstrap-vue/bootstrap-vue/issues/4590))
+ ([603307a](https://github.com/bootstrap-vue/bootstrap-vue/commit/603307aeccf6141b94eff2186baee4ec43439033))
+- **modal, tooltips, popovers**: remove `nextTick` delay when updating content in transporter portal
+ (closes [#4589](https://github.com/bootstrap-vue/bootstrap-vue/issues/4589))
+ ([#4604](https://github.com/bootstrap-vue/bootstrap-vue/issues/4604))
+ ([0e3e7e0](https://github.com/bootstrap-vue/bootstrap-vue/commit/0e3e7e03370685367ac69949e596c9fff5c68163))
+- **utils:** correct `identity` spelling error
+ ([#4579](https://github.com/bootstrap-vue/bootstrap-vue/issues/4579))
+ ([7fed191](https://github.com/bootstrap-vue/bootstrap-vue/commit/7fed1911d6d9f7eae81526010483c71e1679e770))
+
+### Docs v2.2.1
+
+- add live validation examples in validation reference section
+ ([#4584](https://github.com/bootstrap-vue/bootstrap-vue/issues/4584))
+ ([aca4a5c](https://github.com/bootstrap-vue/bootstrap-vue/commit/aca4a5c8f9a9ed0d7526de396ff072f0c1f4ebdf))
+
+### Other v2.2.1
+
+- dev dependencies updates
+
## [v2.2.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.1.0...v2.2.0)
diff --git a/README.md b/README.md
index 0c09a575efd..6f37e4fe336 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,8 @@
- BootstrapVue, with over 40 available plugins and more than 80 custom components, provides
- one of the most comprehensive implementations of the Bootstrap v4.3 component and grid
+ BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 300 icons,
+ provides one of the most comprehensive implementations of the Bootstrap v4.3 component and grid
system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup.
diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
index 94cf146ef0a..27c79fa6f01 100644
--- a/docs/markdown/intro/README.md
+++ b/docs/markdown/intro/README.md
@@ -36,6 +36,8 @@ some good starting points would be:
- [Vue Guide](https://vuejs.org/v2/guide/)
- [Vue API](https://vuejs.org/v2/api/)
- [Bootstrap v{{bootstrapVersionMinor}} documentation](https://getbootstrap.com/)
+- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped styles
+ in SFC (Single File Component) `.vue` files
## Documentation information
@@ -46,7 +48,8 @@ and more. You can find information on these classes in the
[Utility Classes](/docs/reference/utility-classes) reference section.
Many of the examples in this documentation are _live_ and can be edited in-place for an enhanced
-learning experience.
+learning experience (note some examples may not work in IE11 due to use of ES6 JavaScript code in
+the `` sections).
BootstrapVue also provides an [interactive playground](/play) where you can experiment with the
various components and export your results to JSFiddle, CodePen, and/or CodeSandbox.
diff --git a/docs/markdown/misc/third-party/README.md b/docs/markdown/misc/third-party/README.md
index 8a745eece9c..b3ef9e66109 100644
--- a/docs/markdown/misc/third-party/README.md
+++ b/docs/markdown/misc/third-party/README.md
@@ -33,6 +33,8 @@ fully WAI-ARIA compliant, nor accessible to keyboard-only and/or screen-reader u
### Icons
+Alternatives to BootstrapVue's [`b-icon-*`](/docs/icons) components:
+
- [Vue Font Awesome](https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs)
- [Vue Icon](https://github.com/qinshenxue/vue-icon)
- [Vue Ionicons](https://mazipan.github.io/vue-ionicons/)
@@ -51,5 +53,5 @@ fully WAI-ARIA compliant, nor accessible to keyboard-only and/or screen-reader u
## Site generation
-- [NuxtJS](https://nuxtjs.org) - Static + SPA+ PWA + SSR
+- [NuxtJS](https://nuxtjs.org) - Static + SPA + PWA + SSR
- [Gridsome](https://gridsome.org) - Static + SPA + PWA
diff --git a/docs/markdown/reference/accessibility/README.md b/docs/markdown/reference/accessibility/README.md
index 73273025cca..73c45342670 100644
--- a/docs/markdown/reference/accessibility/README.md
+++ b/docs/markdown/reference/accessibility/README.md
@@ -111,7 +111,7 @@ Steps you should do for testing:
## Additional resources
-- [Bootstrap v4 Accessibility Documentation](https://getbootstrap.com/docs/4.3/getting-started/accessibility/)
+- [Bootstrap v4 Accessibility Documentation](https://getbootstrap.com/docs/4.4/getting-started/accessibility/)
- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/)
- [The A11Y Project](https://a11yproject.com/)
- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
diff --git a/docs/markdown/reference/theming/README.md b/docs/markdown/reference/theming/README.md
index 452b15c598c..e5d85a8f2aa 100644
--- a/docs/markdown/reference/theming/README.md
+++ b/docs/markdown/reference/theming/README.md
@@ -41,7 +41,7 @@ $body-color: #111;
## Default theme colors
-The default them colors defined in the Bootstrap v4.3 SCSS are as follows:
+The default them colors defined in the Bootstrap v4.4 SCSS are as follows:
@@ -73,7 +73,7 @@ The default them colors defined in the Bootstrap v4.3 SCSS are as follows:
Various components will use variations (intensities) of these default theme colors.
You can alter the theme colors, and create additional theme colors, as needed via SASS variables and
-maps. Refer to the [Bootstrap theming](https://getbootstrap.com/docs/4.3/getting-started/theming/)
+maps. Refer to the [Bootstrap theming](https://getbootstrap.com/docs/4.4/getting-started/theming/)
docs for more details. All theme colors automatically become available as
[color variants](/docs/reference/color-variants) to all BootstrapVue components.
@@ -92,10 +92,10 @@ Some commonly used Bootstrap v4 variables are:
| `$enable-shadows` | Boolean | `false` | Enables predefined `box-shadow` styles on various components |
| `$enable-gradients` | Boolean | `false` | Enables predefined gradients via `background-image` styles on various components |
| `$enable-transitions` | Boolean | `true` | Enables predefined `transition`s on various components |
-| `$enable-responsive-font-sizes` | Boolean | `false` | Enables [responsive font sizes](https://getbootstrap.com/docs/4.3/content/typography/#responsive-font-sizes) |
+| `$enable-responsive-font-sizes` | Boolean | `false` | Enables [responsive font sizes](https://getbootstrap.com/docs/4.4/content/typography/#responsive-font-sizes) |
| `$enable-validation-icons` | Boolean | `true` | Enables `background-image` icons within textual inputs and some custom forms for validation states |
-Refer to [Bootstrap's theming](https://getbootstrap.com/docs/4.3/getting-started/theming/) docs for
+Refer to [Bootstrap's theming](https://getbootstrap.com/docs/4.4/getting-started/theming/) docs for
additional Bootstrap v4 variable information.
### BootstrapVue SASS variables
@@ -282,4 +282,4 @@ a {
[BootstrapVue settings](/docs/misc/settings) page on how to update BootstrapVue `` and
`` breakpoint specific props.
- For more details on theming Bootstrap's SCSS/CSS, refer to the
- [**Official Bootstrap v4 Theming Documentation**](https://getbootstrap.com/docs/4.3/getting-started/theming/).
+ [**Official Bootstrap v4 Theming Documentation**](https://getbootstrap.com/docs/4.4/getting-started/theming/).
diff --git a/docs/markdown/reference/utility-classes/README.md b/docs/markdown/reference/utility-classes/README.md
index fb36ffd6ec0..cf6fd9529d1 100644
--- a/docs/markdown/reference/utility-classes/README.md
+++ b/docs/markdown/reference/utility-classes/README.md
@@ -7,30 +7,30 @@
The following are convenience links to Bootstrap v4's documentation:
-- [Border utilities](https://getbootstrap.com/docs/4.3/utilities/borders/)
-- [Clearfix utilities](https://getbootstrap.com/docs/4.3/utilities/clearfix/)
-- [Close icon utilities](https://getbootstrap.com/docs/4.3/utilities/close-icon/)
-- [Color utilities](https://getbootstrap.com/docs/4.3/utilities/colors/)
-- [Display utilities](https://getbootstrap.com/docs/4.3/utilities/display/)
-- [Embed utilities](https://getbootstrap.com/docs/4.3/utilities/embed/)
-- [Flex utilities](https://getbootstrap.com/docs/4.3/utilities/flex/)
-- [Float utilities](https://getbootstrap.com/docs/4.3/utilities/float/)
-- [Image replacement utilities](https://getbootstrap.com/docs/4.3/utilities/image-replacement/)
-- [Overflow utilities](https://getbootstrap.com/docs/4.3/utilities/overflow/)
-- [Position utilities](https://getbootstrap.com/docs/4.3/utilities/position/)
-- [Screen reader utilities](https://getbootstrap.com/docs/4.3/utilities/screen-readers/)
-- [Shadow utilities](https://getbootstrap.com/docs/4.3/utilities/shadows/)
-- [Sizing utilities](https://getbootstrap.com/docs/4.3/utilities/sizing/)
-- [Spacing utilities](https://getbootstrap.com/docs/4.3/utilities/spacing/)
-- [Stretched link utilities](https://getbootstrap.com/docs/4.3/utilities/stretched-link/)
-- [Text utilities](https://getbootstrap.com/docs/4.3/utilities/text/)
-- [Vertical align utilities](https://getbootstrap.com/docs/4.3/utilities/vertical-align/)
-- [Visibility utilities](https://getbootstrap.com/docs/4.3/utilities/visibility/)
+- [Border utilities](https://getbootstrap.com/docs/4.4/utilities/borders/)
+- [Clearfix utilities](https://getbootstrap.com/docs/4.4/utilities/clearfix/)
+- [Close icon utilities](https://getbootstrap.com/docs/4.4/utilities/close-icon/)
+- [Color utilities](https://getbootstrap.com/docs/4.4/utilities/colors/)
+- [Display utilities](https://getbootstrap.com/docs/4.4/utilities/display/)
+- [Embed utilities](https://getbootstrap.com/docs/4.4/utilities/embed/)
+- [Flex utilities](https://getbootstrap.com/docs/4.4/utilities/flex/)
+- [Float utilities](https://getbootstrap.com/docs/4.4/utilities/float/)
+- [Image replacement utilities](https://getbootstrap.com/docs/4.4/utilities/image-replacement/)
+- [Overflow utilities](https://getbootstrap.com/docs/4.4/utilities/overflow/)
+- [Position utilities](https://getbootstrap.com/docs/4.4/utilities/position/)
+- [Screen reader utilities](https://getbootstrap.com/docs/4.4/utilities/screen-readers/)
+- [Shadow utilities](https://getbootstrap.com/docs/4.4/utilities/shadows/)
+- [Sizing utilities](https://getbootstrap.com/docs/4.4/utilities/sizing/)
+- [Spacing utilities](https://getbootstrap.com/docs/4.4/utilities/spacing/)
+- [Stretched link utilities](https://getbootstrap.com/docs/4.4/utilities/stretched-link/)
+- [Text utilities](https://getbootstrap.com/docs/4.4/utilities/text/)
+- [Vertical align utilities](https://getbootstrap.com/docs/4.4/utilities/vertical-align/)
+- [Visibility utilities](https://getbootstrap.com/docs/4.4/utilities/visibility/)
Bootstrap v4 also has defined typography styles and classes for various native HTML elements. You
can find out more at the following links:
-- [Reboot](https://getbootstrap.com/docs/4.3/content/reboot/)
-- [Typography](https://getbootstrap.com/docs/4.3/content/typography/)
-- [Code](https://getbootstrap.com/docs/4.3/content/code/)
-- [Figures](https://getbootstrap.com/docs/4.3/content/figures/)
+- [Reboot](https://getbootstrap.com/docs/4.4/content/reboot/)
+- [Typography](https://getbootstrap.com/docs/4.4/content/typography/)
+- [Code](https://getbootstrap.com/docs/4.4/content/code/)
+- [Figures](https://getbootstrap.com/docs/4.4/content/figures/)
diff --git a/docs/markdown/reference/validation/README.md b/docs/markdown/reference/validation/README.md
index 10bef42f42f..b46252cd720 100644
--- a/docs/markdown/reference/validation/README.md
+++ b/docs/markdown/reference/validation/README.md
@@ -18,87 +18,17 @@ This is a verbose example designed to show how BootstrapVue and Vuelidate intera
applications, you'd likely want to abstract some of the functionality, such as creating a standard
error message component.
-```html
-
-
-
-
-
-
-
- This is a required field and must be at least 3 characters.
-
-
-
-
-
-
-
- This is a required field.
-
-
-
- Submit
-
-
-
-
-
-```
+
-## VeeValidate
+## VeeValidate v2
-[VeeValidate](https://logaretm.github.io/vee-validate/) is a plugin for Vue.js that allows you to
+[VeeValidate](http://vee-validate.logaretm.com/v2/) is a plugin for Vue.js that allows you to
validate input fields and display errors. It has full support for
[Vue I18n](https://kazupon.github.io/vue-i18n/) and provides fairly good out of the box error
messages.
@@ -122,81 +52,29 @@ Vue.use(VeeValidate, {
})
```
-### VeeValidate example
-
-Same example as above, just modified for VeeValidate:
-
-```html
-
-
-
-
-
-
-
- This is a required field and must be at least 3 characters.
-
-
-
-
-
-
-
- This is a required field.
-
-
-
- Submit
-
-
-
-
-
-```
+### VeeValidate v2 example
+
+
+
+## VeeValidate v3
+
+[VeeValidate](http://vee-validate.logaretm.com/) is a plugin for Vue.js that allows you to validate
+input fields and display errors. It has full support for
+[Vue I18n](https://kazupon.github.io/vue-i18n/) and provides fairly good out of the box error
+messages.
+
+### VeeValidate v3 example
+
+
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 3520d945c18..38c5b29bd95 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -89,8 +89,8 @@
- Bootstrap v4 is the
- world's most popular framework for building responsive, mobile-first sites.
+ Bootstrap v4 is the world's most popular
+ framework for building responsive, mobile-first sites.
@@ -676,7 +676,10 @@ export default {
computed: {
version: () => version,
bootstrapVersionMinor: () => bootstrapVersion.replace(/\.\d+$/, ''),
- vueVersionMinor: () => vueVersion.replace(/\.\d+$/, '')
+ vueVersionMinor: () => vueVersion.replace(/\.\d+$/, ''),
+ bootstrapUrl() {
+ return `https://getbootstrap.com/docs/${this.bootstrapVersionMinor}`
+ }
},
mounted() {
this.$nextTick(() => {
diff --git a/package.json b/package.json
index 07440579b3a..18f4f73d4be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "bootstrap-vue",
- "version": "2.2.0",
+ "version": "2.2.1",
"description": "BootstrapVue, with over 40 plugins and more than 80 custom components, custom directives, and over 300 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.",
"main": "dist/bootstrap-vue.common.js",
"web": "dist/bootstrap-vue.js",
@@ -96,13 +96,13 @@
"vue-functional-data-merge": "^3.1.0"
},
"devDependencies": {
- "@babel/cli": "^7.7.7",
- "@babel/core": "^7.7.7",
- "@babel/plugin-transform-modules-commonjs": "^7.7.5",
- "@babel/plugin-transform-runtime": "^7.7.6",
- "@babel/preset-env": "^7.7.7",
- "@babel/standalone": "^7.7.7",
- "@nuxtjs/google-analytics": "^2.2.2",
+ "@babel/cli": "^7.8.3",
+ "@babel/core": "^7.8.3",
+ "@babel/plugin-transform-modules-commonjs": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.8.3",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/standalone": "^7.8.3",
+ "@nuxtjs/google-analytics": "^2.2.3",
"@nuxtjs/pwa": "^3.0.0-beta.19",
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "^9.7.3",
@@ -121,8 +121,8 @@
"eslint-config-prettier": "^6.9.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-vue": "^2.0.2",
- "eslint-plugin-import": "^2.19.1",
- "eslint-plugin-jest": "^23.3.0",
+ "eslint-plugin-import": "^2.20.0",
+ "eslint-plugin-jest": "^23.6.0",
"eslint-plugin-markdown": "^1.0.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.2",
@@ -133,7 +133,7 @@
"gh-pages": "^2.2.0",
"highlight.js": "^9.17.1",
"html-loader": "^0.5.5",
- "husky": "^4.0.1",
+ "husky": "^4.0.7",
"jest": "^24.9.0",
"jest-environment-jsdom-fourteen": "^1.0.1",
"lint-staged": "^9.5.0",
@@ -142,16 +142,16 @@
"marked": "^0.8.0",
"node-sass": "^4.13.0",
"nuxt": "^2.11.0",
- "postcss-cli": "^7.0.0",
+ "postcss-cli": "^7.1.0",
"prettier": "1.14.3",
"require-context": "^1.1.0",
"rollup": "^1.29.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
- "sass-loader": "^8.0.0",
+ "sass-loader": "^8.0.2",
"standard-version": "^7.0.1",
- "terser": "^4.6.2",
+ "terser": "^4.6.3",
"vue": "^2.6.11",
"vue-jest": "^3.0.5",
"vue-router": "^3.1.3",
diff --git a/src/components/form-select/index.d.ts b/src/components/form-select/index.d.ts
index 9ac3911fd52..56d4d9a82cb 100644
--- a/src/components/form-select/index.d.ts
+++ b/src/components/form-select/index.d.ts
@@ -9,3 +9,9 @@ export declare const FormSelectPlugin: BvPlugin
// Component: b-form-select
export declare class BFormSelect extends BvComponent {}
+
+// Component: b-form-select-option
+export declare class BFormSelectOption extends BvComponent {}
+
+// Component: b-form-select-option-group
+export declare class BFormSelectOptionGroup extends BvComponent {}
diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
index a941c6c2907..9b4ba743c2a 100644
--- a/src/components/form-tags/README.md
+++ b/src/components/form-tags/README.md
@@ -501,27 +501,27 @@ of tags:
-
-
- {{ tag }}
-
-
-
-
-
-
-
-
+
+
+ {{ tag }}
+
+
+
+
+
+
+
+
@@ -532,13 +532,13 @@ of tags:
export default {
data() {
return {
- allOptions: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
+ options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
value: []
}
},
computed: {
availableOptions() {
- return this.allOptions.filter(opt => this.value.indexOf(opt) === -1)
+ return this.options.filter(opt => this.value.indexOf(opt) === -1)
}
}
}
@@ -657,6 +657,111 @@ default slot's scope.
```
+The following is an example of using the `` component for choosing or searching from a
+pre-defined set of tags:
+
+```html
+
+
+
+
+
+
+
+ {{ tag }}
+
+
+
+
+
+ Choose tags
+
+ {}">
+
+
+
+
+
+
+ {{ option }}
+
+
+ There are no tags available to select
+
+
+
+
+
+
+
+
+
+
+
+```
+
### Creating wrapper components
You can easily create a custom wrapper component with your preferred rendering style as follows:
diff --git a/src/components/form/README.md b/src/components/form/README.md
index 0d00c9ea1ef..72778152fb7 100644
--- a/src/components/form/README.md
+++ b/src/components/form/README.md
@@ -344,16 +344,18 @@ of three contextual states:
- `null` Displays no validation state (neither valid nor invalid)
Refer to the
-[Bootstrap v4 Form Validation Documentation](https://getbootstrap.com/docs/4.3/components/forms/#validation)
+[Bootstrap v4 Form Validation Documentation](https://getbootstrap.com/docs/4.4/components/forms/#validation)
for details on the new Bootstrap v4 validation states.
### Validation mechanisms
-Documentation and examples (hopefully) coming soon.
+Using 3rd party Vue-based validation libraries with BootstrapVue:
-Please see the following references:
+- BootstrapVue [Form validation reference section](/docs/reference/validation)
-- [Bootstrap v4: Form Validation Documentation](https://getbootstrap.com/docs/4.3/components/forms/#validation)
+Additional resources:
+
+- [Bootstrap v4: Form Validation Documentation](https://getbootstrap.com/docs/4.4/components/forms/#validation)
- [MDN: Learn Form Validation - Using JavaScript API](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript)
- [MDN: HTML5 Constraint Validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)
- [MDN: Validity State API](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
diff --git a/src/components/layout/README.md b/src/components/layout/README.md
index 203e3d7f7ff..4ea68d8ab23 100644
--- a/src/components/layout/README.md
+++ b/src/components/layout/README.md
@@ -701,4 +701,40 @@ You can control the number of columns at each breakpoint level via the following
```
+## Utilities for layout
+
+For faster mobile-friendly and responsive development, Bootstrap includes dozens of
+[utility classes](/docs/reference/utility-classes) for showing, hiding, aligning, and spacing
+content.
+
+### Changing `display`
+
+Use Bootstrap's [display utilities](/docs/reference/utility-classes) for responsively toggling
+common values of the `display` property. Mix it with the grid system, content, or components to show
+or hide them across specific viewports.
+
+### Flexbox options
+
+Bootstrap 4 is built with flexbox, but not every element’s `display` has been changed to
+`display: flex` as this would add many unnecessary overrides and unexpectedly change key browser
+behaviors. Most of the components are built with flexbox enabled.
+
+Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive
+variants (e.g., `.d-sm-flex`). You’ll need this class or `display` value to allow the use of the
+extra [flexbox utilities](/docs/reference/utility-classes) for sizing, alignment, spacing, and more.
+
+### Margin and padding
+
+Use the `margin` and `padding` [spacing utilities](/docs/reference/utility-classes) to control how
+elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing
+utilities, based on a `1rem` value default SASS `$spacer` variable. Choose values for all viewports
+(e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports
+(e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
+
+### Toggle `visibility`
+
+When toggling `display` isn’t needed, you can toggle the `visibility` of an element with the
+[visibility utility classes](/docs/reference/utility-classes). Invisible elements will still affect
+the layout of the page, but are visually hidden from visitors.
+
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
index d3177b63629..562dcf6efae 100644
--- a/src/components/modal/README.md
+++ b/src/components/modal/README.md
@@ -285,7 +285,7 @@ To prevent `` from closing (for example when validation fails). you can
methods: {
checkFormValidity() {
const valid = this.$refs.form.checkValidity()
- this.nameState = valid ? 'valid' : 'invalid'
+ this.nameState = valid
return valid
},
resetModal() {
@@ -307,7 +307,7 @@ To prevent `` from closing (for example when validation fails). you can
this.submittedNames.push(this.name)
// Hide the modal manually
this.$nextTick(() => {
- this.$refs.modal.hide()
+ this.$bvModal.hide('modal-prevent-closing')
})
}
}
diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
index 8ca00a3dfb6..723a11c6037 100644
--- a/src/components/modal/modal.spec.js
+++ b/src/components/modal/modal.spec.js
@@ -86,6 +86,7 @@ describe('modal', () => {
})
expect(wrapper.isVueInstance()).toBe(true)
+
await waitNT(wrapper.vm)
expect(wrapper.isEmpty()).toBe(true)
@@ -103,6 +104,7 @@ describe('modal', () => {
})
expect(wrapper.isVueInstance()).toBe(true)
+
await waitNT(wrapper.vm)
expect(wrapper.isEmpty()).toBe(true)
@@ -127,9 +129,6 @@ describe('modal', () => {
})
expect(wrapper.isVueInstance()).toBe(true)
- await waitNT(wrapper.vm)
- await waitRAF()
- await waitNT(wrapper.vm)
await waitRAF()
// Main outer wrapper (has z-index, etc)... The stacker
@@ -186,11 +185,6 @@ describe('modal', () => {
})
expect(wrapper.isVueInstance()).toBe(true)
- await waitNT(wrapper.vm)
- await waitRAF()
- await waitNT(wrapper.vm)
- await waitRAF()
- await waitNT(wrapper.vm)
await waitRAF()
expect(wrapper.isEmpty()).toBe(true)
@@ -208,10 +202,6 @@ describe('modal', () => {
// Destroy modal
wrapper.destroy()
- await waitNT(wrapper.vm)
- await waitRAF()
- await waitNT(wrapper.vm)
- await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()
@@ -235,10 +225,7 @@ describe('modal', () => {
})
expect(wrapper.isVueInstance()).toBe(true)
- await waitNT(wrapper.vm)
- await waitRAF()
- await waitNT(wrapper.vm)
- await waitRAF()
+
await waitNT(wrapper.vm)
await waitRAF()
@@ -268,8 +255,6 @@ describe('modal', () => {
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()
- await waitNT(wrapper.vm)
- await waitRAF()
expect($modal.attributes('aria-hidden')).toBeDefined()
expect($modal.attributes('aria-hidden')).toEqual('true')
@@ -293,7 +278,6 @@ describe('modal', () => {
})
expect(wrapper.isVueInstance()).toBe(true)
- await waitNT(wrapper.vm)
// Modal title
const $title = wrapper.find('.modal-title')
@@ -441,6 +425,7 @@ describe('modal', () => {
// Try and close modal (but we prevent it)
$close.trigger('click')
+ await waitNT(wrapper.vm)
expect(trigger).toEqual('headerclose')
expect(evt).toBeInstanceOf(BvModalEvent)
@@ -457,6 +442,7 @@ describe('modal', () => {
trigger = null
evt = null
$close.trigger('click')
+ await waitNT(wrapper.vm)
expect(trigger).toEqual('headerclose')
expect(evt).toBeInstanceOf(BvModalEvent)
@@ -522,6 +508,7 @@ describe('modal', () => {
// Try and close modal (but we prevent it)
$ok.trigger('click')
+ await waitNT(wrapper.vm)
expect(trigger).toEqual('ok')
await waitNT(wrapper.vm)
@@ -536,6 +523,7 @@ describe('modal', () => {
cancelHide = false
trigger = null
$cancel.trigger('click')
+ await waitNT(wrapper.vm)
expect(trigger).toEqual('cancel')
await waitNT(wrapper.vm)
@@ -593,6 +581,7 @@ describe('modal', () => {
// Try and close modal via ESC
$modal.trigger('keydown.esc')
+ await waitNT(wrapper.vm)
expect(trigger).toEqual('esc')
await waitNT(wrapper.vm)
@@ -651,6 +640,7 @@ describe('modal', () => {
// Try and close modal via click out
$modal.trigger('click')
+ await waitNT(wrapper.vm)
expect(trigger).toEqual('backdrop')
await waitNT(wrapper.vm)
@@ -1211,14 +1201,12 @@ describe('modal', () => {
// Try and set focusin on external button
$button.trigger('focusin')
await waitNT(wrapper.vm)
- await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($button.element)
expect(document.activeElement).toBe($content.element)
// Try and set focusin on external button
$button.trigger('focus')
await waitNT(wrapper.vm)
- await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($button.element)
expect(document.activeElement).toBe($content.element)
@@ -1235,7 +1223,6 @@ describe('modal', () => {
$bottomTrap.trigger('focusin')
$bottomTrap.trigger('focus')
await waitNT(wrapper.vm)
- await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($bottomTrap.element)
expect(document.activeElement).not.toBe($content.element)
// The close (x) button (first tabable in modal) should be focused
@@ -1254,7 +1241,6 @@ describe('modal', () => {
$topTrap.trigger('focusin')
$topTrap.trigger('focus')
await waitNT(wrapper.vm)
- await waitNT(wrapper.vm)
expect(document.activeElement).not.toBe($topTrap.element)
expect(document.activeElement).not.toBe($bottomTrap.element)
expect(document.activeElement).not.toBe($content.element)
diff --git a/src/components/table/package.json b/src/components/table/package.json
index 74a48cd59b1..1a397e76c28 100644
--- a/src/components/table/package.json
+++ b/src/components/table/package.json
@@ -272,7 +272,7 @@
},
{
"prop": "emptyHtml",
- "description": "HTML string to show when the table has no items to show. Usw with caution"
+ "description": "HTML string to show when the table has no items to show. Use with caution"
},
{
"prop": "emptyFilteredText",
diff --git a/src/icons/README.md b/src/icons/README.md
index c6b1e0642af..e3759b2a23a 100644
--- a/src/icons/README.md
+++ b/src/icons/README.md
@@ -120,7 +120,7 @@ Vue.use(BootstrapVueIcons)
```
BootstrapVue icons SCSS/CSS does not depend on any Bootstrap SASS variables, mixins, functions or
-CSS classes (other than the Bootstrap `text-{variant}` variant utility classes, if using the
+CSS classes (other than the Bootstrap `text-{variant}` text color utility classes, if using the
`variant` prop). Please note that the icons CSS is _also_ included in the main BootstrapVue SCSS/CSS
files.
@@ -299,9 +299,9 @@ With the use of Bootstrap's border and background
## Transforms
-BootstrapVue icons provide several props for applying basic CSS transforms to the `