@eturnity/eturnity_reusable_components 1.2.0-beta.3 → 1.2.1-beta.1

package/package.json

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

package/src/App.vue

@@ -1,158 +1,100 @@
 <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
-              :colSpan="3"
-              :tableItems="getDropdownValues()"
-              @toggle-dropdown-open="toggleDropdownOpen()"
-              @item-selected="onItemSelected({ item: $event, index })"
-              :isOpen="isDropdownOpen()"
-              :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 />
-      <br />
-      <toggle
-        @on-toggle-change="onInputChange($event)"
-        :isChecked="inputValue"
-        label="My Label Text"
-        infoTextMessage="This is my test message"
-        infoTextAlign="right"
-        labelAlign="right"
-        :disabled="false"
-      />
-      <br />
       <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-      />
-      <br />
-      <page-subtitle text="My Subtitle" infoText="My info Text" />
-      <spinner size="30px" />
-      <checkbox
-        label="Do you accept the Terms?"
-        :isChecked="true"
-        size="small"
-        :isDisabled="false"
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
       />
-      <external-button text="Click me!" minWidth="500px" />
     </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 TableDropdown from "@/components/tableDropdown"
+import { ThemeProvider } from 'vue-styled-components'
+import theme from './assets/theme'
+import styled from 'vue-styled-components'
+import InputNumber from '@/components/inputs/inputNumber'
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
 export default {
-  name: "App",
+  name: 'App',
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
-    InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    ExternalButton,
+    InputNumber
     // TableDropdown,
   },
   data() {
     return {
+      num: 42,
       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: {
+    keydownHandler(e) {
+      console.log('test', e)
+    },
     getTheme() {
       return theme
     },
@@ -163,7 +105,7 @@ export default {
       return this.dropdownOpen
     },
     onClickButton() {
-      console.log("Test")
+      console.log('Test')
     },
     toggleDropdownOpen() {
       this.dropdownOpen = !this.dropdownOpen
@@ -174,21 +116,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
     },
@@ -199,11 +141,11 @@ export default {
       } else if (row[value]) {
         item = row[value]
       } else {
-        item = "-"
+        item = '-'
       }
       return item
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -213,4 +155,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

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

@@ -14,6 +14,7 @@
     </label-wrapper>
     <input-wrapper>
       <input-container
+        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
         :placeholder="displayedPlaceholder"
@@ -30,6 +31,7 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        v-on="$listeners"
       />
       <unit-container
         v-if="unitName && showLinearUnitName"
@@ -71,7 +73,7 @@
 import styled from 'vue-styled-components'
 import {
   stringToNumber,
-  numberToString,
+  numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
 
@@ -89,15 +91,15 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String,
+  fontColor: String
 }
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
       ? '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'};
   border-radius: 4px;
@@ -178,101 +180,102 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText,
+    InfoText
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false,
+      isFocused: false
     }
   },
   computed: {
     displayedPlaceholder() {
       if (this.placeholder) return this.placeholder
       return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
-    },
+    }
   },
   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
+    }
   },
   methods: {
     onChangeHandler(event) {
@@ -300,15 +303,15 @@ export default {
         } 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
     },
@@ -321,7 +324,7 @@ export default {
         this.textInput = numberToString({
           value:
             evaluatedInput && value.length ? evaluatedInput : this.minNumber,
-          numberPrecision: this.numberPrecision,
+          numberPrecision: this.numberPrecision
         })
       }
       let adjustedMinValue =
@@ -352,33 +355,33 @@ export default {
         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 ''
       } 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
       })
     }
   },
@@ -388,7 +391,7 @@ export default {
         // If the value is typed, then we should clear the textInput on Continue
         this.textInput = ''
       }
-    },
-  },
+    }
+  }
 }
 </script>

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>
@@ -28,7 +32,12 @@ import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
-const pageAttrs = { isOpen: Boolean }
+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;
@@ -36,7 +45,10 @@ const PageWrapper = styled('div', pageAttrs)`
   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;
 
@@ -98,7 +110,8 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner
+    Spinner,
+    ContentContainer
   },
   props: {
     isOpen: {
@@ -116,6 +129,14 @@ export default {
     hideClose: {
       required: false,
       default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
+    },
+    fullwidthSpinner: {
+      required: false,
+      default: true
     }
   },
   methods: {
@@ -135,4 +156,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -26,5 +26,6 @@ export const Default = Template.bind({
   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>