@eturnity/eturnity_reusable_components 7.12.6 → 7.12.7

package/src/components/inputs/searchInput/SearchInput.stories.js

@@ -1,40 +1,40 @@
-import SearchInput from "./index.vue"
-
-export default {
-  title: "SearchInput",
-  component: SearchInput,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { SearchInput },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<search-input v-bind="$props" />',
-
-  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
-  // To use:
-  // <search-input
-  //   placeholder="Company name"
-  //   :value="companyName"
-  //   :disabled="true"
-  //   inputWidth="250px"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: "Search...",
-  disabled: false,
-  value: "",
-  inputWidth: "250px",
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: "Search...",
-  disabled: true,
-  value: "",
-  inputWidth: "250px",
-}
+import SearchInput from "./index.vue"
+
+export default {
+  title: "SearchInput",
+  component: SearchInput,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { SearchInput },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<search-input v-bind="$props" />',
+
+  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+  // To use:
+  // <search-input
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   :disabled="true"
+  //   inputWidth="250px"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: "Search...",
+  disabled: false,
+  value: "",
+  inputWidth: "250px",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: "Search...",
+  disabled: true,
+  value: "",
+  inputWidth: "250px",
+}

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

@@ -1,133 +1,133 @@
-<template>
-  <container :inputWidth="inputWidth">
-    <input-wrapper>
-      <input-container
-        ref="inputElement"
-        :placeholder="placeholder"
-        :value="value"
-        @input="onChangeHandler($event)"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :inputWidth="inputWidth"
-        :isFilter="isFilter"
-        :hasFocus="hasFocus"
-        :data-id="dataId"
-      />
-      <img
-        class="search-icn"
-        :src="require('../../../assets/icons/search_icon_black.svg')"
-      />
-    </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"
-// />
-import styled from 'vue-styled-components'
-
-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;
-
-  img {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-`
-
-export default {
-  name: 'search-input',
-  components: {
-    InputContainer,
-    InputWrapper,
-    Container
-  },
-  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: ''
-    }
-  },
-  methods: {
-    onChangeHandler(event) {
-      this.$emit('on-change', event)
-    },
-    focusInputElement() {
-      this.$nextTick(() => {
-        this.$refs.inputElement.$el.focus()
-      })
-    }
-  },
-  watch: {
-    hasFocus(newVal) {
-      if (newVal) {
-        this.focusInputElement()
-      }
-    }
-  }
-}
-</script>
+<template>
+  <container :inputWidth="inputWidth">
+    <input-wrapper>
+      <input-container
+        ref="inputElement"
+        :placeholder="placeholder"
+        :value="value"
+        @input="onChangeHandler($event)"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :inputWidth="inputWidth"
+        :isFilter="isFilter"
+        :hasFocus="hasFocus"
+        :data-id="dataId"
+      />
+      <img
+        class="search-icn"
+        :src="require('../../../assets/icons/search_icon_black.svg')"
+      />
+    </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"
+// />
+import styled from 'vue-styled-components'
+
+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;
+
+  img {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`
+
+export default {
+  name: 'search-input',
+  components: {
+    InputContainer,
+    InputWrapper,
+    Container
+  },
+  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: ''
+    }
+  },
+  methods: {
+    onChangeHandler(event) {
+      this.$emit('on-change', event)
+    },
+    focusInputElement() {
+      this.$nextTick(() => {
+        this.$refs.inputElement.$el.focus()
+      })
+    }
+  },
+  watch: {
+    hasFocus(newVal) {
+      if (newVal) {
+        this.focusInputElement()
+      }
+    }
+  }
+}
+</script>