feat(lib): add compat fallthrough to Input

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

issue ntohq#16

packages/buefy-next/src/components/input/Input.vue

@@ -2,6 +2,7 @@
     <div
         class="control"
         :class="rootClasses"
+        v-bind="rootAttrs"
     >
         <input
             v-if="type !== 'textarea'"
@@ -12,7 +13,7 @@
             :autocomplete="newAutocomplete"
             :maxlength="maxlength"
             :value="computedValue"
-            v-bind="$attrs"
+            v-bind="inputAttrs"
             @input="onInput"
             @change="onChange"
             @blur="onBlur"
@@ -26,7 +27,7 @@
             :class="[inputClasses, customClass]"
             :maxlength="maxlength"
             :value="computedValue"
-            v-bind="$attrs"
+            v-bind="inputAttrs"
             @input="onInput"
             @change="onChange"
             @blur="onBlur"
@@ -99,7 +100,12 @@ export default {
         },
         iconRight: String,
         iconRightClickable: Boolean,
-        iconRightType: String
+        iconRightType: String,
+        // if true, `class`, `style`, and `id` are applied to the root <div>
+        compatFallthrough: {
+            type: Boolean,
+            default: () => config.defaultInputCompatFallthrough
+        }
     },
     emits: [
         'icon-click',
@@ -127,6 +133,23 @@ export default {
                 this.$emit('update:modelValue', value)
             }
         },
+        rootAttrs() {
+            return this.compatFallthrough
+                ? {
+                    // class is included in `rootClasses`
+                    style: this.$attrs.style,
+                    id: this.$attrs.id
+                }
+                : {}
+        },
+        inputAttrs() {
+            if (this.compatFallthrough) {
+                const { class: _1, style: _2, id: _3, ...rest } = this.$attrs
+                return rest
+            } else {
+                return this.$attrs
+            }
+        },
         rootClasses() {
             return [
                 this.iconPosition,
@@ -135,7 +158,8 @@ export default {
                     'is-expanded': this.expanded,
                     'is-loading': this.loading,
                     'is-clearfix': !this.hasMessage
-                }
+                },
+                this.compatFallthrough ? this.$attrs.class : undefined
             ]
         },
         inputClasses() {

packages/buefy-next/src/utils/config.js

@@ -35,6 +35,11 @@ let config = {
     defaultTimepickerMobileModal: true,
     defaultNoticeQueue: true,
     defaultInputHasCounter: true,
+    /**
+     * Whether `class`, `style`, and `id` are applied to the root `<div>`
+     * element in `Input` by default.
+     */
+    defaultInputCompatFallthrough: true,
     defaultTaginputHasCounter: true,
     defaultUseHtml5Validation: true,
     defaultDropdownMobileModal: true,