@eturnity/eturnity_reusable_components 7.24.3-EPDM-11250.0 → 7.24.3-EPDM-11320.0

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

@@ -1,26 +1,29 @@
 <template>
-  <container>
-    <input-wrapper>
-      <input-container
-        :hasUnit="!!question.unit_short_name"
+  <Container>
+    <InputWrapper>
+      <InputContainer
+        :has-length="!!textInput.length"
+        :has-unit="!!question.unit_short_name"
+        :input-width="inputWidth"
+        :is-error="isError"
         :placeholder="placeholder"
-        :isError="isError"
-        :inputWidth="inputWidth"
         :value="textInput"
-        :hasLength="!!textInput.length"
-        @input="onChangeHandler"
         @blur="onInputBlur()"
+        @input="onChangeHandler"
         @keyup.enter="$emit('on-enter-click')"
       />
-      <unit-container
+      <UnitContainer
         v-if="question.unit_short_name"
-        :hasLength="!!textInput.length"
-        :isError="isError"
-        >{{ question.unit_short_name }}</unit-container
+        :has-length="!!textInput.length"
+        :is-error="isError"
       >
-    </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
-  </container>
+        {{ question.unit_short_name }}
+      </UnitContainer>
+    </InputWrapper>
+    <ErrorMessage v-if="isError">
+      {{ errorMessage }}
+    </ErrorMessage>
+  </Container>
 </template>
 
 <script>
@@ -44,42 +47,42 @@
 //   number_max_allowed: 10,
 //   unit_short_name: "cm",
 // },
-import styled from "vue3-styled-components"
-import {
-  stringToNumber,
-  numberToString,
-} from "../../../helpers/numberConverter"
+  import styled from "vue3-styled-components"
+  import {
+    stringToNumber,
+    numberToString,
+  } from "../../../helpers/numberConverter"
 
-const Container = styled.div`
+  const Container = styled.div`
   width: 100%;
   position: relative;
 `
 
-const inputProps = {
-  isError: Boolean,
-  hasUnit: Boolean,
-  inputWidth: String,
-  hasLength: Boolean,
-}
-const InputContainer = styled("input", inputProps)`
+  const inputProps = {
+    isError: Boolean,
+    hasUnit: Boolean,
+    inputWidth: String,
+    hasLength: Boolean,
+  }
+  const InputContainer = styled("input", inputProps)`
   border: 1px solid
     ${(props) =>
       props.isError
         ? props.theme.colors.red
         : props.hasLength
         ? props.theme.colors.primary
-        : props.theme.colors.mediumGray};
+  : props.theme.colors.mediumGray};
   padding: ${(props) =>
-    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+  props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
   border-radius: 4px;
   font-size: 16px;
   color: ${(props) =>
-    props.isError ? props.theme.colors.red : props.theme.colors.primary};
+  props.isError ? props.theme.colors.red : props.theme.colors.primary};
   width: ${(props) => (props.inputWidth ? props.inputWidth : "auto")};
 
   &::placeholder {
     color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+  props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
   }
 
   &:focus {
@@ -87,18 +90,18 @@ const InputContainer = styled("input", inputProps)`
   }
 `
 
-const InputWrapper = styled.span`
+  const InputWrapper = styled.span`
   position: relative;
 `
 
-const UnitContainer = styled("span", inputProps)`
+  const UnitContainer = styled("span", inputProps)`
   border-left: 1px solid
     ${(props) =>
       props.isError
         ? props.theme.colors.red
         : props.hasLength
         ? props.theme.colors.primary
-        : props.theme.colors.mediumGray};
+  : props.theme.colors.mediumGray};
   position: absolute;
   right: 10px;
   top: 0;
@@ -108,108 +111,108 @@ const UnitContainer = styled("span", inputProps)`
       ? props.theme.colors.red
       : props.hasLength
       ? props.theme.colors.primary
-      : props.theme.colors.mediumGray};
+  : props.theme.colors.mediumGray};
 `
 
-const ErrorMessage = styled.div`
+  const ErrorMessage = styled.div`
   font-size: 14px;
   color: ${(props) => props.theme.colors.red};
   padding-top: 16px;
 `
 
-export default {
-  name: "input-number-question",
-  components: {
-    Container,
-    InputContainer,
-    InputWrapper,
-    UnitContainer,
-    ErrorMessage,
-  },
-  data() {
-    return {
-      textInput: "",
-      numberPrecision: 0, // we set this on created. By default is 0
-      minValue: 0,
-      maxValue: 100,
-    }
-  },
-  props: {
-    placeholder: {
-      required: false,
-      default: "",
-    },
-    isError: {
-      required: false,
-      default: false,
-    },
-    question: {
-      required: true,
+  export default {
+    name: "InputNumberQuestion",
+    components: {
+      Container,
+      InputContainer,
+      InputWrapper,
+      UnitContainer,
+      ErrorMessage,
     },
-    inputWidth: {
-      required: false,
-      default: null,
+    props: {
+      placeholder: {
+        required: false,
+        default: "",
+      },
+      isError: {
+        required: false,
+        default: false,
+      },
+      question: {
+        required: true,
+      },
+      inputWidth: {
+        required: false,
+        default: null,
+      },
+      value: {
+        required: true,
+        default: null,
+      },
+      clearInput: {
+        required: false,
+        default: false,
+      },
+      errorMessage: {
+        required: false,
+        default: "Please insert a correct number",
+      },
     },
-    value: {
-      required: true,
-      default: null,
-    },
-    clearInput: {
-      required: false,
-      default: false,
-    },
-    errorMessage: {
-      required: false,
-      default: "Please insert a correct number",
-    },
-  },
-  methods: {
-    onChangeHandler($event) {
-      this.textInput = $event
-      let formattedValue = stringToNumber({
-        value: $event,
-        numberPrecision: this.numberPrecision,
-      })
-      if (isNaN(formattedValue)) {
-        this.textInput = ""
-        formattedValue = ""
+    data() {
+      return {
+        textInput: "",
+        numberPrecision: 0, // we set this on created. By default is 0
+        minValue: 0,
+        maxValue: 100,
       }
-      this.$emit("input-change", formattedValue)
     },
-    onInputBlur() {
-      let num = stringToNumber({
-        value: this.textInput,
-        numberPrecision: this.numberPrecision,
-      })
-      this.textInput = numberToString({
-        value: num,
-        numberPrecision: this.numberPrecision,
-      })
+    watch: {
+      clearInput: function(value) {
+        if (value) {
+          // If the value is typed, then we should clear the textInput on Continue
+          this.textInput = ""
+        }
+      },
+      question: function(value) {
+        this.numberPrecision = value.number_format_precision
+        this.minValue = value.number_min_allowed
+        this.maxValue = value.number_max_allowed
+      },
     },
-  },
-  created() {
-    this.numberPrecision = this.question.number_format_precision
-    this.minValue = this.question.number_min_allowed
-    this.maxValue = this.question.number_max_allowed
-    if (this.value) {
-      this.textInput = numberToString({
-        value: this.value,
-        numberPrecision: this.numberPrecision,
-      })
-    }
-  },
-  watch: {
-    clearInput: function (value) {
-      if (value) {
-        // If the value is typed, then we should clear the textInput on Continue
-        this.textInput = ""
+    created() {
+      this.numberPrecision = this.question.number_format_precision
+      this.minValue = this.question.number_min_allowed
+      this.maxValue = this.question.number_max_allowed
+      if (this.value) {
+        this.textInput = numberToString({
+          value: this.value,
+          numberPrecision: this.numberPrecision,
+        })
       }
     },
-    question: function (value) {
-      this.numberPrecision = value.number_format_precision
-      this.minValue = value.number_min_allowed
-      this.maxValue = value.number_max_allowed
+    methods: {
+      onChangeHandler($event) {
+        this.textInput = $event
+        let formattedValue = stringToNumber({
+          value: $event,
+          numberPrecision: this.numberPrecision,
+        })
+        if (isNaN(formattedValue)) {
+          this.textInput = ""
+          formattedValue = ""
+        }
+        this.$emit("input-change", formattedValue)
+      },
+      onInputBlur() {
+        let num = stringToNumber({
+          value: this.textInput,
+          numberPrecision: this.numberPrecision,
+        })
+        this.textInput = numberToString({
+          value: num,
+          numberPrecision: this.numberPrecision,
+        })
+      },
     },
-  },
-}
+  }
 </script>