Merge branch 'vue3-wip' into vue3

frontend/src/components/Breadcrumbs.vue

@@ -3,8 +3,8 @@
     <component
       :is="element"
       :to="base || ''"
-      :aria-label="$t('files.home')"
+      :aria-label="t('files.home')"
-      :title="$t('files.home')"
+      :title="t('files.home')"
     >
       <i class="material-icons">home</i>
     </component>
@@ -18,13 +18,22 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed } from "vue";
-  name: "breadcrumbs",
+import { useI18n } from "vue-i18n";
-  props: ["base", "noLink"],
+import { useRoute } from "vue-router";
-  computed: {
+
-    items() {
+const { t } = useI18n();
-      const relativePath = this.$route.path.replace(this.base, "");
+
+const route = useRoute();
+
+const props = defineProps<{
+  base: string;
+  noLink?: boolean;
+}>();
+
+const items = computed(() => {
+  const relativePath = route.path.replace(props.base, "");
   let parts = relativePath.split("/");
 
   if (parts[0] === "") {
@@ -35,13 +44,13 @@ export default {
     parts.pop();
   }
 
-      let breadcrumbs = [];
+  let breadcrumbs: any[] = [];
 
   for (let i = 0; i < parts.length; i++) {
     if (i === 0) {
       breadcrumbs.push({
         name: decodeURIComponent(parts[i]),
-            url: this.base + "/" + parts[i] + "/",
+        url: props.base + "/" + parts[i] + "/",
       });
     } else {
       breadcrumbs.push({
@@ -60,16 +69,15 @@ export default {
   }
 
   return breadcrumbs;
-    },
+});
-    element() {
+
-      if (this.noLink !== undefined) {
+const element = computed(() => {
+  if (props.noLink) {
     return "span";
   }
 
   return "router-link";
-    },
+});
-  },
-};
 </script>
 
 <style></style>

frontend/src/components/CustomToast.vue

@@ -7,17 +7,15 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+defineProps<{
-  name: "error-toast",
+  message: string;
-  props: ["message", "reportText", "isReport"],
+  reportText: string;
-  methods: {
+  isReport: boolean;
-    clicked() {
+}>();
-      window.open(
+
-        "https://github.com/filebrowser/filebrowser/issues/new/choose"
+const clicked = () => {
-      );
+  window.open("https://github.com/filebrowser/filebrowser/issues/new/choose");
-    },
-  },
 };
 </script>
 

frontend/src/components/ProgressBar.vue

@@ -45,6 +45,7 @@ https://raw.githubusercontent.com/dzwillia/vue-simple-progress/master/src/compon
 </template>
 
 <script>
+// We're leaving this untouched as you can read in the beginning
 var isNumber = function (n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
 };

frontend/src/components/Search.vue

@@ -64,143 +64,153 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions, mapState, mapWritableState } from "pinia";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
 
 import url from "@/utils/url";
 import { search } from "@/api";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 
-var boxes = {
+const boxes = {
   image: { label: "images", icon: "insert_photo" },
   audio: { label: "music", icon: "volume_up" },
   video: { label: "video", icon: "movie" },
   pdf: { label: "pdf", icon: "picture_as_pdf" },
 };
 
-export default {
+const layoutStore = useLayoutStore();
-  name: "search",
+const fileStore = useFileStore();
-  data: function () {
-    return {
-      value: "",
-      active: false,
-      ongoing: false,
-      results: [],
-      reload: false,
-      resultsCount: 50,
-      scrollable: null,
-    };
-  },
-  inject: ["$showError"],
-  watch: {
-    show(val, old) {
-      this.active = val === "search";
 
-      if (old === "search" && !this.active) {
+const value = ref<string>("");
-        if (this.reload) {
+const active = ref<boolean>(false);
-          this.sReload = true;
+const ongoing = ref<boolean>(false);
+const results = ref<any[]>([]);
+const reload = ref<boolean>(false);
+const resultsCount = ref<number>(50);
+
+const $showError = inject<IToastError>("$showError")!;
+
+const input = ref<HTMLInputElement | null>(null);
+const result = ref<HTMLElement | null>(null);
+
+const { t } = useI18n();
+
+const route = useRoute();
+
+// @ts-ignore
+watch(layoutStore.show, (newVal: string, oldVal: string) => {
+  active.value = newVal === "search";
+
+  if (oldVal === "search" && !active.value) {
+    if (reload.value) {
+      fileStore.reload = true;
     }
 
     document.body.style.overflow = "auto";
-        this.reset();
+    reset();
-        this.value = "";
+    value.value = "";
-        this.active = false;
+    active.value = false;
-        this.$refs.input.blur();
+    input.value?.blur();
-      } else if (this.active) {
+  } else if (active.value) {
-        this.reload = false;
+    reload.value = false;
-        this.$refs.input.focus();
+    input.value?.focus();
     document.body.style.overflow = "hidden";
   }
-    },
+});
-    value() {
+
-      if (this.results.length) {
+watch(value, () => {
-        this.reset();
+  if (results.value.length) {
+    reset();
   }
-    },
+});
-  },
+
-  computed: {
+// ...mapState(useFileStore, ["isListing"]),
-    ...mapState(useFileStore, ["isListing"]),
+// ...mapState(useLayoutStore, ["show"]),
-    ...mapState(useLayoutStore, ["show"]),
+// ...mapWritableState(useFileStore, { sReload: "reload" }),
-    ...mapWritableState(useFileStore, { sReload: "reload" }),
+
-    boxes() {
+const isEmpty = computed(() => {
-      return boxes;
+  return results.value.length === 0;
-    },
+});
-    isEmpty() {
+const text = computed(() => {
-      return this.results.length === 0;
+  if (ongoing.value) {
-    },
-    text() {
-      if (this.ongoing) {
     return "";
   }
 
-      return this.value === ""
+  return value.value === ""
-        ? this.$t("search.typeToSearch")
+    ? t("search.typeToSearch")
-        : this.$t("search.pressToSearch");
+    : t("search.pressToSearch");
-    },
+});
-    filteredResults() {
+const filteredResults = computed(() => {
-      return this.results.slice(0, this.resultsCount);
+  return results.value.slice(0, resultsCount.value);
-    },
+});
-  },
+
-  mounted() {
+onMounted(() => {
-    this.$refs.result.addEventListener("scroll", (event) => {
+  if (result.value === null) {
+    return;
+  }
+  result.value.addEventListener("scroll", (event: Event) => {
     if (
-        event.target.offsetHeight + event.target.scrollTop >=
+      (event.target as HTMLElement).offsetHeight +
-        event.target.scrollHeight - 100
+        (event.target as HTMLElement).scrollTop >=
+      (event.target as HTMLElement).scrollHeight - 100
     ) {
-        this.resultsCount += 50;
+      resultsCount.value += 50;
     }
   });
-  },
+});
-  methods: {
+
-    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
+const open = () => {
-    open() {
+  layoutStore.showHover("search");
-      this.showHover("search");
+};
-    },
+
-    close(event) {
+const close = (event: Event) => {
   event.stopPropagation();
   event.preventDefault();
-      this.closeHovers();
+  layoutStore.closeHovers();
-    },
+};
-    keyup(event) {
+
+const keyup = (event: KeyboardEvent) => {
   if (event.key === "Escape") {
-        this.close(event);
+    close(event);
     return;
   }
+  results.value.length = 0;
+};
 
-      this.results.length = 0;
+const init = (string: string) => {
-    },
+  value.value = `${string} `;
-    init(string) {
+  input.value !== null ? input.value.focus() : "";
-      this.value = `${string} `;
+};
-      this.$refs.input.focus();
+
-    },
+const reset = () => {
-    reset() {
+  ongoing.value = false;
-      this.ongoing = false;
+  resultsCount.value = 50;
-      this.resultsCount = 50;
+  results.value = [];
-      this.results = [];
+};
-    },
+
-    async submit(event) {
+const submit = async (event: Event) => {
   event.preventDefault();
 
-      if (this.value === "") {
+  if (value.value === "") {
     return;
   }
 
-      let path = this.$route.path;
+  let path = route.path;
-      if (!this.isListing) {
+  if (!fileStore.isListing) {
     path = url.removeLastDir(path) + "/";
   }
 
-      this.ongoing = true;
+  ongoing.value = true;
 
   try {
-        this.results = await search(path, this.value);
+    results.value = await search(path, value.value);
-      } catch (error) {
+  } catch (error: any) {
-        this.$showError(error);
+    $showError(error);
   }
 
-      this.ongoing = false;
+  ongoing.value = false;
-    },
-  },
 };
 </script>

frontend/src/components/files/ExtendedImage.vue

@@ -13,205 +13,228 @@
     <img class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad" />
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import throttle from "lodash/throttle";
 import UTIF from "utif";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-export default {
+interface IProps {
-  props: {
+  src: string;
-    src: String,
+  moveDisabledTime: number;
-    moveDisabledTime: {
+  classList: any[];
-      type: Number,
+  zoomStep: number;
-      default: () => 200,
+}
-    },
+
-    classList: {
+const props = withDefaults(defineProps<IProps>(), {
-      type: Array,
+  moveDisabledTime: () => 200,
-      default: () => [],
+  classList: () => [],
-    },
+  zoomStep: () => 0.25,
-    zoomStep: {
+});
-      type: Number,
+
-      default: () => 0.25,
+const scale = ref<number>(1);
-    },
+const lastX = ref<number | null>(null);
-  },
+const lastY = ref<number | null>(null);
-  data() {
+const inDrag = ref<boolean>(false);
-    return {
+const touches = ref<number>(0);
-      scale: 1,
+const lastTouchDistance = ref<number | null>(0);
-      lastX: null,
+const moveDisabled = ref<boolean>(false);
-      lastY: null,
+const disabledTimer = ref<number | null>(null);
-      inDrag: false,
+const imageLoaded = ref<boolean>(false);
-      touches: 0,
+const position = ref<{
-      lastTouchDistance: 0,
+  center: { x: number; y: number };
-      moveDisabled: false,
+  relative: { x: number; y: number };
-      disabledTimer: null,
+}>({
-      imageLoaded: false,
-      position: {
   center: { x: 0, y: 0 },
   relative: { x: 0, y: 0 },
-      },
+});
-      maxScale: 4,
+const maxScale = ref<number>(4);
-      minScale: 0.25,
+const minScale = ref<number>(0.25);
-    };
+
-  },
+// Refs
-  mounted() {
+const imgex = ref<HTMLImageElement | null>(null);
-    if (!this.decodeUTIF()) {
+const container = ref<HTMLDivElement | null>(null);
-      this.$refs.imgex.src = this.src;
+
+onMounted(() => {
+  if (!decodeUTIF() && imgex.value !== null) {
+    imgex.value.src = props.src;
   }
-    let container = this.$refs.container;
+
-    this.classList.forEach((className) => container.classList.add(className));
+  props.classList.forEach((className) =>
+    container.value !== null ? container.value.classList.add(className) : ""
+  );
+
+  if (container.value === null) {
+    return;
+  }
+
   // set width and height if they are zero
-    if (getComputedStyle(container).width === "0px") {
+  if (getComputedStyle(container.value).width === "0px") {
-      container.style.width = "100%";
+    container.value.style.width = "100%";
   }
-    if (getComputedStyle(container).height === "0px") {
+  if (getComputedStyle(container.value).height === "0px") {
-      container.style.height = "100%";
+    container.value.style.height = "100%";
   }
 
-    window.addEventListener("resize", this.onResize);
+  window.addEventListener("resize", onResize);
-  },
+});
-  beforeUnmount() {
+
-    window.removeEventListener("resize", this.onResize);
+onBeforeUnmount(() => {
-    document.removeEventListener("mouseup", this.onMouseUp);
+  window.removeEventListener("resize", onResize);
-  },
+  document.removeEventListener("mouseup", onMouseUp);
-  watch: {
+});
-    src: function () {
+
-      if (!this.decodeUTIF()) {
+// @ts-ignore
-        this.$refs.imgex.src = this.src;
+watch(props.src, () => {
+  if (!decodeUTIF() && imgex.value !== null) {
+    imgex.value.src = props.src;
   }
 
-      this.scale = 1;
+  scale.value = 1;
-      this.setZoom();
+  setZoom();
-      this.setCenter();
+  setCenter();
-    },
+});
-  },
+
-  methods: {
+// Modified from UTIF.replaceIMG
-    // Modified from UTIF.replaceIMG
+const decodeUTIF = () => {
-    decodeUTIF() {
   const sufs = ["tif", "tiff", "dng", "cr2", "nef"];
-      let suff = document.location.pathname.split(".").pop().toLowerCase();
+  if (document?.location?.pathname === undefined) {
+    return;
+  }
+  let suff = document.location.pathname.split(".")?.pop()?.toLowerCase() ?? "";
+
   if (sufs.indexOf(suff) == -1) return false;
   let xhr = new XMLHttpRequest();
   UTIF._xhrs.push(xhr);
-      UTIF._imgs.push(this.$refs.imgex);
+  UTIF._imgs.push(imgex.value);
-      xhr.open("GET", this.src);
+  xhr.open("GET", props.src);
   xhr.responseType = "arraybuffer";
   xhr.onload = UTIF._imgLoaded;
   xhr.send();
   return true;
-    },
+};
-    onLoad() {
-      let img = this.$refs.imgex;
 
-      this.imageLoaded = true;
+const onLoad = () => {
+  imageLoaded.value = true;
 
-      if (img === undefined) {
+  if (imgex.value === null) {
     return;
   }
 
-      img.classList.remove("image-ex-img-center");
+  imgex.value.classList.remove("image-ex-img-center");
-      this.setCenter();
+  setCenter();
-      img.classList.add("image-ex-img-ready");
+  imgex.value.classList.add("image-ex-img-ready");
 
-      document.addEventListener("mouseup", this.onMouseUp);
+  document.addEventListener("mouseup", onMouseUp);
 
-      let realSize = img.naturalWidth;
+  let realSize = imgex.value.naturalWidth;
-      let displaySize = img.offsetWidth;
+  let displaySize = imgex.value.offsetWidth;
 
   // Image is in portrait orientation
-      if (img.naturalHeight > img.naturalWidth) {
+  if (imgex.value.naturalHeight > imgex.value.naturalWidth) {
-        realSize = img.naturalHeight;
+    realSize = imgex.value.naturalHeight;
-        displaySize = img.offsetHeight;
+    displaySize = imgex.value.offsetHeight;
   }
 
   // Scale needed to display the image on full size
   const fullScale = realSize / displaySize;
 
   // Full size plus additional zoom
-      this.maxScale = fullScale + 4;
+  maxScale.value = fullScale + 4;
-    },
+};
-    onMouseUp() {
+
-      this.inDrag = false;
+const onMouseUp = () => {
-    },
+  inDrag.value = false;
-    onResize: throttle(function () {
+};
-      if (this.imageLoaded) {
+
-        this.setCenter();
+const onResize = throttle(function () {
-        this.doMove(this.position.relative.x, this.position.relative.y);
+  if (imageLoaded.value) {
+    setCenter();
+    doMove(position.value.relative.x, position.value.relative.y);
   }
-    }, 100),
+}, 100);
-    setCenter() {
-      let container = this.$refs.container;
-      let img = this.$refs.imgex;
 
-      this.position.center.x = Math.floor(
+const setCenter = () => {
-        (container.clientWidth - img.clientWidth) / 2
+  if (container.value === null || imgex.value === null) {
+    return;
+  }
+
+  position.value.center.x = Math.floor(
+    (container.value.clientWidth - imgex.value.clientWidth) / 2
   );
-      this.position.center.y = Math.floor(
+  position.value.center.y = Math.floor(
-        (container.clientHeight - img.clientHeight) / 2
+    (container.value.clientHeight - imgex.value.clientHeight) / 2
   );
 
-      img.style.left = this.position.center.x + "px";
+  imgex.value.style.left = position.value.center.x + "px";
-      img.style.top = this.position.center.y + "px";
+  imgex.value.style.top = position.value.center.y + "px";
-    },
+};
-    mousedownStart(event) {
+
-      this.lastX = null;
+const mousedownStart = (event: Event) => {
-      this.lastY = null;
+  lastX.value = null;
-      this.inDrag = true;
+  lastY.value = null;
+  inDrag.value = true;
   event.preventDefault();
-    },
+};
-    mouseMove(event) {
+const mouseMove = (event: MouseEvent) => {
-      if (!this.inDrag) return;
+  if (!inDrag.value) return;
-      this.doMove(event.movementX, event.movementY);
+  doMove(event.movementX, event.movementY);
   event.preventDefault();
-    },
+};
-    mouseUp(event) {
+const mouseUp = (event: Event) => {
-      this.inDrag = false;
+  inDrag.value = false;
   event.preventDefault();
-    },
+};
-    touchStart(event) {
+const touchStart = (event: TouchEvent) => {
-      this.lastX = null;
+  lastX.value = null;
-      this.lastY = null;
+  lastY.value = null;
-      this.lastTouchDistance = null;
+  lastTouchDistance.value = null;
   if (event.targetTouches.length < 2) {
     setTimeout(() => {
-          this.touches = 0;
+      touches.value = 0;
     }, 300);
-        this.touches++;
+    touches.value++;
-        if (this.touches > 1) {
+    if (touches.value > 1) {
-          this.zoomAuto(event);
+      zoomAuto(event);
     }
   }
   event.preventDefault();
-    },
+};
-    zoomAuto(event) {
+
-      switch (this.scale) {
+const zoomAuto = (event: Event) => {
+  switch (scale.value) {
     case 1:
-          this.scale = 2;
+      scale.value = 2;
       break;
     case 2:
-          this.scale = 4;
+      scale.value = 4;
       break;
     default:
     case 4:
-          this.scale = 1;
+      scale.value = 1;
-          this.setCenter();
+      setCenter();
       break;
   }
-      this.setZoom();
+  setZoom();
   event.preventDefault();
-    },
+};
-    touchMove(event) {
+
+const touchMove = (event: TouchEvent) => {
   event.preventDefault();
-      if (this.lastX === null) {
+  if (lastX.value === null) {
-        this.lastX = event.targetTouches[0].pageX;
+    lastX.value = event.targetTouches[0].pageX;
-        this.lastY = event.targetTouches[0].pageY;
+    lastY.value = event.targetTouches[0].pageY;
     return;
   }
-      let step = this.$refs.imgex.width / 5;
+  if (imgex.value === null) {
+    return;
+  }
+  let step = imgex.value.width / 5;
   if (event.targetTouches.length === 2) {
-        this.moveDisabled = true;
+    moveDisabled.value = true;
-        clearTimeout(this.disabledTimer);
+    if (disabledTimer.value) clearTimeout(disabledTimer.value);
-        this.disabledTimer = setTimeout(
+    disabledTimer.value = window.setTimeout(
-          () => (this.moveDisabled = false),
+      () => (moveDisabled.value = false),
-          this.moveDisabledTime
+      props.moveDisabledTime
     );
 
     let p1 = event.targetTouches[0];
@@ -219,55 +242,59 @@ export default {
     let touchDistance = Math.sqrt(
       Math.pow(p2.pageX - p1.pageX, 2) + Math.pow(p2.pageY - p1.pageY, 2)
     );
-        if (!this.lastTouchDistance) {
+    if (!lastTouchDistance.value) {
-          this.lastTouchDistance = touchDistance;
+      lastTouchDistance.value = touchDistance;
       return;
     }
-        this.scale += (touchDistance - this.lastTouchDistance) / step;
+    scale.value += (touchDistance - lastTouchDistance.value) / step;
-        this.lastTouchDistance = touchDistance;
+    lastTouchDistance.value = touchDistance;
-        this.setZoom();
+    setZoom();
   } else if (event.targetTouches.length === 1) {
-        if (this.moveDisabled) return;
+    if (moveDisabled.value) return;
-        let x = event.targetTouches[0].pageX - this.lastX;
+    let x = event.targetTouches[0].pageX - (lastX.value ?? 0);
-        let y = event.targetTouches[0].pageY - this.lastY;
+    let y = event.targetTouches[0].pageY - (lastY.value ?? 0);
     if (Math.abs(x) >= step && Math.abs(y) >= step) return;
-        this.lastX = event.targetTouches[0].pageX;
+    lastX.value = event.targetTouches[0].pageX;
-        this.lastY = event.targetTouches[0].pageY;
+    lastY.value = event.targetTouches[0].pageY;
-        this.doMove(x, y);
+    doMove(x, y);
   }
-    },
+};
-    doMove(x, y) {
+
-      let style = this.$refs.imgex.style;
+const doMove = (x: number, y: number) => {
-      let posX = this.pxStringToNumber(style.left) + x;
+  if (imgex.value === null) {
-      let posY = this.pxStringToNumber(style.top) + y;
+    return;
+  }
+  const style = imgex.value.style;
+
+  let posX = pxStringToNumber(style.left) + x;
+  let posY = pxStringToNumber(style.top) + y;
 
   style.left = posX + "px";
   style.top = posY + "px";
 
-      this.position.relative.x = Math.abs(this.position.center.x - posX);
+  position.value.relative.x = Math.abs(position.value.center.x - posX);
-      this.position.relative.y = Math.abs(this.position.center.y - posY);
+  position.value.relative.y = Math.abs(position.value.center.y - posY);
 
-      if (posX < this.position.center.x) {
+  if (posX < position.value.center.x) {
-        this.position.relative.x = this.position.relative.x * -1;
+    position.value.relative.x = position.value.relative.x * -1;
   }
 
-      if (posY < this.position.center.y) {
+  if (posY < position.value.center.y) {
-        this.position.relative.y = this.position.relative.y * -1;
+    position.value.relative.y = position.value.relative.y * -1;
   }
-    },
+};
-    wheelMove(event) {
+const wheelMove = (event: WheelEvent) => {
-      this.scale += -Math.sign(event.deltaY) * this.zoomStep;
+  scale.value += -Math.sign(event.deltaY) * props.zoomStep;
-      this.setZoom();
+  setZoom();
-    },
+};
-    setZoom() {
+const setZoom = () => {
-      this.scale = this.scale < this.minScale ? this.minScale : this.scale;
+  scale.value = scale.value < minScale.value ? minScale.value : scale.value;
-      this.scale = this.scale > this.maxScale ? this.maxScale : this.scale;
+  scale.value = scale.value > maxScale.value ? maxScale.value : scale.value;
-      this.$refs.imgex.style.transform = `scale(${this.scale})`;
+  if (imgex.value !== null)
-    },
+    imgex.value.style.transform = `scale(${scale.value})`;
-    pxStringToNumber(style) {
+};
+const pxStringToNumber = (style: string) => {
   return +style.replace("px", "");
-    },
-  },
 };
 </script>
 <style>

frontend/src/components/files/ListingItem.vue

@@ -15,7 +15,7 @@
   >
     <div>
       <img
-        v-if="readOnly == undefined && type === 'image' && isThumbsEnabled"
+        v-if="!readOnly && type === 'image' && isThumbsEnabled"
         v-lazy="thumbnailUrl"
       />
       <i v-else class="material-icons"></i>
@@ -34,8 +34,7 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapState, mapActions, mapWritableState } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
@@ -45,133 +44,146 @@ import { filesize } from "@/utils";
 import dayjs from "dayjs";
 import { files as api } from "@/api";
 import * as upload from "@/utils/upload";
+import { computed, inject, ref } from "vue";
+import { useRouter } from "vue-router";
 
-export default {
+const touches = ref<number>(0);
-  name: "item",
-  data: function () {
-    return {
-      touches: 0,
-    };
-  },
-  inject: ["$showError"],
-  props: [
-    "name",
-    "isDir",
-    "url",
-    "type",
-    "size",
-    "modified",
-    "index",
-    "readOnly",
-    "path",
-  ],
-  computed: {
-    ...mapState(useAuthStore, ["user", "jwt"]),
-    ...mapState(useFileStore, ["req", "selectedCount", "multiple"]),
-    ...mapWritableState(useFileStore, ["reload", "selected"]),
-    singleClick() {
-      return this.readOnly == undefined && this.user.singleClick;
-    },
-    isSelected() {
-      return this.selected.indexOf(this.index) !== -1;
-    },
-    isDraggable() {
-      return this.readOnly == undefined && this.user.perm.rename;
-    },
-    canDrop() {
-      if (!this.isDir || this.readOnly !== undefined) return false;
 
-      for (let i of this.selected) {
+const $showError = inject<IToastError>("$showError")!;
-        if (this.req.items[i].url === this.url) {
+const router = useRouter();
+
+const props = defineProps<{
+  name: string;
+  isDir: boolean;
+  url: string;
+  type: string;
+  size: number;
+  modified: string;
+  index: number;
+  readOnly?: boolean;
+  path?: string;
+}>();
+
+const authStore = useAuthStore();
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
+
+const singleClick = computed(
+  () => !props.readOnly && authStore.user?.singleClick
+);
+const isSelected = computed(
+  () => fileStore.selected.indexOf(props.index) !== -1
+);
+const isDraggable = computed(
+  () => !props.readOnly && authStore.user?.perm.rename
+);
+
+const canDrop = computed(() => {
+  if (!props.isDir || props.readOnly) return false;
+
+  for (let i of fileStore.selected) {
+    if (fileStore.req?.items[i].url === props.url) {
       return false;
     }
   }
 
   return true;
-    },
+});
-    thumbnailUrl() {
+
+const thumbnailUrl = computed(() => {
   const file = {
-        path: this.path,
+    path: props.path,
-        modified: this.modified,
+    modified: props.modified,
   };
 
-      return api.getPreviewURL(file, "thumb");
+  return api.getPreviewURL(file as Resource, "thumb");
-    },
+});
-    isThumbsEnabled() {
+
+const isThumbsEnabled = computed(() => {
   return enableThumbs;
-    },
+});
-  },
+
-  methods: {
+// ...mapActions(useFileStore, ["removeSelected"]),
-    ...mapActions(useFileStore, ["removeSelected"]),
+// ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
-    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
+
-    humanSize: function () {
+const humanSize = () => {
-      return this.type == "invalid_link" ? "invalid link" : filesize(this.size);
+  return props.type == "invalid_link" ? "invalid link" : filesize(props.size);
-    },
+};
-    humanTime: function () {
+
-      if (this.readOnly == undefined && this.user.dateFormat) {
+const humanTime = () => {
-        return dayjs(this.modified).format("L LT");
+  if (!props.readOnly && authStore.user?.dateFormat) {
+    return dayjs(props.modified).format("L LT");
   }
-      return dayjs(this.modified).fromNow();
+  return dayjs(props.modified).fromNow();
-    },
+};
-    dragStart: function () {
+
-      if (this.selectedCount === 0) {
+const dragStart = () => {
-        this.selected.push(this.index);
+  if (fileStore.selectedCount === 0) {
+    fileStore.selected.push(props.index);
     return;
   }
 
-      if (!this.isSelected) {
+  if (!isSelected.value) {
-        this.selected = [];
+    fileStore.selected = [];
-        this.selected.push(this.index);
+    fileStore.selected.push(props.index);
   }
-    },
+};
-    dragOver: function (event) {
+
-      if (!this.canDrop) return;
+const dragOver = (event: Event) => {
+  if (!canDrop.value) return;
 
   event.preventDefault();
-      let el = event.target;
+  let el = event.target as HTMLElement | null;
-
+  if (el !== null) {
     for (let i = 0; i < 5; i++) {
-        if (!el.classList.contains("item")) {
+      if (!el?.classList.contains("item")) {
-          el = el.parentElement;
+        el = el?.parentElement ?? null;
       }
     }
 
-      el.style.opacity = 1;
+    if (el !== null) el.style.opacity = "1";
-    },
+  }
-    drop: async function (event) {
+};
-      if (!this.canDrop) return;
+
+const drop = async (event: Event) => {
+  if (!canDrop.value) return;
   event.preventDefault();
 
-      if (this.selectedCount === 0) return;
+  if (fileStore.selectedCount === 0) return;
 
-      let el = event.target;
+  let el = event.target as HTMLElement | null;
   for (let i = 0; i < 5; i++) {
     if (el !== null && !el.classList.contains("item")) {
       el = el.parentElement;
     }
   }
 
-      let items = [];
+  let items: any[] = [];
 
-      for (let i of this.selected) {
+  for (let i of fileStore.selected) {
+    if (fileStore.req) {
       items.push({
-          from: this.req.items[i].url,
+        from: fileStore.req?.items[i].url,
-          to: this.url + encodeURIComponent(this.req.items[i].name),
+        to: props.url + encodeURIComponent(fileStore.req?.items[i].name),
-          name: this.req.items[i].name,
+        name: fileStore.req?.items[i].name,
       });
     }
+  }
 
   // Get url from ListingItem instance
+  if (el === null) {
+    return;
+  }
   let path = el.__vue__.url;
   let baseItems = (await api.fetch(path)).items;
 
-      let action = (overwrite, rename) => {
+  let action = (overwrite: boolean, rename: boolean) => {
     api
       .move(items, overwrite, rename)
       .then(() => {
-            this.reload = true;
+        fileStore.reload = true;
       })
-          .catch(this.$showError);
+      .catch($showError);
   };
 
   let conflict = upload.checkConflict(items, baseItems);
@@ -180,14 +192,14 @@ export default {
   let rename = false;
 
   if (conflict) {
-        this.showHover({
+    layoutStore.showHover({
       prompt: "replace-rename",
-          confirm: (event, option) => {
+      confirm: (event: Event, option: any) => {
         overwrite = option == "overwrite";
         rename = option == "rename";
 
         event.preventDefault();
-            this.closeHovers();
+        layoutStore.closeHovers();
         action(overwrite, rename);
       },
     });
@@ -196,43 +208,50 @@ export default {
   }
 
   action(overwrite, rename);
-    },
+};
-    itemClick: function (event) {
+
-      if (this.singleClick && !this.multiple) this.open();
+const itemClick = (event: Event) => {
-      else this.click(event);
+  if (singleClick.value && !fileStore.multiple) open();
-    },
+  else click(event);
-    click: function (event) {
+};
-      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();
+
+const click = (event: Event | KeyboardEvent) => {
+  if (!singleClick.value && fileStore.selectedCount !== 0)
+    event.preventDefault();
 
   setTimeout(() => {
-        this.touches = 0;
+    touches.value = 0;
   }, 300);
 
-      this.touches++;
+  touches.value++;
-      if (this.touches > 1) {
+  if (touches.value > 1) {
-        this.open();
+    open();
   }
 
-      if (this.selected.indexOf(this.index) !== -1) {
+  if (fileStore.selected.indexOf(props.index) !== -1) {
-        this.removeSelected(this.index);
+    fileStore.removeSelected(props.index);
     return;
   }
 
-      if (event.shiftKey && this.selected.length > 0) {
+  if (
+    event instanceof KeyboardEvent &&
+    event.shiftKey &&
+    fileStore.selected.length > 0
+  ) {
     let fi = 0;
     let la = 0;
 
-        if (this.index > this.selected[0]) {
+    if (props.index > fileStore.selected[0]) {
-          fi = this.selected[0] + 1;
+      fi = fileStore.selected[0] + 1;
-          la = this.index;
+      la = props.index;
     } else {
-          fi = this.index;
+      fi = props.index;
-          la = this.selected[0] - 1;
+      la = fileStore.selected[0] - 1;
     }
 
     for (; fi <= la; fi++) {
-          if (this.selected.indexOf(fi) == -1) {
+      if (fileStore.selected.indexOf(fi) == -1) {
-            this.selected.push(fi);
+        fileStore.selected.push(fi);
       }
     }
 
@@ -240,18 +259,18 @@ export default {
   }
 
   if (
-        !this.singleClick &&
+    event instanceof KeyboardEvent &&
+    !singleClick.value &&
     !event.ctrlKey &&
     !event.metaKey &&
-        !this.multiple
+    !fileStore.multiple
   ) {
-        this.selected = [];
+    fileStore.selected = [];
   }
-      this.selected.push(this.index);
+  fileStore.selected.push(props.index);
-    },
+};
-    open: function () {
+
-      this.$router.push({ path: this.url });
+const open = () => {
-    },
+  router.push({ path: props.url });
-  },
 };
 </script>

frontend/src/components/header/Action.vue

@@ -6,24 +6,28 @@
   </button>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions } from "pinia";
 import { useLayoutStore } from "@/stores/layout";
 
-export default {
+defineProps<{
-  name: "action",
+  icon?: string;
-  props: ["icon", "label", "counter", "show"],
+  label?: any;
-  methods: {
+  counter?: any;
-    ...mapActions(useLayoutStore, ["showHover"]),
+  show?: any;
-    action: function () {
+}>();
-      if (this.show) {
+
-        this.showHover(this.show);
+const emit = defineEmits<{
+  (e: "action"): any;
+}>();
+
+const layoutStore = useLayoutStore();
+
+const action = () => {
+  if (layoutStore.show) {
+    // TODO: is not very pretty
+    layoutStore.showHover(layoutStore.show as string);
   }
 
-      this.$emit("action");
+  emit("action");
-    },
-  },
 };
 </script>
-
-<style></style>

frontend/src/components/header/HeaderBar.vue

@@ -1,58 +1,56 @@
 <template>
   <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
+    <img v-if="showLogo" :src="logoURL" />
-    <action
+    <Action
-      v-if="showMenu !== undefined"
+      v-if="showMenu"
       class="menu-button"
       icon="menu"
-      :label="$t('buttons.toggleSidebar')"
+      :label="t('buttons.toggleSidebar')"
-      @action="showHover('sidebar')"
+      @action="layoutStore.showHover('sidebar')"
     />
 
     <slot />
 
-    <div id="dropdown" :class="{ active: this.show === 'more' }">
+    <div id="dropdown" :class="{ active: layoutStore.show === 'more' }">
       <slot name="actions" />
     </div>
 
-    <action
+    <Action
-      v-if="this.$slots.actions"
+      v-if="ifActionsSlot"
       id="more"
       icon="more_vert"
-      :label="$t('buttons.more')"
+      :label="t('buttons.more')"
-      @action="showHover('more')"
+      @action="layoutStore.showHover('more')"
     />
 
-    <div class="overlay" v-show="this.show == 'more'" @click="closeHovers" />
+    <div
+      class="overlay"
+      v-show="layoutStore.show == 'more'"
+      @click="layoutStore.closeHovers"
+    />
   </header>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions, mapState } from "pinia";
 import { useLayoutStore } from "@/stores/layout";
 
 import { logoURL } from "@/utils/constants";
 
 import Action from "@/components/header/Action.vue";
+import { computed, useSlots } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
+defineProps<{
-  name: "header-bar",
+  showLogo?: boolean;
-  props: ["showLogo", "showMenu"],
+  showMenu?: boolean;
-  components: {
+}>();
-    Action,
+
-  },
+const layoutStore = useLayoutStore();
-  data: function () {
+const slots = useSlots();
-    return {
+
-      logoURL,
+const { t } = useI18n();
-    };
+
-  },
+const ifActionsSlot = computed(() => (slots.actions ? true : false));
-  computed: {
-    ...mapState(useLayoutStore, ["show"]),
-  },
-  methods: {
-    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
-  },
-};
 </script>
 
 <style></style>

frontend/src/types/file.d.ts

@@ -18,13 +18,13 @@ interface Resource extends ResourceBase {
   sorting: Sorting;
   hash?: string;
   token?: string;
-  index?: number;
+  index: number;
   subtitles?: string[];
   content?: string;
 }
 
 interface ResourceItem extends ResourceBase {
-  index?: number;
+  index: number;
   subtitles?: string[];
 }
 

frontend/src/types/utif.d.ts

@@ -0,0 +1 @@
+declare module "utif";