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

…#217)

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

- `Table` 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-table-pagination>` components.
  Since Vue 3 changed the fallthrough behavior, `Table` 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 Table fallthrough behavior

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

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

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

CHANGELOG.md

@@ -51,7 +51,7 @@
 
   * `Table`:
 
-    TBD
+    If `compat-fallthrough` is `true`, the attributes fall through to the root `<div>` element, otherwise to the underlying pagination components.
 
   * `Taginput`:
 

packages/buefy-next/src/components/table/Table.spec.js

@@ -3,6 +3,7 @@ import { toRaw } from 'vue'
 import { shallowMount } from '@vue/test-utils'
 import BInput from '@components/input/Input'
 import BTable from '@components/table/Table'
+import BTablePagination from '@components/table/TablePagination'
 
 describe('BTable', () => {
     let wrapper
@@ -541,4 +542,78 @@ describe('BTable', () => {
             ])
         })
     })
+
+    describe('with fallthrough attributes', () => {
+        const data = [
+            { id: 1, name: 'Jesse' },
+            { id: 2, name: 'John' },
+            { id: 3, name: 'Tina' },
+            { id: 4, name: 'Anne' },
+            { id: 5, name: 'Clarence' }
+        ]
+        const columns = [
+            { label: 'ID', field: 'id' },
+            { label: 'Name', field: 'name' }
+        ]
+        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(BTable, {
+                attrs,
+                props: {
+                    paginated: true,
+                    paginationPosition: 'both',
+                    columns,
+                    data
+                }
+            })
+
+            const root = wrapper.find('div.b-table')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const paginations = wrapper.findAllComponents(BTablePagination)
+            // top
+            expect(paginations[0].classes(attrs.class)).toBe(false)
+            expect(paginations[0].attributes('style')).toBeUndefined()
+            expect(paginations[0].attributes('id')).toBeUndefined()
+            // bottom
+            expect(paginations[1].classes(attrs.class)).toBe(false)
+            expect(paginations[1].attributes('style')).toBeUndefined()
+            expect(paginations[1].attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style, and id to the underlying <b-table-pagination> components if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BTable, {
+                attrs,
+                props: {
+                    compatFallthrough: false,
+                    paginated: true,
+                    paginationPosition: 'both',
+                    columns,
+                    data
+                }
+            })
+
+            const root = wrapper.find('div.b-table')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const paginations = wrapper.findAllComponents(BTablePagination)
+            // top
+            expect(paginations[0].classes(attrs.class)).toBe(true)
+            expect(paginations[0].attributes('style')).toBe(attrs.style)
+            expect(paginations[0].attributes('id')).toBe(attrs.id)
+            // bottom
+            expect(paginations[1].classes(attrs.class)).toBe(true)
+            expect(paginations[1].attributes('style')).toBe(attrs.style)
+            expect(paginations[1].attributes('id')).toBe(attrs.id)
+        })
+    })
 })

packages/buefy-next/src/components/table/Table.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="b-table">
+    <div class="b-table" v-bind="rootAttrs">
         <slot />
 
         <b-table-mobile-sort
@@ -22,7 +22,7 @@
         >
             <slot name="pagination">
                 <b-table-pagination
-                    v-bind="$attrs"
+                    v-bind="fallthroughAttrs"
                     :per-page="perPage"
                     :paginated="paginated"
                     :rounded="paginationRounded"
@@ -406,7 +406,7 @@
         >
             <slot name="pagination">
                 <b-table-pagination
-                    v-bind="$attrs"
+                    v-bind="fallthroughAttrs"
                     :per-page="perPage"
                     :paginated="paginated"
                     :rounded="paginationRounded"
@@ -444,6 +444,7 @@
 import { toRaw } from 'vue'
 import { getValueByPath, indexOf, multiColumnSort, escapeRegExpChars, toCssWidth, removeDiacriticsFromString, isFragment, isNil, translateTouchAsDragEvent, createAbsoluteElement, removeElement } from '../../utils/helpers'
 import debounce from '../../utils/debounce'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import Checkbox from '../checkbox/Checkbox.vue'
 import Icon from '../icon/Icon.vue'
 import Input from '../input/Input.vue'
@@ -466,7 +467,7 @@ export default {
         [TableColumn.name]: TableColumn,
         [TablePagination.name]: TablePagination
     },
-    inheritAttrs: false,
+    mixins: [CompatFallthroughMixin],
     provide() {
         return {
             $table: this

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

@@ -466,6 +466,13 @@ export default [
                 type: 'Number',
                 values: '—',
                 default: '—'
+            },
+            {
+                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 pagination components. 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.'
             }
         ],
         slots: [