@eturnity/eturnity_reusable_components 1.2.1-beta.1 → 1.2.1

package/package.json

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

package/src/App.vue

@@ -1,14 +1,63 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
+      <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()"
+              @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>
+      </modal>
+      <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
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
+        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"
       />
+      <external-button text="Click me!" minWidth="500px" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -17,7 +66,16 @@
 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`
   padding: 40px;
@@ -28,19 +86,25 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    InputNumber
-    // TableDropdown,
+    MainTable,
+    ThreeDots,
+    Toggle,
+    InputNumber,
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    ExternalButton,
+    Modal,
   },
   data() {
     return {
-      num: 42,
       inputValue: null,
       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,
@@ -48,53 +112,50 @@ export default {
         {
           name: 'Option 1',
           value: 'option_1',
-          disabled: true
+          disabled: true,
         },
         {
           name: 'Option 2',
-          value: 'option_2'
+          value: 'option_2',
         },
         {
           name: 'Option 3',
-          value: 'option_3'
+          value: 'option_3',
         },
         {
           name: 'Option 4',
-          value: '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
+          id: 1,
         },
         {
           display_name: 'Test 2',
           company_item_number: '1234',
           model: 'BTB-123',
-          id: 2
+          id: 2,
         },
         {
           display_name: 'Test 3',
           company_item_number: '12345',
           model: 'BTB-543',
-          id: 3
+          id: 3,
         },
         {
           display_name: 'Test 4',
           company_item_number: '123456',
           model: 'BTB-4930',
-          id: 4
-        }
-      ]
+          id: 4,
+        },
+      ],
     }
   },
   methods: {
-    keydownHandler(e) {
-      console.log('test', e)
-    },
     getTheme() {
       return theme
     },
@@ -116,21 +177,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
     },
@@ -144,8 +205,8 @@ export default {
         item = '-'
       }
       return item
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -14,10 +14,9 @@
     </label-wrapper>
     <input-wrapper>
       <input-container
-        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="displayedPlaceholder"
+        :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
         :minWidth="minWidth"
@@ -31,7 +30,6 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        v-on="$listeners"
       />
       <unit-container
         v-if="unitName && showLinearUnitName"
@@ -70,12 +68,12 @@
 //     :minNumber="0"
 //     fontColor="blue"
 // />
-import styled from 'vue-styled-components'
+import styled from "vue-styled-components"
 import {
   stringToNumber,
-  numberToString
-} from '../../../helpers/numberConverter'
-import InfoText from '../../infoText'
+  numberToString,
+} from "../../../helpers/numberConverter"
+import InfoText from "../../infoText"
 
 const Container = styled.div`
   width: 100%;
@@ -91,31 +89,31 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String
+  fontColor: String,
 }
-const InputContainer = styled('input', inputProps)`
+const InputContainer = styled("input", inputProps)`
   border: ${(props) =>
     props.isError
-      ? '1px solid ' + props.theme.colors.red
+      ? "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'};
+    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: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "13px")};
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
       : props.fontColor
-      ? props.fontColor + ' !important'
+      ? props.fontColor + " !important"
       : props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
+  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'};
+    props.isDisabled ? props.theme.colors.grey5 : "#fff"};
   box-sizing: border-box;
 
   &::placeholder {
@@ -132,7 +130,7 @@ const InputWrapper = styled.span`
   position: relative;
 `
 
-const UnitContainer = styled('span', inputProps)`
+const UnitContainer = styled("span", inputProps)`
   border-left: 1px solid
     ${(props) =>
       props.isError
@@ -171,7 +169,7 @@ const LabelText = styled.div`
 `
 
 export default {
-  name: 'input-number',
+  name: "input-number",
   components: {
     Container,
     InputContainer,
@@ -180,138 +178,131 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText
+    InfoText,
   },
-  inheritAttrs: false,
   data() {
     return {
-      textInput: '',
-      isFocused: false
-    }
-  },
-  computed: {
-    displayedPlaceholder() {
-      if (this.placeholder) return this.placeholder
-      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
+      textInput: "",
+      isFocused: false,
     }
   },
   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) {
       if (isNaN(event)) {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
-      this.$emit('input-change', event)
+      this.$emit("input-change", event)
     },
     onEvaluateCode(val) {
       // function to perform math on the code
       // filter the string in case of any malicious content
-      let filtered = val.replace(/[^-()\d/*+.,]/g, '')
+      let filtered = val.replace(/[^-()\d/*+.,]/g, "")
       filtered = filtered.split(/([-+*/()])/)
       let formatted = filtered.map((item) => {
         if (
-          item === '+' ||
-          item === '-' ||
-          item === '*' ||
-          item === '/' ||
-          item === '(' ||
-          item === ')' ||
-          item === ''
+          item === "+" ||
+          item === "-" ||
+          item === "*" ||
+          item === "/" ||
+          item === "(" ||
+          item === ")" ||
+          item === ""
         ) {
           return item
         } 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
     },
@@ -324,7 +315,7 @@ export default {
         this.textInput = numberToString({
           value:
             evaluatedInput && value.length ? evaluatedInput : this.minNumber,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
         })
       }
       let adjustedMinValue =
@@ -332,8 +323,8 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''
-      this.$emit('input-blur', adjustedMinValue)
+          : ""
+      this.$emit("input-blur", adjustedMinValue)
     },
     focusInput() {
       if (this.disabled) {
@@ -350,38 +341,38 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''
+          : ""
       if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
         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 ''
+        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,
       })
     }
   },
@@ -389,9 +380,9 @@ export default {
     clearInput: function (value) {
       if (value) {
         // If the value is typed, then we should clear the textInput on Continue
-        this.textInput = ''
+        this.textInput = ""
       }
-    }
-  }
+    },
+  },
 }
-</script>
+</script>

package/src/components/spinner/index.vue

@@ -32,14 +32,13 @@ const SpinnerContainer = styled.div`
   justify-items: center;
   z-index: 100;
 `
-
-const Container = styled.div`
+const containerAttrs = { limitedToModal: Boolean }
+const Container = styled('div', containerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
+  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
 `
 
 const spinnerAttrs = { size: String }
@@ -59,6 +58,10 @@ export default {
       required: false,
       default: false
     },
+    limitedToModal: {
+      required: false,
+      default: false
+    },
     size: {
       required: false,
       default: null