@eturnity/eturnity_reusable_components 1.2.2-EPDM-4371.1 → 1.2.2-EPDM-5243.0

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

@@ -37,11 +37,6 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
-      <icon
-        v-if="(isError || inputIcon) && !showLinearUnitName"
-        :class="inputIconImageClass"
-        :src="isError ? warningIcon : inputIconImage"
-      />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -73,14 +68,13 @@
 //     :minNumber="0"
 //     fontColor="blue"
 // />
-import styled from 'vue-styled-components'
+import styled from "vue-styled-components"
 import {
   stringToNumber,
-  numberToString
-} from '../../../helpers/numberConverter'
-import InfoText from '../../infoText'
-import ErrorMessage from '../../errorMessage'
-import warningIcon from '../../../assets/icons/error_icon.png'
+  numberToString,
+} from "../../../helpers/numberConverter"
+import InfoText from "../../infoText"
+
 const Container = styled.div`
   width: 100%;
   position: relative;
@@ -95,31 +89,31 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String
+  fontColor: String,
 }
-const InputContainer = styled('input', inputProps)`
+const InputContainer = styled("input", inputProps)`
   border: ${(props) =>
     props.isError
-      ? '1px solid ' + props.theme.colors.red
+      ? "1px solid " + props.theme.colors.red
       : props.noBorder
-      ? 'none'
-      : '1px solid ' + props.theme.colors.mediumGray};
+      ? "none"
+      : "1px solid " + props.theme.colors.mediumGray};
   padding: ${(props) =>
-    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
+    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "13px")};
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
       : props.fontColor
-      ? props.fontColor + ' !important'
+      ? props.fontColor + " !important"
       : props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "unset")};
   background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
+    props.isDisabled ? props.theme.colors.grey5 : "#fff"};
   box-sizing: border-box;
 
   &::placeholder {
@@ -131,21 +125,12 @@ const InputContainer = styled('input', inputProps)`
     outline: none;
   }
 `
-const IconProps = {
-  inputIconHeight: String
-}
-
-const Icon = styled('img', IconProps)`
-  position: absolute;
-  right: 10px;
-  top: 2px;
-`
 
 const InputWrapper = styled.span`
   position: relative;
 `
 
-const UnitContainer = styled('span', inputProps)`
+const UnitContainer = styled("span", inputProps)`
   border-left: 1px solid
     ${(props) =>
       props.isError
@@ -165,14 +150,12 @@ const UnitContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-// const ErrorMessage = styled.div`
-//   margin-top: 5px;
-//   line-height: 1;
-//   text-transform: none;
-//   font-size: 10px;
-//   color: ${(props) => props.theme.colors.red};
-//   position: absolute;
-// `
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
+  position: absolute;
+  top: calc(100% + 1px);
+`
 
 const LabelWrapper = styled.div`
   display: flex;
@@ -186,7 +169,7 @@ const LabelText = styled.div`
 `
 
 export default {
-  name: 'input-number',
+  name: "input-number",
   components: {
     Container,
     InputContainer,
@@ -196,147 +179,130 @@ export default {
     LabelWrapper,
     LabelText,
     InfoText,
-    Icon
   },
   data() {
     return {
-      textInput: '',
+      textInput: "",
       isFocused: false,
-      warningIcon: warningIcon
     }
   },
   props: {
     placeholder: {
       required: false,
-      default: ''
+      default: "",
     },
     isError: {
       required: false,
-      default: false
+      default: false,
     },
     inputWidth: {
       required: false,
-      default: null
+      default: null,
     },
     minWidth: {
       required: false,
-      default: null
+      default: null,
     },
     value: {
       required: true,
-      default: null
+      default: null,
     },
     clearInput: {
       required: false,
-      default: false
+      default: false,
     },
     errorMessage: {
       required: false,
-      default: 'Please insert a correct number'
+      default: "Please insert a correct number",
     },
     numberPrecision: {
       required: false,
-      default: 0
+      default: 0,
     },
     unitName: {
       required: false,
-      default: ''
+      default: "",
     },
     showLinearUnitName: {
       required: false,
-      default: false
+      default: false,
     },
     disabled: {
       required: false,
-      default: false
+      default: false,
     },
     noBorder: {
       required: false,
-      default: false
+      default: false,
     },
     textAlign: {
       required: false,
-      default: 'left'
+      default: "left",
     },
     fontSize: {
       required: false,
-      default: '13px'
+      default: "13px",
     },
     labelText: {
       required: false,
-      default: null
+      default: null,
     },
     labelInfoText: {
       required: false,
-      default: null
+      default: null,
     },
     labelInfoAlign: {
       required: false,
-      default: 'right'
+      default: "right",
     },
     minNumber: {
       required: false,
-      default: null
+      default: null,
     },
     fontColor: {
       required: false,
-      default: null
+      default: null,
     },
     numberToStringEnabled: {
       required: false,
-      default: true
+      default: true,
     },
-    inputIcon: {
-      require: false,
-      type: Boolean,
-      default: false
-    },
-    inputIconImage: {
-      require: false,
-      type: String,
-      default: ''
-    },
-    inputIconImageClass: {
-      require: false,
-      type: Array,
-      default: () => []
-    }
   },
   methods: {
     onChangeHandler(event) {
       if (isNaN(event)) {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
-      this.$emit('input-change', event)
+      this.$emit("input-change", event)
     },
     onEvaluateCode(val) {
       // function to perform math on the code
       // filter the string in case of any malicious content
-      let filtered = val.replace(/[^-()\d/*+.,]/g, '')
+      let filtered = val.replace(/[^-()\d/*+.,]/g, "")
       filtered = filtered.split(/([-+*/()])/)
       let formatted = filtered.map((item) => {
         if (
-          item === '+' ||
-          item === '-' ||
-          item === '*' ||
-          item === '/' ||
-          item === '(' ||
-          item === ')' ||
-          item === ''
+          item === "+" ||
+          item === "-" ||
+          item === "*" ||
+          item === "/" ||
+          item === "(" ||
+          item === ")" ||
+          item === ""
         ) {
           return item
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false
+            numberPrecision: false,
           })
           return num
         }
       })
-      let evaluated = eval(formatted.join(''))
+      let evaluated = eval(formatted.join(""))
       evaluated = stringToNumber({
         value: evaluated,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
       })
       return evaluated
     },
@@ -349,7 +315,7 @@ export default {
         this.textInput = numberToString({
           value:
             evaluatedInput && value.length ? evaluatedInput : this.minNumber,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
         })
       }
       let adjustedMinValue =
@@ -357,8 +323,8 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''
-      this.$emit('input-blur', adjustedMinValue)
+          : ""
+      this.$emit("input-blur", adjustedMinValue)
     },
     focusInput() {
       if (this.disabled) {
@@ -375,38 +341,38 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''
+          : ""
       if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
             })
           : adjustedMinValue
-        let unit = this.showLinearUnitName ? '' : this.unitName
-        return input + ' ' + unit
+        let unit = this.showLinearUnitName ? "" : this.unitName
+        return input + " " + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-        return ''
+        return ""
       } else {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
             })
           : adjustedMinValue
       }
-    }
+    },
   },
   created() {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
       })
     }
   },
@@ -414,9 +380,9 @@ export default {
     clearInput: function (value) {
       if (value) {
         // If the value is typed, then we should clear the textInput on Continue
-        this.textInput = ''
+        this.textInput = ""
       }
-    }
-  }
+    },
+  },
 }
-</script>
+</script>

package/src/components/errorMessage/index.vue

@@ -1,62 +0,0 @@
-<template>
-  <component-wrapper>
-    <text-overlay>
-      <slot></slot>
-    </text-overlay>
-  </component-wrapper>
-</template>
-
-<script>
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-//To use:
-// <error-message
-//     alignText="right" // default is left
-// />
-
-import styled from 'vue-styled-components'
-
-const TextOverlay = styled.div`
-  position: absolute;
-  top: calc(100% + 13px);
-  background: ${(props) => props.theme.colors.red};
-  padding: 10px;
-  width: max-content;
-  max-width: 100%;
-  min-width: 200px;
-  font-size: 11px;
-  font-weight: 400;
-  border-radius: 4px;
-  font-family: 'Lato-Bold', Arial;
-  z-index: 99;
-  color: ${(props) => props.theme.colors.white};
-
-  :before {
-    content: '';
-    background-color: ${(props) => props.theme.colors.red};
-    position: absolute;
-    top: 2px;
-    left: 40px;
-    height: 11px;
-    width: 11px;
-    transform-origin: center center;
-    transform: translate(-2em, -0.5em) rotate(45deg);
-  }
-`
-
-const ComponentWrapper = styled.div`
-  display: block;
-`
-
-export default {
-  name: 'info-text',
-  components: {
-    TextOverlay,
-    ComponentWrapper
-  },
-  props: {},
-  methods: {},
-  data() {
-    return {}
-  }
-}
-</script>