@eturnity/eturnity_reusable_components 1.2.2-EPDM-5243.6 → 1.2.2-EPDM-3412.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.2-EPDM-5243.6",
+  "version": "1.2.2-EPDM-3412.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -28,8 +28,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11",
-    "html-loader": "^0.5.5"
+    "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
     "root": true,

package/src/App.vue

@@ -56,37 +56,22 @@
         :isDisabled="false"
       />
       <external-button text="Click me!" minWidth="500px" />
-      <icon name="Battery" />
-      <icon name="Bubble" color="red" hoveredColor="blue" size="60px" />
-      <icon name="Call" color="red" hoveredColor="blue" size="60px" />
-      <icon name="Camera" color="yellow" hoveredColor="green" size="60px" />
-      <icon name="House" color="red" hoveredColor="blue" size="20px" />
-      <icon name="House" color="red" hoveredColor="blue" size="40px" />
-      <icon name="House" color="red" hoveredColor="blue" size="80px" />
-      <icon name="House" color="red" hoveredColor="blue" size="120px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="150px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="120px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="80px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="40px" />
-      <collection />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-import MainTable from '@/components/tables/mainTable'
-import ThreeDots from '@/components/threeDots'
-import Toggle from '@/components/inputs/toggle'
-import InputNumber from '@/components/inputs/inputNumber'
-import Checkbox from '@/components/inputs/checkbox'
-import PageSubtitle from '@/components/pageSubtitle'
-import Spinner from '@/components/spinner'
-import ExternalButton from '@/components/buttons/externalButton'
-import icon from '@/components/icon'
-import collection from '@/components/icons/iconCollection'
+import { ThemeProvider } from "vue-styled-components"
+import theme from "./assets/theme"
+import styled from "vue-styled-components"
+import MainTable from "@/components/tables/mainTable"
+import ThreeDots from "@/components/threeDots"
+import Toggle from "@/components/inputs/toggle"
+import InputNumber from "@/components/inputs/inputNumber"
+import Checkbox from "@/components/inputs/checkbox"
+import PageSubtitle from "@/components/pageSubtitle"
+import Spinner from "@/components/spinner"
+import ExternalButton from "@/components/buttons/externalButton"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -94,7 +79,7 @@ const PageContainer = styled.div`
 `
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     ThemeProvider,
     PageContainer,
@@ -106,67 +91,65 @@ export default {
     Spinner,
     Checkbox,
     ExternalButton,
-    collection,
-    icon
     // TableDropdown,
   },
   data() {
     return {
       inputValue: null,
-      checkedOption: 'button_1',
+      checkedOption: "button_1",
       question: {
         number_format_precision: 4,
         number_min_allowed: 0,
         number_max_allowed: 10,
-        unit_short_name: 'cm'
+        unit_short_name: "cm",
       },
       dropdownOpen: false,
       isChecked: false,
       listOptions: [
         {
-          name: 'Option 1',
-          value: 'option_1',
-          disabled: true
+          name: "Option 1",
+          value: "option_1",
+          disabled: true,
         },
         {
-          name: 'Option 2',
-          value: 'option_2'
+          name: "Option 2",
+          value: "option_2",
         },
         {
-          name: 'Option 3',
-          value: 'option_3'
+          name: "Option 3",
+          value: "option_3",
         },
         {
-          name: 'Option 4',
-          value: 'option_4'
-        }
+          name: "Option 4",
+          value: "option_4",
+        },
       ],
       itemOptions: [
         {
-          display_name: 'Test 1',
-          company_item_number: '123',
-          model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1
+          display_name: "Test 1",
+          company_item_number: "123",
+          model: "BTB-2145 Long Text Long Text Long Text Long Text Long Text",
+          id: 1,
         },
         {
-          display_name: 'Test 2',
-          company_item_number: '1234',
-          model: 'BTB-123',
-          id: 2
+          display_name: "Test 2",
+          company_item_number: "1234",
+          model: "BTB-123",
+          id: 2,
         },
         {
-          display_name: 'Test 3',
-          company_item_number: '12345',
-          model: 'BTB-543',
-          id: 3
+          display_name: "Test 3",
+          company_item_number: "12345",
+          model: "BTB-543",
+          id: 3,
         },
         {
-          display_name: 'Test 4',
-          company_item_number: '123456',
-          model: 'BTB-4930',
-          id: 4
-        }
-      ]
+          display_name: "Test 4",
+          company_item_number: "123456",
+          model: "BTB-4930",
+          id: 4,
+        },
+      ],
     }
   },
   methods: {
@@ -180,7 +163,7 @@ export default {
       return this.dropdownOpen
     },
     onClickButton() {
-      console.log('Test')
+      console.log("Test")
     },
     toggleDropdownOpen() {
       this.dropdownOpen = !this.dropdownOpen
@@ -191,21 +174,21 @@ export default {
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'display_name'
-          })
+            value: "display_name",
+          }),
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'company_item_number'
-          })
+            value: "company_item_number",
+          }),
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'model'
-          })
-        }
+            value: "model",
+          }),
+        },
       ]
       return items
     },
@@ -216,11 +199,11 @@ export default {
       } else if (row[value]) {
         item = row[value]
       } else {
-        item = '-'
+        item = "-"
       }
       return item
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -230,4 +213,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<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>

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

@@ -37,6 +37,11 @@
         :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>
@@ -68,13 +73,14 @@
 //     :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"
-
+  numberToString
+} from '../../../helpers/numberConverter'
+import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
 const Container = styled.div`
   width: 100%;
   position: relative;
@@ -89,31 +95,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 {
@@ -125,12 +131,21 @@ 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
@@ -150,12 +165,14 @@ const UnitContainer = styled("span", inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
+// 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 LabelWrapper = styled.div`
   display: flex;
@@ -169,7 +186,7 @@ const LabelText = styled.div`
 `
 
 export default {
-  name: "input-number",
+  name: 'input-number',
   components: {
     Container,
     InputContainer,
@@ -179,130 +196,147 @@ 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
     },
@@ -315,7 +349,7 @@ export default {
         this.textInput = numberToString({
           value:
             evaluatedInput && value.length ? evaluatedInput : this.minNumber,
-          numberPrecision: this.numberPrecision,
+          numberPrecision: this.numberPrecision
         })
       }
       let adjustedMinValue =
@@ -323,8 +357,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) {
@@ -341,38 +375,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
       })
     }
   },
@@ -380,9 +414,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>