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>

2 files changed, 7 insertions, 8 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index 8c150b78087..f8fde7842a8 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -94,6 +94,7 @@ import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
 import CustomElementRender from '../CustomElementRender.vue'
 
 import { useNavigation } from '../../composables/useNavigation'
+import { useFileListWidth } from '../../composables/useFileListWidth.ts'
 import logger from '../../logger.ts'
 
 export default defineComponent({
@@ -110,10 +111,6 @@ export default defineComponent({
 	},
 
 	props: {
-		filesListWidth: {
-			type: Number,
-			required: true,
-		},
 		loading: {
 			type: String,
 			required: true,
@@ -135,11 +132,14 @@ export default defineComponent({
 	setup() {
 		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
 		const { currentView } = useNavigation(true)
+
+		const filesListWidth = useFileListWidth()
 		const enabledFileActions = inject<FileAction[]>('enabledFileActions', [])
 
 		return {
 			currentView,
 			enabledFileActions,
+			filesListWidth,
 		}
 	},
 
diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index e4cffba32b7..1eff841738b 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -48,6 +48,7 @@ import { defineComponent, inject } from 'vue'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { useNavigation } from '../../composables/useNavigation'
+import { useFileListWidth } from '../../composables/useFileListWidth.ts'
 import { useRouteParameters } from '../../composables/useRouteParameters.ts'
 import { useRenamingStore } from '../../store/renaming.ts'
 import { getFilenameValidity } from '../../utils/filenameValidity.ts'
@@ -75,10 +76,6 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
-		filesListWidth: {
-			type: Number,
-			required: true,
-		},
 		nodes: {
 			type: Array as PropType<Node[]>,
 			required: true,
@@ -97,6 +94,7 @@ export default defineComponent({
 		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
 		const { currentView } = useNavigation(true)
 		const { directory } = useRouteParameters()
+		const filesListWidth = useFileListWidth()
 		const renamingStore = useRenamingStore()
 
 		const defaultFileAction = inject<FileAction | undefined>('defaultFileAction')
@@ -105,6 +103,7 @@ export default defineComponent({
 			currentView,
 			defaultFileAction,
 			directory,
+			filesListWidth,
 
 			renamingStore,
 		}