Fix [SliderThumb]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (…

…#16) (#216)

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

- `SliderThumb` introduces a new prop `compat-fallthrough` which
  determines the `class`, `style`, and `id` attributes are applied to
  the root or inner `<div>` element. Since Vue 3 changed the fallthrough
  behavior, `SliderThumb` 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 SliderThumb fallthrough behavior

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

* docs(CHANGELOG): explain compat-fallthrough prop o SliderThumb

CHANGELOG.md

@@ -47,7 +47,7 @@
 
   * `SliderThumb`:
 
-    TBD
+    If `compat-fallthrough` is `true`, the attributes fall through to the root `<div>` element, otherwise to the inner `<div>` element.
 
   * `Table`:
 

packages/buefy-next/src/components/slider/SliderThumb.spec.js

@@ -111,4 +111,59 @@ describe('BSliderThumb', () => {
         await wrapper.setProps({ tooltipAlways: true })
         expect(wrapper.findComponent(BTooltip).props().always).toBe(true)
     })
+
+    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(BSliderThumb, {
+                attrs,
+                global: {
+                    stubs: {
+                        // b-tooltip must be rendered to access the inner <div>
+                        'b-tooltip': false
+                    }
+                }
+            })
+
+            const root = wrapper.find('div.b-slider-thumb-wrapper')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const inner = wrapper.find('div.b-slider-thumb')
+            expect(inner.classes(attrs.class)).toBe(false)
+            expect(inner.attributes('style')).toBeUndefined()
+            expect(inner.attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style, and id to the inner <div> element if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BSliderThumb, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                },
+                global: {
+                    stubs: {
+                        // b-tooltip must be rendered to access the inner <div>
+                        'b-tooltip': false
+                    }
+                }
+            })
+
+            const root = wrapper.find('div.b-slider-thumb-wrapper')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const inner = wrapper.find('div.b-slider-thumb')
+            expect(inner.classes(attrs.class)).toBe(true)
+            expect(inner.attributes('style')).toBe(attrs.style)
+            expect(inner.attributes('id')).toBe(attrs.id)
+        })
+    })
 })

packages/buefy-next/src/components/slider/SliderThumb.vue

@@ -3,6 +3,7 @@
         class="b-slider-thumb-wrapper"
         :class="{ 'is-dragging': dragging, 'has-indicator': indicator}"
         :style="wrapperStyle"
+        v-bind="rootAttrs"
     >
         <b-tooltip
             :label="formattedValue"
@@ -13,7 +14,7 @@
             <div
                 class="b-slider-thumb"
                 :tabindex="disabled ? false : 0"
-                v-bind="$attrs"
+                v-bind="fallthroughAttrs"
                 @mousedown="onButtonDown"
                 @touchstart="onButtonDown"
                 @focus="onFocus"
@@ -34,13 +35,14 @@
 <script>
 import Tooltip from '../tooltip/Tooltip.vue'
 import config from '../../utils/config'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 
 export default {
     name: 'BSliderThumb',
     components: {
         [Tooltip.name]: Tooltip
     },
-    inheritAttrs: false,
+    mixins: [CompatFallthroughMixin],
     props: {
         modelValue: {
             type: Number,