bootstrap-vue · jacobmllr95 · Apr 4, 2020 · Apr 15, 2020 · Apr 15, 2020 · Apr 15, 2020
diff --git a/docs/pages/play.vue b/docs/pages/play.vue
@@ -356,7 +356,7 @@ const STORAGE_KEYS = {
 // Maximum age of localStorage before we revert back to defaults
 const STORAGE_MAX_RETENTION = 7 * 24 * 60 * 60 * 1000 // 7 days
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 // Remove a node from its parent's children
 const removeNode = node => node && node.parentNode && node.parentNode.removeChild(node)

diff --git a/docs/plugins/play.js b/docs/plugins/play.js
@@ -10,13 +10,11 @@ const RX_NAME_DEFINITION = /<!-- .*\.vue -->/
 const RX_TEMPLATE = /<template>([\s\S]*)<\/template>/
 const RX_SCRIPT = /<script>([\s\S]*)<\/script>/
 
-const CLASS_NAMES = {
-  editable: 'editable',
-  live: 'live',
-  error: 'error'
-}
+const CLASS_NAMES_EDITABLE = 'editable'
+const CLASS_NAMES_LIVE = 'live'
+const CLASS_NAMES_ERROR = 'error'
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 // Default "transpiler" function
 let compiler = code => code
@@ -117,7 +115,7 @@ const processExamples = (el, binding, vnode) => {
     hljs.highlightBlock(pre)
 
     // Add editable class
-    pre.classList.add(CLASS_NAMES.editable)
+    pre.classList.add(CLASS_NAMES_EDITABLE)
 
     // Store "previous" content on pre element
     pre.$_v_play_content = pre.textContent.trim()
@@ -131,7 +129,7 @@ const processExamples = (el, binding, vnode) => {
     // Enable live edit on double click
     pre.ondblclick = async () => {
       // Add live class
-      pre.classList.add(CLASS_NAMES.live)
+      pre.classList.add(CLASS_NAMES_LIVE)
       // Make editable
       pre.contentEditable = true
 
@@ -158,9 +156,9 @@ const processExamples = (el, binding, vnode) => {
 
         // Toggle error class
         if (vm === null) {
-          pre.classList.add(CLASS_NAMES.error)
+          pre.classList.add(CLASS_NAMES_ERROR)
         } else {
-          pre.classList.remove(CLASS_NAMES.error)
+          pre.classList.remove(CLASS_NAMES_ERROR)
         }
       }, 500)
     }

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
@@ -1,13 +1,23 @@
+import { ARIA_LIVE_POLITE, ARIA_VALUE_TRUE } from '../../constants/aria'
+import { ATTR_ARIA_ATOMIC, ATTR_ARIA_LABEL, ATTR_ARIA_LIVE, ATTR_ROLE } from '../../constants/attrs'
+import { CLASS_NAME_ALERT } from '../../constants/class-names'
+import { NAME_ALERT } from '../../constants/components'
+import { EVENT_NAME_CLICK, EVENT_NAME_INPUT } from '../../constants/events'
+import { ROLE_ALERT } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
+import { TAG_DIV } from '../../constants/tags'
+import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { requestAF } from '../../utils/dom'
-import { isBoolean } from '../../utils/inspect'
+import { isBoolean, isNumeric } from '../../utils/inspect'
 import { toInteger } from '../../utils/number'
-import BVTransition from '../../utils/bv-transition'
+import { buildObject } from '../../utils/object'
+import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButtonClose } from '../button/button-close'
 
-const NAME = 'BAlert'
+// --- Utility methods ---
 
 // Convert `show` value to a number
 const parseCountDown = show => {
@@ -30,29 +40,27 @@ const parseShow = show => {
   return !!show
 }
 
-// Is a value number like (i.e. a number or a number as string)
-const isNumericLike = value => !isNaN(toInteger(value))
-
+// --- Main component ---
 // @vue/component
 export const BAlert = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_ALERT,
   mixins: [normalizeSlotMixin],
   model: {
     prop: 'show',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     variant: {
       type: String,
-      default: () => getComponentConfig(NAME, 'variant')
+      default: () => getComponentConfig(NAME_ALERT, 'variant')
     },
     dismissible: {
       type: Boolean,
       default: false
     },
     dismissLabel: {
       type: String,
-      default: () => getComponentConfig(NAME, 'dismissLabel')
+      default: () => getComponentConfig(NAME_ALERT, 'dismissLabel')
     },
     show: {
       type: [Boolean, Number, String],
@@ -78,12 +86,12 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
     },
     countDown(newVal) {
       this.clearCountDownInterval()
-      if (isNumericLike(this.show)) {
+      if (isNumeric(this.show)) {
         // Ignore if this.show transitions to a boolean value.
         this.$emit('dismiss-count-down', newVal)
         if (this.show !== newVal) {
           // Update the v-model if needed
-          this.$emit('input', newVal)
+          this.$emit(EVENT_NAME_INPUT, newVal)
         }
         if (newVal > 0) {
           this.localShow = true
@@ -101,13 +109,13 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       }
     },
     localShow(newVal) {
-      if (!newVal && (this.dismissible || isNumericLike(this.show))) {
+      if (!newVal && (this.dismissible || isNumeric(this.show))) {
         // Only emit dismissed events for dismissible or auto dismissing alerts
         this.$emit('dismissed')
       }
-      if (!isNumericLike(this.show) && this.show !== newVal) {
+      if (!isNumeric(this.show) && this.show !== newVal) {
         // Only emit booleans if we weren't passed a number via `this.show`
-        this.$emit('input', newVal)
+        this.$emit(EVENT_NAME_INPUT, newVal)
       }
     }
   },
@@ -136,32 +144,41 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    let $alert // undefined
+    let $alert = h()
     if (this.localShow) {
+      const { dismissible, variant } = this
+
       let $dismissBtn = h()
-      if (this.dismissible) {
-        // Add dismiss button
+      if (dismissible) {
         $dismissBtn = h(
           BButtonClose,
-          { attrs: { 'aria-label': this.dismissLabel }, on: { click: this.dismiss } },
+          {
+            attrs: buildObject([[ATTR_ARIA_LABEL, this.dismissLabel]]),
+            on: buildObject([[EVENT_NAME_CLICK, this.dismiss]])
+          },
           [this.normalizeSlot('dismiss')]
         )
       }
+
       $alert = h(
-        'div',
+        TAG_DIV,
         {
-          key: this._uid,
-          staticClass: 'alert',
-          class: {
-            'alert-dismissible': this.dismissible,
-            [`alert-${this.variant}`]: this.variant
-          },
-          attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true }
+          staticClass: CLASS_NAME_ALERT,
+          class: buildObject([
+            [suffixClass(CLASS_NAME_ALERT, 'dismissible'), dismissible],
+            [suffixClass(CLASS_NAME_ALERT, variant), variant]
+          ]),
+          attrs: buildObject([
+            [ATTR_ROLE, ROLE_ALERT],
+            [ATTR_ARIA_LIVE, ARIA_LIVE_POLITE],
+            [ATTR_ARIA_ATOMIC, ARIA_VALUE_TRUE]
+          ]),
+          key: this._uid
         },
-        [$dismissBtn, this.normalizeSlot('default')]
+        [$dismissBtn, this.normalizeSlot(SLOT_NAME_DEFAULT)]
       )
-      $alert = [$alert]
     }
-    return h(BVTransition, { props: { noFade: !this.fade } }, $alert)
+
+    return h(BVTransition, { props: { noFade: !this.fade } }, [$alert])
   }
 })
diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
@@ -1,18 +1,17 @@
+import { CLASS_NAME_BV_ASPECT } from '../../constants/class-names'
+import { NAME_ASPECT } from '../../constants/components'
+import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { mathAbs } from '../../utils/math'
 import { toFloat } from '../../utils/number'
+import { suffixClass } from '../../utils/string'
 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 ---
+// --- Main component ---
+// @vue/component
 export const BAspect = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_ASPECT,
   mixins: [normalizeSlotMixin],
   props: {
     aspect: {
@@ -31,9 +30,9 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
       const aspect = this.aspect
       let ratio = 1
       if (RX_ASPECT.test(aspect)) {
-        // Width and/or Height can be a decimal value below `1`, so
+        // Width and/or height can be a decimal value below `1`, so
         // we only fallback to `1` if the value is `0` or `NaN`
-        const [width, height] = aspect.split(RX_SEPARATOR).map(v => toFloat(v) || 1)
+        const [width, height] = aspect.split(RX_ASPECT_SEPARATOR).map(v => toFloat(v) || 1)
         ratio = width / height
       } else {
         ratio = toFloat(aspect) || 1
@@ -43,17 +42,26 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
   },
   render(h) {
     const $sizer = h('div', {
-      staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
+      staticClass: suffixClass(CLASS_NAME_BV_ASPECT, 'sizer'),
+      class: 'flex-grow-1',
       style: { paddingBottom: this.padding, height: 0 }
     })
     const $content = h(
       'div',
       {
-        staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
+        staticClass: suffixClass(CLASS_NAME_BV_ASPECT, 'content'),
+        class: ['flex-grow-1', 'w-100', 'mw-100'],
         style: { marginLeft: '-100%' }
       },
-      [this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT)]
+    )
+    return h(
+      this.tag,
+      {
+        staticClass: CLASS_NAME_BV_ASPECT,
+        class: 'd-flex'
+      },
+      [$sizer, $content]
     )
-    return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
   }
 })
diff --git a/src/components/avatar/avatar-group.js b/src/components/avatar/avatar-group.js
@@ -1,16 +1,17 @@
+import { CLASS_NAME_BV_AVATAR_GROUP } from '../../constants/class-names'
+import { NAME_AVATAR_GROUP } from '../../constants/components'
+import { ROLE_GROUP } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
-import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { mathMax, mathMin } from '../../utils/math'
 import { toFloat } from '../../utils/number'
+import { suffixClass } from '../../utils/string'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { computeSize } from './avatar'
 
-// --- Constants ---
-const NAME = 'BAvatarGroup'
-
-// --- Main component ---
 // @vue/component
 export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_AVATAR_GROUP,
   mixins: [normalizeSlotMixin],
   provide() {
     return { bvAvatarGroup: this }
@@ -59,10 +60,22 @@ export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    const $inner = h('div', { staticClass: 'b-avatar-group-inner', style: this.paddingStyle }, [
-      this.normalizeSlot('default')
-    ])
+    const $inner = h(
+      'div',
+      {
+        staticClass: suffixClass(CLASS_NAME_BV_AVATAR_GROUP, 'inner'),
+        style: this.paddingStyle
+      },
+      [this.normalizeSlot(SLOT_NAME_DEFAULT)]
+    )
 
-    return h(this.tag, { staticClass: 'b-avatar-group', attrs: { role: 'group' } }, [$inner])
+    return h(
+      this.tag,
+      {
+        staticClass: CLASS_NAME_BV_AVATAR_GROUP,
+        attrs: { role: ROLE_GROUP }
+      },
+      [$inner]
+    )
   }
 })