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

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

@@ -1,153 +1,150 @@
-<template>
-  <Container :input-width="inputWidth">
-    <InputWrapper
-      :icon-color="iconColor"
-      :icon-position="iconPosition"
-    >
-      <SearchIconSvg class="search-icn" />
-      <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)"
-      />
-    </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;
-`
-
-  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};
-  }
-
-  &:focus {
-    outline: none;
-  }
-`
-
-  const InputWrapper = styled.span`
-  position: relative;
-
-  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: 'SearchInput',
-    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
-      },
-      hasFocus: {
-        required: false,
-        default: false
-      },
-      dataId: {
-        required: false,
-        default: ''
-      },
-      iconPosition: {
-        type: String,
-        default: 'right'
-      },
-      iconColor: {
-        type: String,
-        default: 'black'
-      }
-    },
-    emits: ['on-change'],
-    watch: {
-      hasFocus(newVal) {
-        if (newVal) {
-          this.focusInputElement()
-        }
-      }
-    },
-    methods: {
-      onChangeHandler(event) {
-        this.$emit('on-change', event.target.value)
-      },
-      focusInputElement() {
-        this.$nextTick(() => {
-          this.$refs.inputElement.$el.focus()
-        })
-      }
-    }
-  }
-</script>
+<template>
+  <container :inputWidth="inputWidth">
+    <input-wrapper :iconPosition="iconPosition" :iconColor="iconColor">
+      <SearchIconSvg class="search-icn" />
+      <input-container
+        ref="inputElement"
+        :placeholder="placeholder"
+        :value="value"
+        @input="onChangeHandler($event)"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :inputWidth="inputWidth"
+        :isFilter="isFilter"
+        :hasFocus="hasFocus"
+        :data-id="dataId"
+      />
+    </input-wrapper>
+  </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;
+`
+
+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};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;
+
+  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
+    },
+    hasFocus: {
+      required: false,
+      default: false
+    },
+    dataId: {
+      required: false,
+      default: ''
+    },
+    iconPosition: {
+      type: String,
+      default: 'right'
+    },
+    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>