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 GlobalMixin from "../../mixins/GlobalMixin";
-import UserConfig from "../../mixins/UserConfig";
+import { defineComponent } from "vue";
 
 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,36 +106,43 @@ import { API } from "../../services/API";
     PlusIcon,
     ShareIcon,
   },
-})
-export default class AlbumTopMatter extends Mixins(GlobalMixin, UserConfig) {
-  private name: string = "";
 
-  get isAlbumList() {
+  data() {
+    return {
+      name: "",
+    };
+  },
+
+  computed: {
+    isAlbumList() {
       return !Boolean(this.$route.params.name);
-  }
+    },
 
-  get canEditAlbum() {
+    canEditAlbum() {
       return (
         !this.isAlbumList && this.$route.params.user === getCurrentUser()?.uid
       );
-  }
+    },
+  },
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
+  watch: {
+    $route: async function (from: any, to: any) {
       this.createMatter();
-  }
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
+  methods: {
     createMatter() {
       this.name = this.$route.params.name || this.t("memories", "Albums");
-  }
+    },
 
     back() {
       this.$router.push({ name: "albums" });
-  }
+    },
 
     async downloadAlbum() {
       const res = await axios.post(
@@ -145,8 +151,9 @@ export default class AlbumTopMatter extends Mixins(GlobalMixin, UserConfig) {
       if (res.status === 200 && 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 GlobalMixin from "../../mixins/GlobalMixin";
-import UserConfig from "../../mixins/UserConfig";
+import { defineComponent } from "vue";
 
 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,26 +80,31 @@ import MergeIcon from "vue-material-design-icons/Merge.vue";
     DeleteIcon,
     MergeIcon,
   },
-})
-export default class FaceTopMatter extends Mixins(GlobalMixin, UserConfig) {
-  private name: string = "";
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
+  data() {
+    return {
+      name: "",
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
       this.createMatter();
-  }
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
+  methods: {
     createMatter() {
       this.name = this.$route.params.name || "";
-  }
+    },
 
     back() {
       this.$router.push({ name: this.$route.name });
-  }
+    },
 
     changeShowFaceRect() {
       localStorage.setItem(
@@ -110,8 +114,9 @@ export default class FaceTopMatter extends Mixins(GlobalMixin, UserConfig) {
       setTimeout(() => {
         this.$router.go(0); // refresh page
       }, 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,19 +58,24 @@ import ShareIcon from "vue-material-design-icons/ShareVariant.vue";
     HomeIcon,
     ShareIcon,
   },
-})
-export default class FolderTopMatter extends Mixins(GlobalMixin) {
-  private topMatter?: TopMatterFolder = null;
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
+  data() {
+    return {
+      topMatter: null as TopMatterFolder | null,
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
       this.createMatter();
-  }
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
+  methods: {
     createMatter() {
       if (this.$route.name === "folders") {
         let path: any = this.$route.params.path || "";
@@ -93,8 +97,9 @@ export default class FolderTopMatter extends Mixins(GlobalMixin) {
       } 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 GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 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()
-  private viewer: any;
+  props: {
+    viewer: {
+      type: Object,
+      required: false,
+    },
+  },
 
-  @Emit("load")
-  onload() {}
-
-  private years: IYear[] = [];
-
-  private hasRight = false;
-  private hasLeft = false;
-  private scrollStack: number[] = [];
+  data() {
+    return {
+      getPreviewUrl,
+      years: [] as IYear[],
+      hasRight: false,
+      hasLeft: false,
+      scrollStack: [] as number[],
+    };
+  },
 
   mounted() {
     const inner = this.$refs.inner as HTMLElement;
@@ -94,7 +95,12 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
     });
 
     this.refresh();
-  }
+  },
+
+  methods: {
+    onload() {
+      this.$emit("load");
+    },
 
     async refresh() {
       // Look for cache
@@ -114,7 +120,7 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
       )
         return;
       this.process(photos);
-  }
+    },
 
     async process(photos: IPhoto[]) {
       this.years = [];
@@ -162,12 +168,12 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
       await this.$nextTick();
       this.onScroll();
       this.onload();
-  }
+    },
 
     moveLeft() {
       const inner = this.$refs.inner as HTMLElement;
       inner.scrollBy(-(this.scrollStack.pop() || inner.clientWidth), 0);
-  }
+    },
 
     moveRight() {
       const inner = this.$refs.inner as HTMLElement;
@@ -185,7 +191,7 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
       );
       this.scrollStack.push(scroll);
       inner.scrollBy(scroll, 0);
-  }
+    },
 
     onScroll() {
       const inner = this.$refs.inner as HTMLElement;
@@ -193,13 +199,14 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
       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 GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 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")
-  async routeChange(from: any, to: any) {
+  data() {
+    return {
+      name: "",
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
       this.createMatter();
-  }
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
+  methods: {
     createMatter() {
       this.name = this.$route.params.name || "";
-  }
+    },
 
     back() {
       this.$router.push({ name: "tags" });
-  }
-}
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/top-matter/TopMatter.vue

@@ -8,35 +8,41 @@
 </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")
-  async routeChange(from: any, to: any) {
+  data() {
+    return {
+      type: TopMatterType.NONE,
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
       this.setTopMatter();
-  }
+    },
+  },
 
   mounted() {
     this.setTopMatter();
-  }
+  },
 
+  methods: {
     /** Create top matter */
     setTopMatter() {
       this.type = (() => {
@@ -58,6 +64,7 @@ export default class TopMatter extends Mixins(GlobalMixin) {
             return TopMatterType.NONE;
         }
       })();
-  }
-}
+    },
+  },
+});
 </script>