save wip

Author: JulienChampagnol

components/Step.vue

@@ -1,43 +1,43 @@
 <template>
-  <v-stepper-content :step="step_index + 1">
+  <v-stepper-content :step="props.step_index + 1">
     <v-row
       align="center"
       class="mb-4 py-2"
-      @click="set_current_step(step_index)"
+      @click="set_current_step(props.step_index)"
     >
       <v-col cols="auto" class="d-flex justify-center align-center">
         <v-icon
-          v-if="current_step_index > step_index"
+          v-if="props.active_step_index > props.step_index"
           icon="mdi-check-circle"
           color="grey"
         />
         <v-icon
-          v-else-if="current_step_index == step_index"
-          :icon="`mdi-numeric-${step_index + 1}-circle`"
+          v-else-if="props.active_step_index == props.step_index"
+          :icon="`mdi-numeric-${props.step_index + 1}-circle`"
           color="primary"
         />
         <v-icon
           v-else
-          :icon="`mdi-numeric-${step_index + 1}-circle`"
+          :icon="`mdi-numeric-${props.step_index + 1}-circle`"
           color="grey"
         />
       </v-col>
       <v-col>
         <p class="m-0 font-weight-bold">
-          {{ steps[step_index].step_title }}
+          {{ props.step.title }}
         </p>
       </v-col>
       <v-chip-group
         v-if="
-          steps[step_index].chips.length && current_step_index >= step_index
+          props.step.chips.length && props.active_step_index >= props.step_index
         "
         column
         class="d-flex flex-wrap ma-2 overflow-y-auto"
         multiple
         style="max-height: 150px"
       >
         <v-chip
-          v-for="(chip, chip_index) in steps[step_index].chips"
+          v-for="(chip, chip_index) in props.step.chips"
           :key="chip_index"
           class="ma-1"
           :title="chip"
@@ -47,18 +47,21 @@
       </v-chip-group>
     </v-row>
     <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"
+      v-if="props.step_index == props.active_step_index"
+      :key="props.step_index"
+      :is="props.step.component.component_name"
+      v-bind="props.step.component.component_options"
       @update_values="update_values_event"
-      @increment_step="increment_step"
-      @decrement_step="decrement_step"
+      @reset_values="emit('reset_values')"
+      @increment_step="increment_step()"
+      @decrement_step="decrement_step()"
     />
   </v-stepper-content>
 </template>
 
 <script setup>
+  const emit = defineEmits(["reset_values"])
+
   function truncate(text, maxLength) {
     if (text.length > maxLength) {
       return text.slice(0, maxLength) + "..."
@@ -68,18 +71,20 @@
 
   const props = defineProps({
     step_index: { type: Number, required: true },
+    active_step_index: { type: Number, required: true },
+    step: { type: Object, required: true },
   })
 
-  const stepper_tree = inject("stepper_tree")
-  const { current_step_index, steps } = toRefs(stepper_tree)
-
   function set_current_step(step_index) {
     stepper_tree.current_step_index = step_index
   }
 
   function update_values_event(keys_values_object) {
     for (const [key, value] of Object.entries(keys_values_object)) {
       stepper_tree[key] = value
+      console.log("key", key)
+      console.log("value", value)
+      console.log("stepper_tree[key]", stepper_tree[key])
     }
   }
 

components/Stepper.vue

@@ -1,19 +1,29 @@
 <template>
   <v-stepper-vertical
-    v-model="current_step_index"
+    v-model="props.stepper_tree.current_step_index"
     class="pa-4 ma-0"
     elevation="1"
     rounded
   >
     <v-stepper-items>
       <v-col cols="12">
-        <Step v-for="(step, index) in steps" :key="step" :step_index="index" />
+        <Step
+          v-for="(step, index) in props.stepper_tree.steps"
+          :key="step"
+          :step_index="index"
+          :step="step"
+          :active_step_index="props.stepper_tree.current_step_index"
+          @reset_values="emit('reset_values')"
+        />
       </v-col>
     </v-stepper-items>
   </v-stepper-vertical>
 </template>
 
 <script setup>
-  const stepper_tree = inject("stepper_tree")
-  const { steps, current_step_index } = toRefs(stepper_tree)
+  const emit = defineEmits(["reset_values"])
+
+  const props = defineProps({
+    stepper_tree: { type: Object, required: true },
+  })
 </script>