@eturnity/eturnity_reusable_components 1.2.19-EPDM-5262.6 → 1.2.19-EPDM-3412.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-EPDM-5262.6",
+  "version": "1.2.19-EPDM-3412.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -24,54 +24,46 @@
         </InputAnnexContainer>
       </input-number>
       <br />
-      <div :style="{ 'margin': '50px'}">
-        <input-number
-          labelText="Panel inclination"
-          labelInfoText="
-              Defines the slope of the installed panels to the horizon.
-          "
-          :value="inputValue"
-         
-        />
-      <info-text size="100" alignArrow="center" width="360px">This is the tooltip text center</info-text>
-      <br /><br />
-      <info-text size="50" alignArrow="center"  width="120px">This is the tooltip text center</info-text>
-      <br /><br />
-      <info-text size="10" alignArrow="center"  width="100%">This is the tooltip text center</info-text>
-      <br /><br /><br /><br /><br />
-      <info-text size="100" alignArrow="left"  width="360px">This is the tooltip text center</info-text>
-      <br /><br />
-      <info-text size="50" alignArrow="left"  width="360px">This is the tooltip text center</info-text>
-      <br /><br />
-      <info-text size="10" alignArrow="left"  width="360px">This is the tooltip text center</info-text>
-      <br /><br />
-      <br /><br /><br />
-      <info-text size="100" alignArrow="right"  width="360px">This is the tooltip text center</info-text>
-      <br /><br />
-      <info-text size="50" alignArrow="right"  width="360px">This is the tooltip text center</info-text>
-      <br /><br />
-      <info-text size="10" alignArrow="right"  width="360px">This is the tooltip text center</info-text>
-      <br /><br />
-      </div>
+      
+  <p>InputText</p>
+   <input-text
+     placeholder="Company name"
+     :value="inputValue"
+     :isError="true"
+     errorMessage="This is my error message"
+     infoTextAlign="right" 
+     infoTextMessage="My info message"
+     label="Question 5"
+     alignItems="vertical"
+     inputWidth="250px"
+     minWidth="100px"
+   />
+   <br/>
       <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-        >unit</input-number
-      >
-      <br />
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
+      />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-
-import InputNumber from '@/components/inputs/inputNumber'
-import infoText from '@/components/infoText'
+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 InputText from "@/components/inputs/inputText"
 // import TableDropdown from "@/components/tableDropdown"
 const InputAnnexContainer = styled.div`
   display: grid;
@@ -89,12 +81,16 @@ export default {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    infoText,
-    InputAnnexContainer
-    // TableDropdown,
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    InputText,
+    ExternalButton,
+    Modal,
   },
   data() {
     return {
+      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -153,6 +149,9 @@ export default {
     }
   },
   methods: {
+    keydownHandler(e) {
+      console.log('test', e)
+    },
     getTheme() {
       return theme
     },
@@ -202,8 +201,8 @@ export default {
         item = '-'
       }
       return item
-    },
-  },
+    }
+  }
 }
 </script>
 

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <error-message
+//     alignText="right" // default is left
+// />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: 200px;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
+  z-index: 99;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>

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

@@ -14,9 +14,10 @@
     </label-wrapper>
     <input-wrapper>
       <input-container
+        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="placeholder"
+        :placeholder="displayedPlaceholder"
         :isError="isError"
         :inputWidth="inputWidth"
         :minWidth="minWidth"
@@ -30,6 +31,7 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        v-on="$listeners"
         :hasSlot="hasSlot"
         :slotSize="slotSize"
       />
@@ -43,6 +45,11 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
+      <icon
+        v-if="(isError || inputIcon) && !showLinearUnitName"
+        :class="inputIconImageClass"
+        :src="isError ? warningIcon : inputIconImage"
+      />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -80,6 +87,8 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
 
 const inputProps = {
   isError: Boolean,
@@ -141,6 +150,15 @@ const InputContainer = styled('input', inputProps)`
     outline: none;
   }
 `
+const IconProps = {
+  inputIconHeight: String
+}
+
+const Icon = styled('img', IconProps)`
+  position: absolute;
+  right: 10px;
+  top: 2px;
+`
 
 const InputWrapper = styled.span`
   position: relative;
@@ -189,12 +207,6 @@ const SlotContainer = styled('span', inputProps)`
       ? props.theme.colors.black
       : props.theme.colors.mediumGray};
 `
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
 
 const LabelWrapper = styled.div`
   display: flex;
@@ -217,13 +229,23 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
+    InfoText,
+    Icon,
     SlotContainer,
     InfoText
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false
+      isFocused: false,
+      warningIcon: warningIcon
+    }
+  },
+  computed: {
+    displayedPlaceholder() {
+      if (this.placeholder) return this.placeholder
+      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
     }
   },
   props: {
@@ -307,6 +329,21 @@ export default {
       required: false,
       default: true
     },
+    inputIcon: {
+      require: false,
+      type: Boolean,
+      default: false
+    },
+    inputIconImage: {
+      require: false,
+      type: String,
+      default: ''
+    },
+    inputIconImageClass: {
+      require: false,
+      type: Array,
+      default: () => []
+    },
     slotSize: {
       required: false
     }
@@ -321,7 +358,7 @@ export default {
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event)) {
+      if (isNaN(event) || event=="") {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
       this.$emit('input-change', event)
@@ -387,6 +424,7 @@ export default {
       this.$nextTick(() => {
         this.$refs.inputField1.$el.select()
       })
+      this.$emit('input-focus')
     },
     formatWithCurrency(value) {
       let adjustedMinValue =

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

@@ -14,6 +14,7 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
+      <input-error-wrapper>
       <input-container
         :placeholder="placeholder"
         :isError="isError"
@@ -26,20 +27,27 @@
         :isDisabled="disabled"
         :fontSize="fontSize"
       />
+      <error-message v-if="isError">{{ errorMessage }}</error-message>
+      </input-error-wrapper>
     </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
 </template>
 
 <script>
 import styled from "vue-styled-components"
 import InfoText from "../../infoText"
+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;
@@ -104,13 +112,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);
-`
-
 export default {
   // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
   // To use:
@@ -136,6 +137,7 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
+    InputErrorWrapper,
     LabelWrapper,
   },
   props: {

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

@@ -23,6 +23,7 @@
         :disabled="isDisabled"
         :fontSize="fontSize"
         @input="onChangeHandler"
+        :resize="resize"
       />
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
@@ -174,7 +175,11 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null
+      default: null,
+    },
+    resize:{
+      required:false,
+      default: "none"
     }
   },
   methods: {