framework7 8.3.3 → 9.0.0-beta.1

package/less/mixins.less

@@ -198,7 +198,7 @@
     transition-duration: 300ms;
     transition-property: opacity;
   }
-  &.icon-only:before,
+  &:is(.icon-only, a:has(i:only-child), a:has(svg:only-child)):before,
   &.ripple-inset:before,
   &.searchbar-disable-button:before,
   &.input-clear-button:before,
@@ -243,19 +243,17 @@
 
 .ios-translucent-bars(@color) {
   .ios-translucent-bars & {
-    @supports (backdrop-filter: blur(20px)) {
-      background-color: rgba(@color, var(--f7-bars-translucent-opacity));
-      backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
-    }
+    background-color: rgba(@color, var(--f7-bars-translucent-opacity));
+    backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
   }
 }
-.ios-translucent-modals(@color) {
-  .ios-translucent-modals & {
-    @supports (backdrop-filter: blur(20px)) {
-      background-color: rgba(@color, 0.8);
-      backdrop-filter: saturate(180%) blur(20px);
-    }
-  }
+.ios-glass-backdrop() {
+  backdrop-filter: saturate(180%) blur(16px);
+}
+.ios-glass() {
+  .ios-glass-backdrop();
+  box-shadow: var(--f7-glass-shadow);
+  background-color: var(--f7-glass-bg-color);
 }
 
 .no-scrollbar() {

package/modules/component/$h.js

@@ -1,10 +1,7 @@
 import htm from 'htm';
 import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
-const h = function (type, props) {
-  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    children[_key - 2] = arguments[_key];
-  }
+const h = (type, props, ...children) => {
   return {
     type,
     props: props || {},

package/modules/component/$jsx.js

@@ -1,9 +1,6 @@
 import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
-const $jsx = function (type, props) {
-  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    children[_key - 2] = arguments[_key];
-  }
+const $jsx = (type, props, ...children) => {
   const flatChildren = flattenArray((children || []).filter(child => ignoreChildren.indexOf(child) < 0));
   if (type === 'Fragment') {
     return flatChildren;

package/modules/component/component-class.js

@@ -17,45 +17,15 @@ const types = [{
   init: i => i,
   type: i => [i].find(Array.isArray),
   update: (i, o) => [o].filter(Array.isArray).find(() => (i.length = 0, i.push(...o))),
-  insert: function (i, x, o) {
-    if (o === void 0) {
-      o = [];
-    }
-    return i.splice(Math.max(x, 0), 0, ...[o].flat());
-  },
-  replace: function (i, x, o) {
-    if (o === void 0) {
-      o = [];
-    }
-    return i.splice(Math.max(x, 0), Math.min(++x, 1), ...[o].flat());
-  },
-  append: function (i, o) {
-    if (o === void 0) {
-      o = [];
-    }
-    return i.push(...[o].flat());
-  },
-  prepend: function (i, o) {
-    if (o === void 0) {
-      o = [];
-    }
-    return i.unshift(...[o].flat());
-  },
+  insert: (i, x, o = []) => i.splice(Math.max(x, 0), 0, ...[o].flat()),
+  replace: (i, x, o = []) => i.splice(Math.max(x, 0), Math.min(++x, 1), ...[o].flat()),
+  append: (i, o = []) => i.push(...[o].flat()),
+  prepend: (i, o = []) => i.unshift(...[o].flat()),
   swap: (i, a, b) => {
     [i[a], i[b]] = [i[b], i[a]];
   },
-  fromTo: function (i, a, b) {
-    if (b === void 0) {
-      b = a;
-    }
-    return i.splice(Math.max(b, 0), 0, ...i.splice(Math.max(a, 0), 1));
-  },
-  remove: function (i, o, a) {
-    if (a === void 0) {
-      a = i.map((_, x) => x);
-    }
-    return [o].flat().filter(i => a.includes(i)).sort((a, b) => b - a).forEach(x => i.splice(x, 1));
-  },
+  fromTo: (i, a, b = a) => i.splice(Math.max(b, 0), 0, ...i.splice(Math.max(a, 0), 1)),
+  remove: (i, o, a = i.map((_, x) => x)) => [o].flat().filter(i => a.includes(i)).sort((a, b) => b - a).forEach(x => i.splice(x, 1)),
   clear: i => i.length = 0
 }, {
   name: 'object',
@@ -75,22 +45,14 @@ const types = [{
 }, {
   name: 'atoms',
   type: () => true,
-  init: function (i, o) {
-    if (o === void 0) {
-      o = {};
-    }
-    return Object.defineProperty(o, 'value', {
-      get: () => i,
-      set: v => {
-        // eslint-disable-next-line
-        i = v;
-      }
-    }), o;
-  },
-  update: function (i, v) {
-    if (v === void 0) {
-      v = i.value;
+  init: (i, o = {}) => (Object.defineProperty(o, 'value', {
+    get: () => i,
+    set: v => {
+      // eslint-disable-next-line
+      i = v;
     }
+  }), o),
+  update: (i, v = i.value) => {
     i.value = v;
   },
   insert: () => ({}),
@@ -119,15 +81,11 @@ const types = [{
 /* eslint-enable no-sequences */
 
 class Component {
-  constructor(app, component, props, _temp) {
-    if (props === void 0) {
-      props = {};
-    }
-    let {
-      el,
-      context,
-      children
-    } = _temp === void 0 ? {} : _temp;
+  constructor(app, component, props = {}, {
+    el,
+    context,
+    children
+  } = {}) {
     const document = getDocument();
     merge(this, {
       f7: app,
@@ -265,37 +223,21 @@ class Component {
 
   /* eslint-disable no-sequences */
   getUseState() {
-    var _this = this;
     return o => {
-      const obj = [o].reduce(function (t, _i, _x, _a, i) {
-        if (i === void 0) {
-          i = t.init(_i);
-        }
-        return {
-          state: i,
-          update: v => (t.update(i, v), _this.update()),
-          remove: v => (t.remove(i, v), _this.update()),
-          clear: () => (t.clear(i), _this.update()),
-          insert: (x, v) => (t.insert(i, x, v), _this.update()),
-          replace: (x, v) => (t.replace(i, x, v), _this.update()),
-          append: v => (t.append(i, v), _this.update()),
-          prepend: v => (t.prepend(i, v), _this.update()),
-          swap: (a, b) => (t.swap(i, a, b), _this.update()),
-          fromTo: (a, b) => (t.fromTo(i, a, b), _this.update()),
-          method: function (f) {
-            if (f === void 0) {
-              f = () => ({});
-            }
-            return f(i), _this.update();
-          },
-          async: function (f) {
-            if (f === void 0) {
-              f = () => Promise.reject(i);
-            }
-            return f(i).then(() => _this.update());
-          }
-        };
-      }, types.find(i => i.type(o)));
+      const obj = [o].reduce((t, _i, _x, _a, i = t.init(_i)) => ({
+        state: i,
+        update: v => (t.update(i, v), this.update()),
+        remove: v => (t.remove(i, v), this.update()),
+        clear: () => (t.clear(i), this.update()),
+        insert: (x, v) => (t.insert(i, x, v), this.update()),
+        replace: (x, v) => (t.replace(i, x, v), this.update()),
+        append: v => (t.append(i, v), this.update()),
+        prepend: v => (t.prepend(i, v), this.update()),
+        swap: (a, b) => (t.swap(i, a, b), this.update()),
+        fromTo: (a, b) => (t.fromTo(i, a, b), this.update()),
+        method: (f = () => ({})) => (f(i), this.update()),
+        async: (f = () => Promise.reject(i)) => f(i).then(() => this.update())
+      }), types.find(i => i.type(o)));
       obj.length = 12;
       obj[Symbol.iterator] = function Iterate() {
         const values = Object.values(this);
@@ -369,18 +311,16 @@ class Component {
       $el
     } = this;
     if (!this.__eventHandlers) return;
-    this.__eventHandlers.forEach(_ref => {
-      let {
-        eventName,
-        handler
-      } = _ref;
+    this.__eventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
       $el.on(eventNameToColonCase(eventName), handler);
     });
-    this.__onceEventHandlers.forEach(_ref2 => {
-      let {
-        eventName,
-        handler
-      } = _ref2;
+    this.__onceEventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
       $el.once(eventNameToColonCase(eventName), handler);
     });
   }
@@ -389,18 +329,16 @@ class Component {
       $el
     } = this;
     if (!this.__eventHandlers) return;
-    this.__eventHandlers.forEach(_ref3 => {
-      let {
-        eventName,
-        handler
-      } = _ref3;
+    this.__eventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
       $el.on(eventNameToColonCase(eventName), handler);
     });
-    this.__onceEventHandlers.forEach(_ref4 => {
-      let {
-        eventName,
-        handler
-      } = _ref4;
+    this.__onceEventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
       $el.once(eventNameToColonCase(eventName), handler);
     });
   }
@@ -503,10 +441,7 @@ class Component {
     deleteProps(this);
     this.__destroyed = true;
   }
-  hook(name) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  hook(name, ...args) {
     if (this.__destroyed) return;
     this[`__${name}`].forEach(handler => {
       handler(...args);

package/modules/component/component.js

@@ -25,13 +25,12 @@ export default {
       parse(componentString) {
         return parseComponent(componentString);
       },
-      create(component, props, _ref) {
-        let {
-          root,
-          el,
-          context,
-          children
-        } = _ref;
+      create(component, props, {
+        root,
+        el,
+        context,
+        children
+      }) {
         return new Component(app, component, props, {
           root,
           el,

package/modules/component/eventslisteners.js

@@ -14,10 +14,7 @@ function handleEvent(event, args, vnode) {
   }
 }
 function createListener() {
-  return function handler(event) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  return function handler(event, ...args) {
     handleEvent(event, args, handler.vnode);
   };
 }

package/modules/component/snabbdom/modules/hero.js

@@ -31,7 +31,6 @@ function calcTransformOrigin(isTextNode, textRect, boundingRect) {
   }
   return '0 0'; //top left
 }
-
 function getTextDx(oldTextRect, newTextRect) {
   if (oldTextRect && newTextRect) {
     return oldTextRect.left + oldTextRect.width / 2 - (newTextRect.left + newTextRect.width / 2);

package/modules/component/snabbdom/modules/style.js

@@ -19,7 +19,7 @@ function updateStyle(oldVnode, vnode) {
   if (oldStyle === style) return;
   oldStyle = oldStyle || {};
   style = style || {};
-  var oldHasDel = ('delayed' in oldStyle);
+  var oldHasDel = 'delayed' in oldStyle;
   for (name in oldStyle) {
     if (!style[name]) {
       if (name[0] === '-' && name[1] === '-') {

package/modules/component/vdom.js

@@ -15,28 +15,21 @@ const toCamelCase = name => {
     return word[0].toUpperCase() + word.substr(1);
   }).join('');
 };
-const propsFromAttrs = function () {
+const propsFromAttrs = (...args) => {
   const context = {};
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  args.forEach(function (obj) {
-    if (obj === void 0) {
-      obj = {};
-    }
+  args.forEach((obj = {}) => {
     Object.keys(obj).forEach(key => {
       context[toCamelCase(key)] = obj[key];
     });
   });
   return context;
 };
-const createCustomComponent = _ref => {
-  let {
-    f7,
-    treeNode,
-    vnode,
-    data
-  } = _ref;
+const createCustomComponent = ({
+  f7,
+  treeNode,
+  vnode,
+  data
+}) => {
   const component = typeof treeNode.type === 'function' ? treeNode.type : customComponents[treeNode.type];
   f7.component.create(component, propsFromAttrs(data.attrs || {}, data.props || {}), {
     el: vnode.elm,
@@ -78,7 +71,6 @@ const destroyCustomComponent = vnode => {
     delete vnode.elm.__component__; // eslint-disable-line
   }
 };
-
 const isCustomComponent = treeNodeType => {
   return typeof treeNodeType === 'function' || treeNodeType && treeNodeType.indexOf('-') > 0 && customComponents[treeNodeType];
 };
@@ -159,20 +151,19 @@ function getHooks(treeNode, data, f7, initial, isRoot) {
   }
   return hooks;
 }
-const getEventHandler = function (eventHandler, _temp) {
-  let {
-    stop,
-    prevent,
-    once
-  } = _temp === void 0 ? {} : _temp;
+const getEventHandler = (eventHandler, {
+  stop,
+  prevent,
+  once
+} = {}) => {
   let fired = false;
-  function handler() {
-    const e = arguments.length <= 0 ? undefined : arguments[0];
+  function handler(...args) {
+    const e = args[0];
     if (once && fired) return;
     if (stop) e.stopPropagation();
     if (prevent) e.preventDefault();
     fired = true;
-    eventHandler(...arguments);
+    eventHandler(...args);
   }
   return handler;
 };
@@ -311,9 +302,6 @@ const treeNodeToVNode = (treeNode, component, f7, initial, isRoot) => {
   const children = isCustomComponent(treeNode.type) ? [] : getChildren(treeNode, component, f7, initial);
   return h(getTagName(treeNode), data, children);
 };
-export default function vdom(tree, component, initial) {
-  if (tree === void 0) {
-    tree = {};
-  }
+export default function vdom(tree = {}, component, initial) {
   return treeNodeToVNode(tree, component, component.f7, initial, true);
 }

package/modules/router/back.js

@@ -22,7 +22,6 @@ function backward(router, el, backwardOptions) {
   const isMaster = masterDetailEnabled && options.route && options.route.route && (options.route.route.master === true || typeof options.route.route.master === 'function' && options.route.route.master(app, router));
   let masterPageEl;
   let masterPageRemoved;
-  const dynamicNavbar = router.dynamicNavbar;
   const $newPage = $el;
   const $oldPage = router.$el.children('.page-current');
   const initialPreload = $oldPage.length === 0 && options.preload;
@@ -31,18 +30,6 @@ function backward(router, el, backwardOptions) {
     // Remove theme elements
     router.removeThemeElements($newPage);
   }
-  let $navbarsEl;
-  let $newNavbarEl;
-  let $oldNavbarEl;
-  if (dynamicNavbar) {
-    $newNavbarEl = $newPage.children('.navbar');
-    $navbarsEl = router.$navbarsEl;
-    if ($newNavbarEl.length === 0 && $newPage[0] && $newPage[0].f7Page) {
-      // Try from pageData
-      $newNavbarEl = $newPage[0].f7Page.$navbarEl;
-    }
-    $oldNavbarEl = $navbarsEl.find('.navbar-current');
-  }
   router.allowPageChange = false;
   if ($newPage.length === 0 || $oldPage.length === 0 && !options.preload) {
     router.allowPageChange = true;
@@ -72,7 +59,6 @@ function backward(router, el, backwardOptions) {
         continue; // eslint-disable-line
       }
     }
-
     isDetail = !isMaster && masterPageEl && router.history.indexOf(options.route.url) > router.history.indexOf(masterPageEl.f7Page.route.url);
     if (!isDetail && !isMaster && masterPageEl && masterPageEl.f7Page && options.route.route.masterRoute) {
       isDetail = options.route.route.masterRoute.path === masterPageEl.f7Page.route.route.path;
@@ -98,19 +84,6 @@ function backward(router, el, backwardOptions) {
       detailRoot: !!isDetailRoot
     });
   }
-  if (dynamicNavbar && $newNavbarEl.length > 0) {
-    $newNavbarEl.addClass(`navbar-${initialPreload ? 'current' : 'previous'}${isMaster ? ' navbar-master' : ''}${isDetail ? ' navbar-master-detail' : ''}${isDetailRoot ? ' navbar-master-detail-root' : ''}`).removeAttr('aria-hidden');
-    $newNavbarEl.trigger('navbar:position', {
-      position: initialPreload ? 'current' : 'previous'
-    });
-    router.emit('navbarPosition', $newNavbarEl[0], initialPreload ? 'current' : 'previous');
-    if (isMaster || isDetailRoot) {
-      router.emit('navbarRole', $newNavbarEl[0], {
-        role: isMaster ? 'master' : 'detail',
-        detailRoot: !!isDetailRoot
-      });
-    }
-  }
 
   // Remove previous page in case of "forced"
   let backIndex;
@@ -128,19 +101,12 @@ function backward(router, el, backwardOptions) {
         router.propsHistory.unshift(options.props || {});
       }
       const $pageToRemove = $oldPage.prev('.page-previous');
-      let $navbarToRemove;
-      if (dynamicNavbar) {
-        $navbarToRemove = $(app.navbar.getElByPage($pageToRemove));
-      }
       if ($pageToRemove.length > 0) {
-        router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined, options);
+        router.pageCallback('beforeRemove', $pageToRemove, 'previous', undefined, options);
         if ($pageToRemove[0] === masterPageEl) {
           masterPageRemoved = true;
         }
         router.removePage($pageToRemove);
-        if (dynamicNavbar && $navbarToRemove.length) {
-          router.removeNavbar($navbarToRemove);
-        }
       }
     }
   }
@@ -167,25 +133,11 @@ function backward(router, el, backwardOptions) {
         $newPage.insertBefore($oldPage);
       }
     }
-    if (dynamicNavbar && $newNavbarEl.length) {
-      if ($newNavbarEl.find('.title-large').length) {
-        $newNavbarEl.addClass('navbar-large');
-      }
-      $newNavbarEl.insertBefore($oldNavbarEl);
-      if ($oldNavbarEl.length > 0) {
-        $newNavbarEl.insertBefore($oldNavbarEl);
-      } else {
-        if (!router.$navbarsEl.parents(document).length) {
-          router.$el.prepend(router.$navbarsEl);
-        }
-        $navbarsEl.append($newNavbarEl);
-      }
-    }
     if (!newPageInDom) {
-      router.pageCallback('mounted', $newPage, $newNavbarEl, 'previous', 'current', options, $oldPage);
+      router.pageCallback('mounted', $newPage, 'previous', 'current', options, $oldPage);
     } else if (options.route && options.route.route && options.route.route.keepAlive && !$newPage[0].f7PageMounted) {
       $newPage[0].f7PageMounted = true;
-      router.pageCallback('mounted', $newPage, $newNavbarEl, 'previous', 'current', options, $oldPage);
+      router.pageCallback('mounted', $newPage, 'previous', 'current', options, $oldPage);
     }
   }
   if (options.preload) {
@@ -202,30 +154,19 @@ function backward(router, el, backwardOptions) {
     if (isMaster) {
       $newPage.removeClass('page-master-stacked').trigger('page:masterunstack');
       router.emit('pageMasterUnstack', $newPage[0]);
-      if (dynamicNavbar) {
-        $(app.navbar.getElByPage($newPage)).removeClass('navbar-master-stacked');
-        router.emit('navbarMasterUnstack', app.navbar.getElByPage($newPage));
-      }
     }
     // Page init and before init events
-    router.pageCallback('init', $newPage, $newNavbarEl, 'previous', 'current', options, $oldPage);
+    router.pageCallback('init', $newPage, 'previous', 'current', options, $oldPage);
     if (initialPreload) {
-      router.pageCallback('beforeIn', $newPage, $newNavbarEl, 'current', undefined, options);
-      router.pageCallback('afterIn', $newPage, $newNavbarEl, 'current', undefined, options);
+      router.pageCallback('beforeIn', $newPage, 'current', undefined, options);
+      router.pageCallback('afterIn', $newPage, 'current', undefined, options);
     }
     const $previousPages = $newPage.prevAll('.page-previous:not(.page-master)');
     if ($previousPages.length > 0) {
       $previousPages.each(pageToRemove => {
         const $pageToRemove = $(pageToRemove);
-        let $navbarToRemove;
-        if (dynamicNavbar) {
-          $navbarToRemove = $(app.navbar.getElByPage($pageToRemove));
-        }
-        router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined);
+        router.pageCallback('beforeRemove', $pageToRemove, 'previous', undefined);
         router.removePage($pageToRemove);
-        if (dynamicNavbar && $navbarToRemove.length) {
-          router.removeNavbar($navbarToRemove);
-        }
       });
     }
     router.allowPageChange = true;
@@ -262,13 +203,8 @@ function backward(router, el, backwardOptions) {
   }
   router.saveHistory();
 
-  // Current Page & Navbar
+  // Current Page
   router.currentPageEl = $newPage[0];
-  if (dynamicNavbar && $newNavbarEl.length) {
-    router.currentNavbarEl = $newNavbarEl[0];
-  } else {
-    delete router.currentNavbarEl;
-  }
 
   // Current Route
   router.currentRoute = options.route;
@@ -307,33 +243,26 @@ function backward(router, el, backwardOptions) {
   }
 
   // Page init and before init events
-  router.pageCallback('init', $newPage, $newNavbarEl, 'previous', 'current', options, $oldPage);
+  router.pageCallback('init', $newPage, 'previous', 'current', options, $oldPage);
 
   // Before animation callback
-  router.pageCallback('beforeOut', $oldPage, $oldNavbarEl, 'current', 'next', options);
-  router.pageCallback('beforeIn', $newPage, $newNavbarEl, 'previous', 'current', options);
+  router.pageCallback('beforeOut', $oldPage, 'current', 'next', options);
+  router.pageCallback('beforeIn', $newPage, 'previous', 'current', options);
 
   // Animation
   function afterAnimation() {
     // Set classes
     router.setPagePosition($newPage, 'current', false);
     router.setPagePosition($oldPage, 'next', true);
-    if (dynamicNavbar) {
-      router.setNavbarPosition($newNavbarEl, 'current', false);
-      router.setNavbarPosition($oldNavbarEl, 'next', true);
-    }
 
     // After animation event
-    router.pageCallback('afterOut', $oldPage, $oldNavbarEl, 'current', 'next', options);
-    router.pageCallback('afterIn', $newPage, $newNavbarEl, 'previous', 'current', options);
+    router.pageCallback('afterOut', $oldPage, 'current', 'next', options);
+    router.pageCallback('afterIn', $newPage, 'previous', 'current', options);
 
     // Remove Old Page
 
-    router.pageCallback('beforeRemove', $oldPage, $oldNavbarEl, 'next', undefined, options);
+    router.pageCallback('beforeRemove', $oldPage, 'next', undefined, options);
     router.removePage($oldPage);
-    if (dynamicNavbar && $oldNavbarEl.length) {
-      router.removeNavbar($oldNavbarEl);
-    }
     router.allowPageChange = true;
     router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
 
@@ -352,10 +281,6 @@ function backward(router, el, backwardOptions) {
   function setPositionClasses() {
     router.setPagePosition($oldPage, 'current');
     router.setPagePosition($newPage, 'previous', false);
-    if (dynamicNavbar) {
-      router.setNavbarPosition($oldNavbarEl, 'current');
-      router.setNavbarPosition($newNavbarEl, 'previous', false);
-    }
   }
   if (options.animate && !(currentIsMaster && app.width >= router.params.masterDetailBreakpoint)) {
     let transition = router.params.transition;
@@ -371,7 +296,7 @@ function backward(router, el, backwardOptions) {
       transition = router.previousRoute.route.options.transition;
     }
     setPositionClasses();
-    router.animate($oldPage, $newPage, $oldNavbarEl, $newNavbarEl, 'backward', transition, () => {
+    router.animate($oldPage, $newPage, 'backward', transition, () => {
       afterAnimation();
     });
   } else {
@@ -429,7 +354,8 @@ function loadBack(router, backParams, backOptions, ignorePageChange) {
         componentUrl,
         options,
         resolve,
-        reject
+        reject,
+        direction: 'backward'
       });
     } catch (err) {
       router.allowPageChange = true;
@@ -449,7 +375,7 @@ function loadBack(router, backParams, backOptions, ignorePageChange) {
   }
   return router;
 }
-function back() {
+function back(...args) {
   const router = this;
   const device = getDevice();
   if (router.swipeBackActive) return router;
@@ -457,11 +383,11 @@ function back() {
   let navigateOptions;
   let navigateProps;
   let route;
-  if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {
-    navigateOptions = (arguments.length <= 0 ? undefined : arguments[0]) || {};
+  if (typeof args[0] === 'object') {
+    navigateOptions = args[0] || {};
   } else {
-    navigateUrl = arguments.length <= 0 ? undefined : arguments[0];
-    navigateOptions = (arguments.length <= 1 ? undefined : arguments[1]) || {};
+    navigateUrl = args[0];
+    navigateOptions = args[1] || {};
   }
   const {
     name,