@eturnity/eturnity_reusable_components 9.28.3-EXP-11.0 → 9.28.3-EXP-11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.28.3-EXP-11.0",
+  "version": "9.28.3-EXP-11.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/pv_panel.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1.04 1.5)" d="M13.3232 0C13.7327 4.6248e-05 14.022 0.401551 13.8926 0.790039L9.95896 12.5898C9.87726 12.8348 9.64784 13 9.38963 13H0.600565C0.191116 12.9999 -0.0982598 12.5984 0.0312292 12.21L3.96482 0.410156L4.00193 0.322266C4.10404 0.126506 4.30821 3.58696e-05 4.53416 0H13.3232ZM2.15623 9L1.15623 12H3.10154L4.10154 9H2.15623ZM5.15623 9L4.15623 12H6.10154L7.10154 9H5.15623ZM8.15623 9L7.15623 12H9.10154L10.1015 9H8.15623ZM2.48924 8H4.43455L5.43455 5H3.48924L2.48924 8ZM5.48924 8H7.43455L8.43455 5H6.48924L5.48924 8ZM8.48924 8H10.4345L11.4345 5H9.48924L8.48924 8ZM3.82224 4H5.76756L6.76756 1H4.82224L3.82224 4ZM6.82224 4H8.76756L9.76756 1H7.82224L6.82224 4ZM9.82224 4H11.7676L12.7676 1H10.8222L9.82224 4Z" fill="white"/>
+</svg>

package/src/components/infoText/index.vue

@@ -244,6 +244,18 @@
         default: '400px',
         type: String,
       },
+      // Floor for the measured popup width; lower it (e.g. '0') for short
+      // tooltip-style content.
+      minWidth: {
+        default: '230px',
+        type: String,
+      },
+      // Padding of the popup box; tighten (e.g. '6px 10px') for
+      // tooltip-style content.
+      contentPadding: {
+        default: '',
+        type: String,
+      },
       openTrigger: {
         type: String,
         default: 'onHover',
@@ -494,6 +506,7 @@
           width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
+          ...(props.contentPadding ? { padding: props.contentPadding } : {}),
           backgroundColor: props.contentBackgroundColor
             ? props.contentBackgroundColor
             : props.image
@@ -566,13 +579,21 @@
         clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
         document.body.appendChild(clone)
 
-        // Get fresh content width from clone
-        const contentWidth = clone.offsetWidth
+        // Get fresh content width from clone. offsetWidth rounds to an
+        // integer, which can under-measure by <1px and wrap an exact-fit
+        // line — use the subpixel rect width, ceiled.
+        const contentWidth = Math.ceil(clone.getBoundingClientRect().width)
         document.body.removeChild(clone)
 
-        // Calculate new width
+        // Calculate new width. The measured clone is the bare text span, but
+        // TextOverlay wraps it with 10px horizontal padding each side under
+        // border-box sizing — compensate or exact-fit content wraps.
+        const TEXT_OVERLAY_HORIZONTAL_PADDING_PX = 20
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 230),
+          Math.max(
+            contentWidth + TEXT_OVERLAY_HORIZONTAL_PADDING_PX,
+            parseInt(props.minWidth, 10) || 0
+          ),
           parseInt(props.maxWidth, 10)
         )
 

package/src/components/infoText/infoText.spec.js

@@ -79,6 +79,49 @@ describe('InfoText Component', () => {
     expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
   })
 
+  describe("popup width floor (minWidth)", () => {
+    const showPopup = async (w) => {
+      w.vm.isMobile = false
+      await w.vm.$nextTick()
+      // the hover listener sits on the component root
+      await w.trigger("mouseenter")
+      // updatePosition awaits two ticks before measuring
+      await new Promise((resolve) => setTimeout(resolve))
+      await w.vm.$nextTick()
+    }
+
+    it("keeps the 230px width floor by default", async () => {
+      const roomy = mount(InfoText, {
+        props: { ...defaultProps, maxWidth: "400px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(roomy)
+      // jsdom measures content at 0px, so the floor is what remains
+      expect(roomy.vm.infoBoxWidth).toBe(230)
+    })
+
+    it("applies contentPadding to the popup box", async () => {
+      const padded = mount(InfoText, {
+        props: { ...defaultProps, contentPadding: "6px 10px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(padded)
+      const box = padded.find('[data-test-id="info_text_wrapper"]')
+        .element.firstElementChild
+      expect(box.style.padding).toBe("6px 10px")
+    })
+
+    it("allows a lower minWidth for tooltip-style content", async () => {
+      const small = mount(InfoText, {
+        props: { ...defaultProps, minWidth: "0" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(small)
+      // jsdom content measures 0px; only the padding compensation remains
+      expect(small.vm.infoBoxWidth).toBe(20)
+    })
+  })
+
   test('iconTextContent slot is correctly rendered', async () => {
     // override
     const props = defaultProps.iconTextContent