@eturnity/eturnity_reusable_components 1.0.44 → 1.0.48

package/package.json

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

package/src/App.vue

@@ -13,20 +13,6 @@
         </thead>
         <tbody>
           <tr>
-            <td>
-              <input-number
-                placeholder="Enter distance"
-                :isError="false"
-                :numberPrecision="2"
-                unitName="pc"
-                :value="inputValue"
-                @input-change="onInputChange($event)"
-                errorMessage="Enter a number between 1 and 10"
-                :disabled="false"
-                :noBorder="true"
-                textAlign="left"
-              />
-            </td>
             <td class="text">Body 2</td>
             <td class="text">Body 3</td>
             <td class="text">Body 4</td>
@@ -36,6 +22,9 @@
           </tr>
         </tbody>
       </main-table>
+      <br />
+      <br />
+      <search-input :value="inputValue" @on-change="onInputChange" :disabled="false" placeholder="Search..." />
     </page-container>
   </ThemeProvider>
 </template>
@@ -46,7 +35,7 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import InputNumber from "@/components/inputs/inputNumber"
+import SearchInput from "@/components/inputs/searchInput"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -59,7 +48,7 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    InputNumber,
+    SearchInput,
   },
   data() {
     return {

package/src/assets/icons/search_icon_black.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9751 13.6383L11.3396 9.9957C12.0755 8.94938 12.4395 7.6858 12.3731 6.40752C12.3068 5.12923 11.8141 3.91027 10.9739 2.94605C10.1337 1.98183 8.9947 1.3282 7.73954 1.08993C6.48437 0.85166 5.1857 1.04256 4.05173 1.63202C2.91776 2.22148 2.01415 3.17536 1.48577 4.34076C0.957383 5.50615 0.834825 6.81556 1.13774 8.05906C1.44065 9.30257 2.1515 10.4082 3.15631 11.1986C4.16113 11.989 5.40173 12.4185 6.67922 12.4183C7.86776 12.418 9.02614 12.0434 9.99056 11.3474L13.626 14.9901L14.9751 13.6383ZM3.98109 9.38128C3.44671 8.84727 3.08262 8.16629 2.93499 7.42469C2.78736 6.68309 2.86284 5.91427 3.15185 5.2157C3.44086 4.51713 3.93039 3.92029 4.55837 3.50084C5.18635 3.08139 5.9245 2.85823 6.67922 2.85965C7.40253 2.85844 8.11118 3.06399 8.72198 3.45218C9.33279 3.84037 9.8204 4.39508 10.1276 5.05121C10.4348 5.70735 10.5488 6.43766 10.4562 7.15645C10.3637 7.87523 10.0684 8.55264 9.60512 9.10918L9.09703 9.61827C8.37063 10.2302 7.44086 10.5457 6.49283 10.5017C5.54479 10.4578 4.64804 10.0578 3.98109 9.38128Z" fill="#263238"/>
+</svg>

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

@@ -89,6 +89,7 @@ const InputContainer = styled("input", inputProps)`
     props.isDisabled
       ? props.theme.colors.grey5 + " !important"
       : "#fff !important"};
+    box-sizing: border-box;
 
   &::placeholder {
     color: ${(props) =>

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

@@ -0,0 +1,84 @@
+<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>
+</template>
+
+<script>
+// import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+import styled from 'vue-styled-components'
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+
+const inputAttrs = { isDisabled: Boolean }
+const InputContainer = styled('input', inputAttrs)`
+  border: 1px solid ${(props) => props.theme.colors.mediumGray};
+  padding: 11px 30px 11px 10px;
+  border-radius: 4px;
+  font-size: 16px;
+  color: ${(props) => props.theme.colors.black};
+  width: 100%;
+  box-sizing: border-box;
+  cursor: ${props => props.isDisabled ? 'not-allowed' : 'auto'};
+
+  &::placeholder {
+    color: ${(props) => props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;
+
+  img {
+    position: absolute;
+    right: 10px;
+    top: 0;
+  }
+`
+
+export default {
+  name: "search-input",
+  components: {
+    InputContainer,
+    InputWrapper,
+    Container
+  },
+  props: {
+    value: {
+      required: true
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    placeholder: {
+      required: false,
+      default: ''
+    }
+  },
+  methods: {
+    onChangeHandler(event) {
+      this.$emit('on-change', event)
+    }
+  }
+}
+</script>

package/src/components/spinner/index.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+// import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 import styled from "vue-styled-components"
 
 const SpinnerContainer = styled.div`

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

@@ -31,7 +31,7 @@ const TableTitle = styled.div`
 `
 
 const TableScroll = styled.div`
-  position: relative;
+  /* position: relative; */
   max-width: 100%;
 `
 
@@ -155,12 +155,14 @@ const TableContainer = styled.table`
   }
 
   tr {
-    position: relative;
-
     &.disabled {
       cursor: not-allowed;
     }
 
+    .arrow-dropdown {
+      visibility: hidden;
+    }
+
     &.footer {
       td {
         background-color: ${(props) => props.theme.colors.grey5};
@@ -213,6 +215,10 @@ const TableContainer = styled.table`
       .drag-icon {
         visibility: visible;
       }
+
+      .arrow-dropdown {
+        visibility: visible;
+      }
     }
 
     .drag-container {