@eturnity/eturnity_reusable_components 1.2.19-dev03.0 → 1.2.19-dev03.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-dev03.0",
+  "version": "1.2.19-dev03.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -53,7 +53,7 @@
         slotSize="50%"
         ><InputAnnexContainer>
           <span>123m2</span>
-          <info-text size="10" alignArrow="right" text="infoText ceci est le text"></info-text>
+          <info-text size="10px" alignArrow="right" text="infoText ceci est le text"></info-text>
         </InputAnnexContainer>
       </input-number>
       <input-number
@@ -64,7 +64,7 @@
         :isError="true"
         ><InputAnnexContainer>
           <span>123m2</span>
-          <info-text :style="{'justify-self': 'end'}" size="12" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
+          <info-text :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
         </InputAnnexContainer>
       </input-number>
       <br />

package/src/components/infoText/index.vue

@@ -9,7 +9,7 @@
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <icon :size="size + 'px'" name="info" :color="iconColor" />
+        <icon :size="size" name="info" :color="iconColor" />
       </icon-img>
       <text-overlay
         v-if="showInfo"
@@ -39,13 +39,15 @@ import theme from '@/assets/theme.js'
 import styled from 'vue-styled-components'
 import icon from '../icon'
 
-const textAttrs = { iconSize:Number, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
+const textAttrs = { iconSize:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
 const TextOverlay = styled('div', textAttrs)`
   position: absolute;
-  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;')};
+  top: ${(props) => 'calc('+props.iconSize+' + 15px)'};
+  ${(props) => (props.alignArrow === 'left' 
+    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
+    : props.alignArrow === 'center' 
+    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
+    : 'right: calc('+props.iconSize+' /2 - 17px)')};
   text-align: ${(props) => props.alignText};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
@@ -72,16 +74,16 @@ const TextOverlay = styled('div', textAttrs)`
   }
 `
 
-const iconAttrs = { isActive: Boolean, size: Number, borderColor: String }
+const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
 
 const IconWrapper = styled('div', iconAttrs)`
   position: relative;
   top: 1px;
-  height: ${(props) => props.size}px;
+  height: ${(props) => props.size};
 `
 const IconImg = styled('div', iconAttrs)`
   cursor: pointer;
-  height: ${(props) => props.size}px;
+  height: ${(props) => props.size};
 `
 
 const ComponentWrapper = styled.div`
@@ -107,7 +109,7 @@ export default {
     },
     size: {
       required: false,
-      default: '14'
+      default: '14px'
     },
     alignText: {
       required: false,

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

@@ -8,7 +8,7 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        :size="14"
+        size="14px"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          :size="fontSize ? fontSize : '16'"
+          :size="fontSize ? fontSize : '16px'"
           :alignText="infoTextAlign"
         />
       </label-wrapper>

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

@@ -12,7 +12,7 @@
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
-        <info-text v-if="item.infoText" :text="item.infoText" size="16" />
+        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
       </label-container>
       <image-container v-if="item.img">
         <radio-image :src="item.img" />

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="16"
+          size="16px"
           :alignText="infoTextAlign"
         />
       </label-wrapper>

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14"
+          size="14px"
           :alignText="infoTextAlign"
         />
       </label-container>
@@ -46,7 +46,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14"
+          size="14px"
           :alignText="infoTextAlign"
         />
       </label-container>

package/src/components/pageSubtitle/index.vue

@@ -6,7 +6,7 @@
     <info-text
       :text="infoText"
       v-if="!!infoText"
-      size="14"
+      size="14px"
       borderColor="#ccc"
       :alignText="alignInfoText"
     />