framework7 7.0.0-beta.1 → 7.0.0-beta.10

package/framework7-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 7.0.0-beta.1
+ * Framework7 7.0.0-beta.10
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: October 28, 2021
  */
 
 (function (global, factory) {
@@ -17,7 +17,7 @@
 }(this, (function () { 'use strict';
 
     /**
-     * SSR Window 4.0.0
+     * SSR Window 4.0.1
      * Better handling for window object in SSR environment
      * https://github.com/nolimits4web/ssr-window
      *
@@ -25,7 +25,7 @@
      *
      * Licensed under MIT
      *
-     * Released on: August 25, 2021
+     * Released on: October 27, 2021
      */
 
     /* eslint-disable no-param-reassign */
@@ -196,7 +196,7 @@
     }
 
     /**
-     * Dom7 4.0.0
+     * Dom7 4.0.1
      * Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API
      * https://framework7.io/docs/dom7.html
      *
@@ -204,7 +204,7 @@
      *
      * Licensed under MIT
      *
-     * Released on: August 25, 2021
+     * Released on: October 27, 2021
      */
     /* eslint-disable no-proto */
 
@@ -2758,7 +2758,7 @@
               return;
             }
 
-            modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.js`;
+            modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.lazy.js`;
           } else {
             modulePath = moduleToLoad;
           }
@@ -2845,7 +2845,7 @@
             });
           });
           const styleLoad = new Promise(resolveStyle => {
-            Framework7.request.get(modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
+            Framework7.request.get(modulePath.replace('.lazy.js', app.rtl ? '.rtl.css' : '.css').replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
               const styleEl = document.createElement('style');
               styleEl.innerHTML = styleContent;
               $('head').append(styleEl);
@@ -2897,7 +2897,7 @@
           lazyModulesPath: null,
           initOnDeviceReady: true,
           init: true,
-          autoDarkTheme: false,
+          autoDarkMode: false,
           iosTranslucentBars: true,
           iosTranslucentModals: true,
           component: undefined,
@@ -2970,7 +2970,7 @@
           app.el = app.$el[0];
           app.el.f7 = app;
           app.rtl = $rootEl.css('direction') === 'rtl';
-        } // Auto Dark Theme
+        } // Auto Dark Mode
 
 
         const DARK = '(prefers-color-scheme: dark)';
@@ -2993,13 +2993,13 @@
           const html = document.querySelector('html');
 
           if (media === DARK) {
-            html.classList.add('theme-dark');
-            app.darkTheme = true;
-            app.emit('darkThemeChange', true);
+            html.classList.add('dark');
+            app.darkMode = true;
+            app.emit('darkModeChange', true);
           } else if (media === LIGHT) {
-            html.classList.remove('theme-dark');
-            app.darkTheme = false;
-            app.emit('darkThemeChange', false);
+            html.classList.remove('dark');
+            app.darkMode = false;
+            app.emit('darkModeChange', false);
           }
         };
 
@@ -3016,7 +3016,7 @@
         }
       }
 
-      enableAutoDarkTheme() {
+      enableAutoDarkMode() {
         const window = getWindow();
         const document = getDocument();
         if (!window.matchMedia) return;
@@ -3029,17 +3029,17 @@
         }
 
         if (app.mq.dark && app.mq.dark.matches) {
-          html.classList.add('theme-dark');
-          app.darkTheme = true;
-          app.emit('darkThemeChange', true);
+          html.classList.add('dark');
+          app.darkMode = true;
+          app.emit('darkModeChange', true);
         } else if (app.mq.light && app.mq.light.matches) {
-          html.classList.remove('theme-dark');
-          app.darkTheme = false;
-          app.emit('darkThemeChange', false);
+          html.classList.remove('dark');
+          app.darkMode = false;
+          app.emit('darkModeChange', false);
         }
       }
 
-      disableAutoDarkTheme() {
+      disableAutoDarkMode() {
         const window = getWindow();
         if (!window.matchMedia) return;
         const app = this;
@@ -3072,11 +3072,11 @@
 
           if (app.rtl) {
             $('html').attr('dir', 'rtl');
-          } // Auto Dark Theme
+          } // Auto Dark Mode
 
 
-          if (app.params.autoDarkTheme) {
-            app.enableAutoDarkTheme();
+          if (app.params.autoDarkMode) {
+            app.enableAutoDarkMode();
           } // Watch for online/offline state
 
 
@@ -6631,52 +6631,6 @@
       return router;
     }
 
-    function openIn(router, url, options) {
-      const navigateOptions = {
-        url,
-        route: {
-          path: url,
-          options: { ...options,
-            openIn: undefined
-          }
-        }
-      };
-      const params = { ...options
-      };
-
-      if (options.openIn === 'popup') {
-        params.content = `<div class="popup popup-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
-        navigateOptions.route.popup = params;
-      }
-
-      if (options.openIn === 'loginScreen') {
-        params.content = `<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
-        navigateOptions.route.loginScreen = params;
-      }
-
-      if (options.openIn === 'sheet') {
-        params.content = `<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
-        navigateOptions.route.sheet = params;
-      }
-
-      if (options.openIn === 'popover') {
-        params.targetEl = options.clickedEl || options.targetEl;
-        params.content = `<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
-        navigateOptions.route.popover = params;
-      }
-
-      if (options.openIn.indexOf('panel') >= 0) {
-        const parts = options.openIn.split(':');
-        const side = parts[1] || 'left';
-        const effect = parts[2] || 'cover';
-        params.targetEl = options.clickedEl || options.targetEl;
-        params.content = `<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
-        navigateOptions.route.panel = params;
-      }
-
-      return router.navigate(navigateOptions);
-    }
-
     function navigate(navigateParams, navigateOptions = {}) {
       const router = this;
       if (router.swipeBackActive) return router;
@@ -6766,7 +6720,7 @@
       }
 
       if (options.openIn && (!router.params.ignoreOpenIn || router.params.ignoreOpenIn && router.history.length > 0)) {
-        return openIn(router, navigateUrl, options);
+        return router.openIn(router, navigateUrl, options);
       }
 
       options.route = route;
@@ -10240,6 +10194,52 @@
     var RouterComponentLoaderModule = {
       name: 'routerComponentLoader',
       proto: {
+        openIn(router, url, options) {
+          const navigateOptions = {
+            url,
+            route: {
+              path: url,
+              options: { ...options,
+                openIn: undefined
+              }
+            }
+          };
+          const params = { ...options
+          };
+
+          if (options.openIn === 'popup') {
+            params.content = `<div class="popup popup-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+            navigateOptions.route.popup = params;
+          }
+
+          if (options.openIn === 'loginScreen') {
+            params.content = `<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+            navigateOptions.route.loginScreen = params;
+          }
+
+          if (options.openIn === 'sheet') {
+            params.content = `<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
+            navigateOptions.route.sheet = params;
+          }
+
+          if (options.openIn === 'popover') {
+            params.targetEl = options.clickedEl || options.targetEl;
+            params.content = `<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
+            navigateOptions.route.popover = params;
+          }
+
+          if (options.openIn.indexOf('panel') >= 0) {
+            const parts = options.openIn.split(':');
+            const side = parts[1] || 'left';
+            const effect = parts[2] || 'cover';
+            params.targetEl = options.clickedEl || options.targetEl;
+            params.content = `<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+            navigateOptions.route.panel = params;
+          }
+
+          return router.navigate(navigateOptions);
+        },
+
         componentLoader(component, componentUrl, options = {}, resolve, reject) {
           const router = this;
           const {
@@ -16386,6 +16386,7 @@
               $el.removeClass('modal-in-swipe-step');
               $el.trigger('sheet:stepprogress', 1);
               sheet.emit('local::stepProgress sheetStepProgress', sheet, 1);
+              sheet.emit('local::_swipeStep', false);
               $el.trigger('sheet:stepopen');
               sheet.emit('local::stepOpen sheetStepOpen', sheet);
 
@@ -16404,6 +16405,7 @@
                 $el.addClass('modal-in-swipe-step');
                 $el.trigger('sheet:stepprogress', 0);
                 sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+                sheet.emit('local::_swipeStep', true);
                 $el.trigger('sheet:stepclose');
                 sheet.emit('local::stepClose sheetStepClose', sheet);
 
@@ -16419,6 +16421,7 @@
               $el.addClass('modal-in-swipe-step');
               $el.trigger('sheet:stepprogress', 0);
               sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+              sheet.emit('local::_swipeStep', true);
               $el.trigger('sheet:stepclose');
               sheet.emit('local::stepClose sheetStepClose', sheet);
 
@@ -16440,6 +16443,7 @@
                 $el.removeClass('modal-in-swipe-step');
                 $el.trigger('sheet:stepprogress', 1);
                 sheet.emit('local::stepProgress sheetStepProgress', sheet, 1);
+                sheet.emit('local::_swipeStep', false);
                 $el.trigger('sheet:stepopen');
                 sheet.emit('local::stepOpen sheetStepOpen', sheet);
 
@@ -16460,6 +16464,7 @@
                 $el.addClass('modal-in-swipe-step');
                 $el.trigger('sheet:stepprogress', 0);
                 sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+                sheet.emit('local::_swipeStep', true);
                 $el.trigger('sheet:stepclose');
                 sheet.emit('local::stepClose sheetStepClose', sheet);
 
@@ -16486,6 +16491,7 @@
 
           if (!byResize) {
             $el.addClass('modal-in-swipe-step');
+            sheet.emit('local::_swipeStep', true);
           }
         };
 
@@ -16550,6 +16556,7 @@
         sheet.on('close', () => {
           if (sheet.params.swipeToStep) {
             $el.removeClass('modal-in-swipe-step');
+            sheet.emit('local::_swipeStep', false);
             app.off('resize', onResize);
           }
 
@@ -16581,6 +16588,7 @@
 
         sheet.stepOpen = function stepOpen() {
           $el.removeClass('modal-in-swipe-step');
+          sheet.emit('local::_swipeStep', false);
 
           if (sheet.push) {
             if (!pushOffset) {
@@ -16596,6 +16604,7 @@
 
         sheet.stepClose = function stepClose() {
           $el.addClass('modal-in-swipe-step');
+          sheet.emit('local::_swipeStep', true);
 
           if (sheet.push) {
             sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
@@ -16604,6 +16613,7 @@
 
         sheet.stepToggle = function stepToggle() {
           $el.toggleClass('modal-in-swipe-step');
+          sheet.emit('local::_swipeStep', $el.hasClass('modal-in-swipe-step'));
         };
 
         $el[0].f7Modal = sheet;
@@ -30650,7 +30660,7 @@
             foundItems = sb.virtualList.params.searchAll(vlQuery, sb.virtualList.items) || [];
           } else if (sb.virtualList.params.searchByItem) {
             for (let i = 0; i < sb.virtualList.items.length; i += 1) {
-              if (sb.virtualList.params.searchByItem(vlQuery, sb.virtualList.params.items[i], i)) {
+              if (sb.virtualList.params.searchByItem(vlQuery, sb.virtualList.items[i], i)) {
                 foundItems.push(i);
               }
             }
@@ -34642,7 +34652,8 @@
       const params = swiper.params;
       const {
         slides,
-        rtlTranslate: rtl
+        rtlTranslate: rtl,
+        snapGrid
       } = swiper;
       if (slides.length === 0) return;
       if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset();
@@ -34662,6 +34673,7 @@
         }
 
         const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
+        const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
         const slideBefore = -(offsetCenter - slideOffset);
         const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
         const isVisible = slideBefore >= 0 && slideBefore < swiper.size - 1 || slideAfter > 1 && slideAfter <= swiper.size || slideBefore <= 0 && slideAfter >= swiper.size;
@@ -34673,6 +34685,7 @@
         }
 
         slide.progress = rtl ? -slideProgress : slideProgress;
+        slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;
       }
 
       swiper.visibleSlides = $$1(swiper.visibleSlides);
@@ -35552,8 +35565,9 @@
         $wrapperEl
       } = swiper; // Remove duplicated slides
 
-      $wrapperEl.children(`.${params.slideClass}.${params.slideDuplicateClass}`).remove();
-      let slides = $wrapperEl.children(`.${params.slideClass}`);
+      const $selector = $$1($wrapperEl.children()[0].parentNode);
+      $selector.children(`.${params.slideClass}.${params.slideDuplicateClass}`).remove();
+      let slides = $selector.children(`.${params.slideClass}`);
 
       if (params.loopFillGroupWithBlank) {
         const blankSlidesNum = params.slidesPerGroup - slides.length % params.slidesPerGroup;
@@ -35561,10 +35575,10 @@
         if (blankSlidesNum !== params.slidesPerGroup) {
           for (let i = 0; i < blankSlidesNum; i += 1) {
             const blankNode = $$1(document.createElement('div')).addClass(`${params.slideClass} ${params.slideBlankClass}`);
-            $wrapperEl.append(blankNode);
+            $selector.append(blankNode);
           }
 
-          slides = $wrapperEl.children(`.${params.slideClass}`);
+          slides = $selector.children(`.${params.slideClass}`);
         }
       }
 
@@ -35593,11 +35607,11 @@
       });
 
       for (let i = 0; i < appendSlides.length; i += 1) {
-        $wrapperEl.append($$1(appendSlides[i].cloneNode(true)).addClass(params.slideDuplicateClass));
+        $selector.append($$1(appendSlides[i].cloneNode(true)).addClass(params.slideDuplicateClass));
       }
 
       for (let i = prependSlides.length - 1; i >= 0; i -= 1) {
-        $wrapperEl.prepend($$1(prependSlides[i].cloneNode(true)).addClass(params.slideDuplicateClass));
+        $selector.prepend($$1(prependSlides[i].cloneNode(true)).addClass(params.slideDuplicateClass));
       }
     }
 
@@ -42473,17 +42487,31 @@
 
       const setTranslate = () => {
         const {
-          slides
+          slides,
+          $wrapperEl,
+          slidesSizesGrid
         } = swiper;
         const params = swiper.params.creativeEffect;
         const {
           progressMultiplier: multiplier
         } = params;
+        const isCenteredSlides = swiper.params.centeredSlides;
+
+        if (isCenteredSlides) {
+          const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
+          $wrapperEl.transform(`translateX(calc(50% - ${margin}px))`);
+        }
 
         for (let i = 0; i < slides.length; i += 1) {
           const $slideEl = slides.eq(i);
           const slideProgress = $slideEl[0].progress;
           const progress = Math.min(Math.max($slideEl[0].progress, -params.limitProgress), params.limitProgress);
+          let originalProgress = progress;
+
+          if (!isCenteredSlides) {
+            originalProgress = Math.min(Math.max($slideEl[0].originalProgress, -params.limitProgress), params.limitProgress);
+          }
+
           const offset = $slideEl[0].swiperSlideOffset;
           const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];
           const r = [0, 0, 0];
@@ -42520,8 +42548,8 @@
           $slideEl[0].style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
           const translateString = t.join(', ');
           const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;
-          const scaleString = progress < 0 ? `scale(${1 + (1 - data.scale) * progress * multiplier})` : `scale(${1 - (1 - data.scale) * progress * multiplier})`;
-          const opacityString = progress < 0 ? 1 + (1 - data.opacity) * progress * multiplier : 1 - (1 - data.opacity) * progress * multiplier;
+          const scaleString = originalProgress < 0 ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;
+          const opacityString = originalProgress < 0 ? 1 + (1 - data.opacity) * originalProgress * multiplier : 1 - (1 - data.opacity) * originalProgress * multiplier;
           const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`; // Set shadows
 
           if (custom && data.shadow || !custom) {
@@ -42699,7 +42727,7 @@
     }
 
     /**
-     * Swiper 7.0.8
+     * Swiper 7.2.0
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
@@ -42707,7 +42735,7 @@
      *
      * Released under the MIT License
      *
-     * Released on: October 4, 2021
+     * Released on: October 27, 2021
      */
 
     const modules = [Virtual, Keyboard, Mousewheel, Navigation, Pagination, Scrollbar, Parallax, Zoom, Lazy, Controller, A11y, History, HashNavigation, Autoplay, Thumb, freeMode, Grid, Manipulation, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCreative, EffectCards];
@@ -49174,7 +49202,7 @@
         const self = this;
         self.popover = self.app.popover.create({
           content: `
-        <div class="popover theme-dark text-editor-popover">
+        <div class="popover dark text-editor-popover">
           <div class="popover-inner">${self.renderButtons()}</div>
         </div>
       `,