@cloudron/pankow 4.1.9 → 4.1.10

package/components/DirectoryViewListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row-wrapper"
+  <div ref="rowWrapper" class="row-wrapper"
     :draggable="!rename"
     @mouseup="onSelect($event)"
     @drop="onDrop($event)"
@@ -16,11 +16,15 @@
         <i v-show="shareIndicatorProperty !== '' && !!item[shareIndicatorProperty]" class="fa-solid fa-share-nodes is-shared"></i>
       </div>
 
-      <div v-if="visible && !rename" class="col label">
+      <!-- this is just a placeholder label to allow the native browser search to work -->
+      <div v-if="!visible">
+        {{ item.name }}
+      </div>
+      <div v-else-if="visible && !rename" class="col label">
         <a v-show="item.href" class="open-action" @dblclick.stop @click="onOpen($event)" :href="item.href">{{ item.name }} {{ item.target ? `-> ${item.target}` : '' }}</a>
         <span v-show="!item.href">{{ item.name }} {{ item.target ? `→ ${item.target}` : '' }}</span>
       </div>
-      <div v-if="visible && rename" class="col label rename">
+      <div v-else-if="visible && rename" ref="renameCell" class="col label rename">
         <TextInput
           ref="renameInput"
           v-model="newName"
@@ -46,188 +50,203 @@
   </div>
 </template>
 
-<script>
+<script setup>
+
+import { ref, onMounted } from 'vue';
 
 import { prettyDate, prettyFileSize } from '../utils.js';
 
 import Icon from './Icon.vue';
-import Menu from './Menu.vue';
 import TextInput from './TextInput.vue';
 
-export default {
-  name: 'DirectoryViewListItem',
-  emits: [ 'activated', 'action-menu' ],
-  components: {
-    Icon,
-    Menu,
-    TextInput
+const props = defineProps({
+  item: Object,
+  showOwner: {
+    type: Boolean,
+    default: false,
   },
-  props: {
-    item: Object,
-    showOwner: {
-      type: Boolean,
-      default: false
-    },
-    showSize: {
-      type: Boolean,
-      default: false
-    },
-    showStar: {
-      type: Boolean,
-      default: false
-    },
-    showModified: {
-      type: Boolean,
-      default: false
-    },
-    shareIndicatorProperty: {
-      type: String,
-      default: '',
-    },
-    fallbackIcon: String,
-    renameHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing renameHandler for DirectoryViewItem');
-      }
-    },
-    starHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing starHandler for DirectoryViewItem');
-      }
-    },
-    selectHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing selectHandler for DirectoryViewItem');
-      }
-    },
-    dropHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing dropHandler for DirectoryViewItem');
-      }
-    },
-    canDropHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing canDropHandler for DirectoryViewItem');
-      }
-    }
+  showSize: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      visible: false,
-      rename: false,
-      renameBusy: false,
-      newName: '',
-      dropTargetActive: false,
-      previewRetries: 0
-    };
+  showStar: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    prettyFileSize,
-    prettyDate,
-    highlight() {
-      this.$el.classList.add('pankow-directory-view-highlight-animation');
-      setTimeout(() => { this.$el.classList.remove('pankow-directory-view-highlight-animation'); }, 4000);
+  showModified: {
+    type: Boolean,
+    default: false,
+  },
+  shareIndicatorProperty: {
+    type: String,
+    default: '',
+  },
+  fallbackIcon: String,
+  renameHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing renameHandler for DirectoryViewItem');
     },
-    onToggleStar() {
-      this.starHandler(this.item);
+  },
+  starHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing starHandler for DirectoryViewItem');
     },
-    onActionMenu(event) {
-      this.onSelect(event, true);
-      this.$emit('action-menu', this.item, event);
+  },
+  selectHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing selectHandler for DirectoryViewItem');
     },
-    onRenameBegin() {
-      this.rename = true;
-      this.newName = this.item.name;
-
-      // wait one eventloop for input to be there
-      setTimeout(() => {
-        const elem = this.$refs.renameInput.$el;
-        elem.focus();
-
-        // select name without extension
-        if (typeof elem.selectionStart !== 'undefined') {
-            elem.selectionStart = 0;
-            elem.selectionEnd = this.item.name.lastIndexOf('.');
-        }
-      }, 0);
+  },
+  dropHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing dropHandler for DirectoryViewItem');
     },
-    onRenameEnd() {
-      this.rename = false;
-      this.renameBusy = false;
-      this.newName = '';
+  },
+  canDropHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing canDropHandler for DirectoryViewItem');
     },
-    async onRenameSubmit() {
-      if (!this.newName) return;
+  },
+});
 
-      this.renameBusy = true;
-      await this.renameHandler(this.item, this.newName);
-      this.onRenameEnd();
-    },
-    onOpen(event) {
-      // if we have a composed click use default handler to open new tab
-      if (event.ctrlKey || event.metaKey) return;
+const emit = defineEmits(['activated', 'action-menu']);
 
-      event.preventDefault();
-      event.stopPropagation();
+const rowWrapper = ref(null);
+const renameCell = ref(null);
 
-      this.$emit('activated', this.item);
-    },
-    onSelect(event, actionMenu = false) {
-      if ((event.button === 2 || actionMenu) && event.ctrlKey) {
-        this.selectHandler(this.item, event, true);
-      } else {
-        this.selectHandler(this.item, event);
-      }
-    },
-    onDrop(event) {
-      if (!this.canDropHandler(this.item)) return;
+const visible = ref(false);
+const rename = ref(false);
+const renameBusy = ref(false);
+const newName = ref('');
+const dropTargetActive = ref(false);
+const previewRetries = ref(0);
 
-      event.stopPropagation();
+function highlight() {
+  rowWrapper.value?.classList.add('pankow-directory-view-highlight-animation');
+  setTimeout(() => {
+    rowWrapper.value?.classList.remove('pankow-directory-view-highlight-animation');
+  }, 4000);
+}
 
-      this.dropHandler(this.item, event);
-      this.dropTargetActive = false;
-    },
-    onDragOver(event) {
-      if (!this.canDropHandler(this.item)) return;
+function onToggleStar() {
+  props.starHandler(props.item);
+}
 
-      event.preventDefault();
-      event.stopPropagation();
+function onActionMenu(event) {
+  onSelect(event, true);
+  emit('action-menu', props.item, event);
+}
 
-      event.dataTransfer.dropEffect = 'move';
-      this.dropTargetActive = true;
-    },
-    onDragExit(event) {
-      if (!this.item.isDirectory) return;
+function onRenameBegin() {
+  rename.value = true;
+  newName.value = props.item.name;
 
-      this.dropTargetActive = false;
-    },
-    iconError(event) {
-      event.target.src = this.fallbackIcon;
+  setTimeout(() => {
+    const elem = renameCell.value?.querySelector('input.pankow-text-input');
+    if (!elem) return;
 
-      setTimeout(() => {
-        if (this.previewRetries > 5) return;
-        ++this.previewRetries
+    elem.focus();
 
-        event.target.src = this.item.previewUrl || this.item.icon;
-      }, 1000);
+    if (typeof elem.selectionStart !== 'undefined') {
+      elem.selectionStart = 0;
+      elem.selectionEnd = props.item.name.lastIndexOf('.');
     }
-  },
-  mounted() {
-    const observer = new IntersectionObserver(result => {
-      if (result[0].isIntersecting) {
-        this.visible = true;
-        observer.unobserve(this.$el);
-      }
-    });
-
-    observer.observe(this.$el);
+  }, 0);
+}
+
+function onRenameEnd() {
+  rename.value = false;
+  renameBusy.value = false;
+  newName.value = '';
+}
+
+async function onRenameSubmit() {
+  if (!newName.value) return;
+
+  renameBusy.value = true;
+  await props.renameHandler(props.item, newName.value);
+  onRenameEnd();
+}
+
+function onOpen(event) {
+  if (event.ctrlKey || event.metaKey) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  emit('activated', props.item);
+}
+
+function onSelect(event, actionMenu = false) {
+  if ((event.button === 2 || actionMenu) && event.ctrlKey) {
+    props.selectHandler(props.item, event, true);
+  } else {
+    props.selectHandler(props.item, event);
   }
-};
+}
+
+function onDrop(event) {
+  if (!props.canDropHandler(props.item)) return;
+
+  event.stopPropagation();
+
+  props.dropHandler(props.item, event);
+  dropTargetActive.value = false;
+}
+
+function onDragOver(event) {
+  if (!props.canDropHandler(props.item)) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  event.dataTransfer.dropEffect = 'move';
+  dropTargetActive.value = true;
+}
+
+function onDragExit() {
+  if (!props.item.isDirectory) return;
+
+  dropTargetActive.value = false;
+}
+
+function iconError(event) {
+  event.target.src = props.fallbackIcon;
+
+  setTimeout(() => {
+    if (previewRetries.value > 5) return;
+    previewRetries.value += 1;
+
+    event.target.src = props.item.previewUrl || props.item.icon;
+  }, 1000);
+}
+
+onMounted(() => {
+  const el = rowWrapper.value;
+  if (!el) return;
+
+  const observer = new IntersectionObserver((result) => {
+    if (result[0].isIntersecting) {
+      visible.value = true;
+      observer.unobserve(el);
+    }
+  });
+
+  observer.observe(el);
+});
+
+defineExpose({
+  highlight,
+  onRenameBegin,
+  get $el() {
+    return rowWrapper.value;
+  },
+});
 
 </script>