@geode/opengeodeweb-front 10.3.2-rc.1 → 10.3.2

package/app/components/DragAndDrop.vue

@@ -1,13 +1,7 @@
 <script setup>
-  const {
-    multiple,
-    accept,
-    loading,
-    showExtensions,
-    idleText,
-    dropText,
-    loadingText,
-  } = defineProps({
+  import GlassCard from "@ogw_front/components/GlassCard"
+
+  const props = defineProps({
     multiple: { type: Boolean, default: false },
     accept: { type: String, default: "" },
     loading: { type: Boolean, default: false },
@@ -41,29 +35,26 @@
 
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <v-card
+    <GlassCard
       v-bind="hoverProps"
-      class="text-center cursor-pointer"
+      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
       :class="{
         'elevation-4': isHovering || isDragging,
         'elevation-0': !(isHovering || isDragging),
       }"
       :style="{
         position: 'relative',
-        overflow: 'hidden',
-        transition: 'all 0.3s ease',
+        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         background:
           isHovering || isDragging
-            ? 'rgba(var(--v-theme-primary), 0.05)'
-            : 'rgba(0, 0, 0, 0.02)',
-        border: `2px dashed ${
-          isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'
-        }`,
+            ? 'rgba(255, 255, 255, 0.08) !important'
+            : 'rgba(255, 255, 255, 0.03) !important',
         transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
         pointerEvents: loading ? 'none' : 'auto',
         opacity: loading ? 0.6 : 1,
       }"
-      rounded="xl"
+      variant="panel"
+      padding="pa-0"
       @click="triggerFileDialog"
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
@@ -72,8 +63,9 @@
       <v-card-text class="pa-8">
         <v-sheet
           class="mx-auto mb-6 d-flex align-center justify-center"
-          :color="isHovering || isDragging ? 'primary' : 'grey-lighten-2'"
-          :elevation="isHovering || isDragging ? 4 : 0"
+          :color="
+            isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'
+          "
           rounded="circle"
           width="80"
           height="80"
@@ -82,16 +74,13 @@
           <v-icon
             :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
             size="40"
-            :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+            :color="isHovering || isDragging ? 'primary' : 'white'"
             :class="{ rotating: loading }"
           />
         </v-sheet>
 
         <v-card-title
-          class="text-h6 font-weight-bold justify-center pa-0 mb-1"
-          :class="
-            isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
-          "
+          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
           style="transition: color 0.3s ease"
         >
           {{ loading ? loadingText : isDragging ? dropText : idleText }}
@@ -110,7 +99,7 @@
         :accept="accept"
         @change="handleFileSelect"
       />
-    </v-card>
+    </GlassCard>
   </v-hover>
 </template>
 

package/app/components/FileUploader.vue

@@ -81,43 +81,60 @@
     @files-selected="processSelectedFiles"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-4">
-    <v-sheet class="d-flex align-center mb-3" color="transparent">
-      <v-icon icon="mdi-file-check" class="mr-2" color="primary" />
-      <span class="text-subtitle-2 font-weight-bold"> Selected Files </span>
-      <v-chip size="x-small" class="ml-2" color="primary" variant="flat">
+  <v-card-text v-if="internal_files.length" class="mt-6">
+    <v-sheet class="d-flex align-center mb-4" color="transparent">
+      <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected Files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
         {{ internal_files.length }}
       </v-chip>
     </v-sheet>
 
-    <v-sheet class="d-flex flex-wrap gap-2" color="transparent">
+    <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
       <v-chip
         v-for="(file, index) in internal_files"
         :key="index"
         closable
-        size="small"
-        color="primary"
-        variant="tonal"
-        class="font-weight-medium"
+        size="default"
+        color="white"
+        variant="outlined"
+        class="font-weight-medium glass-ui border-opacity-10 px-4"
+        style="background: rgba(255, 255, 255, 0.05) !important"
         @click:close="removeFile(index)"
       >
-        <v-icon start size="16">mdi-file-outline</v-icon>
-        {{ file.name }}
+        <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
+        <span class="text-white">{{ file.name }}</span>
+        <template #close>
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+            >mdi-close-circle</v-icon
+          >
+        </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length > 0">
+  <v-card-actions
+    v-if="!auto_upload && internal_files.length"
+    class="mt-6 pa-0"
+  >
     <v-btn
       color="primary"
-      variant="elevated"
+      variant="flat"
       size="large"
-      rounded="lg"
+      rounded="xl"
       :loading="loading"
-      class="text-none px-3 font-weight-bold"
+      class="text-none px-6 font-weight-bold custom-upload-btn"
+      block
       @click="upload_files"
     >
-      <v-icon start size="20">mdi-cloud-upload-outline</v-icon>
+      <v-icon start size="22">mdi-cloud-upload</v-icon>
       Upload {{ internal_files.length }} file<span
         v-if="internal_files.length > 1"
         >s</span

package/app/components/GlassCard.vue

@@ -0,0 +1,50 @@
+<script setup>
+  defineProps({
+    variant: {
+      type: String,
+      default: "panel",
+      validator: (v) => ["panel", "ui"].includes(v),
+    },
+    rounded: { type: String, default: "xl" },
+    padding: { type: String, default: "pa-6" },
+    theme: { type: String, default: null },
+  })
+
+  const attrs = useAttrs()
+  const isInteractive = computed(() => !!attrs.onClick)
+</script>
+
+<template>
+  <v-card
+    v-bind="$attrs"
+    @mousedown.stop
+    @click.stop
+    @dblclick.stop
+    @wheel.stop
+    @contextmenu.stop
+    flat
+    :ripple="isInteractive"
+    :theme="theme || (variant === 'panel' ? 'dark' : undefined)"
+    :class="[
+      variant === 'panel' ? 'glass-panel' : 'glass-ui',
+      'border-thin',
+      `rounded-${rounded}`,
+      padding,
+      { 'cursor-default': !isInteractive },
+    ]"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </v-card>
+</template>
+
+<style scoped>
+  .border-thin {
+    border-style: solid !important;
+  }
+
+  .cursor-default {
+    cursor: default !important;
+  }
+</style>

package/app/components/HybridRenderingView.vue

@@ -1,6 +1,5 @@
 <script setup>
   import VeaseViewToolbar from "@ogw_front/components/VeaseViewToolbar"
-
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
   import { useViewerStore } from "@ogw_front/stores/viewer"
 
@@ -52,7 +51,7 @@
 
 <template>
   <ClientOnly>
-    <div class="fill-height" style="position: relative">
+    <div class="fill-height" style="position: relative; height: 100%">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col

package/app/components/RemoteRenderingView.vue

@@ -101,7 +101,7 @@
 
 <template>
   <ClientOnly>
-    <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
+    <div style="position: relative; width: 100%; height: 100%">
       <ViewToolbar />
       <slot name="ui"></slot>
       <v-col

package/app/components/Screenshot.vue

@@ -1,5 +1,6 @@
 <script setup>
   import fileDownload from "js-file-download"
+  import GlassCard from "@ogw_front/components/GlassCard"
   import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
   import { useViewerStore } from "@ogw_front/stores/viewer"
@@ -46,49 +47,59 @@
   })
 </script>
 <template>
-  <OptionCard
+  <GlassCard
     v-if="show_dialog"
+    @click.stop
     title="Take a screenshot"
     :width="width"
-    class="position-absolute"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute elevation-24"
     style="z-index: 2; top: 90px; right: 55px"
   >
-    <v-container>
-      <v-row>
-        <v-col cols="8" class="py-0">
-          <v-text-field v-model="filename" label="File name"></v-text-field>
-        </v-col>
-        <v-col cols="4" class="py-0">
-          <v-select
-            v-model="output_extension"
-            :items="output_extensions"
-            label="Extension"
-            required
-          />
-        </v-col>
-      </v-row>
+    <v-card-text class="pa-5">
+      <v-container>
+        <v-row>
+          <v-col cols="8" class="py-0">
+            <v-text-field v-model="filename" label="File name"></v-text-field>
+          </v-col>
+          <v-col cols="4" class="py-0">
+            <v-select
+              v-model="output_extension"
+              :items="output_extensions"
+              label="Extension"
+              required
+            />
+          </v-col>
+        </v-row>
 
-      <v-row>
-        <v-col cols="12" class="py-0">
-          <v-switch
-            v-model="include_background"
-            :disabled="output_extension !== 'png'"
-            label="Include background"
-            inset
-          ></v-switch>
-        </v-col>
-      </v-row>
-    </v-container>
+        <v-row>
+          <v-col cols="12" class="py-0">
+            <v-switch
+              v-model="include_background"
+              :disabled="output_extension !== 'png'"
+              label="Include background"
+              inset
+            ></v-switch>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
 
     <template #actions>
-      <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
-      <v-btn
-        variant="outlined"
-        :disabled="!filename || !output_extension"
-        color="white"
-        @click="takeScreenshot()"
-        >Screenshot</v-btn
-      >
+      <v-card-actions class="justify-center pb-4">
+        <v-btn variant="text" color="primary" @click="emit('close')"
+          >Close</v-btn
+        >
+        <v-btn
+          variant="outlined"
+          :disabled="!filename || !output_extension"
+          color="primary"
+          @click="takeScreenshot()"
+          >Screenshot</v-btn
+        >
+      </v-card-actions>
     </template>
-  </OptionCard>
+  </GlassCard>
 </template>

package/app/components/Stepper.vue

@@ -8,16 +8,19 @@
 
 <template>
   <v-card-item class="flex-shrink-0 pa-0">
-    <v-card-title
-      class="text-h4 text-primary px-8 pt-6 pb-4 font-weight-bold d-flex align-center"
-    >
-      <v-icon icon="mdi-file-upload-outline" class="mr-3" />
-      Import Data
-    </v-card-title>
-
-    <v-card-subtitle class="px-8 pb-4 text-medium">
-      Choose a file to import.
-    </v-card-subtitle>
+    <div class="px-8 pt-8 pb-4">
+      <div class="d-flex align-center mb-2">
+        <v-icon
+          icon="mdi-file-upload-outline"
+          class="mr-3 title-text"
+          size="32"
+        />
+        <h2 class="title-text">Import Data</h2>
+      </div>
+      <p class="text-white text-body-1">
+        Select and configure your files for a seamless import.
+      </p>
+    </div>
   </v-card-item>
 
   <v-stepper-vertical
@@ -25,7 +28,7 @@
     @update:model-value="current_step_index = $event - 1"
     flat
     non-linear
-    class="pa-0 ma-0 bg-white rounded-xl overflow-hidden"
+    class="pa-0 ma-0 bg-transparent rounded-xl overflow-hidden custom-stepper"
   >
     <Step
       v-for="(step, index) in steps"
@@ -35,3 +38,33 @@
     />
   </v-stepper-vertical>
 </template>
+
+<style scoped>
+  .custom-stepper :deep(.v-stepper-vertical-item) {
+    background: transparent !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item__content) {
+    background: rgba(255, 255, 255, 0.03) !important;
+    border-radius: 12px;
+    margin: 8px 16px 16px 40px !important;
+    padding: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .custom-stepper :deep(.v-avatar) {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: white !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item--active .v-avatar) {
+    background: #3c9983 !important;
+    border-color: #3c9983;
+    color: #0a0f0e !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item__connector) {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+</style>

package/app/components/Viewer/ContextMenuItem.vue

@@ -1,7 +1,7 @@
 <script setup>
-  import { useElementSize } from "@vueuse/core"
-  import { useMenuStore } from "@ogw_front/stores/menu"
+  import GlassCard from "@ogw_front/components/GlassCard"
   import { useTheme } from "vuetify"
+  import { useMenuStore } from "@ogw_front/stores/menu"
 
   const CARD_WIDTH = 320
   const CARD_HEIGHT = 500
@@ -99,9 +99,20 @@
       color="transparent"
       @click.stop
     >
-      <OptionCard :title="tooltip" width="320" :max-height="maxCardHeight">
-        <slot name="options" />
-      </OptionCard>
+      <GlassCard
+        @click.stop
+        :title="tooltip"
+        width="320"
+        :max-height="maxCardHeight"
+        :ripple="false"
+        variant="panel"
+        padding="pa-0"
+        class="elevation-24"
+      >
+        <v-card-text class="pa-5">
+          <slot name="options" />
+        </v-card-text>
+      </GlassCard>
     </v-sheet>
   </v-sheet>
 </template>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -113,15 +113,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -114,15 +114,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -89,15 +89,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -88,15 +88,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>

package/app/components/Viewer/Tree/ObjectTree.vue

@@ -40,6 +40,7 @@
     class="treeview-container"
     :style="{ width: `${treeviewStore.panelWidth}px` }"
     @contextmenu.prevent
+    @mousedown.stop
   >
     <v-row
       class="resizable-panel"

package/app/components/ZScaling.vue

@@ -1,54 +1,64 @@
 <script setup>
+  import GlassCard from "@ogw_front/components/GlassCard"
+
   const zScale = defineModel({ type: Number, default: 1 })
   const { width } = defineProps({
     width: { type: Number, default: 400 },
   })
 </script>
 <template>
-  <OptionCard
+  <GlassCard
+    @click.stop
     title="Z Scaling Control"
     :width="width"
-    class="position-absolute rounded-xl"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute rounded-xl elevation-24"
     style="z-index: 2; top: 90px; right: 55px"
   >
-    <v-container>
-      <v-row>
-        <v-col cols="12" class="py-2">
-          <v-slider
-            v-model="zScale"
-            :min="1"
-            :max="10"
-            :step="0.2"
-            label="Z Scale"
-            thumb-label
-            color="white"
-            track-color="white"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col cols="12" class="py-2">
-          <v-text-field
-            v-model.number="zScale"
-            type="number"
-            label="Z Scale Value"
-            outlined
-            dense
-            hide-details
-            step="0.1"
-            :min="1"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
+    <v-card-text class="pa-5">
+      <v-container>
+        <v-row>
+          <v-col cols="12" class="py-2">
+            <v-slider
+              v-model="zScale"
+              :min="1"
+              :max="10"
+              :step="0.2"
+              label="Z Scale"
+              thumb-label
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12" class="py-2">
+            <v-text-field
+              v-model.number="zScale"
+              type="number"
+              label="Z Scale Value"
+              outlined
+              dense
+              hide-details
+              step="0.1"
+              :min="1"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
 
     <template #actions>
-      <v-btn variant="text" color="white" @click="$emit('close')">Close</v-btn>
-      <v-btn variant="outlined" color="white" @click="$emit('close')"
-        >Apply</v-btn
-      >
+      <v-card-actions class="justify-center pb-4">
+        <v-btn variant="text" color="white" @click="$emit('close')"
+          >Close</v-btn
+        >
+        <v-btn variant="outlined" color="white" @click="$emit('close')"
+          >Apply</v-btn
+        >
+      </v-card-actions>
     </template>
-  </OptionCard>
+  </GlassCard>
 </template>
 
 <style scoped>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geode/opengeodeweb-front",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "type": "module",
-  "version": "10.3.2-rc.1",
+  "version": "10.3.2",
   "main": "./nuxt.config.js",
   "scripts": {
     "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
@@ -14,8 +14,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "next",
-    "@geode/opengeodeweb-viewer": "next",
+    "@geode/opengeodeweb-back": "latest",
+    "@geode/opengeodeweb-viewer": "latest",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",
     "@pinia/nuxt": "0.11.3",

package/tests/integration/microservices/viewer/requirements.txt

@@ -5,4 +5,4 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.15.3rc1
+opengeodeweb-viewer==1.*,>=1.15.3

package/app/components/OptionCard.vue

@@ -1,55 +0,0 @@
-<script setup>
-  import { useTheme } from "vuetify"
-
-  const theme = useTheme()
-  const primaryColor = computed(() => theme.current.value.colors.primary)
-
-  const { title, width, maxHeight } = defineProps({
-    title: { type: String, default: "" },
-    width: { type: [Number, String], default: 320 },
-    maxHeight: { type: [Number, String], default: 500 },
-  })
-</script>
-<template>
-  <v-card
-    @click.stop
-    :title="title"
-    class="option-card rounded-xl border-thin elevation-24"
-    :width="width"
-    :max-height="maxHeight"
-    :ripple="false"
-    theme="dark"
-  >
-    <v-card-text class="pa-5">
-      <slot />
-    </v-card-text>
-    <v-card-actions v-if="$slots.actions" class="justify-center pb-4">
-      <slot name="actions" />
-    </v-card-actions>
-  </v-card>
-</template>
-
-<style scoped>
-  .option-card {
-    background-color: rgba(30, 30, 30, 0.85) !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-color: rgba(255, 255, 255, 0.15) !important;
-  }
-
-  ::v-deep(.v-list-item:hover) {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-
-  ::v-deep(.v-slider-track__fill),
-  ::v-deep(.v-selection-control--dirty .v-switch__track) {
-    background-color: v-bind(primaryColor) !important;
-  }
-
-  ::v-deep(.v-btn) {
-    border-radius: 8px;
-    text-transform: none;
-    font-weight: 500;
-    letter-spacing: normal;
-  }
-</style>