@geode/opengeodeweb-front 10.33.3-rc.1 → 10.33.3-rc.2

package/app/components/Viewer/ObjectTree/Base/ItemLabel.vue

@@ -2,6 +2,7 @@
 import { middleTruncate } from "@ogw_front/utils/string";
 import { useClipboard } from "@vueuse/core";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
+import { useResponsiveMiddleTruncate } from "@ogw_front/composables/responsive_middle_truncate";
 
 const feedbackStore = useFeedbackStore();
 const { copy } = useClipboard();
@@ -18,33 +19,20 @@ const { width: containerWidth } = useElementSize(labelContainer);
 
 const actualItem = computed(() => item.raw || item);
 
-const UUID_END_CHARS = 12;
-const ELLIPSIS_LENGTH = 3;
-const MIN_START_CHARS = 4;
+const TOOLTIP_NAME_MAX_LENGTH = 40;
+const TOOLTIP_NAME_START_CHARS = 10;
+const TOOLTIP_NAME_END_CHARS = 8;
 
-const displayTitle = computed(() => {
-  const { title } = actualItem.value;
-  if (!title) {
-    return "";
-  }
-
-  // Estimate max characters based on width (approx 9px per char for typical font)
-  // We subtract some padding/icon space
-  const estimatedCharWidth = 8.5;
-  const maxChars = Math.floor(containerWidth.value / estimatedCharWidth);
-
-  // Only truncate if the text is longer than what fits
-  if (title.length <= maxChars) {
-    return title;
-  }
-
-  // Calculate dynamic start/end based on available space
-  // For UUIDs, showing the last 12 characters is often useful
-  const endChars = Math.min(UUID_END_CHARS, Math.floor(maxChars / ELLIPSIS_LENGTH));
-  const startChars = Math.max(MIN_START_CHARS, maxChars - endChars - ELLIPSIS_LENGTH);
+const displayTitle = useResponsiveMiddleTruncate(() => actualItem.value.title, containerWidth);
 
-  return middleTruncate(title, maxChars, startChars, endChars);
-});
+const tooltipTitle = computed(() =>
+  middleTruncate(
+    actualItem.value.title,
+    TOOLTIP_NAME_MAX_LENGTH,
+    TOOLTIP_NAME_START_CHARS,
+    TOOLTIP_NAME_END_CHARS,
+  ),
+);
 
 const tooltipDisabled = computed(() => {
   if (isLeaf !== undefined) {
@@ -75,6 +63,7 @@ async function copyToClipboard(text, label) {
       <template #activator="{ props: tooltipProps }">
         <span
           v-bind="tooltipProps"
+          data-testid="treeItemLabel"
           class="tree-item-label"
           :class="{ 'inactive-item': actualItem.is_active === false }"
           @contextmenu.prevent.stop="emit('contextmenu', $event)"
@@ -90,6 +79,7 @@ async function copyToClipboard(text, label) {
           <strong class="text-white mr-1">ID:</strong>
           <span>{{ actualItem.id }}</span>
           <v-btn
+            data-testid="copyIdBtn"
             icon="mdi-content-copy"
             variant="text"
             size="x-small"
@@ -100,8 +90,9 @@ async function copyToClipboard(text, label) {
         </span>
         <span v-if="actualItem.title" class="text-caption d-flex align-center">
           <strong class="text-white mr-1">Name:</strong>
-          <span>{{ actualItem.title }}</span>
+          <span>{{ tooltipTitle }}</span>
           <v-btn
+            data-testid="copyNameBtn"
             icon="mdi-content-copy"
             variant="text"
             size="x-small"

package/app/composables/responsive_middle_truncate.js

@@ -0,0 +1,34 @@
+import { middleTruncate } from "@ogw_front/utils/string";
+
+const UUID_END_CHARS = 12;
+const ELLIPSIS_LENGTH = 3;
+const MIN_START_CHARS = 4;
+const DEFAULT_ESTIMATED_CHAR_WIDTH = 8.5;
+
+export function useResponsiveMiddleTruncate(textRef, containerWidthRef, options = {}) {
+  const {
+    estimatedCharWidth = DEFAULT_ESTIMATED_CHAR_WIDTH,
+    uuidEndChars = UUID_END_CHARS,
+    ellipsisLength = ELLIPSIS_LENGTH,
+    minStartChars = MIN_START_CHARS,
+  } = options;
+
+  return computed(() => {
+    const text = toValue(textRef);
+    if (!text) {
+      return "";
+    }
+
+    const width = toValue(containerWidthRef) || 0;
+    const maxChars = Math.floor(width / estimatedCharWidth);
+
+    if (maxChars <= 0 || text.length <= maxChars) {
+      return text;
+    }
+
+    const endChars = Math.min(uuidEndChars, Math.floor(maxChars / ellipsisLength));
+    const startChars = Math.max(minStartChars, maxChars - endChars - ellipsisLength);
+
+    return middleTruncate(text, maxChars, startChars, endChars);
+  });
+}

package/package.json

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