@eturnity/eturnity_reusable_components 6.42.2-EPDM-6921.0 → 6.42.2-qa-16-10.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.42.2-EPDM-6921.0",
+  "version": "6.42.2-qa-16-10.23.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,109 +1,107 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
+      <br />
 
-      <br/>
-      <input-number
-          :value="value"
-          :minNumber="0"
-          unitName="mm"
-          :numberPrecision="0"
-          backgroundColor="transparent"
-          borderColor="eturnityGrey"
-          inputHeight="34px"
-          inputWidth="420px"
-          textAlign="left"
-          :isInteractive="true"
-          :interactionStep="1"
-          @on-input="value = $event"
-          @input-change="changeHandler"
-          @input-focus="focusHandler"
-          @input-blur="blurHandler"
-      >
-        <template v-slot:label>
-          <div>Interactive Label</div>
-        </template>
-      </input-number>
-
-      <dropdown-component openingMode="hover" gap="30px">
-        <template #trigger><i>Click Me</i></template>
-        <template #dropdown>
-          <div>
-            <a href="">test1</a>
-            <button href="">test2</button>
-            <br>
-            <p>Text</p>
-          </div>
-        </template>
-      </dropdown-component>
-
-      <videoThumbnail
-          src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-          playIconColor="red"
-          playIconSize="20px"
-          width="400px"
-          height="600px"
-      />
+     {{ alignItems }}
+          <input-number
+            :value="value"
+            :minNumber="0"
+            unitName="mm"
+            :numberPrecision="0"
+            backgroundColor="transparent"
+            borderColor="eturnityGrey"
+            inputHeight="34px"
+            inputWidth="420px"
+            textAlign="left"
+            :isInteractive="true"
+            :interactionStep="1"
+            @on-input="value = $event"
+            @input-change="changeHandler"
+            @input-focus="focusHandler"
+            @input-blur="blurHandler"
+          >
+            <template v-slot:label>
+              <div>Interactive Label</div>
+            </template>
+          </input-number>
+         
+          <dropdown-component openingMode="hover" gap="30px">
+            <template #trigger><i>Click Me</i></template>
+            <template #dropdown>
+              <div>
+              <a href="">test1</a>
+              <button href="">test2</button><br>
+              <p>Text</p>
+              </div>
+            </template>
+          </dropdown-component>
+        
+          <videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080" 
+            playIconColor="red"
+            playIconSize="20px"
+            width="400px"
+            height="600px"
+            />
 
-      <SwitchField
-          @on-switch-change="onInputChange($event)"
-          :options="[
+          <SwitchField
+            @on-switch-change="onInputChange($event)"
+            :options="[
               { value: 0, content: 'zero' },
               { value: 1, content: 'one' },
               { value: 2, content: 'two' }
             ]"
-          :value="value"
-          label="label"
-          toggleColor="red"
-          size="large"
-          backgroundColor="blue"
-          labelAlign="left"
-          fontColor="black"
-          :disabled="false"
-      />
-      <icon
-          name="opacity"
-          color="red"
-          hoveredColor="blue"
-          size="60px"
-          cursor="default"
-          isStriked="true"
-      />
-      <Select
-          :value="value"
-          selectWidth="100%"
-          optionWidth="50%"
-          label="that is a label"
-          alignItems="vertical"
-          colorMode="dark"
-          isSearchable="true"
-          @input-change="value = $event"
-          @search-change="searchValue = $event"
-      >
-        <template #selector="{ selectedValue }">
-          value selected: {{ selectedValue }}
-        </template>
-        <template #dropdown>
-          <Option
-              v-for="opt in filteredOptionList"
-              :key="opt.id"
-              :value="opt.val"
-          >{{ opt.lookFor }}
-          </Option
+            :value="value"
+            label="label"
+            toggleColor="red"
+            size="large"
+            backgroundColor="blue"
+            labelAlign="left"
+            fontColor="black"
+            :disabled="false"
+          />
+          <icon
+            name="opacity"
+            color="red"
+            hoveredColor="blue"
+            size="60px"
+            cursor="default"
+            isStriked = "true"
+          />
+          <Select
+            :value="value"
+            selectWidth="100%"
+            optionWidth="50%"
+            label="that is a label"
+            alignItems="vertical"
+            colorMode="dark"
+            isSearchable="true"
+            @input-change="value = $event"
+            @search-change="searchValue = $event"
           >
-        </template>
-      </Select>
-
-
-      {{ filteredOptionList }}
-
-      <iconCollection color="red"/>
+            <template #selector="{ selectedValue }">
+              value selected: {{ selectedValue }}
+            </template>
+            <template #dropdown>
+              <Option
+                v-for="opt in filteredOptionList"
+                :key="opt.id"
+                :value="opt.val"
+                >{{ opt.lookFor }}</Option
+              >
+            </template>
+          </Select>
+         
+          
+          {{ filteredOptionList }}
+        
+      <iconCollection color="red" />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import {ThemeProvider} from 'vue-styled-components'
+import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
@@ -146,14 +144,14 @@ export default {
       value2: 42,
       companyName: 'toto',
       optionList: [
-        {id: 'a', val: 'A', lookFor: 'babababa'},
-        {id: 'b', val: 'B', lookFor: 'abab'},
-        {id: 'c', val: 'C', lookFor: 'ccc'},
-        {id: 'd', val: 'D', lookFor: 'ddd'},
-        {id: 'e', val: 'E', lookFor: 'dddee'},
-        {id: 'f', val: 'F', lookFor: 'ddfff'},
-        {id: 'g', val: 'G', lookFor: 'dggg'},
-        {id: 'h', val: 'H', lookFor: 'dddhhh'},
+        { id: 'a', val: 'A', lookFor: 'babababa' },
+        { id: 'b', val: 'B', lookFor: 'abab' },
+        { id: 'c', val: 'C', lookFor: 'ccc' },
+        { id: 'd', val: 'D', lookFor: 'ddd' },
+        { id: 'e', val: 'E', lookFor: 'dddee' },
+        { id: 'f', val: 'F', lookFor: 'ddfff' },
+        { id: 'g', val: 'G', lookFor: 'dggg' },
+        { id: 'h', val: 'H', lookFor: 'dddhhh' },
       ],
       searchValue: ''
     }
@@ -161,7 +159,7 @@ export default {
   computed: {
     filteredOptionList() {
       return this.optionList.filter((opt) =>
-          opt.lookFor.includes(this.searchValue)
+        opt.lookFor.includes(this.searchValue)
       )
     }
   },
@@ -224,7 +222,7 @@ export default {
       ]
       return items
     },
-    getComponentInfo({row, value}) {
+    getComponentInfo({ row, value }) {
       let item
       if (row.selectedValue && row.selectedValue[value]) {
         item = row.selectedValue[value]

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

@@ -32,7 +32,6 @@
           ref="select"
           @click="toggleDropdown"
           :selectHeight="selectHeight"
-          :height="height"
           :selectMinHeight="selectMinHeight"
           :bgColor="
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
@@ -144,7 +143,9 @@ const Caret = styled.div`
   justify-content: center;
   width: 30px;
   min-width: 30px;
-  padding-top: 3px;
+  height: 100%;
+  align-items: stretch
+  padding-top: 5px;
   cursor: pointer;
   margin-left: auto;
 `
@@ -192,7 +193,6 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
-  height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean
@@ -208,7 +208,6 @@ const selectButton = styled('div', selectButtonAttrs)`
   display: flex;
   align-items: center;
   max-height: ${(props) => props.selectHeight};
-  ${(props) => (props.height ? `height: ${props.height}` : '')};
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
@@ -310,10 +309,6 @@ export default {
       required: false,
       default: null
     },
-    height: {
-      required: false,
-      default: null
-    },
     selectMinHeight: {
       required: false,
       default: '36px'

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;
@@ -510,8 +504,13 @@ export default {
     }
   },
   methods: {
-    toggleOpen() {
-      if (this.disabled) {
+    toggleOpen(event) {
+      if (
+        this.isDisabled ||
+        (event &&
+          !(event.target === this.$el) &&
+          !this.$el.contains(event.target))
+      ) {
         return
       }
       this.wasClicked = false
@@ -558,14 +557,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
     },