@eturnity/eturnity_reusable_components 1.1.13 → 1.1.16

package/package.json

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

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

@@ -11,7 +11,7 @@
       <input-checkbox
         type="checkbox"
         :checked="isChecked"
-        @change="onChangeHandler($event.target.checked)"
+        @change="onChangeHandler(!isChecked)"
       />
       <span class="checkmark"></span>
     </container>

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

@@ -1,6 +1,6 @@
 <template>
   <container>
-    <input-wrapper :alignItems="alignItems">
+    <input-wrapper :alignItems="alignItems" :hasLabel="label && label.length">
       <label-wrapper v-if="label">
         <input-label>{{ label }}</input-label>
         <info-text
@@ -83,14 +83,18 @@ const InputContainer = styled("textarea", inputProps)`
   }
 `
 
-const inputAttrs = { alignItems: String }
+const inputAttrs = { alignItems: String, hasLabel: Boolean }
 const InputWrapper = styled("div", inputAttrs)`
   position: relative;
   display: grid;
   align-items: center;
   gap: 14px;
   grid-template-columns: ${(props) =>
-    props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
+    !props.hasLabel
+      ? "1fr"
+      : props.alignItems === "vertical"
+      ? "1fr"
+      : "auto 1fr"};
 `
 
 const ErrorMessage = styled.div`

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
     },