remove class vue dep (2)

src/components/frame/Photo.vue

@@ -67,8 +67,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator";
+import { defineComponent, PropType } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import { getPreviewUrl } from "../../services/FileUtils";
 import { IDay, IPhoto } from "../../types";
@@ -80,38 +79,48 @@ import Star from "vue-material-design-icons/Star.vue";
 import Video from "vue-material-design-icons/PlayCircleOutline.vue";
 import LivePhoto from "vue-material-design-icons/MotionPlayOutline.vue";
 
-@Component({
+export default defineComponent({
+  name: "Photo",
   components: {
     CheckCircle,
     Video,
     Star,
     LivePhoto,
   },
-})
-export default class Photo extends Mixins(GlobalMixin) {
-  private touchTimer = 0;
-  private src = null;
-  private hasFaceRect = false;
 
-  @Prop() data: IPhoto;
+  props: {
-  @Prop() day: IDay;
+    data: {
+      type: Object as PropType<IPhoto>,
+      required: true,
+    },
+    day: {
+      type: Object as PropType<IDay>,
+      required: true,
+    },
+  },
 
-  @Emit("select") emitSelect(data: IPhoto) {}
+  data() {
+    return {
+      touchTimer: 0,
+      src: null,
+      hasFaceRect: false,
+    };
+  },
 
-  @Watch("data")
+  watch: {
-  onDataChange(newData: IPhoto, oldData: IPhoto) {
+    data(newData: IPhoto, oldData: IPhoto) {
       // Copy flags relevant to this component
       if (oldData && newData) {
         newData.flag |=
           oldData.flag & (this.c.FLAG_SELECTED | this.c.FLAG_LOAD_FAIL);
       }
-  }
+    },
 
-  @Watch("data.etag")
+    "data.etag": function () {
-  onEtagChange() {
       this.hasFaceRect = false;
       this.refresh();
-  }
+    },
+  },
 
   mounted() {
     this.hasFaceRect = false;
@@ -122,24 +131,36 @@ export default class Photo extends Mixins(GlobalMixin) {
     if (video) {
       utils.setupLivePhotoHooks(video);
     }
-  }
+  },
 
-  get videoDuration() {
+  /** Clear timers */
+  beforeUnmount() {
+    clearTimeout(this.touchTimer);
+  },
+
+  computed: {
+    videoDuration() {
       if (this.data.video_duration) {
         return utils.getDurationStr(this.data.video_duration);
       }
       return null;
-  }
+    },
 
-  get videoUrl() {
+    videoUrl() {
       if (this.data.liveid) {
         return utils.getLivePhotoVideoUrl(this.data, true);
       }
-  }
+    },
+  },
+
+  methods: {
+    emitSelect(data: IPhoto) {
+      this.$emit("select", data);
+    },
 
     async refresh() {
       this.src = await this.getSrc();
-  }
+    },
 
     /** Get src for image to show */
     async getSrc() {
@@ -150,7 +171,7 @@ export default class Photo extends Mixins(GlobalMixin) {
       } else {
         return this.url();
       }
-  }
+    },
 
     /** Get url of the photo */
     url() {
@@ -177,7 +198,7 @@ export default class Photo extends Mixins(GlobalMixin) {
       }
 
       return getPreviewUrl(this.data, false, size);
-  }
+    },
 
     /** Set src with overlay face rect */
     async addFaceRect() {
@@ -207,33 +228,28 @@ export default class Photo extends Mixins(GlobalMixin) {
         "image/jpeg",
         0.95
       );
-  }
+    },
 
     /** Post load tasks */
     load() {
       this.addFaceRect();
-  }
+    },
 
     /** Error in loading image */
     error(e: any) {
       this.data.flag |= this.c.FLAG_LOAD_FAIL;
       this.refresh();
-  }
+    },
-
-  /** Clear timers */
-  beforeUnmount() {
-    clearTimeout(this.touchTimer);
-  }
 
     toggleSelect() {
       if (this.data.flag & this.c.FLAG_PLACEHOLDER) return;
       this.emitSelect(this.data);
-  }
+    },
 
     contextmenu(e: Event) {
       e.preventDefault();
       e.stopPropagation();
-  }
+    },
 
     /** Start preview video */
     playVideo() {
@@ -242,7 +258,7 @@ export default class Photo extends Mixins(GlobalMixin) {
         video.currentTime = 0;
         video.play();
       }
-  }
+    },
 
     /** Stop preview video */
     stopVideo() {
@@ -250,8 +266,9 @@ export default class Photo extends Mixins(GlobalMixin) {
         const video = this.$refs.video as HTMLVideoElement;
         video.pause();
       }
-  }
+    },
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/frame/Tag.vue

@@ -29,34 +29,36 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Mixins, Emit } from "vue-property-decorator";
+import { defineComponent, PropType } from "vue";
+
 import { IAlbum, ITag } from "../../types";
 import { getPreviewUrl } from "../../services/FileUtils";
 import { getCurrentUser } from "@nextcloud/auth";
 
 import NcCounterBubble from "@nextcloud/vue/dist/Components/NcCounterBubble";
 
-import GlobalMixin from "../../mixins/GlobalMixin";
 import { constants } from "../../services/Utils";
 import { API } from "../../services/API";
 
-@Component({
+export default defineComponent({
+  name: "Tag",
   components: {
     NcCounterBubble,
   },
-})
-export default class Tag extends Mixins(GlobalMixin) {
-  @Prop() data: ITag;
-  @Prop() noNavigate: boolean;
 
-  /**
+  props: {
-   * Open tag event
+    data: {
-   * Unless noNavigate is set, the tag will be opened
+      type: Object as PropType<ITag>,
-   */
+      required: true,
-  @Emit("open")
+    },
-  openTag(tag: ITag) {}
+    noNavigate: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-  get previewUrl() {
+  computed: {
+    previewUrl() {
       if (this.face) {
         return API.FACE_PREVIEW(this.faceApp, this.face.fileid);
       }
@@ -67,37 +69,37 @@ export default class Tag extends Mixins(GlobalMixin) {
       }
 
       return API.TAG_PREVIEW(this.data.name);
-  }
+    },
 
-  get subtitle() {
+    subtitle() {
       if (this.album && this.album.user !== getCurrentUser()?.uid) {
         return `(${this.album.user})`;
       }
 
       return "";
-  }
+    },
 
-  get face() {
+    face() {
       return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNIZE ||
         this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
         ? this.data
         : null;
-  }
+    },
 
-  get faceApp() {
+    faceApp() {
       return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
         ? "facerecognition"
         : "recognize";
-  }
+    },
 
-  get album() {
+    album() {
       return this.data.flag & constants.c.FLAG_IS_ALBUM
         ? <IAlbum>this.data
         : null;
-  }
+    },
 
     /** Target URL to navigate to */
-  get target() {
+    target() {
       if (this.noNavigate) return {};
 
       if (this.face) {
@@ -113,15 +115,25 @@ export default class Tag extends Mixins(GlobalMixin) {
       }
 
       return { name: "tags", params: { name: this.data.name } };
-  }
+    },
 
-  get error() {
+    error() {
       return (
         Boolean(this.data.flag & this.c.FLAG_LOAD_FAIL) ||
         Boolean(this.album && this.album.last_added_photo <= 0)
       );
-  }
+    },
-}
+  },
+  methods: {
+    /**
+     * Open tag event
+     * Unless noNavigate is set, the tag will be opened
+     */
+    openTag(tag: ITag) {
+      this.$emit("open", tag);
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/modal/AddToAlbumModal.vue

@@ -20,8 +20,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import * as dav from "../../services/DavRequests";
 import { showInfo } from "@nextcloud/dialogs";
@@ -30,36 +29,42 @@ import { IAlbum, IPhoto } from "../../types";
 import AlbumPicker from "./AlbumPicker.vue";
 import Modal from "./Modal.vue";
 
-@Component({
+export default defineComponent({
+  name: "AddToAlbumModal",
   components: {
     Modal,
     AlbumPicker,
   },
-})
-export default class AddToAlbumModal extends Mixins(GlobalMixin) {
-  private show = false;
-  private photos: IPhoto[] = [];
-  private photosDone: number = 0;
-  private processing: boolean = false;
 
-  public open(photos: IPhoto[]) {
+  data() {
+    return {
+      show: false,
+      photos: [] as IPhoto[],
+      photosDone: 0,
+      processing: false,
+    };
+  },
+
+  methods: {
+    open(photos: IPhoto[]) {
       this.photosDone = 0;
       this.processing = false;
       this.show = true;
       this.photos = photos;
-  }
+    },
 
-  @Emit("added")
+    added(photos: IPhoto[]) {
-  public added(photos: IPhoto[]) {}
+      this.$emit("added", photos);
+    },
 
-  @Emit("close")
+    close() {
-  public close() {
       this.photos = [];
       this.processing = false;
       this.show = false;
-  }
+      this.$emit("close");
+    },
 
-  public async selectAlbum(album: IAlbum) {
+    async selectAlbum(album: IAlbum) {
       const name = album.name || album.album_id.toString();
       const gen = dav.addToAlbum(album.user, name, this.photos);
       this.processing = true;
@@ -80,8 +85,9 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
         )
       );
       this.close();
-  }
+    },
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/modal/AlbumCollaborators.vue

@@ -141,8 +141,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
+import { defineComponent, PropType } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import Magnify from "vue-material-design-icons/Magnify.vue";
 import Close from "vue-material-design-icons/Close.vue";
@@ -173,7 +172,8 @@ type Collaborator = {
   type: Type;
 };
 
-@Component({
+export default defineComponent({
+  name: "AddToAlbumModal",
   components: {
     Magnify,
     Close,
@@ -188,28 +188,43 @@ type Collaborator = {
     NcPopover,
     NcEmptyContent,
   },
-})
-export default class AddToAlbumModal extends Mixins(GlobalMixin) {
-  @Prop() private albumName: string;
-  @Prop() collaborators: Collaborator[];
-  @Prop() allowPublicLink: boolean;
 
-  private searchText = "";
+  props: {
-  private availableCollaborators: { [key: string]: Collaborator } = {};
+    albumName: {
-  private selectedCollaboratorsKeys: string[] = [];
+      type: String,
-  private currentSearchResults = [];
+      required: true,
-  private loadingAlbum = false;
+    },
-  private errorFetchingAlbum = null;
+    collaborators: {
-  private loadingCollaborators = false;
+      type: Array as PropType<Collaborator[]>,
-  private errorFetchingCollaborators = null;
+      required: true,
-  private randomId = Math.random().toString().substring(2, 10);
+    },
-  private publicLinkCopied = false;
+    allowPublicLink: {
-  private config = {
+      type: Boolean,
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      searchText: "",
+      availableCollaborators: {} as { [key: string]: Collaborator },
+      selectedCollaboratorsKeys: [] as string[],
+      currentSearchResults: [] as Collaborator[],
+      loadingAlbum: false,
+      errorFetchingAlbum: null,
+      loadingCollaborators: false,
+      errorFetchingCollaborators: null,
+      randomId: Math.random().toString().substring(2, 10),
+      publicLinkCopied: false,
+      config: {
         minSearchStringLength:
           parseInt(window.OC.config["sharing.minSearchStringLength"], 10) || 0,
+      },
     };
+  },
 
-  get searchResults(): string[] {
+  computed: {
+    searchResults(): string[] {
       return this.currentSearchResults
         .filter(({ id }) => id !== getCurrentUser()?.uid)
         .map(({ type, id }) => `${type}:${id}`)
@@ -217,40 +232,42 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
           (collaboratorKey) =>
             !this.selectedCollaboratorsKeys.includes(collaboratorKey)
         );
-  }
+    },
 
-  get listableSelectedCollaboratorsKeys(): string[] {
+    listableSelectedCollaboratorsKeys(): string[] {
       return this.selectedCollaboratorsKeys.filter(
         (collaboratorKey) =>
           this.availableCollaborators[collaboratorKey].type !==
           Type.SHARE_TYPE_LINK
       );
-  }
+    },
 
-  get selectedCollaborators(): Collaborator[] {
+    selectedCollaborators(): Collaborator[] {
       return this.selectedCollaboratorsKeys.map(
         (collaboratorKey) => this.availableCollaborators[collaboratorKey]
       );
-  }
+    },
 
-  get isPublicLinkSelected(): boolean {
+    isPublicLinkSelected(): boolean {
       return this.selectedCollaboratorsKeys.includes(`${Type.SHARE_TYPE_LINK}`);
-  }
+    },
 
-  get publicLink(): Collaborator {
+    publicLink(): Collaborator {
       return this.availableCollaborators[Type.SHARE_TYPE_LINK];
-  }
+    },
-
+  },
-  @Watch("collaborators")
+  watch: {
-  collaboratorsChanged(collaborators) {
+    collaborators(collaborators) {
       this.populateCollaborators(collaborators);
-  }
+    },
+  },
 
   mounted() {
     this.searchCollaborators();
     this.populateCollaborators(this.collaborators);
-  }
+  },
 
+  methods: {
     /**
      * Fetch possible collaborators.
      */
@@ -276,7 +293,8 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
           }
         );
 
-      this.currentSearchResults = response.data.ocs.data.map((collaborator) => {
+        this.currentSearchResults = response.data.ocs.data.map(
+          (collaborator) => {
             switch (collaborator.source) {
               case "users":
                 return {
@@ -295,7 +313,8 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
                   `Invalid collaborator source ${collaborator.source}`
                 );
             }
-      });
+          }
+        );
 
         this.availableCollaborators = {
           ...this.availableCollaborators,
@@ -307,7 +326,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
       } finally {
         this.loadingCollaborators = false;
       }
-  }
+    },
 
     /**
      * Populate selectedCollaboratorsKeys and availableCollaborators.
@@ -327,7 +346,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
         ...this.availableCollaborators,
         ...initialCollaborators,
       };
-  }
+    },
 
     /**
      * @param {Object<string, Collaborator>} collaborators - Index of collaborators
@@ -344,7 +363,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
         }${collaborator.type === Type.SHARE_TYPE_LINK ? "" : collaborator.id}`]:
           collaborator,
       };
-  }
+    },
 
     async createPublicLinkForAlbum() {
       this.selectEntity(`${Type.SHARE_TYPE_LINK}`);
@@ -369,7 +388,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
       } finally {
         this.loadingAlbum = false;
       }
-  }
+    },
 
     async deletePublicLink() {
       this.unselectEntity(`${Type.SHARE_TYPE_LINK}`);
@@ -380,7 +399,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
       };
       this.publicLinkCopied = false;
       await this.updateAlbumCollaborators();
-  }
+    },
 
     async updateAlbumCollaborators() {
       try {
@@ -399,7 +418,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
       } finally {
         this.loadingAlbum = false;
       }
-  }
+    },
 
     async copyPublicLink() {
       await navigator.clipboard.writeText(
@@ -411,7 +430,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
       setTimeout(() => {
         this.publicLinkCopied = false;
       }, 10000);
-  }
+    },
 
     selectEntity(collaboratorKey) {
       if (this.selectedCollaboratorsKeys.includes(collaboratorKey)) {
@@ -420,7 +439,7 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
 
       (<any>this.$refs.popover).$refs.popover.hide();
       this.selectedCollaboratorsKeys.push(collaboratorKey);
-  }
+    },
 
     unselectEntity(collaboratorKey) {
       const index = this.selectedCollaboratorsKeys.indexOf(collaboratorKey);
@@ -430,8 +449,9 @@ export default class AddToAlbumModal extends Mixins(GlobalMixin) {
       }
 
       this.selectedCollaboratorsKeys.splice(index, 1);
-  }
+    },
-}
+  },
+});
 </script>
 <style lang="scss" scoped>
 .manage-collaborators {

src/components/modal/AlbumCreateModal.vue

@@ -21,8 +21,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import { showError } from "@nextcloud/dialogs";
 import * as dav from "../../services/DavRequests";
@@ -30,21 +29,26 @@ import * as dav from "../../services/DavRequests";
 import Modal from "./Modal.vue";
 import AlbumForm from "./AlbumForm.vue";
 
-@Component({
+export default defineComponent({
+  name: "AlbumCreateModal",
   components: {
     Modal,
     AlbumForm,
   },
-})
-export default class AlbumCreateModal extends Mixins(GlobalMixin) {
-  private show = false;
-  private album: any = null;
 
+  data() {
+    return {
+      show: false,
+      album: null as any,
+    };
+  },
+
+  methods: {
     /**
      * Open the modal
      * @param edit If true, the modal will be opened in edit mode
      */
-  public async open(edit: boolean) {
+    async open(edit: boolean) {
       if (edit) {
         try {
           this.album = await dav.getAlbum(
@@ -61,22 +65,23 @@ export default class AlbumCreateModal extends Mixins(GlobalMixin) {
       }
 
       this.show = true;
-  }
+    },
 
-  @Emit("close")
+    close() {
-  public close() {
       this.show = false;
-  }
+      this.$emit("close");
+    },
 
-  public done({ album }: any) {
+    done({ album }: any) {
       if (!this.album || album.basename !== this.album.basename) {
         const user = album.filename.split("/")[2];
         const name = album.basename;
         this.$router.push({ name: "albums", params: { user, name } });
       }
       this.close();
-  }
+    },
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/modal/AlbumDeleteModal.vue

@@ -23,58 +23,66 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
+
 import NcButton from "@nextcloud/vue/dist/Components/NcButton";
 const NcTextField = () => import("@nextcloud/vue/dist/Components/NcTextField");
 import { showError } from "@nextcloud/dialogs";
 import { getCurrentUser } from "@nextcloud/auth";
 import Modal from "./Modal.vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 import client from "../../services/DavClient";
 
-@Component({
+export default defineComponent({
+  name: "AlbumDeleteModal",
   components: {
     NcButton,
     NcTextField,
     Modal,
   },
-})
-export default class AlbumDeleteModal extends Mixins(GlobalMixin) {
-  private user: string = "";
-  private name: string = "";
-  private show = false;
 
-  @Emit("close")
+  data() {
-  public close() {
+    return {
+      show: false,
+      user: "",
+      name: "",
+    };
+  },
+
+  watch: {
+    $route: async function (from: any, to: any) {
+      this.refreshParams();
+    },
+  },
+
+  mounted() {
+    this.refreshParams();
+  },
+
+  methods: {
+    close() {
       this.show = false;
-  }
+      this.$emit("close");
+    },
 
-  public open() {
+    open() {
       const user = this.$route.params.user || "";
       if (this.$route.params.user !== getCurrentUser()?.uid) {
         showError(
-        this.t("memories", 'Only user "{user}" can delete this album', { user })
+          this.t("memories", 'Only user "{user}" can delete this album', {
+            user,
+          })
         );
         return;
       }
       this.show = true;
-  }
+    },
 
-  @Watch("$route")
+    refreshParams() {
-  async routeChange(from: any, to: any) {
-    this.refreshParams();
-  }
-
-  mounted() {
-    this.refreshParams();
-  }
-
-  public refreshParams() {
       this.user = this.$route.params.user || "";
       this.name = this.$route.params.name || "";
-  }
+    },
 
-  public async save() {
+    async save() {
       try {
         await client.deleteFile(`/photos/${this.user}/albums/${this.name}`);
         this.$router.push({ name: "albums" });
@@ -87,6 +95,7 @@ export default class AlbumDeleteModal extends Mixins(GlobalMixin) {
           })
         );
       }
-  }
+    },
-}
+  },
+});
 </script>

src/components/modal/AlbumForm.vue

@@ -97,8 +97,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop } from "vue-property-decorator";
+import { defineComponent, PropType } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import { getCurrentUser } from "@nextcloud/auth";
 import NcButton from "@nextcloud/vue/dist/Components/NcButton";
@@ -112,7 +111,8 @@ import AlbumCollaborators from "./AlbumCollaborators.vue";
 import Send from "vue-material-design-icons/Send.vue";
 import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.vue";
 
-@Component({
+export default defineComponent({
+  name: "AlbumForm",
   components: {
     NcButton,
     NcLoadingIcon,
@@ -122,35 +122,48 @@ import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.v
     Send,
     AccountMultiplePlus,
   },
-})
-export default class AlbumForm extends Mixins(GlobalMixin) {
-  @Prop() private album: any;
-  @Prop() private displayBackButton: boolean;
 
-  private showCollaboratorView = false;
+  props: {
-  private albumName = "";
+    album: {
-  private albumLocation = "";
+      type: Object as PropType<any>,
-  private loading = false;
+      default: null,
+    },
+    displayBackButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
+  data() {
+    return {
+      showCollaboratorView: false,
+      albumName: "",
+      albumLocation: "",
+      loading: false,
+    };
+  },
+
+  computed: {
     /**
      * @return Whether sharing is enabled.
      */
-  get editMode(): boolean {
+    editMode(): boolean {
       return Boolean(this.album);
-  }
+    },
 
-  get saveText(): string {
+    saveText(): string {
       return this.editMode
         ? this.t("photos", "Save")
         : this.t("photos", "Create album");
-  }
+    },
 
     /**
      * @return Whether sharing is enabled.
      */
-  get sharingEnabled(): boolean {
+    sharingEnabled(): boolean {
       return window.OC.Share !== undefined;
-  }
+    },
+  },
 
   mounted() {
     if (this.editMode) {
@@ -158,10 +171,11 @@ export default class AlbumForm extends Mixins(GlobalMixin) {
       this.albumLocation = this.album.location;
     }
     this.$nextTick(() => {
-      (<any>this.$refs.nameInput).$el.getElementsByTagName("input")[0].focus();
+      (<any>this.$refs.nameInput)?.$el.getElementsByTagName("input")[0].focus();
     });
-  }
+  },
 
+  methods: {
     submit(collaborators = []) {
       if (this.albumName === "" || this.loading) {
         return;
@@ -171,7 +185,7 @@ export default class AlbumForm extends Mixins(GlobalMixin) {
       } else {
         this.handleCreateAlbum(collaborators);
       }
-  }
+    },
 
     async handleCreateAlbum(collaborators = []) {
       try {
@@ -201,7 +215,7 @@ export default class AlbumForm extends Mixins(GlobalMixin) {
       } finally {
         this.loading = false;
       }
-  }
+    },
 
     async handleUpdateAlbum() {
       try {
@@ -223,11 +237,13 @@ export default class AlbumForm extends Mixins(GlobalMixin) {
       } finally {
         this.loading = false;
       }
-  }
+    },
 
-  @Emit("back")
+    back() {
-  back() {}
+      this.$emit("back");
-}
+    },
+  },
+});
 </script>
 <style lang="scss" scoped>
 .album-form {

src/components/modal/AlbumPicker.vue

@@ -57,8 +57,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
+
 import { getCurrentUser } from "@nextcloud/auth";
 
 import AlbumForm from "./AlbumForm.vue";
@@ -74,7 +74,8 @@ import { IAlbum, IPhoto } from "../../types";
 import axios from "@nextcloud/axios";
 import { API } from "../../services/API";
 
-@Component({
+export default defineComponent({
+  name: "AlbumPicker",
   components: {
     AlbumForm,
     Plus,
@@ -83,6 +84,7 @@ import { API } from "../../services/API";
     NcListItem,
     NcLoadingIcon,
   },
+
   filters: {
     toCoverUrl(fileId: string) {
       return getPreviewUrl(
@@ -94,27 +96,31 @@ import { API } from "../../services/API";
       );
     },
   },
-})
+
-export default class AlbumPicker extends Mixins(GlobalMixin) {
+  data() {
-  private showAlbumCreationForm = false;
+    return {
-  private albums: IAlbum[] = [];
+      showAlbumCreationForm: false,
-  private loadingAlbums = true;
+      albums: [] as IAlbum[],
+      loadingAlbums: true,
+    };
+  },
 
   mounted() {
     this.loadAlbums();
-  }
+  },
 
+  methods: {
     albumCreatedHandler() {
       this.showAlbumCreationForm = false;
       this.loadAlbums();
-  }
+    },
 
     getAlbumName(album: IAlbum) {
       if (album.user === getCurrentUser()?.uid) {
         return album.name;
       }
       return `${album.name} (${album.user})`;
-  }
+    },
 
     async loadAlbums() {
       try {
@@ -125,11 +131,13 @@ export default class AlbumPicker extends Mixins(GlobalMixin) {
       } finally {
         this.loadingAlbums = false;
       }
-  }
+    },
 
-  @Emit("select")
+    pickAlbum(album: IAlbum) {
-  pickAlbum(album: IAlbum) {}
+      this.$emit("select", album);
-}
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/modal/AlbumShareModal.vue

@@ -28,8 +28,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
+import { defineComponent } from "vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 
 import NcButton from "@nextcloud/vue/dist/Components/NcButton";
 import NcLoadingIcon from "@nextcloud/vue/dist/Components/NcLoadingIcon";
@@ -39,33 +38,38 @@ import * as dav from "../../services/DavRequests";
 import Modal from "./Modal.vue";
 import AlbumCollaborators from "./AlbumCollaborators.vue";
 
-@Component({
+export default defineComponent({
+  name: "AlbumShareModal",
   components: {
     NcButton,
     NcLoadingIcon,
     Modal,
     AlbumCollaborators,
   },
-})
-export default class AlbumShareModal extends Mixins(GlobalMixin) {
-  private album: any = null;
-  private show = false;
-  private loadingAddCollaborators = false;
 
-  @Emit("close")
+  data() {
-  public close() {
+    return {
+      album: null as any,
+      show: false,
+      loadingAddCollaborators: false,
+    };
+  },
+
+  methods: {
+    close() {
       this.show = false;
       this.album = null;
-  }
+      this.$emit("close");
+    },
 
-  public async open() {
+    async open() {
       this.show = true;
       this.loadingAddCollaborators = true;
       const user = this.$route.params.user || "";
       const name = this.$route.params.name || "";
       this.album = await dav.getAlbum(user, name);
       this.loadingAddCollaborators = false;
-  }
+    },
 
     async handleSetCollaborators(collaborators: any[]) {
       try {
@@ -80,6 +84,7 @@ export default class AlbumShareModal extends Mixins(GlobalMixin) {
       } finally {
         this.loadingAddCollaborators = false;
       }
-  }
+    },
-}
+  },
+});
 </script>