@eturnity/eturnity_reusable_components 1.0.81 → 1.0.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.81",
+  "version": "1.0.85",
   "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

@@ -241,6 +241,10 @@ const TableContainer = styled.table`
         visibility: visible;
       }
 
+      .drag-wrapper {
+        background-color: ${(props) => props.theme.colors.grey5};
+      }
+
       .arrow-dropdown {
         visibility: visible;
       }
@@ -248,8 +252,18 @@ const TableContainer = styled.table`
 
     .drag-container {
       display: table-cell;
-      width: 12px;
-      vertical-align: middle;
+      width: 20px;
+      min-width: 20px;
+      height: 40px;
+    }
+
+    .drag-wrapper {
+      width: 16px;
+      height: 36px;
+      display: grid;
+      align-items: center;
+      justify-items: center;
+      border-radius: 4px;
     }
 
     .drag-icon {
@@ -298,6 +312,10 @@ const TableContainer = styled.table`
     font-size: 13px;
     padding: 5px 10px;
     background: #fff !important;
+
+    &:focus {
+      background: ${(props) => props.theme.colors.grey5} + " !important";
+    }
   }
 
   .open-container {