@eturnity/eturnity_reusable_components 6.33.1-EPDM-5205.1 → 6.33.1-EPDM-7956

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

@@ -14,9 +14,11 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
-          </input-label
-        >
+          >{{ label }}
+          <optionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})</optionalLabel
+          >
+        </input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -129,7 +131,7 @@
 //     </template>
 // </Select>
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
@@ -162,7 +164,6 @@ const InputLabel = styled('div', labelAttrs)`
 `
 const optionalLabel = styled.span`
   font-weight: 300;
-
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
@@ -198,8 +199,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) =>
-    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
+  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
   min-height: 36px;
@@ -427,9 +427,7 @@ export default {
       const optionElement = this.$el.querySelector(`[data-value="${e}"]`)
       if (this.$refs.dropdown) {
         this.hoveredIndex =
-          this.$refs.dropdown.$children
-            .map((component) => component.$el)
-            .indexOf(optionElement) + 1
+          [...this.$refs.dropdown.$el.children].indexOf(optionElement) + 1
       }
     },
     mouseEnterHandler() {
@@ -446,15 +444,13 @@ export default {
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
-      this.$refs.dropdown.$children
-        .map((component) => component.$el)
-        .forEach((el) => {
-          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-            el.style.display = 'none'
-          } else {
-            el.style.display = 'inherit'
-          }
-        })
+      ;[...this.$refs.dropdown.$el.children].forEach((el) => {
+        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+          el.style.display = 'none'
+        } else {
+          el.style.display = 'inherit'
+        }
+      })
     },
     onSelectSlotClick() {
       this.toggleDropdown()
@@ -476,10 +472,9 @@ export default {
       } else if (e.key == 'ArrowUp') {
         this.onArrowPress(-1)
       } else if (e.key == 'Enter') {
-        const optionHoveredComponent =
-          this.$refs.dropdown.$children[
-            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-          ]
+        const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
+          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+        ]
         this.optionSelected(optionHoveredComponent.$el.dataset.value)
       }
     },
@@ -488,10 +483,9 @@ export default {
         ((this.hoveredIndex + dir + this.optionLength - 1) %
           this.optionLength) +
         1
-      const optionHoveredComponent =
-        this.$refs.dropdown.$children[
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
+      const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
+        (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+      ]
       const topPos = optionHoveredComponent.$el.offsetTop
       this.$refs.dropdown.$el.scrollTop = topPos
     }
@@ -499,7 +493,7 @@ export default {
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$children.length
+        return this.$refs.dropdown.$el.childElementCount
       } else {
         return 0
       }

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

@@ -7,7 +7,7 @@
   <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-  import styled from 'vue-styled-components'
+  import styled from 'vue3-styled-components'
   const optionProps={hoveredBgColor:String}
   const optionContainer = styled('div',optionProps)`
     display:flex;

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

@@ -22,7 +22,7 @@
 //     :maxValue="500" //default is 100 if not specified
 // />
 import Slider from "@vueform/slider/dist/slider.vue2.js"
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 
 const Container = styled.div`
   margin: 16px 0 16px 21px;

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

@@ -73,7 +73,7 @@
 //   :disabled="false"
 // />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import theme from '../../../assets/theme'
 const Container = styled.div``

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

@@ -51,7 +51,7 @@
 //     :isDisabled="true"
 // .   fontSize="13px"
 // />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import ErrorMessage from '../../errorMessage'
 

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

@@ -71,7 +71,7 @@
 //   infoTextMessage="My info message"
 // />
 
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import InfoText from "../../infoText"
 
 const Container = styled.div`

package/src/components/modals/modal/index.vue

@@ -28,7 +28,7 @@
 //   <div>Data....</div>
 // </modal>
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 

package/src/components/pageSubtitle/index.vue

@@ -21,7 +21,7 @@
 //   color="red"
 //   infoText="My info text"
 // />
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import InfoText from "../infoText"
 
 const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }

package/src/components/pageTitle/index.vue

@@ -9,7 +9,7 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 
 const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled("div", textAttrs)`

package/src/components/pagination/index.vue

@@ -11,17 +11,17 @@
         </arrowIconContainer>
           <arrowText>{{ $gettext('back') }}</arrowText>
         </paginationLink>
-  
+
         <!-- First page -->
         <paginationLink
           v-if="currentPage > 2 && paginationParams.pages > 3"
           @click="fetchPage(1)"
           >1</paginationLink
         >
-  
+
         <!-- Back tree dots -->
         <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
-  
+
         <!-- Current block -->
         <paginationLink
           v-for="number in paginationNumbers()"
@@ -30,7 +30,7 @@
           @click="fetchPage(number)"
           >{{ number }}</paginationLink
         >
-  
+
         <!-- Forward tree dots -->
         <span
           v-if="
@@ -38,7 +38,7 @@
           "
           >...</span
         >
-  
+
         <!-- End page -->
         <paginationLink
           v-if="
@@ -47,7 +47,7 @@
           @click="fetchPage(paginationParams.pages)"
           >{{ paginationParams.pages }}</paginationLink
         >
-  
+
         <!-- Forward button -->
         <paginationLink
           v-if="paginationParams.next"
@@ -60,11 +60,12 @@
         </paginationLink>
     </paginationWrapper>
   </template>
-  
-  <script>
-import styled from "vue-styled-components"
-  import icon from "../icon"
-  const paginationWrapper=styled.nav`
+
+<script>
+import styled from "vue3-styled-components"
+import icon from "../icon"
+
+const paginationWrapper=styled.nav`
     color: #1a237e;
     font-size: 13px;
     display: -webkit-box;
@@ -134,4 +135,3 @@ import styled from "vue-styled-components"
     }
   }
   </script>
-  

package/src/components/progressBar/index.vue

@@ -31,7 +31,7 @@
 //   stepNumber="4"
 //   :labelText="translate('step')"
 // />
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 
 const Container = styled.div`
   display: grid;

package/src/components/projectMarker/index.vue

@@ -88,7 +88,7 @@
 //   @deleteHandler="onMarkerDelete($event)"
 // />
 
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import Icon from "../icon"
 import Modal from '../modals/modal'
 import PageTitle from '../pageTitle'

package/src/components/spinner/index.vue

@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const SpinnerContainer = styled.div`
   position: fixed;

package/src/components/tableDropdown/index.vue

@@ -104,7 +104,12 @@
             :src="require('../../assets/icons/collapse_arrow_icon.svg')"
           />
         </arrow-wrapper>
-        <options-container v-if="isOpen" ref="optionsContainer">
+        <options-container
+          v-if="isOpen"
+          :top="getItemLocation('top')"
+          :left="getItemLocation('left')"
+          ref="optionsContainer"
+        >
           <options-wrapper @click.prevent.stop>
             <search-container @click.prevent.stop>
               <search-input
@@ -181,10 +186,10 @@
 //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
 //   :disabled="true"
 // />
-import styled from 'vue-styled-components'
-import Spinner from '@eturnity/eturnity_reusable_components/src/components/spinner'
-import SearchInput from '@eturnity/eturnity_reusable_components/src/components/inputs/searchInput'
-import InputText from '@eturnity/eturnity_reusable_components/src/components/inputs/inputText'
+import styled from 'vue3-styled-components'
+import Spinner from '@/components/spinner'
+import SearchInput from '@/components/inputs/searchInput'
+import InputText from '@/components/inputs/inputText'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`
@@ -283,7 +288,8 @@ const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
-  left: 20px;
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.left + 'px'};
   width: auto;
   max-height: 360px;
   min-height: 200px;
@@ -504,13 +510,8 @@ export default {
     }
   },
   methods: {
-    toggleOpen(event) {
-      if (
-        this.isDisabled ||
-        (event &&
-          !(event.target === this.$el) &&
-          !this.$el.contains(event.target))
-      ) {
+    toggleOpen() {
+      if (this.disabled) {
         return
       }
       this.wasClicked = false
@@ -557,6 +558,14 @@ 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/exampleNested.vue

@@ -161,7 +161,7 @@
 
 <script>
 import draggable from "vuedraggable"
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import MainTable from "@/components/reusable-components/tables/MainTable"
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 import DeleteIcon from "@/components/reusable-components/DeleteIcon"

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

@@ -1,15 +1,9 @@
 <template>
-  <page-container
-    :tableHeight="tableHeight"
-    :shouldSetCustomHeight="doesTableContainDraggables"
-  >
+  <page-container>
     <table-title v-if="titleText">
       {{ titleText }}
     </table-title>
-    <table-scroll
-      ref="tableRef"
-      :isPositionAbsolute="doesTableContainDraggables"
-    >
+    <table-scroll>
       <table-wrapper :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
@@ -29,18 +23,10 @@
 <script>
 // ToDo: add this to storybook
 // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Spinner from '../../spinner'
 
-const pageContainerProps = {
-  tableHeight: String,
-  shouldSetCustomHeight: Boolean
-}
-const PageContainer = styled('div', pageContainerProps)`
-  position: relative;
-  height: ${(props) =>
-    props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
-`
+const PageContainer = styled.div``
 
 const TableTitle = styled.div`
   margin-bottom: 16px;
@@ -49,27 +35,15 @@ const TableTitle = styled.div`
   text-transform: uppercase;
 `
 
-const tableScrollProps = {
-  isPositionAbsolute: Boolean
-}
-
-const TableScroll = styled('div', tableScrollProps)`
+const TableScroll = styled.div`
   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-x: auto;
-  overflow-y: hidden;
+  overflow: auto;
 
   ::-webkit-scrollbar {
     height: 5px; //height of the whole scrollbar area
@@ -93,11 +67,7 @@ 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;
@@ -408,39 +378,6 @@ 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/tables/viewTable/index.vue

@@ -45,9 +45,9 @@
 // This is a read only table. Pass it data, and it displays it
 // ToDo: add this to storybook
 // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
-import styled from 'vue-styled-components'
-import DeleteIcon from '../../deleteIcon'
-import Spinner from '../../spinner'
+import styled from "vue3-styled-components"
+import DeleteIcon from "../../deleteIcon"
+import Spinner from "../../spinner"
 
 const TableScroll = styled.div`
   position: relative;

package/src/components/threeDots/index.vue

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