Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Editor/MentionList.vue

@@ -12,70 +12,64 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
+<script lang="ts" setup>
+import { usernameWithDomain } from "@/types/actor/actor.model";
 import { IPerson } from "@/types/actor";
 import ActorInline from "../../components/Account/ActorInline.vue";
+import { ref, watch } from "vue";
 
-@Component({
-  components: {
-    ActorInline,
-  },
-})
-export default class MentionList extends Vue {
-  @Prop({ type: Array, required: true }) items!: Array<IPerson>;
-  @Prop({ type: Function, required: true }) command!: any;
+const props = defineProps<{
+  items: IPerson[];
+  command: ({ id }: { id: string }) => {};
+}>();
 
-  selectedIndex = 0;
+// @Prop({ type: Function, required: true }) command!: any;
 
-  displayName = displayName;
+const selectedIndex = ref(0);
 
-  @Watch("items")
-  watchItems(): void {
-    this.selectedIndex = 0;
+watch(props.items, () => {
+  selectedIndex.value = 0;
+});
+
+const onKeyDown = ({ event }: { event: KeyboardEvent }): boolean => {
+  if (event.key === "ArrowUp") {
+    upHandler();
+    return true;
   }
 
-  onKeyDown({ event }: { event: KeyboardEvent }): boolean {
-    if (event.key === "ArrowUp") {
-      this.upHandler();
-      return true;
-    }
-
-    if (event.key === "ArrowDown") {
-      this.downHandler();
-      return true;
-    }
-
-    if (event.key === "Enter") {
-      this.enterHandler();
-      return true;
-    }
-
-    return false;
+  if (event.key === "ArrowDown") {
+    downHandler();
+    return true;
   }
 
-  upHandler(): void {
-    this.selectedIndex =
-      (this.selectedIndex + this.items.length - 1) % this.items.length;
+  if (event.key === "Enter") {
+    enterHandler();
+    return true;
   }
 
-  downHandler(): void {
-    this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
-  }
+  return false;
+};
 
-  enterHandler(): void {
-    this.selectItem(this.selectedIndex);
-  }
+const upHandler = (): void => {
+  selectedIndex.value =
+    (selectedIndex.value + props.items.length - 1) % props.items.length;
+};
 
-  selectItem(index: number): void {
-    const item = this.items[index];
+const downHandler = (): void => {
+  selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+};
 
-    if (item) {
-      this.command({ id: usernameWithDomain(item) });
-    }
+const enterHandler = (): void => {
+  selectItem(selectedIndex.value);
+};
+
+const selectItem = (index: number): void => {
+  const item = props.items[index];
+
+  if (item) {
+    props.command({ id: usernameWithDomain(item) });
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>