@eturnity/eturnity_reusable_components 1.0.27 → 1.0.31

package/package.json

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

package/src/App.vue

@@ -8,6 +8,7 @@
             <th>Column 2</th>
             <th>Column 3</th>
             <th>Column 4</th>
+            <div />
           </tr>
         </thead>
         <tbody>
@@ -16,15 +17,12 @@
             <td class="text">Body 2</td>
             <td class="text">Body 3</td>
             <td class="text">Body 4</td>
+            <div class="icons-container">
+              <three-dots :options="listOptions" />
+            </div>
           </tr>
         </tbody>
       </main-table>
-      <toggle
-        @on-toggle-change="isChecked = $event"
-        :isChecked="isChecked"
-        label="My Label Text"
-        size="small"
-      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -34,7 +32,7 @@ import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
-import Toggle from "@/components/inputs/toggle"
+import ThreeDots from "@/components/threeDots"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -46,7 +44,7 @@ export default {
     ThemeProvider,
     PageContainer,
     MainTable,
-    Toggle,
+    ThreeDots,
   },
   data() {
     return {
@@ -59,6 +57,52 @@ export default {
         unit_short_name: "cm",
       },
       isChecked: false,
+      listOptions: [
+        {
+          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",
+        },
+      ],
     }
   },
   methods: {

package/src/components/inputs/textAreaInput/index.vue

@@ -6,6 +6,7 @@
         :isError="isError"
         :rows="rowHeight"
         :value="value"
+        :disabled="isDisabled"
         @input="onChangeHandler"
       />
     </input-wrapper>
@@ -32,7 +33,7 @@ const Container = styled.div`
   margin-bottom: 20px;
 `
 
-const inputProps = { isError: Boolean }
+const inputProps = { isError: Boolean, disabled: Boolean }
 const InputContainer = styled("textarea", inputProps)`
   border: ${(props) =>
     props.isError
@@ -46,6 +47,7 @@ const InputContainer = styled("textarea", inputProps)`
   width: 100%;
   max-width: 100%;
   box-sizing: border-box; // to allow width of 100% with padding
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "inherit")};
 
   &::placeholder {
     color: ${(props) =>
@@ -96,6 +98,10 @@ export default {
     errorText: {
       required: false,
     },
+    isDisabled: {
+      required: false,
+      default: false,
+    },
   },
   methods: {
     onChangeHandler($event) {

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

@@ -133,6 +133,8 @@ const TableContainer = styled.table`
   }
 
   tr {
+    position: relative;
+
     &.disabled {
       cursor: not-allowed;
     }
@@ -154,7 +156,7 @@ const TableContainer = styled.table`
     }
 
     .icons-container {
-      width: 100%;
+      width: auto;
       display: table-cell;
       flex-wrap: nowrap;
       background-color: #fff;

package/src/components/threeDots/index.vue

@@ -5,17 +5,51 @@
       <dot-item />
       <dot-item />
     </button-container>
-    <options-container v-if="isOpen">
-      <option-item
-        v-for="item in options"
-        :key="item.value"
-        tabindex="0"
-        @click="onSelect(item.value)"
-        @keyup.enter="onSelect(item.value)"
+    <dropdown-container v-if="isOpen">
+      <children-container
+        class="child"
+        :isOpen="hoverItem !== null"
+        v-if="hoverItem !== null"
       >
-        {{ item.name }}
-      </option-item>
-    </options-container>
+        <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),
+            })
+          "
+        >
+          {{ 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>
 
@@ -28,28 +62,55 @@
 // />
 // 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"
 
 const PageContainer = styled.div`
-  position: relative;
   display: grid;
   align-items: center;
 `
@@ -80,20 +141,22 @@ const DotItem = styled.div`
   border-radius: 50%;
 `
 
-const OptionsContainer = styled.div`
+const DropdownContainer = styled.div`
   z-index: 99;
-  position: fixed;
-  right: 60px;
-  border: 1px solid
-    ${(props) =>
-      props.buttonColor ? props.buttonColor : props.theme.colors.grey3};
+  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;
   min-width: 200px;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
-  margin-top: 8px;
   max-height: 220px;
   overflow: auto;
 `
@@ -102,6 +165,22 @@ const OptionItem = styled.div`
   padding: 12px;
   cursor: pointer;
   font-size: 13px;
+  position: relative;
+
+  &:hover {
+    background-color: #ebeef4;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: #ebeef4;
+  }
+`
+const OptionChild = styled.div`
+  padding: 12px;
+  cursor: pointer;
+  font-size: 13px;
+  position: relative;
 
   &:hover {
     background-color: #ebeef4;
@@ -113,6 +192,33 @@ const OptionItem = 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 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-right: -1px;
+  height: max-content;
+  overflow: auto;
+`
+
 export default {
   name: "three-dots",
   components: {
@@ -121,6 +227,10 @@ export default {
     DotItem,
     OptionsContainer,
     OptionItem,
+    ChildrenContainer,
+    OptionChild,
+    ArrowLeft,
+    DropdownContainer,
   },
   props: {
     options: {
@@ -130,6 +240,8 @@ export default {
   data() {
     return {
       isOpen: false,
+      hoverItem: null,
+      childOpen: null,
     }
   },
   methods: {
@@ -142,7 +254,18 @@ export default {
         document.removeEventListener("click", this.clickOutside)
       }
     },
-    onSelect(value) {
+    hasChildren(item) {
+      return !!item.children && !!item.children.length
+    },
+    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) {
+        return
+      }
       this.$emit("on-select", value)
       this.isOpen = false
     },