@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.6 → 7.4.4-EPDM-7260.8

package/package.json

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

package/src/components/filter/filterSettings.vue

@@ -261,6 +261,12 @@
         :text="buttonText.cancel"
         @click.native="$emit('on-cancel-view')"
       />
+      <reset-container v-if="!filterViews || !filterViews.length">
+        <reset-button @click="$emit('on-reset-filters')">
+          <icon :name="'update'" size="14px" :color="theme.colors.blue" />
+          <div>{{ $gettext('reset_filters') }}</div>
+        </reset-button>
+      </reset-container>
     </button-container>
   </container-wrapper>
 </template>
@@ -328,6 +334,16 @@ const ButtonContainer = styled.div`
   padding: 15px;
 `
 
+const ResetContainer = styled.div`
+  display: grid;
+  align-content: center;
+  margin-left: auto;
+  div {
+    margin-top: 0;
+    align-self: center;
+  }
+`
+
 const ColumnContainer = styled.div``
 
 const DragContainer = styled.div`
@@ -493,7 +509,8 @@ export default {
     ViewContainer,
     DeleteIcon,
     UpperContainer,
-    ResetButton
+    ResetButton,
+    ResetContainer
   },
   props: {
     filterData: {

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

@@ -43,6 +43,7 @@
           :fontColor="
             buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
           "
+          :fontSize="fontSize"
           :hasError="hasError"
           :isSearchBarVisible="isSearchBarVisible"
           :disabled="disabled"
@@ -50,8 +51,11 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :isDraggable="isDraggable"
-        > 
-          <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
+        >
+          <draggableInputHandle
+            v-if="isDraggable && !isSearchBarVisible"
+            :height="selectHeight"
+          />
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -108,6 +112,7 @@
               dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
             :selectedValue="selectedValue"
+            :fontSize="fontSize"
             @option-selected="optionSelected"
             @option-hovered="optionHovered"
             @mouseleave="optionLeave"
@@ -220,12 +225,15 @@ const selectButtonAttrs = {
   isSearchBarVisible: Boolean,
   showBorder: Boolean,
   isDraggable: Boolean,
+  fontSize: String
 }
 const selectButton = styled('div', selectButtonAttrs)`
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding-left:${(props) => (props.isSearchBarVisible ? '0' : props.isDraggable?'30px':'15px')};
+  padding-left: ${(props) =>
+    props.isSearchBarVisible ? '0' : props.isDraggable ? '30px' : '15px'};
   text-align: left;
   border-radius: 4px;
   min-height: ${(props) =>
@@ -256,8 +264,10 @@ const selectButton = styled('div', selectButtonAttrs)`
       : props.fontColor};
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
   overflow: hidden;
-  & >.handle{
-    border-right:${(props) =>props.hasError ? props.theme.colors.red : props.theme.colors.grey4} 1px solid;
+  & > .handle {
+    border-right: ${(props) =>
+        props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
+      1px solid;
   }
 `
 const selectDropdownAttrs = {
@@ -268,7 +278,8 @@ const selectDropdownAttrs = {
   optionWidth: String,
   hoveredIndex: Number,
   hoveredValue: Number | String,
-  selectedValue: Number | String
+  selectedValue: Number | String,
+  fontSize: String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
@@ -276,6 +287,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     position:absolute;
     top:5px;
     border:1px solid ${(props) => props.theme.colors.grey4}
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
     border-radius:4px;
     display: flex;
     flex-direction: column;

package/src/components/rangeSlider/index.vue

@@ -375,16 +375,15 @@ export default {
     },
     checkOverlap(value, tariffs) {
       // Check if the tariffs overlap
-      const { itemId } = value
       const min = parseFloat(value.min)
       const max = parseFloat(value.max)
 
       return tariffs.some((tariff) => {
-        if (tariff.id === itemId) return false
+        if (tariff.id === value.itemId) return false
 
         return (
-          (min === tariff.min ) ||
-          (max === tariff.max) ||
+          min === tariff.min ||
+          max === tariff.max ||
           (min > tariff.min && min < tariff.max) ||
           (max > tariff.min && max < tariff.max) ||
           (min < tariff.min && max > tariff.max)
@@ -426,7 +425,10 @@ export default {
         label: this.activeLabel
       })
 
-      this.hasOverlap = this.checkOverlap(item, this.activeLabel.selectedTariffs)
+      this.hasOverlap = this.checkOverlap(
+        item,
+        this.activeLabel.selectedTariffs
+      )
       this.showBarOptions = false
     },
     setBarOptions(bar) {
@@ -480,6 +482,18 @@ export default {
     // Remove the global click event listener to prevent memory leaks
     document.removeEventListener('click', this.handleOutsideClick)
     document.removeEventListener('keydown', this.onKeyDownDelete)
+  },
+  watch: {
+    tariffItems(item, oldData) {
+      if (item.length !== oldData.length) {
+        this.hasOverlap = this.checkOverlap(
+          {
+            itemId: 0
+          },
+          item
+        )
+      }
+    }
   }
 }
 </script>

package/src/mixins/inputValidations.js

@@ -41,6 +41,7 @@ export default {
             break
         }
       })
+      this.$emit('is-valid', !this.error)
     },
 
     resetError() {