@eturnity/eturnity_reusable_components 1.0.29 → 1.0.30

package/package.json

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

package/src/App.vue

@@ -83,6 +83,20 @@ 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/threeDots/index.vue

@@ -10,16 +10,30 @@
         v-for="(item, index) in options"
         :key="item.value"
         tabindex="0"
-        @click="onSelect(item.value)"
-        @keyup.enter="onSelect(item.value)"
+        @click="onSelect({ value: item.value, hasChildren: hasChildren(item) })"
+        @keyup.enter="
+          onSelect({ value: item.value, hasChildren: hasChildren(item) })
+        "
         @mouseover="onItemHover(index)"
       >
-        {{ item.name }}
+        <arrow-left :hasChildren="hasChildren(item)" />
+        <span>
+          {{ item.name }}
+        </span>
         <children-container
           class="child"
-          v-if="item.children && item.children.length && hoverItem === index"
+          v-if="hasChildren(item) && hoverItem === index"
         >
-          <option-child v-for="child in item.children" :key="child.value">
+          <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>
@@ -37,23 +51,51 @@
 // />
 // options to pass:
 // listOptions: [
-//   {
-//     name: "Option 1",
-//     value: "option_1",
-//   },
-//   {
-//     name: "Option 2",
-//     value: "option_2",
-//   },
-//   {
-//     name: "Option 3",
-//     value: "option_3",
-//   },
-//   {
-//     name: "Option 4",
-//     value: "option_4",
-//   }
-// ],
+//         {
+//           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",
+//             },
+//           ],
+//         },
+//         {
+//           name: "Option 2",
+//           value: "option_2",
+//         },
+//         {
+//           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",
+//           value: "option_4",
+//         },
+//       ],
 
 import styled from "vue-styled-components"
 
@@ -136,18 +178,30 @@ const OptionChild = styled.div`
   }
 `
 
+const arrowAttrs = { hasChildren: Boolean }
+const ArrowLeft = styled("span", arrowAttrs)`
+  border: solid #9f9f9f;
+  border-width: 0 1.5px 1.5px 0;
+  display: inline-block;
+  padding: 3px;
+  margin-bottom: 1px;
+  transform: rotate(135deg);
+  margin-right: 3px;
+  visibility: ${(props) => (props.hasChildren ? "visible" : "hidden")};
+`
+
 const ChildrenContainer = styled.div`
   position: fixed;
   right: 262px;
   border: 1px solid ${(props) => props.theme.colors.grey3};
-  border-right: none;
   display: grid;
   grid-template-columns: 1fr;
   min-width: 200px;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
-  margin-top: 8px;
+  margin-top: -28px;
+  margin-right: -1px;
   max-height: 220px;
   overflow: auto;
 `
@@ -162,6 +216,7 @@ export default {
     OptionItem,
     ChildrenContainer,
     OptionChild,
+    ArrowLeft,
   },
   props: {
     options: {
@@ -184,11 +239,16 @@ export default {
         document.removeEventListener("click", this.clickOutside)
       }
     },
+    hasChildren(item) {
+      return !!item.children && !!item.children.length
+    },
     onItemHover(index) {
-      debugger // eslint-disable-line
       this.hoverItem = index
     },
-    onSelect(value) {
+    onSelect({ value, hasChildren }) {
+      if (hasChildren) {
+        return
+      }
       this.$emit("on-select", value)
       this.isOpen = false
     },