@eturnity/eturnity_reusable_components 1.1.16 → 1.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.16",
+  "version": "1.1.19",
   "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: 30px;
+  right: 30px;
+`
+
+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/modals/modal/index.vue

@@ -15,7 +15,7 @@
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true">
 //   <div>Data....</div>
 // </modal>