chore(deps): cleanup unused deps and audit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/files/src/actions/deleteAction.ts

@@ -0,0 +1,49 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import { registerFileAction, Permission, FileAction } from '@nextcloud/files'
+import { translate as t } from '@nextcloud/l10n'
+import axios from '@nextcloud/axios'
+import TrashCan from '@mdi/svg/svg/trash-can.svg?raw'
+
+registerFileAction(new FileAction({
+	id: 'delete',
+	displayName(nodes, view) {
+		return view.id === 'trashbin'
+			? t('files_trashbin', 'Delete permanently')
+			: t('files', 'Delete')
+	},
+	iconSvgInline: () => TrashCan,
+	enabled(nodes) {
+		return nodes.length > 0 && nodes
+			.map(node => node.permissions)
+			.every(permission => (permission & Permission.DELETE) !== 0)
+	},
+	async exec(node) {
+		try {
+			await axios.delete(node.source)
+			return true
+		} catch (error) {
+			console.error(error)
+			return false
+		}
+	},
+}))

apps/files/src/components/CustomElementRender.vue

@@ -0,0 +1,39 @@
+<!--
+  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  -
+  - @author Gary Kim <gary@garykim.dev>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+	<div />
+</template>
+
+<script>
+export default {
+	name: 'CustomElementRender',
+	props: {
+		element: {
+			type: HTMLElement,
+			required: true,
+		},
+	},
+	mounted() {
+		this.$el.replaceWith(this.element)
+	},
+}
+</script>

apps/files/src/components/FileEntry.vue

@@ -20,24 +20,25 @@
   -
   -->
 <script lang='ts'>
+import { debounce } from 'debounce'
 import { Folder, File } from '@nextcloud/files'
 import { Fragment } from 'vue-fragment'
 import { join } from 'path'
+import { loadState } from '@nextcloud/initial-state'
 import { translate } from '@nextcloud/l10n'
 import FileIcon from 'vue-material-design-icons/File.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import TrashCan from 'vue-material-design-icons/TrashCan.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import TrashCan from 'vue-material-design-icons/TrashCan.vue'
 import Vue from 'vue'
 
-import logger from '../logger.js'
-import { useSelectionStore } from '../store/selection'
 import { useFilesStore } from '../store/files'
-import { loadState } from '@nextcloud/initial-state'
-import { debounce } from 'debounce'
+import { useSelectionStore } from '../store/selection'
+import CustomElementRender from './CustomElementRender.vue'
+import logger from '../logger.js'
 
 // TODO: move to store
 // TODO: watch 'files:config:updated' event
@@ -50,6 +51,7 @@ export default Vue.extend({
 	name: 'FileEntry',
 
 	components: {
+		CustomElementRender,
 		FileIcon,
 		FolderIcon,
 		Fragment,
@@ -322,22 +324,19 @@ export default Vue.extend({
 
 		// Columns
 		const columns = this.columns.map(column => {
-			const td = document.createElement('td')
-			column.render(td, this.source)
 			return createElement('td', {
 				class: {
 					[`files-list__row-${this.currentView?.id}-${column.id}`]: true,
 					'files-list__row-column--custom': true,
 				},
 				key: column.id,
-				domProps: {
-					innerHTML: td.innerHTML,
+			}, [createElement('CustomElementRender', {
+				props: {
+					element: column.render(this.source),
 				},
-			}, '123')
+			})])
 		})
 
-		console.debug(columns, this.displayName)
-
 		return createElement('Fragment', [
 			checkbox,
 			icon,

apps/files/src/components/FilesListVirtual.vue

@@ -20,27 +20,7 @@
   -
   -->
 <template>
-	<VirtualList v-if="false"
-		class="files-list"
-		:data-component="FileEntry"
-		:data-key="getFileId"
-		:data-sources="nodes"
-		:estimate-size="55"
-		:table-mode="true"
-		item-class="files-list__row"
-		wrap-class="files-list__body">
-		<template #before>
-			<caption v-show="false" class="files-list__caption">
-				{{ summary }}
-			</caption>
-		</template>
-
-		<template #header>
-			<FilesListHeader :nodes="nodes" />
-		</template>
-	</VirtualList>
-
-	<RecycleScroller v-else ref="recycleScroller"
+	<RecycleScroller ref="recycleScroller"
 		class="files-list"
 		key-field="source"
 		:items="nodes"
@@ -70,7 +50,6 @@
 <script lang="ts">
 import { Folder, File } from '@nextcloud/files'
 import { RecycleScroller } from 'vue-virtual-scroller'
-import VirtualList from 'vue-virtual-scroll-list'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Vue from 'vue'
 
@@ -84,7 +63,6 @@ export default Vue.extend({
 		RecycleScroller,
 		FileEntry,
 		FilesListHeader,
-		VirtualList,
 	},
 
 	props: {

apps/files/src/main.js

@@ -1,5 +1,7 @@
 import './templates.js'
 import './legacy/filelistSearch.js'
+import './actions/deleteAction'
+
 import processLegacyFilesViews from './legacy/navigationMapper.js'
 
 import Vue from 'vue'
@@ -16,6 +18,7 @@ import SettingsModel from './models/Setting.js'
 
 import router from './router/router.js'
 
+
 // Init private and public Files namespace
 window.OCA.Files = window.OCA.Files ?? {}
 window.OCP.Files = window.OCP.Files ?? {}

apps/files/src/services/Navigation.ts

@@ -35,8 +35,8 @@ export interface Column {
 	id: string
 	/** Translated column title */
 	title: string
-	/** The content of the cell to render */
-	render: (mount: HTMLTableCellElement, node: Node) => void
+	/** The content of the cell. The element will be appended within */
+	render: (node: Node) => HTMLElement
 	/** Function used to sort Nodes between them */
 	sort?: (nodeA: Node, nodeB: Node) => number
 	/** Custom summary of the column to display at the end of the list.

package.json

@@ -106,7 +106,6 @@
     "vue-material-design-icons": "^5.0.0",
     "vue-multiselect": "^2.1.6",
     "vue-router": "^3.6.5",
-    "vue-virtual-scroll-list": "github:skjnldsv/vue-virtual-scroll-list#feat/table",
     "vue-virtual-scroller": "^1.1.2",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",