@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

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

@@ -1,150 +1,151 @@
 <template>
-  <container :inputWidth="inputWidth">
-    <input-wrapper :iconPosition="iconPosition" :iconColor="iconColor">
+  <Container :input-width="inputWidth">
+    <InputWrapper :icon-color="iconColor" :icon-position="iconPosition">
       <SearchIconSvg class="search-icn" />
-      <input-container
+      <InputContainer
         ref="inputElement"
+        :data-id="dataId"
+        :disabled="disabled"
+        :has-focus="hasFocus"
+        :input-width="inputWidth"
+        :is-disabled="disabled"
+        :is-filter="isFilter"
         :placeholder="placeholder"
         :value="value"
         @input="onChangeHandler($event)"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :inputWidth="inputWidth"
-        :isFilter="isFilter"
-        :hasFocus="hasFocus"
-        :data-id="dataId"
       />
-    </input-wrapper>
-  </container>
+    </InputWrapper>
+  </Container>
 </template>
 
 <script>
-// import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
-// To use:
-// <search-input
-//   placeholder="Company name"
-//   :value="companyName"
-//   :disabled="true"
-//   inputWidth="250px"
-//   @on-change="function($event)"
-//   :isFilter="true" // to set the height at 30px
-//   data-id="test-data-id"
-//   iconPosition="left"
-//   iconColor="grey2"
-// />
-import styled from 'vue3-styled-components'
-import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
-
-const inputAttrs = {
-  isDisabled: Boolean,
-  inputWidth: String,
-  isFilter: Boolean
-}
-const Container = styled('div', inputAttrs)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  position: relative;
-`
+  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+  // To use:
+  // <search-input
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   :disabled="true"
+  //   inputWidth="250px"
+  //   @on-change="function($event)"
+  //   :isFilter="true" // to set the height at 30px
+  //   data-id="test-data-id"
+  //   iconPosition="left"
+  //   iconColor="grey2"
+  // />
+  import styled from 'vue3-styled-components'
+  import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
 
-const InputContainer = styled('input', inputAttrs)`
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  padding: ${(props) =>
-    props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
-  border-radius: 4px;
-  font-size: 13px;
-  color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  box-sizing: border-box;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
-  background: ${(props) => props.theme.colors.white} !important;
-  &::placeholder {
-    color: ${(props) => props.theme.colors.darkGray};
+  const inputAttrs = {
+    isDisabled: Boolean,
+    inputWidth: String,
+    isFilter: Boolean,
   }
+  const Container = styled('div', inputAttrs)`
+    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    position: relative;
+  `
 
-  &:focus {
-    outline: none;
-  }
-`
+  const InputContainer = styled('input', inputAttrs)`
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    padding: ${(props) =>
+      props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+    border-radius: 4px;
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.black};
+    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    box-sizing: border-box;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+    background: ${(props) => props.theme.colors.white} !important;
+    &::placeholder {
+      color: ${(props) => props.theme.colors.darkGray};
+    }
 
-const InputWrapper = styled.span`
-  position: relative;
+    &:focus {
+      outline: none;
+    }
+  `
 
-  svg {
-    position: absolute;
-    transform: translateY(-50%);
-    top: 50%;
-    ${(props) => (props.iconPosition === 'right' ? 'right' : 'left')}: 10px;
+  const wrapperAttrs = { iconColor: String, iconPosition: String }
+  const InputWrapper = styled('div', wrapperAttrs)`
+    position: relative;
 
-    path {
-      fill: ${(props) =>
-        props.theme.colors[props.iconColor]
-          ? props.theme.colors[props.iconColor]
-          : props.iconColor};
+    svg {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      ${(props) => (props.iconPosition === 'right' ? 'right' : 'left')}: 10px;
+
+      path {
+        fill: ${(props) =>
+          props.theme.colors[props.iconColor]
+            ? props.theme.colors[props.iconColor]
+            : props.iconColor};
+      }
     }
-  }
-`
+  `
 
-export default {
-  name: 'search-input',
-  components: {
-    InputContainer,
-    InputWrapper,
-    Container,
-    SearchIconSvg
-  },
-  props: {
-    value: {
-      required: true
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    placeholder: {
-      required: false,
-      default: ''
-    },
-    inputWidth: {
-      required: false,
-      default: null
-    },
-    isFilter: {
-      required: false,
-      default: false
+  export default {
+    name: 'SearchInput',
+    components: {
+      InputContainer,
+      InputWrapper,
+      Container,
+      SearchIconSvg,
     },
-    hasFocus: {
-      required: false,
-      default: false
+    props: {
+      value: {
+        required: true,
+      },
+      disabled: {
+        required: false,
+        default: false,
+      },
+      placeholder: {
+        required: false,
+        default: '',
+      },
+      inputWidth: {
+        required: false,
+        default: null,
+      },
+      isFilter: {
+        required: false,
+        default: false,
+      },
+      hasFocus: {
+        required: false,
+        default: false,
+      },
+      dataId: {
+        required: false,
+        default: '',
+      },
+      iconPosition: {
+        type: String,
+        default: 'right',
+      },
+      iconColor: {
+        type: String,
+        default: 'black',
+      },
     },
-    dataId: {
-      required: false,
-      default: ''
+    emits: ['on-change'],
+    watch: {
+      hasFocus(newVal) {
+        if (newVal) {
+          this.focusInputElement()
+        }
+      },
     },
-    iconPosition: {
-      type: String,
-      default: 'right'
+    methods: {
+      onChangeHandler(event) {
+        this.$emit('on-change', event.target.value)
+      },
+      focusInputElement() {
+        this.$nextTick(() => {
+          this.$refs.inputElement.$el.focus()
+        })
+      },
     },
-    iconColor: {
-      type: String,
-      default: 'black'
-    }
-  },
-  emits: ['on-change'],
-  methods: {
-    onChangeHandler(event) {
-      this.$emit('on-change', event.target.value)
-    },
-    focusInputElement() {
-      this.$nextTick(() => {
-        this.$refs.inputElement.$el.focus()
-      })
-    }
-  },
-  watch: {
-    hasFocus(newVal) {
-      if (newVal) {
-        this.focusInputElement()
-      }
-    }
   }
-}
 </script>