@eturnity/eturnity_reusable_components 1.0.82 → 1.0.86

package/package.json

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

package/src/App.vue

@@ -12,22 +12,15 @@
         </thead>
         <tbody>
           <tr>
-            <td class="text">Body 2</td>
-            <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"
-              />
-            </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']"
+            /> -->
             <div class="icons-container">
               <three-dots :options="listOptions" :isLoading="false" />
             </div>
@@ -54,6 +47,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 TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -67,6 +61,7 @@ export default {
     MainTable,
     ThreeDots,
     Toggle,
+    // TableDropdown,
   },
   data() {
     return {
@@ -78,6 +73,7 @@ export default {
         number_max_allowed: 10,
         unit_short_name: "cm",
       },
+      dropdownOpen: false,
       isChecked: false,
       listOptions: [
         {
@@ -125,6 +121,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 +156,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/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};
         }
       }
 
@@ -255,10 +255,6 @@ const TableContainer = styled.table`
       width: 20px;
       min-width: 20px;
       height: 40px;
-      vertical-align: middle;
-      display: grid;
-      align-items: center;
-      justify-items: center;
     }
 
     .drag-wrapper {
@@ -315,7 +311,11 @@ const TableContainer = styled.table`
   input {
     font-size: 13px;
     padding: 5px 10px;
-    background: #fff !important;
+    background: #fff;
+
+    &:focus {
+      background: ${(props) => props.theme.colors.grey5};
+    }
   }
 
   .open-container {