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

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

@@ -1,111 +1,98 @@
 <template>
-  <Container>
-    <InputWrapper
-      :align-items="alignItems"
-      :has-label="!!label && label.length > 0"
+  <container>
+    <input-wrapper
+      :hasLabel="!!label && label.length > 0"
+      :alignItems="alignItems"
     >
-      <LabelWrapper v-if="label">
-        <InputLabel
+      <label-wrapper v-if="label">
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
           :data-id="labelDataId"
-          :font-size="fontSize"
-          :label-font-color="labelFontColor"
+          >{{ label }}
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
         >
-          {{ label }}
-          <OptionalLabel v-if="labelOptional">
-            ({{ $gettext('Optional') }})
-          </OptionalLabel>
-        </InputLabel>
-        <InfoText
+        <info-text
           v-if="infoTextMessage"
-          :align-arrow="infoTextAlign"
-          :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
+          :size="fontSize ? fontSize : '16px'"
+          :alignArrow="infoTextAlign"
         />
-      </LabelWrapper>
-      <InputErrorWrapper>
-        <IconContainer>
-          <InputContainer
+      </label-wrapper>
+      <input-error-wrapper>
+        <icon-container>
+          <input-container
             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"
+            :isError="hasError"
+            :inputWidth="inputWidth"
+            :minWidth="minWidth"
+            :inputHeight="inputHeight"
             :value="value"
-            @blur="onInputBlur"
             @input="onChangeHandler"
+            @blur="onInputBlur"
             @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"
           />
-          <IconWrapper
+          <icon-wrapper
             v-if="inputType === 'password' && !isError"
-            size="20px"
             @click="toggleShowPassword()"
+            size="20px"
           >
-            <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>
+            <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>
 </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;
@@ -113,28 +100,28 @@
   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
@@ -144,13 +131,13 @@
       ? 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')};
@@ -161,7 +148,7 @@
       ? 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')};
@@ -176,7 +163,7 @@
         : props.theme.colors.grey5
       : props.backgroundColor
       ? props.backgroundColor + ' !important'
-  : props.theme.colors.white};
+      : props.theme.colors.white};
   &::placeholder {
     color: ${(props) => props.theme.colors.grey2};
   }
@@ -186,18 +173,18 @@
   }
 `
 
-  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;
@@ -206,183 +193,183 @@
   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: 'InputText',
-    components: {
-      Container,
-      InputContainer,
-      InputWrapper,
-      ErrorMessage,
-      InfoText,
-      InputLabel,
-      LabelWrapper,
-      Icon,
-      IconWrapper,
-      IconContainer,
-      InputErrorWrapper,
-      optionalLabel
+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
     },
-    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: ''
-      }
+    hasErrorMessage() {
+      return (
+        (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+      )
     },
-    data() {
-      return {
-        inputTypeData: 'text'
-      }
+    dynamicErrorMessage() {
+      return this.errMessage || this.errorMessage
+    }
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: ''
     },
-    computed: {
-      hasError() {
-        return this.isError || this.error
-      },
-      hasErrorMessage() {
-        return (
-          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
-        )
-      },
-      dynamicErrorMessage() {
-        return this.errMessage || this.errorMessage
-      }
+    alignItems: {
+      required: false,
+      default: 'horizontal'
     },
-    watch: {
-      hasFocus(newVal) {
-        if (newVal) {
-          this.$nextTick(() => {
-            this.$refs.inputElement.$el.focus()
-          })
-        }
-      }
+    isError: {
+      required: false,
+      default: false
+    },
+    inputWidth: {
+      required: false,
+      default: null
+    },
+    inputHeight: {
+      required: false,
+      default: null
     },
-    created() {
-      this.inputTypeData = this.inputType
+    minWidth: {
+      required: false,
+      default: null
     },
-    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'
+    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: {
+    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'
+    }
+  },
+  created() {
+    this.inputTypeData = this.inputType
+  },
+  watch: {
+    hasFocus(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.$refs.inputElement.$el.focus()
+        })
       }
     }
   }
+}
 </script>