@eturnity/eturnity_reusable_components 1.2.19-EPDM-5262.3 → 1.2.19-EPDM-5262.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-EPDM-5262.3",
+  "version": "1.2.19-EPDM-5262.5",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -9,7 +9,7 @@
         slotSize="50%"
         ><InputAnnexContainer>
           <span>123m2</span>
-          <info-text size="10" text="infoText ceci est le text"></info-text>
+          <info-text size="10" alignArrow="right" text="infoText ceci est le text"></info-text>
         </InputAnnexContainer>
       </input-number>
       <input-number
@@ -20,11 +20,39 @@
         :isError="true"
         ><InputAnnexContainer>
           <span>123m2</span>
-          <info-text size="15" text="infoText ceci est le text" openTrigger="onClick"></info-text>
+          <info-text :style="{'justify-self': 'end'}" size="12" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
         </InputAnnexContainer>
       </input-number>
       <br />
-      <br />
+      <div :style="{ 'margin': '50px'}">
+        <input-number
+          labelText="Panel inclination"
+          labelInfoText="
+              Defines the slope of the installed panels to the horizon.
+          "
+          :value="inputValue"
+         
+        />
+      <info-text size="100" alignArrow="center" width="360px">This is the tooltip text center</info-text>
+      <br /><br />
+      <info-text size="50" alignArrow="center"  width="120px">This is the tooltip text center</info-text>
+      <br /><br />
+      <info-text size="10" alignArrow="center"  width="100%">This is the tooltip text center</info-text>
+      <br /><br /><br /><br /><br />
+      <info-text size="100" alignArrow="left"  width="360px">This is the tooltip text center</info-text>
+      <br /><br />
+      <info-text size="50" alignArrow="left"  width="360px">This is the tooltip text center</info-text>
+      <br /><br />
+      <info-text size="10" alignArrow="left"  width="360px">This is the tooltip text center</info-text>
+      <br /><br />
+      <br /><br /><br />
+      <info-text size="100" alignArrow="right"  width="360px">This is the tooltip text center</info-text>
+      <br /><br />
+      <info-text size="50" alignArrow="right"  width="360px">This is the tooltip text center</info-text>
+      <br /><br />
+      <info-text size="10" alignArrow="right"  width="360px">This is the tooltip text center</info-text>
+      <br /><br />
+      </div>
       <input-number
         placeholder="Enter distance"
         :numberPrecision="2"

package/src/components/infoText/index.vue

@@ -16,7 +16,10 @@
         :borderColor="borderColor"
         :alignText="alignText"
         :width="width"
-      >
+        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
+        :alignArrow="alignArrow"
+        :iconSize="size"
+      ><slot />
         {{ text }}
       </text-overlay>
     </icon-wrapper>
@@ -36,16 +39,17 @@ import theme from '@/assets/theme.js'
 import styled from 'vue-styled-components'
 import icon from '../icon'
 
-const textAttrs = { borderColor: String, alignText: String, width:String }
+const textAttrs = { iconSize:Number, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
 const TextOverlay = styled('div', textAttrs)`
   position: absolute;
-  top: 26px;
-  right: ${(props) => (props.alignText === 'left' ? '-10px' : 'inherit')};
-  left: ${(props) => (props.alignText === 'left' ? 'inherit' : '-10px')};
+  top: ${(props) => (parseInt(props.iconSize) + 15)}px;
+  ${(props) => (props.alignArrow === 'left' ? 'left: '+((props.iconSize/2)-18)+'px;' :
+    props.alignArrow === 'center' ? 'left: calc((-'+props.width+' + '+props.iconSize+'px)/2 - 7px);':
+    'right: '+((props.iconSize/2)-17)+'px;')};
   text-align: ${(props) => props.alignText};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: ${(props) => props.width ? props.width : "max-content"};
+  width: ${(props) => props.width };
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -58,8 +62,9 @@ const TextOverlay = styled('div', textAttrs)`
     background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
-    right: ${(props) => (props.alignText === 'left' ? '-14px' : 'inherit')};
-    left: ${(props) => (props.alignText === 'left' ? 'inherit' : '40px')};
+    ${(props) => (props.alignArrow === 'left' ? 'left:40px;' : 
+    props.alignArrow=='center' ? 'left: calc(50% + 19px);' : 
+    'right:-13px;')};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -94,7 +99,7 @@ export default {
   },
   props: {
     text: {
-      required: true
+      required: false,
     },
     borderColor: {
       required: false,
@@ -108,11 +113,18 @@ export default {
       required: false,
       default: 'left' // "left" or "right"
     },
+    alignArrow:{
+      required:false,
+      default:'center'
+    },
     openTrigger:{
       required:false,
-      default: "onHover"
+      default: 'onClick'
     },
-    width:{required:false}
+    width:{
+      required:false,
+      default:'165px'
+    }
   },
   methods: {
     toggleShowInfo() {
@@ -133,7 +145,7 @@ export default {
   },
   data() {
     return {
-      showInfo: false
+      showInfo: false,
     }
   },
   computed: {
@@ -143,6 +155,9 @@ export default {
           ? this.borderColor
           : theme.colors.secondary
         : theme.colors.mediumGray
+    },
+    halfComputedTextInfoWidth() {
+      return parseInt(this.width)/2;
     }
   }
 }

package/src/components/inputs/inputNumber/index.vue

@@ -293,7 +293,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: 'right'
+      default: 'left'
     },
     minNumber: {
       required: false,
@@ -313,7 +313,6 @@ export default {
   },
   computed: {
     hasSlot() {
-      console.log(this.$slots.default)
       return !!this.$slots.default
     },
     computedSlotSize() {