@eturnity/eturnity_reusable_components 1.0.30 → 1.0.31

package/package.json

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

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

@@ -133,6 +133,8 @@ const TableContainer = styled.table`
   }
 
   tr {
+    position: relative;
+
     &.disabled {
       cursor: not-allowed;
     }

package/src/components/threeDots/index.vue

@@ -5,40 +5,51 @@
       <dot-item />
       <dot-item />
     </button-container>
-    <options-container v-if="isOpen">
-      <option-item
-        v-for="(item, index) in options"
-        :key="item.value"
-        tabindex="0"
-        @click="onSelect({ value: item.value, hasChildren: hasChildren(item) })"
-        @keyup.enter="
-          onSelect({ value: item.value, hasChildren: hasChildren(item) })
-        "
-        @mouseover="onItemHover(index)"
+    <dropdown-container v-if="isOpen">
+      <children-container
+        class="child"
+        :isOpen="hoverItem !== null"
+        v-if="hoverItem !== null"
       >
-        <arrow-left :hasChildren="hasChildren(item)" />
-        <span>
-          {{ item.name }}
-        </span>
-        <children-container
-          class="child"
-          v-if="hasChildren(item) && hoverItem === index"
+        <option-child
+          v-for="child in childOpen"
+          :key="child.value"
+          @click.stop="
+            onSelect({
+              value: child.value,
+              hasChildren: hasChildren(child),
+            })
+          "
+          @keyup.enter.stop="
+            onSelect({
+              value: child.value,
+              hasChildren: hasChildren(child),
+            })
+          "
         >
-          <option-child
-            v-for="child in item.children"
-            :key="child.value"
-            @click.stop="
-              onSelect({ value: child.value, hasChildren: hasChildren(child) })
-            "
-            @keyup.enter.stop="
-              onSelect({ value: child.value, hasChildren: hasChildren(child) })
-            "
-          >
-            {{ child.name }}
-          </option-child>
-        </children-container>
-      </option-item>
-    </options-container>
+          {{ child.name }}
+        </option-child>
+      </children-container>
+      <options-container>
+        <option-item
+          v-for="(item, index) in options"
+          :key="item.value"
+          tabindex="0"
+          @click="
+            onSelect({ value: item.value, hasChildren: hasChildren(item) })
+          "
+          @keyup.enter="
+            onSelect({ value: item.value, hasChildren: hasChildren(item) })
+          "
+          @mouseover="onItemHover({ index, item })"
+        >
+          <arrow-left :hasChildren="hasChildren(item)" />
+          <span>
+            {{ item.name }}
+          </span>
+        </option-item>
+      </options-container>
+    </dropdown-container>
   </page-container>
 </template>
 
@@ -100,7 +111,6 @@
 import styled from "vue-styled-components"
 
 const PageContainer = styled.div`
-  position: relative;
   display: grid;
   align-items: center;
 `
@@ -131,10 +141,15 @@ const DotItem = styled.div`
   border-radius: 50%;
 `
 
-const OptionsContainer = styled.div`
+const DropdownContainer = styled.div`
   z-index: 99;
-  position: fixed;
-  right: 60px;
+  position: absolute;
+  right: 20px;
+  display: grid;
+  grid-template-columns: auto auto;
+`
+
+const OptionsContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
@@ -142,7 +157,6 @@ const OptionsContainer = styled.div`
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
-  margin-top: 8px;
   max-height: 220px;
   overflow: auto;
 `
@@ -190,19 +204,18 @@ const ArrowLeft = styled("span", arrowAttrs)`
   visibility: ${(props) => (props.hasChildren ? "visible" : "hidden")};
 `
 
-const ChildrenContainer = styled.div`
-  position: fixed;
-  right: 262px;
-  border: 1px solid ${(props) => props.theme.colors.grey3};
+const childAttrs = { isOpen: Boolean }
+const ChildrenContainer = styled("div", childAttrs)`
+  border: ${(props) =>
+    props.isOpen ? "1px solid" + props.theme.colors.grey3 : "none"};
   display: grid;
   grid-template-columns: 1fr;
   min-width: 200px;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
-  margin-top: -28px;
   margin-right: -1px;
-  max-height: 220px;
+  height: max-content;
   overflow: auto;
 `
 
@@ -217,6 +230,7 @@ export default {
     ChildrenContainer,
     OptionChild,
     ArrowLeft,
+    DropdownContainer,
   },
   props: {
     options: {
@@ -227,6 +241,7 @@ export default {
     return {
       isOpen: false,
       hoverItem: null,
+      childOpen: null,
     }
   },
   methods: {
@@ -242,8 +257,10 @@ export default {
     hasChildren(item) {
       return !!item.children && !!item.children.length
     },
-    onItemHover(index) {
-      this.hoverItem = index
+    onItemHover({ index, item }) {
+      this.hoverItem = item.children && item.children.length ? index : null
+      this.childOpen =
+        item.children && item.children.length ? item.children : null
     },
     onSelect({ value, hasChildren }) {
       if (hasChildren) {