@eturnity/eturnity_reusable_components 1.0.85 → 1.0.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.85",
+  "version": "1.0.89",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -21,6 +21,9 @@
               :optionItems="itemOptions"
               :optionsDisplay="['display_name', 'company_item_number', 'model']"
             /> -->
+            <td>
+              <search-input />
+            </td>
             <div class="icons-container">
               <three-dots :options="listOptions" :isLoading="false" />
             </div>
@@ -47,6 +50,7 @@ import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
 import Toggle from "@/components/inputs/toggle"
+import SearchInput from "@/components/inputs/searchInput"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -61,6 +65,7 @@ export default {
     MainTable,
     ThreeDots,
     Toggle,
+    SearchInput,
     // TableDropdown,
   },
   data() {

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

@@ -1,24 +1,24 @@
 <template>
-<container>
-  <input-wrapper>
-    <input-container
-      :placeholder="placeholder"
-      :value="value"
-      @input="onChangeHandler($event)"
-      :disabled="disabled"
-      :isDisabled="disabled"
-    />
-    <img
-      class="search-icn"
-      :src="require('../../../assets/icons/search_icon_black.svg')"
-    />
-</input-wrapper>
-</container>
+  <container>
+    <input-wrapper>
+      <input-container
+        :placeholder="placeholder"
+        :value="value"
+        @input="onChangeHandler($event)"
+        :disabled="disabled"
+        :isDisabled="disabled"
+      />
+      <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"
-import styled from 'vue-styled-components'
+import styled from "vue-styled-components"
 
 const Container = styled.div`
   width: 100%;
@@ -26,7 +26,7 @@ const Container = styled.div`
 `
 
 const inputAttrs = { isDisabled: Boolean }
-const InputContainer = styled('input', inputAttrs)`
+const InputContainer = styled("input", inputAttrs)`
   border: 1px solid ${(props) => props.theme.colors.mediumGray};
   padding: 11px 30px 11px 10px;
   border-radius: 4px;
@@ -34,8 +34,8 @@ const InputContainer = styled('input', inputAttrs)`
   color: ${(props) => props.theme.colors.black};
   width: 100%;
   box-sizing: border-box;
-  cursor: ${props => props.isDisabled ? 'not-allowed' : 'auto'};
-
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  background: ${(props) => props.theme.colors.white} !important;
   &::placeholder {
     color: ${(props) => props.theme.colors.darkGray};
   }
@@ -60,25 +60,25 @@ export default {
   components: {
     InputContainer,
     InputWrapper,
-    Container
+    Container,
   },
   props: {
     value: {
-      required: true
+      required: true,
     },
     disabled: {
       required: false,
-      default: false
+      default: false,
     },
     placeholder: {
       required: false,
-      default: ''
-    }
+      default: "",
+    },
   },
   methods: {
     onChangeHandler(event) {
-      this.$emit('on-change', event)
-    }
-  }
+      this.$emit("on-change", event)
+    },
+  },
 }
 </script>

package/src/components/tables/mainTable/index.vue

@@ -82,11 +82,11 @@ const TableContainer = styled.table`
         cursor: pointer;
 
         .table-dropdown {
-          background-color: ${(props) => props.theme.colors.grey5} !important;
+          background-color: ${(props) => props.theme.colors.grey5};
         }
 
         input {
-          background-color: ${(props) => props.theme.colors.grey5} !important;
+          background-color: ${(props) => props.theme.colors.grey5};
         }
       }
 
@@ -197,6 +197,7 @@ const TableContainer = styled.table`
     .text {
       padding: 10px 15px 10px 15px;
       color: ${(props) => props.theme.colors.black};
+      cursor: auto;
     }
 
     .bold {
@@ -311,10 +312,10 @@ const TableContainer = styled.table`
   input {
     font-size: 13px;
     padding: 5px 10px;
-    background: #fff !important;
+    background: #fff;
 
     &:focus {
-      background: ${(props) => props.theme.colors.grey5} + " !important";
+      background: ${(props) => props.theme.colors.grey5};
     }
   }