refactor: convert src/components/TextSwap.vue from class-based to Opt…

…ions/Composition API (#503)

Summary:
The conversion process involved:
1. Replacing the class-based syntax with Options API
2. Moving the @prop decorator to props option
3. Moving the class property to data()
4. Moving the class method to methods option
5. Using defineComponent for better TypeScript support
6. Properly typing the props Array as string[]

The conversion is straightforward as this is a relatively simple
component without complex inheritance or lifecycle hooks.

Warnings:
No warnings - this component has no base class dependencies or complex
functionality that would cause issues during conversion.

packages/vue/src/components/TextSwap.vue

@@ -5,30 +5,43 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
-
-@Component({})
-export default class TextSwap extends Vue {
-  @Prop({
-    type: Array,
-    required: true,
-  })
-  private text: string[];
-  private index: number = 0;
-
-  public next() {
-    if (this.text.length > 1) {
-      const previous = this.index;
-      // this.index = -1; // triggering animation
-      // this.index = previous;
-      while (this.index === previous) {
-        this.index = Math.floor(Math.random() * this.text.length);
-      }
-    }
-  }
+import { defineComponent } from 'vue';
+
+export interface ITextSwap extends Vue {
+  next: () => void;
+  text: string[];
+  index: number;
 }
+
+export default defineComponent({
+  name: 'TextSwap',
+
+  props: {
+    text: {
+      type: Array as () => string[],
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      index: 0,
+    };
+  },
+
+  methods: {
+    next() {
+      if (this.text.length > 1) {
+        const previous = this.index;
+        // this.index = -1; // triggering animation
+        // this.index = previous;
+        while (this.index === previous) {
+          this.index = Math.floor(Math.random() * this.text.length);
+        }
+      }
+    },
+  },
+});
 </script>
 
 <style scoped>

packages/vue/src/views/Home.vue

@@ -38,6 +38,7 @@ import UserLogin from '../components/UserLogin.vue';
 import TextSwap from '@/components/TextSwap.vue';
 import { Status } from '@/enums/Status';
 import Vue from 'vue';
+import { ITextSwap } from '@/components/TextSwap.vue';
 
 interface Data {
   swapIntervalID: number | null;
@@ -66,12 +67,12 @@ export default Vue.extend({
   },
 
   computed: {
-    swaps(): TextSwap[] {
+    swaps(): ITextSwap[] {
       return [
-        this.$refs.swap1 as TextSwap,
-        this.$refs.swap2 as TextSwap,
-        this.$refs.swap3 as TextSwap,
-        this.$refs.swap4 as TextSwap,
+        this.$refs.swap1 as ITextSwap,
+        this.$refs.swap2 as ITextSwap,
+        this.$refs.swap3 as ITextSwap,
+        this.$refs.swap4 as ITextSwap,
       ];
     },
   },