framework7 7.0.8 → 8.0.0-beta.1

package/components/modal/modal-class.js

@@ -4,31 +4,30 @@ import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 const openedModals = [];
 const dialogsQueue = [];
-
 function clearDialogsQueue() {
   if (dialogsQueue.length === 0) return;
   const dialog = dialogsQueue.shift();
   dialog.open();
 }
-
 class Modal extends Framework7Class {
   constructor(app, params) {
     super(params, [app]);
     const modal = this;
-    const defaults = {}; // Extend defaults with modules params
+    const defaults = {};
 
+    // Extend defaults with modules params
     modal.useModulesParams(defaults);
     modal.params = extend(defaults, params);
     modal.opened = false;
     let $containerEl = modal.params.containerEl ? $(modal.params.containerEl).eq(0) : app.$el;
     if (!$containerEl.length) $containerEl = app.$el;
     modal.$containerEl = $containerEl;
-    modal.containerEl = $containerEl[0]; // Install Modules
+    modal.containerEl = $containerEl[0];
 
+    // Install Modules
     modal.useModules();
     return this;
   }
-
   onOpen() {
     const modal = this;
     modal.opened = true;
@@ -37,13 +36,11 @@ class Modal extends Framework7Class {
     modal.$el.trigger(`modal:open ${modal.type.toLowerCase()}:open`);
     modal.emit(`local::open modalOpen ${modal.type}Open`, modal);
   }
-
   onOpened() {
     const modal = this;
     modal.$el.trigger(`modal:opened ${modal.type.toLowerCase()}:opened`);
     modal.emit(`local::opened modalOpened ${modal.type}Opened`, modal);
   }
-
   onClose() {
     const modal = this;
     modal.opened = false;
@@ -53,22 +50,18 @@ class Modal extends Framework7Class {
     modal.$el.trigger(`modal:close ${modal.type.toLowerCase()}:close`);
     modal.emit(`local::close modalClose ${modal.type}Close`, modal);
   }
-
   onClosed() {
     const modal = this;
     if (!modal.type || !modal.$el) return;
     modal.$el.removeClass('modal-out');
     modal.$el.hide();
-
     if (modal.params.backdrop && (modal.params.backdropUnique || modal.forceBackdropUnique) && modal.$backdropEl) {
       modal.$backdropEl.remove();
     }
-
     modal.$el.trigger(`modal:closed ${modal.type.toLowerCase()}:closed`);
     modal.emit(`local::closed modalClosed ${modal.type}Closed`, modal);
   }
-
-  open(animateModal) {
+  open(animateModal, force) {
     const modal = this;
     const document = getDocument();
     const app = modal.app;
@@ -79,18 +72,14 @@ class Modal extends Framework7Class {
     if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
       animate = modal.params.animate;
     }
-
     if (!$el || $el.hasClass('modal-in')) {
       if (animateModal === false && $el[0] && type !== 'dialog') {
         $el[0].style.display = 'block';
       }
-
-      return modal;
+      if (!force) return modal;
     }
-
     if (type === 'dialog' && app.params.modal.queueDialogs) {
       let pushToQueue;
-
       if ($('.dialog.modal-in').length > 0) {
         pushToQueue = true;
       } else if (openedModals.length > 0) {
@@ -98,16 +87,13 @@ class Modal extends Framework7Class {
           if (openedModal.type === 'dialog') pushToQueue = true;
         });
       }
-
       if (pushToQueue) {
         dialogsQueue.push(modal);
         return modal;
       }
     }
-
     const $modalParentEl = $el.parent();
     const wasInDom = $el.parents(document).length > 0;
-
     if (!$modalParentEl.is(modal.$containerEl)) {
       modal.$containerEl.append($el);
       modal.once(`${type}Closed`, () => {
@@ -117,19 +103,17 @@ class Modal extends Framework7Class {
           $el.remove();
         }
       });
-    } // Show Modal
-
-
+    }
+    // Show Modal
     $el.show();
-
     if (modal.params.backdrop && (modal.params.backdropUnique || modal.forceBackdropUnique) && modal.$backdropEl) {
       modal.$backdropEl.insertBefore($el);
     }
-    /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
 
+    /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
+    modal._clientLeft = $el[0].clientLeft;
 
-    modal._clientLeft = $el[0].clientLeft; // Modal
-
+    // Modal
     function transitionEnd() {
       if ($el.hasClass('modal-out')) {
         modal.onClosed();
@@ -137,13 +121,11 @@ class Modal extends Framework7Class {
         modal.onOpened();
       }
     }
-
     if (animate) {
       if ($backdropEl) {
         $backdropEl.removeClass('not-animated');
         $backdropEl.addClass('backdrop-in');
       }
-
       $el.animationEnd(() => {
         transitionEnd();
       });
@@ -156,15 +138,12 @@ class Modal extends Framework7Class {
       if ($backdropEl) {
         $backdropEl.addClass('backdrop-in not-animated');
       }
-
       $el.removeClass('modal-out').addClass('modal-in not-animated');
       modal.onOpen();
       modal.onOpened();
     }
-
     return modal;
   }
-
   close(animateModal) {
     const modal = this;
     const $el = modal.$el;
@@ -173,39 +152,33 @@ class Modal extends Framework7Class {
     if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
       animate = modal.params.animate;
     }
-
     if (!$el || !$el.hasClass('modal-in')) {
       if (dialogsQueue.indexOf(modal) >= 0) {
         dialogsQueue.splice(dialogsQueue.indexOf(modal), 1);
       }
-
       return modal;
-    } // backdrop
-
+    }
 
+    // backdrop
     if ($backdropEl) {
       let needToHideBackdrop = true;
-
       if (modal.type === 'popup') {
         modal.$el.prevAll('.popup.modal-in').add(modal.$el.nextAll('.popup.modal-in')).each(popupEl => {
           const popupInstance = popupEl.f7Modal;
           if (!popupInstance) return;
-
           if (popupInstance.params.closeByBackdropClick && popupInstance.params.backdrop && popupInstance.backdropEl === modal.backdropEl) {
             needToHideBackdrop = false;
           }
         });
       }
-
       if (needToHideBackdrop) {
         $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
         $backdropEl.removeClass('backdrop-in');
       }
-    } // Modal
-
+    }
 
+    // Modal
     $el[animate ? 'removeClass' : 'addClass']('not-animated');
-
     function transitionEnd() {
       if ($el.hasClass('modal-out')) {
         modal.onClosed();
@@ -213,7 +186,6 @@ class Modal extends Framework7Class {
         modal.onOpened();
       }
     }
-
     if (animate) {
       $el.animationEnd(() => {
         transitionEnd();
@@ -221,40 +193,32 @@ class Modal extends Framework7Class {
       $el.transitionEnd(() => {
         transitionEnd();
       });
-      $el.removeClass('modal-in').addClass('modal-out'); // Emit close
-
+      $el.removeClass('modal-in').addClass('modal-out');
+      // Emit close
       modal.onClose();
     } else {
-      $el.addClass('not-animated').removeClass('modal-in').addClass('modal-out'); // Emit close
-
+      $el.addClass('not-animated').removeClass('modal-in').addClass('modal-out');
+      // Emit close
       modal.onClose();
       modal.onClosed();
     }
-
     if (modal.type === 'dialog') {
       clearDialogsQueue();
     }
-
     return modal;
   }
-
   destroy() {
     const modal = this;
     if (modal.destroyed) return;
     modal.emit(`local::beforeDestroy modalBeforeDestroy ${modal.type}BeforeDestroy`, modal);
-
     if (modal.$el) {
       modal.$el.trigger(`modal:beforedestroy ${modal.type.toLowerCase()}:beforedestroy`);
-
       if (modal.$el.length && modal.$el[0].f7Modal) {
         delete modal.$el[0].f7Modal;
       }
     }
-
     deleteProps(modal);
     modal.destroyed = true;
   }
-
 }
-
 export default Modal;

package/components/modal/modal.js

@@ -6,17 +6,14 @@ export default {
     Modal,
     CustomModal
   },
-
   create() {
     const app = this;
     app.customModal = {
       create(params) {
         return new CustomModal(app, params);
       }
-
     };
   },
-
   params: {
     modal: {
       queueDialogs: true

package/components/navbar/navbar-ios.less

@@ -2,6 +2,9 @@
   --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
   --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
   .navbar {
+    .title-large {
+      align-items: flex-end;
+    }
     a.icon-only {
       width: 44px;
       margin: 0;
@@ -344,19 +347,16 @@
       }
     }
   }
-  --f7-navbar-large-transparent-bg-center: translateX(0);
   --f7-navbar-large-bg-center-top: translateX(0)
     translateY(calc(-1 * var(--f7-navbar-large-title-height)));
   --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
   .ltr({
-    --f7-navbar-large-transparent-bg-left: translateX(-100%);
     --f7-navbar-large-bg-left-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
     --f7-navbar-large-bg-left-bottom: translateX(-100%) translateY(0);
     --f7-navbar-large-bg-right-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
     --f7-navbar-large-bg-right-bottom: translateX(100%) translateY(0);
   });
   .rtl({
-    --f7-navbar-large-transparent-bg-left: translateX(100%);
     --f7-navbar-large-bg-left-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
     --f7-navbar-large-bg-left-bottom: translateX(100%) translateY(0);
     --f7-navbar-large-bg-right-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
@@ -380,12 +380,6 @@
       &.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
         animation-name: ios-navbar-bg-from-ct-to-lt;
       }
-      &.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large)
-        .navbar-bg,
-      &.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large)
-        .navbar-bg {
-        animation-name: ios-navbar-transparent-bg-from-c-to-l;
-      }
     }
     .navbar-next {
       .navbar-bg {
@@ -416,10 +410,6 @@
       &.navbar-large-collapsed .navbar-bg {
         animation-name: ios-navbar-bg-from-ct-to-rt;
       }
-      &.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
-      &.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
-        animation-name: ios-navbar-bg-from-cb-to-rb;
-      }
       &.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
         animation-name: ios-navbar-bg-from-ct-to-rb;
       }
@@ -437,16 +427,6 @@
       &.navbar-large-collapsed .navbar-bg {
         animation-name: ios-navbar-bg-from-lt-to-ct;
       }
-      &.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
-      &.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
-        animation-name: ios-navbar-transparent-bg-from-l-to-c;
-      }
-      &.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large
-        .navbar-bg,
-      &.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large
-        .navbar-bg {
-        animation-name: ios-navbar-bg-from-lb-to-ct;
-      }
     }
   }
 }
@@ -773,19 +753,3 @@
     transform: var(--f7-navbar-large-bg-center-top);
   }
 }
-@keyframes ios-navbar-transparent-bg-from-l-to-c {
-  from {
-    transform: var(--f7-navbar-large-transparent-bg-left);
-  }
-  to {
-    transform: var(--f7-navbar-large-transparent-bg-center);
-  }
-}
-@keyframes ios-navbar-transparent-bg-from-c-to-l {
-  from {
-    transform: var(--f7-navbar-large-transparent-bg-center);
-  }
-  to {
-    transform: var(--f7-navbar-large-transparent-bg-left);
-  }
-}

package/components/navbar/navbar-md.less

@@ -1,5 +1,12 @@
 .md {
   .navbar {
+    .title-large {
+      align-items: center;
+    }
+    .left {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
     a.link {
       padding: 0 12px;
       min-width: 48px;
@@ -13,8 +20,10 @@
     .right {
       .ltr({
         margin-left: auto;
+        margin-right: 4px;
       });
       .rtl({
+        margin-left: 4px;
         margin-right: auto;
       });
     }
@@ -37,6 +46,9 @@
   .page.page-with-subnavbar .navbar-inner {
     overflow: visible;
   }
+  .navbar-inner:not(.navbar-inner-centered-title) .title:first-child {
+    margin-left: 16px;
+  }
   .navbar-inner-centered-title {
     justify-content: space-between;
     .right {

package/components/navbar/navbar-vars.less

@@ -2,14 +2,10 @@
   /*
   --f7-navbar-bg-color: var(--f7-bars-bg-color);
   --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
-  --f7-navbar-bg-image: var(--f7-bars-bg-image);
   --f7-navbar-border-color: var(--f7-bars-border-color);
-  --f7-navbar-link-color: var(--f7-bars-link-color);
-  --f7-navbar-text-color: var(--f7-bars-text-color);
   */
   --f7-navbar-hide-show-transition-duration: 400ms;
   --f7-navbar-title-line-height: 1.2;
-  --f7-navbar-title-font-size: inherit;
   --f7-navbar-subtitle-text-align: inherit;
   --f7-navbar-large-title-line-height: 1.2;
   --f7-navbar-large-title-text-color: inherit;
@@ -17,9 +13,13 @@
   --f7-navbar-large-title-padding-right: 16px;
 }
 .ios-vars({
+  /*
+  --f7-navbar-link-color: var(--f7-bars-link-color);
+  --f7-navbar-text-color: var(--f7-bars-text-color);
+  */
   --f7-navbar-height: 44px;
-  --f7-navbar-tablet-height: 44px;
   --f7-navbar-font-size: 17px;
+  --f7-navbar-title-font-size: inherit;
   --f7-navbar-inner-padding-left: 8px;
   --f7-navbar-inner-padding-right: 8px;
   --f7-navbar-title-font-weight: 600;
@@ -28,7 +28,6 @@
   --f7-navbar-title-text-align: center;
   --f7-navbar-subtitle-font-size: 10px;
   --f7-navbar-subtitle-line-height: 1;
-  --f7-navbar-shadow-image: none;
   --f7-navbar-large-title-height: 52px;
   --f7-navbar-large-title-font-size: 34px;
   --f7-navbar-large-title-font-weight: 700;
@@ -46,58 +45,30 @@
   });
 });
 .md-vars({
-  --f7-navbar-height: 56px;
-  --f7-navbar-tablet-height: 64px;
-  --f7-navbar-font-size: 20px;
-  --f7-navbar-inner-padding-left: 4px;
-  --f7-navbar-inner-padding-right: 4px;
-  --f7-navbar-title-font-weight: 500;
-  --f7-navbar-title-margin-left: 20px;
+  --f7-navbar-height: 64px;
+  --f7-navbar-font-size: 16px;
+  --f7-navbar-title-font-size: 22px;
+  --f7-navbar-inner-padding-left: 0px;
+  --f7-navbar-inner-padding-right: 0px;
+  --f7-navbar-title-font-weight: 400;
+  --f7-navbar-title-margin-left: 0px;
   --f7-navbar-title-margin-right: 16px;
   --f7-navbar-title-text-align: left;
   --f7-navbar-subtitle-font-size: 14px;
   --f7-navbar-subtitle-line-height: 1.2;
-  --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
-  --f7-navbar-large-title-font-size: 34px;
-  --f7-navbar-large-title-height: 56px;
-  --f7-navbar-large-title-font-weight: 500;
+  --f7-navbar-large-title-font-size: 28px;
+  --f7-navbar-large-title-height: 88px;
+  --f7-navbar-large-title-font-weight: 400;
   --f7-navbar-large-title-letter-spacing: 0;
   --f7-navbar-large-title-padding-vertical: 8px;
 
   --f7-navbar-link-height: 48px;
   --f7-navbar-link-line-height: 48px;
 
-  .light-vars({
-    --f7-navbar-subtitle-text-color: rgba(0,0,0,0.85);
-  });
-  .dark-vars({
-    --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
-  });
+
 });
-.aurora-vars({
-  --f7-navbar-height: 56px;
-  --f7-navbar-tablet-height: 56px;
-  --f7-navbar-font-size: 18px;
-  --f7-navbar-inner-padding-left: 16px;
-  --f7-navbar-inner-padding-right: 16px;
-  --f7-navbar-title-font-weight: bold;
-  --f7-navbar-title-margin-left: 0;
-  --f7-navbar-title-margin-right: 0;
-  --f7-navbar-title-text-align: center;
-  --f7-navbar-subtitle-font-size: 14px;
-  --f7-navbar-subtitle-line-height: 1;
-  --f7-navbar-shadow-image: none;
-  --f7-navbar-large-title-height: 48px;
-  --f7-navbar-large-title-font-size: 28px;
-  --f7-navbar-large-title-font-weight: bold;
-  --f7-navbar-large-title-letter-spacing: 0;
-  --f7-navbar-large-title-padding-vertical: 7px;
-  --f7-navbar-link-height: auto;
-  --f7-navbar-link-line-height: inherit;
-  .light-vars({
-    --f7-navbar-subtitle-text-color: rgba(0,0,0,0.6);
-  });
-  .dark-vars({
-    --f7-navbar-subtitle-text-color: rgba(255,255,255,0.5);
-  });
+.md-color-vars({
+  --f7-navbar-link-color: var(--f7-md-on-surface);
+  --f7-navbar-text-color: var(--f7-md-on-surface);
+  --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
 });

package/components/navbar/navbar.d.ts

@@ -40,8 +40,6 @@ export namespace Navbar {
           iosCenterTitle?: boolean;
           /** When enabled then it will position title at the center in MD theme. This will have effect only in MD theme. (default false) */
           mdCenterTitle?: boolean;
-          /** When enabled then it will position title at the center in Aurora theme. This will have effect only in Aurora theme. (default true) */
-          auroraCenterTitle?: boolean;
           /** When enabled it will collapse large title on page scroll (default true) */
           collapseLargeTitleOnScroll?: boolean;
           /** When enabled it will snap page scroll to large title (default true) */