@eturnity/eturnity_reusable_components 1.0.34 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.34",
+  "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/threeDots/index.vue

@@ -6,10 +6,13 @@
       <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"
@@ -30,7 +33,7 @@
           {{ child.name }}
         </option-child>
       </children-container>
-      <options-container>
+      <options-container v-if="!isLoading">
         <option-item
           v-for="(item, index) in options"
           :key="item.value"
@@ -57,6 +60,7 @@
 // <three-dots
 //   :options="listOptions"
 //   @on-select="onSelect($event)"
+//   :isLoading="true"
 // />
 // options to pass:
 // listOptions: [
@@ -107,6 +111,7 @@
 //       ],
 
 import styled from "vue-styled-components"
+import Spinner from "../spinner"
 
 const PageContainer = styled.div`
   display: grid;
@@ -147,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;
@@ -215,6 +231,7 @@ const ChildrenContainer = styled("div", childAttrs)`
   background-color: #fff;
   margin-right: -1px;
   height: max-content;
+  max-height: 200px;
   overflow: auto;
 `
 
@@ -230,11 +247,17 @@ export default {
     OptionChild,
     ArrowLeft,
     DropdownContainer,
+    Spinner,
+    LoadingContainer,
   },
   props: {
     options: {
       required: true,
     },
+    isLoading: {
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {