@cloudron/pankow 3.1.8

package/components/DirectoryViewListItem.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="row-wrapper"
+    :draggable="!rename"
+    @mouseup="onSelect($event)"
+    @drop="onDrop($event)"
+    @dragover="onDragOver($event)"
+    @dragexit="onDragExit($event)"
+    >
+
+    <div class="row" :class="{ 'focused': item.focused, 'selected': item.selected, 'drop-target-active': dropTargetActive }">
+      <div v-if="!visible" class="col icon"></div>
+      <div v-if="!visible" class="col label"></div>
+
+      <div v-if="visible" class="col icon">
+        <img :src="item.previewUrl || item.icon" ref="iconImage" @error="iconError($event)"/>
+        <i v-show="typeof showShare === 'string' && item[showShare]" class="fa-solid fa-share-nodes is-shared"></i>
+      </div>
+
+      <div v-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">
+        <TextInput
+          ref="renameInput"
+          v-model="newName"
+          :disabled="renameBusy"
+          @blur="onRenameEnd"
+          @dblclick.stop
+          @keydown.enter.stop="onRenameSubmit"
+          @keydown.esc.stop="onRenameEnd"
+          @keydown.stop
+          />
+      </div>
+
+      <div v-if="visible && showStar" class="col star">
+        <Icon :icon="`${item.star ? 'fa-solid' : 'fa-regular'} fa-star`" class="star-icon" :class="{ 'star-visible': item.star }" @dblclick.stop.prevent @click.stop.prevent="onToggleStar" />
+      </div>
+      <div v-if="visible && showOwner" class="col owner">{{ item.owner }}</div>
+      <div v-if="visible && showSize" class="col size">{{ prettyFileSize(item.size) }}</div>
+      <div v-if="visible && showModified" class="col modified" :title="item.modified.toLocaleString()">{{ prettyDate(item.modified) }}</div>
+      <div v-if="visible" class="col actions">
+        <div @mouseup.stop="onActionMenu($event)"><i class="fa-solid fa-ellipsis-vertical"/></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+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
+  },
+  props: {
+    item: Object,
+    showOwner: {
+      type: Boolean,
+      default: false
+    },
+    showShare: {
+      // if String its the name of the property for existing share indicator
+      type: [ Boolean, String ],
+      default: false
+    },
+    showSize: {
+      type: Boolean,
+      default: false
+    },
+    showStar: {
+      type: Boolean,
+      default: false
+    },
+    showModified: {
+      type: Boolean,
+      default: false
+    },
+    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');
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      rename: false,
+      renameBusy: false,
+      newName: '',
+      dropTargetActive: false,
+      previewRetries: 0
+    };
+  },
+  methods: {
+    prettyFileSize,
+    prettyDate,
+    highlight() {
+      this.$el.classList.add('pankow-directory-view-highlight-animation');
+      setTimeout(() => { this.$el.classList.remove('pankow-directory-view-highlight-animation'); }, 4000);
+    },
+    onToggleStar() {
+      this.starHandler(this.item);
+    },
+    onActionMenu(event) {
+      this.onSelect(event, true);
+      this.$emit('action-menu', this.item, event);
+    },
+    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);
+    },
+    onRenameEnd() {
+      this.rename = false;
+      this.renameBusy = false;
+      this.newName = '';
+    },
+    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;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      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;
+
+      event.stopPropagation();
+
+      this.dropHandler(this.item, event);
+      this.dropTargetActive = false;
+    },
+    onDragOver(event) {
+      if (!this.canDropHandler(this.item)) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      event.dataTransfer.dropEffect = 'move';
+      this.dropTargetActive = true;
+    },
+    onDragExit(event) {
+      if (!this.item.isDirectory) return;
+
+      this.dropTargetActive = false;
+    },
+    iconError(event) {
+      event.target.src = this.fallbackIcon;
+
+      setTimeout(() => {
+        if (this.previewRetries > 5) return;
+        ++this.previewRetries
+
+        event.target.src = this.item.previewUrl || this.item.icon;
+      }, 1000);
+    }
+  },
+  mounted() {
+    const observer = new IntersectionObserver(result => {
+      if (result[0].isIntersecting) {
+        this.visible = true;
+        observer.unobserve(this.$el);
+      }
+    });
+
+    observer.observe(this.$el);
+  }
+};
+
+</script>
+
+<style scoped>
+
+.row-wrapper {
+  --background-color-hover: #ededed;
+  --background-color-selected: #dbedfb;
+  --border-color-focus: #b3cfe5;
+}
+
+@media (prefers-color-scheme: dark) {
+  .row-wrapper {
+    --background-color-hover: rgba(255, 255, 255, 0.1);
+    --background-color-selected: rgba(255, 255, 255, 0.2);
+    --border-color-focus: rgba(255, 255, 255, 0.3);
+  }
+}
+
+.row-wrapper {
+  width: 100%;
+  padding: 2px 0;
+  margin-bottom: 5px;
+}
+
+.row {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 3px;
+  transition: all 100ms;
+  border: 2px solid transparent;
+}
+
+.row-wrapper:hover > .row {
+  background-color: var(--background-color-hover);
+}
+
+.row.drop-target-active {
+  border: 2px solid var(--pankow-color-primary);
+}
+
+.row.selected {
+  background-color: var(--background-color-selected) !important;
+}
+
+.row.focused {
+  border: solid 2px var(--border-color-focus);
+}
+
+.col {
+  white-space: nowrap;
+}
+
+.icon {
+  height: 45px;
+  width: 45px;
+  padding: 5px;
+}
+
+.icon > img {
+  width: 35px;
+  height: 35px;
+  object-fit: cover;
+}
+
+.star-icon {
+  color: #ffcb00;
+  padding: 10px;
+  visibility: hidden;
+  cursor: pointer;
+}
+
+.star-icon:hover {
+  transform: scale(1.5);
+  transform-origin: center center;
+}
+
+.row.focused .star-icon,
+.row.selected .star-icon,
+.row-wrapper:hover > .row .star-icon {
+  visibility: visible;
+}
+
+.star-visible {
+  visibility: visible !important;
+}
+
+.is-shared {
+  position: relative;
+  right: 13px;
+  bottom: 0;
+  font-size: 1.2rem
+}
+
+.label {
+  padding-left: 5px;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: auto;
+  display: flex;
+}
+
+.label > button {
+  display: none;
+  margin: auto 10px;
+}
+
+.label:hover > button {
+  display: block;
+}
+
+.label.rename > button {
+  display: block;
+}
+
+.size {
+  width: 100px;
+  margin: auto;
+}
+
+.star {
+  width: 80px;
+  margin: auto;
+  text-align: center;
+}
+
+.owner {
+  width: 100px;
+  margin: auto;
+}
+
+.modified {
+  width: 100px;
+  margin: auto;
+}
+
+.actions {
+  display: flex;
+  margin: auto;
+  margin-right: 10px;
+}
+
+.actions > div {
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.open-action {
+  cursor: pointer;
+}
+
+.open-action:hover {
+  text-decoration: underline;
+}
+
+
+</style>
+
+<style>
+
+.pankow-directory-view-highlight-animation {
+  animation: pankow-directory-view-highlight-animation-breath 0.8s 4;
+}
+
+@keyframes pankow-directory-view-highlight-animation-breath {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+</style>

package/components/EmailInput.vue

@@ -0,0 +1,22 @@
+<script setup>
+
+const model = defineModel();
+const props = defineProps({
+  placeholder: String,
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+});
+
+</script>
+
+<template>
+  <input class="pankow-text-input" type="email" :placeholder="placeholder" :readonly="readonly" :value="model" @input="$emit('update:modelValue', $event.target.value)"/>
+</template>
+
+<style>
+
+/* using TextInput styles */
+
+</style>

package/components/FileUploader.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="file-uploader" v-show="uploadInProgress">
+    <div class="label">{{ tr('filemanager.uploader.uploading') }} {{ activeFile ? activeFile.name : '' }} <span style="float: right">{{ prettyUploadSpeed }}</span></div>
+    <div style="display: flex;">
+      <ProgressBar :value="parseInt((this.uploadedSize * 100) / this.size) || 0" style="flex-grow: 1"></ProgressBar>
+      <Button danger small tool @click="onCancelUpload" icon="fa-solid fa-xmark"></Button>
+    </div>
+
+    <input type="file" ref="uploadFileInput" style="display: none" multiple/>
+    <input type="file" ref="uploadFolderInput" style="display: none" multiple webkitdirectory directory/>
+
+    <InputDialog ref="inputDialog" />
+  </div>
+</template>
+
+<script>
+
+import ProgressBar from './ProgressBar.vue';
+import Button from './Button.vue';
+import Icon from './Icon.vue';
+import InputDialog from './InputDialog.vue';
+
+import { translation } from '../utils.js';
+
+export default {
+  name: 'FileUploader',
+  components: {
+    ProgressBar,
+    Button,
+    Icon,
+    InputDialog
+  },
+  emits: [ 'finished' ],
+  props: {
+    uploadHandler: {
+      type: Function,
+      default() { console.warn('Missing uploadHandler for FileUploader'); }
+    },
+    cancelHandler: {
+      type: Function,
+      default() { console.warn('Missing cancelHandler for FileUploader'); }
+    },
+    jobPreFlightCheckHandler: {
+      type: Function,
+      default(job) { console.warn('Missing jobPreFlightCheckHandler for FileUploader'); return true; }
+    },
+    tr: {
+      type: Function,
+      default(id) { console.warn('Missing tr for FileUploader, using fallback.'); return translation(id); }
+    },
+  },
+  data() {
+    return {
+      activeTargetFolder: '/', // keep folder state for upload dialogs
+      uploadInProgress: false,
+      activeJob: null,
+      activeFile: {},
+      pendingJobs: [],
+      size: 0,
+      uploadedSize: 0,
+      uploadSpeed: 0
+    };
+  },
+  computed: {
+    prettyUploadSpeed() {
+      if (this.uploadSpeed < 1024) return this.uploadSpeed + ' Kb/s';
+      else return (this.uploadSpeed/1024).toFixed(2) + ' Mb/s';
+    }
+  },
+  methods: {
+    beforeUnloadListener(event) {
+      event.preventDefault();
+      return window.confirm(this.tr('filemanager.uploader.exitWarning'));
+    },
+    onUploadFile(targetFolder) {
+      this.activeTargetFolder = targetFolder;
+      this.$refs.uploadFileInput.click();
+    },
+    onUploadFolder(targetFolder) {
+      this.activeTargetFolder = targetFolder;
+      this.$refs.uploadFolderInput.click();
+    },
+    async onCancelUpload() {
+      const confirmed = await this.$refs.inputDialog.confirm({
+        message: `Really cancel upload?`,
+        confirmStyle: 'danger',
+        confirmLabel: 'Yes',
+        rejectLabel: 'No'
+      });
+
+      if (!confirmed) return;
+
+      this.cancelHandler();
+      this.uploadFinished();
+    },
+    uploadFinished() {
+      this.progess = 0;
+      this.size = 0;
+      this.uploadedSize = 0;
+      this.activeFile = {};
+      this.activeJob = null;
+      this.uploadInProgress = false;
+
+      window.removeEventListener('beforeunload', this.beforeUnloadListener, { capture: true });
+
+      this.$emit('finished');
+    },
+    async uploadNextJob() {
+      if (this.pendingJobs.length === 0) return this.uploadFinished();
+
+      this.activeJob = this.pendingJobs.pop();
+
+      if (!(await this.jobPreFlightCheckHandler(this.activeJob))) return this.uploadNextJob();
+
+      this.uploadNextFile();
+    },
+    async uploadNextFile() {
+      if (!this.activeJob || this.activeJob.pendingFiles.length === 0) return this.uploadNextJob();
+
+      this.activeFile = this.activeJob.pendingFiles.pop();
+
+      try {
+        let uploadedSoFar = 0;
+        let lastTimestamp = Date.now();
+
+        await this.uploadHandler(this.activeJob.targetFolder, this.activeFile, (event) => {
+          if (event.direction === 'upload') {
+            const timeDiff = Date.now() - lastTimestamp;
+            const loadedDiff = event.loaded - uploadedSoFar;
+
+            this.uploadedSize += loadedDiff;
+            this.uploadSpeed = parseInt(loadedDiff / (timeDiff / 1024) / 1024);
+
+            uploadedSoFar = event.loaded;
+            lastTimestamp = Date.now();
+          }
+        });
+      } catch (e) {
+        console.error(`Failed to upload ${this.activeFile.name}`, e);
+      }
+
+      this.uploadNextFile();
+    },
+    startUpload() {
+      if (this.uploadInProgress) return;
+      this.uploadInProgress = true;
+
+      window.addEventListener('beforeunload', this.beforeUnloadListener, { capture: true });
+
+      this.uploadNextJob();
+    },
+    addFiles(files, targetFolder) {
+      if (!files || !files.length) return;
+
+      let folder = files[0].webkitRelativePath ? files[0].webkitRelativePath : null;
+      if (folder && folder.indexOf('/') !== -1) folder = folder.split('/')[0];
+
+      const job = {
+        folder,
+        targetFolder,
+        pendingFiles: []
+      };
+
+      // update overall size and convert to real Array
+      for (let i = 0; i < files.length; ++i) {
+        this.size += files[i].size;
+        job.pendingFiles.push(files[i]);
+      }
+
+      this.pendingJobs.push(job);
+
+      this.startUpload();
+    }
+  },
+  mounted() {
+    this.$refs.uploadFileInput.addEventListener('change', (e) => {
+      this.addFiles(e.target.files || [], this.activeTargetFolder);
+    });
+
+    this.$refs.uploadFolderInput.addEventListener('change', (e) => {
+      this.addFiles(e.target.files || [], this.activeTargetFolder);
+    });
+  }
+};
+
+</script>
+
+<style scoped>
+
+.label {
+  padding-bottom: 5px;
+}
+
+</style>
+
+<style>
+
+.file-uploader {
+  width: 100%;
+  padding: 10px;
+  background-color: var(--pankow-color-background);
+}
+
+</style>

package/components/FormGroup.vue

@@ -0,0 +1,26 @@
+<script setup>
+
+const props = defineProps({
+  hasError: {
+    type: Boolean,
+    default: false
+  },
+});
+
+</script>
+
+<template>
+  <div class="pankow-form-group" :class="{ 'has-error': hasError }">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+
+.pankow-form-group {
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+}
+
+</style>

package/components/Icon.vue

@@ -0,0 +1,12 @@
+<script setup>
+
+const props = defineProps({
+  icon: String
+});
+
+</script>
+
+<template>
+  <i :class="icon"></i>
+</template>
+