@eturnity/eturnity_reusable_components 7.4.3 → 7.4.4

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

@@ -1,215 +1,215 @@
-<template>
-  <container>
-    <input-wrapper>
-      <input-container
-        :hasUnit="!!question.unit_short_name"
-        :placeholder="placeholder"
-        :isError="isError"
-        :inputWidth="inputWidth"
-        :value="textInput"
-        :hasLength="!!textInput.length"
-        @input="onChangeHandler"
-        @blur="onInputBlur()"
-        @keyup.enter="$emit('on-enter-click')"
-      />
-      <unit-container
-        v-if="question.unit_short_name"
-        :hasLength="!!textInput.length"
-        :isError="isError"
-        >{{ question.unit_short_name }}</unit-container
-      >
-    </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
-  </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 "vue-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: "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,
-    },
-    inputWidth: {
-      required: false,
-      default: null,
-    },
-    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)
-    },
-    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,
-      })
-    }
-  },
-  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
-    },
-  },
-}
-</script>
+<template>
+  <container>
+    <input-wrapper>
+      <input-container
+        :hasUnit="!!question.unit_short_name"
+        :placeholder="placeholder"
+        :isError="isError"
+        :inputWidth="inputWidth"
+        :value="textInput"
+        :hasLength="!!textInput.length"
+        @input="onChangeHandler"
+        @blur="onInputBlur()"
+        @keyup.enter="$emit('on-enter-click')"
+      />
+      <unit-container
+        v-if="question.unit_short_name"
+        :hasLength="!!textInput.length"
+        :isError="isError"
+        >{{ question.unit_short_name }}</unit-container
+      >
+    </input-wrapper>
+    <error-message v-if="isError">{{ errorMessage }}</error-message>
+  </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 "vue-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: "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,
+    },
+    inputWidth: {
+      required: false,
+      default: null,
+    },
+    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)
+    },
+    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,
+      })
+    }
+  },
+  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
+    },
+  },
+}
+</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",
+}