remove class vue dep (4)

src/components/top-matter/AlbumTopMatter.vue

@@ -66,9 +66,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
-import UserConfig from "../../mixins/UserConfig";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -90,7 +88,8 @@ import PlusIcon from "vue-material-design-icons/Plus.vue";
 import ShareIcon from "vue-material-design-icons/ShareVariant.vue";
 import { API } from "../../services/API";
 
-@Component({
+export default defineComponent({
+  name: "AlbumTopMatter",
   components: {
     NcActions,
     NcActionButton,
@@ -107,46 +106,54 @@ import { API } from "../../services/API";
     PlusIcon,
     ShareIcon,
   },
-})
-export default class AlbumTopMatter extends Mixins(GlobalMixin, UserConfig) {
-  private name: string = "";
 
-  get isAlbumList() {
+  data() {
-    return !Boolean(this.$route.params.name);
+    return {
-  }
+      name: "",
+    };
+  },
 
-  get canEditAlbum() {
+  computed: {
-    return (
+    isAlbumList() {
-      !this.isAlbumList && this.$route.params.user === getCurrentUser()?.uid
+      return !Boolean(this.$route.params.name);
-    );
+    },
-  }
 
-  @Watch("$route")
+    canEditAlbum() {
-  async routeChange(from: any, to: any) {
+      return (
-    this.createMatter();
+        !this.isAlbumList && this.$route.params.user === getCurrentUser()?.uid
-  }
+      );
+    },
+  },
+
+  watch: {
+    $route: async function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
+  methods: {
-    this.name = this.$route.params.name || this.t("memories", "Albums");
+    createMatter() {
-  }
+      this.name = this.$route.params.name || this.t("memories", "Albums");
+    },
 
-  back() {
+    back() {
-    this.$router.push({ name: "albums" });
+      this.$router.push({ name: "albums" });
-  }
+    },
 
-  async downloadAlbum() {
+    async downloadAlbum() {
-    const res = await axios.post(
+      const res = await axios.post(
-      API.ALBUM_DOWNLOAD(this.$route.params.user, this.$route.params.name)
+        API.ALBUM_DOWNLOAD(this.$route.params.user, this.$route.params.name)
-    );
+      );
-    if (res.status === 200 && res.data.handle) {
+      if (res.status === 200 && res.data.handle) {
-      downloadWithHandle(res.data.handle);
+        downloadWithHandle(res.data.handle);
-    }
+      }
-  }
+    },
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/top-matter/FaceTopMatter.vue

@@ -52,9 +52,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
-import UserConfig from "../../mixins/UserConfig";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -68,7 +66,8 @@ import EditIcon from "vue-material-design-icons/Pencil.vue";
 import DeleteIcon from "vue-material-design-icons/Close.vue";
 import MergeIcon from "vue-material-design-icons/Merge.vue";
 
-@Component({
+export default defineComponent({
+  name: "FaceTopMatter",
   components: {
     NcActions,
     NcActionButton,
@@ -81,37 +80,43 @@ import MergeIcon from "vue-material-design-icons/Merge.vue";
     DeleteIcon,
     MergeIcon,
   },
-})
-export default class FaceTopMatter extends Mixins(GlobalMixin, UserConfig) {
-  private name: string = "";
 
-  @Watch("$route")
+  data() {
-  async routeChange(from: any, to: any) {
+    return {
-    this.createMatter();
+      name: "",
-  }
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
+  methods: {
-    this.name = this.$route.params.name || "";
+    createMatter() {
-  }
+      this.name = this.$route.params.name || "";
+    },
 
-  back() {
+    back() {
-    this.$router.push({ name: this.$route.name });
+      this.$router.push({ name: this.$route.name });
-  }
+    },
 
-  changeShowFaceRect() {
+    changeShowFaceRect() {
-    localStorage.setItem(
+      localStorage.setItem(
-      "memories_showFaceRect",
+        "memories_showFaceRect",
-      this.config_showFaceRect ? "1" : "0"
+        this.config_showFaceRect ? "1" : "0"
-    );
+      );
-    setTimeout(() => {
+      setTimeout(() => {
-      this.$router.go(0); // refresh page
+        this.$router.go(0); // refresh page
-    }, 500);
+      }, 500);
-  }
+    },
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/top-matter/FolderTopMatter.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
 import { TopMatterFolder, TopMatterType } from "../../types";
 
 const NcBreadcrumbs = () =>
@@ -42,14 +42,13 @@ const NcBreadcrumb = () =>
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
 
-import GlobalMixin from "../../mixins/GlobalMixin";
-
 import FolderShareModal from "../modal/FolderShareModal.vue";
 
 import HomeIcon from "vue-material-design-icons/Home.vue";
 import ShareIcon from "vue-material-design-icons/ShareVariant.vue";
 
-@Component({
+export default defineComponent({
+  name: "FolderTopMatter",
   components: {
     NcBreadcrumbs,
     NcBreadcrumb,
@@ -59,42 +58,48 @@ import ShareIcon from "vue-material-design-icons/ShareVariant.vue";
     HomeIcon,
     ShareIcon,
   },
-})
-export default class FolderTopMatter extends Mixins(GlobalMixin) {
-  private topMatter?: TopMatterFolder = null;
 
-  @Watch("$route")
+  data() {
-  async routeChange(from: any, to: any) {
+    return {
-    this.createMatter();
+      topMatter: null as TopMatterFolder | null,
-  }
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
+  methods: {
-    if (this.$route.name === "folders") {
+    createMatter() {
-      let path: any = this.$route.params.path || "";
+      if (this.$route.name === "folders") {
-      if (typeof path === "string") {
+        let path: any = this.$route.params.path || "";
-        path = path.split("/");
+        if (typeof path === "string") {
+          path = path.split("/");
+        }
+
+        this.topMatter = {
+          type: TopMatterType.FOLDER,
+          list: path
+            .filter((x) => x)
+            .map((x, idx, arr) => {
+              return {
+                text: x,
+                path: arr.slice(0, idx + 1).join("/"),
+              };
+            }),
+        };
+      } else {
+        this.topMatter = null;
       }
-
+    },
-      this.topMatter = {
+  },
-        type: TopMatterType.FOLDER,
+});
-        list: path
-          .filter((x) => x)
-          .map((x, idx, arr) => {
-            return {
-              text: x,
-              path: arr.slice(0, idx + 1).join("/"),
-            };
-          }),
-      };
-    } else {
-      this.topMatter = null;
-    }
-  }
-}
 </script>
 
 <style lang="scss" scoped>

src/components/top-matter/OnThisDay.vue

@@ -41,8 +41,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -63,7 +62,7 @@ interface IYear {
   text: string;
 }
 
-@Component({
+export default defineComponent({
   name: "OnThisDay",
   components: {
     NcActions,
@@ -71,21 +70,23 @@ interface IYear {
     LeftMoveIcon,
     RightMoveIcon,
   },
-})
-export default class OnThisDay extends Mixins(GlobalMixin) {
-  private getPreviewUrl = getPreviewUrl;
 
-  @Prop()
+  props: {
-  private viewer: any;
+    viewer: {
+      type: Object,
+      required: false,
+    },
+  },
 
-  @Emit("load")
+  data() {
-  onload() {}
+    return {
-
+      getPreviewUrl,
-  private years: IYear[] = [];
+      years: [] as IYear[],
-
+      hasRight: false,
-  private hasRight = false;
+      hasLeft: false,
-  private hasLeft = false;
+      scrollStack: [] as number[],
-  private scrollStack: number[] = [];
+    };
+  },
 
   mounted() {
     const inner = this.$refs.inner as HTMLElement;
@@ -94,112 +95,118 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
     });
 
     this.refresh();
-  }
+  },
 
-  async refresh() {
+  methods: {
-    // Look for cache
+    onload() {
-    const dayIdToday = utils.dateToDayId(new Date());
+      this.$emit("load");
-    const cacheUrl = `/onthisday/${dayIdToday}`;
+    },
-    const cache = await utils.getCachedData<IPhoto[]>(cacheUrl);
-    if (cache) this.process(cache);
 
-    // Network request
+    async refresh() {
-    const photos = await dav.getOnThisDayRaw();
+      // Look for cache
-    utils.cacheData(cacheUrl, photos);
+      const dayIdToday = utils.dateToDayId(new Date());
+      const cacheUrl = `/onthisday/${dayIdToday}`;
+      const cache = await utils.getCachedData<IPhoto[]>(cacheUrl);
+      if (cache) this.process(cache);
 
-    // Check if exactly same as cache
+      // Network request
-    if (
+      const photos = await dav.getOnThisDayRaw();
-      cache?.length === photos.length &&
+      utils.cacheData(cacheUrl, photos);
-      cache.every((p, i) => p.fileid === photos[i].fileid)
-    )
-      return;
-    this.process(photos);
-  }
 
-  async process(photos: IPhoto[]) {
+      // Check if exactly same as cache
-    this.years = [];
+      if (
+        cache?.length === photos.length &&
+        cache.every((p, i) => p.fileid === photos[i].fileid)
+      )
+        return;
+      this.process(photos);
+    },
 
-    let currentYear = 9999;
+    async process(photos: IPhoto[]) {
+      this.years = [];
 
-    for (const photo of photos) {
+      let currentYear = 9999;
-      const dateTaken = utils.dayIdToDate(photo.dayid);
-      const year = dateTaken.getUTCFullYear();
-      photo.key = `${photo.fileid}`;
 
-      if (year !== currentYear) {
+      for (const photo of photos) {
-        this.years.push({
+        const dateTaken = utils.dayIdToDate(photo.dayid);
-          year,
+        const year = dateTaken.getUTCFullYear();
-          url: "",
+        photo.key = `${photo.fileid}`;
-          preview: null,
+
-          photos: [],
+        if (year !== currentYear) {
-          text: utils.getFromNowStr(dateTaken),
+          this.years.push({
-        });
+            year,
-        currentYear = year;
+            url: "",
+            preview: null,
+            photos: [],
+            text: utils.getFromNowStr(dateTaken),
+          });
+          currentYear = year;
+        }
+
+        const yearObj = this.years[this.years.length - 1];
+        yearObj.photos.push(photo);
       }
 
-      const yearObj = this.years[this.years.length - 1];
+      // For each year, randomly choose 10 photos to display
-      yearObj.photos.push(photo);
+      for (const year of this.years) {
-    }
+        year.photos = utils.randomSubarray(year.photos, 10);
-
-    // For each year, randomly choose 10 photos to display
-    for (const year of this.years) {
-      year.photos = utils.randomSubarray(year.photos, 10);
-    }
-
-    // Choose preview photo
-    for (const year of this.years) {
-      // Try to prioritize landscape photos on desktop
-      if (globalThis.windowInnerWidth <= 600) {
-        const landscape = year.photos.filter((p) => p.w > p.h);
-        year.preview = utils.randomChoice(landscape);
       }
 
-      // Get random photo
+      // Choose preview photo
-      year.preview ||= utils.randomChoice(year.photos);
+      for (const year of this.years) {
-      year.url = getPreviewUrl(year.preview, false, 512);
+        // Try to prioritize landscape photos on desktop
-    }
+        if (globalThis.windowInnerWidth <= 600) {
+          const landscape = year.photos.filter((p) => p.w > p.h);
+          year.preview = utils.randomChoice(landscape);
+        }
 
-    await this.$nextTick();
+        // Get random photo
-    this.onScroll();
+        year.preview ||= utils.randomChoice(year.photos);
-    this.onload();
+        year.url = getPreviewUrl(year.preview, false, 512);
-  }
+      }
 
-  moveLeft() {
+      await this.$nextTick();
-    const inner = this.$refs.inner as HTMLElement;
+      this.onScroll();
-    inner.scrollBy(-(this.scrollStack.pop() || inner.clientWidth), 0);
+      this.onload();
-  }
+    },
 
-  moveRight() {
+    moveLeft() {
-    const inner = this.$refs.inner as HTMLElement;
+      const inner = this.$refs.inner as HTMLElement;
-    const innerRect = inner.getBoundingClientRect();
+      inner.scrollBy(-(this.scrollStack.pop() || inner.clientWidth), 0);
-    const nextChild = Array.from(inner.children)
+    },
-      .map((c) => c.getBoundingClientRect())
-      .find((rect) => rect.right > innerRect.right);
 
-    let scroll = nextChild
+    moveRight() {
-      ? nextChild.left - innerRect.left
+      const inner = this.$refs.inner as HTMLElement;
-      : inner.clientWidth;
+      const innerRect = inner.getBoundingClientRect();
-    scroll = Math.min(
+      const nextChild = Array.from(inner.children)
-      inner.scrollWidth - inner.scrollLeft - inner.clientWidth,
+        .map((c) => c.getBoundingClientRect())
-      scroll
+        .find((rect) => rect.right > innerRect.right);
-    );
-    this.scrollStack.push(scroll);
-    inner.scrollBy(scroll, 0);
-  }
 
-  onScroll() {
+      let scroll = nextChild
-    const inner = this.$refs.inner as HTMLElement;
+        ? nextChild.left - innerRect.left
-    if (!inner) return;
+        : inner.clientWidth;
-    this.hasLeft = inner.scrollLeft > 0;
+      scroll = Math.min(
-    this.hasRight =
+        inner.scrollWidth - inner.scrollLeft - inner.clientWidth,
-      inner.clientWidth + inner.scrollLeft < inner.scrollWidth - 20;
+        scroll
-  }
+      );
+      this.scrollStack.push(scroll);
+      inner.scrollBy(scroll, 0);
+    },
 
-  click(year: IYear) {
+    onScroll() {
-    const allPhotos = this.years.flatMap((y) => y.photos);
+      const inner = this.$refs.inner as HTMLElement;
-    this.viewer.openStatic(year.preview, allPhotos, 512);
+      if (!inner) return;
-  }
+      this.hasLeft = inner.scrollLeft > 0;
-}
+      this.hasRight =
+        inner.clientWidth + inner.scrollLeft < inner.scrollWidth - 20;
+    },
+
+    click(year: IYear) {
+      const allPhotos = this.years.flatMap((y) => y.photos);
+      this.viewer.openStatic(year.preview, allPhotos, 512);
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/top-matter/TagTopMatter.vue

@@ -11,41 +11,47 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
 
 import BackIcon from "vue-material-design-icons/ArrowLeft.vue";
 
-@Component({
+export default defineComponent({
+  name: "TagTopMatter",
   components: {
     NcActions,
     NcActionButton,
     BackIcon,
   },
-})
-export default class TagTopMatter extends Mixins(GlobalMixin) {
-  private name: string = "";
 
-  @Watch("$route")
+  data() {
-  async routeChange(from: any, to: any) {
+    return {
-    this.createMatter();
+      name: "",
-  }
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
+  methods: {
-    this.name = this.$route.params.name || "";
+    createMatter() {
-  }
+      this.name = this.$route.params.name || "";
+    },
 
-  back() {
+    back() {
-    this.$router.push({ name: "tags" });
+      this.$router.push({ name: "tags" });
-  }
+    },
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/top-matter/TopMatter.vue

@@ -8,56 +8,63 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
+
 import FolderTopMatter from "./FolderTopMatter.vue";
 import TagTopMatter from "./TagTopMatter.vue";
 import FaceTopMatter from "./FaceTopMatter.vue";
 import AlbumTopMatter from "./AlbumTopMatter.vue";
 
-import GlobalMixin from "../../mixins/GlobalMixin";
 import { TopMatterType } from "../../types";
 
-@Component({
+export default defineComponent({
+  name: "TopMatter",
   components: {
     FolderTopMatter,
     TagTopMatter,
     FaceTopMatter,
     AlbumTopMatter,
   },
-})
-export default class TopMatter extends Mixins(GlobalMixin) {
-  public type: TopMatterType = TopMatterType.NONE;
 
-  @Watch("$route")
+  data() {
-  async routeChange(from: any, to: any) {
+    return {
-    this.setTopMatter();
+      type: TopMatterType.NONE,
-  }
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.setTopMatter();
+    },
+  },
 
   mounted() {
     this.setTopMatter();
-  }
+  },
 
-  /** Create top matter */
+  methods: {
-  setTopMatter() {
+    /** Create top matter */
-    this.type = (() => {
+    setTopMatter() {
-      switch (this.$route.name) {
+      this.type = (() => {
-        case "folders":
+        switch (this.$route.name) {
-          return TopMatterType.FOLDER;
+          case "folders":
-        case "tags":
+            return TopMatterType.FOLDER;
-          return this.$route.params.name
+          case "tags":
-            ? TopMatterType.TAG
+            return this.$route.params.name
-            : TopMatterType.NONE;
+              ? TopMatterType.TAG
-        case "recognize":
+              : TopMatterType.NONE;
-        case "facerecognition":
+          case "recognize":
-          return this.$route.params.name
+          case "facerecognition":
-            ? TopMatterType.FACE
+            return this.$route.params.name
-            : TopMatterType.NONE;
+              ? TopMatterType.FACE
-        case "albums":
+              : TopMatterType.NONE;
-          return TopMatterType.ALBUM;
+          case "albums":
-        default:
+            return TopMatterType.ALBUM;
-          return TopMatterType.NONE;
+          default:
-      }
+            return TopMatterType.NONE;
-    })();
+        }
-  }
+      })();
-}
+    },
+  },
+});
 </script>