From 297f0522b2263e7250844deb653549bb68949dce Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Thu, 30 May 2024 18:15:03 +0200 Subject: [PATCH] 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 --- apps/files/src/mixins/filesListWidth.ts | 13 +++++++++---- 1 file 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() }, })