@eturnity/eturnity_reusable_components 7.8.1-EPDM-8441.1 → 7.8.2

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

@@ -1,360 +1,355 @@
-<template>
-  <container>
-    <input-wrapper
-      :hasLabel="!!label && label.length > 0"
-      :alignItems="alignItems"
-    >
-      <label-wrapper v-if="label">
-        <input-label
-          :labelFontColor="labelFontColor"
-          :fontSize="fontSize"
-          :data-id="labelDataId"
-          >{{ label }}
-          <optionalLabel v-if="labelOptional"
-            >({{ $gettext('Optional') }})</optionalLabel
-          ></input-label
-        >
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          borderColor="#ccc"
-          :size="fontSize ? fontSize : '16px'"
-          :alignArrow="infoTextAlign"
-        />
-      </label-wrapper>
-      <input-error-wrapper>
-        <icon-container>
-          <input-container
-            ref="inputElement"
-            :readonly="readonly"
-            :placeholder="placeholder"
-            :isError="isError"
-            :inputWidth="inputWidth"
-            :minWidth="minWidth"
-            :inputHeight="inputHeight"
-            :value="value"
-            @input="onChangeHandler"
-            @blur="onInputBlur"
-            :noBorder="noBorder"
-            :disabled="disabled"
-            :isDisabled="disabled"
-            :fontSize="fontSize"
-            :inputType="inputType"
-            :type="inputTypeData"
-            :fontColor="fontColor"
-            :hasFocus="hasFocus"
-            :backgroundColor="backgroundColor"
-            :disabledBackgroundColor="disabledBackgroundColor"
-            :data-id="inputDataId"
-          />
-          <icon-wrapper
-            v-if="inputType === 'password' && !isError"
-            @click="toggleShowPassword()"
-            size="20px"
-          >
-            <icon name="current_variant" size="20px" />
-          </icon-wrapper>
-          <icon-wrapper v-if="isError" size="16px">
-            <icon name="warning" size="16px" cursor="default" />
-          </icon-wrapper>
-        </icon-container>
-        <error-message v-if="isError && errorMessage">{{
-          errorMessage
-        }}</error-message>
-      </input-error-wrapper>
-    </input-wrapper>
-  </container>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import InfoText from '../../infoText'
-import Icon from '../../icon'
-import ErrorMessage from '../../errorMessage'
-
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
-
-const labelAttrs = { fontSize: String, labelFontColor: String }
-const InputLabel = styled('div', labelAttrs)`
-  color: ${(props) =>
-    props.theme.colors[props.labelFontColor]
-      ? props.theme.colors[props.labelFontColor]
-      : props.labelFontColor
-      ? props.labelFontColor
-      : props.theme.colors.eturnityGrey};
-
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  font-weight: 700;
-`
-const optionalLabel = styled.span`
-  font-weight: 300;
-`
-const LabelWrapper = styled.div`
-  display: inline-grid;
-  grid-template-columns: auto auto;
-  grid-gap: 12px;
-  align-items: center;
-  justify-content: start;
-`
-
-const InputErrorWrapper = styled.div`
-  display: inline-grid;
-  grid-template-row: auto auto;
-  grid-gap: 0px;
-  align-items: center;
-`
-
-const inputProps = {
-  isError: Boolean,
-  inputWidth: String,
-  minWidth: String,
-  noBorder: Boolean,
-  isDisabled: Boolean,
-  fontSize: String,
-  inputType: String,
-  fontColor: String,
-  backgroundColor: String,
-  borderColor: String,
-  inputHeight: String,
-  disabledBackgroundColor: String
-}
-const InputContainer = styled('input', inputProps)`
-  border: ${(props) =>
-    props.isError
-      ? '1px solid ' + props.theme.colors.red
-      : props.noBorder
-      ? 'none'
-      : props.borderColor
-      ? props.theme.colors[props.borderColor]
-        ? '1px solid ' + props.theme.colors[props.borderColor]
-        : '1px solid ' + props.borderColor
-      : '1px solid ' + props.theme.colors.grey4};
-  padding: ${(props) =>
-    props.isError
-      ? '11px 25px 11px 10px'
-      : props.inputType === 'password'
-      ? '11px 25px 11px 10px'
-      : '11px 5px 11px 10px'};
-  border-radius: 4px;
-  position: relative;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  color: ${(props) =>
-    props.isError
-      ? props.theme.colors.grey6
-      : props.isDisabled
-      ? props.theme.colors.grey2
-      : props.fontColor
-      ? props.fontColor + ' !important'
-      : props.theme.colors.black};
-
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
-  max-height: ${(props) => props.inputHeight};
-  box-sizing: border-box; // to allow width of 100% with padding
-  font-weight: 400;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
-  background-color: ${(props) =>
-    props.isDisabled
-      ? props.disabledBackgroundColor
-        ? props.disabledBackgroundColor + ' !important'
-        : props.theme.colors.grey5
-      : props.backgroundColor
-      ? props.backgroundColor + ' !important'
-      : props.theme.colors.white};
-  &::placeholder {
-    color: ${(props) => props.theme.colors.grey2};
-  }
-
-  &:focus {
-    outline: none;
-  }
-`
-
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
-  display: grid;
-  align-items: center;
-  gap: 8px;
-  grid-template-columns: ${(props) =>
-    props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
-`
-
-const IconAttrs = { size: String }
-const IconWrapper = styled('div', IconAttrs)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  right: 5px;
-  height: ${(props) => (props.size ? props.size : 'auto')};
-`
-
-const IconContainer = styled.div`
-  position: relative;
-`
-
-export default {
-  // 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' })"
-  //   @input-blur="onInputBlur($event)"
-  //   :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"
-  //   fontSize="13px"
-  // />
-  name: 'input-text',
-  components: {
-    Container,
-    InputContainer,
-    InputWrapper,
-    ErrorMessage,
-    InfoText,
-    InputLabel,
-    LabelWrapper,
-    Icon,
-    IconWrapper,
-    IconContainer,
-    InputErrorWrapper,
-    optionalLabel
-  },
-  data() {
-    return {
-      inputTypeData: 'text'
-    }
-  },
-  props: {
-    placeholder: {
-      required: false,
-      default: ''
-    },
-    alignItems: {
-      required: false,
-      default: 'horizontal'
-    },
-    isError: {
-      required: false,
-      default: false
-    },
-    inputWidth: {
-      required: false,
-      default: null
-    },
-    inputHeight: {
-      required: false,
-      default: null
-    },
-    minWidth: {
-      required: false,
-      default: null
-    },
-    value: {
-      required: true,
-      default: null
-    },
-    errorMessage: {
-      required: false,
-      default: ''
-    },
-    infoTextMessage: {
-      required: false
-    },
-    infoTextAlign: {
-      required: false
-    },
-    label: {
-      required: false
-    },
-    labelOptional: {
-      required: false,
-      default: false
-    },
-    noBorder: {
-      required: false,
-      default: false
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    fontSize: {
-      required: false,
-      default: null
-    },
-    inputType: {
-      required: false,
-      default: 'text'
-    },
-    labelFontColor: {
-      required: false,
-      default: 'black'
-    },
-    backgroundColor: {
-      required: false
-    },
-    disabledBackgroundColor: {
-      required: false,
-      default: null
-    },
-    fontColor: {
-      required: false,
-      default: 'black'
-    },
-    hasFocus: {
-      required: false,
-      default: false
-    },
-    borderColor: {
-      required: false
-    },
-    readonly: {
-      required: false,
-      default: false
-    },
-    labelDataId: {
-      required: false,
-      default: ''
-    },
-    inputDataId: {
-      required: false,
-      default: ''
-    }
-  },
-  methods: {
-    onChangeHandler($event) {
-      this.$emit('input-change', $event)
-    },
-    onInputBlur($event) {
-      this.$emit('input-blur', $event.target.value)
-    },
-    toggleShowPassword() {
-      this.inputTypeData =
-        this.inputTypeData === 'password' ? 'text' : 'password'
-    }
-  },
-  created() {
-    this.inputTypeData = this.inputType
-  },
-  watch: {
-    hasFocus(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.$refs.inputElement.$el.focus()
-        })
-      }
-    }
-  }
-}
-</script>
+<template>
+  <container>
+    <input-wrapper
+      :hasLabel="!!label && label.length > 0"
+      :alignItems="alignItems"
+    >
+      <label-wrapper v-if="label">
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          :data-id="labelDataId"
+          >{{ label }}
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          :size="fontSize ? fontSize : '16px'"
+          :alignArrow="infoTextAlign"
+        />
+      </label-wrapper>
+      <input-error-wrapper>
+        <icon-container>
+          <input-container
+            ref="inputElement"
+            :placeholder="placeholder"
+            :isError="isError"
+            :inputWidth="inputWidth"
+            :minWidth="minWidth"
+            :inputHeight="inputHeight"
+            :value="value"
+            @input="onChangeHandler"
+            @blur="onInputBlur"
+            :noBorder="noBorder"
+            :disabled="disabled"
+            :isDisabled="disabled"
+            :fontSize="fontSize"
+            :inputType="inputType"
+            :type="inputTypeData"
+            :fontColor="fontColor"
+            :hasFocus="hasFocus"
+            :backgroundColor="backgroundColor"
+            :disabledBackgroundColor="disabledBackgroundColor"
+            :data-id="inputDataId"
+          />
+          <icon-wrapper
+            v-if="inputType === 'password' && !isError"
+            @click="toggleShowPassword()"
+            size="20px"
+          >
+            <icon name="current_variant" size="20px" />
+          </icon-wrapper>
+          <icon-wrapper v-if="isError" size="16px">
+            <icon name="warning" size="16px" cursor="default" />
+          </icon-wrapper>
+        </icon-container>
+        <error-message v-if="isError && errorMessage">{{
+          errorMessage
+        }}</error-message>
+      </input-error-wrapper>
+    </input-wrapper>
+  </container>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
+import Icon from '../../icon'
+import ErrorMessage from '../../errorMessage'
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+
+const labelAttrs = { fontSize: String, labelFontColor: String }
+const InputLabel = styled('div', labelAttrs)`
+  color: ${(props) =>
+    props.theme.colors[props.labelFontColor]
+      ? props.theme.colors[props.labelFontColor]
+      : props.labelFontColor
+      ? props.labelFontColor
+      : props.theme.colors.eturnityGrey};
+
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
+`
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
+const LabelWrapper = styled.div`
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  grid-gap: 12px;
+  align-items: center;
+  justify-content: start;
+`
+
+const InputErrorWrapper = styled.div`
+  display: inline-grid;
+  grid-template-row: auto auto;
+  grid-gap: 0px;
+  align-items: center;
+`
+
+const inputProps = {
+  isError: Boolean,
+  inputWidth: String,
+  minWidth: String,
+  noBorder: Boolean,
+  isDisabled: Boolean,
+  fontSize: String,
+  inputType: String,
+  fontColor: String,
+  backgroundColor: String,
+  borderColor: String,
+  inputHeight: String,
+  disabledBackgroundColor: String
+}
+const InputContainer = styled('input', inputProps)`
+  border: ${(props) =>
+    props.isError
+      ? '1px solid ' + props.theme.colors.red
+      : props.noBorder
+      ? 'none'
+      : props.borderColor
+      ? props.theme.colors[props.borderColor]
+        ? '1px solid ' + props.theme.colors[props.borderColor]
+        : '1px solid ' + props.borderColor
+      : '1px solid ' + props.theme.colors.grey4};
+  padding: ${(props) =>
+    props.isError
+      ? '11px 25px 11px 10px'
+      : props.inputType === 'password'
+      ? '11px 25px 11px 10px'
+      : '11px 5px 11px 10px'};
+  border-radius: 4px;
+  position: relative;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  color: ${(props) =>
+    props.isError
+      ? props.theme.colors.grey6
+      : props.isDisabled
+      ? props.theme.colors.grey2
+      : props.fontColor
+      ? props.fontColor + ' !important'
+      : props.theme.colors.black};
+
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
+  max-height: ${(props) => props.inputHeight};
+  box-sizing: border-box; // to allow width of 100% with padding
+  font-weight: 400;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+  background-color: ${(props) =>
+    props.isDisabled
+      ? props.disabledBackgroundColor
+        ? props.disabledBackgroundColor + ' !important'
+        : props.theme.colors.grey5
+      : props.backgroundColor
+      ? props.backgroundColor + ' !important'
+      : props.theme.colors.white};
+  &::placeholder {
+    color: ${(props) => props.theme.colors.grey2};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const InputWrapper = styled('div', inputAttrs)`
+  position: relative;
+  display: grid;
+  align-items: center;
+  gap: 8px;
+  grid-template-columns: ${(props) =>
+    props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
+`
+
+const IconAttrs = { size: String }
+const IconWrapper = styled('div', IconAttrs)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  right: 5px;
+  height: ${(props) => (props.size ? props.size : 'auto')};
+`
+
+const IconContainer = styled.div`
+  position: relative;
+`
+
+export default {
+  // 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' })"
+  //   @input-blur="onInputBlur($event)"
+  //   :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"
+  //   fontSize="13px"
+  // />
+  name: 'input-text',
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    ErrorMessage,
+    InfoText,
+    InputLabel,
+    LabelWrapper,
+    Icon,
+    IconWrapper,
+    IconContainer,
+    InputErrorWrapper,
+    optionalLabel
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: ''
+    },
+    alignItems: {
+      required: false,
+      default: 'horizontal'
+    },
+    isError: {
+      required: false,
+      default: false
+    },
+    inputWidth: {
+      required: false,
+      default: null
+    },
+    inputHeight: {
+      required: false,
+      default: null
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    value: {
+      required: true,
+      default: null
+    },
+    errorMessage: {
+      required: false,
+      default: ''
+    },
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    label: {
+      required: false
+    },
+    labelOptional: {
+      required: false,
+      default: false
+    },
+    noBorder: {
+      required: false,
+      default: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    fontSize: {
+      required: false,
+      default: null
+    },
+    inputType: {
+      required: false,
+      default: 'text'
+    },
+    labelFontColor: {
+      required: false,
+      default: 'black'
+    },
+    backgroundColor: {
+      required: false
+    },
+    disabledBackgroundColor: {
+      required: false,
+      default: null
+    },
+    fontColor: {
+      required: false,
+      default: 'black'
+    },
+    hasFocus: {
+      required: false,
+      default: false
+    },
+    borderColor: {
+      required: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
+    }
+  },
+  methods: {
+    onChangeHandler($event) {
+      this.$emit('input-change', $event)
+    },
+    onInputBlur($event) {
+      this.$emit('input-blur', $event.target.value)
+    },
+    toggleShowPassword() {
+      this.inputTypeData =
+        this.inputTypeData === 'password' ? 'text' : 'password'
+    }
+  },
+  created() {
+    this.inputTypeData = this.inputType
+  },
+  watch: {
+    hasFocus(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.$refs.inputElement.$el.focus()
+        })
+      }
+    }
+  }
+}
+</script>