refactor(files): Provide `useFileListWidth` composable

Replace the mixin with a composable, this is better typed and works in
both: Options- and Composition API.
Also added component tests for it.

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

1 files changed, 6 insertions, 8 deletions

diff --git a/apps/files/src/components/FilesListTableHeaderActions.vue b/apps/files/src/components/FilesListTableHeaderActions.vue
index fa5f7d4bd5f..9f5724dc80f 100644
--- a/apps/files/src/components/FilesListTableHeaderActions.vue
+++ b/apps/files/src/components/FilesListTableHeaderActions.vue
@@ -43,10 +43,10 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
+import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
-import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import logger from '../logger.ts'
 
 // The registered actions list
@@ -62,10 +62,6 @@ export default defineComponent({
 		NcLoadingIcon,
 	},
 
-	mixins: [
-		filesListWidthMixin,
-	],
-
 	props: {
 		currentView: {
 			type: Object as PropType<View>,
@@ -81,10 +77,12 @@ export default defineComponent({
 		const actionsMenuStore = useActionsMenuStore()
 		const filesStore = useFilesStore()
 		const selectionStore = useSelectionStore()
+		const fileListWidth = useFileListWidth()
 		const { directory } = useRouteParameters()
 
 		return {
 			directory,
+			fileListWidth,
 
 			actionsMenuStore,
 			filesStore,
@@ -126,13 +124,13 @@ export default defineComponent({
 		},
 
 		inlineActions() {
-			if (this.filesListWidth < 512) {
+			if (this.fileListWidth < 512) {
 				return 0
 			}
-			if (this.filesListWidth < 768) {
+			if (this.fileListWidth < 768) {
 				return 1
 			}
-			if (this.filesListWidth < 1024) {
+			if (this.fileListWidth < 1024) {
 				return 2
 			}
 			return 3