5.7.5 release

Author: nolimits4web

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Change Log
 
+# [v5.7.5](https://github.com/framework7io/framework7/compare/v5.7.2...v5.7.5) - May 16, 2020
+  * Core
+    * Input
+      * Now `app.input.validate()` and `app.input.validateInputs()` should correctly work with readonly inputs (like in Calendar, Picker, Color Picker, etc.)
+    * Range
+      * Added support for `scaleSteps: 1`
+      * Fixed issue when it didn't update size in parent resizable panel
+    * Swiper updated to latest 5.4.0
+      * Hash Navigation
+        * Added `hashChange` and `hashSet` events (#3557)
+      * Lazy
+        * Added support for `<picture>` lazy loading (#3560)
+      * Mousewheel
+        * Potentially improved vertical scrolling issues on Windows/Linux
+      * `History` and `Hash Navigation` modules are now included in Framework7 version of Swiper
+    * Toast
+      * Added `horizontalPosition` parameter - to set horizontal alignment on wide screen
+    * Touch
+      * Tweaked touch events detection
+  * React/Vue/Svelte
+    * Fab
+      * Fixed issue when it rendered not correctly without icon
+    * Chip
+      * Now it has default slot which goes to text label
+
 # [v5.7.2](https://github.com/framework7io/framework7/compare/v5.7.1...v5.7.2) - May 9, 2020
   * Core
     * Autocomplete

packages/core/components/calendar.css

@@ -96,13 +96,19 @@ class Calendar extends Framework7Class {
         calendar.$inputEl.on('input:clear', onInputClear);
         if (calendar.params.inputReadOnly) {
           calendar.$inputEl.on('focus mousedown', onInputFocus);
+          if (calendar.$inputEl[0]) {
+            calendar.$inputEl[0].f7ValidateReadonly = true;
+          }
         }
       },
       detachInputEvents() {
         calendar.$inputEl.off('click', onInputClick);
         calendar.$inputEl.off('input:clear', onInputClear);
         if (calendar.params.inputReadOnly) {
           calendar.$inputEl.off('focus mousedown', onInputFocus);
+          if (calendar.$inputEl[0]) {
+            delete calendar.$inputEl[0].f7ValidateReadonly;
+          }
         }
       },
       attachHtmlEvents() {
@@ -1613,8 +1619,16 @@ class Calendar extends Framework7Class {
     calendar.opening = false;
     calendar.closing = true;
 
-    if (calendar.$inputEl && app.theme === 'md') {
-      calendar.$inputEl.trigger('blur');
+    if (calendar.$inputEl) {
+      if (app.theme === 'md') {
+        calendar.$inputEl.trigger('blur');
+      } else {
+        const validate = calendar.$inputEl.attr('validate');
+        const required = calendar.$inputEl.attr('required');
+        if (validate && required) {
+          app.input.validate(calendar.$inputEl);
+        }
+      }
     }
     if (calendar.detachCalendarEvents) {
       calendar.detachCalendarEvents();

packages/core/components/calendar.js

@@ -64,6 +64,11 @@
     position: relative;
     z-index: 1;
   }
+  .calendar-month-picker,
+  .calendar-year-picker,
+  .calendar-time-picker {
+    border-radius: var(--f7-popover-border-radius);
+  }
 }
 .calendar-header {
   width: 100%;

packages/core/components/calendar.rtl.css

@@ -99,12 +99,18 @@ class ColorPicker extends Framework7Class {
         self.$inputEl.on('click', onInputClick);
         if (self.params.inputReadOnly) {
           self.$inputEl.on('focus mousedown', onInputFocus);
+          if (self.$inputEl[0]) {
+            self.$inputEl[0].f7ValidateReadonly = true;
+          }
         }
       },
       detachInputEvents() {
         self.$inputEl.off('click', onInputClick);
         if (self.params.inputReadOnly) {
           self.$inputEl.off('focus mousedown', onInputFocus);
+          if (self.$inputEl[0]) {
+            delete self.$inputEl[0].f7ValidateReadonly;
+          }
         }
       },
       attachTargetEvents() {
@@ -626,8 +632,16 @@ class ColorPicker extends Framework7Class {
     // Detach events
     self.detachEvents();
 
-    if (self.$inputEl && app.theme === 'md') {
-      self.$inputEl.trigger('blur');
+    if (self.$inputEl) {
+      if (app.theme === 'md') {
+        self.$inputEl.trigger('blur');
+      } else {
+        const validate = self.$inputEl.attr('validate');
+        const required = self.$inputEl.attr('required');
+        if (validate && required) {
+          app.input.validate(self.$inputEl);
+        }
+      }
     }
     params.modules.forEach((m) => {
       if (typeof m === 'string' && modules[m] && modules[m].destroy) {