@eturnity/eturnity_reusable_components 7.51.14 → 7.51.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.14",
+  "version": "7.51.15",
   "files": [
     "dist",
     "src"

package/src/components/infoText/index.vue

@@ -17,7 +17,12 @@
     </div>
     <Teleport v-if="isVisible" to="body">
       <TextWrapper :style="wrapperStyle">
-        <TextOverlay ref="infoBox" :image="image" :style="boxStyle">
+        <TextOverlay
+          ref="infoBox"
+          :image="image"
+          :style="boxStyle"
+          :width="infoBoxWidth"
+        >
           <OverlayImage
             v-if="image"
             ref="infoImage"
@@ -63,7 +68,7 @@
     word-wrap: break-word;
     overflow-wrap: break-word;
     white-space: normal;
-    width: 100%; // Ensure the TextOverlay takes full width of its parent
+    width: ${(props) => (props.width ? `${props.width}px` : '100%')};
     box-shadow: ${(props) =>
       props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
 
@@ -81,11 +86,9 @@
     position: absolute;
     width: 0;
     height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid
-      ${(props) =>
-        props.image ? props.theme.colors.white : props.theme.colors.black};
+    border: 8px solid transparent;
+    border-top-color: ${(props) =>
+      props.image ? props.theme.colors.white : props.theme.colors.black};
     filter: ${(props) =>
       props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
   `
@@ -184,57 +187,127 @@
       }))
 
       const calculatePosition = (width) => {
-        if (!icon.value) return {}
+        if (!icon.value || !width) return {}
 
         const iconRect = icon.value.getBoundingClientRect()
         const windowHeight = window.innerHeight
         const windowWidth = window.innerWidth
 
-        let top = iconRect.bottom + 10
-        let left = iconRect.left
-
-        // Adjust left based on the infoBoxWidth
-        if (left + width > windowWidth) {
-          left = windowWidth - width - 10
-        }
-
-        // Ensure there's enough space below or place above if not
-        const isAbove = top + infoBoxHeight.value > windowHeight
-        if (isAbove) {
-          top = iconRect.top - infoBoxHeight.value - 10
-        }
-
-        // Calculate arrow position
-        let arrowLeft = iconRect.left - left + iconRect.width / 2 - 8
-
-        // Adjust arrow position if it's too close to the edges
-        const edgeThreshold = 2 // pixels from the edge to start adjusting
-        if (arrowLeft < edgeThreshold) {
-          arrowLeft = edgeThreshold
-        } else if (arrowLeft > width - 16 - edgeThreshold) {
-          arrowLeft = width - 16 - edgeThreshold
+        // Calculate available space in all directions
+        const spaceBelow = windowHeight - iconRect.bottom - 10
+        const spaceAbove = iconRect.top - 10
+        const spaceRight = windowWidth - iconRect.right - 10
+        const spaceLeft = iconRect.left - 10
+
+        // Determine the best position based on available space
+        const positions = [
+          { position: 'bottom', space: spaceBelow },
+          { position: 'top', space: spaceAbove },
+          { position: 'right', space: spaceRight },
+          { position: 'left', space: spaceLeft },
+        ].sort((a, b) => b.space - a.space)
+
+        const bestPosition = positions[0].position
+
+        let top, left, arrowPosition
+
+        switch (bestPosition) {
+          case 'bottom':
+            top = Math.round(iconRect.bottom + 10)
+            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
+            arrowPosition = {
+              left: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
+                  width - 18
+                )
+              )}px`,
+              top: '-7px',
+              bottom: 'auto',
+              transform: 'rotate(180deg)',
+            }
+            break
+
+          case 'top':
+            top = Math.round(iconRect.top - infoBoxHeight.value - 10)
+            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
+            arrowPosition = {
+              left: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
+                  width - 18
+                )
+              )}px`,
+              top: 'auto',
+              bottom: '-7px',
+              transform: 'none',
+            }
+            break
+
+          case 'right':
+            top = Math.round(
+              Math.max(
+                Math.min(
+                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
+                  windowHeight - infoBoxHeight.value - 10
+                ),
+                10
+              )
+            )
+            left = Math.round(iconRect.right + 10)
+            arrowPosition = {
+              left: '-7px',
+              top: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
+                  infoBoxHeight.value - 18
+                )
+              )}px`,
+              bottom: 'auto',
+              transform: 'rotate(90deg)',
+            }
+            break
+
+          case 'left':
+            top = Math.round(
+              Math.max(
+                Math.min(
+                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
+                  windowHeight - infoBoxHeight.value - 10
+                ),
+                10
+              )
+            )
+            left = Math.round(iconRect.left - width - 10)
+            arrowPosition = {
+              left: 'auto',
+              right: '-7px',
+              top: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
+                  infoBoxHeight.value - 18
+                )
+              )}px`,
+              bottom: 'auto',
+              transform: 'rotate(-90deg)',
+            }
+            break
         }
 
-        const arrowTop = isAbove ? 'auto' : '-7px'
-        const arrowBottom = isAbove ? '-7px' : 'auto'
-
-        arrowStyle.value = {
-          left: `${arrowLeft}px`,
-          top: arrowTop,
-          bottom: arrowBottom,
-          transform: isAbove ? 'none' : 'rotate(180deg)',
-        }
+        // Set arrow styles
+        arrowStyle.value = arrowPosition
 
+        // Set wrapper styles
         wrapperStyle.value = {
           position: 'fixed',
           top: `${top}px`,
           left: `${left}px`,
           transform: 'none',
-          width: `${width}px`, // Set a fixed width for the wrapper
+          width: `${width}px`,
         }
 
         return {
-          width: '100%', // Always use 100% width for the TextOverlay
+          width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
           backgroundColor: props.image
@@ -245,12 +318,15 @@
 
       const showInfo = async () => {
         isVisible.value = true
+        // Wait for two render cycles to ensure content is stable
         await nextTick()
-        updatePosition()
+        await nextTick()
+        await updatePosition()
       }
 
       const hideInfo = () => {
         isVisible.value = false
+        infoBoxWidth.value = 0 // Reset width when hiding
       }
 
       const toggleInfo = () => {
@@ -278,25 +354,55 @@
       }
 
       const updatePosition = async () => {
-        if (infoBox.value && textContent.value) {
-          await nextTick()
-
-          if (isIconInView()) {
-            const contentWidth = textContent.value.offsetWidth
-            infoBoxWidth.value = Math.min(
-              Math.max(contentWidth, 200), // Set a minimum width of 200px
-              parseInt(props.maxWidth, 10)
-            )
-            infoBoxHeight.value = infoBox.value.$el.offsetHeight
-            boxStyle.value = calculatePosition(infoBoxWidth.value)
+        console.log('updatePosition')
+        if (!infoBox.value || !textContent.value) return
 
-            // Now make it visible if it should be
-            if (isVisible.value) {
-              infoBox.value.$el.style.visibility = 'visible'
-            }
-          } else if (isVisible.value) {
-            hideInfo()
-          }
+        // First make the content visible but hidden to get accurate measurements
+        if (infoBox.value.$el) {
+          infoBox.value.$el.style.visibility = 'hidden'
+          infoBox.value.$el.style.display = 'block'
+        }
+
+        await nextTick()
+
+        if (!isIconInView()) {
+          if (isVisible.value) hideInfo()
+          return
+        }
+
+        // Create a temporary clone to measure true width
+        const clone = textContent.value.cloneNode(true)
+        clone.style.position = 'absolute'
+        clone.style.visibility = 'hidden'
+        clone.style.width = 'auto'
+        clone.style.maxWidth = 'none'
+        clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
+        document.body.appendChild(clone)
+
+        // Get fresh content width from clone
+        const contentWidth = clone.offsetWidth
+        document.body.removeChild(clone)
+
+        // Calculate new width
+        const calculatedWidth = Math.min(
+          Math.max(contentWidth, 200),
+          parseInt(props.maxWidth, 10)
+        )
+
+        // Set new dimensions
+        infoBoxWidth.value = calculatedWidth
+
+        // Wait for width to be applied
+        await nextTick()
+
+        infoBoxHeight.value = infoBox.value.$el.offsetHeight
+
+        // Calculate and apply position
+        boxStyle.value = calculatePosition(calculatedWidth)
+
+        // Make visible after position is set
+        if (isVisible.value && infoBox.value.$el) {
+          infoBox.value.$el.style.visibility = 'visible'
         }
       }
 

package/src/components/label/index.vue

@@ -9,8 +9,7 @@
     <InfoText
       v-if="infoTextMessage"
       :align-arrow="infoTextAlign"
-      border-color="#ccc"
-      :size="fontSize ? fontSize : '16px'"
+      :size="fontSize ? fontSize : '14px'"
       :text="infoTextMessage"
     />
   </LabelWrapper>