@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.16 → 7.4.4-EPDM-7260.18

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

@@ -31,7 +31,9 @@
       <select-button-wrapper :disabled="disabled">
         <selectButton
           ref="select"
+          class="select-button"
           @click="toggleDropdown"
+          :selectWidth="selectWidth"
           :selectHeight="selectHeight"
           :height="height"
           :selectMinHeight="selectMinHeight"
@@ -43,9 +45,9 @@
           "
           :fontSize="fontSize"
           :hasError="hasError"
-          :isSearchBarVisible="isSearchBarVisible"
+          :hasNoPadding="isSearchBarVisible || !hasSelectButtonPadding"
           :disabled="disabled"
-          @keydown.native="onKeyDown"
+          @keydown="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
@@ -66,9 +68,10 @@
               buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
             :value="textSearch"
+            :inputWidth="computedWidth"
             @keydown.stop="onKeyDown"
             @input-change="searchChange"
-            @click.native.stop
+            @click.stop
           />
           <selector
             v-else
@@ -101,27 +104,33 @@
             />
           </Caret>
         </selectButton>
-        <DropdownWrapper>
-          <selectDropdown
-            ref="dropdown"
-            v-show="isDropdownOpen"
-            :hoveredIndex="hoveredIndex"
-            :hoveredValue="hoveredValue"
-            :isActive="isActive"
-            :optionWidth="optionWidth"
-            :hoveredBgColor="colorMode == 'dark' ? '#000000' : dropdownBgColor"
-            :bgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
-            :fontColor="
-              dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
-            "
-            :selectedValue="selectedValue"
-            :fontSize="fontSize"
-            @option-selected="optionSelected"
-            @option-hovered="optionHovered"
-            @mouseleave="optionLeave"
-          >
-            <slot name="dropdown"></slot>
-          </selectDropdown>
+        <DropdownWrapper ref="dropdownWrapperRef">
+          <Teleport to="#portal-target">
+            <selectDropdown
+              ref="dropdown"
+              v-show="isSelectDropdownShown"
+              :dropdownPosition="dropdownPosition"
+              :hoveredIndex="hoveredIndex"
+              :hoveredValue="hoveredValue"
+              :isActive="isActive"
+              :optionWidth="getOptionWidth"
+              :hoveredBgColor="
+                colorMode == 'dark' ? '#000000' : dropdownBgColor
+              "
+              :bgColor="
+                dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
+              "
+              :fontColor="
+                dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
+              "
+              :fontSize="fontSize"
+              :selectedValue="selectedValue"
+              @option-selected="optionSelected"
+              @option-hovered="optionHovered"
+            >
+              <slot name="dropdown"></slot>
+            </selectDropdown>
+          </Teleport>
         </DropdownWrapper>
       </select-button-wrapper>
     </input-wrapper>
@@ -137,8 +146,9 @@
 //     optionWidth="50%"
 //     label="that is a label"
 //     alignItems="vertical"
-//     label-data-id="test-label0data-id"
+//     label-data-id="test-label-data-id"
 //     data-id="test-data-id"
+//     :hasSelectButtonPadding="false"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -151,7 +161,8 @@
 //     </template>
 // </Select>
 
-import styled from 'vue-styled-components'
+import { Teleport } from 'vue'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
@@ -167,7 +178,7 @@ const Caret = styled.div`
   width: ${CARET_WIDTH};
   min-width: ${CARET_WIDTH};
   height: 100%;
-  align-items: stretch;
+  align-items: center;
   cursor: pointer;
   margin-left: auto;
 `
@@ -237,9 +248,10 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
+  selectWidth: String,
   height: String,
   selectMinHeight: String,
-  isSearchBarVisible: Boolean,
+  hasNoPadding: Boolean,
   showBorder: Boolean,
   paddingLeft: String
 }
@@ -248,8 +260,9 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
+  max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
   ${(props) =>
-    props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}`};
+    props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -261,7 +274,7 @@ const selectButton = styled('div', selectButtonAttrs)`
       : '36px'};
   display: flex;
   align-items: center;
-  max-height: ${(props) => props.selectHeight};
+  height: ${(props) => props.selectHeight};
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
@@ -293,15 +306,17 @@ const selectDropdownAttrs = {
   fontColor: String,
   optionWidth: String,
   hoveredIndex: Number,
+  fontSize: String,
+  dropdownPosition: Object,
   hoveredValue: Number | String,
-  selectedValue: Number | String,
-  fontSize: String
+  selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
-  z-index: ${(props) => (props.isActive ? '2' : '1')};
+  z-index: ${(props) => (props.isActive ? '2' : '99999')};
   position: absolute;
-  top: 5px;
+  top: ${(props) => props.dropdownPosition?.top}px;
+  left: ${(props) => props.dropdownPosition?.left}px;
   border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
   display: flex;
@@ -326,7 +341,9 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
         ? props.theme.colors[props.hoveredBgColor]
         : props.hoveredBgColor};
   }
+  font-size: ${(props) => props.fontSize};
 `
+selectDropdown.emits = ['option-hovered', 'option-selected']
 const DropdownWrapper = styled('div')`
   position: relative;
 `
@@ -341,6 +358,16 @@ const InputWrapper = styled('div', inputAttrs)`
   grid-template-columns: ${(props) =>
     props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
 `
+
+const DROPDOWN_HEIGHT_OFFSET = 4
+const DROPDOWN_TOP_OFFSET = 21
+const MIN_OPTION_LENGTH = 5
+
+const DROPDOWN_MENU_POSITIONS = {
+  Automatic: 'automatic',
+  Bottom: 'bottom'
+}
+
 export default {
   name: 'RCselect',
 
@@ -462,9 +489,25 @@ export default {
       type: String,
       default: ''
     },
+    hasSelectButtonPadding: {
+      type: Boolean,
+      default: true
+    },
     isDraggable: {
       type: Boolean,
       default: false
+    },
+    leftPadding: {
+      type: String,
+      default: '15px'
+    },
+    minOptionLength: {
+      type: Number,
+      default: MIN_OPTION_LENGTH
+    },
+    dropdownMenuPosition: {
+      type: String,
+      default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
     }
   },
 
@@ -483,34 +526,54 @@ export default {
     Caret,
     Selector,
     inputText,
+    Teleport,
     draggableInputHandle
   },
 
   data() {
     return {
       selectedValue: null,
-      paddingLeft: this.isDraggable ? '30px' : '15px',
+      paddingLeft: this.isDraggable
+        ? '30px'
+        : this.leftPadding
+        ? this.leftPadding
+        : '15px',
       isDropdownOpen: false,
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue: null,
-      isClickOutsideActive: false
+      isClickOutsideActive: false,
+      dropdownPosition: {
+        left: null,
+        top: null
+      },
+      dropdownWidth: null,
+      hoveredValue: null
     }
   },
   mounted() {
+    this.observeDropdownHeight()
+    this.observeSelectWidth()
+    window.addEventListener('resize', this.handleSetDropdownOffet)
+  },
+  beforeMount() {
     this.selectedValue = this.value
     document.addEventListener('click', this.clickOutside)
+    this.getDropdownPosition()
+    window.removeEventListener('resize', this.handleSetDropdownOffet)
+    if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
+    if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
   },
-  beforeDestroy() {
+  unmounted() {
     document.removeEventListener('click', this.clickOutside)
   },
   methods: {
     focus() {
       this.isActive = true
     },
-    blur() {
+    blur(e) {
       this.isActive = false
+      this.$emit('blur', e)
     },
     toggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen
@@ -520,8 +583,13 @@ export default {
     },
     closeDropdown() {
       this.blur()
+      this.clearSearch()
       this.isDropdownOpen = false
     },
+    clearSearch() {
+      this.textSearch = ''
+      this.searchChange('')
+    },
     optionSelected(e) {
       this.selectedValue = e
       this.closeDropdown()
@@ -550,15 +618,15 @@ 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'
-          }
-        })
+      const dropdownChildren = [...this.$refs.dropdown.$el.children]
+      dropdownChildren.forEach((el) => {
+        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+          el.style.display = 'none'
+
+          return
+        }
+        el.style.display = 'inherit'
+      })
     },
     clickOutside(event) {
       const dropdownRef = this.$refs.dropdown
@@ -568,6 +636,7 @@ export default {
       if (
         this.$refs.select.$el == event.target ||
         this.$refs.select.$el.contains(event.target) ||
+        event.target.id === 'more-button' ||
         event.target.parentNode === dropdownRef.$el
       ) {
         return
@@ -581,13 +650,102 @@ 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)
       }
     },
+    // If some part of the dropdown menu is outside viewport of the bottom of the screen,
+    // we need to offset it and display it at the top of the select dropdown instead
+    async getDropdownPosition() {
+      if (
+        !this.$refs.dropdownWrapperRef ||
+        !this.$refs.select ||
+        !this.$refs.dropdown
+      ) {
+        return
+      }
+      await this.$nextTick()
+      const isDisplayedAtBottom = await this.generateDropdownPosition()
+      // If the dropdown menu is going to be displayed at the bottom,
+      // we need reverify its position after a dom update (nextTick)
+      await this.$nextTick()
+      if (isDisplayedAtBottom) this.generateDropdownPosition()
+    },
+    async generateDropdownPosition() {
+      const isDropdownNotCompletelyVisible =
+        await this.isBottomOfDropdownOutOfViewport()
+      const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el
+      const selectButtonHeight = this.$refs.select.$el.clientHeight
+      const dropdownHeight = this.$refs.dropdown.$el.clientHeight
+      const dropdownWrapperRelativeHeight =
+        dropdownWrapperEl.getBoundingClientRect().top +
+        window.scrollY +
+        DROPDOWN_HEIGHT_OFFSET
+
+      const top =
+        isDropdownNotCompletelyVisible ||
+        (!isDropdownNotCompletelyVisible &&
+          this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom)
+          ? dropdownWrapperRelativeHeight
+          : dropdownWrapperRelativeHeight -
+            dropdownHeight -
+            selectButtonHeight -
+            DROPDOWN_TOP_OFFSET
+      const left = this.dropdownPosition.left
+        ? this.dropdownPosition.left
+        : dropdownWrapperEl.getBoundingClientRect().left + window.scrollX
+
+      this.dropdownPosition = { left: Math.floor(left), top: Math.floor(top) }
+
+      return isDropdownNotCompletelyVisible
+    },
+    async isBottomOfDropdownOutOfViewport() {
+      if (
+        !this.$refs.dropdown ||
+        this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
+      ) {
+        return false
+      }
+
+      await this.$nextTick()
+      const rect = this.$refs.dropdown.$el.getBoundingClientRect()
+      const windowHeight =
+        window.innerHeight || document.documentElement.clientHeight
+
+      if (windowHeight <= 650) return true
+
+      // using Math.floor because the offsets may contain decimals we are not going to consider here
+      return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
+    },
+    observeDropdownHeight() {
+      if (!this.$refs.dropdown) return
+      this.dropdownResizeObserver = new ResizeObserver(() => {
+        this.$nextTick(() => this.getDropdownPosition())
+      })
+      this.dropdownResizeObserver.observe(this.$refs.dropdown.$el)
+    },
+    handleSetDropdownOffet() {
+      if (!this.$refs.select) return
+      this.dropdownPosition.left = Math.floor(
+        this.$refs.select.$el.getBoundingClientRect().left
+      )
+      this.getDropdownWidth()
+    },
+    observeSelectWidth() {
+      if (!this.$refs.select) return
+      this.selectResizeObserver = new ResizeObserver(() =>
+        // eslint-disable-next-line vue/valid-next-tick
+        this.$nextTick(() => this.getDropdownWidth())
+      )
+      this.selectResizeObserver.observe(this.$refs.dropdown.$el)
+    },
+    async getDropdownWidth() {
+      if (!this.$refs.select) return
+      await this.$nextTick()
+      this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
+    },
     onArrowPress(dir) {
       let newHoveredElem
       const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
@@ -605,42 +763,85 @@ export default {
           this.$refs.dropdown.$el.scrollTop = topPos
         }
       }
-    },
-    clearSearch() {
-      this.textSearch = ''
     }
   },
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$el.childElementCount
+        return this.$refs.dropdown.$el.childElementCount > 1
+          ? this.$refs.dropdown.$el.childElementCount
+          : this.$refs.dropdown.$el.children[0].childElementCount
       }
 
       return 0
     },
     isSearchBarVisible() {
-      return this.isSearchable && this.isDropdownOpen
+      return (
+        this.isSearchable &&
+        this.optionLength >= this.minOptionLength &&
+        this.isDropdownOpen
+      )
+    },
+    computedWidth() {
+      function removePX(item) {
+        return Number(item.replace('px', ''))
+      }
+
+      const value =
+        this.selectWidth === '100%'
+          ? '100%'
+          : removePX(this.selectWidth) - removePX(CARET_WIDTH)
+
+      return value + 'px'
+    },
+    getOptionWidth() {
+      if (this.optionWidth) return this.optionWidth
+
+      return this.dropdownWidth
+    },
+    isSelectDropdownShown() {
+      return (
+        this.isDropdownOpen &&
+        this.dropdownPosition.left !== null &&
+        (!this.isSearchable || this.isSearchable)
+      )
+    },
+    isMobileDevice() {
+      const userAgent = navigator.userAgent || navigator.vendor || window.opera
+      const touchCapable =
+        'ontouchstart' in window ||
+        navigator.maxTouchPoints > 0 ||
+        navigator.msMaxTouchPoints > 0
+
+      return (
+        /Android/i.test(userAgent) ||
+        /iPad|iPhone|iPod/.test(userAgent) ||
+        (/Macintosh/.test(userAgent) && touchCapable) ||
+        /windows phone/i.test(userAgent)
+      )
     }
   },
   watch: {
     value(val) {
       this.selectedValue = val
     },
-    isDropdownOpen(val) {
-      this.$emit('is-dropdown-open', val)
+    async isDropdownOpen(val) {
       if (val) {
         this.$emit('on-dropdown-open')
         setTimeout(() => {
           this.isClickOutsideActive = true
         }, 10)
+        await this.$nextTick()
+        this.handleSetDropdownOffet()
       } else {
+        this.dropdownPosition.left = null
         setTimeout(() => {
           this.isClickOutsideActive = false
         }, 10)
       }
       if (val && this.isSearchable) {
         this.$nextTick(() => {
-          if (this.$refs.searchInput) {
+          if (this.$refs.searchInput && !this.isMobileDevice) {
             this.$refs.searchInput.$el.querySelector('input').focus()
           }
         })

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

@@ -12,8 +12,11 @@
     @mouseover="hoverHandler"
     :cursorType="cursorType"
     :isDisabled="isDisabled"
+    :disabledBgColor="disabledBgColor"
+    :disabledTextColor="disabledTextColor"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
+    :padding="padding"
   >
     <slot></slot>
   </optionContainer>
@@ -22,12 +25,15 @@
 <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 const optionProps = {
   isDisabled: Boolean,
   hoveredBgColor: String,
   cursorType: String,
-  backgroundColor: String
+  backgroundColor: String,
+  disabledBgColor: String,
+  disabledTextColor: String,
+  padding: String
 }
 const optionContainer = styled('div', optionProps)`
   display: flex;
@@ -35,23 +41,37 @@ const optionContainer = styled('div', optionProps)`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 10px;
+  padding: ${(props) => props.padding};
   gap: 14px;
   width: 100%;
   background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor]
+    props.isDisabled
+      ? props.theme.colors[props.disabledBgColor]
+        ? props.theme.colors[props.disabledBgColor]
+        : props.disabledBgColor
+      : props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
-      : props.backgroundColor};
+      : props.backgroundColor} !important;
   box-sizing: inherit;
   background-color: ${(props) =>
     props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
       : props.backgroundColor};
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey3 : 'inherit'};
+    props.isDisabled
+      ? !!props.disabledTextColor
+        ? props.theme.colors[props.disabledTextColor]
+          ? props.theme.colors[props.disabledTextColor]
+          : props.disabledTextColor
+        : props.theme.colors.grey3
+      : 'inherit'};
   &:hover {
     background-color: ${(props) =>
-      props.theme.colors[props.hoveredBgColor]
+      !!props.disabledTextColor && props.isDisabled
+        ? props.theme.colors[props.disabledBgColor]
+          ? props.theme.colors[props.disabledBgColor]
+          : props.disabledBgColor
+        : props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
         : props.hoveredBgColor} !important;
   }
@@ -59,7 +79,7 @@ const optionContainer = styled('div', optionProps)`
 
 export default {
   name: 'RCoption',
-
+  emits: ['option-hovered', 'option-selected'],
   props: {
     value: {
       required: true
@@ -73,7 +93,7 @@ export default {
     },
     cursorType: {
       required: false,
-      default: 'cursor'
+      default: 'pointer'
     },
     backgroundColor: {
       required: false,
@@ -85,21 +105,32 @@ export default {
     isDisabled: {
       required: false,
       default: false
+    },
+    disabledBgColor: {
+      required: false,
+      default: 'white'
+    },
+    disabledTextColor: {
+      required: false,
+      default: null
+    },
+    padding: {
+      required: false,
+      default: '12px 10px'
     }
   },
 
   components: { optionContainer },
-
   data() {
     return {}
   },
   methods: {
-    clickHandler() {
+    clickHandler(e) {
       if (this.isDisabled) {
         // prevent emitter if the option is disabled
         return
       } else {
-        this.$parent.$emit('option-selected', this.value)
+        this.$parent.$emit('option-selected', this.value, e)
       }
     },
     hoverHandler() {