@eturnity/eturnity_reusable_components 1.2.0-beta.0 → 1.2.0-beta.3

package/package.json

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

package/src/App.vue

@@ -1,20 +1,18 @@
 <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
+      <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()"
@@ -23,14 +21,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>
-      </modal>
+            <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)"
@@ -63,18 +61,17 @@
 </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 Modal from '@/components/modals/modal'
+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"
 
 const PageContainer = styled.div`
@@ -82,7 +79,7 @@ const PageContainer = styled.div`
 `
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     ThemeProvider,
     PageContainer,
@@ -94,62 +91,62 @@ export default {
     Spinner,
     Checkbox,
     ExternalButton,
-    Modal,
+    // TableDropdown,
   },
   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,
         },
       ],
@@ -166,7 +163,7 @@ export default {
       return this.dropdownOpen
     },
     onClickButton() {
-      console.log('Test')
+      console.log("Test")
     },
     toggleDropdownOpen() {
       this.dropdownOpen = !this.dropdownOpen
@@ -177,19 +174,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",
           }),
         },
       ]
@@ -202,7 +199,7 @@ export default {
       } else if (row[value]) {
         item = row[value]
       } else {
-        item = '-'
+        item = "-"
       }
       return item
     },
@@ -216,4 +213,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

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

@@ -16,7 +16,7 @@
       <input-container
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="placeholder"
+        :placeholder="displayedPlaceholder"
         :isError="isError"
         :inputWidth="inputWidth"
         :minWidth="minWidth"
@@ -68,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"
+} from '../../../helpers/numberConverter'
+import InfoText from '../../infoText'
 
 const Container = styled.div`
   width: 100%;
@@ -91,29 +91,29 @@ const inputProps = {
   fontSize: 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};
   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 {
@@ -130,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
@@ -169,7 +169,7 @@ const LabelText = styled.div`
 `
 
 export default {
-  name: "input-number",
+  name: 'input-number',
   components: {
     Container,
     InputContainer,
@@ -182,14 +182,20 @@ export default {
   },
   data() {
     return {
-      textInput: "",
+      textInput: '',
       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,
@@ -213,7 +219,7 @@ export default {
     },
     errorMessage: {
       required: false,
-      default: "Please insert a correct number",
+      default: 'Please insert a correct number',
     },
     numberPrecision: {
       required: false,
@@ -221,7 +227,7 @@ export default {
     },
     unitName: {
       required: false,
-      default: "",
+      default: '',
     },
     showLinearUnitName: {
       required: false,
@@ -237,11 +243,11 @@ export default {
     },
     textAlign: {
       required: false,
-      default: "left",
+      default: 'left',
     },
     fontSize: {
       required: false,
-      default: "13px",
+      default: '13px',
     },
     labelText: {
       required: false,
@@ -253,7 +259,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: "right",
+      default: 'right',
     },
     minNumber: {
       required: false,
@@ -273,22 +279,22 @@ export default {
       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 {
@@ -323,8 +329,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) {
@@ -341,7 +347,7 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ""
+          : ''
       if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
         let input = this.numberToStringEnabled
           ? numberToString({
@@ -352,7 +358,7 @@ export default {
         let unit = this.showLinearUnitName ? "" : this.unitName
         return input + " " + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-        return ""
+        return ''
       } else {
         return this.numberToStringEnabled
           ? numberToString({
@@ -380,9 +386,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/modals/modal/index.vue

@@ -3,18 +3,15 @@
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
-    :backdrop="backdrop"
   >
     <modal-container @click.stop>
       <spinner v-if="isLoading" size="50px" :fullWidth="true" />
-      <content-container :visible="!isLoading">
-        <slot />
-      </content-container>
       <close-button
         v-if="!hideClose"
         @click.native="onCloseModal()"
         class="close"
       />
+      <slot />
     </modal-container>
   </page-wrapper>
 </template>
@@ -31,12 +28,7 @@ import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
-const contentAttrs = { visible: Boolean }
-const ContentContainer = styled('div', contentAttrs)`
-  visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
-`
-
-const pageAttrs = { isOpen: Boolean, backdrop: String }
+const pageAttrs = { isOpen: Boolean }
 const PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
@@ -44,10 +36,7 @@ const PageWrapper = styled('div', pageAttrs)`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: ${(props) =>
-    props.backdrop == 'dark'
-      ? 'rgba(0, 0, 0, 0.4)'
-      : 'rgba(255, 255, 255, 0.9)'};
+  background-color: rgba(255, 255, 255, 0.9);
   z-index: 99999;
   overflow: auto;
 
@@ -109,8 +98,7 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner,
-    ContentContainer,
+    Spinner
   },
   props: {
     isOpen: {
@@ -127,12 +115,8 @@ export default {
     },
     hideClose: {
       required: false,
-      default: false,
-    },
-    backdrop: {
-      required: false,
-      default: 'white',
-    },
+      default: false
+    }
   },
   methods: {
     onCloseModal() {

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

@@ -26,6 +26,5 @@ export const Default = Template.bind({
   preventOutsideClose: true,
   isLoading: false,
   hideClose: false,
-  backdrop: 'dark',
-})
+});
 Default.args = {};