@eturnity/eturnity_reusable_components 6.33.0 → 6.33.1-EPDM-5205

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.33.0",
+  "version": "6.33.1-EPDM-5205",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/flatten.svg

@@ -1,12 +1,12 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.98828" y="6" width="3" height="1.6" transform="rotate(90 2.98828 6)" fill="white"/>
-<path d="M2.21317 10.8279L4.35603 8.32892H0.0703125L2.21317 10.8279Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.18945 6C2.74174 6 3.18945 5.55228 3.18945 5C3.18945 4.44772 2.74174 4 2.18945 4C1.63717 4 1.18945 4.44772 1.18945 5C1.18945 5.55228 1.63717 6 2.18945 6ZM2.18945 7C3.29402 7 4.18945 6.10457 4.18945 5C4.18945 3.89543 3.29402 3 2.18945 3C1.08488 3 0.189453 3.89543 0.189453 5C0.189453 6.10457 1.08488 7 2.18945 7Z" fill="white"/>
-<rect x="7.77344" y="3" width="6" height="1.6" transform="rotate(90 7.77344 3)" fill="white"/>
-<path d="M6.99833 10.8279L9.14118 8.32892H4.85547L6.99833 10.8279Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97461 3C7.52689 3 7.97461 2.55228 7.97461 2C7.97461 1.44772 7.52689 1 6.97461 1C6.42232 1 5.97461 1.44772 5.97461 2C5.97461 2.55228 6.42232 3 6.97461 3ZM6.97461 4C8.07918 4 8.97461 3.10457 8.97461 2C8.97461 0.895431 8.07918 0 6.97461 0C5.87004 0 4.97461 0.895431 4.97461 2C4.97461 3.10457 5.87004 4 6.97461 4Z" fill="white"/>
-<rect x="12.5605" y="5" width="4" height="1.6" transform="rotate(90 12.5605 5)" fill="white"/>
-<path d="M11.7854 10.8279L13.9283 8.32892H9.64258L11.7854 10.8279Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7617 5C12.314 5 12.7617 4.55228 12.7617 4C12.7617 3.44772 12.314 3 11.7617 3C11.2094 3 10.7617 3.44772 10.7617 4C10.7617 4.55228 11.2094 5 11.7617 5ZM11.7617 6C12.8663 6 13.7617 5.10457 13.7617 4C13.7617 2.89543 12.8663 2 11.7617 2C10.6571 2 9.76172 2.89543 9.76172 4C9.76172 5.10457 10.6571 6 11.7617 6Z" fill="white"/>
-<rect x="14" y="14" width="14" height="1.6" transform="rotate(-180 14 14)" fill="white"/>
-</svg>
+  <path transform="rotate(90 2.98828 6)" fill="white" d="M2.9883 6h3v1.6H2.9883Z" />
+  <path d="M2.21317 10.8279L4.35603 8.32892H0.0703125L2.21317 10.8279Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.18945 6C2.74174 6 3.18945 5.55228 3.18945 5C3.18945 4.44772 2.74174 4 2.18945 4C1.63717 4 1.18945 4.44772 1.18945 5C1.18945 5.55228 1.63717 6 2.18945 6ZM2.18945 7C3.29402 7 4.18945 6.10457 4.18945 5C4.18945 3.89543 3.29402 3 2.18945 3C1.08488 3 0.189453 3.89543 0.189453 5C0.189453 6.10457 1.08488 7 2.18945 7Z" fill="white" />
+  <path transform="rotate(90 7.77344 3)" fill="white" d="M7.7734 3h6v1.6H7.7734Z" />
+  <path d="M6.99833 10.8279L9.14118 8.32892H4.85547L6.99833 10.8279Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.97461 3C7.52689 3 7.97461 2.55228 7.97461 2C7.97461 1.44772 7.52689 1 6.97461 1C6.42232 1 5.97461 1.44772 5.97461 2C5.97461 2.55228 6.42232 3 6.97461 3ZM6.97461 4C8.07918 4 8.97461 3.10457 8.97461 2C8.97461 0.895431 8.07918 0 6.97461 0C5.87004 0 4.97461 0.895431 4.97461 2C4.97461 3.10457 5.87004 4 6.97461 4Z" fill="white" />
+  <path transform="rotate(90 12.5605 5)" fill="white" d="M12.5605 5h4v1.6H12.5605Z" />
+  <path d="M11.7854 10.8279L13.9283 8.32892H9.64258L11.7854 10.8279Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7617 5C12.314 5 12.7617 4.55228 12.7617 4C12.7617 3.44772 12.314 3 11.7617 3C11.2094 3 10.7617 3.44772 10.7617 4C10.7617 4.55228 11.2094 5 11.7617 5ZM11.7617 6C12.8663 6 13.7617 5.10457 13.7617 4C13.7617 2.89543 12.8663 2 11.7617 2C10.6571 2 9.76172 2.89543 9.76172 4C9.76172 5.10457 10.6571 6 11.7617 6Z" fill="white" />
+  <path transform="rotate(-180 14 14)" fill="white" d="M14 14h14v1.6H14Z" />
+</svg>

package/src/components/tableDropdown/index.vue

@@ -104,12 +104,7 @@
             :src="require('../../assets/icons/collapse_arrow_icon.svg')"
           />
         </arrow-wrapper>
-        <options-container
-          v-if="isOpen"
-          :top="getItemLocation('top')"
-          :left="getItemLocation('left')"
-          ref="optionsContainer"
-        >
+        <options-container v-if="isOpen" ref="optionsContainer">
           <options-wrapper @click.prevent.stop>
             <search-container @click.prevent.stop>
               <search-input
@@ -288,8 +283,7 @@ const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.left + 'px'};
+  left: 20px;
   width: auto;
   max-height: 360px;
   min-height: 200px;
@@ -558,14 +552,6 @@ export default {
       this.inputText = value
       this.$emit('dropdown-search', value)
     },
-    getItemLocation(value) {
-      let ref = this.$refs.dropdownItem[0]
-      let location = ref.$el.getBoundingClientRect()[value]
-      if (value === 'top') {
-        location = location + window.scrollY + 40
-      }
-      return location
-    },
     clickOutside(event) {
       if (event.target === this.$el || this.$el.contains(event.target)) {
         return

package/src/components/tables/mainTable/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <page-container>
+  <page-container
+    :tableHeight="tableHeight"
+    :shouldSetCustomHeight="doesTableContainDraggables"
+  >
     <table-title v-if="titleText">
       {{ titleText }}
     </table-title>
-    <table-scroll>
+    <table-scroll
+      ref="tableRef"
+      :isPositionAbsolute="doesTableContainDraggables"
+    >
       <table-wrapper :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
@@ -26,7 +32,15 @@
 import styled from 'vue-styled-components'
 import Spinner from '../../spinner'
 
-const PageContainer = styled.div``
+const pageContainerProps = {
+  tableHeight: String,
+  shouldSetCustomHeight: Boolean
+}
+const PageContainer = styled('div', pageContainerProps)`
+  position: relative;
+  height: ${(props) =>
+    props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
+`
 
 const TableTitle = styled.div`
   margin-bottom: 16px;
@@ -35,15 +49,27 @@ const TableTitle = styled.div`
   text-transform: uppercase;
 `
 
-const TableScroll = styled.div`
+const tableScrollProps = {
+  isPositionAbsolute: Boolean
+}
+
+const TableScroll = styled('div', tableScrollProps)`
   max-width: 100%;
+  height: auto;
+  ${(props) =>
+    props.isPositionAbsolute &&
+    `
+    position: absolute;
+    left: -20px;
+  `}
 `
 
 const wrapperAttrs = { fullWidth: Boolean }
 const TableWrapper = styled('div', wrapperAttrs)`
   width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
   max-width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   ::-webkit-scrollbar {
     height: 5px; //height of the whole scrollbar area
@@ -67,7 +93,11 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const containerAttrs = { cellPaddings: String, tableCursor: String }
+const containerAttrs = {
+  cellPaddings: String,
+  tableCursor: String
+}
+
 const TableContainer = styled('table', containerAttrs)`
   width: 100%;
   border-collapse: collapse;
@@ -378,6 +408,39 @@ export default {
     tableCursor: {
       required: false
     }
+  },
+  data() {
+    return {
+      tableHeight: 'auto',
+      doesTableContainDraggables: false
+    }
+  },
+  mounted() {
+    this.observeTableHeight()
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  },
+  methods: {
+    observeTableHeight() {
+      if (!this.$refs.tableRef) return
+
+      const tableElement = this.$refs.tableRef.$el
+
+      this.resizeObserver = new ResizeObserver(() => {
+        const newTableHeight = this.titleText
+          ? tableElement.offsetHeight + 33
+          : tableElement.offsetHeight
+        this.tableHeight = `${newTableHeight}px`
+        this.doesTableContainDraggables = Boolean(
+          tableElement.querySelector('.drag-container')
+        )
+      })
+
+      this.resizeObserver.observe(tableElement)
+    }
   }
 }
 </script>

package/src/components/threeDots/index.vue

@@ -8,8 +8,6 @@
     <dropdown-container
       v-if="isOpen"
       @click.stop
-      :top="getItemLocation('top')"
-      :right="getItemLocation('right')"
       :containerWidth="childOpen ? 440 : 240"
       ref="dropdownContainer"
     >
@@ -130,6 +128,7 @@ const PageContainer = styled.div`
   justify-items: center;
   width: 30px;
   height: 30px;
+  position: relative;
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
@@ -158,12 +157,15 @@ const DotItem = styled.div`
   border-radius: 50%;
 `
 
-const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
+const dropdownAttrs = {
+  containerWidth: Number
+}
 const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.right - props.containerWidth + 'px'};
+  top: 0;
+  right: 27px;
+
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -299,14 +301,6 @@ 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
     },