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

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

@@ -1,29 +1,26 @@
 <template>
-  <Container>
-    <InputWrapper>
-      <InputContainer
-        :has-length="!!textInput.length"
-        :has-unit="!!question.unit_short_name"
-        :input-width="inputWidth"
-        :is-error="isError"
+  <container>
+    <input-wrapper>
+      <input-container
+        :hasUnit="!!question.unit_short_name"
         :placeholder="placeholder"
+        :isError="isError"
+        :inputWidth="inputWidth"
         :value="textInput"
-        @blur="onInputBlur()"
+        :hasLength="!!textInput.length"
         @input="onChangeHandler"
+        @blur="onInputBlur()"
         @keyup.enter="$emit('on-enter-click')"
       />
-      <UnitContainer
+      <unit-container
         v-if="question.unit_short_name"
-        :has-length="!!textInput.length"
-        :is-error="isError"
+        :hasLength="!!textInput.length"
+        :isError="isError"
+        >{{ question.unit_short_name }}</unit-container
       >
-        {{ question.unit_short_name }}
-      </UnitContainer>
-    </InputWrapper>
-    <ErrorMessage v-if="isError">
-      {{ errorMessage }}
-    </ErrorMessage>
-  </Container>
+    </input-wrapper>
+    <error-message v-if="isError">{{ errorMessage }}</error-message>
+  </container>
 </template>
 
 <script>
@@ -47,42 +44,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 {
@@ -90,18 +87,18 @@
   }
 `
 
-  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;
@@ -111,108 +108,108 @@
       ? 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: "InputNumberQuestion",
-    components: {
-      Container,
-      InputContainer,
-      InputWrapper,
-      UnitContainer,
-      ErrorMessage,
+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,
     },
-    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",
-      },
+    inputWidth: {
+      required: false,
+      default: null,
     },
-    data() {
-      return {
-        textInput: "",
-        numberPrecision: 0, // we set this on created. By default is 0
-        minValue: 0,
-        maxValue: 100,
+    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 = ""
       }
+      this.$emit("input-change", formattedValue)
     },
-    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
-      },
+    onInputBlur() {
+      let num = stringToNumber({
+        value: this.textInput,
+        numberPrecision: this.numberPrecision,
+      })
+      this.textInput = numberToString({
+        value: num,
+        numberPrecision: this.numberPrecision,
+      })
     },
-    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,
-        })
+  },
+  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 = ""
       }
     },
-    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,
-        })
-      },
+    question: function (value) {
+      this.numberPrecision = value.number_format_precision
+      this.minValue = value.number_min_allowed
+      this.maxValue = value.number_max_allowed
     },
-  }
+  },
+}
 </script>