refactor(files): Fix Typescript issues in filesListWidth mixin

Use `defineComponent` to properly inherit typings.
Expect TS errors for the `$resizeOberserver` as we attach it directly on the component instance.
`filesListWidth` is now a number which defaults to 0,
making compares like `this.fileListWidth < 768` valid in Typescript.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 9 insertions, 4 deletions

diff --git a/apps/files/src/mixins/filesListWidth.ts b/apps/files/src/mixins/filesListWidth.ts
index 4acccb01fd9..7d7ec598673 100644
--- a/apps/files/src/mixins/filesListWidth.ts
+++ b/apps/files/src/mixins/filesListWidth.ts
@@ -3,26 +3,31 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
-			filesListWidth: null as number | null,
+			filesListWidth: 0,
 		}
 	},
+
 	mounted() {
 		const fileListEl = document.querySelector('#app-content-vue')
-		this.filesListWidth = fileListEl?.clientWidth ?? null
+		this.filesListWidth = fileListEl?.clientWidth ?? 0
 
+		// @ts-expect-error The resize observer is just now attached to the object
 		this.$resizeObserver = new ResizeObserver((entries) => {
 			if (entries.length > 0 && entries[0].target === fileListEl) {
 				this.filesListWidth = entries[0].contentRect.width
 			}
 		})
+		// @ts-expect-error The resize observer was attached right before to the this object
 		this.$resizeObserver.observe(fileListEl as Element)
 	},
+
 	beforeDestroy() {
+		// @ts-expect-error mounted must have been called before the destroy, so the resize
 		this.$resizeObserver.disconnect()
 	},
 })