framework7 7.0.0-beta.2 → 7.0.0-beta.20

package/less/mixins.less

@@ -53,8 +53,8 @@
 }
 .dark-vars(@ruleset) {
   & when (@includeDarkTheme) {
-    .theme-dark,
-    &.theme-dark {
+    .dark,
+    &.dark {
       @ruleset();
     }
   }

package/modules/clicks/clicks.js

@@ -1,6 +1,6 @@
 import { getWindow } from 'ssr-window';
-import $ from '../../shared/dom7';
-import ViewClass from '../../components/view/view-class';
+import $ from '../../shared/dom7.js';
+import ViewClass from '../../components/view/view-class.js';
 
 function initClicks(app) {
   function handleClicks(e) {

package/modules/component/$h.js

@@ -1,8 +1,12 @@
 import htm from 'htm';
-import { flattenArray } from '../../shared/utils';
+import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
 
-const h = (type, props, ...children) => {
+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];
+  }
+
   return {
     type,
     props: props || {},

package/modules/component/$jsx.js

@@ -1,7 +1,11 @@
-import { flattenArray } from '../../shared/utils';
+import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
 
-const $jsx = (type, props, ...children) => {
+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 flatChildren = flattenArray((children || []).filter(child => ignoreChildren.indexOf(child) < 0));
 
   if (type === 'Fragment') {

package/modules/component/component-class.js

@@ -1,17 +1,22 @@
 /* eslint no-underscore-dangle: "off" */
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import $h from './$h';
-import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../../shared/utils';
-import vdom from './vdom';
-import patch from './patch';
+import $ from '../../shared/dom7.js';
+import $h from './$h.js';
+import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../../shared/utils.js';
+import vdom from './vdom.js';
+import patch from './patch.js';
 
 class Component {
-  constructor(app, component, props = {}, {
-    el,
-    context,
-    children
-  } = {}) {
+  constructor(app, component, props, _temp) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    let {
+      el,
+      context,
+      children
+    } = _temp === void 0 ? {} : _temp;
     const document = getDocument();
     merge(this, {
       f7: app,
@@ -219,17 +224,19 @@ class Component {
     } = this;
     if (!this.__eventHandlers) return;
 
-    this.__eventHandlers.forEach(({
-      eventName,
-      handler
-    }) => {
+    this.__eventHandlers.forEach(_ref => {
+      let {
+        eventName,
+        handler
+      } = _ref;
       $el.on(eventNameToColonCase(eventName), handler);
     });
 
-    this.__onceEventHandlers.forEach(({
-      eventName,
-      handler
-    }) => {
+    this.__onceEventHandlers.forEach(_ref2 => {
+      let {
+        eventName,
+        handler
+      } = _ref2;
       $el.once(eventNameToColonCase(eventName), handler);
     });
   }
@@ -240,17 +247,19 @@ class Component {
     } = this;
     if (!this.__eventHandlers) return;
 
-    this.__eventHandlers.forEach(({
-      eventName,
-      handler
-    }) => {
+    this.__eventHandlers.forEach(_ref3 => {
+      let {
+        eventName,
+        handler
+      } = _ref3;
       $el.on(eventNameToColonCase(eventName), handler);
     });
 
-    this.__onceEventHandlers.forEach(({
-      eventName,
-      handler
-    }) => {
+    this.__onceEventHandlers.forEach(_ref4 => {
+      let {
+        eventName,
+        handler
+      } = _ref4;
       $el.once(eventNameToColonCase(eventName), handler);
     });
   }
@@ -370,7 +379,11 @@ class Component {
     this.__destroyed = true;
   }
 
-  hook(name, ...args) {
+  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];
+    }
+
     if (this.__destroyed) return;
     this[`__${name}`].forEach(handler => {
       handler(...args);

package/modules/component/component.d.ts

@@ -46,9 +46,9 @@ export interface ComponentContext {
   /** Render function */
   $render: ComponentRender;
   /** Attach event handler to component root DOM element */
-  $on: (eventName, handler: () => void) => void;
+  $on: (eventName: string, handler: () => void) => void;
   /** Attach event handler to component root DOM element that will be executed only once */
-  $once: (eventName, handler: () => void) => void;
+  $once: (eventName: string, handler: () => void) => void;
   /** Hook called right before component will be added to DOM */
   $onBeforeMount: (callback: () => void) => void;
   /** Hook called right after component has been added to DOM */

package/modules/component/component.js

@@ -1,7 +1,7 @@
-import Component from './component-class';
-import parseComponent from './parse-component';
-import customComponents from './custom-components';
-import $jsx from './$jsx';
+import Component from './component-class.js';
+import parseComponent from './parse-component.js';
+import customComponents from './custom-components.js';
+import $jsx from './$jsx.js';
 
 function registerComponent(tagName, component) {
   customComponents[tagName] = component;
@@ -30,12 +30,13 @@ export default {
         return parseComponent(componentString);
       },
 
-      create(component, props, {
-        root,
-        el,
-        context,
-        children
-      }) {
+      create(component, props, _ref) {
+        let {
+          root,
+          el,
+          context,
+          children
+        } = _ref;
         return new Component(app, component, props, {
           root,
           el,

package/modules/component/eventslisteners.js

@@ -1,4 +1,4 @@
-import $ from '../../shared/dom7';
+import $ from '../../shared/dom7.js';
 
 function invokeHandler(handler, event, args) {
   if (typeof handler === 'function') {
@@ -17,7 +17,11 @@ function handleEvent(event, args, vnode) {
 }
 
 function createListener() {
-  return function handler(event, ...args) {
+  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];
+    }
+
     handleEvent(event, args, handler.vnode);
   };
 }

package/modules/component/parse-component.js

@@ -1,6 +1,6 @@
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { id } from '../../shared/utils';
+import $ from '../../shared/dom7.js';
+import { id } from '../../shared/utils.js';
 
 function parseComponent(componentString) {
   const window = getWindow();

package/modules/component/patch.js

@@ -1,8 +1,8 @@
 /* eslint import/no-named-as-default: off */
-import { init } from './snabbdom/snabbdom';
-import attributesModule from './snabbdom/modules/attributes';
-import propsModule from './snabbdom/modules/props';
-import styleModule from './snabbdom/modules/style';
-import eventListenersModule from './eventslisteners';
+import { init } from './snabbdom/snabbdom.js';
+import attributesModule from './snabbdom/modules/attributes.js';
+import propsModule from './snabbdom/modules/props.js';
+import styleModule from './snabbdom/modules/style.js';
+import eventListenersModule from './eventslisteners.js';
 const patch = init([attributesModule, propsModule, styleModule, eventListenersModule]);
 export default patch;

package/modules/component/snabbdom/h.js

@@ -1,5 +1,5 @@
-import { vnode } from './vnode';
-import * as is from './is';
+import { vnode } from './vnode.js';
+import * as is from './is.js';
 
 function addNS(data, children, sel) {
   data.ns = 'http://www.w3.org/2000/svg';

package/modules/component/snabbdom/snabbdom.bundle.js

@@ -1,15 +1,15 @@
-import { init } from './snabbdom';
-import { attributesModule } from './modules/attributes'; // for setting attributes on DOM elements
+import { init } from './snabbdom.js';
+import { attributesModule } from './modules/attributes.js'; // for setting attributes on DOM elements
 
-import { classModule } from './modules/class'; // makes it easy to toggle classes
+import { classModule } from './modules/class.js'; // makes it easy to toggle classes
 
-import { propsModule } from './modules/props'; // for setting properties on DOM elements
+import { propsModule } from './modules/props.js'; // for setting properties on DOM elements
 
-import { styleModule } from './modules/style'; // handles styling on elements with support for animations
+import { styleModule } from './modules/style.js'; // handles styling on elements with support for animations
 
-import { eventListenersModule } from './modules/eventlisteners'; // attaches event listeners
+import { eventListenersModule } from './modules/eventlisteners.js'; // attaches event listeners
 
-import { h } from './h'; // helper function for creating vnodes
+import { h } from './h.js'; // helper function for creating vnodes
 
 var patch = init([attributesModule, classModule, propsModule, styleModule, eventListenersModule]);
 export var snabbdomBundle = {

package/modules/component/snabbdom/snabbdom.js

@@ -1,6 +1,6 @@
-import vnode from './vnode';
-import * as is from './is';
-import htmlDomApi from './htmldomapi';
+import vnode from './vnode.js';
+import * as is from './is.js';
+import htmlDomApi from './htmldomapi.js';
 
 function isUndef(s) {
   return s === undefined;

package/modules/component/snabbdom/thunk.js

@@ -1,4 +1,4 @@
-import { h } from './h';
+import { h } from './h.js';
 
 function copyToThunk(vnode, thunk) {
   thunk.elm = vnode.elm;

package/modules/component/snabbdom/tovnode.js

@@ -1,5 +1,5 @@
-import vnode from './vnode';
-import htmlDomApi from './htmldomapi';
+import vnode from './vnode.js';
+import htmlDomApi from './htmldomapi.js';
 export function toVNode(node, domApi) {
   var api = domApi !== undefined ? domApi : htmlDomApi;
   var text;

package/modules/component/vdom.js

@@ -1,9 +1,9 @@
 /* eslint no-use-before-define: "off" */
 
 /* eslint import/no-named-as-default: "off" */
-import h from './snabbdom/h';
-import customComponents from './custom-components';
-import { isObject, eventNameToColonCase } from '../../shared/utils';
+import h from './snabbdom/h.js';
+import customComponents from './custom-components.js';
+import { isObject, eventNameToColonCase } from '../../shared/utils.js';
 const SELF_CLOSING = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' ');
 const PROPS_ATTRS = 'hidden checked disabled readonly selected autofocus autoplay required multiple value indeterminate routeProps innerHTML'.split(' ');
 const BOOLEAN_PROPS = 'hidden checked disabled readonly selected autofocus autoplay required multiple readOnly indeterminate'.split(' ');
@@ -19,9 +19,18 @@ const toCamelCase = name => {
   }).join('');
 };
 
-const propsFromAttrs = (...args) => {
+const propsFromAttrs = function () {
   const context = {};
-  args.forEach((obj = {}) => {
+
+  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 = {};
+    }
+
     Object.keys(obj).forEach(key => {
       context[toCamelCase(key)] = obj[key];
     });
@@ -29,12 +38,13 @@ const propsFromAttrs = (...args) => {
   return context;
 };
 
-const createCustomComponent = ({
-  f7,
-  treeNode,
-  vnode,
-  data
-}) => {
+const createCustomComponent = _ref => {
+  let {
+    f7,
+    treeNode,
+    vnode,
+    data
+  } = _ref;
   const component = typeof treeNode.type === 'function' ? treeNode.type : customComponents[treeNode.type];
   f7.component.create(component, propsFromAttrs(data.attrs || {}, data.props || {}), {
     el: vnode.elm,
@@ -178,20 +188,21 @@ function getHooks(treeNode, data, f7, initial, isRoot) {
   return hooks;
 }
 
-const getEventHandler = (eventHandler, {
-  stop,
-  prevent,
-  once
-} = {}) => {
+const getEventHandler = function (eventHandler, _temp) {
+  let {
+    stop,
+    prevent,
+    once
+  } = _temp === void 0 ? {} : _temp;
   let fired = false;
 
-  function handler(...args) {
-    const e = args[0];
+  function handler() {
+    const e = arguments.length <= 0 ? undefined : arguments[0];
     if (once && fired) return;
     if (stop) e.stopPropagation();
     if (prevent) e.preventDefault();
     fired = true;
-    eventHandler(...args);
+    eventHandler(...arguments);
   }
 
   return handler;
@@ -357,6 +368,10 @@ const treeNodeToVNode = (treeNode, component, f7, initial, isRoot) => {
   return h(getTagName(treeNode), data, children);
 };
 
-export default function vdom(tree = {}, component, initial) {
+export default function vdom(tree, component, initial) {
+  if (tree === void 0) {
+    tree = {};
+  }
+
   return treeNodeToVNode(tree, component, component.f7, initial, true);
 }

package/modules/device/device.js

@@ -1,5 +1,5 @@
 import { getDocument } from 'ssr-window';
-import { getDevice } from '../../shared/get-device';
+import { getDevice } from '../../shared/get-device.js';
 export default {
   name: 'device',
   static: {
@@ -31,7 +31,7 @@ export default {
         }
       }
 
-      if (device.cordova || device.phonegap) {
+      if (device.cordova) {
         classNames.push('device-cordova');
       }
 

package/modules/history/history.js

@@ -1,4 +1,4 @@
-import History from '../../shared/history';
+import History from '../../shared/history.js';
 export default {
   name: 'history',
   static: {

package/modules/request/request.js

@@ -1,5 +1,5 @@
 /* eslint no-param-reassign: "off" */
-import request from '../../shared/request';
+import request from '../../shared/request.js';
 export default {
   name: 'request',
   proto: {

package/modules/resize/resize.js

@@ -1,5 +1,5 @@
 import { getWindow, getDocument } from 'ssr-window';
-import { getDevice } from '../../shared/get-device';
+import { getDevice } from '../../shared/get-device.js';
 export default {
   name: 'resize',
 

package/modules/router/back.js

@@ -1,12 +1,12 @@
 import { getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, parseUrlQuery } from '../../shared/utils';
-import { getDevice } from '../../shared/get-device';
-import History from '../../shared/history';
-import redirect from './redirect';
-import processRouteQueue from './process-route-queue';
-import appRouterCheck from './app-router-check';
-import asyncComponent from './async-component';
+import $ from '../../shared/dom7.js';
+import { extend, parseUrlQuery } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import History from '../../shared/history.js';
+import redirect from './redirect.js';
+import processRouteQueue from './process-route-queue.js';
+import appRouterCheck from './app-router-check.js';
+import asyncComponent from './async-component.js';
 
 function backward(router, el, backwardOptions) {
   const device = getDevice();
@@ -14,7 +14,7 @@ function backward(router, el, backwardOptions) {
   const $el = $(el);
   const app = router.app;
   const view = router.view;
-  const options = extend({
+  const options = extend(false, {
     animate: router.params.animate,
     browserHistory: true,
     replaceState: false
@@ -558,7 +558,7 @@ function loadBack(router, backParams, backOptions, ignorePageChange) {
   return router;
 }
 
-function back(...args) {
+function back() {
   const router = this;
   const device = getDevice();
   if (router.swipeBackActive) return router;
@@ -566,11 +566,11 @@ function back(...args) {
   let navigateOptions;
   let route;
 
-  if (typeof args[0] === 'object') {
-    navigateOptions = args[0] || {};
+  if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {
+    navigateOptions = (arguments.length <= 0 ? undefined : arguments[0]) || {};
   } else {
-    navigateUrl = args[0];
-    navigateOptions = args[1] || {};
+    navigateUrl = arguments.length <= 0 ? undefined : arguments[0];
+    navigateOptions = (arguments.length <= 1 ? undefined : arguments[1]) || {};
   }
 
   const {
@@ -722,6 +722,16 @@ function back(...args) {
     }
 
     const previousPageRoute = $previousPage[0].f7Page.route;
+
+    if (navigateOptions.preload && $previousPage.hasClass('stacked')) {
+      loadBack(router, {
+        el: $previousPage
+      }, extend(navigateOptions, {
+        route: previousPageRoute
+      }));
+      return router;
+    }
+
     processRouteQueue.call(router, previousPageRoute, router.currentRoute, () => {
       loadBack(router, {
         el: $previousPage

package/modules/router/clear-previous-history.js

@@ -1,5 +1,5 @@
-import $ from '../../shared/dom7';
-import appRouterCheck from './app-router-check';
+import $ from '../../shared/dom7.js';
+import appRouterCheck from './app-router-check.js';
 
 function clearPreviousPages(router) {
   appRouterCheck(router, 'clearPreviousPages');

package/modules/router/component-loader.js

@@ -1,8 +1,58 @@
-import { merge } from '../../shared/utils';
+import { merge } from '../../shared/utils.js';
 export default {
   name: 'routerComponentLoader',
   proto: {
-    componentLoader(component, componentUrl, options = {}, resolve, reject) {
+    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) {
+      if (options === void 0) {
+        options = {};
+      }
+
       const router = this;
       const {
         app
@@ -85,41 +135,48 @@ export default {
       }
     },
 
-    modalComponentLoader({
-      component,
-      componentUrl,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    modalComponentLoader(_temp) {
+      let {
+        component,
+        componentUrl,
+        options,
+        resolve,
+        reject
+      } = _temp === void 0 ? {} : _temp;
       const router = this;
       router.componentLoader(component, componentUrl, options, el => {
         resolve(el);
       }, reject);
     },
 
-    tabComponentLoader({
-      component,
-      componentUrl,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    tabComponentLoader(_temp2) {
+      let {
+        component,
+        componentUrl,
+        options,
+        resolve,
+        reject
+      } = _temp2 === void 0 ? {} : _temp2;
       const router = this;
       router.componentLoader(component, componentUrl, options, el => {
         resolve(el);
       }, reject);
     },
 
-    pageComponentLoader({
-      component,
-      componentUrl,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    pageComponentLoader(_temp3) {
+      let {
+        component,
+        componentUrl,
+        options,
+        resolve,
+        reject
+      } = _temp3 === void 0 ? {} : _temp3;
       const router = this;
-      router.componentLoader(component, componentUrl, options, (el, newOptions = {}) => {
+      router.componentLoader(component, componentUrl, options, function (el, newOptions) {
+        if (newOptions === void 0) {
+          newOptions = {};
+        }
+
         resolve(el, newOptions);
       }, reject);
     }