fix(stepper): Fix the stepper's animation & style

Author: SpliiT

components/Step.vue

@@ -1,7 +1,11 @@
 <template>
-  <v-card class="pa-5">
-    <v-row align="center" @click="set_current_step(step_index)">
-      <v-col cols="auto">
+  <v-stepper-content :step="step_index + 1">
+    <v-row
+      align="center"
+      class="step-container"
+      @click="set_current_step(step_index)"
+    >
+      <v-col cols="auto" class="icon-container">
         <v-icon
           v-if="current_step_index > step_index"
           icon="mdi-check-circle"
@@ -18,43 +22,45 @@
           color="grey"
         />
       </v-col>
-      <v-col cols="auto">
-        <p class="font-weight-bold">
+      <v-col class="title-container">
+        <p class="step-title font-weight-bold">
           {{ steps[step_index].step_title }}
         </p>
       </v-col>
       <v-col
         v-if="
           steps[step_index].chips.length && current_step_index >= step_index
         "
+        class="chips-container"
       >
         <v-chip
           v-for="(chip, chip_index) in steps[step_index].chips"
           :key="chip_index"
+          class="step-chip"
         >
           {{ chip }}
         </v-chip>
       </v-col>
     </v-row>
-    <Transition name="slide-fade">
-      <v-col v-if="step_index == current_step_index">
-        <component
-          :is="steps[step_index].component.component_name"
-          v-bind="steps[step_index].component.component_options"
-          @update_values="update_values_event"
-          @increment_step="increment_step()"
-          @decrement_step="decrement_step()"
-        />
-      </v-col>
+    <Transition name="slide-fade" mode="out-in">
+      <component
+        v-if="step_index == current_step_index"
+        :key="step_index"
+        :is="steps[step_index].component.component_name"
+        v-bind="steps[step_index].component.component_options"
+        @update_values="update_values_event"
+        @increment_step="increment_step"
+        @decrement_step="decrement_step"
+      />
     </Transition>
-  </v-card>
+  </v-stepper-content>
 </template>
 
 <script setup>
   const props = defineProps({
     step_index: { type: Number, required: true },
   })
-  const { step_index } = props
+
   const stepper_tree = inject("stepper_tree")
   const { current_step_index, steps } = toRefs(stepper_tree)
 
@@ -78,17 +84,31 @@
 </script>
 
 <style scoped>
-  .slide-fade-enter-active {
-    transition: all 0.5s ease-out;
+  .step-container {
+    margin-bottom: 16px;
+    padding: 8px;
+  }
+
+  .icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .title-container {
+    margin-left: 8px;
+  }
+
+  .step-title {
+    margin: 0;
   }
 
-  .slide-fade-leave-active {
-    transition: all 0.5s ease-in;
+  .chips-container {
+    display: flex;
+    gap: 4px;
   }
 
-  .slide-fade-enter-from,
-  .slide-fade-leave-to {
-    transform: translateX(50px);
-    opacity: 0;
+  .step-chip {
+    background-color: #f5f5f5;
   }
 </style>

components/Stepper.vue

@@ -1,12 +1,23 @@
 <template>
-  <v-card class="card">
-    <div v-for="(step, index) in steps" :key="index" class="pa-3">
-      <Step :step_index="index" />
-    </div>
-  </v-card>
+  <v-stepper-vertical v-model="current_step_index" class="stepper-container">
+    <v-stepper-items>
+      <Step v-for="(step, index) in steps" :key="index" :step_index="index" />
+    </v-stepper-items>
+  </v-stepper-vertical>
 </template>
 
 <script setup>
   const stepper_tree = inject("stepper_tree")
-  const { steps } = stepper_tree
+  const { steps, current_step_index } = toRefs(stepper_tree)
 </script>
+
+<style scoped>
+  .stepper-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 16px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+  }
+</style>