migrate steps bar to composition API and typescript

src/components/desktop/StepsBar.vue

@@ -43,41 +43,48 @@
     </v-slide-group>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed } from 'vue';
-    props: [
+
-        'steps',
+interface StepBarItem {
-        'currentStep',
+    name: string;
-        'clickable',
+    title: string;
-        'minWidth'
+    subTitle: string;
-    ],
+}
-    emits: [
+
-        'step:change'
+const props = defineProps<{
-    ],
+    steps: StepBarItem[]
-    computed: {
+    currentStep: string
-        isClickable() {
+    clickable?: string | boolean
-            return this.clickable !== 'false' && this.clickable !== false;
+    minWidth: string | number
+}>();
+
+const emit = defineEmits<{
+    (e: 'step:change', stepName: string): void
+}>();
+
+const isClickable = computed<boolean>(() => {
+    return props.clickable !== 'false' && props.clickable !== false;
+});
+
+function changeStep(step: StepBarItem): void {
+    if (isClickable.value) {
+        emit('step:change', step.name);
     }
-    },
+}
-    methods: {
+
-        changeStep(step) {
+function isStepActive(step: StepBarItem): boolean {
-            if (this.isClickable) {
+    return props.currentStep === step.name;
-                this.$emit('step:change', step.name);
+}
-            }
+
-        },
+function isStepCompleted(stepIndex: number): boolean {
-        isStepActive(step) {
+    for (let i = 0; i < props.steps.length; i++) {
-            return this.currentStep === step.name;
+        if (props.steps[i].name === props.currentStep) {
-        },
-        isStepCompleted(stepIndex) {
-            for (let i = 0; i < this.steps.length; i++) {
-                if (this.steps[i].name === this.currentStep) {
             return stepIndex < i;
         }
     }
 
     return false;
-        }
-    }
 }
 </script>