bootstrap-vue · jacobmllr95 · Dec 1, 2020 · Nov 30, 2020 · Nov 30, 2020 · Nov 30, 2020
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
@@ -342,12 +342,14 @@ export const BCalendar = Vue.extend({
     },
     computedDateDisabledFn() {
       const { dateDisabledFn } = this
-      return dateDisabledFn.name !== 'default' ? dateDisabledFn : () => false
+      return dateDisabledFn.name !== props.dateDisabledFn.default.name
+        ? dateDisabledFn
+        : () => false
     },
     // TODO: Change `dateInfoFn` to handle events and notes as well as classes
     computedDateInfoFn() {
       const { dateInfoFn } = this
-      return dateInfoFn.name !== 'default' ? dateInfoFn : () => ({})
+      return dateInfoFn.name !== props.dateInfoFn.default.name ? dateInfoFn : () => ({})
     },
     calendarLocale() {
       // This locale enforces the gregorian calendar (for use in formatter functions)

diff --git a/src/components/calendar/calendar.spec.js b/src/components/calendar/calendar.spec.js
@@ -377,4 +377,70 @@ describe('calendar', () => {
     expect($buttons.at(3).classes()).toContain('btn-outline-primary')
     expect($buttons.at(4).classes()).toContain('btn-outline-primary')
   })
+
+  it('disables dates based on `date-disabled-fn` prop', async () => {
+    const wrapper = mount(BCalendar, {
+      attachTo: createContainer(),
+      propsData: {
+        value: '2020-01-01',
+        dateDisabledFn(ymd) {
+          return ymd === '2020-01-02'
+        }
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    const $grid = wrapper.find('[role="application"]')
+    expect($grid.exists()).toBe(true)
+
+    let $cell = $grid.find('[data-date="2020-01-01"]')
+    expect($cell.exists()).toBe(true)
+    expect($cell.attributes('aria-disabled')).toBeUndefined()
+
+    $cell = $grid.find('[data-date="2020-01-02"]')
+    expect($cell.exists()).toBe(true)
+    expect($cell.attributes('aria-disabled')).toEqual('true')
+
+    $cell = $grid.find('[data-date="2020-01-03"]')
+    expect($cell.exists()).toBe(true)
+    expect($cell.attributes('aria-disabled')).toBeUndefined()
+
+    wrapper.destroy()
  })
+
+  it('applies classes on dates based on `date-info-fn` prop', async () => {
+    const wrapper = mount(BCalendar, {
+      attachTo: createContainer(),
+      propsData: {
+        value: '2020-01-01',
+        dateInfoFn(ymd) {
+          return ymd === '2020-01-02' ? 'my-info' : null
+        }
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    const $grid = wrapper.find('[role="application"]')
+    expect($grid.exists()).toBe(true)
+
+    let $cell = $grid.find('[data-date="2020-01-01"]')
+    expect($cell.exists()).toBe(true)
+    expect($cell.classes()).not.toContain('my-info')
+
+    $cell = $grid.find('[data-date="2020-01-02"]')
+    expect($cell.exists()).toBe(true)
+    expect($cell.classes()).toContain('my-info')
+
+    $cell = $grid.find('[data-date="2020-01-03"]')
+    expect($cell.exists()).toBe(true)
+    expect($cell.classes()).not.toContain('my-info')
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
@@ -108,6 +108,83 @@ const getAllFileEntriesInDirectory = (directoryReader, path = '') =>
     readDirectoryEntries()
   })
 
+// --- Props ---
+
+const props = makePropsConfigurable(
+  {
+    ...formControlProps,
+    ...formCustomProps,
+    ...formStateProps,
+    ...formSizeProps,
+    value: {
+      type: [File, Array],
+      default: null,
+      validator(value) {
+        /* istanbul ignore next */
+        if (value === '') {
+          warn(VALUE_EMPTY_DEPRECATED_MSG, NAME_FORM_FILE)
+          return true
+        }
+        return isUndefinedOrNull(value) || isValidValue(value)
+      }
+    },
+    accept: {
+      type: String,
+      default: ''
+    },
+    // Instruct input to capture from camera
+    capture: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: 'No file chosen'
+    },
+    browseText: {
+      type: String,
+      default: 'Browse'
+    },
+    dropPlaceholder: {
+      type: String,
+      default: 'Drop files here'
+    },
+    noDropPlaceholder: {
+      type: String,
+      default: 'Not allowed'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    directory: {
+      type: Boolean,
+      default: false
+    },
+    // TODO:
+    //   Should we deprecate this and only support flat file structures?
+    //   Nested file structures are only supported when files are dropped
+    //   A Chromium "bug" prevents `webkitEntries` from being populated
+    //   on the file input's `change` event and is marked as "WontFix"
+    //   Mozilla implemented the behavior the same way as Chromium
+    //   See: https://bugs.chromium.org/p/chromium/issues/detail?id=138987
+    //   See: https://bugzilla.mozilla.org/show_bug.cgi?id=1326031
+    noTraverse: {
+      type: Boolean,
+      default: false
+    },
+    noDrop: {
+      type: Boolean,
+      default: false
+    },
+    fileNameFormatter: {
+      type: Function
+      // default: null
+    }
+  },
+  NAME_FORM_FILE
+)
+
 // @vue/component
 export const BFormFile = /*#__PURE__*/ Vue.extend({
   name: NAME_FORM_FILE,
@@ -124,80 +201,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
     prop: 'value',
     event: 'input'
   },
-  props: makePropsConfigurable(
-    {
-      ...formControlProps,
-      ...formCustomProps,
-      ...formStateProps,
-      ...formSizeProps,
-      value: {
-        type: [File, Array],
-        default: null,
-        validator(value) {
-          /* istanbul ignore next */
-          if (value === '') {
-            warn(VALUE_EMPTY_DEPRECATED_MSG, NAME_FORM_FILE)
-            return true
-          }
-          return isUndefinedOrNull(value) || isValidValue(value)
-        }
-      },
-      accept: {
-        type: String,
-        default: ''
-      },
-      // Instruct input to capture from camera
-      capture: {
-        type: Boolea
6D40
n,
-        default: false
-      },
-      placeholder: {
-        type: String,
-        default: 'No file chosen'
-      },
-      browseText: {
-        type: String,
-        default: 'Browse'
-      },
-      dropPlaceholder: {
-        type: String,
-        default: 'Drop files here'
-      },
-      noDropPlaceholder: {
-        type: String,
-        default: 'Not allowed'
-      },
-      multiple: {
-        type: Boolean,
-        default: false
-      },
-      directory: {
-        type: Boolean,
-        default: false
-      },
-      // TODO:
-      //   Should we deprecate this and only support flat file structures?
-      //   Nested file structures are only supported when files are dropped
-      //   A Chromium "bug" prevents `webkitEntries` from being populated
-      //   on the file input's `change` event and is marked as "WontFix"
-      //   Mozilla implemented the behavior the same way as Chromium
-      //   See: https://bugs.chromium.org/p/chromium/issues/detail?id=138987
-      //   See: https://bugzilla.mozilla.org/show_bug.cgi?id=1326031
-      noTraverse: {
-        type: Boolean,
-        default: false
-      },
-      noDrop: {
-        type: Boolean,
-        default: false
-      },
-      fileNameFormatter: {
-        type: Function
-        // default: null
-      }
-    },
-    NAME_FORM_FILE
-  ),
+  props,
   data() {
     return {
       files: [],
@@ -269,7 +273,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
     },
     computedFileNameFormatter() {
       const { fileNameFormatter } = this
-      return fileNameFormatter.name !== 'default'
+      return fileNameFormatter.name !== props.fileNameFormatter.default.name
         ? fileNameFormatter
         : this.defaultFileNameFormatter
     },

diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js
@@ -223,7 +223,9 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
     },
     computedFormatter() {
       const { formatterFn } = this
-      return formatterFn.name !== 'default' ? formatterFn : this.defaultFormatter
+      return formatterFn.name !== props.formatterFn.default.name
+        ? formatterFn
+        : this.defaultFormatter
     },
     computedAttrs() {
       return {