Fix [Datepicker]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#…

…16) (#211)

* feat(lib): add compat-fallthrough prop to Datepicker

- `Datepicker` introduces a new prop `compat-fallthrough` which
  determines if the `class`, `style`, and `id` attributes are applied to
  the root `<div>` element or the underlying `<b-input>` component.
  Since Vue 3 changed the fallthrough behavior, `Datepicker` became
  incompatible with that of Buefy for Vue 2. The default value of this
  prop is determined by the `defaultCompatFallthrough` config option
  that is `true` by default.

* test(lib): test Datepicker fallthrough behavior

- Adds new test cases that test the new `compat-fallthrough` prop of
  `Datepicker`

* chore(docs): explain compat-fallthrough prop of Datepicker

* docs(CHANGELOG): explain compat-fallthrough prop of Datepicker

CHANGELOG.md

@@ -23,7 +23,7 @@
 
   * `Datepicker`:
 
-    TBD
+    If `compat-fallthrough` is `true`, the attributes fall through to the root `<div>` element, otherwise to the underlying `<b-input>`.
 
   * `Input`:
 

packages/buefy-next/src/components/datepicker/Datepicker.spec.js

@@ -424,4 +424,59 @@ describe('BDatepicker', () => {
             expect(subject.exists()).toBeTruthy()
         })
     })
+
+    describe('with fallthrough attributes', () => {
+        const attrs = {
+            class: 'fallthrough-class',
+            style: 'font-size: 2rem;',
+            id: 'fallthrough-id'
+        }
+
+        it('should apply class, style, and id to the root div element, if compatFallthrough is true (default)', () => {
+            const wrapper = shallowMount(BDatepicker, {
+                attrs,
+                global: {
+                    stubs: {
+                        // b-dropdown must be rendered to access ref=input
+                        'b-dropdown': false
+                    }
+                }
+            })
+
+            const root = wrapper.find('div.datepicker')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const input = wrapper.findComponent({ ref: 'input' })
+            expect(input.classes(attrs.class)).toBe(false)
+            expect(input.attributes('style')).toBeUndefined()
+            expect(input.attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style, and id to the underlying input, if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BDatepicker, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                },
+                global: {
+                    stubs: {
+                        // b-dropdown must be rendered to access ref=input
+                        'b-dropdown': false
+                    }
+                }
+            })
+
+            const root = wrapper.find('div.datepicker')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const input = wrapper.findComponent({ ref: 'input' })
+            expect(input.classes(attrs.class)).toBe(true)
+            expect(input.attributes('style')).toBe(attrs.style)
+            expect(input.attributes('id')).toBe(attrs.id)
+        })
+    })
 })

packages/buefy-next/src/components/datepicker/Datepicker.vue

@@ -2,6 +2,7 @@
     <div
         class="datepicker control"
         :class="[size, {'is-expanded': expanded}]"
+        v-bind="rootAttrs"
     >
         <b-dropdown
             v-if="!isMobile || inline"
@@ -33,7 +34,7 @@
                         :loading="loading"
                         :disabled="disabledOrUndefined"
                         :readonly="!editable"
-                        v-bind="$attrs"
+                        v-bind="fallthroughAttrs"
                         :use-html5-validation="false"
                         @click="onInputClick"
                         @icon-right-click="$emit('icon-right-click', $event)"
@@ -217,7 +218,7 @@
             :min="formatNative(minDate)"
             :disabled="disabledOrUndefined"
             :readonly="false"
-            v-bind="$attrs"
+            v-bind="fallthroughAttrs"
             :use-html5-validation="false"
             @change="onChangeNativePicker"
             @focus="onFocus"
@@ -227,6 +228,7 @@
 </template>
 
 <script>
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
 import { isMobile, getMonthNames, getWeekdayNames, matchWithGroups } from '../../utils/helpers'
 import config from '../../utils/config'
@@ -300,8 +302,7 @@ export default {
         [Dropdown.name]: Dropdown,
         [DropdownItem.name]: DropdownItem
     },
-    mixins: [FormElementMixin],
-    inheritAttrs: false,
+    mixins: [CompatFallthroughMixin, FormElementMixin],
     provide() {
         return {
             $datepicker: this

packages/docs/src/pages/components/datepicker/api/datepicker.js

@@ -317,6 +317,13 @@ export default [
                 values: '—',
                 default: '—'
             },
+            {
+                name: '<code>compat-fallthrough</code>',
+                description: 'Whether <code>class</code>, <code>style</code>, and <code>id</code> attributes are applied to the root &lt;div&gt; element or the underlying &lt;b-input&gt; component. If <code>true</code>, they are applied to the root &lt;div&gt; element, which is compatible with Buefy for Vue 2.',
+                type: 'Boolean',
+                values: '-',
+                default: '<code>true</code>. Can be changed via <code>defaultCompatFallthrough</code> config option.'
+            },
             {
                 name: 'Any native attribute',
                 description: '—',