@eturnity/eturnity_reusable_components 1.1.27 → 1.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.27",
+  "version": "1.1.30",
   "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/tableDropdown/index.vue

@@ -6,7 +6,7 @@
     ref="dropdownItem"
     :disabled="disabled"
   >
-    <component-container :colSpan="colSpan" class="table-dropdown">
+    <component-container :colSpan="colSpan - 1" class="table-dropdown">
       <component-item v-for="(item, index) in tableItems" :key="index">
         <template-button
           @click.stop="onTemplateClick(item.row)"
@@ -161,7 +161,7 @@ const ComponentItem = styled.div`
 const containerAttrs = { colSpan: Number }
 const ComponentContainer = styled("div", containerAttrs)`
   display: grid;
-  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr)) auto;
+  grid-template-columns: 1fr repeat(${(props) => props.colSpan}, auto) auto;
   grid-gap: 12px;
   align-items: center;
   background-color: ${(props) => props.theme.colors.white};
@@ -217,7 +217,7 @@ const OptionsWrapper = styled.div`
 
 const OptionsItem = styled("div", containerAttrs)`
   display: grid;
-  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr));
+  grid-template-columns: 1fr repeat(${(props) => props.colSpan}, auto);
   grid-gap: 12px;
   padding: 10px;
   height: max-content;

package/src/helpers/numberConverter.js

@@ -1,43 +1,67 @@
-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")
+  const selectedLang = localStorage.getItem('lang')
   // The first replace will replace not allowed characters with a blank
   if (
-    selectedLang === "de-DE" ||
-    selectedLang === "it-CH" ||
-    selectedLang === "no-no" ||
-    selectedLang === "da-dk"
+    selectedLang === 'de-DE' ||
+    selectedLang === 'it-CH' ||
+    selectedLang === 'no-no' ||
+    selectedLang === 'da-dk' ||
+    selectedLang === 'de'
   ) {
     // replace commas with a dot, and dots with blank
-    newVal = newVal
-      .replace(/[^\d.,']/g, "")
-      .replace(/[.\s]/g, "")
-      .replace(/[,\s]/, ".")
-  } else if (selectedLang === "en-us") {
+    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"
+    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"
+    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)
-}
+},
 
 export const numberToString = ({ value, numberPrecision }) => {
   let selectedLang = localStorage.getItem("lang")