@eturnity/eturnity_reusable_components 1.0.32 → 1.0.36

package/package.json

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

package/src/App.vue

@@ -18,11 +18,17 @@
             <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>
       </main-table>
+      <checkbox
+        :isChecked="false"
+        @on-event-handler="onInputChange($event)"
+        size="small"
+        :isDisabled="false"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -33,6 +39,7 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
+import Checkbox from "@/components/inputs/checkbox"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -45,6 +52,7 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
+    Checkbox,
   },
   data() {
     return {

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

@@ -6,6 +6,7 @@
       :hasLabel="!!label.length"
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
+      :isDisabled="isDisabled"
       >{{ label }}
       <input-checkbox
         type="checkbox"
@@ -40,6 +41,7 @@ const containerAttrs = {
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
+  isDisabled: Boolean,
 }
 const Container = styled("label", containerAttrs)`
   display: grid;
@@ -49,7 +51,7 @@ const Container = styled("label", containerAttrs)`
   position: relative;
   padding-left: 42px;
   margin-bottom: 12px;
-  cursor: pointer;
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 16px;
   user-select: none;
 
@@ -70,7 +72,9 @@ const Container = styled("label", containerAttrs)`
         ? "16px"
         : "25px"};
     background-color: ${(props) =>
-      !props.isChecked
+      props.isDisabled
+        ? props.theme.colors.lightGray
+        : !props.isChecked
         ? "#fff"
         : props.backgroundColor
         ? props.backgroundColor
@@ -87,7 +91,7 @@ const Container = styled("label", containerAttrs)`
     &:after {
       content: "";
       position: absolute;
-      display: none;
+      display: ${(props) => (props.isChecked ? "block" : "none")};
     }
   }
 
@@ -124,10 +128,6 @@ const InputCheckbox = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
-
-  &:checked ~ .checkmark:after {
-    display: block;
-  }
 `
 
 export default {
@@ -156,9 +156,16 @@ export default {
     backgroundColor: {
       required: false,
     },
+    isDisabled: {
+      required: false,
+      default: false,
+    },
   },
   methods: {
     onChangeHandler(value) {
+      if (this.isDisabled) {
+        return
+      }
       this.$emit("on-event-handler", value)
     },
   },

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;
@@ -217,6 +231,7 @@ const ChildrenContainer = styled("div", childAttrs)`
   background-color: #fff;
   margin-right: -1px;
   height: max-content;
+  max-height: 200px;
   overflow: auto;
 `
 
@@ -232,11 +247,17 @@ export default {
     OptionChild,
     ArrowLeft,
     DropdownContainer,
+    Spinner,
+    LoadingContainer,
   },
   props: {
     options: {
       required: true,
     },
+    isLoading: {
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -263,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) {