@eturnity/eturnity_reusable_components 1.1.15 → 1.1.18

package/package.json

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

package/src/assets/icons/plus_button.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
+<path d="M10 0H12V22H10V0Z" fill="white"/>
+</svg>

package/src/components/addNewButton/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <page-container :shouldPosition="shouldPosition">
+    <button-container>
+      <plus-button :src="require('../../assets/icons/plus_button.svg')" />
+    </button-container>
+  </page-container>
+</template>
+
+<script>
+// import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+import styled from "vue-styled-components"
+
+const pageAttrs = { shouldPosition: Boolean }
+const PageContainer = styled("div", pageAttrs)`
+  position: ${(props) => (props.shouldPosition ? "fixed" : "unset")};
+  bottom: 60px;
+  right: 60px;
+`
+
+const ButtonContainer = styled.div`
+  height: 60px;
+  width: 60px;
+  background-color: ${(props) => props.theme.colors.green};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 100%;
+  cursor: pointer;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+
+  &:hover {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+      ${(props) => props.theme.colors.green};
+  }
+
+  &:active,
+  &:focus {
+    background: ${(props) => props.theme.colors.green};
+  }
+`
+
+const PlusButton = styled.img``
+
+export default {
+  name: "add-new-button",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    PlusButton,
+  },
+  props: {
+    shouldPosition: {
+      required: false,
+      default: true,
+    },
+  },
+}
+</script>

package/src/components/deleteIcon/index.vue

@@ -1,7 +1,11 @@
 <template>
-  <wrapper @mouseover="isHovered = true" @mouseleave="isHovered = false">
+  <wrapper
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+    :isDisabled="isDisabled"
+  >
     <icon-image
-      v-if="isHovered"
+      v-if="isHovered && !isDisabled"
       :src="require('../../assets/icons/delete_icon.svg')"
     />
     <icon-image
@@ -13,13 +17,14 @@
 
 <script>
 // To use:
-// <delete-icon />
+// <delete-icon color="gray" @click.native="onDeleteItem(item)" :isDisabled="true" />
 import styled from "vue-styled-components"
 
-const Wrapper = styled.div`
+const wrapperAttrs = { isDisabled: Boolean }
+const Wrapper = styled("div", wrapperAttrs)`
   width: 30px;
   height: 30px;
-  cursor: pointer;
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
 `
 
 const IconImage = styled.img`
@@ -35,6 +40,12 @@ export default {
     Wrapper,
     IconImage,
   },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false,
+    },
+  },
   data() {
     return {
       isHovered: false,

package/src/components/threeDots/index.vue

@@ -1,11 +1,17 @@
 <template>
   <page-container @click="toggleButton()">
-    <button-container>
+    <button-container ref="dropdownItem">
       <dot-item />
       <dot-item />
       <dot-item />
     </button-container>
-    <dropdown-container v-if="isOpen" @click.stop>
+    <dropdown-container
+      v-if="isOpen"
+      @click.stop
+      :top="getItemLocation('top')"
+      :right="getItemLocation('right')"
+      :containerWidth="childOpen ? 420 : 220"
+    >
       <loading-container v-if="isLoading">
         <spinner />
       </loading-container>
@@ -148,12 +154,13 @@ const DotItem = styled.div`
   border-radius: 50%;
 `
 
-const DropdownContainer = styled.div`
+const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
+const DropdownContainer = styled("div", dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  margin-top: 50px;
+  top: ${(props) => props.top + "px"};
+  left: ${(props) => props.right - props.containerWidth + "px"};
   position: absolute;
-  right: 20px;
   display: grid;
   grid-template-columns: auto auto;
 `
@@ -283,6 +290,14 @@ export default {
         document.removeEventListener("click", this.clickOutside)
       }
     },
+    getItemLocation(value) {
+      let ref = this.$refs.dropdownItem
+      let location = ref.$el.getBoundingClientRect()[value]
+      if (value === "top") {
+        location = location + window.scrollY
+      }
+      return location
+    },
     hasChildren(item) {
       return !!item.children && !!item.children.length
     },