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

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

@@ -1,98 +1,111 @@
 <template>
-  <container>
-    <input-wrapper
-      :hasLabel="!!label && label.length > 0"
-      :alignItems="alignItems"
+  <Container>
+    <InputWrapper
+      :align-items="alignItems"
+      :has-label="!!label && label.length > 0"
     >
-      <label-wrapper v-if="label">
-        <input-label
-          :labelFontColor="labelFontColor"
-          :fontSize="fontSize"
+      <LabelWrapper v-if="label">
+        <InputLabel
           :data-id="labelDataId"
-          >{{ label }}
-          <optionalLabel v-if="labelOptional"
-            >({{ $gettext('Optional') }})</optionalLabel
-          ></input-label
+          :font-size="fontSize"
+          :label-font-color="labelFontColor"
         >
-        <info-text
+          {{ label }}
+          <OptionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})
+          </OptionalLabel>
+        </InputLabel>
+        <InfoText
           v-if="infoTextMessage"
-          :text="infoTextMessage"
+          :align-arrow="infoTextAlign"
           :size="fontSize ? fontSize : '16px'"
-          :alignArrow="infoTextAlign"
+          :text="infoTextMessage"
         />
-      </label-wrapper>
-      <input-error-wrapper>
-        <icon-container>
-          <input-container
+      </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"
-            :isError="hasError"
-            :inputWidth="inputWidth"
-            :minWidth="minWidth"
-            :inputHeight="inputHeight"
+            :type="inputTypeData"
             :value="value"
-            @input="onChangeHandler"
             @blur="onInputBlur"
+            @input="onChangeHandler"
             @keyup.enter="onEnterPress"
-            :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
+          <IconWrapper
             v-if="inputType === 'password' && !isError"
-            @click="toggleShowPassword()"
             size="20px"
+            @click="toggleShowPassword()"
+          >
+            <Icon
+              name="current_variant"
+              size="20px"
+            />
+          </IconWrapper>
+          <IconWrapper
+            v-if="hasError"
+            size="16px"
           >
-            <icon name="current_variant" size="20px" />
-          </icon-wrapper>
-          <icon-wrapper v-if="hasError" size="16px">
-            <icon name="warning" size="16px" cursor="default" />
-          </icon-wrapper>
-        </icon-container>
-        <error-message v-if="hasError && hasErrorMessage">{{
-          dynamicErrorMessage
-        }}</error-message>
-      </input-error-wrapper>
-    </input-wrapper>
-  </container>
+            <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'
+  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`
+  const Container = styled.div`
   width: 100%;
   position: relative;
 `
 
-const labelAttrs = { fontSize: String, labelFontColor: String }
-const InputLabel = styled('div', labelAttrs)`
+  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};
+  : props.theme.colors.eturnityGrey};
 
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
-const optionalLabel = styled.span`
+  const optionalLabel = styled.span`
   font-weight: 300;
 `
-const LabelWrapper = styled.div`
+  const LabelWrapper = styled.div`
   display: inline-grid;
   grid-template-columns: auto auto;
   grid-gap: 12px;
@@ -100,28 +113,28 @@ const LabelWrapper = styled.div`
   justify-content: start;
 `
 
-const InputErrorWrapper = styled.div`
+  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)`
+  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
@@ -131,13 +144,13 @@ const InputContainer = styled('input', inputProps)`
       ? props.theme.colors[props.borderColor]
         ? '1px solid ' + props.theme.colors[props.borderColor]
         : '1px solid ' + props.borderColor
-      : '1px solid ' + props.theme.colors.grey4};
+  : '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'};
+  : '11px 5px 11px 10px'};
   border-radius: 4px;
   position: relative;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
@@ -148,7 +161,7 @@ const InputContainer = styled('input', inputProps)`
       ? props.theme.colors.grey2
       : props.fontColor
       ? props.fontColor + ' !important'
-      : props.theme.colors.black};
+  : props.theme.colors.black};
 
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
@@ -163,7 +176,7 @@ const InputContainer = styled('input', inputProps)`
         : props.theme.colors.grey5
       : props.backgroundColor
       ? props.backgroundColor + ' !important'
-      : props.theme.colors.white};
+  : props.theme.colors.white};
   &::placeholder {
     color: ${(props) => props.theme.colors.grey2};
   }
@@ -173,18 +186,18 @@ const InputContainer = styled('input', inputProps)`
   }
 `
 
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled('div', inputAttrs)`
+  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'};
+  props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
 `
 
-const IconAttrs = { size: String }
-const IconWrapper = styled('div', IconAttrs)`
+  const IconAttrs = { size: String }
+  const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -193,183 +206,183 @@ const IconWrapper = styled('div', IconAttrs)`
   height: ${(props) => (props.size ? props.size : 'auto')};
 `
 
-const IconContainer = styled.div`
+  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
-  },
-  mixins: [InputValidations],
-  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
-    }
-  },
-  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
+  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
     },
-    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
+    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: ''
+      }
     },
-    labelDataId: {
-      required: false,
-      default: ''
+    data() {
+      return {
+        inputTypeData: 'text'
+      }
     },
-    inputDataId: {
-      required: false,
-      default: ''
-    }
-  },
-  methods: {
-    onEnterPress() {
-      this.$emit('on-enter-click')
-      this.$refs.inputElement.$el.blur()
+    computed: {
+      hasError() {
+        return this.isError || this.error
+      },
+      hasErrorMessage() {
+        return (
+          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+        )
+      },
+      dynamicErrorMessage() {
+        return this.errMessage || this.errorMessage
+      }
     },
-    onChangeHandler(event) {
-      this.$emit('input-change', event.target.value)
+    watch: {
+      hasFocus(newVal) {
+        if (newVal) {
+          this.$nextTick(() => {
+            this.$refs.inputElement.$el.focus()
+          })
+        }
+      }
     },
-    onInputBlur($event) {
-      this.validateInput($event.target.value)
-      this.$emit('input-blur', $event.target.value)
+    created() {
+      this.inputTypeData = this.inputType
     },
-    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()
-        })
+    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)
+      },
+      toggleShowPassword() {
+        this.inputTypeData =
+          this.inputTypeData === 'password' ? 'text' : 'password'
       }
     }
   }
-}
 </script>