migrate steps bar to composition API and typescript

src/components/desktop/StepsBar.vue

@@ -43,42 +43,49 @@
     </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'
-    ],
-    computed: {
-        isClickable() {
-            return this.clickable !== 'false' && this.clickable !== false;
 }
-    },
+
-    methods: {
+const props = defineProps<{
-        changeStep(step) {
+    steps: StepBarItem[]
-            if (this.isClickable) {
+    currentStep: string
-                this.$emit('step:change', step.name);
+    clickable?: string | boolean
+    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);
     }
-        },
+}
-        isStepActive(step) {
+
-            return this.currentStep === step.name;
+function isStepActive(step: StepBarItem): boolean {
-        },
+    return props.currentStep === step.name;
-        isStepCompleted(stepIndex) {
+}
-            for (let i = 0; i < this.steps.length; i++) {
+
-                if (this.steps[i].name === this.currentStep) {
+function isStepCompleted(stepIndex: number): boolean {
+    for (let i = 0; i < props.steps.length; i++) {
+        if (props.steps[i].name === props.currentStep) {
             return stepIndex < i;
         }
     }
 
     return false;
 }
-    }
-}
 </script>
 
 <style>