@eturnity/eturnity_reusable_components 1.1.7 → 1.1.10

package/package.json

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

package/src/App.vue

@@ -21,9 +21,7 @@
               :optionItems="itemOptions"
               :optionsDisplay="['display_name', 'company_item_number', 'model']"
             /> -->
-            <td>
-              <search-input />
-            </td>
+            <td>Test</td>
             <div class="icons-container">
               <three-dots :options="listOptions" :isLoading="false" />
             </div>
@@ -50,7 +48,6 @@ 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`
@@ -65,7 +62,6 @@ export default {
     MainTable,
     ThreeDots,
     Toggle,
-    SearchInput,
     // TableDropdown,
   },
   data() {
@@ -84,20 +80,7 @@ export default {
         {
           name: "Option 1",
           value: "option_1",
-          children: [
-            {
-              name: "Option 1 Child",
-              value: "option_1_child",
-            },
-            {
-              name: "Option 2 Child",
-              value: "option_2_child",
-            },
-            {
-              name: "Option 3 Child",
-              value: "option_3_child",
-            },
-          ],
+          disabled: true,
         },
         {
           name: "Option 2",
@@ -106,20 +89,6 @@ export default {
         {
           name: "Option 3",
           value: "option_3",
-          children: [
-            {
-              name: "Option 3 Child",
-              value: "option_3_child",
-            },
-            {
-              name: "Option 4 Child",
-              value: "option_4_child",
-            },
-            {
-              name: "Option 5 Child",
-              value: "option_5_child",
-            },
-          ],
         },
         {
           name: "Option 4",

package/src/components/tableDropdown/index.vue

@@ -1,6 +1,7 @@
 <template>
   <dropdown-row
     :colspan="colSpan"
+    :isOpen="isOpen"
     @click="toggleOpen"
     ref="dropdownItem"
     :disabled="disabled"
@@ -143,9 +144,13 @@ import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinn
 import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 
-const rowAttrs = { disabled: Boolean }
+const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled("td", rowAttrs)`
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+
+  input {
+    cursor: ${(props) => (!props.isOpen ? "pointer !important" : "inherit")};
+  }
 `
 
 const ComponentItem = styled.div`
@@ -262,14 +267,14 @@ const TemplateLink = styled.div`
 
 const InputContainer = styled.div`
   .inputField input {
-    padding: 0 10px;
+    padding: 0;
 
     &:focus {
-      padding: 5px 10px;
+      padding: 5px 0px;
     }
 
     &:hover {
-      padding: 0 10px !important;
+      padding: 0px 0 !important;
     }
   }
 `

package/src/components/threeDots/index.vue

@@ -43,6 +43,7 @@
             onSelect({ item: item, hasChildren: hasChildren(item) })
           "
           @mouseover="onItemHover({ index, item })"
+          :isDisabled="item.disabled"
         >
           <arrow-left :hasChildren="hasChildren(item)" />
           <span>
@@ -117,25 +118,27 @@ const PageContainer = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
-  width: 30px;
-  height: 30px;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
-  }
 `
 
 const ButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: 5px;
   cursor: pointer;
+  width: 20px;
+  height: 20px;
 
   div {
     // This is the dot color
     background-color: #263238;
   }
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
+  }
 `
 
 const DotItem = styled.div`
@@ -179,9 +182,10 @@ const OptionsContainer = styled.div`
   height: max-content;
 `
 
-const OptionItem = styled.div`
+const optionAttrs = { isDisabled: Boolean }
+const OptionItem = styled("div", optionAttrs)`
   padding: 12px;
-  cursor: pointer;
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 13px;
   position: relative;
 
@@ -288,7 +292,7 @@ export default {
         item.children && item.children.length ? item.children : null
     },
     onSelect({ item, hasChildren }) {
-      if (hasChildren) {
+      if (hasChildren || item.disabled) {
         return
       }
       this.$emit("on-select", item)