@eturnity/eturnity_reusable_components 1.1.98 → 1.2.0-beta.1

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "useTabs": false,
+    "trailingComma": "none",
+    "printWidth": 80
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.98",
+  "version": "1.2.0-beta.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,18 +1,20 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <main-table titleText="My Table">
-        <thead>
-          <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-            <div />
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <!-- <table-dropdown
+      <br />
+      <modal backdrop="dark" :isLoading="false" :isOpen="true">
+        <main-table titleText="My Table">
+          <thead>
+            <tr>
+              <th>Column 1</th>
+              <th>Column 2</th>
+              <th>Column 3</th>
+              <div />
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <!-- <table-dropdown
               :colSpan="3"
               :tableItems="getDropdownValues()"
               @toggle-dropdown-open="toggleDropdownOpen()"
@@ -21,14 +23,14 @@
               :optionItems="itemOptions"
               :optionsDisplay="['display_name', 'company_item_number', 'model']"
             /> -->
-            <td>Test</td>
-            <div class="icons-container">
-              <three-dots :options="listOptions" :isLoading="false" />
-            </div>
-          </tr>
-        </tbody>
-      </main-table>
-      <br />
+              <td>Test</td>
+              <div class="icons-container">
+                <three-dots :options="listOptions" :isLoading="false" />
+              </div>
+            </tr>
+          </tbody>
+        </main-table>
+      </modal>
       <br />
       <toggle
         @on-toggle-change="onInputChange($event)"
@@ -61,17 +63,18 @@
 </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 { 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 Modal from '@/components/modals/modal'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -79,7 +82,7 @@ const PageContainer = styled.div`
 `
 
 export default {
-  name: "App",
+  name: 'App',
   components: {
     ThemeProvider,
     PageContainer,
@@ -91,62 +94,62 @@ export default {
     Spinner,
     Checkbox,
     ExternalButton,
-    // TableDropdown,
+    Modal,
   },
   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",
+          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",
+          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",
+          display_name: 'Test 2',
+          company_item_number: '1234',
+          model: 'BTB-123',
           id: 2,
         },
         {
-          display_name: "Test 3",
-          company_item_number: "12345",
-          model: "BTB-543",
+          display_name: 'Test 3',
+          company_item_number: '12345',
+          model: 'BTB-543',
           id: 3,
         },
         {
-          display_name: "Test 4",
-          company_item_number: "123456",
-          model: "BTB-4930",
+          display_name: 'Test 4',
+          company_item_number: '123456',
+          model: 'BTB-4930',
           id: 4,
         },
       ],
@@ -163,7 +166,7 @@ export default {
       return this.dropdownOpen
     },
     onClickButton() {
-      console.log("Test")
+      console.log('Test')
     },
     toggleDropdownOpen() {
       this.dropdownOpen = !this.dropdownOpen
@@ -174,19 +177,19 @@ 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',
           }),
         },
       ]
@@ -199,7 +202,7 @@ export default {
       } else if (row[value]) {
         item = row[value]
       } else {
-        item = "-"
+        item = '-'
       }
       return item
     },
@@ -213,4 +216,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

package/src/components/buttons/closeButton/index.vue

@@ -13,7 +13,7 @@
 // <close-button
 //   color="#fff"
 // />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const Container = styled.div`
   position: relative;
@@ -27,8 +27,8 @@ const Wrapper = styled.div`
 `
 
 const lineAttrs = { color: String }
-const Line = styled("div", lineAttrs)`
-  width: 26px;
+const Line = styled('div', lineAttrs)`
+  width: 20px;
   height: 2px;
   background-color: ${(props) =>
     props.color ? props.color : props.theme.colors.red};
@@ -45,17 +45,17 @@ const RightLine = styled(Line)`
 `
 
 export default {
-  name: "close-button",
+  name: 'close-button',
   components: {
     Container,
     Wrapper,
     LeftLine,
-    RightLine,
+    RightLine
   },
   props: {
     color: {
-      required: false,
-    },
-  },
+      required: false
+    }
+  }
 }
 </script>

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

@@ -265,8 +265,8 @@ export default {
     },
     numberToStringEnabled: {
       required: false,
-      default: true
-    }
+      default: true,
+    },
   },
   methods: {
     onChangeHandler(event) {
@@ -294,12 +294,16 @@ export default {
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: this.numberPrecision,
+            numberPrecision: false,
           })
           return num
         }
       })
       let evaluated = eval(formatted.join(""))
+      evaluated = stringToNumber({
+        value: evaluated,
+        numberPrecision: this.numberPrecision,
+      })
       return evaluated
     },
     onInputBlur(e) {
@@ -309,7 +313,8 @@ export default {
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
       if ((evaluatedInput && value.length) || this.minNumber !== null) {
         this.textInput = numberToString({
-          value: evaluatedInput && value.length ? evaluatedInput : this.minNumber,
+          value:
+            evaluatedInput && value.length ? evaluatedInput : this.minNumber,
           numberPrecision: this.numberPrecision,
         })
       }
@@ -338,19 +343,23 @@ export default {
           ? this.minNumber
           : ""
       if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
-        let input =  this.numberToStringEnabled ? numberToString({
-          value: adjustedMinValue,
-          numberPrecision: this.numberPrecision,
-        }) : adjustedMinValue
+        let input = this.numberToStringEnabled
+          ? numberToString({
+              value: adjustedMinValue,
+              numberPrecision: this.numberPrecision,
+            })
+          : adjustedMinValue
         let unit = this.showLinearUnitName ? "" : this.unitName
         return input + " " + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
         return ""
       } else {
-        return  this.numberToStringEnabled ? numberToString({
-          value: adjustedMinValue,
-          numberPrecision: this.numberPrecision,
-        }) : adjustedMinValue
+        return this.numberToStringEnabled
+          ? numberToString({
+              value: adjustedMinValue,
+              numberPrecision: this.numberPrecision,
+            })
+          : adjustedMinValue
       }
     },
   },

package/src/components/modals/modal/index.vue

@@ -3,15 +3,19 @@
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
+    :backdrop="backdrop"
+    :fullwidthSpinner="fullwidthSpinner"
   >
     <modal-container @click.stop>
-      <spinner v-if="isLoading" size="50px" :fullWidth="true" />
+      <spinner v-if="isLoading" size="50px" :fullWidth="fullwidthSpinner" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
       <close-button
         v-if="!hideClose"
         @click.native="onCloseModal()"
         class="close"
       />
-      <slot />
     </modal-container>
   </page-wrapper>
 </template>
@@ -24,19 +28,27 @@
 //   <div>Data....</div>
 // </modal>
 
-import styled from "vue-styled-components"
-import CloseButton from "../../buttons/closeButton"
-import Spinner from "../../spinner"
+import styled from 'vue-styled-components'
+import CloseButton from '../../buttons/closeButton'
+import Spinner from '../../spinner'
 
-const pageAttrs = { isOpen: Boolean }
-const PageWrapper = styled("div", pageAttrs)`
+const contentAttrs = { visible: Boolean }
+const ContentContainer = styled('div', contentAttrs)`
+  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
+`
+
+const pageAttrs = { isOpen: Boolean, backdrop: String }
+const PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: ${(props) =>
+    props.backdrop == 'dark'
+      ? 'rgba(0, 0, 0, 0.4)'
+      : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
 
@@ -73,8 +85,8 @@ const ModalContainer = styled.div`
 
   .close {
     position: absolute;
-    right: 10px;
-    top: 10px;
+    right: 20px;
+    top: 20px;
 
     @media (max-width: 425px) {
       right: 14px;
@@ -93,46 +105,55 @@ const ModalContainer = styled.div`
 `
 
 export default {
-  name: "modal",
+  name: 'modal',
   components: {
     PageWrapper,
     ModalContainer,
     CloseButton,
     Spinner,
+    ContentContainer
   },
   props: {
     isOpen: {
       required: true,
-      default: false,
+      default: false
     },
     preventOutsideClose: {
       required: false,
-      default: false,
+      default: false
     },
     isLoading: {
       required: false,
-      default: false,
+      default: false
     },
     hideClose: {
       required: false,
-      default: false,
+      default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
     },
+    fullwidthSpinner: {
+      required: false,
+      default: true
+    }
   },
   methods: {
     onCloseModal() {
-      this.$emit("on-close")
+      this.$emit('on-close')
     },
     onOutsideClose() {
       // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
       if (!this.preventOutsideClose) {
-        this.$emit("on-close")
+        this.$emit('on-close')
       }
-    },
+    }
   },
   watch: {
     isOpen: function (newVal) {
-      document.body.style.overflow = newVal ? "hidden" : ""
-    },
-  },
+      document.body.style.overflow = newVal ? 'hidden' : ''
+    }
+  }
 }
-</script>
+</script>

package/src/components/modals/modal/modal.stories.js

@@ -0,0 +1,31 @@
+import Modal from "./index.vue";
+
+export default {
+  title: "Modal",
+  component: Modal,
+  // argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Modal },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<modal v-bind="$props" />',
+
+  // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
+  // This is a more flexible modal box, where the parent can decide how the body of the modal looks
+  // To use:
+  // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+  //   <div>Data....</div>
+  // </modal>
+});
+
+export const Default = Template.bind({
+  isOpen: true,
+  preventOutsideClose: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'dark',
+})
+Default.args = {};

package/src/components/spinner/index.vue

@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -37,29 +37,32 @@ const Container = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled("img", spinnerAttrs)`
-  width: ${(props) => (props.size ? props.size : "60px")};
+const SpinnerWrapper = styled('img', spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : '60px')};
 `
 
 export default {
-  name: "spinner",
+  name: 'spinner',
   components: {
     Container,
     SpinnerWrapper,
-    SpinnerContainer,
+    SpinnerContainer
   },
   props: {
     fullWidth: {
       required: false,
-      default: false,
+      default: false
     },
     size: {
       required: false,
-      default: null,
-    },
-  },
+      default: null
+    }
+  }
 }
-</script>
+</script>

package/src/helpers/numberConverter.js

@@ -1,79 +1,88 @@
-export const stringToNumber = ({ value, numberPrecision, allowNegative }) => {
+export const stringToNumber = ({
+  value,
+  numberPrecision = false,
+  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 === "no-no" ||
-    selectedLang === "da-dk" ||
-    selectedLang === "de-lu" ||
-    selectedLang === "de-be" ||
-    selectedLang === "es-es" ||
-    selectedLang === "de"
+    selectedLang === 'de-DE' ||
+    selectedLang === 'no-no' ||
+    selectedLang === 'da-dk' ||
+    selectedLang === 'de-lu' ||
+    selectedLang === 'de-be' ||
+    selectedLang === 'es-es' ||
+    selectedLang === 'de'
   ) {
     // replace dots with blank, and commas with a dot: 1.234,56 --> 1234.56
     if (allowNegative) {
       newVal = newVal
-        .replace(/[^\d-.,']/g, "")
-        .replace(/[.\s]/g, "")
-        .replace(/[,\s]/, ".")
+        .replace(/[^\d-.,']/g, '')
+        .replace(/[.\s]/g, '')
+        .replace(/[,\s]/, '.')
     } else {
       newVal = newVal
-        .replace(/[^\d.,']/g, "")
-        .replace(/[.\s]/g, "")
-        .replace(/[,\s]/, ".")
+        .replace(/[^\d.,']/g, '')
+        .replace(/[.\s]/g, '')
+        .replace(/[,\s]/, '.')
     }
-  } else if (selectedLang === "en-us") {
+  } else if (selectedLang === 'en-us') {
     // replace commas with blank: 1,234.56 --> 1234.56
     if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/[,\s]/g, "")
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '')
     } else {
-      newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, "")
+      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: 1'234.56 --> 1234.56
     if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/['\s]/g, "")
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/['\s]/g, '')
     } else {
-      newVal = newVal.replace(/[^\d.,']/g, "").replace(/['\s]/g, "")
+      newVal = newVal.replace(/[^\d.,']/g, '').replace(/['\s]/g, '')
     }
   } else if (
-    selectedLang === "fr-fr" ||
-    selectedLang === "fr-be" ||
-    selectedLang === "fr-lu" ||
-    selectedLang === "sv-se" ||
-    selectedLang === "pt-pt" ||
-    selectedLang === "fr"
+    selectedLang === 'fr-fr' ||
+    selectedLang === 'fr-be' ||
+    selectedLang === 'fr-lu' ||
+    selectedLang === 'sv-se' ||
+    selectedLang === 'pt-pt' ||
+    selectedLang === 'fr'
   ) {
     // replace space with blank, and commas with dot: 1 234,56 --> 1234.56
     if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/[,\s]/g, ".")
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '.')
     } else {
-      newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, ".")
+      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '.')
     }
   } else {
     // en-US as default: 1,234.56 --> 1234.56
     if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, "").replace(/[,\s]/g, "")
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '')
     } else {
-      newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, "")
+      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '')
     }
   }
-  newVal = parseFloat(newVal).toFixed(numberPrecision)
+  newVal = parseFloat(newVal)
+  if (numberPrecision !== false) {
+    newVal = newVal.toFixed(numberPrecision)
+  }
   return parseFloat(newVal)
 }
 
 export const numberToString = ({ value, numberPrecision }) => {
-  let selectedLang = localStorage.getItem("lang")
-    ? localStorage.getItem("lang") === 'fr-lu' ? 'fr-fr' : localStorage.getItem("lang")
-    : "en-US"
+  let selectedLang = localStorage.getItem('lang')
+    ? localStorage.getItem('lang') === 'fr-lu'
+      ? 'fr-fr'
+      : localStorage.getItem('lang')
+    : 'en-US'
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,
-    maximumFractionDigits: numberPrecision,
+    maximumFractionDigits: numberPrecision
   })
 }