From 317a9f04e4948aea249479cd9ed1f45265b69cd1 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Mon, 25 Mar 2024 13:23:36 +0900
Subject: [PATCH 1/4] feat(lib): add compat-fallthrough prop to Numberinput

- `Numberinput` 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, `Numberinput` 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 (compatible with Buefy for Vue 2).
---
 .../src/components/numberinput/Numberinput.vue       | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/buefy-next/src/components/numberinput/Numberinput.vue b/packages/buefy-next/src/components/numberinput/Numberinput.vue
index 90e447b50..88ca532c1 100644
--- a/packages/buefy-next/src/components/numberinput/Numberinput.vue
+++ b/packages/buefy-next/src/components/numberinput/Numberinput.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="b-numberinput field" :class="fieldClasses">
+    <div
+        class="b-numberinput field"
+        :class="fieldClasses"
+        v-bind="rootAttrs"
+    >
         <p
             v-for="control in controlsLeft"
             :key="control"
@@ -37,7 +41,7 @@
             type="number"
             ref="input"
             v-model="computedValue"
-            v-bind="$attrs"
+            v-bind="fallthroughAttrs"
             :step="minStepNumber"
             :max="max"
             :min="min"
@@ -95,6 +99,7 @@
 <script>
 import Icon from '../icon/Icon.vue'
 import Input from '../input/Input.vue'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
 
 export default {
@@ -103,8 +108,7 @@ export default {
         [Icon.name]: Icon,
         [Input.name]: Input
     },
-    mixins: [FormElementMixin],
-    inheritAttrs: false,
+    mixins: [CompatFallthroughMixin, FormElementMixin],
     inject: {
         field: {
             from: 'BField',

From e4a60f3727003de625f2ac02f1c95767f6fa47b4 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Mon, 25 Mar 2024 13:25:53 +0900
Subject: [PATCH 2/4] test(lib): test Numberinput fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `Numberinput`
---
 .../numberinput/Numberinput.spec.js           | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/buefy-next/src/components/numberinput/Numberinput.spec.js b/packages/buefy-next/src/components/numberinput/Numberinput.spec.js
index 0af6a98b7..45a4a4f87 100644
--- a/packages/buefy-next/src/components/numberinput/Numberinput.spec.js
+++ b/packages/buefy-next/src/components/numberinput/Numberinput.spec.js
@@ -399,4 +399,45 @@ describe('BNumberinput', () => {
             expect(wrapper.vm.computedValue).toBe(5)
         })
     })
+
+    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(BNumberinput, { attrs })
+
+            const root = wrapper.find('div.b-numberinput')
+            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 <b-input> if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BNumberinput, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                }
+            })
+
+            const root = wrapper.find('div.b-numberinput')
+            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)
+        })
+    })
 })

From 70d6b336c5285a23949d3aa3a4f7ac85c896ee47 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Mon, 25 Mar 2024 13:31:00 +0900
Subject: [PATCH 3/4] chore(docs): explain compat-fallthrough prop of
 Numberinput

---
 .../src/pages/components/numberinput/api/numberinput.js    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/docs/src/pages/components/numberinput/api/numberinput.js b/packages/docs/src/pages/components/numberinput/api/numberinput.js
index 1faf0aab9..73c4e39c8 100644
--- a/packages/docs/src/pages/components/numberinput/api/numberinput.js
+++ b/packages/docs/src/pages/components/numberinput/api/numberinput.js
@@ -137,6 +137,13 @@ export default [
                 values: '—',
                 default: '<code>true</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;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 the <code>defaultCompatFallthrough</code> config option.'
+            },
             {
                 name: 'Any native attribute',
                 description: '—',

From a7386af7567d77c3d2387183c4f7c9027620ace4 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Mon, 25 Mar 2024 13:31:35 +0900
Subject: [PATCH 4/4] docs(CHANGELOG): explain compat-fallthrough prop of
 Numberinput

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2c20429e..f0794d58e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@
 
   * `Numberinput`:
 
-    TBD
+    If `compat-fallthrough` is `true`, the attributes fall through to the root `<div>` element, otherwise to the underlying `<b-input>` component.
 
   * `Select`: