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

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

@@ -1,380 +1,401 @@
-<template>
-  <Container>
-    <InputWrapper
-      :align-items="alignItems"
-      :has-label="!!label && label.length > 0"
-    >
-      <LabelWrapper v-if="label">
-        <InputLabel
-          :data-id="labelDataId"
-          :font-size="fontSize"
-          :label-font-color="labelFontColor"
-        >
-          {{ label }}
-          <OptionalLabel v-if="labelOptional">
-            ({{ $gettext('Optional') }})
-          </OptionalLabel>
-        </InputLabel>
-        <InfoText
-          v-if="infoTextMessage"
-          :align-arrow="infoTextAlign"
-          :size="fontSize ? fontSize : '16px'"
-          :text="infoTextMessage"
-        />
-      </LabelWrapper>
-      <InputErrorWrapper>
-        <IconContainer>
-          <InputContainer
-            ref="inputElement"
-            :background-color="backgroundColor"
-            :data-id="inputDataId"
-            :disabled="disabled"
-            :disabled-background-color="disabledBackgroundColor"
-            :font-color="fontColor"
-            :font-size="fontSize"
-            :has-focus="hasFocus"
-            :input-height="inputHeight"
-            :input-type="inputType"
-            :input-width="inputWidth"
-            :is-disabled="disabled"
-            :is-error="hasError"
-            :min-width="minWidth"
-            :no-border="noBorder"
-            :placeholder="placeholder"
-            :type="inputTypeData"
-            :value="value"
-            @blur="onInputBlur"
-            @focus="onInputFocus"
-            @input="onChangeHandler"
-            @keyup.enter="onEnterPress"
-          />
-          <IconWrapper
-            v-if="inputType === 'password' && !isError"
-            size="20px"
-            @click="toggleShowPassword()"
-          >
-            <Icon name="current_variant" size="20px" />
-          </IconWrapper>
-          <IconWrapper v-if="hasError" size="16px">
-            <Icon cursor="default" name="warning" size="16px" />
-          </IconWrapper>
-        </IconContainer>
-        <ErrorMessage v-if="hasError && hasErrorMessage">
-          {{ dynamicErrorMessage }}
-        </ErrorMessage>
-      </InputErrorWrapper>
-    </InputWrapper>
-  </Container>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../../infoText'
-  import Icon from '../../icon'
-  import ErrorMessage from '../../errorMessage'
-  import InputValidations from '../../../mixins/inputValidations.js'
-
-  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: 'InputText',
-    components: {
-      Container,
-      InputContainer,
-      InputWrapper,
-      ErrorMessage,
-      InfoText,
-      InputLabel,
-      LabelWrapper,
-      Icon,
-      IconWrapper,
-      IconContainer,
-      InputErrorWrapper,
-      OptionalLabel,
-    },
-    mixins: [InputValidations],
-    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: '',
-      },
-    },
-    data() {
-      return {
-        inputTypeData: 'text',
-      }
-    },
-    computed: {
-      hasError() {
-        return this.isError || this.error
-      },
-      hasErrorMessage() {
-        return (
-          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
-        )
-      },
-      dynamicErrorMessage() {
-        return this.errMessage || this.errorMessage
-      },
-    },
-    watch: {
-      hasFocus(newVal) {
-        if (newVal) {
-          this.$nextTick(() => {
-            this.$refs.inputElement.$el.focus()
-          })
-        }
-      },
-    },
-    created() {
-      this.inputTypeData = this.inputType
-    },
-    methods: {
-      onEnterPress() {
-        this.$emit('on-enter-click')
-        this.$refs.inputElement.$el.blur()
-      },
-      onChangeHandler(event) {
-        this.$emit('input-change', event.target.value)
-      },
-      onInputBlur($event) {
-        this.validateInput($event.target.value)
-        this.$emit('input-blur', $event.target.value)
-      },
-      onInputFocus($event) {
-        this.$emit('input-focus', $event.target.value)
-      },
-      toggleShowPassword() {
-        this.inputTypeData =
-          this.inputTypeData === 'password' ? 'text' : 'password'
-      },
-    },
-  }
-</script>
+<template>
+  <Container>
+    <InputWrapper
+      :align-items="alignItems"
+      :has-label="!!label && label.length > 0"
+    >
+      <LabelWrapper v-if="label">
+        <InputLabel
+          :data-id="labelDataId"
+          :font-size="fontSize"
+          :label-font-color="labelFontColor"
+        >
+          {{ label }}
+          <OptionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})
+          </OptionalLabel>
+        </InputLabel>
+        <InfoText
+          v-if="infoTextMessage"
+          :align-arrow="infoTextAlign"
+          :size="fontSize ? fontSize : '16px'"
+          :text="infoTextMessage"
+        />
+      </LabelWrapper>
+      <InputErrorWrapper>
+        <IconContainer>
+          <InputContainer
+            ref="inputElement"
+            :background-color="backgroundColor"
+            :border-color="borderColor"
+            :data-id="inputDataId"
+            :default-padding="defaultPadding"
+            :disabled="disabled"
+            :disabled-background-color="disabledBackgroundColor"
+            :font-color="fontColor"
+            :font-size="fontSize"
+            :has-focus="hasFocus"
+            :input-height="inputHeight"
+            :input-type="inputType"
+            :input-width="inputWidth"
+            :is-disabled="disabled"
+            :is-error="hasError"
+            :min-width="minWidth"
+            :no-border="noBorder"
+            :placeholder="placeholder"
+            :type="inputTypeData"
+            :value="value"
+            @blur="onInputBlur"
+            @focus="onInputFocus"
+            @input="onChangeHandler"
+            @keyup.enter="onEnterPress"
+          />
+          <IconWrapper
+            v-if="inputType === 'password' && !isError"
+            size="20px"
+            @click="toggleShowPassword()"
+          >
+            <Icon name="current_variant" size="20px" />
+          </IconWrapper>
+          <IconWrapper v-if="hasError" size="16px">
+            <Icon cursor="default" name="warning" size="16px" />
+          </IconWrapper>
+          <IconWrapper
+            v-if="iconName && !hasError && inputType !== 'password'"
+            :default-padding="defaultPadding"
+            size="16px"
+          >
+            <Icon color="white" cursor="default" :name="iconName" size="16px" />
+          </IconWrapper>
+        </IconContainer>
+        <ErrorMessage v-if="hasError && hasErrorMessage">
+          {{ dynamicErrorMessage }}
+        </ErrorMessage>
+      </InputErrorWrapper>
+    </InputWrapper>
+  </Container>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import InfoText from '../../infoText'
+  import Icon from '../../icon'
+  import ErrorMessage from '../../errorMessage'
+  import InputValidations from '../../../mixins/inputValidations.js'
+
+  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,
+    defaultPadding: Boolean,
+  }
+  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'
+        : props.defaultPadding
+        ? '10px 35px 10px 15px'
+        : '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, defaultPadding: Boolean }
+  const IconWrapper = styled('div', IconAttrs)`
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    right: ${(props) => (props.defaultPadding ? '15px' : '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: 'InputText',
+    components: {
+      Container,
+      InputContainer,
+      InputWrapper,
+      ErrorMessage,
+      InfoText,
+      InputLabel,
+      LabelWrapper,
+      Icon,
+      IconWrapper,
+      IconContainer,
+      InputErrorWrapper,
+      OptionalLabel,
+    },
+    mixins: [InputValidations],
+    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: '',
+      },
+      iconName: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      defaultPadding: {
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        inputTypeData: 'text',
+      }
+    },
+    computed: {
+      hasError() {
+        return this.isError || this.error
+      },
+      hasErrorMessage() {
+        return (
+          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+        )
+      },
+      dynamicErrorMessage() {
+        return this.errMessage || this.errorMessage
+      },
+    },
+    watch: {
+      hasFocus(newVal) {
+        if (newVal) {
+          this.$nextTick(() => {
+            this.$refs.inputElement.$el.focus()
+          })
+        }
+      },
+    },
+    created() {
+      this.inputTypeData = this.inputType
+    },
+    methods: {
+      onEnterPress() {
+        this.$emit('on-enter-click')
+        this.$refs.inputElement.$el.blur()
+      },
+      onChangeHandler(event) {
+        this.$emit('input-change', event.target.value)
+      },
+      onInputBlur($event) {
+        this.validateInput($event.target.value)
+        this.$emit('input-blur', $event.target.value)
+      },
+      onInputFocus($event) {
+        this.$emit('input-focus', $event.target.value)
+      },
+      toggleShowPassword() {
+        this.inputTypeData =
+          this.inputTypeData === 'password' ? 'text' : 'password'
+      },
+    },
+  }
+</script>