Fix [Select]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16) (

#215)

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

- `Select` 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 `<select>` element. Since Vue 3
  changed the fallthrough behavior, `Select` became incompatible with
  that of Buefy for Vue 2. The default value of this prop is given by
  the `defaultCompatFallthrough` config option that is `true` by default
  (compatible with Buefy for Vue 2).

* test(lib): test Select fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `Select`

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

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

CHANGELOG.md

@@ -43,7 +43,7 @@
 
   * `Select`:
 
-    TBD
+    If `compat-fallthrough` is `true`, the attributes fall through to the root `<div>` element, otherwise to the underlying `<select>` element.
 
   * `SliderThumb`:
 

packages/buefy-next/src/components/select/Select.spec.js

@@ -28,4 +28,45 @@ describe('BSelect', () => {
         const valueEmitted = wrapper.emitted()['update:modelValue'][0]
         expect(valueEmitted).toContainEqual(false)
     })
+
+    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(BSelect, { attrs })
+
+            const root = wrapper.find('div.control')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const select = wrapper.find({ ref: 'select' })
+            expect(select.classes(attrs.class)).toBe(false)
+            expect(select.attributes('style')).toBeUndefined()
+            expect(select.attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style, and id to the underlying <select> element if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BSelect, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                }
+            })
+
+            const root = wrapper.find('div.control')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const select = wrapper.find({ ref: 'select' })
+            expect(select.classes(attrs.class)).toBe(true)
+            expect(select.attributes('style')).toBe(attrs.style)
+            expect(select.attributes('id')).toBe(attrs.id)
+        })
+    })
 })

packages/buefy-next/src/components/select/Select.vue

@@ -2,6 +2,7 @@
     <div
         class="control"
         :class="{ 'is-expanded': expanded, 'has-icons-left': icon }"
+        v-bind="rootAttrs"
     >
         <span class="select" :class="spanClasses">
 
@@ -10,7 +11,7 @@
                 ref="select"
                 :multiple="multiple"
                 :size="nativeSize"
-                v-bind="$attrs"
+                v-bind="fallthroughAttrs"
                 @blur="$emit('blur', $event) && checkHtml5Validity()"
                 @focus="$emit('focus', $event)"
             >
@@ -43,15 +44,15 @@
 
 <script>
 import Icon from '../icon/Icon.vue'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
 
 export default {
     name: 'BSelect',
     components: {
         [Icon.name]: Icon
     },
-    mixins: [FormElementMixin],
-    inheritAttrs: false,
+    mixins: [CompatFallthroughMixin, FormElementMixin],
     props: {
         modelValue: {
             type: [String, Number, Boolean, Object, Array, Function, Date],

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

@@ -57,6 +57,13 @@ export default [
                 values: '—',
                 default: '<code>4</code>'
             },
+            {
+                name: '<code>compat-fallthrough</code>',
+                description: 'Whether the <code>class</code>, <code>style</code>, and <code>id</code> attributes are applied to the root &lt;div&gt; element or the underlying &lt;select&gt; element. 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 the <code>defaultCompatFallthrough</code> config option.'
+            },
             {
                 name: 'Any native attribute',
                 description: '—',