@eturnity/eturnity_reusable_components 1.0.37 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.37",
+  "version": "1.0.41",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -13,7 +13,20 @@
         </thead>
         <tbody>
           <tr>
-            <td class="text">Body 1</td>
+            <td>
+              <input-number
+                placeholder="Enter distance"
+                :isError="false"
+                :numberPrecision="2"
+                unitName="pc"
+                :value="inputValue"
+                @input-change="onInputChange($event)"
+                errorMessage="Enter a number between 1 and 10"
+                :disabled="false"
+                :noBorder="true"
+                textAlign="left"
+              />
+            </td>
             <td class="text">Body 2</td>
             <td class="text">Body 3</td>
             <td class="text">Body 4</td>
@@ -23,12 +36,6 @@
           </tr>
         </tbody>
       </main-table>
-      <checkbox
-        :isChecked="false"
-        @on-event-handler="onInputChange($event)"
-        size="small"
-        :isDisabled="false"
-      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -39,7 +46,7 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import Checkbox from "@/components/inputs/checkbox"
+import InputNumber from "@/components/inputs/inputNumber"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -52,11 +59,11 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    Checkbox,
+    InputNumber,
   },
   data() {
     return {
-      inputValue: false,
+      inputValue: "",
       checkedOption: "button_1",
       question: {
         number_format_precision: 4,

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

@@ -2,21 +2,25 @@
   <container>
     <input-wrapper>
       <input-container
-        :hasUnit="!!question.unit_short_name"
+        :hasUnit="unitName && !!unitName.length"
         :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
-        :value="textInput"
-        :hasLength="!!textInput.length"
-        @input="onChangeHandler"
-        @blur="onInputBlur()"
+        :value="formatWithCurrency(value)"
+        :hasLength="!!value.length"
+        @blur="onInputBlur($event)"
+        @focus="focusInput()"
         @keyup.enter="$emit('on-enter-click')"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :noBorder="noBorder"
+        :textAlign="textAlign"
       />
       <unit-container
-        v-if="question.unit_short_name"
+        v-if="unitName && showLinearUnitName"
         :hasLength="!!textInput.length"
         :isError="isError"
-        >{{ question.unit_short_name }}</unit-container
+        >{{ unitName }}</unit-container
       >
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
@@ -24,26 +28,25 @@
 </template>
 
 <script>
-// import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
+// import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
 //This component should be used for questions with input fields only
 //How to use:
 // <input-number
 //     placeholder="Enter distance"
 //     :isError="false" //default is false
 //     inputWidth="150px" //by default, this is 100%
-//     :question="question"
+//     :numberPrecision="3"
+//     unitName="pc"
+//     :numberPrecision="4"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
 //     @on-enter-click="onInputSubmit()"
 //     :errorMessage="Enter a number between 1 and 10"
+//     :disabled="false"
+//     :noBorder="true"
+//     textAlign="left" // "left, right, center"
+//     :showLinearUnitName="true"
 // />
-// question data example:
-// question: {
-//   number_format_precision: 4,
-//   number_min_allowed: 0,
-//   number_max_allowed: 10,
-//   unit_short_name: "cm",
-// },
 import styled from "vue-styled-components"
 import {
   stringToNumber,
@@ -60,22 +63,32 @@ const inputProps = {
   hasUnit: Boolean,
   inputWidth: String,
   hasLength: Boolean,
+  isDisabled: Boolean,
+  noBorder: Boolean,
+  textAlign: String,
 }
 const InputContainer = styled("input", inputProps)`
-  border: 1px solid
-    ${(props) =>
-      props.isError
-        ? props.theme.colors.red
-        : props.hasLength
-        ? props.theme.colors.primary
-        : props.theme.colors.mediumGray};
+  border: ${(props) =>
+    props.isError
+      ? "1px solid " + props.theme.colors.red
+      : props.noBorder
+      ? "none"
+      : props.hasLength
+      ? "1px solid " + props.theme.colors.black
+      : "1px solid " + props.theme.colors.mediumGray};
   padding: ${(props) =>
     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: 16px;
   color: ${(props) =>
-    props.isError ? props.theme.colors.red : props.theme.colors.primary};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "auto")};
+    props.isError ? props.theme.colors.red : props.theme.colors.black};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  background-color: ${(props) =>
+    props.isDisabled
+      ? props.theme.colors.grey5 + " !important"
+      : "#fff !important"};
 
   &::placeholder {
     color: ${(props) =>
@@ -97,7 +110,7 @@ const UnitContainer = styled("span", inputProps)`
       props.isError
         ? props.theme.colors.red
         : props.hasLength
-        ? props.theme.colors.primary
+        ? props.theme.colors.black
         : props.theme.colors.mediumGray};
   position: absolute;
   right: 10px;
@@ -107,7 +120,7 @@ const UnitContainer = styled("span", inputProps)`
     props.isError
       ? props.theme.colors.red
       : props.hasLength
-      ? props.theme.colors.primary
+      ? props.theme.colors.black
       : props.theme.colors.mediumGray};
 `
 
@@ -129,9 +142,7 @@ export default {
   data() {
     return {
       textInput: "",
-      numberPrecision: 0, // we set this on created. By default is 0
-      minValue: 0,
-      maxValue: 100,
+      isFocused: false,
     }
   },
   props: {
@@ -143,9 +154,6 @@ export default {
       required: false,
       default: false,
     },
-    question: {
-      required: true,
-    },
     inputWidth: {
       required: false,
       default: null,
@@ -162,35 +170,100 @@ export default {
       required: false,
       default: "Please insert a correct number",
     },
+    numberPrecision: {
+      required: false,
+      default: 0,
+    },
+    unitName: {
+      required: false,
+      default: "",
+    },
+    showLinearUnitName: {
+      required: false,
+      default: false,
+    },
+    disabled: {
+      required: false,
+      default: false,
+    },
+    noBorder: {
+      required: false,
+      default: false,
+    },
+    textAlign: {
+      required: false,
+      default: "left",
+    },
   },
   methods: {
-    onChangeHandler($event) {
-      this.textInput = $event
-      let formattedValue = stringToNumber({
-        value: $event,
-        numberPrecision: this.numberPrecision,
-      })
-      if (isNaN(formattedValue)) {
-        this.textInput = ""
-        formattedValue = ""
+    onChangeHandler(event) {
+      if (isNaN(event)) {
+        event = ""
       }
-      this.$emit("input-change", formattedValue)
+      this.$emit("input-change", event)
     },
-    onInputBlur() {
-      let num = stringToNumber({
-        value: this.textInput,
-        numberPrecision: this.numberPrecision,
-      })
-      this.textInput = numberToString({
-        value: num,
-        numberPrecision: this.numberPrecision,
+    onEvaluateCode(val) {
+      // function to perform math on the code
+      // filter the string in case of any malicious content
+      let filtered = val.replace(/[^-()\d/*+.,]/g, "")
+      filtered = filtered.split(/([-+*/()])/)
+      let formatted = filtered.map((item) => {
+        if (
+          item === "+" ||
+          item === "-" ||
+          item === "*" ||
+          item === "/" ||
+          item === "(" ||
+          item === ")" ||
+          item === ""
+        ) {
+          return item
+        } else {
+          let num = stringToNumber({
+            value: item,
+            numberPrecision: this.numberPrecision,
+          })
+          return num
+        }
       })
+      let evaluated = eval(formatted.join(""))
+      return evaluated
+    },
+    onInputBlur(e) {
+      this.isFocused = false
+      let value = e.target.value
+      let evaluatedInput = this.onEvaluateCode(value)
+      this.onChangeHandler(evaluatedInput)
+      if (value.length) {
+        this.textInput = numberToString({
+          value: evaluatedInput,
+          numberPrecision: this.numberPrecision,
+        })
+      }
+    },
+    focusInput() {
+      if (this.disabled) {
+        return
+      }
+      this.isFocused = true
+    },
+    formatWithCurrency(value) {
+      if (value && !this.isFocused) {
+        let input = numberToString({
+          value: value,
+          numberPrecision: this.numberPrecision,
+        })
+        let unit = this.showLinearUnitName ? "" : this.unitName
+        return input + " " + unit
+      } else {
+        return numberToString({
+          value: value,
+          numberPrecision: this.numberPrecision,
+        })
+      }
     },
   },
   created() {
-    this.numberPrecision = this.question.number_format_precision
-    this.minValue = this.question.number_min_allowed
-    this.maxValue = this.question.number_max_allowed
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
@@ -205,11 +278,6 @@ export default {
         this.textInput = ""
       }
     },
-    question: function (value) {
-      this.numberPrecision = value.number_format_precision
-      this.minValue = value.number_min_allowed
-      this.maxValue = value.number_max_allowed
-    },
   },
 }
 </script>

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

@@ -0,0 +1,215 @@
+<template>
+  <container>
+    <input-wrapper>
+      <input-container
+        :hasUnit="!!question.unit_short_name"
+        :placeholder="placeholder"
+        :isError="isError"
+        :inputWidth="inputWidth"
+        :value="textInput"
+        :hasLength="!!textInput.length"
+        @input="onChangeHandler"
+        @blur="onInputBlur()"
+        @keyup.enter="$emit('on-enter-click')"
+      />
+      <unit-container
+        v-if="question.unit_short_name"
+        :hasLength="!!textInput.length"
+        :isError="isError"
+        >{{ question.unit_short_name }}</unit-container
+      >
+    </input-wrapper>
+    <error-message v-if="isError">{{ errorMessage }}</error-message>
+  </container>
+</template>
+
+<script>
+// import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
+//This component should be used for questions with input fields only
+//How to use:
+// <input-number
+//     placeholder="Enter distance"
+//     :isError="false" //default is false
+//     inputWidth="150px" //by default, this is 100%
+//     :question="question"
+//     :value="inputValue" //required -- String
+//     @input-change="onInputChange($event)" //required
+//     @on-enter-click="onInputSubmit()"
+//     :errorMessage="Enter a number between 1 and 10"
+// />
+// question data example:
+// question: {
+//   number_format_precision: 4,
+//   number_min_allowed: 0,
+//   number_max_allowed: 10,
+//   unit_short_name: "cm",
+// },
+import styled from "vue-styled-components"
+import {
+  stringToNumber,
+  numberToString,
+} from "../../../helpers/numberConverter"
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+
+const inputProps = {
+  isError: Boolean,
+  hasUnit: Boolean,
+  inputWidth: String,
+  hasLength: Boolean,
+}
+const InputContainer = styled("input", inputProps)`
+  border: 1px solid
+    ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.primary
+        : props.theme.colors.mediumGray};
+  padding: ${(props) =>
+    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+  border-radius: 4px;
+  font-size: 16px;
+  color: ${(props) =>
+    props.isError ? props.theme.colors.red : props.theme.colors.primary};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "auto")};
+
+  &::placeholder {
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;
+`
+
+const UnitContainer = styled("span", inputProps)`
+  border-left: 1px solid
+    ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.primary
+        : props.theme.colors.mediumGray};
+  position: absolute;
+  right: 10px;
+  top: 0;
+  padding-left: 10px;
+  color: ${(props) =>
+    props.isError
+      ? props.theme.colors.red
+      : props.hasLength
+      ? props.theme.colors.primary
+      : props.theme.colors.mediumGray};
+`
+
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
+  padding-top: 16px;
+`
+
+export default {
+  name: "input-number-question",
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    UnitContainer,
+    ErrorMessage,
+  },
+  data() {
+    return {
+      textInput: "",
+      numberPrecision: 0, // we set this on created. By default is 0
+      minValue: 0,
+      maxValue: 100,
+    }
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: "",
+    },
+    isError: {
+      required: false,
+      default: false,
+    },
+    question: {
+      required: true,
+    },
+    inputWidth: {
+      required: false,
+      default: null,
+    },
+    value: {
+      required: true,
+      default: null,
+    },
+    clearInput: {
+      required: false,
+      default: false,
+    },
+    errorMessage: {
+      required: false,
+      default: "Please insert a correct number",
+    },
+  },
+  methods: {
+    onChangeHandler($event) {
+      this.textInput = $event
+      let formattedValue = stringToNumber({
+        value: $event,
+        numberPrecision: this.numberPrecision,
+      })
+      if (isNaN(formattedValue)) {
+        this.textInput = ""
+        formattedValue = ""
+      }
+      this.$emit("input-change", formattedValue)
+    },
+    onInputBlur() {
+      let num = stringToNumber({
+        value: this.textInput,
+        numberPrecision: this.numberPrecision,
+      })
+      this.textInput = numberToString({
+        value: num,
+        numberPrecision: this.numberPrecision,
+      })
+    },
+  },
+  created() {
+    this.numberPrecision = this.question.number_format_precision
+    this.minValue = this.question.number_min_allowed
+    this.maxValue = this.question.number_max_allowed
+    if (this.value) {
+      this.textInput = numberToString({
+        value: this.value,
+        numberPrecision: this.numberPrecision,
+      })
+    }
+  },
+  watch: {
+    clearInput: function (value) {
+      if (value) {
+        // If the value is typed, then we should clear the textInput on Continue
+        this.textInput = ""
+      }
+    },
+    question: function (value) {
+      this.numberPrecision = value.number_format_precision
+      this.minValue = value.number_min_allowed
+      this.maxValue = value.number_max_allowed
+    },
+  },
+}
+</script>

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

@@ -11,12 +11,14 @@
         tabindex="0"
         @click="onToggleChange"
         @keydown.space.prevent="onToggleChange"
+        :disabled="disabled"
       >
         <toggle-background :backgroundColor="backgroundColor" />
         <toggle-dot
           :isChecked="isChecked"
           :toggleColor="toggleColor"
           :size="size"
+          :disabled="disabled"
         />
       </toggle-wrapper>
       <label-text
@@ -62,7 +64,7 @@ const FlexWrapper = styled("div", flexAttrs)`
   align-items: center;
 `
 
-const toggleAttrs = { size: String, fontColor: String }
+const toggleAttrs = { size: String, fontColor: String, disabled: Boolean }
 const LabelText = styled("div", toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
@@ -77,7 +79,7 @@ const LabelText = styled("div", toggleAttrs)`
 const ToggleWrapper = styled("span", toggleAttrs)`
   display: inline-block;
   position: relative;
-  cursor: pointer;
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   width: ${(props) =>
     props.size === "medium"
       ? "50px"
@@ -115,7 +117,12 @@ const ToggleBackground = styled("span", backroundAttrs)`
   transition: 0.4s ease;
 `
 
-const toggleProps = { isChecked: Boolean, toggleColor: String, size: String }
+const toggleProps = {
+  isChecked: Boolean,
+  toggleColor: String,
+  size: String,
+  disabled: Boolean,
+}
 const ToggleDot = styled("span", toggleProps)`
   position: absolute;
   height: ${(props) =>
@@ -134,7 +141,9 @@ const ToggleDot = styled("span", toggleProps)`
   bottom: ${(props) =>
     props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
   background-color: ${(props) =>
-    props.isChecked
+    props.disabled
+      ? props.theme.colors.disabled
+      : props.isChecked
       ? props.toggleColor
         ? props.toggleColor
         : props.theme.colors.primary
@@ -144,17 +153,17 @@ const ToggleDot = styled("span", toggleProps)`
   transform: ${(props) =>
     props.isChecked
       ? props.size === "medium"
-        ? "translateX(45px)"
+        ? "translateX(25px)"
         : props.size === "small"
         ? "translateX(10px)"
-        : "translateX(45px)"
+        : "translateX(25px)"
       : "translateX(0)"};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
     width: 24px;
     transform: ${(props) =>
-      props.isChecked ? "translateX(45px)" : "translateX(0)"};
+      props.isChecked ? "translateX(25px)" : "translateX(0)"};
     bottom: 8px;
   }
 `
@@ -195,9 +204,16 @@ export default {
     fontColor: {
       required: false,
     },
+    disabled: {
+      required: false,
+      default: false,
+    },
   },
   methods: {
     onToggleChange() {
+      if (this.disabled) {
+        return
+      }
       this.$emit("on-toggle-change", !this.isChecked)
     },
   },

package/src/components/tables/mainTable/exampleNested.vue

@@ -1,6 +1,6 @@
 <!-- This is just an example how to use mainTable with collective positioning -->
 <!-- <template>
-  <draggable-table>
+  <main-table>
     <thead>
       <tr>
         <div />
@@ -156,13 +156,13 @@
       <td />
       <div />
     </tr>
-  </draggable-table>
+  </main-table>
 </template>
 
 <script>
 import draggable from "vuedraggable"
 import styled from "vue-styled-components"
-import DraggableTable from "@/components/reusable-components/tables/DraggableTable"
+import MainTable from "@/components/reusable-components/tables/MainTable"
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 import DeleteIcon from "@/components/reusable-components/DeleteIcon"
 import ThreeDots from "@/components/reusable-components/ThreeDots"
@@ -190,7 +190,7 @@ export default {
   components: {
     DraggableContainer,
     ParentContainer,
-    DraggableTable,
+    MainTable,
     InputText,
     ChildrenWrapper,
     DeleteIcon,

package/src/components/tables/mainTable/index.vue

@@ -62,6 +62,15 @@ const TableContainer = styled.table`
     }
   }
 
+  tbody {
+    tr {
+      &:hover {
+        background-color: ${(props) => props.theme.colors.grey5};
+        cursor: pointer;
+      }
+    }
+  }
+
   th {
     padding: 12px 20px;
     background-color: ${(props) => props.theme.colors.blue1};
@@ -184,8 +193,8 @@ const TableContainer = styled.table`
     }
 
     &:hover {
-      input {
-        background-color: ${(props) => props.theme.colors.grey5};
+      input:disabled {
+        background-color: ${(props) => props.theme.colors.grey5 + "!important"};
       }
 
       .drag-icon {
@@ -242,9 +251,9 @@ const TableContainer = styled.table`
   }
 
   input {
-    border: none;
     font-size: 13px;
     padding: 5px 10px;
+    background: #fff !important;
   }
 
   .open-container {

package/src/helpers/numberConverter.js

@@ -7,24 +7,24 @@ export const stringToNumber = ({ value, numberPrecision }) => {
     // replace commas with a dot, and dots with blank
     newVal = newVal
       .replace(/[^\d.,']/g, "")
-      .replace(/[.\s]/, "")
+      .replace(/[.\s]/g, "")
       .replace(/[,\s]/, ".")
   } else if (selectedLang === "en-us") {
     // replace commas with blank
-    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/, "")
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, "")
   } else if (
     selectedLang === "de-ch" ||
     selectedLang === "fr-ch" ||
     selectedLang === "it-ch"
   ) {
     // replace ' with blank
-    newVal = newVal.replace(/[^\d.,']/g, "").replace(/['\s]/, "")
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/['\s]/g, "")
   } else if (selectedLang === "fr-fr") {
     // replace space with blank, and commas with dot
-    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/, ".")
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, ".")
   } else {
     // en-US as default
-    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/, "")
+    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, "")
   }
   newVal = parseFloat(newVal).toFixed(numberPrecision)
   return parseFloat(newVal)