@eturnity/eturnity_reusable_components 1.1.99 → 1.2.0-beta.2

package/package.json

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

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

@@ -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,36 @@ 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
+<<<<<<< HEAD
+      ? 'none'
+      : props.hasLength
+      ? '1px solid ' + props.theme.colors.black
+      : '1px solid ' + props.theme.colors.mediumGray};
+=======
       ? "none"
       : "1px solid " + props.theme.colors.mediumGray};
+>>>>>>> master
   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 +137,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 +176,7 @@ const LabelText = styled.div`
 `
 
 export default {
-  name: "input-number",
+  name: 'input-number',
   components: {
     Container,
     InputContainer,
@@ -182,14 +189,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 +226,7 @@ export default {
     },
     errorMessage: {
       required: false,
-      default: "Please insert a correct number",
+      default: 'Please insert a correct number',
     },
     numberPrecision: {
       required: false,
@@ -221,7 +234,7 @@ export default {
     },
     unitName: {
       required: false,
-      default: "",
+      default: '',
     },
     showLinearUnitName: {
       required: false,
@@ -237,11 +250,11 @@ export default {
     },
     textAlign: {
       required: false,
-      default: "left",
+      default: 'left',
     },
     fontSize: {
       required: false,
-      default: "13px",
+      default: '13px',
     },
     labelText: {
       required: false,
@@ -253,7 +266,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: "right",
+      default: 'right',
     },
     minNumber: {
       required: false,
@@ -271,24 +284,28 @@ export default {
   methods: {
     onChangeHandler(event) {
       if (isNaN(event)) {
+<<<<<<< HEAD
+        event = ''
+=======
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
+>>>>>>> master
       }
-      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 {
@@ -299,11 +316,15 @@ export default {
           return num
         }
       })
+<<<<<<< HEAD
+      let evaluated = eval(formatted.join(''))
+=======
       let evaluated = eval(formatted.join(""))
       evaluated = stringToNumber({
         value: evaluated,
         numberPrecision: this.numberPrecision,
       })
+>>>>>>> master
       return evaluated
     },
     onInputBlur(e) {
@@ -323,8 +344,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,8 +362,16 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ""
+          : ''
       if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+<<<<<<< HEAD
+        let input = numberToString({
+          value: adjustedMinValue,
+          numberPrecision: this.numberPrecision,
+        })
+        let unit = this.showLinearUnitName ? '' : this.unitName
+        return input + ' ' + unit
+=======
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
@@ -351,8 +380,9 @@ export default {
           : adjustedMinValue
         let unit = this.showLinearUnitName ? "" : this.unitName
         return input + " " + unit
+>>>>>>> master
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-        return ""
+        return ''
       } else {
         return this.numberToStringEnabled
           ? numberToString({
@@ -380,9 +410,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

@@ -24,12 +24,12 @@
 //   <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 PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
   top: 0;
@@ -73,8 +73,8 @@ const ModalContainer = styled.div`
 
   .close {
     position: absolute;
-    right: 10px;
-    top: 10px;
+    right: 20px;
+    top: 20px;
 
     @media (max-width: 425px) {
       right: 14px;
@@ -93,46 +93,46 @@ const ModalContainer = styled.div`
 `
 
 export default {
-  name: "modal",
+  name: 'modal',
   components: {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner,
+    Spinner
   },
   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
+    }
   },
   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>

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

@@ -0,0 +1,30 @@
+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,
+});
+Default.args = {};