framework7 6.3.11 → 6.3.16

package/framework7-bundle.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 6.3.11
+ * Framework7 6.3.16
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 8, 2021
+ * Released on: February 10, 2022
  */
 
 /*====================
@@ -3116,6 +3116,14 @@ html.device-full-viewport body {
   height: var(--f7-tabbar-icon-size);
   line-height: var(--f7-tabbar-icon-size);
 }
+.tabbar .tab-link-highlight,
+.tabbar-labels .tab-link-highlight {
+  position: absolute;
+  height: 2px;
+  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
+  transition-duration: 300ms;
+  left: 0;
+}
 .tabbar-labels {
   --f7-toolbar-height: var(--f7-tabbar-labels-height);
 }
@@ -3376,14 +3384,6 @@ html.device-full-viewport body {
   overflow: hidden;
   position: relative;
 }
-.md .tabbar .tab-link-highlight,
-.md .tabbar-labels .tab-link-highlight {
-  position: absolute;
-  height: 2px;
-  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-  transition-duration: 300ms;
-  left: 0;
-}
 .md .tabbar-labels .tab-link,
 .md .tabbar-labels .link {
   padding-top: 7px;
@@ -3408,14 +3408,6 @@ html.device-full-viewport body {
   align-items: center;
   margin: 0;
 }
-.aurora .tabbar .tab-link-highlight,
-.aurora .tabbar-labels .tab-link-highlight {
-  position: absolute;
-  height: 2px;
-  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-  transition-duration: 300ms;
-  left: 0;
-}
 .aurora .tabbar .toolbar-inner,
 .aurora .tabbar-labels .toolbar-inner {
   padding-left: 0;
@@ -6774,6 +6766,7 @@ html.with-modal-dialog .page-content {
   }
   .popup:not(.popup-tablet-fullscreen).popup-behind {
     transform: translate3d(0, 0, 0) scale(0.9);
+    pointer-events: none;
   }
   .popup:not(.popup-tablet-fullscreen).popup-behind.modal-out {
     transform: translate3d(0, 100vh, 0) scale(0.9);
@@ -8535,10 +8528,10 @@ html.with-modal-preloader .page-content,
   width: 100%;
   height: 100%;
   position: absolute;
-  left: 0;
   top: 0;
-  transform: translate3d(-100%, 0, 0);
   transition-duration: 150ms;
+  left: 0;
+  transform: translate3d(-100%, 0, 0);
 }
 .progressbar-infinite {
   z-index: 15000;
@@ -8547,14 +8540,14 @@ html.with-modal-preloader .page-content,
 .progressbar-infinite:after {
   content: '';
   position: absolute;
-  left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  transform-origin: left center;
   transform: translate3d(0, 0, 0);
   display: block;
   background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
+  left: 0;
+  transform-origin: left center;
 }
 .progressbar-infinite.color-multi {
   background: none !important;

package/framework7-bundle.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 6.3.11
+ * Framework7 6.3.16
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 8, 2021
+ * Released on: February 10, 2022
  */
 
 (function (global, factory) {
@@ -9501,7 +9501,7 @@
       var $el = $(el);
       var app = router.app;
       var view = router.view;
-      var options = extend$1({
+      var options = extend$1(false, {
         animate: router.params.animate,
         browserHistory: true,
         replaceState: false
@@ -10209,6 +10209,16 @@
         }
 
         var previousPageRoute = $previousPage[0].f7Page.route;
+
+        if (navigateOptions.preload && $previousPage.hasClass('stacked')) {
+          loadBack(router, {
+            el: $previousPage
+          }, extend$1(navigateOptions, {
+            route: previousPageRoute
+          }));
+          return router;
+        }
+
         processRouteQueue.call(router, previousPageRoute, router.currentRoute, function () {
           loadBack(router, {
             el: $previousPage
@@ -15796,8 +15806,8 @@
     var Toolbar = {
       setHighlight: function setHighlight(tabbarEl) {
         var app = this;
-        if (app.theme === 'ios') return;
         var $tabbarEl = $(tabbarEl);
+        if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
         if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) return;
         var $highlightEl = $tabbarEl.find('.tab-link-highlight');
         var tabLinksCount = $tabbarEl.find('.tab-link').length;
@@ -19316,7 +19326,7 @@
           $progressbarEl.append($progressbarLine);
         }
 
-        $progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform("translate3d(" + (-100 + progressNormalized) + "%,0,0)");
+        $progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform("translate3d(" + (-100 + progressNormalized) * (app.rtl ? -1 : 1) + "%,0,0)");
         return $progressbarEl[0];
       },
       show: function show() {
@@ -21816,12 +21826,11 @@
           if ($tabLinkEl && $tabLinkEl.length > 0) {
             $tabLinkEl.addClass('tab-link-active'); // Material Highlight
 
-            if (app.theme !== 'ios' && app.toolbar) {
-              var $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
+            var $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
+            var hasHighlight = app.toolbar && $tabbarEl.length > 0 && ($tabbarEl.hasClass('tabbar-highlight') || app.theme !== 'ios');
 
-              if ($tabbarEl.length > 0) {
-                app.toolbar.setHighlight($tabbarEl);
-              }
+            if (hasHighlight) {
+              app.toolbar.setHighlight($tabbarEl);
             }
           }
         }
@@ -27496,17 +27505,34 @@
           allowTouchMove: true,
           hasTimePicker: calendar.params.timePicker && !calendar.params.rangePicker && !calendar.params.multiple
         });
-        calendar.dayFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-          day: 'numeric'
-        });
-        calendar.monthFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-          month: 'long'
-        });
-        calendar.yearFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-          year: 'numeric'
-        });
-        calendar.timeSelectorFormatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
-        var timeFormatCheckDate = calendar.timeSelectorFormatter.format(new Date()).toLowerCase();
+
+        calendar.dayFormatter = function (date) {
+          var formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+            day: 'numeric'
+          });
+          return formatter.format(date).replace(/日/, '');
+        };
+
+        calendar.monthFormatter = function (date) {
+          var formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+            month: 'long'
+          });
+          return formatter.format(date);
+        };
+
+        calendar.yearFormatter = function (date) {
+          var formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+            year: 'numeric'
+          });
+          return formatter.format(date);
+        };
+
+        calendar.timeSelectorFormatter = function (date) {
+          var formatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
+          return formatter.format(date);
+        };
+
+        var timeFormatCheckDate = calendar.timeSelectorFormatter(new Date()).toLowerCase();
         calendar.is12HoursFormat = timeFormatCheckDate.indexOf('pm') >= 0 || timeFormatCheckDate.indexOf('am') >= 0; // Auto names
 
         var _calendar$params = calendar.params,
@@ -27911,7 +27937,7 @@
 
         for (var i = 0; i < 24; i += 1) {
           var date = new Date().setMonth(i, 1);
-          var currentYear = calendar.yearFormatter.format(date);
+          var currentYear = calendar.yearFormatter(date);
 
           if (year && currentYear !== year) {
             if (yearStarted) yearEnded = true;
@@ -28210,7 +28236,7 @@
         }
 
         if ($el && $el.length > 0 && calendar.hasTimePicker) {
-          $el.find('.calendar-time-selector a').text(value && value.length ? calendar.timeSelectorFormatter.format(value[0]) : calendar.params.timePickerPlaceholder);
+          $el.find('.calendar-time-selector a').text(value && value.length ? calendar.timeSelectorFormatter(value[0]) : calendar.params.timePickerPlaceholder);
         }
 
         if ($inputEl && $inputEl.length || params.header) {
@@ -28641,9 +28667,9 @@
         var date = new Date(d);
         var year = date.getFullYear();
         var month = date.getMonth();
-        var localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter.format(date));
+        var localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
         if (localeMonth < 0) localeMonth = month;
-        var localeYear = calendar.yearFormatter.format(date);
+        var localeYear = calendar.yearFormatter(date);
 
         if (offset === 'next') {
           if (month === 11) date = new Date(year + 1, 0);else date = new Date(year, month + 1, 1);
@@ -28656,9 +28682,9 @@
         if (offset === 'next' || offset === 'prev') {
           month = date.getMonth();
           year = date.getFullYear();
-          localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter.format(date));
+          localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
           if (localeMonth < 0) localeMonth = month;
-          localeYear = calendar.yearFormatter.format(date);
+          localeYear = calendar.yearFormatter(date);
         }
 
         var currentValues = [];
@@ -28803,7 +28829,7 @@
             dayDate = new Date(dayDate);
             var dayYear = dayDate.getFullYear();
             var dayMonth = dayDate.getMonth();
-            var dayNumberDisplay = calendar.dayFormatter.format(dayDate); // prettier-ignore
+            var dayNumberDisplay = calendar.dayFormatter(dayDate); // prettier-ignore
 
             rowHtml += ("\n          <div data-year=\"" + dayYear + "\" data-month=\"" + dayMonth + "\" data-day=\"" + dayNumber + "\" class=\"calendar-day" + addClass + "\" data-date=\"" + dayYear + "-" + dayMonth + "-" + dayNumber + "\">\n            <span class=\"calendar-day-number\">" + dayNumberDisplay + eventsHtml + "</span>\n          </div>").trim();
           };
@@ -28927,7 +28953,7 @@
           return $jsx("div", {
             "data-year": year,
             class: "calendar-year-picker-item " + (year === currentYear ? 'calendar-year-picker-item-current' : '')
-          }, $jsx("span", null, calendar.yearFormatter.format(new Date().setFullYear(year))));
+          }, $jsx("span", null, calendar.yearFormatter(new Date().setFullYear(year))));
         }));
       } // eslint-disable-next-line
       ;
@@ -28936,7 +28962,7 @@
         var calendar = this;
         var value = calendar.value && calendar.value[0];
         var timeString;
-        if (value) timeString = calendar.timeSelectorFormatter.format(value);
+        if (value) timeString = calendar.timeSelectorFormatter(value);
         return $jsx("div", {
           class: "calendar-time-selector"
         }, $jsx("a", {