@eturnity/eturnity_reusable_components 1.2.20-3d-master.0 → 1.2.21

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

@@ -1,5 +1,5 @@
 <template>
-  <container :inputWidth="inputWidth">
+  <container>
     <label-wrapper v-if="labelText">
       <label-text>
         {{ labelText }}
@@ -8,19 +8,17 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="14px"
+        size="13"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
       <input-container
-        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="displayedPlaceholder"
+        :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
-        :inputHeight="inputHeight"
         :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
@@ -32,25 +30,13 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        v-on="$listeners"
-        :hasSlot="hasSlot"
-        :slotSize="slotSize"
       />
-      <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
-        <slot></slot>
-      </slot-container>
-
       <unit-container
-        v-if="unitName && showLinearUnitName && !hasSlot"
+        v-if="unitName && showLinearUnitName"
         :hasLength="!!textInput.length"
         :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>
@@ -88,8 +74,11 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
-import ErrorMessage from '../../errorMessage'
-import warningIcon from '../../../assets/icons/error_icon.png'
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
 
 const inputProps = {
   isError: Boolean,
@@ -100,17 +89,8 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String,
-  hasSlot: Boolean,
-  slotSize: String,
-  inputHeight:String
+  fontColor: String
 }
-
-const Container = styled('div', inputProps)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  position: relative;
-`
-
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
@@ -118,15 +98,8 @@ const InputContainer = styled('input', inputProps)`
       : props.noBorder
       ? 'none'
       : '1px solid ' + props.theme.colors.mediumGray};
-  padding-top: 11px;
-  padding-bottom: 11px;
-  padding-left: 10px;
-  padding-right: ${(props) =>
-    props.slotSize
-      ? 'calc(' + props.slotSize + ' + 10px)'
-      : props.hasUnit
-      ? '40px'
-      : '5px'};
+  padding: ${(props) =>
+    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')};
@@ -142,7 +115,7 @@ const InputContainer = styled('input', inputProps)`
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
-  max-height: ${(props) => (props.inputHeight)};
+
   &::placeholder {
     color: ${(props) =>
       props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
@@ -152,15 +125,6 @@ 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;
@@ -178,7 +142,6 @@ const UnitContainer = styled('span', inputProps)`
   right: 10px;
   top: 0;
   padding-left: 10px;
-  text-align: right;
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
@@ -187,27 +150,11 @@ const UnitContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const SlotContainer = styled('span', inputProps)`
-  text-align: right;
-  border-left: 1px solid
-    ${(props) =>
-      props.isError
-        ? props.theme.colors.red
-        : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
   position: absolute;
-  width: ${(props) =>
-    props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
-  right: 10px;
-  top: 0;
-  padding-left: 10px;
-  color: ${(props) =>
-    props.isError
-      ? props.theme.colors.red
-      : props.hasLength
-      ? props.theme.colors.black
-      : props.theme.colors.mediumGray};
+  top: calc(100% + 1px);
 `
 
 const LabelWrapper = styled.div`
@@ -231,16 +178,12 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText,
-    Icon,
-    SlotContainer
+    InfoText
   },
-  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false,
-      warningIcon: warningIcon,
+      isFocused: false
     }
   },
   props: {
@@ -260,10 +203,6 @@ export default {
       required: false,
       default: null
     },
-    inputHeight:{
-      required:false,
-      default:null
-    },
     value: {
       required: true,
       default: null
@@ -314,7 +253,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: 'left'
+      default: 'right'
     },
     minNumber: {
       required: false,
@@ -327,41 +266,11 @@ export default {
     numberToStringEnabled: {
       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
-    }
-  },
-  computed: {
-    displayedPlaceholder() {
-      if (this.placeholder) return this.placeholder
-      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
-    },
-    hasSlot() {
-      return !!this.$slots.default
-    },
-    computedSlotSize() {
-      return this.slotSize || this.$slots['default'][0].elm.clientWidth
     }
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event) || event=="") {
+      if (isNaN(event)) {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
       this.$emit('input-change', event)
@@ -396,8 +305,6 @@ export default {
           value: evaluated,
           numberPrecision: this.numberPrecision
         })
-      }else if(typeof evaluated === 'number'){
-        evaluated=evaluated.toFixed(this.numberPrecision)
       }
       return evaluated
     },
@@ -414,11 +321,11 @@ export default {
         })
       }
       let adjustedMinValue =
-      evaluatedInput && evaluatedInput.length
-          ? evaluatedInput
+        value && value.length
+          ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''  
+          : ''
       this.$emit('input-blur', adjustedMinValue)
     },
     focusInput() {
@@ -429,7 +336,6 @@ export default {
       this.$nextTick(() => {
         this.$refs.inputField1.$el.select()
       })
-      this.$emit('input-focus')
     },
     formatWithCurrency(value) {
       let adjustedMinValue =
@@ -446,7 +352,6 @@ export default {
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
-        //return input + ' ' + unit
         return input + ' ' + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
         return ''
@@ -482,4 +387,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -10,11 +10,10 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          :size="fontSize ? fontSize : '16px'"
+          :size="fontSize ? fontSize : '16'"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <input-error-wrapper>
       <input-container
         :placeholder="placeholder"
         :isError="isError"
@@ -27,27 +26,20 @@
         :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;
@@ -112,6 +104,13 @@ 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:
@@ -137,7 +136,6 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
-    InputErrorWrapper,
     LabelWrapper,
   },
   props: {

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

@@ -1,7 +1,7 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled">
+      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value">
         <radio
           type="radio"
           :value="selectedOption"
@@ -12,7 +12,7 @@
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
-        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
+        <info-text v-if="item.infoText" :text="item.infoText" size="16" />
       </label-container>
       <image-container v-if="item.img">
         <radio-image :src="item.img" />
@@ -76,14 +76,6 @@ const Radio = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
-
-  &:checked ~ .checkmark {
-    background-color: white;
-
-    &:after {
-      display: block;
-    }
-  }
 `
 
 const RadioWrapper = styled.div`
@@ -91,22 +83,22 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean }
+const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
 const LabelContainer = styled("label", containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 15px;
   align-items: center;
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: ${(props) =>
     props.size === "large"
       ? "16px"
       : props.size === "medium"
-      ? "13px"
-      : "10px"};
+        ? "13px"
+        : "10px"};
   user-select: none;
   flex: auto;
   align-self: baseline;
@@ -116,14 +108,14 @@ const LabelContainer = styled("label", containerProps)`
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-        ? "16px"
-        : "12px"};
+          ? "16px"
+          : "12px"};
     width: ${(props) =>
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-        ? "16px"
-        : "12px"};
+          ? "16px"
+          : "12px"};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -133,32 +125,29 @@ const LabelContainer = styled("label", containerProps)`
 
     &:after {
       content: "";
-      display: none;
+      display: ${(props) => props.isChecked ? 'block' : 'none'};
+      width: ${(props) =>
+        props.size === "large"
+          ? "10px"
+          : props.size === "medium"
+            ? "8px"
+            : "6px"};
+      height: ${(props) =>
+        props.size === "large"
+          ? "10px"
+          : props.size === "medium"
+            ? "8px"
+            : "6px"};
+      border-radius: 100%;
+      background: ${(props) => props.theme.colors.primary};
     }
   }
-
-  .checkmark:after {
-    width: ${(props) =>
-      props.size === "large"
-        ? "10px"
-        : props.size === "medium"
-        ? "8px"
-        : "6px"};
-    height: ${(props) =>
-      props.size === "large"
-        ? "10px"
-        : props.size === "medium"
-        ? "8px"
-        : "6px"};
-    border-radius: 100%;
-    background: ${(props) => props.theme.colors.primary};
-  }
 `
 
 const textAttrs = { isDisabled: Boolean }
 const LabelText = styled("div", textAttrs)`
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
 
 const RadioImage = styled.img`
@@ -228,11 +217,15 @@ export default {
       required: false,
       default: "medium", // small, medium, large
     },
+    name: {
+      required: false,
+      default: ''
+    }
   },
   data() {
     return {
-      radioName: "",
       selectedImage: null,
+      radioName: ''
     }
   },
   methods: {
@@ -247,7 +240,7 @@ export default {
     },
   },
   created() {
-    this.radioName = Math.round(Math.random() * 10000)
+    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
   },
 }
 </script>

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

@@ -59,7 +59,8 @@ const InputWrapper = styled.span`
   img {
     position: absolute;
     right: 10px;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
   }
 `
 

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="16px"
+          size="16"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
@@ -23,7 +23,6 @@
         :disabled="isDisabled"
         :fontSize="fontSize"
         @input="onChangeHandler"
-        :resize="resize"
       />
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
@@ -175,11 +174,7 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null,
-    },
-    resize:{
-      required:false,
-      default: "none"
+      default: null
     }
   },
   methods: {

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14px"
+          size="14"
           :alignText="infoTextAlign"
         />
       </label-container>
@@ -46,7 +46,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14px"
+          size="14"
           :alignText="infoTextAlign"
         />
       </label-container>

package/src/components/pageSubtitle/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <subtitle-text :color="color" :hasInfoText="!!infoText">
+  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
     <span>
       {{ text }}
     </span>
     <info-text
       :text="infoText"
       v-if="!!infoText"
-      size="14px"
+      size="14"
       borderColor="#ccc"
       :alignText="alignInfoText"
     />
@@ -24,7 +24,7 @@
 import styled from "vue-styled-components"
 import InfoText from "../infoText"
 
-const textAttrs = { color: String, hasInfoText: Boolean }
+const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
 const SubtitleText = styled("div", textAttrs)`
   display: grid;
   align-items: center;
@@ -33,7 +33,7 @@ const SubtitleText = styled("div", textAttrs)`
     props.hasInfoText ? "auto auto 1fr" : "1fr"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
-  margin-bottom: 30px;
+  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
   line-height: 1.5;
   position: relative;
 `
@@ -59,6 +59,10 @@ export default {
       required: false,
       default: "left",
     },
+    marginBottom: {
+      required: false,
+      default: "30px",
+    }
   },
 }
 </script>

package/src/components/pageTitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <title-text :color="color">{{ text }}</title-text>
+  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
 </template>
 
 <script>
@@ -11,12 +11,12 @@
 // />
 import styled from "vue-styled-components"
 
-const textAttrs = { color: String }
+const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled("div", textAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: 16px;
-  text-transform: uppercase;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   margin-bottom: 20px;
 `
 
@@ -32,6 +32,14 @@ export default {
     color: {
       required: false,
     },
+    fontSize: {
+      required: false,
+      default: '16px'
+    },
+    uppercase: {
+      required: false,
+      default: true
+    }
   },
 }
 </script>