bootstrap-vue · tmorehouse · Mar 26, 2020 · Mar 22, 2020 · Mar 23, 2020 · Mar 24, 2020
diff --git a/.github/ISSUE_TEMPLATE/DOCS_ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE/DOCS_ISSUE_TEMPLATE.md
@@ -0,0 +1,26 @@
+---
+name: 📖 Documentation issue
+about: Help improve our docs.
+---
+
+### Documentation issue
+
+<!-- (Update "[ ]" to "[x]" to check a box) -->
+
+- [ ] Reporting a typo
+- [ ] Reporting a documentation bug
+- [ ] Documentation improvement
+- [ ] Documentation feedback
+
+<!--
+  If your issue is not regarding the documentation, please choose an issue type:
+  https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose
+-->
+
+### Is there a specific documentation page you are reporting?
+
+Enter the URL or documentation section here.
+
+### Additional context or description
+
+Provide any additional details here as needed.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,40 @@
 
 > All notable changes to this project will be documented in this file.
 
+<a name="2.9.0"></a>
+
+## [v2.9.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.8.0...v2.9.0)
+
+Released: 2020-03-25
+
+### Features v2.9.0
+
+- **b-aspect:** new custom component `<b-aspect>`
+  ([#5008](https://github.com/bootstrap-vue/bootstrap-vue/issues/5008))
+  ([662c8e0](https://github.com/bootstrap-vue/bootstrap-vue/commit/662c8e0709c8c73fb2119976d1906943cfe6daad))
+- **b-avatar:** add `alt` prop for adding alt attribute to image and icon avatars (closes
+  [#4990](https://github.com/bootstrap-vue/bootstrap-vue/issues/4990))
+  ([#4991](https://github.com/bootstrap-vue/bootstrap-vue/issues/4991))
+  ([d1474f2](https://github.com/bootstrap-vue/bootstrap-vue/commit/d1474f28729e4e13ad97b75a87d56f85543d4c96))
+- **b-drodpown-item-button, b-drodpown-item-button:** add `button-class` and `link-class` prop
+  ([#5014](https://github.com/bootstrap-vue/bootstrap-vue/issues/5014))
+  ([b39d31c](https://github.com/bootstrap-vue/bootstrap-vue/commit/b39d31cede76b594b5608fa472d53e3dac525e2b))
+- **b-form-datepicker, b-form-timepicker:** emit `shown` and `hidden` events
+  ([#5004](https://github.com/bootstrap-vue/bootstrap-vue/issues/5004))
+  ([eb259b9](https://github.com/bootstrap-vue/bootstrap-vue/commit/eb259b998dfd3e88a1b04ed8d3f4c97560f69dbb))
+- **b-navbar-toggle:** make default slot scoped
+  ([#4995](https://github.com/bootstrap-vue/bootstrap-vue/issues/4995))
+  ([144d45f](https://github.com/bootstrap-vue/bootstrap-vue/commit/144d45fb0e4d66bbf243b4a4df39d7f3b9b5c7cc))
+
+### Docs v2.9.0
+
+- Ensure that the `IconsPlugin` is imported when exporting from playground to CodePen, CodeSandbox,
+  and JsFiddle ([#5003](https://github.com/bootstrap-vue/bootstrap-vue/issues/5003))
+
+### Other v2.9.0
+
+- dev dependency updates
+
 <a name="2.8.0"></a>
 
 ## [v2.8.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.7.0...v2.8.0)

diff --git a/docs/components/feedback.js b/docs/components/feedback.js
@@ -12,8 +12,8 @@ export default {
       return slug || name === 'docs' || name === 'docs-icons'
     },
     reportIssueUrl() {
-      // Add appreciate query params for proper issue title
-      return `${this.baseUrl}/issues/new?title=Docs`
+      // Select issue template
+      return `${this.baseUrl}/issues/new?template=DOCS_ISSUE_TEMPLATE.md`
     },
     editPageUrl() {
       const name = this.$route.name

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -208,7 +208,7 @@
 
           <b-card tag="article" body-text-variant="muted" class="rounded-0 border-0">
             <b-card-text text-tag="h3" class="h5 text-center bd-text-purple-bright mb-2">
-              <b-icon icon="columns-gap" width="2.5em" height="2.5em" class="mx-auto d-block mb-3"></b-icon>
+              <b-icon icon="puzzle" width="2.5em" height="2.5em" class="mx-auto d-block mb-3"></b-icon>
               <span>Modular</span>
             </b-card-text>
             <b-card-text class="text-center">

diff --git a/docs/pages/play.vue b/docs/pages/play.vue
@@ -436,7 +436,8 @@ export default {
         externalJs: [
           '//unpkg.com/babel-polyfill/dist/polyfill.min.js',
           `//unpkg.com/vue@${vueVersion}/dist/vue.min.js`,
-          `//unpkg.com/bootstrap-vue@${bootstrapVueVersion}/dist/bootstrap-vue.js`
+          `//unpkg.com/bootstrap-vue@${bootstrapVueVersion}/dist/bootstrap-vue.js`,
+          `//unpkg.com/bootstrap-vue@${bootstrapVueVersion}/dist/bootstrap-vue-icons.js`
         ]
       }
     },
@@ -479,13 +480,14 @@ export default {
       const htmlContent = '<div id="app"></div>'
       const jsContent = [
         "import Vue from 'vue'",
-        "import BootstrapVue from 'bootstrap-vue'",
+        "import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'",
         "import App from './App'",
         '',
         "import 'bootstrap/dist/css/bootstrap.css'",
         "import 'bootstrap-vue/dist/bootstrap-vue.css'",
         '',
         'Vue.use(BootstrapVue)',
+        'Vue.use(BootstrapVueIcons)',
         '',
         "new Vue({ el: '#app', render: h => h(App) })"
       ].join('\r\n')

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "BootstrapVue, with more than 85 custom components, over 45 plugins, several 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",
@@ -101,14 +101,14 @@
     "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@babel/standalone": "^7.9.3",
+    "@babel/standalone": "^7.9.4",
     "@nuxtjs/google-analytics": "^2.2.3",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "@vue/test-utils": "1.0.0-beta.29",
-    "autoprefixer": "^9.7.4",
+    "autoprefixer": "^9.7.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.1.0",
+    "babel-jest": "^25.2.0",
     "babel-plugin-istanbul": "^6.0.0",
     "bootstrap-icons": "^1.0.0-alpha3",
     "clean-css-cli": "^4.3.0",
@@ -134,18 +134,18 @@
     "highlight.js": "^9.18.1",
     "html-loader": "^1.0.0",
     "husky": "^4.2.3",
-    "jest": "^25.1.0",
+    "jest": "^25.2.0",
     "jest-environment-jsdom-fourteen": "^1.0.1",
-    "lint-staged": "^10.0.8",
+    "lint-staged": "^10.0.9",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.15",
     "marked": "^0.8.2",
     "node-sass": "^4.13.1",
-    "nuxt": "^2.12.0",
+    "nuxt": "^2.12.1",
     "postcss-cli": "^7.1.0",
     "prettier": "1.14.3",
     "require-context": "^1.1.0",
-    "rollup": "^2.1.0",
+    "rollup": "^2.2.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
@@ -0,0 +1,67 @@
+# Aspect
+
+> The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content.
+> When the content is longer than the available height, then the component will expand vertically to
+> fit all content. If the content is shorter than the computed aspect height, the component will
+> ensure a minimum height is maintained.
+
+## Overview
+
+The `<b-aspect>` component was introduced in BootstrapVue `v2.9.0`.
+
+The default [aspect](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>) ratio is `1:1` (ratio of
+`1`), which makes the height always be at least the same as the width. The `aspect` prop can be used
+to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or
+`'4:3'`.
+
+The width will always be 100% of the available width in the parent element/component.
+
+```html
+<template>
+  <div>
+    <b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3">
+      <b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-input>
+    </b-form-group>
+    <b-card>
+      <b-aspect :aspect="aspect">
+        This will always be an aspect of "{{ aspect }}",
+        except when the content is too tall.
+      </b-aspect>
+    </b-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        aspect: '16:9',
+        aspects: [
+          { text: '4:3 (SD)', value: '4:3' },
+          { text: '1:1 (Square)', value: '1:1' },
+          { text: '16:9 (HD)', value: '16:9' },
+          { text: '1.85:1 (Widescreen)', value: '1.85:1' },
+          { text: '2:1 (Univisium/Superscope)', value: '2:1' },
+          { text: '21:9 (Anamorphic)', value: '21:9' },
+          { text: '1.43:1 (IMAX)', value: '1.43:1' },
+          { text: '3:2 (35mm Film)', value: '3:2' },
+          { text: '3:1 (APS-P)', value: '3:1' },
+          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
+          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
+          { text: '3 (Same as 3:1)', value: 3 },
+          { text: '2 (Same as 2:1)', value: 2 },
+          { text: '1.85 (Same as 1.85:1)', value: 1.85 },
+          { text: '1.5', value: 1.5 },
+          { text: '1 (Same as 1:1)', value: 1 }
+        ]
+      }
+    }
+  }
+</script>
+
+<!-- b-aspect.vue -->
+```
+
+## See also
+
+- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc)
diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
@@ -0,0 +1,56 @@
+import Vue from '../../utils/vue'
+import { toFloat } from '../../utils/number'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
+
+// --- Constants ---
+const NAME = 'BAspect'
+const CLASS_NAME = 'b-aspect'
+
+const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
+const RX_SEPARATOR = /[/:]/
+
+// --- Main Component ---
+export const BAspect = /*#__PURE__*/ Vue.extend({
+  name: NAME,
+  mixins: [normalizeSlotMixin],
+  props: {
+    aspect: {
+      // Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
+      // Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
+      type: [Number, String],
+      default: '1:1'
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  computed: {
+    padding() {
+      const aspect = this.aspect
+      let ratio = 1
+      if (RX_ASPECT.test(aspect)) {
+        const [width, height] = aspect.split(RX_SEPARATOR).map(v => toFloat(v) || 1)
+        ratio = width / height
+      } else {
+        ratio = toFloat(aspect) || 1
+      }
+      return `${100 / Math.abs(ratio)}%`
+    }
+  },
+  render(h) {
+    const $sizer = h('div', {
+      staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
+      style: { paddingBottom: this.padding, height: 0 }
+    })
+    const $content = h(
+      'div',
+      {
+        staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
+        style: { marginLeft: '-100%' }
+      },
+      [this.normalizeSlot('default')]
+    )
+    return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
+  }
+})