5.3.2 release

Author: nolimits4web

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 # Change Log
 
+# [v5.3.2](https://github.com/framework7io/framework7/compare/v5.3.0...v5.3.2) - January 18, 2019
+  * Core
+    * Component
+      * Now main app component will be created on app init respecting cordova's deviceready event
+    * Toolbar
+      * Fixed Tabbar init when it used in main app component
+    * Picker
+      * Added `backdrop` parameter support
+    * Swiper updated to latest 5.3.0
+      * Core
+        * New `slidesPerGroupSkip` behavior (#3361)
+        * New ratio-based breakpoints (#3389)
+        * Added SCSS interpolation (#3373, #3374)
+      * Mousehweel
+        * Fixed issue when it can fail on load (#3383)
+    * Touch
+      * Fixed issue when it could prevent Leaflet map controls on iOS 12.x
+  * Vue/React
+    * Navbar - fixed issue when it could disappear with custom transitions
+  * Minor fixes
+
 # [v5.3.0](https://github.com/framework7io/framework7/compare/v5.2.0...v5.3.0) - January 3, 2019
   * Core
     * Card

packages/core/components/app/app-class.js

@@ -109,30 +109,14 @@ class Framework7 extends Framework7Class {
         html.classList.remove('theme-dark');
       }
     };
+
     // Init
-    function init() {
-      if (Device.cordova && app.params.initOnDeviceReady) {
-        $(document).on('deviceready', () => {
-          app.init();
-        });
-      } else {
+    if (Device.cordova && app.params.initOnDeviceReady) {
+      $(document).on('deviceready', () => {
         app.init();
-      }
-    }
-    if (app.params.component || app.params.componentUrl) {
-      app.router.componentLoader(
-        app.params.component,
-        app.params.componentUrl,
-        { componentOptions: { el: app.root[0] } },
-        (el) => {
-          app.root = $(el);
-          app.root[0].f7 = app;
-          app.rootComponent = el.f7Component;
-          if (app.params.init) init();
-        }
-      );
-    } else if (app.params.init) {
-      init();
+      });
+    } else {
+      app.init();
     }
 
     // Return app instance
@@ -184,7 +168,24 @@ class Framework7 extends Framework7Class {
     if (app.mq.light) app.mq.light.removeListener(app.colorSchemeListener);
   }
 
-  init() {
+  initAppComponent(callback) {
+    const app = this;
+    app.router.componentLoader(
+      app.params.component,
+      app.params.componentUrl,
+      { componentOptions: { el: app.root[0] } },
+      (el) => {
+        app.root = $(el);
+        app.root[0].f7 = app;
+        app.rootComponent = el.f7Component;
+        if (callback) callback();
+      },
+      () => {}
+    );
+  }
+
+  // eslint-disable-next-line
+  _init() {
     const app = this;
     if (app.initialized) return app;
 
@@ -237,6 +238,17 @@ class Framework7 extends Framework7Class {
     return app;
   }
 
+  init() {
+    const app = this;
+    if (app.params.component || app.params.componentUrl) {
+      app.initAppComponent(() => {
+        app._init(); // eslint-disable-line
+      });
+    } else {
+      app._init(); // eslint-disable-line
+    }
+  }
+
   // eslint-disable-next-line
   loadModule(...args) {
     return Framework7.loadModule(...args);

packages/core/components/dialog/dialog.d.ts

@@ -60,7 +60,7 @@ export namespace Dialog {
     backdrop?: boolean
     /** When enabled, dialog will be closed on backdrop click. (default true) */
     closeByBackdropClick?: boolean
-    /** Whether the Dialog should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods. (default true) */
+    /** Whether the Dialog should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods. (default false) */
     animate?: boolean
     /** Dialog title. */
     title?: string
@@ -132,9 +132,9 @@ export namespace Dialog {
       confirm(text : string, callbackOk?: () => void, callbackCancel?: () => void) : Dialog
 
       /** create Prompt Dialog and open it */
-      prompt(text : string, title : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void) : Dialog
+      prompt(text : string, title : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void, defaultValue?: string) : Dialog
       /** create Prompt Dialog with default title and open it */
-      prompt(text : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void) : Dialog
+      prompt(text : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void, defaultValue?: string) : Dialog
 
       /** create Login Dialog and open it */
       login(text : string, title : string, callbackOk?: (username : string, password : string) => void, callbackCancel?: (username : string, password : string) => void) : Dialog

packages/core/components/picker.js

@@ -454,7 +454,7 @@ class Picker extends Framework7Class {
       targetEl: $inputEl,
       scrollToEl: params.scrollToInput ? $inputEl : undefined,
       content: picker.render(),
-      backdrop: isPopover,
+      backdrop: typeof params.backdrop !== 'undefined' ? params.backdrop : isPopover,
       on: {
         open() {
           const modal = this;

packages/core/components/picker/picker-class.js

@@ -121,6 +121,8 @@ export namespace Picker {
     sheetPush?: boolean
     /** Enables ability to close Picker sheet with swipe (default false) */
     sheetSwipeToClose?: boolean | undefined
+    /** Enables backdrop (dark semi transparent layer behind). (default undefined - based on Popover or Sheet defaults) */
+    backdrop?: boolean
     /** String with CSS selector or HTMLElement with related input element. */
     inputEl?: HTMLElement | CSSSelector
     /** Scroll viewport (page-content) to input when picker opened. (default true) */

packages/core/components/picker/picker.d.ts

@@ -39,6 +39,7 @@ export default {
       openIn: 'auto', // or 'popover' or 'sheet'
       sheetPush: false,
       sheetSwipeToClose: undefined,
+      backdrop: undefined, // uses Popover or Sheet defaults
       formatValue: null,
       inputEl: null,
       inputReadOnly: true,

packages/core/components/picker/picker.js

@@ -4,14 +4,20 @@ export default function (breakpoints) {
   // Get breakpoint for window width
   if (!breakpoints) return undefined;
   let breakpoint = false;
-  const points = [];
-  Object.keys(breakpoints).forEach((point) => {
-    points.push(point);
+
+  const points = Object.keys(breakpoints).map((point) => {
+    if (typeof point === 'string' && point.startsWith('@')) {
+      const minRatio = parseFloat(point.substr(1));
+      const value = window.innerHeight * minRatio;
+      return { value, point };
+    }
+    return { value: point, point };
   });
-  points.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
+
+  points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
   for (let i = 0; i < points.length; i += 1) {
-    const point = points[i];
-    if (point <= window.innerWidth) {
+    const { point, value } = points[i];
+    if (value <= window.innerWidth) {
       breakpoint = point;
     }
   }

packages/core/components/swiper.js

@@ -14,7 +14,7 @@ export default function () {
   if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
     const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
     if (breakpointOnlyParams) {
-      ['slidesPerView', 'spaceBetween', 'slidesPerGroup', 'slidesPerColumn'].forEach((param) => {
+      ['slidesPerView', 'spaceBetween', 'slidesPerGroup', 'slidesPerGroupSkip', 'slidesPerColumn'].forEach((param) => {
         const paramValue = breakpointOnlyParams[param];
         if (typeof paramValue === 'undefined') return;
         if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {