@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

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

@@ -1,150 +1,150 @@
 <template>
-  <Container :input-width="inputWidth">
-    <InputWrapper :icon-color="iconColor" :icon-position="iconPosition">
+  <container :inputWidth="inputWidth">
+    <input-wrapper :iconPosition="iconPosition" :iconColor="iconColor">
       <SearchIconSvg class="search-icn" />
-      <InputContainer
+      <input-container
         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"
       />
-    </InputWrapper>
-  </Container>
+    </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'
+// 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 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};
-    }
+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;
-    }
-  `
+  &:focus {
+    outline: none;
+  }
+`
 
-  const InputWrapper = styled.span`
-    position: relative;
+const InputWrapper = styled.span`
+  position: relative;
 
-    svg {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      ${(props) => (props.iconPosition === 'right' ? 'right' : 'left')}: 10px;
+  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};
-      }
+    path {
+      fill: ${(props) =>
+        props.theme.colors[props.iconColor]
+          ? props.theme.colors[props.iconColor]
+          : props.iconColor};
     }
-  `
+  }
+`
 
-  export default {
-    name: 'SearchInput',
-    components: {
-      InputContainer,
-      InputWrapper,
-      Container,
-      SearchIconSvg,
+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
     },
-    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',
-      },
+    hasFocus: {
+      required: false,
+      default: false
     },
-    emits: ['on-change'],
-    watch: {
-      hasFocus(newVal) {
-        if (newVal) {
-          this.focusInputElement()
-        }
-      },
+    dataId: {
+      required: false,
+      default: ''
     },
-    methods: {
-      onChangeHandler(event) {
-        this.$emit('on-change', event.target.value)
-      },
-      focusInputElement() {
-        this.$nextTick(() => {
-          this.$refs.inputElement.$el.focus()
-        })
-      },
+    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>