@eturnity/eturnity_reusable_components 1.2.19-EPDM-5310.5 → 1.2.19-dev03.0

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

@@ -1,390 +1,476 @@
-<template>
-  <container>
-    <label-wrapper v-if="labelText">
-      <label-text>
-        {{ labelText }}
-      </label-text>
-      <info-text
-        v-if="labelInfoText"
-        :text="labelInfoText"
-        borderColor="#ccc"
-        size="13"
-        :alignText="labelInfoAlign"
-      />
-    </label-wrapper>
-    <input-wrapper>
-      <input-container
-        ref="inputField1"
-        :hasUnit="unitName && !!unitName.length"
-        :placeholder="placeholder"
-        :isError="isError"
-        :inputWidth="inputWidth"
-        :minWidth="minWidth"
-        :value="formatWithCurrency(value)"
-        @blur="onInputBlur($event)"
-        @focus="focusInput()"
-        @keyup.enter="$emit('on-enter-click')"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :noBorder="noBorder"
-        :textAlign="textAlign"
-        :fontSize="fontSize"
-        :fontColor="fontColor"
-      />
-      <unit-container
-        v-if="unitName && showLinearUnitName"
-        :hasLength="!!textInput.length"
-        :isError="isError"
-        >{{ unitName }}</unit-container
-      >
-    </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
-  </container>
-</template>
-
-<script>
-// import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
-//This component should be used for questions with input fields only
-//How to use:
-// <input-number
-//     placeholder="Enter distance"
-//     :isError="false" //default is false
-//     inputWidth="150px" //by default, this is 100%
-//     minWidth="100px"
-//     :numberPrecision="3"
-//     unitName="pc"
-//     :value="inputValue" //required -- String
-//     @input-change="onInputChange($event)" //required
-//     @on-enter-click="onInputSubmit()"
-//     :errorMessage="Enter a number between 1 and 10"
-//     :disabled="false"
-//     :noBorder="true"
-//     textAlign="left" // "left, right, center"
-//     :showLinearUnitName="true"
-//     fontSize="13px"
-//     labelText="Number of Modules"
-//     labelInfoText="Here is some information for you..."
-//     labelInfoAlign="left"
-//     :minNumber="0"
-//     fontColor="blue"
-// />
-import styled from 'vue-styled-components'
-import {
-  stringToNumber,
-  numberToString
-} from '../../../helpers/numberConverter'
-import InfoText from '../../infoText'
-
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
-
-const inputProps = {
-  isError: Boolean,
-  hasUnit: Boolean,
-  inputWidth: String,
-  minWidth: String,
-  isDisabled: Boolean,
-  noBorder: Boolean,
-  textAlign: String,
-  fontSize: String,
-  fontColor: String
-}
-const InputContainer = styled('input', inputProps)`
-  border: ${(props) =>
-    props.isError
-      ? '1px solid ' + props.theme.colors.red
-      : props.noBorder
-      ? 'none'
-      : '1px solid ' + props.theme.colors.mediumGray};
-  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')};
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  color: ${(props) =>
-    props.isError
-      ? props.theme.colors.red
-      : props.fontColor
-      ? props.fontColor + ' !important'
-      : props.theme.colors.black};
-  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;
-
-  &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
-  }
-
-  &:focus {
-    outline: none;
-  }
-`
-
-const InputWrapper = styled.span`
-  position: relative;
-`
-
-const UnitContainer = styled('span', inputProps)`
-  border-left: 1px solid
-    ${(props) =>
-      props.isError
-        ? props.theme.colors.red
-        : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
-  position: absolute;
-  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 ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
-const LabelWrapper = styled.div`
-  display: flex;
-  gap: 10px;
-  margin-bottom: 8px;
-`
-
-const LabelText = styled.div`
-  font-weight: bold;
-  font-size: 13px;
-`
-
-export default {
-  name: 'input-number',
-  components: {
-    Container,
-    InputContainer,
-    InputWrapper,
-    UnitContainer,
-    ErrorMessage,
-    LabelWrapper,
-    LabelText,
-    InfoText
-  },
-  data() {
-    return {
-      textInput: '',
-      isFocused: false
-    }
-  },
-  props: {
-    placeholder: {
-      required: false,
-      default: ''
-    },
-    isError: {
-      required: false,
-      default: false
-    },
-    inputWidth: {
-      required: false,
-      default: null
-    },
-    minWidth: {
-      required: false,
-      default: null
-    },
-    value: {
-      required: true,
-      default: null
-    },
-    clearInput: {
-      required: false,
-      default: false
-    },
-    errorMessage: {
-      required: false,
-      default: 'Please insert a correct number'
-    },
-    numberPrecision: {
-      required: false,
-      default: 0
-    },
-    unitName: {
-      required: false,
-      default: ''
-    },
-    showLinearUnitName: {
-      required: false,
-      default: false
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    noBorder: {
-      required: false,
-      default: false
-    },
-    textAlign: {
-      required: false,
-      default: 'left'
-    },
-    fontSize: {
-      required: false,
-      default: '13px'
-    },
-    labelText: {
-      required: false,
-      default: null
-    },
-    labelInfoText: {
-      required: false,
-      default: null
-    },
-    labelInfoAlign: {
-      required: false,
-      default: 'right'
-    },
-    minNumber: {
-      required: false,
-      default: null
-    },
-    fontColor: {
-      required: false,
-      default: null
-    },
-    numberToStringEnabled: {
-      required: false,
-      default: true
-    }
-  },
-  methods: {
-    onChangeHandler(event) {
-      if (isNaN(event)) {
-        event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
-      }
-      this.$emit('input-change', event)
-    },
-    onEvaluateCode(val) {
-      // function to perform math on the code
-      // filter the string in case of any malicious content
-      let filtered = val.replace(/[^-()\d/*+.,]/g, '')
-      filtered = filtered.split(/([-+*/()])/)
-      let formatted = filtered.map((item) => {
-        if (
-          item === '+' ||
-          item === '-' ||
-          item === '*' ||
-          item === '/' ||
-          item === '(' ||
-          item === ')' ||
-          item === ''
-        ) {
-          return item
-        } else {
-          let num = stringToNumber({
-            value: item,
-            numberPrecision: false
-          })
-          return num
-        }
-      })
-      let evaluated = eval(formatted.join(''))
-      if (typeof evaluated === 'string') {
-        evaluated = stringToNumber({
-          value: evaluated,
-          numberPrecision: this.numberPrecision
-        })
-      }
-      return evaluated
-    },
-    onInputBlur(e) {
-      this.isFocused = false
-      let value = e.target.value
-      let evaluatedInput = this.onEvaluateCode(value)
-      this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
-      if ((evaluatedInput && value.length) || this.minNumber !== null) {
-        this.textInput = numberToString({
-          value:
-            evaluatedInput && value.length ? evaluatedInput : this.minNumber,
-          numberPrecision: this.numberPrecision
-        })
-      }
-      let adjustedMinValue =
-        value && value.length
-          ? value
-          : this.minNumber || this.minNumber === 0
-          ? this.minNumber
-          : ''
-      this.$emit('input-blur', adjustedMinValue)
-    },
-    focusInput() {
-      if (this.disabled) {
-        return
-      }
-      this.isFocused = true
-      this.$nextTick(() => {
-        this.$refs.inputField1.$el.select()
-      })
-    },
-    formatWithCurrency(value) {
-      let adjustedMinValue =
-        value || value === 0
-          ? value
-          : this.minNumber || this.minNumber === 0
-          ? this.minNumber
-          : ''
-      if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
-        let input = this.numberToStringEnabled
-          ? numberToString({
-              value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
-            })
-          : adjustedMinValue
-        let unit = this.showLinearUnitName ? '' : this.unitName
-        return input + ' ' + unit
-      } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-        return ''
-      } else {
-        return this.numberToStringEnabled
-          ? numberToString({
-              value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
-            })
-          : adjustedMinValue
-      }
-    }
-  },
-  created() {
-    if (this.value) {
-      this.textInput = numberToString({
-        value: this.value,
-        numberPrecision: this.numberPrecision
-      })
-    } else if (this.minNumber !== null) {
-      this.textInput = numberToString({
-        value: this.minNumber,
-        numberPrecision: this.numberPrecision
-      })
-    }
-  },
-  watch: {
-    clearInput: function (value) {
-      if (value) {
-        // If the value is typed, then we should clear the textInput on Continue
-        this.textInput = ''
-      }
-    }
-  }
-}
-</script>
+<template>
+  <container :inputWidth="inputWidth">
+    <label-wrapper v-if="labelText">
+      <label-text>
+        {{ labelText }}
+      </label-text>
+      <info-text
+        v-if="labelInfoText"
+        :text="labelInfoText"
+        borderColor="#ccc"
+        :size="14"
+        :alignText="labelInfoAlign"
+      />
+    </label-wrapper>
+    <input-wrapper>
+      <input-container
+        v-bind="$attrs"
+        ref="inputField1"
+        :hasUnit="unitName && !!unitName.length"
+        :placeholder="displayedPlaceholder"
+        :isError="isError"
+        :inputWidth="inputWidth"
+        :minWidth="minWidth"
+        :value="formatWithCurrency(value)"
+        @blur="onInputBlur($event)"
+        @focus="focusInput()"
+        @keyup.enter="$emit('on-enter-click')"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :noBorder="noBorder"
+        :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"
+        :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>
+</template>
+
+<script>
+// import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
+//This component should be used for questions with input fields only
+//How to use:
+// <input-number
+//     placeholder="Enter distance"
+//     :isError="false" //default is false
+//     inputWidth="150px" //by default, this is 100%
+//     minWidth="100px"
+//     :numberPrecision="3"
+//     unitName="pc"
+//     :value="inputValue" //required -- String
+//     @input-change="onInputChange($event)" //required
+//     @on-enter-click="onInputSubmit()"
+//     :errorMessage="Enter a number between 1 and 10"
+//     :disabled="false"
+//     :noBorder="true"
+//     textAlign="left" // "left, right, center"
+//     :showLinearUnitName="true"
+//     fontSize="13px"
+//     labelText="Number of Modules"
+//     labelInfoText="Here is some information for you..."
+//     labelInfoAlign="left"
+//     :minNumber="0"
+//     fontColor="blue"
+// />
+import styled from 'vue-styled-components'
+import {
+  stringToNumber,
+  numberToString
+} from '../../../helpers/numberConverter'
+import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
+
+const inputProps = {
+  isError: Boolean,
+  hasUnit: Boolean,
+  inputWidth: String,
+  minWidth: String,
+  isDisabled: Boolean,
+  noBorder: Boolean,
+  textAlign: String,
+  fontSize: String,
+  fontColor: String,
+  hasSlot: Boolean,
+  slotSize: String
+}
+
+const Container = styled('div', inputProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  position: relative;
+`
+
+const InputContainer = styled('input', inputProps)`
+  border: ${(props) =>
+    props.isError
+      ? '1px solid ' + props.theme.colors.red
+      : 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'};
+  border-radius: 4px;
+  text-align: ${(props) => props.textAlign};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  color: ${(props) =>
+    props.isError
+      ? props.theme.colors.red
+      : props.fontColor
+      ? props.fontColor + ' !important'
+      : props.theme.colors.black};
+  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;
+
+  &::placeholder {
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+const IconProps = {
+  inputIconHeight: String
+}
+
+const Icon = styled('img', IconProps)`
+  position: absolute;
+  right: 10px;
+  top: 2px;
+`
+
+const InputWrapper = styled.span`
+  position: relative;
+`
+
+const UnitContainer = styled('span', inputProps)`
+  border-left: 1px solid
+    ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.black
+        : props.theme.colors.mediumGray};
+  position: absolute;
+  right: 10px;
+  top: 0;
+  padding-left: 10px;
+  text-align: right;
+  color: ${(props) =>
+    props.isError
+      ? props.theme.colors.red
+      : props.hasLength
+      ? props.theme.colors.black
+      : 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};
+  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};
+`
+
+const LabelWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+  margin-bottom: 8px;
+`
+
+const LabelText = styled.div`
+  font-weight: bold;
+  font-size: 13px;
+`
+
+export default {
+  name: 'input-number',
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    UnitContainer,
+    ErrorMessage,
+    LabelWrapper,
+    LabelText,
+    InfoText,
+    Icon,
+    SlotContainer
+  },
+  inheritAttrs: false,
+  data() {
+    return {
+      textInput: '',
+      isFocused: false,
+      warningIcon: warningIcon,
+    }
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: ''
+    },
+    isError: {
+      required: false,
+      default: false
+    },
+    inputWidth: {
+      required: false,
+      default: null
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    value: {
+      required: true,
+      default: null
+    },
+    clearInput: {
+      required: false,
+      default: false
+    },
+    errorMessage: {
+      required: false,
+      default: 'Please insert a correct number'
+    },
+    numberPrecision: {
+      required: false,
+      default: 0
+    },
+    unitName: {
+      required: false,
+      default: ''
+    },
+    showLinearUnitName: {
+      required: false,
+      default: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    noBorder: {
+      required: false,
+      default: false
+    },
+    textAlign: {
+      required: false,
+      default: 'left'
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    labelText: {
+      required: false,
+      default: null
+    },
+    labelInfoText: {
+      required: false,
+      default: null
+    },
+    labelInfoAlign: {
+      required: false,
+      default: 'left'
+    },
+    minNumber: {
+      required: false,
+      default: null
+    },
+    fontColor: {
+      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
+    },
+    computedSlotSize() {
+      return this.slotSize || this.$slots['default'][0].elm.clientWidth
+    }
+  },
+  methods: {
+    onChangeHandler(event) {
+      if (isNaN(event) || event=="") {
+        event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
+      }
+      this.$emit('input-change', event)
+    },
+    onEvaluateCode(val) {
+      // function to perform math on the code
+      // filter the string in case of any malicious content
+      let filtered = val.replace(/[^-()\d/*+.,]/g, '')
+      filtered = filtered.split(/([-+*/()])/)
+      let formatted = filtered.map((item) => {
+        if (
+          item === '+' ||
+          item === '-' ||
+          item === '*' ||
+          item === '/' ||
+          item === '(' ||
+          item === ')' ||
+          item === ''
+        ) {
+          return item
+        } else {
+          let num = stringToNumber({
+            value: item,
+            numberPrecision: false
+          })
+          return num
+        }
+      })
+      let evaluated = eval(formatted.join(''))
+      if (typeof evaluated === 'string') {
+        evaluated = stringToNumber({
+          value: evaluated,
+          numberPrecision: this.numberPrecision
+        })
+      }
+      return evaluated
+    },
+    onInputBlur(e) {
+      this.isFocused = false
+      let value = e.target.value
+      let evaluatedInput = this.onEvaluateCode(value)
+      this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
+      if ((evaluatedInput && value.length) || this.minNumber !== null) {
+        this.textInput = numberToString({
+          value:
+            evaluatedInput && value.length ? evaluatedInput : this.minNumber,
+          numberPrecision: this.numberPrecision
+        })
+      }
+      let adjustedMinValue =
+        value && value.length
+          ? value
+          : this.minNumber || this.minNumber === 0
+          ? this.minNumber
+          : ''
+      this.$emit('input-blur', adjustedMinValue)
+    },
+    focusInput() {
+      if (this.disabled) {
+        return
+      }
+      this.isFocused = true
+      this.$nextTick(() => {
+        this.$refs.inputField1.$el.select()
+      })
+      this.$emit('input-focus')
+    },
+    formatWithCurrency(value) {
+      let adjustedMinValue =
+        value || value === 0
+          ? value
+          : this.minNumber || this.minNumber === 0
+          ? this.minNumber
+          : ''
+      if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+        let input = this.numberToStringEnabled
+          ? numberToString({
+              value: adjustedMinValue,
+              numberPrecision: this.numberPrecision
+            })
+          : adjustedMinValue
+        let unit = this.showLinearUnitName ? '' : this.unitName
+        return input + ' ' + unit
+      } else if (!adjustedMinValue && adjustedMinValue !== 0) {
+        return ''
+      } else {
+        return this.numberToStringEnabled
+          ? numberToString({
+              value: adjustedMinValue,
+              numberPrecision: this.numberPrecision
+            })
+          : adjustedMinValue
+      }
+    }
+  },
+  created() {
+    if (this.value) {
+      this.textInput = numberToString({
+        value: this.value,
+        numberPrecision: this.numberPrecision
+      })
+    } else if (this.minNumber !== null) {
+      this.textInput = numberToString({
+        value: this.minNumber,
+        numberPrecision: this.numberPrecision
+      })
+    }
+  },
+  watch: {
+    clearInput: function (value) {
+      if (value) {
+        // If the value is typed, then we should clear the textInput on Continue
+        this.textInput = ''
+      }
+    }
+  }
+}
+</script>