TypeScript Rollout Tier 8 - Upload (#369)

* 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 <[email protected]>
ntohq · Jan 11, 2025 · 1cf0d7f · 1cf0d7f
1 parent 6e553fe
commit 1cf0d7f
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 83 deletions.
diff --git 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/...next/src/components/upload/Upload.spec.js → ...next/src/components/upload/Upload.spec.ts b/...next/src/components/upload/Upload.spec.js → ...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
@@ -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
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
@@ -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/...buefy-next/src/components/upload/index.js → ...buefy-next/src/components/upload/index.ts b/...buefy-next/src/components/upload/index.js → ...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
@@ -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
@@ -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/...src/pages/components/upload/api/upload.js → ...src/pages/components/upload/api/upload.ts b/...src/pages/components/upload/api/upload.js → ...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
Original file line number	Diff line number	Diff line change
		@@ -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>"`;