@eturnity/eturnity_reusable_components 1.0.31 → 1.0.35

package/package.json

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

package/src/App.vue

@@ -18,7 +18,7 @@
             <td class="text">Body 3</td>
             <td class="text">Body 4</td>
             <div class="icons-container">
-              <three-dots :options="listOptions" />
+              <three-dots :options="listOptions" :isLoading="false" />
             </div>
           </tr>
         </tbody>

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

@@ -87,7 +87,7 @@ const Container = styled("label", containerAttrs)`
     &:after {
       content: "";
       position: absolute;
-      display: none;
+      display: ${(props) => (props.isChecked ? "block" : "none")};
     }
   }
 
@@ -124,10 +124,6 @@ const InputCheckbox = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
-
-  &:checked ~ .checkmark:after {
-    display: block;
-  }
 `
 
 export default {

package/src/components/threeDots/index.vue

@@ -6,23 +6,26 @@
       <dot-item />
     </button-container>
     <dropdown-container v-if="isOpen">
+      <loading-container v-if="isLoading">
+        <spinner />
+      </loading-container>
       <children-container
         class="child"
         :isOpen="hoverItem !== null"
-        v-if="hoverItem !== null"
+        v-if="hoverItem !== null && !isLoading"
       >
         <option-child
           v-for="child in childOpen"
           :key="child.value"
           @click.stop="
             onSelect({
-              value: child.value,
+              item: child,
               hasChildren: hasChildren(child),
             })
           "
           @keyup.enter.stop="
             onSelect({
-              value: child.value,
+              item: child,
               hasChildren: hasChildren(child),
             })
           "
@@ -30,16 +33,14 @@
           {{ child.name }}
         </option-child>
       </children-container>
-      <options-container>
+      <options-container v-if="!isLoading">
         <option-item
           v-for="(item, index) in options"
           :key="item.value"
           tabindex="0"
-          @click="
-            onSelect({ value: item.value, hasChildren: hasChildren(item) })
-          "
+          @click="onSelect({ item: item, hasChildren: hasChildren(item) })"
           @keyup.enter="
-            onSelect({ value: item.value, hasChildren: hasChildren(item) })
+            onSelect({ item: item, hasChildren: hasChildren(item) })
           "
           @mouseover="onItemHover({ index, item })"
         >
@@ -59,6 +60,7 @@
 // <three-dots
 //   :options="listOptions"
 //   @on-select="onSelect($event)"
+//   :isLoading="true"
 // />
 // options to pass:
 // listOptions: [
@@ -109,6 +111,7 @@
 //       ],
 
 import styled from "vue-styled-components"
+import Spinner from "../spinner"
 
 const PageContainer = styled.div`
   display: grid;
@@ -149,6 +152,17 @@ const DropdownContainer = styled.div`
   grid-template-columns: auto auto;
 `
 
+const LoadingContainer = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  display: grid;
+  grid-template-columns: 1fr;
+  min-width: 200px;
+  height: 200px;
+  align-items: center;
+  justify-items: center;
+  background: #fff;
+`
+
 const OptionsContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
@@ -159,6 +173,7 @@ const OptionsContainer = styled.div`
   background-color: #fff;
   max-height: 220px;
   overflow: auto;
+  height: max-content;
 `
 
 const OptionItem = styled.div`
@@ -216,6 +231,7 @@ const ChildrenContainer = styled("div", childAttrs)`
   background-color: #fff;
   margin-right: -1px;
   height: max-content;
+  max-height: 200px;
   overflow: auto;
 `
 
@@ -231,11 +247,17 @@ export default {
     OptionChild,
     ArrowLeft,
     DropdownContainer,
+    Spinner,
+    LoadingContainer,
   },
   props: {
     options: {
       required: true,
     },
+    isLoading: {
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -262,11 +284,11 @@ export default {
       this.childOpen =
         item.children && item.children.length ? item.children : null
     },
-    onSelect({ value, hasChildren }) {
+    onSelect({ item, hasChildren }) {
       if (hasChildren) {
         return
       }
-      this.$emit("on-select", value)
+      this.$emit("on-select", item)
       this.isOpen = false
     },
     clickOutside(event) {