@cloudron/pankow 4.1.9 → 4.1.10

package/components/DirectoryView.vue

@@ -47,7 +47,7 @@
         @contextmenu="onContextMenuBody($event)"
         >
         <template v-if="viewMode === 'list'">
-          <DirectoryViewListItem v-for="item in filteredSortedItems" :ref="(el) => this.elements[item.id] = el"
+          <DirectoryViewListItem v-for="item in filteredSortedItems" :ref="(el) => setItemRef(item.id, el)"
             :key="item.id"
             :fallbackIcon="fallbackIcon"
             :item="item"
@@ -70,7 +70,7 @@
           />
         </template>
         <template v-else-if="viewMode === 'grid'">
-          <DirectoryViewGridItem v-for="item in filteredSortedItems" :ref="(el) => this.elements[item.id] = el"
+          <DirectoryViewGridItem v-for="item in filteredSortedItems" :ref="(el) => setItemRef(item.id, el)"
             :key="item.id"
             :fallbackIcon="fallbackIcon"
             :item="item"
@@ -95,7 +95,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+
+import { ref, reactive, computed, useTemplateRef } from 'vue';
 
 import SingleSelect from './SingleSelect.vue';
 import DirectoryViewListItem from './DirectoryViewListItem.vue';
@@ -106,10 +108,10 @@ import Menu from './Menu.vue';
 import { translation } from '../utils.js';
 
 const SORT_BY = {
-  NAME:  'name',
+  NAME: 'name',
   OWNER: 'owner',
-  STAR:  'star',
-  SIZE:  'size',
+  STAR: 'star',
+  SIZE: 'size',
   MTIME: 'mtime',
 };
 
@@ -120,675 +122,791 @@ const SORT_DIRECTION = {
 
 let rawSelected = [];
 
-export default {
-  name: 'DirectoryView',
-  components: {
-    Dialog,
-    DirectoryViewListItem,
-    DirectoryViewGridItem,
-    SingleSelect,
-    Menu
-  },
-  emits: [ 'selectionChanged', 'item-activated' ],
-  props: {
-    viewMode: {
-      type: String,
-      default: 'list',
-      validator(value) {
-        return ['list', 'grid'].includes(value);
-      }
-    },
-    busy: {
-      type: Boolean,
-      default: false
-    },
-    showOwner: {
-      type: Boolean,
-      default: false
-    },
-    showSize: {
-      type: Boolean,
-      default: false
-    },
-    showStar: {
-      type: Boolean,
-      default: false
-    },
-    showExtract: {
-      type: Boolean,
-      default: true
-    },
-    showNewFile: {
-      type: Boolean,
-      default: true
-    },
-    showNewFolder: {
-      type: Boolean,
-      default: true
-    },
-    showCut: {
-      type: Boolean,
-      default: true
-    },
-    showCopy: {
-      type: Boolean,
-      default: true
-    },
-    showPaste: {
-      type: Boolean,
-      default: true
-    },
-    showRename: {
-      type: Boolean,
-      default: true
-    },
-    showSelectAll: {
-      type: Boolean,
-      default: true
-    },
-    showDownload: {
-      type: Boolean,
-      default: true
+const props = defineProps({
+  viewMode: {
+    type: String,
+    default: 'list',
+    validator(value) {
+      return ['list', 'grid'].includes(value);
     },
-    showDelete: {
-      type: Boolean,
-      default: true
-    },
-    showShare: {
-      type: Boolean,
-      default: false
-    },
-    showModified: {
-      type: Boolean,
-      default: false
-    },
-    shareIndicatorProperty: {
-      // the name of the property for existing share indicator
-      type: String,
-      default: '',
-    },
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    multiDownload: {
-      type: Boolean,
-      default: false
-    },
-    tr: {
-      type: Function,
-      default(id) { console.warn('Missing tr for DirectoryView, using fallback.'); return translation(id); }
+  },
+  busy: {
+    type: Boolean,
+    default: false,
+  },
+  showOwner: {
+    type: Boolean,
+    default: false,
+  },
+  showSize: {
+    type: Boolean,
+    default: false,
+  },
+  showStar: {
+    type: Boolean,
+    default: false,
+  },
+  showExtract: {
+    type: Boolean,
+    default: true,
+  },
+  showNewFile: {
+    type: Boolean,
+    default: true,
+  },
+  showNewFolder: {
+    type: Boolean,
+    default: true,
+  },
+  showCut: {
+    type: Boolean,
+    default: true,
+  },
+  showCopy: {
+    type: Boolean,
+    default: true,
+  },
+  showPaste: {
+    type: Boolean,
+    default: true,
+  },
+  showRename: {
+    type: Boolean,
+    default: true,
+  },
+  showSelectAll: {
+    type: Boolean,
+    default: true,
+  },
+  showDownload: {
+    type: Boolean,
+    default: true,
+  },
+  showDelete: {
+    type: Boolean,
+    default: true,
+  },
+  showShare: {
+    type: Boolean,
+    default: false,
+  },
+  showModified: {
+    type: Boolean,
+    default: false,
+  },
+  shareIndicatorProperty: {
+    type: String,
+    default: '',
+  },
+  editable: {
+    type: Boolean,
+    default: true,
+  },
+  multiDownload: {
+    type: Boolean,
+    default: false,
+  },
+  tr: {
+    type: Function,
+    default(id) {
+      console.warn('Missing tr for DirectoryView, using fallback.');
+      return translation(id);
     },
-    items: {
-      type: Array,
-      validator(value) {
-        function fail(prop, type, item) {
-          console.error(`DirectoryView.items[].${prop} must be a ${type}`, item);
-          return false;
-        }
-
-        for (const item of value) {
-          if (typeof item.id !== 'string') return fail('id', 'string', item);
-          if (typeof item.name !== 'string') return fail('name', 'string', item);
-          if (typeof item.icon !== 'string') return fail('icon', 'string', item);
-          if (typeof item.previewUrl !== 'string') return fail('previewUrl', 'string', item);
-
-          // optional
-          if (item.href && typeof item.href !== 'string') return fail('href', 'string', item);
-          if (item.target && typeof item.target !== 'string') return fail('target', 'string', item);
-          if (item.owner && typeof item.owner !== 'string') return fail('owner', 'string', item);
-          if (item.size && typeof item.size !== 'number') return fail('size', 'number', item);
-          if (item.star && typeof item.star !== 'boolean') return fail('star', 'boolean', item);
-          // if (item.modified && item.modified instanceof Date) return fail('modified', 'Date', item);
-        }
-
-        return true;
+  },
+  items: {
+    type: Array,
+    validator(value) {
+      function fail(prop, type, item) {
+        console.error(`DirectoryView.items[].${prop} must be a ${type}`, item);
+        return false;
       }
+
+      for (const item of value) {
+        if (typeof item.id !== 'string') return fail('id', 'string', item);
+        if (typeof item.name !== 'string') return fail('name', 'string', item);
+        if (typeof item.icon !== 'string') return fail('icon', 'string', item);
+        if (typeof item.previewUrl !== 'string') return fail('previewUrl', 'string', item);
+
+        if (item.href && typeof item.href !== 'string') return fail('href', 'string', item);
+        if (item.target && typeof item.target !== 'string') return fail('target', 'string', item);
+        if (item.owner && typeof item.owner !== 'string') return fail('owner', 'string', item);
+        if (item.size && typeof item.size !== 'number') return fail('size', 'number', item);
+        if (item.star && typeof item.star !== 'boolean') return fail('star', 'boolean', item);
+      }
+
+      return true;
     },
-    ownersModel: {
-      type: Array,
-      default: []
-    },
-    fallbackIcon: String,
-    deleteHandler: {
-      type: Function,
-      default() { console.warn('Missing deleteHandler for DirectoryView'); }
+  },
+  ownersModel: {
+    type: Array,
+    default: () => [],
+  },
+  fallbackIcon: String,
+  showUploadFile: {
+    type: Boolean,
+    default: false,
+  },
+  showUploadFolder: {
+    type: Boolean,
+    default: false,
+  },
+  deleteHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing deleteHandler for DirectoryView');
     },
-    renameHandler: {
-      type: Function,
-      default() { console.warn('Missing renameHandler for DirectoryView'); }
+  },
+  renameHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing renameHandler for DirectoryView');
     },
-    changeOwnerHandler: {
-      type: Function,
-      default() { console.warn('Missing changeOwnerHandler for DirectoryView'); }
+  },
+  changeOwnerHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing changeOwnerHandler for DirectoryView');
     },
-    pasteHandler: {
-      type: Function,
-      default() { console.warn('Missing pasteHandler for DirectoryView'); }
+  },
+  pasteHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing pasteHandler for DirectoryView');
     },
-    newFileHandler: {
-      type: Function,
-      default() { console.warn('Missing newFileHandler for DirectoryView'); }
+  },
+  newFileHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing newFileHandler for DirectoryView');
     },
-    newFolderHandler: {
-      type: Function,
-      default() { console.warn('Missing newFolderHandler for DirectoryView'); }
+  },
+  newFolderHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing newFolderHandler for DirectoryView');
     },
-    uploadFileHandler: {
-      type: Function,
-      default() { console.warn('Missing uploadFileHandler for DirectoryView'); }
+  },
+  uploadFileHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing uploadFileHandler for DirectoryView');
     },
-    uploadFolderHandler: {
-      type: Function,
-      default() { console.warn('Missing uploadFolderHandler for DirectoryView'); }
+  },
+  uploadFolderHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing uploadFolderHandler for DirectoryView');
     },
-    shareHandler: {
-      type: Function,
-      default() { console.warn('Missing shareHandler for DirectoryView'); }
+  },
+  shareHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing shareHandler for DirectoryView');
     },
-    starHandler: {
-      type: Function,
-      default() { console.warn('Missing starHandler for DirectoryView'); }
+  },
+  starHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing starHandler for DirectoryView');
     },
-    dropHandler: {
-      type: Function,
-      default() { console.warn('Missing dropHandler for DirectoryView'); }
+  },
+  dropHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing dropHandler for DirectoryView');
     },
-    downloadHandler: {
-      type: Function,
-      default() { console.warn('Missing downloadHandler for DirectoryView'); }
+  },
+  downloadHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing downloadHandler for DirectoryView');
     },
-    extractHandler: {
-      type: Function,
-      default() { console.warn('Missing extractHandler for DirectoryView'); }
+  },
+  extractHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing extractHandler for DirectoryView');
     },
-    refreshHandler: {
-      type: Function,
-      default: null
-    }
   },
-  computed: {
-    filteredSortedItems() {
-      this.invalidateSelected();
-
-      // first sort by sort column and direction, then make sure folders are always first
-      return this.items.sort((a, b) => {
-        if (a.isDirectory && !b.isDirectory) return -1;
-        if (!a.isDirectory && b.isDirectory) return 1;
-
-        let sort = 0;
-        if (this.sortBy === SORT_BY.NAME) {
-          if (a.name.toLowerCase() < b.name.toLowerCase()) sort = -1;
-          else if (a.name.toLowerCase() > b.name.toLowerCase()) sort = 1;
-        } else if (this.sortBy === SORT_BY.OWNER) {
-          if (a.owner.toLowerCase() < b.owner.toLowerCase()) sort = -1;
-          else if (a.owner.toLowerCase() > b.owner.toLowerCase()) sort = 1;
-        } else if (this.sortBy === SORT_BY.STAR) {
-          if (a.star && !b.star) sort = -1;
-          if (!a.star && b.star) sort = 1;
-        } else if (this.sortBy === SORT_BY.SIZE) {
-          if (a.size < b.size) sort = -1;
-          if (a.size > b.size) sort = 1;
-        } else if (this.sortBy === SORT_BY.MTIME) {
-          if (a.mtime < b.mtime) sort = -1;
-          if (a.mtime > b.mtime) sort = 1;
-        } else {
-          console.error('unknown SORT_BY', this.sortBy);
-        }
-
-        // tie break by id to avoid recursion
-        if (sort === 0) {
-          if (a.id < b.id) sort = -1;
-          else sort = 1;
-        }
-
-        return sort *= (this.sortDirection === SORT_DIRECTION.DESC ? -1 : 1);
-      });
-    }
+  refreshHandler: {
+    type: Function,
+    default: null,
   },
-  data() {
-    return {
-      _alreadyActivating: false,
-      SORT_BY,
-      SORT_DIRECTION,
-      elements: {}, // holds references by item.id
-      focusItem: null,
-      focusItemIndex: -1,
-      selectedCount: 0,
-      dropTargetActive: false,
-      sortBy: SORT_BY.NAME,
-      sortDirection: SORT_DIRECTION.ASC,
-      clipboard: {
-        action: '', // 'copy' or 'cut'
-        files: []
-      },
-      changeOwnerDialog: {
-        busy: false,
-        ownerId: '',
-        items: []
-      },
-      contextMenuBodyModel: [{
-        label: this.tr('filemanager.list.menu.paste'),
-        icon:'fa-regular fa-paste',
-        disabled: () => { return !this.clipboard.files || !this.clipboard.files.length; },
-        action: () => { this.pasteHandler(this.clipboard.action, this.clipboard.files, null); }
-      }, {
-        label: this.tr('filemanager.list.menu.selectAll'),
-        icon:'fa-solid fa-check-double',
-        action: this.onSelectAll
-      }, {
-        separator:true,
-        visible: () => { return typeof this.refreshHandler === 'function'; },
-      }, {
-        label: this.tr('filemanager.toolbar.refresh'),
-        icon:'fa-solid fa-arrow-rotate-right',
-        visible: () => { return typeof this.refreshHandler === 'function'; },
-        action: this.refreshHandler,
-      }, {
-        separator:true,
-        visible: () => { return this.showNewFile || this.showNewFolder; },
-      }, {
-        label: this.tr('filemanager.toolbar.newFile'),
-        icon:'fa-solid fa-file-circle-plus',
-        action: this.newFileHandler,
-        visible: () => { return this.showNewFile; },
-      }, {
-        label: this.tr('filemanager.toolbar.newFolder'),
-        icon:'fa-solid fa-folder-plus',
-        action: this.newFolderHandler,
-        visible: () => { return this.showNewFolder; },
-      }, {
-        separator:true,
-        visible: () => { return this.showUploadFile || this.showUploadFolder; },
-      }, {
-        label: this.tr('filemanager.toolbar.uploadFile'),
-        icon:'fa-solid fa-file-arrow-up',
-        action: this.uploadFileHandler,
-        visible: () => { return this.showUploadFile; },
-      }, {
-        label: this.tr('filemanager.toolbar.uploadFolder'),
-        icon:'fa-regular fa-folder-open',
-        action: this.uploadFolderHandler,
-        visible: () => { return this.showUploadFolder; },
-      }],
-      contextMenuModel: [{
-        label: this.tr('filemanager.list.menu.open'),
-        icon:'fa-regular fa-folder-open',
-        disabled: () => { return this.selectedCount > 1; },
-        action: () => { this.onItemActivated(this.getSelected()[0]); }
-      }, {
-        separator:true,
-        visible: () => { return this.showDownload || this.showShare || this.showCopy || this.showCut || this.showPaste || this.showSelectAll; },
-      }, {
-        label: this.tr('filemanager.list.menu.download'),
-        icon:'fa-solid fa-download',
-        action: this.onItemDownload,
-        visible: () => { return this.showDownload; },
-        disabled: () => { return this.multiDownload ? this.selectedCount === 0 : this.selectedCount !== 1; }
-      }, {
-        label: this.tr('filemanager.list.menu.share'),
-        icon:'fa-solid fa-share-nodes',
-        action: this.onItemShare,
-        disabled: () => { return this.selectedCount > 1; },
-        visible: () => { return this.showShare; },
-      }, {
-        label: this.tr('filemanager.list.menu.copy'),
-        icon:'fa-regular fa-copy',
-        action: this.onItemsCopy,
-        visible: () => { return this.showCopy; },
-      }, {
-        label: this.tr('filemanager.list.menu.cut'),
-        icon:'fa-solid fa-scissors',
-        action: this.onItemsCut,
-        visible: () => { return this.showCut; },
-      }, {
-        label: this.tr('filemanager.list.menu.paste'),
-        icon:'fa-regular fa-paste',
-        visible: () => { return this.showPaste; },
-        disabled: () => { return !(this.focusItem && this.focusItem.isDirectory) || this.selectedCount > 1 || !this.clipboard.files || !this.clipboard.files.length; },
-        action: () => { this.pasteHandler(this.clipboard.action, this.clipboard.files, this.focusItem); }
-      }, {
-        label: this.tr('filemanager.list.menu.selectAll'),
-        icon:'fa-solid fa-check-double',
-        visible: () => { return this.showSelectAll; },
-        action: this.onSelectAll
-      }, {
-        label: this.tr('filemanager.list.menu.rename'),
-        icon:'fa-regular fa-pen-to-square',
-        action: this.onItemRenameBegin,
-        visible: () => { return this.showRename; },
-        disabled: () => { return !this.editable || this.selectedCount > 1; }
-      }, {
-        label: this.tr('filemanager.list.menu.chown'),
-        icon:'fa-solid fa-user-pen',
-        action: this.onItemsChangeOwner,
-        visible: () => { return this.showOwner; },
-      }, {
-        label: this.tr('filemanager.list.menu.extract'),
-        action: this.onItemExtract,
-        visible: () => {
-          if (!this.showExtract) return false;
-
-          const file = this.getSelected()[0];
-          return !(this.selectedCount !== 1 || !(
-            file.name.match(/\.tgz$/)        ||
-            file.name.match(/\.tar$/)        ||
-            file.name.match(/\.7z$/)         ||
-            file.name.match(/\.zip$/)        ||
-            file.name.match(/\.tar\.gz$/)    ||
-            file.name.match(/\.tar\.xz$/)    ||
-            file.name.match(/\.tar\.bz2$/)));
-        }
-      }, {
-        separator:true,
-        visible: () => { return this.showDelete; },
-      }, {
-        label: this.tr('filemanager.list.menu.delete'),
-        icon:'fa-regular fa-trash-can',
-        action: () => { this.deleteHandler(this.getSelected()); },
-        visible: () => { return this.showDelete; },
-      }],
-    };
-  },
-  methods: {
-    highlight(item) {
-      const id = item.id;
-
-      if (!this.elements[id]) return;
-
-      this.elements[id].highlight();
-      this.elements[id].$el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    },
-    highlightByName(name) {
-      const tmp = this.items.find((i) => i.name === name);
-      if (!tmp) return;
+});
+
+const emit = defineEmits(['selectionChanged', 'item-activated']);
+
+const gridBody = useTemplateRef('gridBody');
+const contextMenu = useTemplateRef('contextMenu');
+const contextMenuBody = useTemplateRef('contextMenuBody');
+const chownDialog = useTemplateRef('chownDialog');
+
+const _alreadyActivating = ref(false);
+const elements = reactive({});
+const focusItem = ref(null);
+const focusItemIndex = ref(-1);
+const selectedCount = ref(0);
+const dropTargetActive = ref(false);
+const sortBy = ref(SORT_BY.NAME);
+const sortDirection = ref(SORT_DIRECTION.ASC);
+const clipboard = reactive({
+  action: '',
+  files: [],
+});
+const changeOwnerDialog = reactive({
+  busy: false,
+  ownerId: '',
+  items: [],
+});
+
+function setItemRef(id, el) {
+  if (el) {
+    elements[id] = el;
+  } else {
+    delete elements[id];
+  }
+}
 
-      this.highlight(tmp);
-    },
-    toggleSort(sortBy) {
-      if (this.sortBy === sortBy) this.sortDirection = this.sortDirection === SORT_DIRECTION.ASC ? SORT_DIRECTION.DESC : SORT_DIRECTION.ASC;
-      else this.sortBy = sortBy;
-    },
-    onDrop(targetItem, event) {
-      this.dropTargetActive = false;
+function scrollItemIntoView(componentRef) {
+  componentRef?.$el?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest' });
+}
 
-      const targetItemName = targetItem ? targetItem.name : '';
+function getSelected() {
+  return rawSelected;
+}
 
-      if (event.dataTransfer.getData('application/x-pankow') === 'selected') {
-        // can't drop selected files on same folder
-        if (!targetItemName) return;
+function invalidateSelected() {
+  rawSelected = props.items.filter((item) => item.selected).slice();
+  selectedCount.value = rawSelected.length;
+  emit('selectionChanged', rawSelected);
+}
 
-        this.dropHandler(targetItemName, null, this.getSelected());
-      } else if (event.dataTransfer && event.dataTransfer.items[0]) {
-        // this is dropping files from outside the browser
-        this.dropHandler(targetItemName, event.dataTransfer, null);
-      }
-    },
-    onCanDropHandler(item) {
-      if (!item.isDirectory) return false;
-      return !item.selected;
-    },
-    onDragOver(event) {
-      if (!event.dataTransfer) return;
-
-      if (event.dataTransfer.getData('application/x-pankow') === 'selected') {
-        this.dropTargetActive = false;
-      } else {
-        event.dataTransfer.dropEffect = 'copy';
-        this.dropTargetActive = true;
-      }
-    },
-    onDragExit(event) {
-      this.dropTargetActive = false;
-    },
-    onItemDragStart(event, item) {
-      // auto-select the dragged item if it is not already part of the selection
-      if (item && !item.selected) {
-        this.onSelectAndFocus(item, {}, false);
-      }
+function highlight(item) {
+  const id = item.id;
+  if (!elements[id]) return;
 
-      const dragHandle = document.getElementsByClassName('drag-handle')[0];
+  elements[id].highlight();
+  scrollItemIntoView(elements[id]);
+}
 
-      // clear element
-      dragHandle.replaceChildren();
+function highlightByName(name) {
+  const tmp = props.items.find((i) => i.name === name);
+  if (!tmp) return;
 
-      for (let i = 0; i < Math.min(this.selectedCount, 6); ++i) {
-        const dragHandleItem = document.createElement('div');
-        dragHandleItem.style.opacity = 1-((i*2)/10);
-        const dragHandleItemIcon = document.createElement('img');
-        dragHandleItemIcon.src = rawSelected[i].previewUrl || rawSelected[i].icon
-        dragHandleItem.append(dragHandleItemIcon, rawSelected[i].name);
-        dragHandle.append(dragHandleItem);
-      }
+  highlight(tmp);
+}
 
-      event.dataTransfer.dropEffect = 'move'
-      event.dataTransfer.setData('application/x-pankow', 'selected');
-      event.dataTransfer.setDragImage(dragHandle, 0, 0);
-    },
-    getGridColumns() {
-      const el = this.$refs.gridBody;
-      if (this.viewMode !== 'grid' || !el || !el.children.length) return 1;
-      const firstRowTop = el.children[0].getBoundingClientRect().top;
-      const tolerance = 2;
-      let cols = 0;
-      for (const child of el.children) {
-        if (Math.abs(child.getBoundingClientRect().top - firstRowTop) <= tolerance) cols++;
-        else break;
-      }
-      return cols || 1;
-    },
-    onKeyUp(event) {
-      const step = this.viewMode === 'grid' ? this.getGridColumns() : 1;
-      this.onSelectAndFocusIndex(this.focusItemIndex - step, event.shiftKey);
-    },
-    onKeyDown(event) {
-      const step = this.viewMode === 'grid' ? this.getGridColumns() : 1;
-      this.onSelectAndFocusIndex(this.focusItemIndex + step, event.shiftKey);
-    },
-    onKeyLeft(event) {
-      if (this.viewMode !== 'grid') return;
-      this.onSelectAndFocusIndex(this.focusItemIndex - 1, event.shiftKey);
-    },
-    onKeyRight(event) {
-      if (this.viewMode !== 'grid') return;
-      this.onSelectAndFocusIndex(this.focusItemIndex + 1, event.shiftKey);
-    },
-    onKeyEnter(event) {
-      if (this.focusItem) this.onItemActivated(this.focusItem);
-    },
-    async onKeyDelete(event) {
-      if (event.key !== 'Delete') return; // triggered also by backspace
-      if (!this.focusItem) return;
+function toggleSort(by) {
+  if (sortBy.value === by) {
+    sortDirection.value = sortDirection.value === SORT_DIRECTION.ASC ? SORT_DIRECTION.DESC : SORT_DIRECTION.ASC;
+  } else {
+    sortBy.value = by;
+  }
+}
 
-      await this.deleteHandler(this.getSelected());
-    },
-    onKeyEscape(event) {
-      this.onUnselectAll();
-    },
-    onKeyEvent(event) {
-      if (event.key === 'c' && (event.ctrlKey || event.metaKey)) {
-        this.onItemsCopy();
-        event.preventDefault();
-      } else if (event.key === 'v' && (event.ctrlKey || event.metaKey)) {
-        this.pasteHandler(this.clipboard.action, this.clipboard.files);
-        event.preventDefault();
-      } else if (event.key === 'x' && (event.ctrlKey || event.metaKey)) {
-        this.onItemsCut();
-        event.preventDefault();
-      } else if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
-        this.onSelectAll();
-        event.preventDefault();
-      } else if (event.key === 'End') {
-        if (event.shiftKey) this.onSelectAndFocusToIndex(this.items.length-1);
-        else this.onSelectAndFocusIndex(this.items.length-1, event.shiftKey);
-        event.preventDefault();
-      } else if (event.key === 'Home') {
-        if (event.shiftKey) this.onSelectAndFocusToIndex(0);
-        else this.onSelectAndFocusIndex(0, event.shiftKey);
-        event.preventDefault();
-      } else if (event.key === 'PageUp') {
-        const pageItemCount = parseInt(event.target.clientHeight / 55);
-        if (event.shiftKey) this.onSelectAndFocusToIndex(this.focusItemIndex-pageItemCount);
-        else this.onSelectAndFocusIndex(this.focusItemIndex-pageItemCount, event.shiftKey);
-        event.preventDefault();
-      } else if (event.key === 'PageDown') {
-        const pageItemCount = parseInt(event.target.clientHeight / 55);
-        if (event.shiftKey) this.onSelectAndFocusToIndex(this.focusItemIndex+pageItemCount);
-        else this.onSelectAndFocusIndex(this.focusItemIndex+pageItemCount, event.shiftKey);
-        event.preventDefault();
-      }
-    },
-    onContextMenu(item, event) {
-      this.$refs.contextMenu.open(event);
-      this.onSelectAndFocus(item, event, false);
-      event.stopPropagation();
-    },
-    onContextMenuBody(event) {
-      this.$refs.contextMenuBody.open(event);
-      this.onUnselectAll();
-    },
-    onItemActivated(item) {
-      // prevent concurrent activations for some time
-      if (this._alreadyActivating) return;
-      this._alreadyActivating = true;
-      setTimeout(() => { this._alreadyActivating = false; }, 500);
+function onDrop(targetItem, event) {
+  dropTargetActive.value = false;
 
-      this.$emit('item-activated', item);
-    },
-    onItemsChangeOwner(event) {
-      if (!this.focusItem) return console.warn('onItemsChangeOwner should only be triggered if at least one item is selected');
+  const targetItemName = targetItem ? targetItem.name : '';
 
-      this.changeOwnerDialog.items = this.getSelected();
-      this.changeOwnerDialog.ownerId = this.focusItem.uid;
-      this.$refs.chownDialog.open();
-    },
-    onItemDownload(event) {
-      if (!this.focusItem) return console.warn('onItemDownload should only be triggered if at lesst one item is selected');
+  if (event.dataTransfer.getData('application/x-pankow') === 'selected') {
+    if (!targetItemName) return;
 
-      this.downloadHandler(this.multiDownload ? this.getSelected() : this.focusItem);
-    },
-    onItemExtract(event) {
-      if (this.selectedCount !== 1) return console.warn('onItemExtract should only be triggered if one item is selected');
+    props.dropHandler(targetItemName, null, getSelected());
+  } else if (event.dataTransfer && event.dataTransfer.items[0]) {
+    props.dropHandler(targetItemName, event.dataTransfer, null);
+  }
+}
 
-      this.extractHandler(this.focusItem);
-    },
-    onItemsCopy(event) {
-      if (!this.focusItem) return console.warn('onItemsCopy should only be triggered if at least one item is selected');
+function onCanDropHandler(item) {
+  if (!item.isDirectory) return false;
+  return !item.selected;
+}
 
-      this.clipboard.action = 'copy';
-      this.clipboard.files = this.getSelected();
-    },
-    onItemsCut(event) {
-      if (!this.focusItem) return console.warn('onItemsCut should only be triggered if at least one item is selected');
+function onDragOver(event) {
+  if (!event.dataTransfer) return;
 
-      this.clipboard.action = 'cut';
-      this.clipboard.files = this.getSelected();
-    },
-    onItemShare(event) {
-      if (this.selectedCount !== 1) return console.warn('onItemRenameBegin should only be triggered if one item is selected');
+  if (event.dataTransfer.getData('application/x-pankow') === 'selected') {
+    dropTargetActive.value = false;
+  } else {
+    event.dataTransfer.dropEffect = 'copy';
+    dropTargetActive.value = true;
+  }
+}
 
-      this.shareHandler(this.focusItem);
-    },
-    onItemRenameBegin(event) {
-      if (this.selectedCount !== 1) return console.warn('onItemRenameBegin should only be triggered if one item is selected');
+function onDragExit() {
+  dropTargetActive.value = false;
+}
 
-      this.elements[this.focusItem.id].onRenameBegin();
-    },
-    async onItemRenameSubmit(item, newName) {
-      await this.renameHandler(item, newName);
-    },
-    async onChangeOwnerDialogSubmit(items, newOwnerUid) {
-      this.changeOwnerDialog.busy = true;
-      await this.changeOwnerHandler(items, newOwnerUid);
-      this.changeOwnerDialog.visible = false;
-      this.changeOwnerDialog.items = [];
-      this.changeOwnerDialog.ownerId = this.ownersModel[0].uid;
-      this.changeOwnerDialog.busy = false;
-      this.$refs.chownDialog.close();
-    },
-    getSelected() {
-      return rawSelected;
-    },
-    invalidateSelected() {
-      rawSelected = this.items.filter((item) => item.selected).slice();
-      this.selectedCount = rawSelected.length;
-      this.$emit('selectionChanged', rawSelected);
-    },
-    onSelectAll() {
-      for (const item of this.items) item.selected = true;
-      if (!this.focusItem) this.setFocus(this.focusItemIndex);
+function onItemDragStart(event, item) {
+  if (item && !item.selected) {
+    onSelectAndFocus(item, {}, false);
+  }
 
-      this.invalidateSelected();
-    },
-    onUnselectAll() {
-      for (const item of this.items) item.selected = false;
-      if (this.focusItem) this.focusItem = null;
+  const dragHandle = document.getElementsByClassName('drag-handle')[0];
 
-      this.invalidateSelected();
-    },
-    setFocus(index) {
-      if (this.items[this.focusItemIndex]) this.items[this.focusItemIndex].focused = false;
-      if (this.focusItem) this.focusItem.focused = false;
-      if (!this.items[index]) return;
-
-      this.focusItem = this.items[index];
-      this.focusItem.focused = true;
-      this.focusItemIndex = index;
-    },
-    onSelectAndFocusToIndex(index) {
-      index = (index < 0) ? 0 : (index > this.items.length-1 ? this.items.length-1 : index); // keep in bounds
+  dragHandle.replaceChildren();
 
-      this.setFocus(index);
+  for (let i = 0; i < Math.min(selectedCount.value, 6); ++i) {
+    const dragHandleItem = document.createElement('div');
+    dragHandleItem.style.opacity = 1 - ((i * 2) / 10);
+    const dragHandleItemIcon = document.createElement('img');
+    dragHandleItemIcon.src = rawSelected[i].previewUrl || rawSelected[i].icon;
+    dragHandleItem.append(dragHandleItemIcon, rawSelected[i].name);
+    dragHandle.append(dragHandleItem);
+  }
 
-      const item = this.items[index];
-      const itemIndex = this.items.findIndex(i => i.id === item.id);
-      const firstSelectedIndex = this.items.findIndex(item => item.selected);
-      const lastSelectedIndex = this.items.findLastIndex(item => item.selected);
+  event.dataTransfer.dropEffect = 'move';
+  event.dataTransfer.setData('application/x-pankow', 'selected');
+  event.dataTransfer.setDragImage(dragHandle, 0, 0);
+}
 
-      if (index < firstSelectedIndex) for (let i = index; i < firstSelectedIndex; ++i) this.items[i].selected = true;
-      else if (index > lastSelectedIndex) for (let i = lastSelectedIndex; i <= index; ++i) this.items[i].selected = true;
+function getGridColumns() {
+  const el = gridBody.value;
+  if (props.viewMode !== 'grid' || !el || !el.children.length) return 1;
+  const firstRowTop = el.children[0].getBoundingClientRect().top;
+  const tolerance = 2;
+  let cols = 0;
+  for (const child of el.children) {
+    if (Math.abs(child.getBoundingClientRect().top - firstRowTop) <= tolerance) cols++;
+    else break;
+  }
+  return cols || 1;
+}
 
-      if (this.elements[item.id]) this.elements[item.id].$el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+function onKeyUp(event) {
+  const step = props.viewMode === 'grid' ? getGridColumns() : 1;
+  onSelectAndFocusIndex(focusItemIndex.value - step, event.shiftKey);
+}
 
-      this.invalidateSelected();
-    },
-    onSelectAndFocusIndex(index, keepSelected = false) {
-      index = (index < 0) ? 0 : (index > this.items.length-1 ? this.items.length-1 : index); // keep in bounds
+function onKeyDown(event) {
+  const step = props.viewMode === 'grid' ? getGridColumns() : 1;
+  onSelectAndFocusIndex(focusItemIndex.value + step, event.shiftKey);
+}
+
+function onKeyLeft(event) {
+  if (props.viewMode !== 'grid') return;
+  onSelectAndFocusIndex(focusItemIndex.value - 1, event.shiftKey);
+}
+
+function onKeyRight(event) {
+  if (props.viewMode !== 'grid') return;
+  onSelectAndFocusIndex(focusItemIndex.value + 1, event.shiftKey);
+}
+
+function onKeyEnter() {
+  if (focusItem.value) onItemActivated(focusItem.value);
+}
+
+async function onKeyDelete(event) {
+  if (event.key !== 'Delete') return;
+  if (!focusItem.value) return;
+
+  await props.deleteHandler(getSelected());
+}
+
+function onKeyEscape() {
+  onUnselectAll();
+}
+
+function onKeyEvent(event) {
+  if (event.key === 'c' && (event.ctrlKey || event.metaKey)) {
+    onItemsCopy();
+    event.preventDefault();
+  } else if (event.key === 'v' && (event.ctrlKey || event.metaKey)) {
+    props.pasteHandler(clipboard.action, clipboard.files);
+    event.preventDefault();
+  } else if (event.key === 'x' && (event.ctrlKey || event.metaKey)) {
+    onItemsCut();
+    event.preventDefault();
+  } else if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+    onSelectAll();
+    event.preventDefault();
+  } else if (event.key === 'End') {
+    if (event.shiftKey) onSelectAndFocusToIndex(props.items.length - 1);
+    else onSelectAndFocusIndex(props.items.length - 1, event.shiftKey);
+    event.preventDefault();
+  } else if (event.key === 'Home') {
+    if (event.shiftKey) onSelectAndFocusToIndex(0);
+    else onSelectAndFocusIndex(0, event.shiftKey);
+    event.preventDefault();
+  } else if (event.key === 'PageUp') {
+    const pageItemCount = parseInt(event.target.clientHeight / 55, 10);
+    if (event.shiftKey) onSelectAndFocusToIndex(focusItemIndex.value - pageItemCount);
+    else onSelectAndFocusIndex(focusItemIndex.value - pageItemCount, event.shiftKey);
+    event.preventDefault();
+  } else if (event.key === 'PageDown') {
+    const pageItemCount = parseInt(event.target.clientHeight / 55, 10);
+    if (event.shiftKey) onSelectAndFocusToIndex(focusItemIndex.value + pageItemCount);
+    else onSelectAndFocusIndex(focusItemIndex.value + pageItemCount, event.shiftKey);
+    event.preventDefault();
+  }
+}
+
+function onContextMenu(item, event) {
+  contextMenu.value?.open(event);
+  onSelectAndFocus(item, event, false);
+  event.stopPropagation();
+}
+
+function onContextMenuBody(event) {
+  contextMenuBody.value?.open(event);
+  onUnselectAll();
+}
+
+function onItemActivated(item) {
+  if (_alreadyActivating.value) return;
+  _alreadyActivating.value = true;
+  setTimeout(() => {
+    _alreadyActivating.value = false;
+  }, 500);
+
+  emit('item-activated', item);
+}
+
+function onItemsChangeOwner() {
+  if (!focusItem.value) return console.warn('onItemsChangeOwner should only be triggered if at least one item is selected');
+
+  changeOwnerDialog.items = getSelected();
+  changeOwnerDialog.ownerId = focusItem.value.uid;
+  chownDialog.value?.open();
+}
+
+function onItemDownload() {
+  if (!focusItem.value) return console.warn('onItemDownload should only be triggered if at lesst one item is selected');
+
+  props.downloadHandler(props.multiDownload ? getSelected() : focusItem.value);
+}
+
+function onItemExtract() {
+  if (selectedCount.value !== 1) return console.warn('onItemExtract should only be triggered if one item is selected');
+
+  props.extractHandler(focusItem.value);
+}
+
+function onItemsCopy() {
+  if (!focusItem.value) return console.warn('onItemsCopy should only be triggered if at least one item is selected');
+
+  clipboard.action = 'copy';
+  clipboard.files = getSelected();
+}
+
+function onItemsCut() {
+  if (!focusItem.value) return console.warn('onItemsCut should only be triggered if at least one item is selected');
+
+  clipboard.action = 'cut';
+  clipboard.files = getSelected();
+}
+
+function onItemShare() {
+  if (selectedCount.value !== 1) return console.warn('onItemRenameBegin should only be triggered if one item is selected');
+
+  props.shareHandler(focusItem.value);
+}
+
+function onItemRenameBegin() {
+  if (selectedCount.value !== 1) return console.warn('onItemRenameBegin should only be triggered if one item is selected');
+
+  elements[focusItem.value.id]?.onRenameBegin();
+}
+
+async function onChangeOwnerDialogSubmit(items, newOwnerUid) {
+  changeOwnerDialog.busy = true;
+  await props.changeOwnerHandler(items, newOwnerUid);
+  changeOwnerDialog.visible = false;
+  changeOwnerDialog.items = [];
+  changeOwnerDialog.ownerId = props.ownersModel[0].uid;
+  changeOwnerDialog.busy = false;
+  chownDialog.value?.close();
+}
+
+function onSelectAll() {
+  for (const item of props.items) item.selected = true;
+  if (!focusItem.value) setFocus(focusItemIndex.value);
+
+  invalidateSelected();
+}
 
-      const item = this.items[index];
+function onUnselectAll() {
+  for (const item of props.items) item.selected = false;
+  if (focusItem.value) focusItem.value = null;
 
-      this.onSelectAndFocus(item, {}, keepSelected);
+  invalidateSelected();
+}
+
+function setFocus(index) {
+  if (props.items[focusItemIndex.value]) props.items[focusItemIndex.value].focused = false;
+  if (focusItem.value) focusItem.value.focused = false;
+  if (!props.items[index]) return;
+
+  focusItem.value = props.items[index];
+  focusItem.value.focused = true;
+  focusItemIndex.value = index;
+}
+
+function onSelectAndFocusToIndex(index) {
+  index = index < 0 ? 0 : index > props.items.length - 1 ? props.items.length - 1 : index;
+
+  setFocus(index);
+
+  const item = props.items[index];
+  const firstSelectedIndex = props.items.findIndex((i) => i.selected);
+  const lastSelectedIndex = props.items.findLastIndex((i) => i.selected);
+
+  if (index < firstSelectedIndex) for (let i = index; i < firstSelectedIndex; ++i) props.items[i].selected = true;
+  else if (index > lastSelectedIndex) for (let i = lastSelectedIndex; i <= index; ++i) props.items[i].selected = true;
+
+  scrollItemIntoView(elements[item.id]);
+
+  invalidateSelected();
+}
+
+function onSelectAndFocusIndex(index, keepSelected = false) {
+  index = index < 0 ? 0 : index > props.items.length - 1 ? props.items.length - 1 : index;
+
+  const item = props.items[index];
+
+  onSelectAndFocus(item, {}, keepSelected);
+}
+
+function onSelectAndFocus(item, event, keepSelected = false) {
+  const itemIndex = props.items.findIndex((i) => i.id === item.id);
+  setFocus(itemIndex);
+
+  if (event.button === 2 && item.selected) keepSelected = true;
+
+  if (event.ctrlKey) {
+    if (keepSelected) item.selected = true;
+    else item.selected = !item.selected;
+  } else if (event.shiftKey) {
+    const firstSelectedIndex = props.items.findIndex((i) => i.selected);
+    const lastSelectedIndex = props.items.findLastIndex((i) => i.selected);
+
+    if (itemIndex < firstSelectedIndex) for (let i = itemIndex; i < firstSelectedIndex; ++i) props.items[i].selected = true;
+    else if (itemIndex > lastSelectedIndex) for (let i = lastSelectedIndex; i <= itemIndex; ++i) props.items[i].selected = true;
+  } else {
+    if (!keepSelected) for (const it of props.items) it.selected = false;
+    item.selected = true;
+  }
+
+  scrollItemIntoView(elements[item.id]);
+
+  invalidateSelected();
+}
+
+const contextMenuBodyModel = [
+  {
+    label: props.tr('filemanager.list.menu.paste'),
+    icon: 'fa-regular fa-paste',
+    disabled: () => !clipboard.files || !clipboard.files.length,
+    action: () => {
+      props.pasteHandler(clipboard.action, clipboard.files, null);
     },
-    onSelectAndFocus(item, event, keepSelected = false) {
-      const itemIndex = this.items.findIndex(i => i.id === item.id);
-      this.setFocus(itemIndex);
-
-      // do not toggle selection if this is from right click
-      if (event.button === 2 && item.selected) keepSelected = true;
-
-      if (event.ctrlKey) {
-        if (keepSelected) item.selected = true;
-        else item.selected = !item.selected;
-      } else if (event.shiftKey) {
-        const firstSelectedIndex = this.items.findIndex(item => item.selected);
-        const lastSelectedIndex = this.items.findLastIndex(item => item.selected);
-
-        if (itemIndex < firstSelectedIndex) for (let i = itemIndex; i < firstSelectedIndex; ++i) this.items[i].selected = true;
-        else if (itemIndex > lastSelectedIndex) for (let i = lastSelectedIndex; i <= itemIndex; ++i) this.items[i].selected = true;
-      } else {
-        if (!keepSelected) for (const item of this.items) item.selected = false;
-        item.selected = true;
-      }
+  },
+  {
+    label: props.tr('filemanager.list.menu.selectAll'),
+    icon: 'fa-solid fa-check-double',
+    action: onSelectAll,
+  },
+  {
+    separator: true,
+    visible: () => typeof props.refreshHandler === 'function',
+  },
+  {
+    label: props.tr('filemanager.toolbar.refresh'),
+    icon: 'fa-solid fa-arrow-rotate-right',
+    visible: () => typeof props.refreshHandler === 'function',
+    action: props.refreshHandler,
+  },
+  {
+    separator: true,
+    visible: () => props.showNewFile || props.showNewFolder,
+  },
+  {
+    label: props.tr('filemanager.toolbar.newFile'),
+    icon: 'fa-solid fa-file-circle-plus',
+    action: props.newFileHandler,
+    visible: () => props.showNewFile,
+  },
+  {
+    label: props.tr('filemanager.toolbar.newFolder'),
+    icon: 'fa-solid fa-folder-plus',
+    action: props.newFolderHandler,
+    visible: () => props.showNewFolder,
+  },
+  {
+    separator: true,
+    visible: () => props.showUploadFile || props.showUploadFolder,
+  },
+  {
+    label: props.tr('filemanager.toolbar.uploadFile'),
+    icon: 'fa-solid fa-file-arrow-up',
+    action: props.uploadFileHandler,
+    visible: () => props.showUploadFile,
+  },
+  {
+    label: props.tr('filemanager.toolbar.uploadFolder'),
+    icon: 'fa-regular fa-folder-open',
+    action: props.uploadFolderHandler,
+    visible: () => props.showUploadFolder,
+  },
+];
 
-      if (this.elements[item.id]) this.elements[item.id].$el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+const contextMenuModel = [
+  {
+    label: props.tr('filemanager.list.menu.open'),
+    icon: 'fa-regular fa-folder-open',
+    disabled: () => selectedCount.value > 1,
+    action: () => {
+      onItemActivated(getSelected()[0]);
+    },
+  },
+  {
+    separator: true,
+    visible: () =>
+      props.showDownload ||
+      props.showShare ||
+      props.showCopy ||
+      props.showCut ||
+      props.showPaste ||
+      props.showSelectAll,
+  },
+  {
+    label: props.tr('filemanager.list.menu.download'),
+    icon: 'fa-solid fa-download',
+    action: onItemDownload,
+    visible: () => props.showDownload,
+    disabled: () => (props.multiDownload ? selectedCount.value === 0 : selectedCount.value !== 1),
+  },
+  {
+    label: props.tr('filemanager.list.menu.share'),
+    icon: 'fa-solid fa-share-nodes',
+    action: onItemShare,
+    disabled: () => selectedCount.value > 1,
+    visible: () => props.showShare,
+  },
+  {
+    label: props.tr('filemanager.list.menu.copy'),
+    icon: 'fa-regular fa-copy',
+    action: onItemsCopy,
+    visible: () => props.showCopy,
+  },
+  {
+    label: props.tr('filemanager.list.menu.cut'),
+    icon: 'fa-solid fa-scissors',
+    action: onItemsCut,
+    visible: () => props.showCut,
+  },
+  {
+    label: props.tr('filemanager.list.menu.paste'),
+    icon: 'fa-regular fa-paste',
+    visible: () => props.showPaste,
+    disabled: () =>
+      !(focusItem.value && focusItem.value.isDirectory) ||
+      selectedCount.value > 1 ||
+      !clipboard.files ||
+      !clipboard.files.length,
+    action: () => {
+      props.pasteHandler(clipboard.action, clipboard.files, focusItem.value);
+    },
+  },
+  {
+    label: props.tr('filemanager.list.menu.selectAll'),
+    icon: 'fa-solid fa-check-double',
+    visible: () => props.showSelectAll,
+    action: onSelectAll,
+  },
+  {
+    label: props.tr('filemanager.list.menu.rename'),
+    icon: 'fa-regular fa-pen-to-square',
+    action: onItemRenameBegin,
+    visible: () => props.showRename,
+    disabled: () => !props.editable || selectedCount.value > 1,
+  },
+  {
+    label: props.tr('filemanager.list.menu.chown'),
+    icon: 'fa-solid fa-user-pen',
+    action: onItemsChangeOwner,
+    visible: () => props.showOwner,
+  },
+  {
+    label: props.tr('filemanager.list.menu.extract'),
+    action: onItemExtract,
+    visible: () => {
+      if (!props.showExtract) return false;
+
+      const file = getSelected()[0];
+      return !(
+        selectedCount.value !== 1 ||
+        !file ||
+        !(
+          file.name.match(/\.tgz$/) ||
+          file.name.match(/\.tar$/) ||
+          file.name.match(/\.7z$/) ||
+          file.name.match(/\.zip$/) ||
+          file.name.match(/\.tar\.gz$/) ||
+          file.name.match(/\.tar\.xz$/) ||
+          file.name.match(/\.tar\.bz2$/)
+        )
+      );
+    },
+  },
+  {
+    separator: true,
+    visible: () => props.showDelete,
+  },
+  {
+    label: props.tr('filemanager.list.menu.delete'),
+    icon: 'fa-regular fa-trash-can',
+    action: () => {
+      props.deleteHandler(getSelected());
+    },
+    visible: () => props.showDelete,
+  },
+];
+
+const filteredSortedItems = computed(() => {
+  invalidateSelected();
+
+  return props.items.sort((a, b) => {
+    if (a.isDirectory && !b.isDirectory) return -1;
+    if (!a.isDirectory && b.isDirectory) return 1;
+
+    let sort = 0;
+    if (sortBy.value === SORT_BY.NAME) {
+      if (a.name.toLowerCase() < b.name.toLowerCase()) sort = -1;
+      else if (a.name.toLowerCase() > b.name.toLowerCase()) sort = 1;
+    } else if (sortBy.value === SORT_BY.OWNER) {
+      if (a.owner.toLowerCase() < b.owner.toLowerCase()) sort = -1;
+      else if (a.owner.toLowerCase() > b.owner.toLowerCase()) sort = 1;
+    } else if (sortBy.value === SORT_BY.STAR) {
+      if (a.star && !b.star) sort = -1;
+      if (!a.star && b.star) sort = 1;
+    } else if (sortBy.value === SORT_BY.SIZE) {
+      if (a.size < b.size) sort = -1;
+      if (a.size > b.size) sort = 1;
+    } else if (sortBy.value === SORT_BY.MTIME) {
+      if (a.mtime < b.mtime) sort = -1;
+      if (a.mtime > b.mtime) sort = 1;
+    } else {
+      console.error('unknown SORT_BY', sortBy.value);
+    }
 
-      this.invalidateSelected();
+    if (sort === 0) {
+      if (a.id < b.id) sort = -1;
+      else sort = 1;
     }
-  }
-};
 
-</script>
+    return (sort *= sortDirection.value === SORT_DIRECTION.DESC ? -1 : 1);
+  });
+});
+
+defineExpose({
+  highlight,
+  highlightByName,
+});
 
+</script>
 <style scoped>
 
 .directory-view {