@eturnity/eturnity_reusable_components 1.2.85-EPDM-3013.2 → 1.2.85-EPDM-3013.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.85-EPDM-3013.2",
+  "version": "1.2.85-EPDM-3013.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/filter/filterSettings.vue

@@ -113,14 +113,14 @@
               </template>
             </select-component>
             <section-container v-else-if="isRangeSelector(filter.filter_type)">
-              <row-label>{{
-                filter.unit
-                  ? filter.label + ' (' + filter.unit + ')'
-                  : filter.label
-              }}</row-label>
+              <row-label>{{ filter.label }}</row-label>
               <grid-container>
                 <input-number
-                  :placeholder="$gettext('min_amount')"
+                  :placeholder="
+                    filter.unit
+                      ? $gettext('min_amount') + ' (' + filter.unit + ')'
+                      : $gettext('min_amount')
+                  "
                   :numberPrecision="0"
                   :value="filter.range.start"
                   @input-change="
@@ -136,7 +136,11 @@
                   :unitName="filter.unit"
                 />
                 <input-number
-                  :placeholder="$gettext('max_amount')"
+                  :placeholder="
+                    filter.unit
+                      ? $gettext('max_amount') + ' (' + filter.unit + ')'
+                      : $gettext('max_amount')
+                  "
                   :numberPrecision="0"
                   :value="filter.range.end"
                   @input-change="
@@ -153,7 +157,10 @@
                 />
               </grid-container>
             </section-container>
-            <section-container v-else-if="isDateSelector(filter.filter_type)">
+            <section-container
+              v-else-if="isDateSelector(filter.filter_type)"
+              @click.stop
+            >
               <row-label>{{ filter.label }}</row-label>
               <grid-container>
                 <date-picker-input
@@ -326,7 +333,7 @@ const DragContainer = styled.div`
 
 const RowContainer = styled('div', TitleAttrs)`
   padding: 10px 14px;
-  width: 260px;
+  width: 300px;
 
   ${({ showBorder, theme }) =>
     showBorder &&
@@ -431,7 +438,7 @@ const ViewContainer = styled('div', ViewContainerAttrs)`
   padding: 10px 14px;
 
   max-width: ${(props) =>
-    props.maxWidth && props.maxWidth > 260 ? props.maxWidth + 'ch' : '260px'};
+    props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
 `
 
 export default {

package/src/components/filter/index.vue

@@ -95,7 +95,11 @@ export default {
       }, 100)
     },
     onFilterChange(data) {
+      // this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
+      // because clicking the calendar does not trigger the @focus
+      this.preventOutsideClick = true
       this.$emit('on-filter-settings-change', data)
+      this.onPreventClose(false)
     },
     onCancelSettings() {
       this.onToggleDropdown()