@eturnity/eturnity_reusable_components 1.2.22 → 1.2.23-3d-master.0

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

@@ -1,5 +1,10 @@
 <template>
-  <container>
+  <container :inputWidth="inputWidth" :alignItems="alignItems">
+    <label-slot-wrapper v-if="hasLabelSlot" :isInteractive="isInteractive" @mousedown="initInteraction">
+
+      <slot name="label"></slot>
+    </label-slot-wrapper>
+    
     <label-wrapper v-if="labelText">
       <label-text>
         {{ labelText }}
@@ -8,35 +13,51 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="13"
+        size="14px"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
       <input-container
+        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="placeholder"
+        :placeholder="displayedPlaceholder"
         :isError="isError"
         :inputWidth="inputWidth"
+        :inputHeight="inputHeight"
         :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @keyup.enter="$emit('on-enter-click')"
+        @input="onInput($event)"
         :disabled="disabled"
         :isDisabled="disabled"
         :noBorder="noBorder"
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        :backgroundColor="backgroundColor"
+        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"
+        v-if="unitName && showLinearUnitName && !hasSlot"
         :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>
@@ -74,11 +95,8 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
-
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
 
 const inputProps = {
   isError: Boolean,
@@ -89,8 +107,23 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String
+  fontColor: String,
+  backgroundColor:String,
+  hasSlot: Boolean,
+  slotSize: String,
+  inputHeight:String,
+  isInteractive:Boolean,
+  alignItems:String
 }
+
+const Container = styled('div', inputProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  position: relative;
+  display:grid;
+  grid-template-columns: ${(props) =>
+    props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
+`
+
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
@@ -98,8 +131,13 @@ const InputContainer = styled('input', inputProps)`
       : props.noBorder
       ? 'none'
       : '1px solid ' + props.theme.colors.mediumGray};
-  padding: ${(props) =>
-    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-left: 10px;
+  padding-right: ${(props) =>
+    props.slotSize
+      ? 'calc(' + props.slotSize + ' + 10px)'
+      : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
@@ -110,12 +148,15 @@ const InputContainer = styled('input', inputProps)`
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
+  background-color:${(props) => props.backgroundColor
+    ? props.backgroundColor+' !important'
+    : props.theme.colors.white};
   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'};
   box-sizing: border-box;
-
+  max-height: ${(props) => (props.inputHeight)};
   &::placeholder {
     color: ${(props) =>
       props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
@@ -125,6 +166,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;
@@ -142,6 +192,7 @@ const UnitContainer = styled('span', inputProps)`
   right: 10px;
   top: 0;
   padding-left: 10px;
+  text-align: right;
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
@@ -150,17 +201,40 @@ const UnitContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
+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};
   position: absolute;
-  top: calc(100% + 1px);
+  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};
 `
 
-const LabelWrapper = styled.div`
+const LabelWrapper = styled('div',inputProps)`
   display: flex;
   gap: 10px;
   margin-bottom: 8px;
+  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
+`
+const LabelSlotWrapper = styled('div',inputProps)`
+  display: flex;
+  gap: 10px;
+  align-items:center;
+  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
 `
 
 const LabelText = styled.div`
@@ -177,13 +251,18 @@ export default {
     UnitContainer,
     ErrorMessage,
     LabelWrapper,
+    LabelSlotWrapper,
     LabelText,
-    InfoText
+    InfoText,
+    Icon,
+    SlotContainer,
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false
+      isFocused: false,
+      warningIcon: warningIcon,
     }
   },
   props: {
@@ -203,6 +282,10 @@ export default {
       required: false,
       default: null
     },
+    inputHeight:{
+      required:false,
+      default:null
+    },
     value: {
       required: true,
       default: null
@@ -211,6 +294,10 @@ export default {
       required: false,
       default: false
     },
+    alignItems: {
+      required: false,
+      default: "vertical",
+    },
     errorMessage: {
       required: false,
       default: 'Please insert a correct number'
@@ -243,6 +330,14 @@ export default {
       required: false,
       default: '13px'
     },
+    isInteractive: {
+      required: false,
+      default: false
+    },
+    interactionStep:{
+      required:false,
+      default:1
+    },
     labelText: {
       required: false,
       default: null
@@ -253,7 +348,7 @@ export default {
     },
     labelInfoAlign: {
       required: false,
-      default: 'right'
+      default: 'left'
     },
     minNumber: {
       required: false,
@@ -263,14 +358,51 @@ export default {
       required: false,
       default: null
     },
+    backgroundColor: {
+      required: false,
+      default: null
+    },
     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
+    },
+    hasLabelSlot(){
+      return !!this.$slots.label
+    },
+    computedSlotSize() {
+      return this.slotSize || this.$slots['default'][0].elm.clientWidth
     }
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event)) {
+      if (isNaN(event) || event=="") {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
       this.$emit('input-change', event)
@@ -305,9 +437,15 @@ export default {
           value: evaluated,
           numberPrecision: this.numberPrecision
         })
+      }else if(typeof evaluated === 'number'){
+        evaluated=evaluated.toFixed(this.numberPrecision)
       }
       return evaluated
     },
+    onInput(value){
+      let evaluatedInput = this.onEvaluateCode(value)
+      this.$emit('on-input',evaluatedInput)
+    },
     onInputBlur(e) {
       this.isFocused = false
       let value = e.target.value
@@ -321,11 +459,11 @@ export default {
         })
       }
       let adjustedMinValue =
-        value && value.length
-          ? value
+      evaluatedInput && evaluatedInput.length
+          ? evaluatedInput
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''
+          : ''  
       this.$emit('input-blur', adjustedMinValue)
     },
     focusInput() {
@@ -336,6 +474,7 @@ export default {
       this.$nextTick(() => {
         this.$refs.inputField1.$el.select()
       })
+      this.$emit('input-focus')
     },
     formatWithCurrency(value) {
       let adjustedMinValue =
@@ -352,6 +491,7 @@ export default {
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
+        //return input + ' ' + unit
         return input + ' ' + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
         return ''
@@ -363,7 +503,34 @@ export default {
             })
           : adjustedMinValue
       }
-    }
+    },
+    initInteraction(e) {
+      console.log('InitInteract')
+      window.addEventListener('mousemove', this.interact, false);
+      window.addEventListener('mouseup', this.stopInteract, false);
+      e.preventDefault() 
+    },
+    interact(e) {
+      e.preventDefault() 
+      
+      let value=parseInt(this.value)
+      
+      value+=this.interactionStep*e.movementX
+      this.$emit('on-input',value)
+
+      console.log('interact',this.value,value)
+      this.textInput=numberToString({
+          value:
+          value && value.length ? value : this.minNumber,
+          numberPrecision: this.numberPrecision
+        })
+      //this.value=value
+    },
+    stopInteract(e) {
+      e.preventDefault() 
+        window.removeEventListener('mousemove', this.interact, false);
+        window.removeEventListener('mouseup', this.stopInteract, false);
+    },
   },
   created() {
     if (this.value) {
@@ -387,4 +554,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -10,10 +10,11 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          :size="fontSize ? fontSize : '16'"
+          :size="fontSize ? fontSize : '16px'"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
+      <input-error-wrapper>
       <input-container
         :placeholder="placeholder"
         :isError="isError"
@@ -25,37 +26,32 @@
         :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>
+      <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 Icon from '../../icon'
+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)`
+const InputLabel = styled("div", labelAttrs)`
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "13px")};
 `
 
 const LabelWrapper = styled.div`
@@ -72,34 +68,29 @@ const inputProps = {
   noBorder: Boolean,
   isDisabled: Boolean,
   fontSize: String,
-  inputType: 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
-      ? 'none'
+      ? "none"
       : props.hasLength
-      ? '1px solid ' + props.theme.colors.black
-      : '1px solid ' + props.theme.colors.mediumGray};
+      ? "1px solid " + props.theme.colors.black
+      : "1px solid " + props.theme.colors.mediumGray};
   padding: ${(props) =>
-    props.isError
-      ? '11px 25px 11px 10px'
-      : props.inputType === 'password'
-      ? '11px 25px 11px 10px'
-      : '11px 5px 11px 10px'};
+    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
   border-radius: 4px;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
   color: ${(props) =>
     props.isError ? props.theme.colors.red : 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")};
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 500;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
   background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
+    props.isDisabled ? props.theme.colors.grey5 : "#fff"};
 
   &::placeholder {
     color: ${(props) =>
@@ -112,26 +103,13 @@ const InputContainer = styled('input', inputProps)`
 `
 
 const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled('div', inputAttrs)`
+const InputWrapper = styled("div", inputAttrs)`
   position: relative;
   display: grid;
   align-items: center;
   gap: 8px;
   grid-template-columns: ${(props) =>
-    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 IconWrapper = styled.div`
-  position: absolute;
-  top: 55%;
-  right: 5px;
+    props.alignItems === "vertical" || !props.hasLabel ? "1fr" : "auto 1fr"};
 `
 
 export default {
@@ -151,7 +129,7 @@ export default {
   //   minWidth="100px"
   //   fontSize="13px"
   // />
-  name: 'input-text',
+  name: "input-text",
   components: {
     Container,
     InputContainer,
@@ -159,81 +137,64 @@ export default {
     ErrorMessage,
     InfoText,
     InputLabel,
+    InputErrorWrapper,
     LabelWrapper,
-    Icon,
-    IconWrapper
-  },
-  data() {
-    return {
-      inputTypeData: 'text'
-    }
   },
   props: {
     placeholder: {
       required: false,
-      default: ''
+      default: "",
     },
     alignItems: {
       required: false,
-      default: 'horizontal'
+      default: "horizontal",
     },
     isError: {
       required: false,
-      default: false
+      default: false,
     },
     inputWidth: {
       required: false,
-      default: null
+      default: null,
     },
     minWidth: {
       required: false,
-      default: null
+      default: null,
     },
     value: {
       required: true,
-      default: null
+      default: null,
     },
     errorMessage: {
       required: false,
-      default: ''
+      default: "",
     },
     infoTextMessage: {
-      required: false
+      required: false,
     },
     infoTextAlign: {
-      required: false
+      required: false,
     },
     label: {
-      required: false
+      required: false,
     },
     noBorder: {
       required: false,
-      default: false
+      default: false,
     },
     disabled: {
       required: false,
-      default: false
+      default: false,
     },
     fontSize: {
       required: false,
-      default: null
+      default: null,
     },
-    inputType: {
-      required: false,
-      default: 'text'
-    }
   },
   methods: {
     onChangeHandler($event) {
-      this.$emit('input-change', $event)
+      this.$emit("input-change", $event)
     },
-    toggleShowPassword() {
-      this.inputTypeData =
-        this.inputTypeData === 'password' ? 'text' : 'password'
-    }
   },
-  created() {
-    this.inputTypeData = this.inputType
-  }
 }
 </script>

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

@@ -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="16" />
+        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
       </label-container>
       <image-container v-if="item.img">
         <radio-image :src="item.img" />

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="16"
+          size="16px"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
@@ -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: {