@geode/opengeodeweb-front 10.22.0-rc.2 → 10.22.0-rc.3

package/app/components/FileSelector.vue

@@ -64,7 +64,7 @@ await get_allowed_files();
       accept,
       files: internal_files,
       auto_upload: internal_auto_upload,
-      show_overlay,
+      showOverlay: show_overlay,
     }"
     @files_uploaded="files_uploaded_event"
   />

package/app/components/Step.vue

@@ -6,34 +6,15 @@ function truncate(text, maxLength) {
   return text;
 }
 
-const { step_index } = defineProps({
+const { step_index, stepper_tree } = defineProps({
   step_index: { type: Number, required: true },
+  stepper_tree: { type: Object, required: true },
 });
 
 const emit = defineEmits(["reset_values"]);
 
-const stepper_tree = inject("stepper_tree");
-const { current_step_index, steps } = toRefs(stepper_tree);
-
-watch(current_step_index, (newVal, oldVal) => {
-  if (newVal < oldVal) {
-    stepper_tree.navigating_back = true;
-  }
-});
-
-function update_values_event(keys_values_object) {
-  for (const [key, value] of Object.entries(keys_values_object)) {
-    stepper_tree[key] = value;
-  }
-}
-
-function increment_step() {
-  stepper_tree.current_step_index += 1;
-}
-
-function decrement_step() {
-  stepper_tree.current_step_index -= 1;
-}
+const { state, increment_step, decrement_step, update_values } = stepper_tree;
+const { current_step_index, steps } = toRefs(state);
 
 const sortedChips = computed(() => {
   const chips = steps.value[step_index]?.chips || [];
@@ -92,7 +73,7 @@ const sortedChips = computed(() => {
         v-bind="steps[step_index].component.component_options"
         @increment_step="increment_step"
         @decrement_step="decrement_step"
-        @update_values="update_values_event"
+        @update_values="update_values"
         @reset_values="emit('reset_values')"
       />
     </v-card-text>

package/app/components/Stepper.vue

@@ -2,8 +2,11 @@
 import Step from "@ogw_front/components/Step";
 
 const emit = defineEmits(["reset_values", "close"]);
-const stepper_tree = inject("stepper_tree");
-const { steps, current_step_index } = toRefs(stepper_tree);
+const { stepper_tree } = defineProps({
+  stepper_tree: { type: Object, required: true },
+});
+const { state } = stepper_tree;
+const { steps, current_step_index } = toRefs(state);
 </script>
 
 <template>
@@ -28,6 +31,7 @@ const { steps, current_step_index } = toRefs(stepper_tree);
       v-for="(step, index) in steps"
       :key="index"
       :step_index="index"
+      :stepper_tree="stepper_tree"
       @reset_values="emit('reset_values')"
     />
   </v-stepper-vertical>

package/app/composables/stepper_tree.js

@@ -0,0 +1,56 @@
+export function useStepperTree(steps, initial_state = {}) {
+  const initial_state_unref = {};
+  for (const [key, value] of Object.entries(initial_state)) {
+    const unref_val = unref(value);
+    if (Array.isArray(unref_val)) {
+      initial_state_unref[key] = [...unref_val];
+    } else {
+      initial_state_unref[key] = unref_val;
+    }
+  }
+  const state = reactive({
+    current_step_index: 0,
+    navigating_back: false,
+    steps,
+    ...initial_state,
+  });
+
+  watch(
+    () => state.current_step_index,
+    (newVal, oldVal) => {
+      if (newVal < oldVal) {
+        state.navigating_back = true;
+      }
+    },
+  );
+
+  function update_values(keys_values_object) {
+    for (const [key, value] of Object.entries(keys_values_object)) {
+      state[key] = value;
+    }
+  }
+
+  function increment_step() {
+    state.current_step_index += 1;
+  }
+
+  function decrement_step() {
+    state.current_step_index -= 1;
+  }
+
+  function reset_values() {
+    state.current_step_index = 0;
+    state.navigating_back = false;
+    for (const [key, initial_val] of Object.entries(initial_state_unref)) {
+      state[key] = Array.isArray(initial_val) ? [...initial_val] : initial_val;
+    }
+  }
+
+  return {
+    state,
+    update_values,
+    increment_step,
+    decrement_step,
+    reset_values,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.22.0-rc.2",
+  "version": "10.22.0-rc.3",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

package/tests/unit/components/Step.nuxt.test.js

@@ -1,10 +1,11 @@
-import { computed, reactive, ref, shallowRef } from "vue";
+import { computed, ref, shallowRef } from "vue";
 import { describe, expect, test } from "vitest";
 import ResizeObserver from "resize-observer-polyfill";
 import { mount } from "@vue/test-utils";
 
 import ObjectSelector from "@ogw_front/components/ObjectSelector";
 import Step from "@ogw_front/components/Step";
+import { useStepperTree } from "@ogw_front/composables/stepper_tree.js";
 
 import { vuetify } from "@ogw_tests/utils";
 
@@ -14,10 +15,8 @@ describe("step", () => {
   test("brep", () => {
     const geode_object_type = ref("BRep");
     const files = ref([]);
-    const stepper_tree = reactive({
-      current_step_index: ref(0),
-      geode_object_type,
-      steps: [
+    const stepper_tree = useStepperTree(
+      [
         {
           step_title: "Confirm the data type",
           component: {
@@ -30,13 +29,13 @@ describe("step", () => {
           chips: computed(() => [geode_object_type.value].filter((chip) => chip !== "")),
         },
       ],
-    });
+      { geode_object_type },
+    );
     const wrapper = mount(Step, {
       global: {
         plugins: [vuetify],
-        provide: { stepper_tree },
       },
-      props: { step_index: 0 },
+      props: { step_index: 0, stepper_tree },
     });
     expect(wrapper.exists()).toBe(true);
   });

package/tests/unit/components/Stepper.nuxt.test.js

@@ -1,15 +1,12 @@
-// Third party imports
-import { computed, reactive, ref, shallowRef } from "vue";
+import { computed, ref, shallowRef } from "vue";
 import { describe, expect, test } from "vitest";
-import ResizeObserver from "resize-observer-polyfill";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { useStepperTree } from "@ogw_front/composables/stepper_tree.js";
+import { vuetify } from "@ogw_tests/utils";
 
-// Local imports
 import ObjectSelector from "@ogw_front/components/ObjectSelector";
+import ResizeObserver from "resize-observer-polyfill";
 import Stepper from "@ogw_front/components/Stepper";
-import { vuetify } from "@ogw_tests/utils";
-
-const FIRST_INDEX = 0;
 
 globalThis.ResizeObserver = ResizeObserver;
 
@@ -17,10 +14,8 @@ describe("stepper", () => {
   test("mount", async () => {
     const geode_object_type = ref("BRep");
     const files = ref([]);
-    const stepper_tree = reactive({
-      current_step_index: ref(FIRST_INDEX),
-      geode_object_type,
-      steps: [
+    const stepper_tree = useStepperTree(
+      [
         {
           step_title: "Confirm the data type",
           component: {
@@ -33,12 +28,13 @@ describe("stepper", () => {
           chips: computed(() => [geode_object_type.value].filter((chip) => chip !== "")),
         },
       ],
-    });
+      { geode_object_type },
+    );
     const wrapper = await mountSuspended(Stepper, {
       global: {
         plugins: [vuetify],
-        provide: { stepper_tree },
       },
+      props: { stepper_tree },
     });
     expect(wrapper.exists()).toBe(true);
   });