@eturnity/eturnity_reusable_components 1.2.31-3d-master.1 → 1.2.31-3d-master.3

package/package.json

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

package/src/App.vue

@@ -115,13 +115,14 @@
       <br /> -->
       <!-- <iconCollection /> -->
       <input-text
-        placeholder="Enter distance"
+        placeholder="Company name"
         :value="inputValue"
         @input-change="onInputChange($event)"
         @input-blur="onInputBlur($event)"
         type="password"
       />
       <br />
+<<<<<<< HEAD
       <!-- <page-subtitle text="My Subtitle" infoText="My info Text" />
       <spinner size="30px" />
       <checkbox
@@ -131,6 +132,16 @@
         :isDisabled="false"
       /> -->
       <!-- <external-button text="Click me!" minWidth="500px" /> -->
+>>>>>>> master
+=======
+      <input-number
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
+      />
 >>>>>>> master
     </page-container>
   </ThemeProvider>
@@ -150,11 +161,6 @@ import Spinner from "@/components/spinner"
 import ExternalButton from "@/components/buttons/externalButton"
 import InputText from "@/components/inputs/inputText"
 // import TableDropdown from "@/components/tableDropdown"
-const InputAnnexContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 10px;
-`
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -183,35 +189,7 @@ export default {
     iconCollection,
     RowContainer
   },
-  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'
-      },
-      dropdownOpen: false,
-      isChecked: false,
-      listOptions: [
-        {
-          name: 'Option 1',
-          value: 'option_1',
-          disabled: true
-        },
-        {
-          name: 'Option 2',
-          value: 'option_2'
-        },
-        {
-          name: 'Option 3',
-          value: 'option_3'
-        },
         {
-          name: 'Option 4',
           value: 'option_4'
         }
       ],

package/src/assets/theme.js

@@ -18,10 +18,12 @@ const theme = {
     grey3: '#b2b9c5',
     grey4: '#dee2eb',
     grey5: '#fafafa',
+    grey6: '#555d61',
     green: '#99db0c',
     transparentWhite1:'#ffffff32',
     transparentBlack1:'#263238e6',
-    disabled: '#dfe1e1'
+    disabled: '#dfe1e1',
+    eturnityGrey: '#263238'
   },
   screen: {
     mobileSmall: '345px',

package/src/components/errorMessage/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
 //To use:
 // <error-message
 //     alignText="right" // default is left
@@ -22,12 +22,12 @@ const TextOverlay = styled.div`
   padding: 10px;
   width: max-content;
   max-width: 100%;
-  min-width: 200px;
+  min-width: min-content;
   font-size: 11px;
   font-weight: 400;
   border-radius: 4px;
   font-family: 'Lato-Bold', Arial;
-  z-index: 10;
+  z-index: 999;
   color: ${(props) => props.theme.colors.white};
 
   :before {
@@ -59,4 +59,4 @@ export default {
     return {}
   }
 }
-</script>
+</script>

package/src/components/infoText/index.vue

@@ -14,13 +14,12 @@
       <text-overlay
         v-if="showInfo"
         :borderColor="borderColor"
-        :alignText="alignText"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
         :iconSize="size"
-      ><slot />
-        {{ text }}
+        ><slot />
+        <span v-html="text"></span>
       </text-overlay>
     </icon-wrapper>
   </component-wrapper>
@@ -33,25 +32,32 @@
 //     text="Veritatis et quasi architecto beatae vitae"
 //     borderColor="#ccc"
 //     size="20"
-//     alignText="right" // default is left
+//     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'
 import styled from 'vue-styled-components'
 import icon from '../icon'
 
-const textAttrs = { iconSize:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
+const textAttrs = {
+  iconSize: String,
+  borderColor: String,
+  alignArrow: String,
+  width: String,
+  halfComputedTextInfoWidth: Number
+}
 const TextOverlay = styled('div', textAttrs)`
   position: absolute;
-  top: ${(props) => 'calc('+props.iconSize+' + 15px)'};
-  ${(props) => (props.alignArrow === 'left' 
-    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
-    : props.alignArrow === 'center' 
-    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
-    : 'right: calc('+props.iconSize+' /2 - 17px)')};
-  text-align: ${(props) => props.alignText};
+  top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
+  ${(props) =>
+    props.alignArrow === 'left'
+      ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
+      : props.alignArrow === 'center'
+      ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
+      : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
+  text-align: 'left';
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: ${(props) => props.width };
+  width: ${(props) => props.width};
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -64,14 +70,21 @@ const TextOverlay = styled('div', textAttrs)`
     background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
-    ${(props) => (props.alignArrow === 'left' ? 'left:40px;' : 
-    props.alignArrow=='center' ? 'left: calc(50% + 19px);' : 
-    'right:-13px;')};
+    ${(props) =>
+      props.alignArrow === 'left'
+        ? 'left:40px;'
+        : props.alignArrow == 'center'
+        ? 'left: calc(50% + 19px);'
+        : 'right:-13px;'};
     height: 8px;
     width: 8px;
     transform-origin: center center;
     transform: translate(-2em, -0.5em) rotate(45deg);
   }
+
+  span a {
+    color: #2cc0eb;
+  }
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
@@ -101,7 +114,7 @@ export default {
   },
   props: {
     text: {
-      required: false,
+      required: false
     },
     borderColor: {
       required: false,
@@ -111,21 +124,17 @@ export default {
       required: false,
       default: '14px'
     },
-    alignText: {
+    alignArrow: {
       required: false,
-      default: 'left' // "left" or "right"
+      default: 'center'
     },
-    alignArrow:{
-      required:false,
-      default:'center'
-    },
-    openTrigger:{
-      required:false,
-      default: 'onClick'
+    openTrigger: {
+      required: false,
+      default: 'onHover' // onHover, onClick
     },
-    width:{
-      required:false,
-      default:'165px'
+    width: {
+      required: false,
+      default: '165px'
     }
   },
   methods: {
@@ -147,7 +156,7 @@ export default {
   },
   data() {
     return {
-      showInfo: false,
+      showInfo: false
     }
   },
   computed: {
@@ -159,8 +168,8 @@ export default {
         : theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
-      return parseInt(this.width)/2;
+      return parseInt(this.width) / 2
     }
   }
 }
-</script>
+</script>

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

@@ -1,7 +1,6 @@
 <template>
   <container :inputWidth="inputWidth" :alignItems="alignItems">
     <label-slot-wrapper v-if="hasLabelSlot" :isInteractive="isInteractive" @mousedown="initInteraction">
-
       <slot name="label"></slot>
     </label-slot-wrapper>
     
@@ -131,7 +130,7 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding-top: 11px;
   padding-bottom: 11px;
   padding-left: 10px;
@@ -145,7 +144,9 @@ const InputContainer = styled('input', inputProps)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   color: ${(props) =>
     props.isError
-      ? props.theme.colors.red
+      ? props.theme.colors.grey6
+      : props.isDisabled
+      ? props.theme.colors.grey2
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
@@ -157,10 +158,9 @@ const InputContainer = styled('input', inputProps)`
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
-  max-height: ${(props) => (props.inputHeight)};
+  max-height: ${(props) => props.inputHeight};
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -239,8 +239,9 @@ const LabelSlotWrapper = styled('div',inputProps)`
 `
 
 const LabelText = styled.div`
-  font-weight: bold;
   font-size: 13px;
+  color: ${(props) => props.theme.colors.eturnityGrey};
+  font-weight: 700;
 `
 
 export default {
@@ -263,7 +264,7 @@ export default {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon,
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -283,9 +284,9 @@ export default {
       required: false,
       default: null
     },
-    inputHeight:{
-      required:false,
-      default:null
+    inputHeight: {
+      required: false,
+      default: null
     },
     value: {
       required: true,
@@ -377,6 +378,10 @@ export default {
       type: String,
       default: ''
     },
+    allowNegative: {
+      required: false,
+      default: true
+    },
     inputIconImageClass: {
       require: false,
       type: Array,
@@ -403,9 +408,14 @@ export default {
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event) || event=="") {
+      if (isNaN(event) || event == '') {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
+      if (!this.allowNegative) {
+        event = Math.abs(event)
+      }
+      event = parseFloat(event)
+      // Need to return an integer rather than a string
       this.$emit('input-change', event)
     },
     onEvaluateCode(val) {
@@ -438,8 +448,8 @@ export default {
           value: evaluated,
           numberPrecision: this.numberPrecision
         })
-      }else if(typeof evaluated === 'number'){
-        evaluated=evaluated.toFixed(this.numberPrecision)
+      } else if (typeof evaluated === 'number') {
+        evaluated = evaluated.toFixed(this.numberPrecision)
       }
       return evaluated
     },
@@ -460,11 +470,11 @@ export default {
         })
       }
       let adjustedMinValue =
-      evaluatedInput && evaluatedInput.length
+        evaluatedInput && evaluatedInput.length
           ? evaluatedInput
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''  
+          : ''
       this.$emit('input-blur', adjustedMinValue)
     },
     focusInput() {
@@ -477,6 +487,15 @@ export default {
       })
       this.$emit('input-focus')
     },
+    blurInput() {
+      if (this.disabled) {
+        return
+      }
+      this.isFocused = false
+      this.$nextTick(() => {
+        this.$refs.inputField1.$el.blur()
+      })
+    },
     formatWithCurrency(value) {
       let adjustedMinValue =
         value || value === 0
@@ -506,6 +525,7 @@ export default {
       }
     },
     initInteraction(e) {
+      this.focusInput()
       window.addEventListener('mousemove', this.interact, false);
       window.addEventListener('mouseup', this.stopInteract, false);
       e.preventDefault() 
@@ -552,4 +572,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -14,33 +14,38 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <icon-container>
-        <input-container
-          :placeholder="placeholder"
-          :isError="isError"
-          :inputWidth="inputWidth"
-          :minWidth="minWidth"
-          :value="value"
-          @input="onChangeHandler"
-          @blur="onInputBlur"
-          :noBorder="noBorder"
-          :disabled="disabled"
-          :isDisabled="disabled"
-          :fontSize="fontSize"
-          :inputType="inputType"
-          :type="inputTypeData"
-        />
-        <icon-wrapper
-          v-if="inputType === 'password' && !isError"
-          @click="toggleShowPassword()"
-          size="20px"
-        >
-          <icon name="current_variant" size="20px" />
-        </icon-wrapper>
-        <icon-wrapper v-if="isError" size="16px">
-          <icon name="warning" size="16px" cursor="default" />
-        </icon-wrapper>
-      </icon-container>
+      <input-error-wrapper>
+        <icon-container>
+          <input-container
+            :placeholder="placeholder"
+            :isError="isError"
+            :inputWidth="inputWidth"
+            :minWidth="minWidth"
+            :value="value"
+            @input="onChangeHandler"
+            @blur="onInputBlur"
+            :noBorder="noBorder"
+            :disabled="disabled"
+            :isDisabled="disabled"
+            :fontSize="fontSize"
+            :inputType="inputType"
+            :type="inputTypeData"
+          />
+          <icon-wrapper
+            v-if="inputType === 'password' && !isError"
+            @click="toggleShowPassword()"
+            size="20px"
+          >
+            <icon name="current_variant" size="20px" />
+          </icon-wrapper>
+          <icon-wrapper v-if="isError" size="16px">
+            <icon name="warning" size="16px" cursor="default" />
+          </icon-wrapper>
+        </icon-container>
+        <error-message v-if="isError && errorMessage">{{
+          errorMessage
+        }}</error-message>
+      </input-error-wrapper>
     </input-wrapper>
   </container>
 </template>
@@ -49,21 +54,18 @@
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
+import ErrorMessage from '../../errorMessage'
 
 const Container = styled.div`
   width: 100%;
   position: relative;
 `
-const InputErrorWrapper = styled.div`
-  display: inline-grid;
-  grid-template-row: auto auto;
-  grid-gap: 0px;
-  align-items: center;
-`
+
 const labelAttrs = { fontSize: String }
 const InputLabel = styled('div', labelAttrs)`
-  font-weight: bold;
+  color: ${(props) => props.theme.colors.eturnityGrey};
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
 `
 
 const LabelWrapper = styled.div`
@@ -74,6 +76,13 @@ const LabelWrapper = styled.div`
   justify-content: start;
 `
 
+const InputErrorWrapper = styled.div`
+  display: inline-grid;
+  grid-template-row: auto auto;
+  grid-gap: 0px;
+  align-items: center;
+`
+
 const inputProps = {
   isError: Boolean,
   inputWidth: String,
@@ -89,9 +98,7 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : props.hasLength
-      ? '1px solid ' + props.theme.colors.black
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.isError
       ? '11px 25px 11px 10px'
@@ -102,7 +109,11 @@ const InputContainer = styled('input', inputProps)`
   position: relative;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) =>
-    props.isError ? props.theme.colors.red : props.theme.colors.black};
+    props.isError
+      ? props.theme.colors.grey6
+      : props.isDisabled
+      ? props.theme.colors.grey2
+      : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   box-sizing: border-box; // to allow width of 100% with padding
@@ -112,8 +123,7 @@ const InputContainer = styled('input', inputProps)`
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
 
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -131,13 +141,6 @@ const InputWrapper = styled('div', inputAttrs)`
     props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
 const IconAttrs = { size: String }
 const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
@@ -178,11 +181,11 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
-    InputErrorWrapper,
     LabelWrapper,
     Icon,
     IconWrapper,
-    IconContainer
+    IconContainer,
+    InputErrorWrapper
   },
   data() {
     return {

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

@@ -25,8 +25,9 @@
 //   :value="companyName"
 //   :disabled="true"
 //   inputWidth="250px"
+//   @on-change="function($event)"
 // />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const Container = styled.div`
   width: 100%;
@@ -34,15 +35,15 @@ const Container = styled.div`
 `
 
 const inputAttrs = { isDisabled: Boolean, inputWidth: String }
-const InputContainer = styled("input", inputAttrs)`
+const InputContainer = styled('input', inputAttrs)`
   border: 1px solid ${(props) => props.theme.colors.mediumGray};
   padding: 11px 30px 11px 10px;
   border-radius: 4px;
-  font-size: 16px;
+  font-size: 13px;
   color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   box-sizing: border-box;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background: ${(props) => props.theme.colors.white} !important;
   &::placeholder {
     color: ${(props) => props.theme.colors.darkGray};
@@ -65,33 +66,33 @@ const InputWrapper = styled.span`
 `
 
 export default {
-  name: "search-input",
+  name: 'search-input',
   components: {
     InputContainer,
     InputWrapper,
-    Container,
+    Container
   },
   props: {
     value: {
-      required: true,
+      required: true
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     placeholder: {
       required: false,
-      default: "",
+      default: ''
     },
     inputWidth: {
       required: false,
-      default: null,
-    },
+      default: null
+    }
   },
   methods: {
     onChangeHandler(event) {
-      this.$emit("on-change", event)
-    },
-  },
+      this.$emit('on-change', event)
+    }
+  }
 }
 </script>

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

@@ -45,9 +45,11 @@
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
+// .   fontSize="13px"
 // />
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
 
 const containerProps = { inputWidth: String }
 const Container = styled('div', containerProps)`
@@ -73,7 +75,7 @@ const InputContainer = styled('textarea', inputProps)`
   border: ${(props) =>
     props.isError
       ? '1px solid ' + props.theme.colors.red
-      : '1px solid ' + props.theme.colors.mediumGray};
+      : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
@@ -85,8 +87,7 @@ const InputContainer = styled('textarea', inputProps)`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
   &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+    color: ${(props) => props.theme.colors.grey2};
   }
 
   &:focus {
@@ -108,13 +109,6 @@ const InputWrapper = styled('div', inputAttrs)`
       : 'auto 1fr'};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
 const labelAttrs = { fontSize: String }
 const InputLabel = styled('div', labelAttrs)`
   font-weight: bold;
@@ -175,11 +169,11 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null,
+      default: null
     },
-    resize:{
-      required:false,
-      default: "none"
+    resize: {
+      required: false,
+      default: 'none'
     }
   },
   methods: {