From 0d0ef5b7534eda4da4f04a4dfd5d44c3e2d6dd3f Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 30 Dec 2024 13:38:53 +0100
Subject: [PATCH 1/3] fix(stepper): Fix the stepper's animation & style

---
 components/Step.vue    | 70 +++++++++++++++++++++++++++---------------
 components/Stepper.vue | 23 ++++++++++----
 2 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/components/Step.vue b/components/Step.vue
index 5472e26c..eb7def98 100644
--- a/components/Step.vue
+++ b/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,8 +22,8 @@
           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>
@@ -27,34 +31,36 @@
         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>
diff --git a/components/Stepper.vue b/components/Stepper.vue
index aa7c83e0..a4aaa2ac 100644
--- a/components/Stepper.vue
+++ b/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>

From 018fac8f2a4cab32193756a4764f23fea2940ff8 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 31 Dec 2024 10:11:36 +0100
Subject: [PATCH 2/3] edit test : fileselector

---
 components/Stepper.vue                    | 2 +-
 test/components/FileSelector.nuxt.test.js | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/Stepper.vue b/components/Stepper.vue
index a4aaa2ac..87c8325c 100644
--- a/components/Stepper.vue
+++ b/components/Stepper.vue
@@ -1,7 +1,7 @@
 <template>
   <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" />
+      <Step v-for="(step, index) in steps" :key="step" :step_index="index" />
     </v-stepper-items>
   </v-stepper-vertical>
 </template>
diff --git a/test/components/FileSelector.nuxt.test.js b/test/components/FileSelector.nuxt.test.js
index 8d9698c5..82587e16 100644
--- a/test/components/FileSelector.nuxt.test.js
+++ b/test/components/FileSelector.nuxt.test.js
@@ -97,7 +97,7 @@ describe("FileSelector.vue", async () => {
       })
 
       await flushPromises()
-      expect(wrapper.componentVM.files).toEqual(files)
+      expect(wrapper.componentVM.props.files).toEqual(files)
       expect(wrapper.emitted()).toHaveProperty("update_values")
       expect(wrapper.emitted().update_values).toHaveLength(1)
       expect(wrapper.emitted().update_values[0][0]).toEqual({
@@ -123,8 +123,7 @@ describe("FileSelector.vue", async () => {
       await flushPromises()
 
       const file_uploader = wrapper.findComponent(FileUploader)
-      console.log("wrapper", wrapper)
-      expect(wrapper.vm.files).toEqual(files)
+      expect(wrapper.vm.props.files).toEqual(files)
       const upload_files = vi.spyOn(file_uploader.vm, "upload_files")
       expect(upload_files).not.toHaveBeenCalled()
     })

From c9b0555dd7c50281ceb9aef0ed8be130c669ffd8 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 31 Dec 2024 10:57:15 +0100
Subject: [PATCH 3/3] rv useless trasition

---
 components/Step.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/Step.vue b/components/Step.vue
index eb7def98..0b744bb1 100644
--- a/components/Step.vue
+++ b/components/Step.vue
@@ -42,17 +42,15 @@
         </v-chip>
       </v-col>
     </v-row>
-    <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>
+    <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"
+    />
   </v-stepper-content>
 </template>