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

package/package.json

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

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

@@ -79,12 +79,7 @@
             :selectWidth="selectWidth"
             :paddingLeft="paddingLeft"
           >
-            <slot
-              v-if="!simpleDropdown"
-              name="selector"
-              :selectedValue="selectedValue"
-            ></slot>
-            <select-text v-else>{{ selectedValue[OptionKey] }}</select-text>
+            <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown" v-if="dropDownArrowVisible">
             <icon
@@ -133,19 +128,7 @@
               @option-selected="optionSelected"
               @option-hovered="optionHovered"
             >
-              <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>
+              <slot name="dropdown"></slot>
             </selectDropdown>
           </Teleport>
         </DropdownWrapper>
@@ -183,7 +166,6 @@ 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'
@@ -201,10 +183,6 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
-const SelectText = styled.span`
-  font-size: 13px;
-`
-
 const selectorProps = {
   selectWidth: String,
   paddingLeft: String,
@@ -357,7 +335,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
       : props.fontColor};
   max-height: 300px;
   overflow-y: auto;
-  & > div[data-value='${(props) => JSON.stringify(props.hoveredValue)}'] {
+  & > div[data-value='${(props) => props.hoveredValue}'] {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
@@ -373,7 +351,7 @@ const inputAttrs = { alignItems: String, hasLabel: Boolean, minWidth: String }
 const InputWrapper = styled('div', inputAttrs)`
   position: relative;
   display: grid;
-  width: max-content;
+  width: 100%;
   min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
   align-items: center;
   gap: 8px;
@@ -530,20 +508,6 @@ 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'
     }
   },
 
@@ -556,8 +520,6 @@ export default {
     LabelWrapper,
     optionalLabel,
     InfoText,
-    Option,
-    SelectText,
     InputWrapper,
     DropdownWrapper,
     icon,
@@ -571,11 +533,7 @@ export default {
   data() {
     return {
       selectedValue: null,
-      paddingLeft: this.isDraggable
-        ? '30px'
-        : this.leftPadding
-        ? this.leftPadding
-        : '15px',
+      paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
       isDropdownOpen: false,
       isActive: false,
       textSearch: '',
@@ -585,15 +543,11 @@ 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)
@@ -639,7 +593,6 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      console.log(e)
       this.hoveredValue = e
     },
     mouseEnterHandler() {
@@ -661,23 +614,16 @@ 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'
 
-      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'
-
-            return
-          }
+          return
+        }
 
-          el.style.display = 'inherit'
-        })
-      }
+        el.style.display = 'inherit'
+      })
     },
     clickOutside(event) {
       const dropdownRef = this.$refs.dropdown
@@ -838,12 +784,9 @@ export default {
         return Number(item.replace('px', ''))
       }
 
-      const value =
-        this.selectWidth === '100%'
-          ? '100%'
-          : removePX(this.selectWidth) - removePX(CARET_WIDTH)
-
-      return value + 'px'
+      return this.selectWidth === '100%'
+        ? '100%'
+        : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
     },
     getOptionWidth() {
       if (this.optionWidth) return this.optionWidth

package/src/components/rangeSlider/index.vue

@@ -528,15 +528,15 @@ export default {
                 const existing = this.OverlapId.find((id) => id === label.id)
 
                 if (!existing) this.OverlapId.push(label.id)
-                return
-              } else
-                this.OverlapId = this.OverlapId
-                  ? this.OverlapId.filter((id) => id !== label.id)
-                  : []
+              }
             })
           })
         }
 
+        if (!overlapContainer.includes(true)) {
+          this.OverlapId = []
+        }
+
         this.hasOverlap = overlapContainer.includes(true)
         this.$emit('has-overlap', overlapContainer.includes(true))
       }