@eturnity/eturnity_reusable_components 6.46.0-EPDM-9083 → 6.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.46.0-EPDM-9083",
+  "version": "6.46.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -93,9 +93,11 @@
             ref="dropdown"
             v-show="isDropdownOpen"
             :hoveredIndex="hoveredIndex"
+            :hoveredValue="hoveredValue"
             :isActive="isActive"
             :optionWidth="optionWidth"
-            :hoveredBgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
+            :hoveredBgColor="colorMode == 'dark' ? '#000000' : dropdownBgColor"
+            :bgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
             :fontColor="
               dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
@@ -233,10 +235,12 @@ const selectButton = styled('div', selectButtonAttrs)`
 `
 const selectDropdownAttrs = {
   hoveredBgColor: String,
+  bgColor: String,
   fontColor: String,
   selectWidth: String,
   optionWidth: String,
   hoveredIndex: Number,
+  hoveredValue: Number | String,
   selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
@@ -253,16 +257,16 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
     background-color:${(props) =>
-      props.theme.colors[props.hoveredBgColor]
-        ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
+      props.theme.colors[props.bgColor]
+        ? props.theme.colors[props.bgColor]
+        : props.bgColor};
     color:${(props) =>
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     max-height:300px;
     overflow-y:auto;
-    &>div:nth-child(${(props) => props.hoveredIndex}){
+    &>div[data-value="${(props) => props.hoveredValue}"]{
         background-color:${(props) =>
           props.theme.colors[props.hoveredBgColor]
             ? props.theme.colors[props.hoveredBgColor]
@@ -404,6 +408,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
+      hoveredValue:null,
       isClickOutsideActive: false
     }
   },
@@ -442,13 +447,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      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.hoveredValue=e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -502,16 +501,20 @@ export default {
       }
     },
     onArrowPress(dir) {
-      this.hoveredIndex =
-        ((this.hoveredIndex + dir + this.optionLength - 1) %
-          this.optionLength) +
-        1
-      const optionHoveredComponent =
-        this.$refs.dropdown.$children[
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
-      const topPos = optionHoveredComponent.$el.offsetTop
-      this.$refs.dropdown.$el.scrollTop = topPos
+      let newHoveredElem
+      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
+      if(currentHoveredElem){
+        if(dir>0){
+          newHoveredElem=currentHoveredElem.nextElementSibling
+        }else{
+          newHoveredElem=currentHoveredElem.previousElementSibling
+        }
+        if(newHoveredElem){
+          this.hoveredValue = newHoveredElem.getAttribute('data-value')
+          const topPos = newHoveredElem.offsetTop
+          this.$refs.dropdown.$el.scrollTop = topPos
+        }
+      }
     }
   },
   computed: {

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

@@ -2,7 +2,7 @@
   <optionContainer
     :data-value="value"
     :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
-    :backgroundColor="colorMode == 'dark' ? '#000000' : '#fff'"
+    :backgroundColor="colorMode == 'dark' ? 'eturnityGrey' : '#fff'"
     @click="clickHandler"
     @mouseover="hoverHandler"
   >
@@ -24,13 +24,13 @@ const optionContainer = styled('div', optionProps)`
   padding: 12px 10px;
   gap: 14px;
   width: 100%;
-  background-color: ${(props) => props.backgroundColor};
+  background-color: ${(props) => props.theme.colors[props.backgroundColor]?props.theme.colors[props.backgroundColor]:props.backgroundColor};
   box-sizing: inherit;
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
+        : props.hoveredBgColor} !important;
   }
 `
 

package/src/helpers/numberConverter.js

@@ -91,7 +91,7 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision = 0 }) => {
+export const numberToString = ({ value, numberPrecision }) => {
   value = parseFloat(value)
   let minNumberPrecision
   let maxNumberPrecision