Merge pull request #165 from Geode-solutions/next

Next

Author: JulienChampagnol

components/RemoteRenderingView.vue

@@ -2,18 +2,7 @@
   <ClientOnly>
     <div style="position: relative; width: 100%; height: 100%">
       <view-toolbar />
-      <div
-        style="
-          position: absolute;
-          z-index: 2;
-          left: 0;
-          top: 0;
-          background-color: transparent;
-          border-radius: 16px;
-        "
-      >
-        <slot name="tree-object"></slot>
-      </div>
+      <slot name="ui"></slot>
       <v-col
         ref="viewer"
         style="
@@ -26,9 +15,7 @@
         class="pa-0"
         @click="get_x_y"
         @keydown.esc="app_store.toggle_picking_mode(false)"
-      >
-        <slot name="ui"></slot>
-      </v-col>
+      />
     </div>
   </ClientOnly>
 </template>

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,43 @@
           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>
-  </v-card>
+    <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>
 
 <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 +82,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="step" :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>

package.json

@@ -7,10 +7,9 @@
     "geode_objects": "node scripts/generate_geode_objects.js && prettier ./assets/geode_objects.js --write"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "^3.14.3",
-    "@pinia/testing": "^0.1.6",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@nuxt/test-utils": "^3.15.1",
+    "@pinia/testing": "^0.1.7",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
@@ -20,16 +19,16 @@
     "eslint-plugin-vue": "^9.26.0",
     "eslint-plugin-vuetify": "^2.4.0",
     "happy-dom": "^15.11.7",
-    "jsdom": "^24.1.0",
+    "jsdom": "^24.1.3",
     "nuxt": "^3.13.2",
     "playwright-core": "^1.44.1",
     "prettier": "3.3.2",
     "resize-observer-polyfill": "^1.5.1",
-    "vite": "^5.2.13",
-    "vite-plugin-vuetify": "^2.0.3",
-    "vitest": "^1.6.0",
-    "vitest-environment-nuxt": "^1.0.0",
-    "vuetify": "^3.7.2",
+    "vite": "^5.4.11",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vitest": "^2.1.8",
+    "vitest-environment-nuxt": "^1.0.1",
+    "vuetify": "^3.7.5",
     "wslink": "1.12.4"
   },
   "overrides": {
@@ -41,7 +40,7 @@
   "main": "./nuxt.config.js",
   "dependencies": {
     "@geode/opengeodeweb-back": "5.4.0",
-    "@geode/opengeodeweb-viewer": "1.0.0",
+    "@geode/opengeodeweb-viewer": "1.1.0",
     "@kitware/vtk.js": "30.3.1",
     "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.5.4",

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()
     })