5.3.2 release

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/picker-class.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.d.ts

@@ -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.js

@@ -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/swiper/swiper-src/components/core/breakpoints/getBreakpoint.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/swiper-src/components/core/breakpoints/setBreakpoint.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')) {

packages/core/components/swiper/swiper-src/components/core/core.scss

@@ -1,5 +1,5 @@
 :root {
-  --swiper-theme-color: $themeColor;
+  --swiper-theme-color: #{$themeColor};
 }
 .swiper-container {
   margin-left: auto;

packages/core/components/swiper/swiper-src/components/core/defaults.js

@@ -44,6 +44,7 @@ export default {
   slidesPerColumn: 1,
   slidesPerColumnFill: 'column',
   slidesPerGroup: 1,
+  slidesPerGroupSkip: 0,
   centeredSlides: false,
   centeredSlidesBounds: false,
   slidesOffsetBefore: 0, // in px

packages/core/components/swiper/swiper-src/components/core/events/onTouchEnd.js

@@ -238,11 +238,12 @@ export default function (event) {
   // Find current slide
   let stopIndex = 0;
   let groupSize = swiper.slidesSizesGrid[0];
-  for (let i = 0; i < slidesGrid.length; i += params.slidesPerGroup) {
-    if (typeof slidesGrid[i + params.slidesPerGroup] !== 'undefined') {
-      if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + params.slidesPerGroup]) {
+  for (let i = 0; i < slidesGrid.length; i += (i < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup)) {
+    const increment = (i < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup);
+    if (typeof slidesGrid[i + increment] !== 'undefined') {
+      if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {
         stopIndex = i;
-        groupSize = slidesGrid[i + params.slidesPerGroup] - slidesGrid[i];
+        groupSize = slidesGrid[i + increment] - slidesGrid[i];
       }
     } else if (currentPos >= slidesGrid[i]) {
       stopIndex = i;
@@ -252,6 +253,7 @@ export default function (event) {
 
   // Find current slide size
   const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
+  const increment = (stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup);
 
   if (timeDiff > params.longSwipesMs) {
     // Long touches
@@ -260,11 +262,11 @@ export default function (event) {
       return;
     }
     if (swiper.swipeDirection === 'next') {
-      if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + params.slidesPerGroup);
+      if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + increment);
       else swiper.slideTo(stopIndex);
     }
     if (swiper.swipeDirection === 'prev') {
-      if (ratio > (1 - params.longSwipesRatio)) swiper.slideTo(stopIndex + params.slidesPerGroup);
+      if (ratio > (1 - params.longSwipesRatio)) swiper.slideTo(stopIndex + increment);
       else swiper.slideTo(stopIndex);
     }
   } else {
@@ -276,13 +278,13 @@ export default function (event) {
     const isNavButtonTarget = swiper.navigation && (e.target === swiper.navigation.nextEl || e.target === swiper.navigation.prevEl);
     if (!isNavButtonTarget) {
       if (swiper.swipeDirection === 'next') {
-        swiper.slideTo(stopIndex + params.slidesPerGroup);
+        swiper.slideTo(stopIndex + increment);
       }
       if (swiper.swipeDirection === 'prev') {
         swiper.slideTo(stopIndex);
       }
     } else if (e.target === swiper.navigation.nextEl) {
-      swiper.slideTo(stopIndex + params.slidesPerGroup);
+      swiper.slideTo(stopIndex + increment);
     } else {
       swiper.slideTo(stopIndex);
     }

packages/core/components/swiper/swiper-src/components/core/slide/slideNext.js

@@ -2,12 +2,12 @@
 export default function (speed = this.params.speed, runCallbacks = true, internal) {
   const swiper = this;
   const { params, animating } = swiper;
+  const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup;
   if (params.loop) {
     if (animating) return false;
     swiper.loopFix();
     // eslint-disable-next-line
     swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
-    return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
   }
-  return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
+  return swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal);
 }

packages/core/components/swiper/swiper-src/components/core/slide/slideTo.js

@@ -10,8 +10,9 @@ export default function (index = 0, speed = this.params.speed, runCallbacks = tr
     return false;
   }
 
-  let snapIndex = Math.floor(slideIndex / params.slidesPerGroup);
-  if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
+  const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
+  let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
+  if (snapIndex >= slidesGrid.length) snapIndex = slidesGrid.length - 1;
 
   if ((activeIndex || params.initialSlide || 0) === (previousIndex || 0) && runCallbacks) {
     swiper.emit('beforeSlideChangeStart');

packages/core/components/swiper/swiper-src/components/core/slide/slideToClosest.js

@@ -2,7 +2,8 @@
 export default function (speed = this.params.speed, runCallbacks = true, internal, threshold = 0.5) {
   const swiper = this;
   let index = swiper.activeIndex;
-  const snapIndex = Math.floor(index / swiper.params.slidesPerGroup);
+  const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
+  const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
 
   const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
 
@@ -24,7 +25,7 @@ export default function (speed = this.params.speed, runCallbacks = true, interna
     }
   }
   index = Math.max(index, 0);
-  index = Math.min(index, swiper.snapGrid.length - 1);
+  index = Math.min(index, swiper.slidesGrid.length - 1);
 
   return swiper.slideTo(index, speed, runCallbacks, internal);
 }

packages/core/components/swiper/swiper-src/components/core/update/updateActiveIndex.js

@@ -28,7 +28,8 @@ export default function (newActiveIndex) {
   if (snapGrid.indexOf(translate) >= 0) {
     snapIndex = snapGrid.indexOf(translate);
   } else {
-    snapIndex = Math.floor(activeIndex / params.slidesPerGroup);
+    const skip = Math.min(params.slidesPerGroupSkip, activeIndex);
+    snapIndex = skip + Math.floor((activeIndex - skip) / params.slidesPerGroup);
   }
   if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
   if (activeIndex === previousIndex) {

packages/core/components/swiper/swiper-src/components/core/update/updateSlides.js

@@ -195,7 +195,7 @@ export default function () {
       slidesGrid.push(slidePosition);
     } else {
       if (params.roundLengths) slidePosition = Math.floor(slidePosition);
-      if ((index) % params.slidesPerGroup === 0) snapGrid.push(slidePosition);
+      if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) snapGrid.push(slidePosition);
       slidesGrid.push(slidePosition);
       slidePosition = slidePosition + slideSize + spaceBetween;
     }

packages/core/components/swiper/swiper-src/components/mousewheel/mousewheel.js

@@ -121,7 +121,11 @@ const Mousewheel = {
       e.preventDefault();
     }
 
-    if (!swiper.mouseEntered && !params.releaseOnEdges) return true;
+    let target = swiper.$el;
+    if (swiper.params.mousewheel.eventsTarged !== 'container') {
+      target = $(swiper.params.mousewheel.eventsTarged);
+    }
+    if (!swiper.mouseEntered && !target[0].contains(e.target) && !params.releaseOnEdges) return true;
 
     if (e.originalEvent) e = e.originalEvent; // jquery fix
     let delta = 0;

packages/core/components/swiper/swiper-src/components/navigation/navigation.scss

@@ -51,7 +51,7 @@
   .swiper-button-prev,
   .swiper-button-next {
     &.swiper-button-#{$navColorName} {
-      --swiper-navigation-color: $navColorValue;
+      --swiper-navigation-color: #{$navColorValue};
     }
   }
 }

packages/core/components/swiper/swiper-src/components/pagination/pagination.scss

@@ -141,7 +141,7 @@
 }
 @each $paginationColorName, $paginationColorValue in $colors {
   .swiper-pagination-#{$paginationColorName} {
-    --swiper-pagination-color: $paginationColorValue;
+    --swiper-pagination-color: #{$paginationColorValue};
   }
 }
 .swiper-pagination-lock {

packages/core/components/toolbar/toolbar.js

@@ -212,4 +212,12 @@ export default {
       });
     },
   },
+  vnode: {
+    tabbar: {
+      insert(vnode) {
+        const app = this;
+        app.toolbar.init(vnode.elm);
+      },
+    },
+  },
 };

packages/core/css/framework7.bundle.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 5.3.0
+ * Framework7 5.3.2
  * Full featured mobile HTML framework for building iOS & Android apps
  * http://framework7.io/
  *
  * Copyright 2014-2020 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: January 3, 2020
+ * Released on: January 18, 2020
  */
 
 /*====================