From 6ff2e3be275f1cfd756ea04cd826cc377e194eb3 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Tue, 26 Mar 2024 11:47:23 +0900
Subject: [PATCH 1/4] feat(lib): add compat-fallthrough prop to Upload

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

  Replaces the `classAndStyle` computed value with `rootAttrs`, which
  did not address the `id` attribute.
---
 .../buefy-next/src/components/upload/Upload.vue    | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/buefy-next/src/components/upload/Upload.vue b/packages/buefy-next/src/components/upload/Upload.vue
index 1bde8e80f..9d339ffea 100644
--- a/packages/buefy-next/src/components/upload/Upload.vue
+++ b/packages/buefy-next/src/components/upload/Upload.vue
@@ -1,7 +1,7 @@
 <template>
     <label
         class="upload control"
-        v-bind="classAndStyle"
+        v-bind="rootAttrs"
         :class="[{'is-expanded' : expanded, 'is-rounded' : rounded}]"
     >
         <template v-if="!dragDrop">
@@ -28,7 +28,7 @@
         <input
             ref="input"
             type="file"
-            v-bind="$attrs"
+            v-bind="fallthroughAttrs"
             :multiple="multiple"
             :accept="accept"
             :disabled="disabledOrUndefined"
@@ -38,13 +38,13 @@
 </template>
 
 <script>
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
 import { File } from '../../utils/ssr'
 
 export default {
     name: 'BUpload',
-    mixins: [FormElementMixin],
-    inheritAttrs: false,
+    mixins: [CompatFallthroughMixin, FormElementMixin],
     props: {
         modelValue: {
             type: [Object, Function, File, Array]
@@ -79,12 +79,6 @@ export default {
         }
     },
     computed: {
-        classAndStyle() {
-            return {
-                class: this.$attrs.class,
-                style: this.$attrs.style
-            }
-        },
         disabledOrUndefined() {
             // On Vue 3, setting a boolean attribute `false` does not remove it,
             // `true` or `undefined` has to be given to remove it.

From aa11c97f8e20aef7037d7b3958e5ad0c87fce0b8 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Tue, 26 Mar 2024 11:52:22 +0900
Subject: [PATCH 2/4] test(lib): test Upload fallthrough behavior

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

diff --git a/packages/buefy-next/src/components/upload/Upload.spec.js b/packages/buefy-next/src/components/upload/Upload.spec.js
index 6d66748e9..e778bdec3 100644
--- a/packages/buefy-next/src/components/upload/Upload.spec.js
+++ b/packages/buefy-next/src/components/upload/Upload.spec.js
@@ -16,4 +16,45 @@ describe('BUpload', () => {
     it('render correctly', () => {
         expect(wrapper.html()).toMatchSnapshot()
     })
+
+    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 <label> element if compatFallthrough is true (default)', () => {
+            const wrapper = shallowMount(BUpload, { attrs })
+
+            const root = wrapper.find('label.upload')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const input = wrapper.find({ 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 <input> element if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BUpload, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                }
+            })
+
+            const root = wrapper.find('label.upload')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const input = wrapper.find({ ref: 'input' })
+            expect(input.classes(attrs.class)).toBe(true)
+            expect(input.attributes('style')).toBe(attrs.style)
+            expect(input.attributes('id')).toBe(attrs.id)
+        })
+    })
 })

From 49b757dab9b75c88a5386ab0d6f224fd338a0d6a Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Tue, 26 Mar 2024 11:57:25 +0900
Subject: [PATCH 3/4] chore(docs): explain compat-fallthrough prop of Upload

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

diff --git a/packages/docs/src/pages/components/upload/api/upload.js b/packages/docs/src/pages/components/upload/api/upload.js
index eb676dde6..d194c1219 100644
--- a/packages/docs/src/pages/components/upload/api/upload.js
+++ b/packages/docs/src/pages/components/upload/api/upload.js
@@ -88,6 +88,13 @@ export default [
                 values: '—',
                 default: '<code>false</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;label&gt; element or the underlying &lt;input&gt; element. If <code>true</code>, they are applied to the root &lt;label&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.'
+            }
         ],
         events: [
             {

From e9bddd34fbf03237cec0488540a234e2b378a0a3 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Tue, 26 Mar 2024 11:57:51 +0900
Subject: [PATCH 4/4] docs(CHANGELOG): explain compat-fallthrough prop of
 Upload

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2c20429e..dd137cd46 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,7 +63,7 @@
 
   * `Upload`:
 
-    TBD
+    If `compat-fallthrough` is `true`, the attributes fall through to the root `<label>` element, otherwise to the underlying `<input>` element.
 
 * `CarouselItem`, `StepItem`, and `TabItem` introduce a new prop `order`, which determines the order of each child item.
   By default, the order of each child item is determined by the sequence in which each child item is mounted.