Merge branch 'next' into fix_viewer_size

Author: SpliiT

components/RemoteRenderingView.vue

@@ -2,18 +2,7 @@
   <ClientOnly>
     <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
       <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="mb-4 py-2"
+      @click="set_current_step(step_index)"
+    >
+      <v-col cols="auto" class="d-flex justify-center align-center">
         <v-icon
           v-if="current_step_index > step_index"
           icon="mdi-check-circle"
@@ -18,43 +22,54 @@
           color="grey"
         />
       </v-col>
-      <v-col cols="auto">
-        <p class="font-weight-bold">
+      <v-col>
+        <p class="m-0 font-weight-bold">
           {{ steps[step_index].step_title }}
         </p>
       </v-col>
-      <v-col
+      <v-chip-group
         v-if="
           steps[step_index].chips.length && current_step_index >= 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"
           :key="chip_index"
+          class="ma-1"
+          :title="chip"
         >
-          {{ chip }}
+          {{ truncate(chip, 50) }}
         </v-chip>
-      </v-col>
+      </v-chip-group>
     </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>
+  function truncate(text, maxLength) {
+    if (text.length > maxLength) {
+      return text.slice(0, maxLength) + "..."
+    }
+    return text
+  }
+
   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)
 
@@ -76,19 +91,3 @@
     stepper_tree.current_step_index--
   }
 </script>
-
-<style scoped>
-  .slide-fade-enter-active {
-    transition: all 0.5s ease-out;
-  }
-
-  .slide-fade-leave-active {
-    transition: all 0.5s ease-in;
-  }
-
-  .slide-fade-enter-from,
-  .slide-fade-leave-to {
-    transform: translateX(50px);
-    opacity: 0;
-  }
-</style>

components/Stepper.vue

@@ -1,12 +1,19 @@
 <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="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" />
+      </v-col>
+    </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>

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",