feat(config): defaults for all size properties (closes #3805)

src/components/button-group/button-group.js

@@ -1,5 +1,8 @@
 import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { getComponentConfig } from '../../utils/config'
+
+const NAME = 'BButtonGroup'
 
 export const props = {
   vertical: {
@@ -8,7 +11,7 @@ export const props = {
   },
   size: {
     type: String,
-    default: null
+    default: () => getComponentConfig('BButton', 'size')
   },
   tag: {
     type: String,
@@ -22,7 +25,7 @@ export const props = {
 
 // @vue/component
 export const BButtonGroup = /*#__PURE__*/ Vue.extend({
-  name: 'BButtonGroup',
+  name: NAME,
   functional: true,
   props,
   render(h, { props, data, children }) {

src/components/button/button.js

@@ -23,7 +23,7 @@ const btnProps = {
   },
   size: {
     type: String,
-    default: null
+    default: () => getComponentConfig(NAME, 'size')
   },
   variant: {
     type: String,

src/components/dropdown/dropdown.js

@@ -18,7 +18,7 @@ export const props = {
   },
   size: {
     type: String,
-    default: null
+    default: () => getComponentConfig(NAME, 'size')
   },
   variant: {
     type: String,

src/components/form-file/form-file.js

@@ -22,7 +22,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
   props: {
     size: {
       type: String,
-      default: null
+      default: () => getComponentConfig('BFormControl', 'size')
     },
     value: {
       // type: Object,
@@ -313,7 +313,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
         class: [
           this.stateClass,
           {
-            [`b-custom-control-${this.size}`]: this.size
+            [`b-custom-control-${this.size}`]: Boolean(this.size)
           }
         ],
         attrs: { id: this.safeId('_BV_file_outer_') },

src/components/input-group/input-group.js

@@ -1,17 +1,21 @@
 import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { getComponentConfig } from '../../utils/config'
 import { htmlOrText } from '../../utils/html'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
 import { BInputGroupPrepend } from './input-group-prepend'
 import { BInputGroupAppend } from './input-group-append'
 import { BInputGroupText } from './input-group-text'
 
+const NAME = 'BInputGroup'
+
 export const props = {
   id: {
     type: String
   },
   size: {
-    type: String
+    type: String,
+    default: () => getComponentConfig(NAME, 'size')
   },
   prepend: {
     type: String
@@ -33,7 +37,7 @@ export const props = {
 
 // @vue/component
 export const BInputGroup = /*#__PURE__*/ Vue.extend({
-  name: 'BInputGroup',
+  name: NAME,
   functional: true,
   props,
   render(h, { props, data, slots, scopedSlots }) {
@@ -85,9 +89,7 @@ export const BInputGroup = /*#__PURE__*/ Vue.extend({
       props.tag,
       mergeData(data, {
         staticClass: 'input-group',
-        class: {
-          [`input-group-${props.size}`]: Boolean(props.size)
-        },
+        class: { [`input-group-${props.size}`]: Boolean(props.size) },
         attrs: {
           id: props.id || null,
           role: 'group'

src/components/pagination-nav/pagination-nav.js

@@ -2,15 +2,26 @@ import Vue from '../../utils/vue'
 import looseEqual from '../../utils/loose-equal'
 import toString from '../../utils/to-string'
 import warn from '../../utils/warn'
+import { getComponentConfig } from '../../utils/config'
 import { requestAF } from '../../utils/dom'
 import { isBrowser } from '../../utils/env'
 import { isArray, isUndefined, isFunction, isObject } from '../../utils/inspect'
 import { computeHref, parseQuery } from '../../utils/router'
 import paginationMixin from '../../mixins/pagination'
 
-// Props object
+const NAME = 'BPaginationNav'
+
+// Sanitize the provided number of pages (converting to a number)
+export const sanitizeNumberOfPages = value => {
+  const numberOfPages = parseInt(value, 10) || 1
+  return numberOfPages < 1 ? 1 : numberOfPages
+}
+
 const props = {
-  // pagination-nav specific props
+  size: {
+    type: String,
+    default: () => getComponentConfig(NAME, 'size')
+  },
   numberOfPages: {
     type: [Number, String],
     default: 1,
@@ -70,16 +81,10 @@ const props = {
   }
 }
 
-// TODO: move this to an instance method in pagination mixin
-const sanitizeNumPages = value => {
-  const num = parseInt(value, 10) || 1
-  return num < 1 ? 1 : num
-}
-
-// Our render function is brought in via the pagination mixin
+// The render function is brought in via the pagination mixin
 // @vue/component
 export const BPaginationNav = /*#__PURE__*/ Vue.extend({
-  name: 'BPaginationNav',
+  name: NAME,
   mixins: [paginationMixin],
   props,
   computed: {
@@ -96,17 +101,17 @@ export const BPaginationNav = /*#__PURE__*/ Vue.extend({
   watch: {
     numberOfPages(newVal, oldVal) {
       this.$nextTick(() => {
-        this.setNumPages()
+        this.setNumberOfPages()
       })
     },
     pages(newVal, oldVal) {
       this.$nextTick(() => {
-        this.setNumPages()
+        this.setNumberOfPages()
       })
     }
   },
   created() {
-    this.setNumPages()
+    this.setNumberOfPages()
   },
   mounted() {
     if (this.$router) {
@@ -121,11 +126,11 @@ export const BPaginationNav = /*#__PURE__*/ Vue.extend({
     }
   },
   methods: {
-    setNumPages() {
+    setNumberOfPages() {
       if (isArray(this.pages) && this.pages.length > 0) {
-        this.localNumPages = this.pages.length
+        this.localNumberOfPages = this.pages.length
       } else {
-        this.localNumPages = sanitizeNumPages(this.numberOfPages)
+        this.localNumberOfPages = sanitizeNumberOfPages(this.numberOfPages)
       }
       this.$nextTick(() => {
         this.guessCurrentPage()
@@ -263,7 +268,7 @@ export const BPaginationNav = /*#__PURE__*/ Vue.extend({
           ? { path: loc.pathname, hash: loc.hash, query: parseQuery(loc.search) }
           : {}
         // Loop through the possible pages looking for a match until found
-        for (let page = 1; !guess && page <= this.localNumPages; page++) {
+        for (let page = 1; !guess && page <= this.localNumberOfPages; page++) {
           const to = this.makeLink(page)
           if ($router && (isObject(to) || this.useRouter)) {
             // Resolve the page via the $router

src/components/pagination/pagination.js

@@ -1,21 +1,30 @@
 import Vue from '../../utils/vue'
-import paginationMixin from '../../mixins/pagination'
+import { getComponentConfig } from '../../utils/config'
 import { isVisible } from '../../utils/dom'
+import paginationMixin from '../../mixins/pagination'
+
+const NAME = 'BPagination'
 
 const DEFAULT_PER_PAGE = 20
 const DEFAULT_TOTAL_ROWS = 0
 
+// Sanitize the provided per page number (converting to a number)
 const sanitizePerPage = val => {
   const perPage = parseInt(val, 10) || DEFAULT_PER_PAGE
   return perPage < 1 ? 1 : perPage
 }
 
+// Sanitize the provided total rows number (converting to a number)
 const sanitizeTotalRows = val => {
   const totalRows = parseInt(val, 10) || DEFAULT_TOTAL_ROWS
   return totalRows < 0 ? 0 : totalRows
 }
 
 const props = {
+  size: {
+    type: String,
+    default: () => getComponentConfig(NAME, 'size')
+  },
   perPage: {
     type: [Number, String],
     default: DEFAULT_PER_PAGE
@@ -30,10 +39,10 @@ const props = {
   }
 }
 
-// Our render function is brought in from the pagination mixin
+// The render function is brought in via the pagination mixin
 // @vue/component
 export const BPagination = /*#__PURE__*/ Vue.extend({
-  name: 'BPagination',
+  name: NAME,
   mixins: [paginationMixin],
   props,
   computed: {
@@ -44,21 +53,21 @@ export const BPagination = /*#__PURE__*/ Vue.extend({
   },
   watch: {
     numberOfPages(newVal) {
-      if (newVal === this.localNumPages) {
+      if (newVal === this.localNumberOfPages) {
         /* istanbul ignore next */
         return
       }
-      this.localNumPages = newVal
+      this.localNumberOfPages = newVal
       this.currentPage = 1
     }
   },
   created() {
     // Set the initial page count
-    this.localNumPages = this.numberOfPages
+    this.localNumberOfPages = this.numberOfPages
     // Set the initial page value
-    const curr = parseInt(this.value, 10) || 0
-    if (curr > 0) {
-      this.currentPage = curr
+    const currentPage = parseInt(this.value, 10) || 0
+    if (currentPage > 0) {
+      this.currentPage = currentPage
     } else {
       this.$nextTick(() => {
         // If this value parses to NaN or a value less than 1
@@ -69,7 +78,7 @@ export const BPagination = /*#__PURE__*/ Vue.extend({
   },
   mounted() {
     // Set the initial page count
-    this.localNumPages = this.numberOfPages
+    this.localNumberOfPages = this.numberOfPages
   },
   methods: {
     // These methods are used by the render function

src/mixins/form-size.js

@@ -1,9 +1,11 @@
+import { getComponentConfig } from '../utils/config'
+
 // @vue/component
 export default {
   props: {
     size: {
       type: String,
-      default: null
+      default: () => getComponentConfig('BFormControl', 'size')
     }
   },
   computed: {