@eturnity/eturnity_reusable_components 1.2.22 → 1.2.23

package/package.json

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

package/src/components/icon/index.vue

@@ -19,6 +19,7 @@
 //   color="red"
 //   hoveredColor="blue"
 //   size="60px" by default, this is 30px
+//   cursor="default"
 // />
 
 import styled from 'vue-styled-components'

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

@@ -14,29 +14,32 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <input-container
-        :placeholder="placeholder"
-        :isError="isError"
-        :inputWidth="inputWidth"
-        :minWidth="minWidth"
-        :value="value"
-        @input="onChangeHandler"
-        :noBorder="noBorder"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :fontSize="fontSize"
-        :inputType="inputType"
-        :type="inputTypeData"
-      />
-      <icon-wrapper
-        v-if="inputType === 'password' && !isError"
-        @click="toggleShowPassword()"
-      >
-        <icon name="current_variant" size="20px" />
-      </icon-wrapper>
-      <icon-wrapper v-if="isError">
-        <icon name="warning" size="16px" />
-      </icon-wrapper>
+      <icon-container>
+        <input-container
+          :placeholder="placeholder"
+          :isError="isError"
+          :inputWidth="inputWidth"
+          :minWidth="minWidth"
+          :value="value"
+          @input="onChangeHandler"
+          :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-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -90,6 +93,7 @@ const InputContainer = styled('input', inputProps)`
       ? '11px 25px 11px 10px'
       : '11px 5px 11px 10px'};
   border-radius: 4px;
+  position: relative;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
@@ -128,10 +132,18 @@ const ErrorMessage = styled.div`
   top: calc(100% + 1px);
 `
 
-const IconWrapper = styled.div`
+const IconAttrs = { size: String }
+const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
-  top: 55%;
+  top: 0;
+  bottom: 0;
+  margin: auto;
   right: 5px;
+  height: ${(props) => (props.size ? props.size : 'auto')};
+`
+
+const IconContainer = styled.div`
+  position: relative;
 `
 
 export default {
@@ -161,7 +173,8 @@ export default {
     InputLabel,
     LabelWrapper,
     Icon,
-    IconWrapper
+    IconWrapper,
+    IconContainer
   },
   data() {
     return {