@eturnity/eturnity_reusable_components 1.1.29 → 1.1.32

package/package.json

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

package/src/App.vue

@@ -37,6 +37,13 @@
         labelAlign="right"
         :disabled="true"
       />
+      <br />
+      <input-number
+        placeholder="Enter distance"
+        :numberPrecision="2"
+        :value="inputValue"
+        @input-change="onInputChange($event)"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -48,6 +55,7 @@ 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 TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -62,6 +70,7 @@ export default {
     MainTable,
     ThreeDots,
     Toggle,
+    InputNumber,
     // TableDropdown,
   },
   data() {
@@ -128,7 +137,7 @@ export default {
       return theme
     },
     onInputChange(event) {
-      this.isChecked = event
+      this.inputValue = event
     },
     isDropdownOpen() {
       return this.dropdownOpen

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -42,6 +42,7 @@ Default.args = {
   disabled: false,
   value: "",
   inputWidth: "200px",
+  minWidth: "150px",
   unitName: "pc",
   isError: false,
   numberPrecision: 0,

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

@@ -18,6 +18,7 @@
         :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
+        :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         :hasLength="!!value && !!value.length"
         @blur="onInputBlur($event)"
@@ -48,6 +49,7 @@
 //     placeholder="Enter distance"
 //     :isError="false" //default is false
 //     inputWidth="150px" //by default, this is 100%
+//     minWidth="100px"
 //     :numberPrecision="3"
 //     unitName="pc"
 //     :value="inputValue" //required -- String
@@ -79,6 +81,7 @@ const inputProps = {
   isError: Boolean,
   hasUnit: Boolean,
   inputWidth: String,
+  minWidth: String,
   hasLength: Boolean,
   isDisabled: Boolean,
   noBorder: Boolean,
@@ -103,6 +106,7 @@ const InputContainer = styled("input", inputProps)`
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
   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"};
   box-sizing: border-box;
@@ -189,6 +193,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null,
+    },
     value: {
       required: true,
       default: null,

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

@@ -319,8 +319,6 @@ const TableContainer = styled.table`
     font-size: 13px;
     padding: 5px 10px;
     background: #fff;
-    min-width: max-content;
-    min-width: 150px; // Safari/Firefox backup
 
     &:focus {
       background: ${(props) => props.theme.colors.grey5};

package/src/helpers/numberConverter.js

@@ -1,4 +1,4 @@
-export const stringToNumber = ({ value, numberPrecision }) => {
+export const stringToNumber = ({ value, numberPrecision, allowNegative }) => {
   // This is for saving. It converts our input string to a readable number
   let newVal = value.toString()
   const selectedLang = localStorage.getItem("lang")
@@ -11,30 +11,53 @@ export const stringToNumber = ({ value, numberPrecision }) => {
     selectedLang === "de"
   ) {
     // replace commas with a dot, and dots with blank
-    newVal = newVal
-      .replace(/[^\d.,']/g, "")
-      .replace(/[.\s]/g, "")
-      .replace(/[,\s]/, ".")
+    if (allowNegative) {
+      newVal = newVal
+        .replace(/[^\d-.,']/g, "")
+        .replace(/[.\s]/g, "")
+        .replace(/[,\s]/, ".")
+    } else {
+      newVal = newVal
+        .replace(/[^\d.,']/g, "")
+        .replace(/[.\s]/g, "")
+        .replace(/[,\s]/, ".")
+    }
   } else if (selectedLang === "en-us") {
     // replace commas with blank
-    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, "")
+    if (allowNegative) {
+      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/[,\s]/g, "")
+    } else {
+      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]/g, "")
+    if (allowNegative) {
+      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/['\s]/g, "")
+    } else {
+      newVal = newVal.replace(/[^\d.,']/g, "").replace(/['\s]/g, "")
+    }
   } else if (
     selectedLang === "fr-fr" ||
     selectedLang === "fr" ||
     selectedLang === "sv-se"
   ) {
     // replace space with blank, and commas with dot
-    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, ".")
+    if (allowNegative) {
+      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/[,\s]/g, ".")
+    } else {
+      newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, ".")
+    }
   } else {
     // en-US as default
-    newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, "")
+    if (allowNegative) {
+      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/[,\s]/g, "")
+    } else {
+      newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, "")
+    }
   }
   newVal = parseFloat(newVal).toFixed(numberPrecision)
   return parseFloat(newVal)