@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.6 → 7.12.7--EPDM-5518.0

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

@@ -47,6 +47,7 @@
         :fontSize="fontSize"
         :fontColor="fontColor"
         :backgroundColor="backgroundColor"
+        v-on="$listeners"
         :hasSlot="hasSlot"
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
@@ -100,7 +101,7 @@
 // >
 //<template name=label><img>....</template>
 //</inputNumber>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import {
   stringToNumber,
   numberToString
@@ -487,10 +488,9 @@ export default {
       // Need to return an integer rather than a string
       this.$emit('input-change', event)
     },
-    onEvaluateCode(event) {
+    onEvaluateCode(val) {
       // function to perform math on the code
       // filter the string in case of any malicious content
-      const val = event.target.value
       let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
       filtered = filtered.split(/([-+*/()])/)
       let formatted = filtered.map((item) => {
@@ -548,17 +548,20 @@ export default {
       }
       return array
     },
-    onInput(event) {
+    onInput(value) {
+      // if(!this.isFocused){
+      //   return
+      // }
       if (this.isBlurred) {
         this.isBlurred = false
         return
       }
-      if (event.target.value === '') {
+      if (value === '') {
         this.$emit('on-input', '')
       }
       let evaluatedVal
       try {
-        evaluatedVal = this.onEvaluateCode(event)
+        evaluatedVal = this.onEvaluateCode(value)
       } finally {
         if (evaluatedVal) {
           this.$emit('on-input', evaluatedVal)
@@ -570,7 +573,7 @@ export default {
       // setting isBlurred so we don't trigger onInput as well
       this.isBlurred = true
       let value = e.target.value
-      let evaluatedInput = this.onEvaluateCode(e)
+      let evaluatedInput = this.onEvaluateCode(value)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
       if ((evaluatedInput && value.length) || this.minNumber !== null) {
         this.textInput = numberToString({

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

@@ -44,7 +44,7 @@
 //   number_max_allowed: 10,
 //   unit_short_name: "cm",
 // },
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import {
   stringToNumber,
   numberToString,

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

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
 import ErrorMessage from '../../errorMessage'
@@ -328,12 +328,12 @@ export default {
     }
   },
   methods: {
-    onEnterPress(event){
+    onEnterPress() {
       this.$emit('on-enter-click')
       this.$refs.inputElement.$el.blur()
     },
-    onChangeHandler(event) {
-      this.$emit('input-change', event.target.value)
+    onChangeHandler($event) {
+      this.$emit('input-change', $event)
     },
     onInputBlur($event) {
       this.$emit('input-blur', $event.target.value)

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

@@ -60,7 +60,7 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Modal from '../../modals/modal'
 import InfoText from '../../infoText'
 

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

@@ -13,7 +13,10 @@
         :hasFocus="hasFocus"
         :data-id="dataId"
       />
-      <SearchIconSvg class="search-icn" />
+      <img
+        class="search-icn"
+        :src="require('../../../assets/icons/search_icon_black.svg')"
+      />
     </input-wrapper>
   </container>
 </template>
@@ -30,8 +33,7 @@
 //   :isFilter="true" // to set the height at 30px
 //   data-id="test-data-id"
 // />
-import styled from 'vue3-styled-components'
-import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
+import styled from 'vue-styled-components'
 
 const inputAttrs = {
   isDisabled: Boolean,
@@ -66,7 +68,7 @@ const InputContainer = styled('input', inputAttrs)`
 const InputWrapper = styled.span`
   position: relative;
 
-  svg {
+  img {
     position: absolute;
     right: 10px;
     top: 50%;
@@ -79,8 +81,7 @@ export default {
   components: {
     InputContainer,
     InputWrapper,
-    Container,
-    SearchIconSvg
+    Container
   },
   props: {
     value: {
@@ -113,7 +114,7 @@ export default {
   },
   methods: {
     onChangeHandler(event) {
-      this.$emit('on-change', event.target.value)
+      this.$emit('on-change', event)
     },
     focusInputElement() {
       this.$nextTick(() => {

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

@@ -28,9 +28,7 @@
       <select-button-wrapper :disabled="disabled">
         <selectButton
           ref="select"
-          class="select-button"
           @click="toggleDropdown"
-          :selectWidth="selectWidth"
           :selectHeight="selectHeight"
           :height="height"
           :selectMinHeight="selectMinHeight"
@@ -41,9 +39,9 @@
             buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
           "
           :hasError="hasError"
-          :hasNoPadding="isSearchBarVisible || !hasSelectButtonPadding"
+          :isSearchBarVisible="isSearchBarVisible"
           :disabled="disabled"
-          @keydown="onKeyDown"
+          @keydown.native="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
@@ -66,12 +64,14 @@
             :value="textSearch"
             @keydown.stop="onKeyDown"
             @input-change="searchChange"
-            @click.stop
+            @click.native.stop
           />
           <selector
             v-else
             :selectWidth="selectWidth"
             :paddingLeft="paddingLeft"
+            :noMaxWidth="noMaxWidth"
+            :showBorder="showBorder"
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
@@ -98,33 +98,26 @@
             />
           </Caret>
         </selectButton>
-        <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>
+          <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"
+            @option-selected="optionSelected"
+            @option-hovered="optionHovered"
+            @mouseleave="optionLeave"
+          >
+            <slot name="dropdown"></slot>
+          </selectDropdown>
         </DropdownWrapper>
       </select-button-wrapper>
     </input-wrapper>
@@ -139,9 +132,8 @@
 //     optionWidth="50%"
 //     label="that is a label"
 //     alignItems="vertical"
-//     label-data-id="test-label-data-id"
+//     label-data-id="test-label0data-id"
 //     data-id="test-data-id"
-//     :hasSelectButtonPadding="false"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -154,8 +146,7 @@
 //     </template>
 // </Select>
 
-import { Teleport } from 'vue'
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
@@ -171,14 +162,22 @@ const Caret = styled.div`
   width: ${CARET_WIDTH};
   min-width: ${CARET_WIDTH};
   height: 100%;
-  align-items: center;
+  align-items: stretch;
   cursor: pointer;
   margin-left: auto;
 `
 
-const Selector = styled('div', { selectWidth: String, paddingLeft: String })`
-  width: ${(props) =>
-    `calc(${props.selectWidth} - (${CARET_WIDTH} + ${props.paddingLeft} + (${BORDER_WIDTH} * 2)))`};
+const selectorProps = {
+  selectWidth: String,
+  paddingLeft: String,
+  showBorder: Boolean,
+  noMaxWidth: Boolean
+}
+const Selector = styled('div', selectorProps)`
+  max-width: ${(props) =>
+    props.noMaxWidth
+      ? '100%'
+      : `calc(${props.selectWidth} - (${CARET_WIDTH} + ${props.paddingLeft} + (${BORDER_WIDTH} * 2)))`};
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -196,10 +195,7 @@ const InputLabel = styled('div', labelAttrs)`
 const optionalLabel = styled.span`
   font-weight: 300;
 `
-const inputProps = {
-  selectWidth: String,
-  optionWidth: String
-}
+const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
   width: ${(props) => props.selectWidth};
   position: relative;
@@ -226,10 +222,9 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
-  selectWidth: String,
   height: String,
   selectMinHeight: String,
-  hasNoPadding: Boolean,
+  isSearchBarVisible: Boolean,
   showBorder: Boolean,
   paddingLeft: String
 }
@@ -237,9 +232,8 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
   ${(props) =>
-    props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
+    props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -251,7 +245,7 @@ const selectButton = styled('div', selectButtonAttrs)`
       : '36px'};
   display: flex;
   align-items: center;
-  height: ${(props) => props.selectHeight};
+  max-height: ${(props) => props.selectHeight};
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
@@ -283,17 +277,14 @@ const selectDropdownAttrs = {
   fontColor: String,
   optionWidth: String,
   hoveredIndex: Number,
-  fontSize: String,
-  dropdownPosition: Object,
   hoveredValue: Number | String,
   selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
-  z-index: ${(props) => (props.isActive ? '2' : '99999')};
+  z-index: ${(props) => (props.isActive ? '2' : '1')};
   position: absolute;
-  top: ${(props) => props.dropdownPosition?.top}px;
-  left: ${(props) => props.dropdownPosition?.left}px;
+  top: 5px;
   border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
   display: flex;
@@ -301,7 +292,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   align-items: flex-start;
   padding: 0px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  width: ${(props) => props.optionWidth};
+  width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
   background-color: ${(props) =>
     props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -318,9 +309,7 @@ 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;
 `
@@ -333,10 +322,6 @@ 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
-
 export default {
   name: 'RCselect',
 
@@ -448,11 +433,11 @@ export default {
       type: String,
       default: ''
     },
-    hasSelectButtonPadding: {
+    isDraggable: {
       type: Boolean,
-      default: true
+      default: false
     },
-    isDraggable: {
+    noMaxWidth: {
       type: Boolean,
       default: false
     }
@@ -473,7 +458,6 @@ export default {
     Caret,
     Selector,
     inputText,
-    Teleport,
     draggableInputHandle
   },
 
@@ -485,38 +469,23 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      isClickOutsideActive: false,
-      dropdownPosition: {
-        left: null,
-        top: null
-      },
-      dropdownWidth: null,
-      hoveredValue: null
+      hoveredValue: null,
+      isClickOutsideActive: false
     }
   },
   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()
   },
-  unmounted() {
+  beforeDestroy() {
     document.removeEventListener('click', this.clickOutside)
   },
   methods: {
     focus() {
       this.isActive = true
     },
-    blur(e) {
+    blur() {
       this.isActive = false
-      this.$emit('blur', e)
     },
     toggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen
@@ -532,9 +501,6 @@ export default {
       this.blur()
       this.isDropdownOpen = false
     },
-    clearSearch() {
-      this.textSearch = ''
-    },
     optionSelected(e) {
       this.selectedValue = e
       this.closeDropdown()
@@ -563,15 +529,15 @@ export default {
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
-      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'
-      })
+      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 = 'grid'
+          }
+        })
     },
     clickOutside(event) {
       const dropdownRef = this.$refs.dropdown
@@ -581,7 +547,6 @@ 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
@@ -595,92 +560,13 @@ export default {
       } else if (e.key == 'ArrowUp') {
         this.onArrowPress(-1)
       } else if (e.key == 'Enter') {
-        const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
+        const optionHoveredComponent =
+          this.$refs.dropdown.$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()
-      await this.$nextTick()
-      // If the dropdown menu is going to be displayed at the bottom,
-      // we need reverify its position after a dom update (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
-        ? 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) {
-        return false
-      }
-      await this.$nextTick()
-      const rect = this.$refs.dropdown.$el.getBoundingClientRect()
-      const windowHeight =
-        window.innerHeight || document.documentElement.clientHeight
-
-      // 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(() =>
-        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(
@@ -712,34 +598,20 @@ export default {
       return 0
     },
     isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
-    },
-    getOptionWidth() {
-      if (this.optionWidth) return this.optionWidth
-
-      return this.dropdownWidth
-    },
-    isSelectDropdownShown() {
-      return (
-        this.isDropdownOpen &&
-        this.dropdownPosition.left !== null &&
-        (!this.isSearchable || this.isSearchable)
-      )
+      return this.isSearchable && this.isDropdownOpen
     }
   },
   watch: {
     value(val) {
       this.selectedValue = val
     },
-    async isDropdownOpen(val) {
+    isDropdownOpen(val) {
+      this.$emit('is-dropdown-open', val)
       if (val) {
         setTimeout(() => {
           this.isClickOutsideActive = true
         }, 10)
-        await this.$nextTick()
-        this.handleSetDropdownOffet()
       } else {
-        this.dropdownPosition.left = null
         setTimeout(() => {
           this.isClickOutsideActive = false
         }, 10)

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

@@ -22,7 +22,7 @@
 <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 const optionProps = {
   isDisabled: Boolean,
   hoveredBgColor: String,
@@ -59,7 +59,7 @@ const optionContainer = styled('div', optionProps)`
 
 export default {
   name: 'RCoption',
-  emits: ['option-hovered', 'option-selected'],
+
   props: {
     value: {
       required: true
@@ -73,7 +73,7 @@ export default {
     },
     cursorType: {
       required: false,
-      default: 'pointer'
+      default: 'cursor'
     },
     backgroundColor: {
       required: false,
@@ -94,12 +94,12 @@ export default {
     return {}
   },
   methods: {
-    clickHandler(e) {
+    clickHandler() {
       if (this.isDisabled) {
         // prevent emitter if the option is disabled
         return
       } else {
-        this.$parent.$emit('option-selected', this.value, e)
+        this.$parent.$emit('option-selected', this.value)
       }
     },
     hoverHandler() {