@eturnity/eturnity_reusable_components 9.34.0 → 9.34.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "9.34.0",
3
+ "version": "9.34.1",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path transform="translate(1.5 1.5)" d="M12.5357 12.0714H11.1429V0.928571H11.6071C11.7303 0.928571 11.8484 0.879656 11.9354 0.792585C12.0225 0.705515 12.0714 0.587422 12.0714 0.464286C12.0714 0.341149 12.0225 0.223057 11.9354 0.135986C11.8484 0.0489157 11.7303 0 11.6071 0H1.39286C1.26972 0 1.15163 0.0489157 1.06456 0.135986C0.977487 0.223057 0.928571 0.341149 0.928571 0.464286C0.928571 0.587422 0.977487 0.705515 1.06456 0.792585C1.15163 0.879656 1.26972 0.928571 1.39286 0.928571H1.85714V12.0714H0.464286C0.341149 12.0714 0.223057 12.1203 0.135986 12.2074C0.0489157 12.2945 0 12.4126 0 12.5357C0 12.6589 0.0489157 12.7769 0.135986 12.864C0.223057 12.9511 0.341149 13 0.464286 13H12.5357C12.6589 13 12.7769 12.9511 12.864 12.864C12.9511 12.7769 13 12.6589 13 12.5357C13 12.4126 12.9511 12.2945 12.864 12.2074C12.7769 12.1203 12.6589 12.0714 12.5357 12.0714ZM2.78571 0.928571H10.2143V12.0714H8.35714V9.75C8.35714 9.62686 8.30823 9.50877 8.22116 9.4217C8.13409 9.33463 8.01599 9.28571 7.89286 9.28571H5.10714C4.98401 9.28571 4.86591 9.33463 4.77884 9.4217C4.69177 9.50877 4.64286 9.62686 4.64286 9.75V12.0714H2.78571V0.928571ZM7.42857 12.0714H5.57143V10.2143H7.42857V12.0714ZM4.17857 2.78571C4.17857 2.66258 4.22749 2.54449 4.31456 2.45741C4.40163 2.37034 4.51972 2.32143 4.64286 2.32143H5.57143C5.69456 2.32143 5.81266 2.37034 5.89973 2.45741C5.9868 2.54449 6.03571 2.66258 6.03571 2.78571C6.03571 2.90885 5.9868 3.02694 5.89973 3.11401C5.81266 3.20108 5.69456 3.25 5.57143 3.25H4.64286C4.51972 3.25 4.40163 3.20108 4.31456 3.11401C4.22749 3.02694 4.17857 2.90885 4.17857 2.78571ZM6.96429 2.78571C6.96429 2.66258 7.0132 2.54449 7.10027 2.45741C7.18734 2.37034 7.30543 2.32143 7.42857 2.32143H8.35714C8.48028 2.32143 8.59837 2.37034 8.68544 2.45741C8.77251 2.54449 8.82143 2.66258 8.82143 2.78571C8.82143 2.90885 8.77251 3.02694 8.68544 3.11401C8.59837 3.20108 8.48028 3.25 8.35714 3.25H7.42857C7.30543 3.25 7.18734 3.20108 7.10027 3.11401C7.0132 3.02694 6.96429 2.90885 6.96429 2.78571ZM4.17857 5.10714C4.17857 4.98401 4.22749 4.86591 4.31456 4.77884C4.40163 4.69177 4.51972 4.64286 4.64286 4.64286H5.57143C5.69456 4.64286 5.81266 4.69177 5.89973 4.77884C5.9868 4.86591 6.03571 4.98401 6.03571 5.10714C6.03571 5.23028 5.9868 5.34837 5.89973 5.43544C5.81266 5.52251 5.69456 5.57143 5.57143 5.57143H4.64286C4.51972 5.57143 4.40163 5.52251 4.31456 5.43544C4.22749 5.34837 4.17857 5.23028 4.17857 5.10714ZM6.96429 5.10714C6.96429 4.98401 7.0132 4.86591 7.10027 4.77884C7.18734 4.69177 7.30543 4.64286 7.42857 4.64286H8.35714C8.48028 4.64286 8.59837 4.69177 8.68544 4.77884C8.77251 4.86591 8.82143 4.98401 8.82143 5.10714C8.82143 5.23028 8.77251 5.34837 8.68544 5.43544C8.59837 5.52251 8.48028 5.57143 8.35714 5.57143H7.42857C7.30543 5.57143 7.18734 5.52251 7.10027 5.43544C7.0132 5.34837 6.96429 5.23028 6.96429 5.10714ZM4.17857 7.42857C4.17857 7.30543 4.22749 7.18734 4.31456 7.10027C4.40163 7.0132 4.51972 6.96429 4.64286 6.96429H5.57143C5.69456 6.96429 5.81266 7.0132 5.89973 7.10027C5.9868 7.18734 6.03571 7.30543 6.03571 7.42857C6.03571 7.55171 5.9868 7.6698 5.89973 7.75687C5.81266 7.84394 5.69456 7.89286 5.57143 7.89286H4.64286C4.51972 7.89286 4.40163 7.84394 4.31456 7.75687C4.22749 7.6698 4.17857 7.55171 4.17857 7.42857ZM6.96429 7.42857C6.96429 7.30543 7.0132 7.18734 7.10027 7.10027C7.18734 7.0132 7.30543 6.96429 7.42857 6.96429H8.35714C8.48028 6.96429 8.59837 7.0132 8.68544 7.10027C8.77251 7.18734 8.82143 7.30543 8.82143 7.42857C8.82143 7.55171 8.77251 7.6698 8.68544 7.75687C8.59837 7.84394 8.48028 7.89286 8.35714 7.89286H7.42857C7.30543 7.89286 7.18734 7.84394 7.10027 7.75687C7.0132 7.6698 6.96429 7.55171 6.96429 7.42857Z" fill="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path transform="translate(4.97 1.24)" d="M4.89579 7.48736C5.67453 7.35516 6.322 8.17595 5.94852 8.9229L3.92313 12.9747C3.55456 13.7116 2.50258 13.7117 2.13407 12.9747L0.108677 8.9229L0.0471536 8.77251C-0.193592 8.02052 0.52665 7.26383 1.31864 7.5274L2.71219 7.99126C2.91736 8.05965 3.13982 8.05959 3.34501 7.99126L4.73856 7.5274L4.89579 7.48736ZM3.66141 8.94048C3.25096 9.07723 2.80622 9.07729 2.39579 8.94048L1.00223 8.47564L3.0286 12.5274L5.05497 8.47564L3.66141 8.94048ZM2.13407 0.552786C2.50259 -0.184262 3.55461 -0.184262 3.92313 0.552786L5.9495 4.60454C6.34772 5.40135 5.58368 6.28176 4.73856 6.00005L3.34501 5.53618C3.13986 5.46781 2.91833 5.46787 2.71317 5.53618L1.31961 6.00005C0.474448 6.28177 -0.289683 5.40138 0.108677 4.60454L2.13407 0.552786Z" fill="white"/>
3
+ </svg>
@@ -1,8 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="none">
2
- <mask id="path-1-inside-1_57915_3657" fill="white">
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M4.03081 3.71851L0 6.28736V12.2814L3.41065 13.4587V9.98801L4.532 10.4406V13.8458L8.06161 15.0643V9.07028L4.03081 3.71851Z"/>
4
- </mask>
5
- <path d="M0 6.28736L-0.698673 5.19107L-1.3 5.5743V6.28736H0ZM4.03081 3.71851L5.06922 2.9364L4.34595 1.9761L3.33213 2.62221L4.03081 3.71851ZM0 12.2814H-1.3V13.2079L-0.424205 13.5102L0 12.2814ZM3.41065 13.4587L2.98645 14.6876L4.71065 15.2828V13.4587H3.41065ZM3.41065 9.98801L3.89722 8.78251L2.11065 8.0614V9.98801H3.41065ZM4.532 10.4406H5.832V9.56343L5.01858 9.23511L4.532 10.4406ZM4.532 13.8458H3.232V14.7723L4.1078 15.0747L4.532 13.8458ZM8.06161 15.0643L7.63741 16.2931L9.36161 16.8883V15.0643H8.06161ZM8.06161 9.07028H9.36161V8.63549L9.10003 8.28818L8.06161 9.07028ZM0.698673 7.38365L4.72948 4.8148L3.33213 2.62221L-0.698673 5.19107L0.698673 7.38365ZM1.3 12.2814V6.28736H-1.3V12.2814H1.3ZM3.83485 12.2299L0.424205 11.0525L-0.424205 13.5102L2.98645 14.6876L3.83485 12.2299ZM4.71065 13.4587V9.98801H2.11065V13.4587H4.71065ZM2.92408 11.1935L4.04543 11.6461L5.01858 9.23511L3.89722 8.78251L2.92408 11.1935ZM3.232 10.4406V13.8458H5.832V10.4406H3.232ZM8.48582 13.8354L4.95621 12.617L4.1078 15.0747L7.63741 16.2931L8.48582 13.8354ZM6.76161 9.07028V15.0643H9.36161V9.07028H6.76161ZM2.99239 4.50061L7.0232 9.85239L9.10003 8.28818L5.06922 2.9364L2.99239 4.50061Z" fill="white" mask="url(#path-1-inside-1_57915_3657)"/>
6
- <path d="M8.5625 14.2779V9.38818L13.5026 7.07375V11.9634L8.5625 14.2779Z" fill="white" stroke="white"/>
7
- <path d="M8.21735 8.44534L4.80134 3.90984L9.81609 1.56045L13.2321 6.09596L8.21735 8.44534Z" fill="white" stroke="white"/>
8
- </svg>
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9.23926 0.0928743C9.66555 -0.105047 10.1726 0.021414 10.457 0.395609L13.7962 4.78952C13.9284 4.96352 14 5.17604 14 5.39458V10.358C14 10.7472 13.7742 11.1011 13.4211 11.265L8.42517 13.5847C8.19119 13.6933 7.92427 13.7074 7.6802 13.6238L5.20741 12.7774C4.80297 12.639 4.53125 12.2588 4.53125 11.8313V9.17295L3.41016 8.72471V10.7634C3.41016 11.4493 2.73554 11.9315 2.08662 11.7097L0.676466 11.2275C0.27187 11.0892 0 10.7089 0 10.2813V5.60883C0 5.26575 0.175879 4.94662 0.465938 4.76339L4.03027 2.51182L9.23926 0.0928743ZM1 5.6085V10.2804L2.41016 10.7628V7.24815L5.53125 8.49619V11.8302L7.06055 12.3536V8.15147L3.78906 3.84678L1 5.6085Z" fill="#263238"/>
3
+ </svg>
@@ -1,3 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M0.199219 9.85718V0.142822H1.75351L1.75352 9.85718H0.199219ZM5.38021 8.20572L2.14209 4.99999L5.38021 1.79425V4.19855L8.61833 4.19855V1.79425L11.8564 4.99999L8.61832 8.20572L8.61833 5.80142L5.38021 5.80142V8.20572ZM12.2449 0.142822V9.85718H13.7992V0.142822H12.2449Z" fill="white"/>
3
- </svg>
1
+ <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M0.5 0C0.776142 0 1 0.223858 1 0.5V4.95312L1.25391 4.66797L3.03125 2.66797C3.21464 2.46172 3.53093 2.44277 3.7373 2.62598C3.94324 2.80939 3.96234 3.12575 3.7793 3.33203L2.74121 4.5H11.1797L10.1416 3.33203C9.95837 3.12563 9.97728 2.80936 10.1836 2.62598C10.39 2.44282 10.7063 2.46167 10.8896 2.66797L12.667 4.66797L12.9619 5L12.667 5.33203L10.8896 7.33203C10.7064 7.53822 10.39 7.55692 10.1836 7.37402C9.97727 7.19065 9.95838 6.87437 10.1416 6.66797L11.1797 5.5H2.74121L3.7793 6.66797C3.96214 6.87434 3.94338 7.19074 3.7373 7.37402C3.53103 7.55713 3.21468 7.538 3.03125 7.33203L1.25391 5.33203L1 5.0459V9.5C1 9.77614 0.776142 10 0.5 10C0.223858 10 0 9.77614 0 9.5V0.5C0 0.223858 0.223858 0 0.5 0ZM13.5 0C13.7761 0 14 0.223858 14 0.5V9.5C14 9.77614 13.7761 10 13.5 10C13.2239 10 13 9.77614 13 9.5V0.5C13 0.223858 13.2239 0 13.5 0Z" fill="#D9DEE9"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10 0.5C10 0.776142 9.77614 1 9.5 1L5.04687 1L5.33203 1.25391L7.33203 3.03125C7.53828 3.21464 7.55723 3.53093 7.37402 3.7373C7.19061 3.94324 6.87425 3.96234 6.66797 3.7793L5.5 2.74121L5.5 11.1797L6.66797 10.1416C6.87437 9.95837 7.19064 9.97728 7.37402 10.1836C7.55718 10.39 7.53833 10.7063 7.33203 10.8896L5.33203 12.667L5 12.9619L4.66797 12.667L2.66797 10.8896C2.46178 10.7064 2.44307 10.39 2.62598 10.1836C2.80935 9.97727 3.12563 9.95838 3.33203 10.1416L4.5 11.1797L4.5 2.74121L3.33203 3.7793C3.12566 3.96214 2.80926 3.94338 2.62598 3.7373C2.44287 3.53103 2.462 3.21468 2.66797 3.03125L4.66797 1.25391L4.9541 1L0.5 1C0.223858 1 -3.39263e-08 0.776142 -2.18557e-08 0.5C-9.78513e-09 0.223857 0.223858 -4.27329e-07 0.5 -4.15258e-07L9.5 -2.18557e-08C9.77614 -9.78513e-09 10 0.223858 10 0.5ZM10 13.5C10 13.7761 9.77614 14 9.5 14L0.499999 14C0.223857 14 -6.02174e-07 13.7761 -5.90104e-07 13.5C-5.78033e-07 13.2239 0.223857 13 0.499999 13L9.5 13C9.77614 13 10 13.2239 10 13.5Z" fill="#D9DEE9"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path transform="translate(1 3)" d="M10.5002 0C10.7763 0 11.0002 0.223858 11.0002 0.5V4.10254L13.2902 3.0459C13.5408 2.93024 13.8384 3.0396 13.9543 3.29004C14.0699 3.54066 13.9606 3.83828 13.7101 3.9541L0.710133 9.9541C0.459551 10.0696 0.161861 9.9604 0.0460701 9.70996C-0.0695019 9.45942 0.0398765 9.16177 0.290211 9.0459L3.00017 7.79492V0.5C3.00017 0.223939 3.22414 0.000131124 3.50017 0H10.5002ZM4.00017 7.33301L10.006 4.56055C10.0036 4.54062 10.0002 4.52058 10.0002 4.5V1H4.00017V7.33301Z" fill="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path transform="translate(1 3.5)" d="M10.0411 0.0457596C10.1959 -0.0254973 10.3771 -0.0128598 10.5206 0.0789627C10.664 0.170879 10.751 0.329551 10.7511 0.499861V3.71763L13.2901 2.54576C13.5407 2.43012 13.8383 2.53955 13.9542 2.7899C14.0699 3.04052 13.9606 3.33814 13.7101 3.45396L0.710068 9.45396C0.459503 9.56943 0.161784 9.46024 0.0460058 9.20982C-0.0694542 8.95934 0.0399117 8.66164 0.290146 8.54576L3.25108 7.17857V3.49986L3.25597 3.4276C3.28014 3.26211 3.38642 3.11729 3.54112 3.04576L10.0411 0.0457596ZM7.21104 2.45396L4.25108 3.8192V6.71763L9.75108 4.17857V1.28111L7.21104 2.45396Z" fill="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path transform="translate(2 1.5)" d="M0.5 0C0.776142 0 1 0.223858 1 0.5V12.5C1 12.7761 0.776142 13 0.5 13C0.223858 13 0 12.7761 0 12.5V0.5C0 0.223858 0.223858 0 0.5 0ZM7.10254 7.50488C7.60667 7.55621 8 7.98232 8 8.5C8 9.01768 7.60667 9.44379 7.10254 9.49512L7 9.5H3C2.44772 9.5 2 9.05228 2 8.5C2 7.94772 2.44772 7.5 3 7.5H7L7.10254 7.50488ZM11.1025 3.50488C11.6067 3.55621 12 3.98232 12 4.5C12 5.01768 11.6067 5.44379 11.1025 5.49512L11 5.5H3C2.44772 5.5 2 5.05228 2 4.5C2 3.94772 2.44772 3.5 3 3.5H11L11.1025 3.50488Z" fill="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path transform="translate(1.5 1)" d="M4.5 2C5.05228 2 5.5 2.44772 5.5 3V11L5.49512 11.1025C5.44379 11.6067 5.01768 12 4.5 12C3.98232 12 3.55621 11.6067 3.50488 11.1025L3.5 11V3C3.5 2.44772 3.94772 2 4.5 2ZM8.5 2C9.05228 2 9.5 2.44772 9.5 3V7L9.49512 7.10254C9.44379 7.60667 9.01768 8 8.5 8C7.98232 8 7.55621 7.60667 7.50488 7.10254L7.5 7V3C7.5 2.44772 7.94772 2 8.5 2ZM12.5 0C12.7761 1.20706e-08 13 0.223858 13 0.5C13 0.776142 12.7761 1 12.5 1H0.5C0.223858 1 2.83224e-07 0.776142 0 0.5C1.20706e-08 0.223858 0.223858 -2.58771e-10 0.5 0H12.5Z" fill="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ </svg>
@@ -244,6 +244,18 @@
244
244
  default: '400px',
245
245
  type: String,
246
246
  },
247
+ // Floor for the measured popup width; lower it (e.g. '0') for short
248
+ // tooltip-style content.
249
+ minWidth: {
250
+ default: '230px',
251
+ type: String,
252
+ },
253
+ // Padding of the popup box; tighten (e.g. '6px 10px') for
254
+ // tooltip-style content.
255
+ contentPadding: {
256
+ default: '',
257
+ type: String,
258
+ },
247
259
  openTrigger: {
248
260
  type: String,
249
261
  default: 'onHover',
@@ -494,6 +506,7 @@
494
506
  width: '100%',
495
507
  maxWidth: props.maxWidth,
496
508
  overflowY: 'auto',
509
+ ...(props.contentPadding ? { padding: props.contentPadding } : {}),
497
510
  backgroundColor: props.contentBackgroundColor
498
511
  ? props.contentBackgroundColor
499
512
  : props.image
@@ -566,13 +579,21 @@
566
579
  clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
567
580
  document.body.appendChild(clone)
568
581
 
569
- // Get fresh content width from clone
570
- const contentWidth = clone.offsetWidth
582
+ // Get fresh content width from clone. offsetWidth rounds to an
583
+ // integer, which can under-measure by <1px and wrap an exact-fit
584
+ // line — use the subpixel rect width, ceiled.
585
+ const contentWidth = Math.ceil(clone.getBoundingClientRect().width)
571
586
  document.body.removeChild(clone)
572
587
 
573
- // Calculate new width
588
+ // Calculate new width. The measured clone is the bare text span, but
589
+ // TextOverlay wraps it with 10px horizontal padding each side under
590
+ // border-box sizing — compensate or exact-fit content wraps.
591
+ const TEXT_OVERLAY_HORIZONTAL_PADDING_PX = 20
574
592
  const calculatedWidth = Math.min(
575
- Math.max(contentWidth, 230),
593
+ Math.max(
594
+ contentWidth + TEXT_OVERLAY_HORIZONTAL_PADDING_PX,
595
+ parseInt(props.minWidth, 10) || 0
596
+ ),
576
597
  parseInt(props.maxWidth, 10)
577
598
  )
578
599
 
@@ -644,6 +665,18 @@
644
665
  }
645
666
  })
646
667
 
668
+ // The text can change while the popup is open (e.g. a save button's
669
+ // tooltip flipping to "saving in progress" mid-hover) — re-measure so
670
+ // the box fits the new content instead of wrapping in the old width.
671
+ watch(
672
+ () => props.text,
673
+ async () => {
674
+ if (!isVisible.value) return
675
+ await nextTick()
676
+ await updatePosition()
677
+ }
678
+ )
679
+
647
680
  return {
648
681
  isVisible,
649
682
  boxStyle,
@@ -79,6 +79,99 @@ describe('InfoText Component', () => {
79
79
  expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
80
80
  })
81
81
 
82
+ describe("popup width floor (minWidth)", () => {
83
+ const showPopup = async (w) => {
84
+ w.vm.isMobile = false
85
+ await w.vm.$nextTick()
86
+ // the hover listener sits on the component root
87
+ await w.trigger("mouseenter")
88
+ // updatePosition awaits two ticks before measuring
89
+ await new Promise((resolve) => setTimeout(resolve))
90
+ await w.vm.$nextTick()
91
+ }
92
+
93
+ it("keeps the 230px width floor by default", async () => {
94
+ const roomy = mount(InfoText, {
95
+ props: { ...defaultProps, maxWidth: "400px" },
96
+ global: { stubs: { teleport: true } },
97
+ })
98
+ await showPopup(roomy)
99
+ // jsdom measures content at 0px, so the floor is what remains
100
+ expect(roomy.vm.infoBoxWidth).toBe(230)
101
+ })
102
+
103
+ it("applies contentPadding to the popup box", async () => {
104
+ const padded = mount(InfoText, {
105
+ props: { ...defaultProps, contentPadding: "6px 10px" },
106
+ global: { stubs: { teleport: true } },
107
+ })
108
+ await showPopup(padded)
109
+ const box = padded.find('[data-test-id="info_text_wrapper"]')
110
+ .element.firstElementChild
111
+ expect(box.style.padding).toBe("6px 10px")
112
+ })
113
+
114
+ it("allows a lower minWidth for tooltip-style content", async () => {
115
+ const small = mount(InfoText, {
116
+ props: { ...defaultProps, minWidth: "0" },
117
+ global: { stubs: { teleport: true } },
118
+ })
119
+ await showPopup(small)
120
+ // jsdom content measures 0px; only the padding compensation remains
121
+ expect(small.vm.infoBoxWidth).toBe(20)
122
+ })
123
+ })
124
+
125
+ describe('re-measures the popup when text changes while open', () => {
126
+ let rectSpy
127
+
128
+ beforeEach(() => {
129
+ // jsdom measures everything at 0; size rects from text length so the
130
+ // popup width tracks the measured clone's content.
131
+ rectSpy = jest
132
+ .spyOn(Element.prototype, 'getBoundingClientRect')
133
+ .mockImplementation(function () {
134
+ const width = (this.textContent || '').length * 8
135
+ return {
136
+ width,
137
+ height: 10,
138
+ top: 0,
139
+ left: 0,
140
+ bottom: 10,
141
+ right: width,
142
+ }
143
+ })
144
+ })
145
+
146
+ afterEach(() => {
147
+ rectSpy.mockRestore()
148
+ })
149
+
150
+ const showPopup = async (w) => {
151
+ w.vm.isMobile = false
152
+ await w.vm.$nextTick()
153
+ await w.trigger('mouseenter')
154
+ await new Promise((resolve) => setTimeout(resolve))
155
+ await w.vm.$nextTick()
156
+ }
157
+
158
+ it('recalculates the width for the new text', async () => {
159
+ const tooltip = mount(InfoText, {
160
+ props: { ...defaultProps, text: 'Save', minWidth: '0' },
161
+ global: { stubs: { teleport: true } },
162
+ })
163
+ await showPopup(tooltip)
164
+ const initialWidth = tooltip.vm.infoBoxWidth
165
+ expect(initialWidth).toBe('Save'.length * 8 + 20)
166
+
167
+ await tooltip.setProps({ text: 'Saving in progress' })
168
+ await new Promise((resolve) => setTimeout(resolve))
169
+ await tooltip.vm.$nextTick()
170
+
171
+ expect(tooltip.vm.infoBoxWidth).toBe('Saving in progress'.length * 8 + 20)
172
+ })
173
+ })
174
+
82
175
  test('iconTextContent slot is correctly rendered', async () => {
83
176
  // override
84
177
  const props = defaultProps.iconTextContent