@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.21 → 7.4.4-EPDM-7260.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.4-EPDM-7260.21",
+  "version": "7.4.4-EPDM-7260.22",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -79,7 +79,12 @@
             :selectWidth="selectWidth"
             :paddingLeft="paddingLeft"
           >
-            <slot name="selector" :selectedValue="selectedValue"></slot>
+            <slot
+              v-if="!simpleDropdown"
+              name="selector"
+              :selectedValue="selectedValue"
+            ></slot>
+            <select-text v-else>{{ selectedValue[OptionKey] }}</select-text>
           </selector>
           <Caret @click.stop="toggleCaretDropdown" v-if="dropDownArrowVisible">
             <icon
@@ -128,7 +133,19 @@
               @option-selected="optionSelected"
               @option-hovered="optionHovered"
             >
-              <slot name="dropdown"></slot>
+              <slot v-if="!simpleDropdown" name="dropdown"></slot>
+              <template v-else>
+                <Option
+                  v-for="item of dropdownOptions"
+                  :key="item.id"
+                  :value="item"
+                  :data-id="`dropdown_option_${dataId}_${value.id}`"
+                >
+                  <SelectText>
+                    {{ item[OptionKey] }}
+                  </SelectText>
+                </Option>
+              </template>
             </selectDropdown>
           </Teleport>
         </DropdownWrapper>
@@ -166,6 +183,7 @@ import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
+import Option from './option'
 import draggableInputHandle from '../../draggableInputHandle'
 
 const CARET_WIDTH = '30px'
@@ -183,6 +201,10 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
+const SelectText = styled.span`
+  font-size: 13px;
+`
+
 const selectorProps = {
   selectWidth: String,
   paddingLeft: String,
@@ -335,7 +357,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
       : props.fontColor};
   max-height: 300px;
   overflow-y: auto;
-  & > div[data-value='${(props) => props.hoveredValue}'] {
+  & > div[data-value='${(props) => JSON.stringify(props.hoveredValue)}'] {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
@@ -508,6 +530,20 @@ export default {
     dropdownMenuPosition: {
       type: String,
       default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
+    },
+
+    // This prop is used to enable the simple dropdown mode, we needed a key inorder to display desired properties
+    simpleDropdown: {
+      type: Boolean,
+      default: false
+    },
+    Options: {
+      type: Array,
+      default: () => []
+    },
+    OptionKey: {
+      type: String,
+      default: 'value'
     }
   },
 
@@ -520,6 +556,8 @@ export default {
     LabelWrapper,
     optionalLabel,
     InfoText,
+    Option,
+    SelectText,
     InputWrapper,
     DropdownWrapper,
     icon,
@@ -547,11 +585,15 @@ export default {
         left: null,
         top: null
       },
+      dropdownOptions: [],
       dropdownWidth: null,
       hoveredValue: null
     }
   },
   mounted() {
+    if (this.Options.length > 0) {
+      this.dropdownOptions = this.Options
+    }
     this.observeDropdownHeight()
     this.observeSelectWidth()
     window.addEventListener('resize', this.handleSetDropdownOffet)
@@ -597,6 +639,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
+      console.log(e)
       this.hoveredValue = e
     },
     mouseEnterHandler() {
@@ -618,16 +661,23 @@ 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
-        }
+      if (this.simpleDropdown) {
+        this.dropdownOptions = this.Options.filter((option) =>
+          option[this.OptionKey].toLowerCase().includes(value.toLowerCase())
+        )
+      } else {
+        const dropdownChildren = [...this.$refs.dropdown.$el.children]
+        dropdownChildren.forEach((el) => {
+          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+            el.style.display = 'none'
 
-        el.style.display = 'inherit'
-      })
+            return
+          }
+
+          el.style.display = 'inherit'
+        })
+      }
     },
     clickOutside(event) {
       const dropdownRef = this.$refs.dropdown

package/src/components/rangeSlider/index.vue

@@ -508,6 +508,8 @@ export default {
   },
   watch: {
     labels(newVal, oldVal) {
+      const overlapContainer = []
+
       //check items for overlap
       if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
         const labels = newVal.find((label) => label.placement === 'left')
@@ -515,9 +517,14 @@ export default {
         if (labels) {
           labels.value.forEach((label) => {
             label.selectedTariffs.forEach((tariff) => {
-              this.hasOverlap = this.checkOverlap(tariff, label.selectedTariffs)
+              const hasOverlap = this.checkOverlap(
+                tariff,
+                label.selectedTariffs
+              )
+
+              overlapContainer.push(hasOverlap)
 
-              if (this.hasOverlap) {
+              if (hasOverlap) {
                 const existing = this.OverlapId.find((id) => id === label.id)
 
                 if (!existing) this.OverlapId.push(label.id)
@@ -530,7 +537,8 @@ export default {
           })
         }
 
-        this.$emit('has-overlap', this.hasOverlap)
+        this.hasOverlap = overlapContainer.includes(true)
+        this.$emit('has-overlap', overlapContainer.includes(true))
       }
     }
   }