@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-12680.0

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

@@ -1,218 +1,218 @@
-<template>
-  <Container>
-    <InputWrapper>
-      <InputContainer
-        :has-length="!!textInput.length"
-        :has-unit="!!question.unit_short_name"
-        :input-width="inputWidth"
-        :is-error="isError"
-        :placeholder="placeholder"
-        :value="textInput"
-        @blur="onInputBlur()"
-        @input="onChangeHandler"
-        @keyup.enter="$emit('on-enter-click')"
-      />
-      <UnitContainer
-        v-if="question.unit_short_name"
-        :has-length="!!textInput.length"
-        :is-error="isError"
-      >
-        {{ question.unit_short_name }}
-      </UnitContainer>
-    </InputWrapper>
-    <ErrorMessage v-if="isError">
-      {{ errorMessage }}
-    </ErrorMessage>
-  </Container>
-</template>
-
-<script>
-  // import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
-  //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%
-  //     :question="question"
-  //     :value="inputValue" //required -- String
-  //     @input-change="onInputChange($event)" //required
-  //     @on-enter-click="onInputSubmit()"
-  //     :errorMessage="Enter a number between 1 and 10"
-  // />
-  // question data example:
-  // question: {
-  //   number_format_precision: 4,
-  //   number_min_allowed: 0,
-  //   number_max_allowed: 10,
-  //   unit_short_name: "cm",
-  // },
-  import styled from 'vue3-styled-components'
-  import {
-    stringToNumber,
-    numberToString,
-  } from '../../../helpers/numberConverter'
-
-  const Container = styled.div`
-    width: 100%;
-    position: relative;
-  `
-
-  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};
-    padding: ${(props) =>
-      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};
-    width: ${(props) => (props.inputWidth ? props.inputWidth : 'auto')};
-
-    &::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.primary
-          : 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.primary
-        : props.theme.colors.mediumGray};
-  `
-
-  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,
-    },
-    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',
-      },
-    },
-    data() {
-      return {
-        textInput: '',
-        numberPrecision: 0, // we set this on created. By default is 0
-        minValue: 0,
-        maxValue: 100,
-      }
-    },
-    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,
-        })
-      }
-    },
-    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>
+<template>
+  <Container>
+    <InputWrapper>
+      <InputContainer
+        :has-length="!!textInput.length"
+        :has-unit="!!question.unit_short_name"
+        :input-width="inputWidth"
+        :is-error="isError"
+        :placeholder="placeholder"
+        :value="textInput"
+        @blur="onInputBlur()"
+        @input="onChangeHandler"
+        @keyup.enter="$emit('on-enter-click')"
+      />
+      <UnitContainer
+        v-if="question.unit_short_name"
+        :has-length="!!textInput.length"
+        :is-error="isError"
+      >
+        {{ question.unit_short_name }}
+      </UnitContainer>
+    </InputWrapper>
+    <ErrorMessage v-if="isError">
+      {{ errorMessage }}
+    </ErrorMessage>
+  </Container>
+</template>
+
+<script>
+  // import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
+  //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%
+  //     :question="question"
+  //     :value="inputValue" //required -- String
+  //     @input-change="onInputChange($event)" //required
+  //     @on-enter-click="onInputSubmit()"
+  //     :errorMessage="Enter a number between 1 and 10"
+  // />
+  // question data example:
+  // question: {
+  //   number_format_precision: 4,
+  //   number_min_allowed: 0,
+  //   number_max_allowed: 10,
+  //   unit_short_name: "cm",
+  // },
+  import styled from 'vue3-styled-components'
+  import {
+    stringToNumber,
+    numberToString,
+  } from '../../../helpers/numberConverter'
+
+  const Container = styled.div`
+    width: 100%;
+    position: relative;
+  `
+
+  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};
+    padding: ${(props) =>
+      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};
+    width: ${(props) => (props.inputWidth ? props.inputWidth : 'auto')};
+
+    &::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.primary
+          : 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.primary
+        : props.theme.colors.mediumGray};
+  `
+
+  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,
+    },
+    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',
+      },
+    },
+    data() {
+      return {
+        textInput: '',
+        numberPrecision: 0, // we set this on created. By default is 0
+        minValue: 0,
+        maxValue: 100,
+      }
+    },
+    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,
+        })
+      }
+    },
+    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>

package/src/components/inputs/inputText/InputText.stories.js

@@ -1,75 +1,75 @@
-import InputText from './index.vue'
-
-export default {
-  title: 'InputText',
-  component: InputText,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { InputText },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-text v-bind="$props" />',
-
-  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
-  // To use:
-  // <input-text
-  //   placeholder="Company name"
-  //   :value="companyName"
-  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
-  //   :isError="checkErrors()"
-  //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
-  //   infoTextMessage="My info message"
-  //   label="Question 5"
-  //   alignItems="horizontal" // horizontal, vertical
-  //   inputWidth="250px"
-  //   minWidth="100px"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  value: '',
-  inputWidth: '200px',
-  minWidth: '10ch',
-  unitName: 'pc',
-  isError: false,
-  textAlign: 'left',
-}
-
-export const hasError = Template.bind({})
-hasError.args = {
-  placeholder: 'Enter Value',
-  errorMessage: 'This field is required',
-  isError: true,
-  disabled: false,
-  inputWidth: '200px',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: 'Enter Value',
-  disabled: true,
-  value: '',
-  inputWidth: '200px',
-  isError: false,
-}
-
-export const WithLabel = Template.bind({})
-WithLabel.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  label: 'What is the best company in Switzerland?',
-  value: 'Eturnity',
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
-  errorMessage: 'Maximum 5 characters',
-  textAlign: 'left',
-  alignItems: 'vertical',
-}
+import InputText from './index.vue'
+
+export default {
+  title: 'InputText',
+  component: InputText,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { InputText },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<input-text v-bind="$props" />',
+
+  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+  // To use:
+  // <input-text
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
+  //   :isError="checkErrors()"
+  //   :errorMessage="This is my error message"
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  //   alignItems="horizontal" // horizontal, vertical
+  //   inputWidth="250px"
+  //   minWidth="100px"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: 'Company name',
+  disabled: false,
+  value: '',
+  inputWidth: '200px',
+  minWidth: '10ch',
+  unitName: 'pc',
+  isError: false,
+  textAlign: 'left',
+}
+
+export const hasError = Template.bind({})
+hasError.args = {
+  placeholder: 'Enter Value',
+  errorMessage: 'This field is required',
+  isError: true,
+  disabled: false,
+  inputWidth: '200px',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: 'Enter Value',
+  disabled: true,
+  value: '',
+  inputWidth: '200px',
+  isError: false,
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  placeholder: 'Company name',
+  disabled: false,
+  label: 'What is the best company in Switzerland?',
+  value: 'Eturnity',
+  inputWidth: '200px',
+  unitName: 'pc',
+  isError: false,
+  errorMessage: 'Maximum 5 characters',
+  textAlign: 'left',
+  alignItems: 'vertical',
+}