From 1cf0d7f26c92efedfcc44d42964c54e4022ec8d8 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Sun, 12 Jan 2025 00:16:21 +0900
Subject: [PATCH] TypeScript Rollout Tier 8 - Upload (#369)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: initial changes to migrate Upload

- This commit has been pushed to allow collaboration in debugging issue #267

* chore: fixed all type issues from the upload component

* chore: implemented all reviewed changes (upload)

* test(lib): rewrite Upload.spec in TS

* chore(lib): lib bundle Upload in TS

`rollup.config.mjs` removes "upload" from `JS_COMPONENTS`.

* chore(test): replace upload test snapshot

Replace the test snapshot in `components/upload/__snapshots__`:
- `Upload.spec.js.snap` → `Upload.spec.ts.snap`

* feat(docs): rewrite Upload examples in TS

* chore(lib): fix all Upload linting errors

* chore(lib): remove extra param from Upload invalid event

* chore(docs): imports and register Buefy components (upload)

* chore(docs): revert indenting (upload)

* chore(docs): import docs components in upload example

`src/pages/components/upload/Upload.vue` explicitly imports and
registers the following components:
- `ApiView`
- `Example`

---------

Co-authored-by: Wesley Ford <wes@wesdevpro.com>
---
 packages/buefy-next/rollup.config.mjs         |  1 -
 .../upload/{Upload.spec.js => Upload.spec.ts} |  6 +-
 .../src/components/upload/Upload.vue          | 63 ++++++++-----------
 .../upload/__snapshots__/Upload.spec.js.snap  |  3 -
 .../upload/__snapshots__/Upload.spec.ts.snap  |  3 +
 .../components/upload/{index.js => index.ts}  |  4 +-
 .../buefy-next/src/utils/FormElementMixin.ts  | 10 ++-
 .../src/pages/components/upload/Upload.vue    | 27 +++++---
 .../upload/api/{upload.js => upload.ts}       |  0
 .../components/upload/examples/ExDragDrop.vue | 18 ++++--
 .../components/upload/examples/ExExpanded.vue | 20 ++++--
 .../components/upload/examples/ExRounded.vue  | 20 ++++--
 .../components/upload/examples/ExSimple.vue   | 16 +++--
 .../upload/examples/ExValidation.vue          | 20 ++++--
 14 files changed, 128 insertions(+), 83 deletions(-)
 rename packages/buefy-next/src/components/upload/{Upload.spec.js => Upload.spec.ts} (90%)
 delete mode 100644 packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.js.snap
 create mode 100644 packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.ts.snap
 rename packages/buefy-next/src/components/upload/{index.js => index.ts} (79%)
 rename packages/docs/src/pages/components/upload/api/{upload.js => upload.ts} (100%)

diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
index c3b18891e..fe2f2459e 100644
--- a/packages/buefy-next/rollup.config.mjs
+++ b/packages/buefy-next/rollup.config.mjs
@@ -40,7 +40,6 @@ const JS_COMPONENTS = [
     'numberinput',
     'table',
     'timepicker',
-    'upload',
 ]
 
 const entries = {
diff --git a/packages/buefy-next/src/components/upload/Upload.spec.js b/packages/buefy-next/src/components/upload/Upload.spec.ts
similarity index 90%
rename from packages/buefy-next/src/components/upload/Upload.spec.js
rename to packages/buefy-next/src/components/upload/Upload.spec.ts
index e778bdec3..1343a259b 100644
--- a/packages/buefy-next/src/components/upload/Upload.spec.js
+++ b/packages/buefy-next/src/components/upload/Upload.spec.ts
@@ -1,7 +1,9 @@
 import { shallowMount } from '@vue/test-utils'
-import BUpload from '@components/upload/Upload'
+import type { VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import BUpload from '@components/upload/Upload.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BUpload>>
 
 describe('BUpload', () => {
     beforeEach(() => {
diff --git a/packages/buefy-next/src/components/upload/Upload.vue b/packages/buefy-next/src/components/upload/Upload.vue
index 9d339ffea..e21fc9028 100644
--- a/packages/buefy-next/src/components/upload/Upload.vue
+++ b/packages/buefy-next/src/components/upload/Upload.vue
@@ -37,17 +37,20 @@
     </label>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ExtractComponentProps } from '../../utils/helpers'
 import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
 import { File } from '../../utils/ssr'
 
-export default {
+const Upload = defineComponent({
     name: 'BUpload',
     mixins: [CompatFallthroughMixin, FormElementMixin],
     props: {
         modelValue: {
-            type: [Object, Function, File, Array]
+            type: [Object, Function, File, Array] as PropType<File | Array<File> | null>
         },
         multiple: Boolean,
         disabled: Boolean,
@@ -70,7 +73,12 @@ export default {
             default: false
         }
     },
-    emits: ['invalid', 'update:modelValue'],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        invalid: () => true,
+        'update:modelValue': (newValue: File | Array<File> | null) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
     data() {
         return {
             newValue: this.modelValue,
@@ -80,35 +88,26 @@ export default {
     },
     computed: {
         disabledOrUndefined() {
-            // On Vue 3, setting a boolean attribute `false` does not remove it,
-            // `true` or `undefined` has to be given to remove it.
             return this.disabled || undefined
         }
     },
     watch: {
-        /**
-         *   When v-model is changed:
-         *   1. Set internal value.
-         *   2. Reset internal input file value
-         *   3. If it's invalid, validate again.
-         */
         modelValue(value) {
             this.newValue = value
             if (!value || (Array.isArray(value) && value.length === 0)) {
-                this.$refs.input.value = null
+                (this.$refs.input as HTMLInputElement).value = ''
             }
             !this.isValid && !this.dragDrop && this.checkHtml5Validity()
         }
     },
     methods: {
-        /**
-        * Listen change event on input type 'file',
-        * emit 'input' event and validate
-        */
-        onFileChange(event) {
+        onFileChange(event: Event) {
             if (this.disabled || this.loading) return
             if (this.dragDrop) this.updateDragDropFocus(false)
-            const value = event.target.files || event.dataTransfer.files
+            const value = (event.target as HTMLInputElement)!.files ??
+                            (event as DragEvent).dataTransfer!.files ??
+                            []
+
             if (value.length === 0) {
                 if (!this.newValue) return
                 if (this.native) this.newValue = null
@@ -137,7 +136,7 @@ export default {
                 }
                 for (let i = 0; i < value.length; i++) {
                     const file = value[i]
-                    if (this.checkType(file)) {
+                    if (this.checkType(file) && Array.isArray(this.newValue)) {
                         this.newValue.push(file)
                         newValues = true
                     }
@@ -147,27 +146,15 @@ export default {
             this.$emit('update:modelValue', this.newValue)
             !this.dragDrop && this.checkHtml5Validity()
         },
-
-        /*
-        * Reset file input value
-        */
         clearInput() {
-            this.$refs.input.value = null
+            (this.$refs.input as HTMLInputElement).value = ''
         },
-
-        /**
-        * Listen drag-drop to update internal variable
-        */
-        updateDragDropFocus(focus) {
+        updateDragDropFocus(focus: boolean) {
             if (!this.disabled && !this.loading) {
                 this.dragDropFocus = focus
             }
         },
-
-        /**
-        * Check mime type of file
-        */
-        checkType(file) {
+        checkType(file: File) {
             if (!this.accept) return true
             const types = this.accept.split(',')
             if (types.length === 0) return true
@@ -193,5 +180,9 @@ export default {
             return valid
         }
     }
-}
+})
+
+export type UploadProps = ExtractComponentProps<typeof Upload>
+
+export default Upload
 </script>
diff --git a/packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.js.snap b/packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.js.snap
deleted file mode 100644
index 96a27f0b2..000000000
--- a/packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BUpload render correctly 1`] = `<label class="upload control"><input type="file"></label>`;
diff --git a/packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.ts.snap b/packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.ts.snap
new file mode 100644
index 000000000..8d3235b68
--- /dev/null
+++ b/packages/buefy-next/src/components/upload/__snapshots__/Upload.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BUpload > render correctly 1`] = `"<label class=\\"upload control\\"><input type=\\"file\\"></label>"`;
diff --git a/packages/buefy-next/src/components/upload/index.js b/packages/buefy-next/src/components/upload/index.ts
similarity index 79%
rename from packages/buefy-next/src/components/upload/index.js
rename to packages/buefy-next/src/components/upload/index.ts
index e057fe57d..f2a0ed55b 100644
--- a/packages/buefy-next/src/components/upload/index.js
+++ b/packages/buefy-next/src/components/upload/index.ts
@@ -1,9 +1,9 @@
+import type { App } from 'vue'
 import Upload from './Upload.vue'
-
 import { registerComponent } from '../../utils/plugins'
 
 const Plugin = {
-    install(Vue) {
+    install(Vue: App) {
         registerComponent(Vue, Upload)
     }
 }
diff --git a/packages/buefy-next/src/utils/FormElementMixin.ts b/packages/buefy-next/src/utils/FormElementMixin.ts
index 4e1d684b8..28a299c0b 100644
--- a/packages/buefy-next/src/utils/FormElementMixin.ts
+++ b/packages/buefy-next/src/utils/FormElementMixin.ts
@@ -182,11 +182,15 @@ const FormElementMixin = defineComponent({
          * If validation fail, send 'is-danger' type,
          * and error message to parent if it's a Field.
          */
-        checkHtml5Validity() {
-            if (!this.useHtml5Validation) return
+        checkHtml5Validity(): boolean {
+            if (!this.useHtml5Validation) {
+                return false
+            }
 
             const el = this.getElement()
-            if (el == null) return
+            if (el == null) {
+                return false
+            }
 
             if (!el.checkValidity()) {
                 this.setInvalid()
diff --git a/packages/docs/src/pages/components/upload/Upload.vue b/packages/docs/src/pages/components/upload/Upload.vue
index 70005bea2..0f2c48c7a 100644
--- a/packages/docs/src/pages/components/upload/Upload.vue
+++ b/packages/docs/src/pages/components/upload/Upload.vue
@@ -14,27 +14,36 @@
     </div>
 </template>
 
-<script>
-    import api from './api/upload'
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
     import { shallowFields } from '@/utils'
+    import ApiView from '@/components/ApiView.vue'
+    import Example from '@/components/Example.vue'
+
+    import api from './api/upload'
 
-    import ExSimple from './examples/ExSimple'
+    import ExSimple from './examples/ExSimple.vue'
     import ExSimpleCode from './examples/ExSimple.vue?raw'
 
-    import ExDragDrop from './examples/ExDragDrop'
+    import ExDragDrop from './examples/ExDragDrop.vue'
     import ExDragDropCode from './examples/ExDragDrop.vue?raw'
 
-    import ExExpanded from './examples/ExExpanded'
+    import ExExpanded from './examples/ExExpanded.vue'
     import ExExpandedCode from './examples/ExExpanded.vue?raw'
 
-    import ExRounded from './examples/ExRounded'
+    import ExRounded from './examples/ExRounded.vue'
     import ExRoundedCode from './examples/ExRounded.vue?raw'
 
-    import ExValidation from './examples/ExValidation'
+    import ExValidation from './examples/ExValidation.vue'
     import ExValidationCode from './examples/ExValidation.vue?raw'
 
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            Example
+        },
         data() {
             return {
                 api,
@@ -52,5 +61,5 @@
                 ExValidationCode,
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/upload/api/upload.js b/packages/docs/src/pages/components/upload/api/upload.ts
similarity index 100%
rename from packages/docs/src/pages/components/upload/api/upload.js
rename to packages/docs/src/pages/components/upload/api/upload.ts
diff --git a/packages/docs/src/pages/components/upload/examples/ExDragDrop.vue b/packages/docs/src/pages/components/upload/examples/ExDragDrop.vue
index 71683a996..f9ef18faf 100644
--- a/packages/docs/src/pages/components/upload/examples/ExDragDrop.vue
+++ b/packages/docs/src/pages/components/upload/examples/ExDragDrop.vue
@@ -32,17 +32,25 @@
     </section>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BField, BIcon, BUpload } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BField,
+            BIcon,
+            BUpload
+        },
         data() {
             return {
-                dropFiles: []
+                dropFiles: [] as Array<File>
             }
         },
         methods: {
-            deleteDropFile(index) {
+            deleteDropFile(index: number): void {
                 this.dropFiles.splice(index, 1)
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/upload/examples/ExExpanded.vue b/packages/docs/src/pages/components/upload/examples/ExExpanded.vue
index 74aed7e37..50deeac0c 100644
--- a/packages/docs/src/pages/components/upload/examples/ExExpanded.vue
+++ b/packages/docs/src/pages/components/upload/examples/ExExpanded.vue
@@ -30,18 +30,26 @@
   </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BField, BIcon, BUpload } from '@ntohq/buefy-next'
+
+export default defineComponent({
+  components: {
+    BField,
+    BIcon,
+    BUpload
+  },
   data() {
     return {
-      file: {},
-      dropFiles: []
+      file: {} as File,
+      dropFiles: [] as Array<File>
     };
   },
   methods: {
-    deleteDropFile(index) {
+    deleteDropFile(index: number): void {
       this.dropFiles.splice(index, 1);
     }
   }
-};
+});
 </script>
diff --git a/packages/docs/src/pages/components/upload/examples/ExRounded.vue b/packages/docs/src/pages/components/upload/examples/ExRounded.vue
index e3e21f026..c1d584c5e 100644
--- a/packages/docs/src/pages/components/upload/examples/ExRounded.vue
+++ b/packages/docs/src/pages/components/upload/examples/ExRounded.vue
@@ -22,18 +22,26 @@
                     {{ file2.name }}
                 </span>
             </b-upload>
-        </b-field> 
+        </b-field>
     </b-field>
   </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BField, BIcon, BUpload } from '@ntohq/buefy-next'
+
+export default defineComponent({
+  components: {
+    BField,
+    BIcon,
+    BUpload
+  },
   data() {
     return {
-      file: {},
-      file2 : null
+      file: {} as File,
+      file2 : null as File | null
     };
   },
-};
+});
 </script>
diff --git a/packages/docs/src/pages/components/upload/examples/ExSimple.vue b/packages/docs/src/pages/components/upload/examples/ExSimple.vue
index 090672792..4c06de334 100644
--- a/packages/docs/src/pages/components/upload/examples/ExSimple.vue
+++ b/packages/docs/src/pages/components/upload/examples/ExSimple.vue
@@ -12,12 +12,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BField, BIcon, BUpload } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BField,
+            BIcon,
+            BUpload
+        },
         data() {
             return {
-                file: null
+                file: null as File | null
             }
         }
-    }
+    });
 </script>
diff --git a/packages/docs/src/pages/components/upload/examples/ExValidation.vue b/packages/docs/src/pages/components/upload/examples/ExValidation.vue
index 40625063f..ee7e0f582 100644
--- a/packages/docs/src/pages/components/upload/examples/ExValidation.vue
+++ b/packages/docs/src/pages/components/upload/examples/ExValidation.vue
@@ -12,12 +12,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
-        data() {
-            return {
-                file: null,
-            }
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BField, BIcon, BUpload } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BField,
+        BIcon,
+        BUpload
+    },
+    data() {
+        return {
+            file: null as File | null,
         }
     }
+});
 </script>