@eturnity/eturnity_reusable_components 1.0.84 → 1.0.88

package/package.json

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

package/src/App.vue

@@ -12,21 +12,17 @@
         </thead>
         <tbody>
           <tr>
-            <td class="text">Body 2</td>
+            <!-- <table-dropdown
+              :colSpan="3"
+              :tableItems="getDropdownValues()"
+              @toggle-dropdown-open="toggleDropdownOpen()"
+              @item-selected="onItemSelected({ item: $event, index })"
+              :isOpen="isDropdownOpen()"
+              :optionItems="itemOptions"
+              :optionsDisplay="['display_name', 'company_item_number', 'model']"
+            /> -->
             <td>
-              <toggle
-                @on-toggle-change="onInputChange($event)"
-                :isChecked="isChecked"
-                labelAlign="right"
-              />
-            </td>
-            <td>
-              <toggle
-                @on-toggle-change="onInputChange($event)"
-                :isChecked="isChecked"
-                labelAlign="right"
-                :disabled="true"
-              />
+              <search-input />
             </td>
             <div class="icons-container">
               <three-dots :options="listOptions" :isLoading="false" />
@@ -54,6 +50,8 @@ 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`
   padding: 40px;
@@ -67,6 +65,8 @@ export default {
     MainTable,
     ThreeDots,
     Toggle,
+    SearchInput,
+    // TableDropdown,
   },
   data() {
     return {
@@ -78,6 +78,7 @@ export default {
         number_max_allowed: 10,
         unit_short_name: "cm",
       },
+      dropdownOpen: false,
       isChecked: false,
       listOptions: [
         {
@@ -125,6 +126,32 @@ export default {
           value: "option_4",
         },
       ],
+      itemOptions: [
+        {
+          display_name: "Test 1",
+          company_item_number: "123",
+          model: "BTB-2145 Long Text Long Text Long Text Long Text Long Text",
+          id: 1,
+        },
+        {
+          display_name: "Test 2",
+          company_item_number: "1234",
+          model: "BTB-123",
+          id: 2,
+        },
+        {
+          display_name: "Test 3",
+          company_item_number: "12345",
+          model: "BTB-543",
+          id: 3,
+        },
+        {
+          display_name: "Test 4",
+          company_item_number: "123456",
+          model: "BTB-4930",
+          id: 4,
+        },
+      ],
     }
   },
   methods: {
@@ -134,6 +161,47 @@ export default {
     onInputChange(event) {
       this.isChecked = event
     },
+    isDropdownOpen() {
+      return this.dropdownOpen
+    },
+    toggleDropdownOpen() {
+      this.dropdownOpen = !this.dropdownOpen
+    },
+    getDropdownValues() {
+      let items = []
+      items = [
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: "display_name",
+          }),
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: "company_item_number",
+          }),
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: "model",
+          }),
+        },
+      ]
+      return items
+    },
+    getComponentInfo({ row, value }) {
+      let item
+      if (row.selectedValue && row.selectedValue[value]) {
+        item = row.selectedValue[value]
+      } else if (row[value]) {
+        item = row[value]
+      } else {
+        item = "-"
+      }
+      return item
+    },
   },
 }
 </script>

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/tableDropdown/index.vue

@@ -356,10 +356,5 @@ export default {
       }
     },
   },
-  mounted() {
-    console.log("optionsDisplay", this.optionsDisplay)
-    console.log("optionItems", this.optionItems)
-    console.log("tableItems", this.tableItems)
-  },
 }
 </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};
         }
       }