framework7 6.3.5 → 7.0.0-beta.10

package/{esm/modules → modules}/component/vdom.js

@@ -1,57 +1,47 @@
-function _readOnlyError(name) { throw new TypeError("\"" + name + "\" is read-only"); }
-
 /* 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';
-var SELF_CLOSING = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' ');
-var PROPS_ATTRS = 'hidden checked disabled readonly selected autofocus autoplay required multiple value indeterminate routeProps innerHTML'.split(' ');
-var BOOLEAN_PROPS = 'hidden checked disabled readonly selected autofocus autoplay required multiple readOnly indeterminate'.split(' ');
-
-var getTagName = function getTagName(treeNode) {
+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(' ');
+
+const getTagName = treeNode => {
   return typeof treeNode.type === 'function' ? treeNode.type.name || 'CustomComponent' : treeNode.type;
 };
 
-var toCamelCase = function toCamelCase(name) {
-  return name.split('-').map(function (word, index) {
+const toCamelCase = name => {
+  return name.split('-').map((word, index) => {
     if (index === 0) return word.toLowerCase();
     return word[0].toUpperCase() + word.substr(1);
   }).join('');
 };
 
-var propsFromAttrs = function propsFromAttrs() {
-  var 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 = {};
-    }
-
-    Object.keys(obj).forEach(function (key) {
+const propsFromAttrs = (...args) => {
+  const context = {};
+  args.forEach((obj = {}) => {
+    Object.keys(obj).forEach(key => {
       context[toCamelCase(key)] = obj[key];
     });
   });
   return context;
 };
 
-var createCustomComponent = function createCustomComponent(_ref) {
-  var f7 = _ref.f7,
-      treeNode = _ref.treeNode,
-      vnode = _ref.vnode,
-      data = _ref.data;
-  var component = typeof treeNode.type === 'function' ? treeNode.type : customComponents[treeNode.type];
+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,
     children: treeNode.children
-  }).then(function (c) {
+  }).then(c => {
     if (vnode.data && vnode.data.on && c && c.$el) {
-      Object.keys(vnode.data.on).forEach(function (eventName) {
+      Object.keys(vnode.data.on).forEach(eventName => {
         c.$el.on(eventName, vnode.data.on[eventName]);
       });
     } // eslint-disable-next-line
@@ -61,26 +51,28 @@ var createCustomComponent = function createCustomComponent(_ref) {
   });
 };
 
-var updateCustomComponent = function updateCustomComponent(vnode) {
+const updateCustomComponent = vnode => {
   // eslint-disable-next-line
-  var component = vnode && vnode.elm && vnode.elm.__component__;
+  const component = vnode && vnode.elm && vnode.elm.__component__;
   if (!component) return;
-  var newProps = propsFromAttrs(vnode.data.attrs || {}, vnode.data.props || {});
+  const newProps = propsFromAttrs(vnode.data.attrs || {}, vnode.data.props || {});
   component.children = vnode.data.treeNode.children;
   Object.assign(component.props, newProps);
   component.update();
 };
 
-var destroyCustomComponent = function destroyCustomComponent(vnode) {
+const destroyCustomComponent = vnode => {
   // eslint-disable-next-line
-  var component = vnode && vnode.elm && vnode.elm.__component__;
+  const component = vnode && vnode.elm && vnode.elm.__component__;
 
   if (component) {
-    var el = component.el,
-        $el = component.$el;
+    const {
+      el,
+      $el
+    } = component;
 
     if (vnode.data && vnode.data.on && $el) {
-      Object.keys(vnode.data.on).forEach(function (eventName) {
+      Object.keys(vnode.data.on).forEach(eventName => {
         $el.off(eventName, vnode.data.on[eventName]);
       });
     }
@@ -91,63 +83,62 @@ var destroyCustomComponent = function destroyCustomComponent(vnode) {
   }
 };
 
-var isCustomComponent = function isCustomComponent(treeNodeType) {
+const isCustomComponent = treeNodeType => {
   return typeof treeNodeType === 'function' || treeNodeType && treeNodeType.indexOf('-') > 0 && customComponents[treeNodeType];
 };
 
 function getHooks(treeNode, data, f7, initial, isRoot) {
-  var hooks = {};
-  var insert = [];
-  var destroy = [];
-  var update = [];
-  var postpatch = [];
-  var isFakeElement = false;
-  var tagName = getTagName(treeNode);
+  const hooks = {};
+  const insert = [];
+  const destroy = [];
+  const update = [];
+  const postpatch = [];
+  let isFakeElement = false;
+  let tagName = getTagName(treeNode);
 
   if (data && data.attrs && data.attrs.component) {
-    // eslint-disable-next-line
-    data.attrs.component, _readOnlyError("tagName");
+    tagName = data.attrs.component;
     delete data.attrs.component;
     isFakeElement = true;
   }
 
-  var isCustom = isCustomComponent(treeNode.type);
+  const isCustom = isCustomComponent(treeNode.type);
 
   if (isCustom) {
-    insert.push(function (vnode) {
+    insert.push(vnode => {
       if (vnode.sel !== tagName && !isFakeElement) return;
       createCustomComponent({
-        f7: f7,
-        treeNode: treeNode,
-        vnode: vnode,
-        data: data
+        f7,
+        treeNode,
+        vnode,
+        data
       });
     });
-    destroy.push(function (vnode) {
+    destroy.push(vnode => {
       destroyCustomComponent(vnode);
     });
-    update.push(function (oldVnode, vnode) {
+    update.push((oldVnode, vnode) => {
       updateCustomComponent(vnode);
     });
   }
 
   if (!isCustom) {
     if (!data || !data.attrs || !data.attrs.class) return hooks;
-    var classNames = data.attrs.class;
-    classNames.split(' ').forEach(function (className) {
+    const classNames = data.attrs.class;
+    classNames.split(' ').forEach(className => {
       if (!initial) {
-        insert.push.apply(insert, f7.getVnodeHooks('insert', className));
+        insert.push(...f7.getVnodeHooks('insert', className));
       }
 
-      destroy.push.apply(destroy, f7.getVnodeHooks('destroy', className));
-      update.push.apply(update, f7.getVnodeHooks('update', className));
-      postpatch.push.apply(postpatch, f7.getVnodeHooks('postpatch', className));
+      destroy.push(...f7.getVnodeHooks('destroy', className));
+      update.push(...f7.getVnodeHooks('update', className));
+      postpatch.push(...f7.getVnodeHooks('postpatch', className));
     });
   }
 
   if (isRoot && !initial) {
-    postpatch.push(function (oldVnode, vnode) {
-      var vn = vnode || oldVnode;
+    postpatch.push((oldVnode, vnode) => {
+      const vn = vnode || oldVnode;
       if (!vn) return;
 
       if (vn.data && vn.data.component) {
@@ -161,68 +152,59 @@ function getHooks(treeNode, data, f7, initial, isRoot) {
   }
 
   if (insert.length) {
-    hooks.insert = function (vnode) {
-      insert.forEach(function (f) {
-        return f(vnode);
-      });
+    hooks.insert = vnode => {
+      insert.forEach(f => f(vnode));
     };
   }
 
   if (destroy.length) {
-    hooks.destroy = function (vnode) {
-      destroy.forEach(function (f) {
-        return f(vnode);
-      });
+    hooks.destroy = vnode => {
+      destroy.forEach(f => f(vnode));
     };
   }
 
   if (update.length) {
-    hooks.update = function (oldVnode, vnode) {
-      update.forEach(function (f) {
-        return f(oldVnode, vnode);
-      });
+    hooks.update = (oldVnode, vnode) => {
+      update.forEach(f => f(oldVnode, vnode));
     };
   }
 
   if (postpatch.length) {
-    hooks.postpatch = function (oldVnode, vnode) {
-      postpatch.forEach(function (f) {
-        return f(oldVnode, vnode);
-      });
+    hooks.postpatch = (oldVnode, vnode) => {
+      postpatch.forEach(f => f(oldVnode, vnode));
     };
   }
 
   return hooks;
 }
 
-var getEventHandler = function getEventHandler(eventHandler, _temp) {
-  var _ref2 = _temp === void 0 ? {} : _temp,
-      stop = _ref2.stop,
-      prevent = _ref2.prevent,
-      once = _ref2.once;
-
-  var fired = false;
+const getEventHandler = (eventHandler, {
+  stop,
+  prevent,
+  once
+} = {}) => {
+  let fired = false;
 
-  function handler() {
-    var 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.apply(void 0, arguments);
+    eventHandler(...args);
   }
 
   return handler;
 };
 
-var getData = function getData(treeNode, component, f7, initial, isRoot) {
-  var data = {
-    component: component,
-    treeNode: treeNode
+const getData = (treeNode, component, f7, initial, isRoot) => {
+  const data = {
+    component,
+    treeNode
   };
-  var tagName = getTagName(treeNode);
-  Object.keys(treeNode.props).forEach(function (attrName) {
-    var attrValue = treeNode.props[attrName];
+  const tagName = getTagName(treeNode);
+  Object.keys(treeNode.props).forEach(attrName => {
+    const attrValue = treeNode.props[attrName];
     if (typeof attrValue === 'undefined') return;
 
     if (PROPS_ATTRS.indexOf(attrName) >= 0) {
@@ -256,13 +238,13 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
     } else if (attrName.indexOf('@') === 0 || attrName.indexOf('on') === 0 && attrName.length > 2) {
       // Events
       if (!data.on) data.on = {};
-      var eventName = attrName.indexOf('@') === 0 ? attrName.substr(1) : eventNameToColonCase(attrName.substr(2));
-      var stop = false;
-      var prevent = false;
-      var once = false;
+      let eventName = attrName.indexOf('@') === 0 ? attrName.substr(1) : eventNameToColonCase(attrName.substr(2));
+      let stop = false;
+      let prevent = false;
+      let once = false;
 
       if (eventName.indexOf('.') >= 0) {
-        eventName.split('.').forEach(function (eventNamePart, eventNameIndex) {
+        eventName.split('.').forEach((eventNamePart, eventNameIndex) => {
           if (eventNameIndex === 0) eventName = eventNamePart;else {
             if (eventNamePart === 'stop') stop = true;
             if (eventNamePart === 'prevent') prevent = true;
@@ -272,9 +254,9 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
       }
 
       data.on[eventName] = getEventHandler(attrValue, {
-        stop: stop,
-        prevent: prevent,
-        once: once
+        stop,
+        prevent,
+        once
       });
     } else if (attrName === 'style') {
       // Style
@@ -294,13 +276,13 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
       }
     }
   });
-  var hooks = getHooks(treeNode, data, f7, initial, isRoot);
+  const hooks = getHooks(treeNode, data, f7, initial, isRoot);
 
-  hooks.prepatch = function (oldVnode, vnode) {
+  hooks.prepatch = (oldVnode, vnode) => {
     if (!oldVnode || !vnode) return;
 
     if (oldVnode && oldVnode.data && oldVnode.data.props) {
-      Object.keys(oldVnode.data.props).forEach(function (key) {
+      Object.keys(oldVnode.data.props).forEach(key => {
         if (BOOLEAN_PROPS.indexOf(key) < 0) return;
         if (!vnode.data) vnode.data = {};
         if (!vnode.data.props) vnode.data.props = {};
@@ -316,20 +298,20 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
   return data;
 };
 
-var getChildren = function getChildren(treeNode, component, f7, initial) {
+const getChildren = (treeNode, component, f7, initial) => {
   if (treeNode && treeNode.type && SELF_CLOSING.indexOf(treeNode.type) >= 0) {
     return [];
   }
 
-  var children = [];
-  var nodes = treeNode.children;
+  const children = [];
+  const nodes = treeNode.children;
 
-  for (var i = 0; i < nodes.length; i += 1) {
-    var childNode = nodes[i];
-    var child = treeNodeToVNode(childNode, component, f7, initial, false);
+  for (let i = 0; i < nodes.length; i += 1) {
+    const childNode = nodes[i];
+    const child = treeNodeToVNode(childNode, component, f7, initial, false);
 
     if (Array.isArray(child)) {
-      children.push.apply(children, child);
+      children.push(...child);
     } else if (child) {
       children.push(child);
     }
@@ -338,10 +320,10 @@ var getChildren = function getChildren(treeNode, component, f7, initial) {
   return children;
 };
 
-var getSlots = function getSlots(treeNode, component, f7, initial) {
-  var slotName = treeNode.props.name || 'default';
-  var slotNodes = (component.children || []).filter(function (childTreeNode) {
-    var childSlotName = 'default';
+const getSlots = (treeNode, component, f7, initial) => {
+  const slotName = treeNode.props.name || 'default';
+  const slotNodes = (component.children || []).filter(childTreeNode => {
+    let childSlotName = 'default';
 
     if (childTreeNode.props) {
       childSlotName = childTreeNode.props.slot || 'default';
@@ -354,16 +336,14 @@ var getSlots = function getSlots(treeNode, component, f7, initial) {
     return getChildren(treeNode, component, f7, initial);
   }
 
-  return slotNodes.map(function (subTreeNode) {
-    return treeNodeToVNode(subTreeNode, component, f7, initial);
-  });
+  return slotNodes.map(subTreeNode => treeNodeToVNode(subTreeNode, component, f7, initial));
 };
 
-var isTreeNode = function isTreeNode(treeNode) {
+const isTreeNode = treeNode => {
   return isObject(treeNode) && 'props' in treeNode && 'type' in treeNode && 'children' in treeNode;
 };
 
-var treeNodeToVNode = function treeNodeToVNode(treeNode, component, f7, initial, isRoot) {
+const treeNodeToVNode = (treeNode, component, f7, initial, isRoot) => {
   if (!isTreeNode(treeNode)) {
     return String(treeNode);
   }
@@ -372,15 +352,11 @@ var treeNodeToVNode = function treeNodeToVNode(treeNode, component, f7, initial,
     return getSlots(treeNode, component, f7, initial);
   }
 
-  var data = getData(treeNode, component, f7, initial, isRoot);
-  var children = isCustomComponent(treeNode.type) ? [] : getChildren(treeNode, component, f7, initial);
+  const data = getData(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/{esm/modules → modules}/demo-module.js

@@ -1,13 +1,16 @@
 export default {
   // Module Name
   name: 'demo-module',
-  install: function install(params) {
-    var Class = this;
+
+  install(params) {
+    const Class = this;
     console.log(Class, params);
   },
-  create: function create(instance) {
+
+  create(instance) {
     console.log('init', instance);
   },
+
   // App Params related to module
   params: {
     a: 1,
@@ -16,29 +19,34 @@ export default {
   },
   // Extend Prototype
   proto: {
-    demo: function demo() {
+    demo() {
       return 'demo-module-proto-method';
     },
+
     demoStatic: 'demo-module-proto-static'
   },
   // Extend Class, e.g. Class.myMethod
   static: {
-    demo: function demo() {
+    demo() {
       return 'demo-module-class-method';
     },
+
     demoStatic: 'demo-module-class-static'
   },
   // Initialized instance Props & Methods
   instance: {
     demoProp: true,
-    demoMethod: function demoMethod() {
+
+    demoMethod() {
       return 'demo-method';
     }
+
   },
   // Add Event Listeners
   on: {
-    demoEvent: function demoEvent(a, b) {
+    demoEvent(a, b) {
       console.log('demo-event', a, b);
     }
+
   }
 };

package/{esm/modules → modules}/device/device.js

@@ -1,17 +1,17 @@
 import { getDocument } from 'ssr-window';
-import { getDevice } from '../../shared/get-device';
+import { getDevice } from '../../shared/get-device.js';
 export default {
   name: 'device',
   static: {
-    getDevice: getDevice
+    getDevice
   },
   on: {
-    init: function init() {
-      var document = getDocument();
-      var device = getDevice();
-      var classNames = [];
-      var html = document.querySelector('html');
-      var metaStatusbar = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
+    init() {
+      const document = getDocument();
+      const device = getDevice();
+      const classNames = [];
+      const html = document.querySelector('html');
+      const metaStatusbar = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
       if (!html) return;
 
       if (device.standalone && device.ios && metaStatusbar && metaStatusbar.content === 'black-translucent') {
@@ -19,15 +19,15 @@ export default {
       } // Pixel Ratio
 
 
-      classNames.push("device-pixel-ratio-" + Math.floor(device.pixelRatio)); // OS classes
+      classNames.push(`device-pixel-ratio-${Math.floor(device.pixelRatio)}`); // OS classes
 
       if (device.os && !device.desktop) {
-        classNames.push("device-" + device.os);
+        classNames.push(`device-${device.os}`);
       } else if (device.desktop) {
         classNames.push('device-desktop');
 
         if (device.os) {
-          classNames.push("device-" + device.os);
+          classNames.push(`device-${device.os}`);
         }
       }
 
@@ -40,9 +40,10 @@ export default {
       } // Add html classes
 
 
-      classNames.forEach(function (className) {
+      classNames.forEach(className => {
         html.classList.add(className);
       });
     }
+
   }
 };

package/{esm/modules → modules}/history/history.js

@@ -1,12 +1,13 @@
-import History from '../../shared/history';
+import History from '../../shared/history.js';
 export default {
   name: 'history',
   static: {
     history: History
   },
   on: {
-    init: function init() {
+    init() {
       History.init(this);
     }
+
   }
 };

package/{esm/modules → modules}/request/request.js

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

package/modules/resize/resize.js

@@ -0,0 +1,65 @@
+import { getWindow, getDocument } from 'ssr-window';
+import { getDevice } from '../../shared/get-device.js';
+export default {
+  name: 'resize',
+
+  create() {
+    const app = this;
+
+    app.getSize = () => {
+      if (!app.el) return {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0
+      };
+      const offset = app.$el.offset();
+      const [width, height, left, top] = [app.el.offsetWidth, app.el.offsetHeight, offset.left, offset.top];
+      app.width = width;
+      app.height = height;
+      app.left = left;
+      app.top = top;
+      return {
+        width,
+        height,
+        left,
+        top
+      };
+    };
+  },
+
+  on: {
+    init() {
+      const app = this;
+      const window = getWindow(); // Get Size
+
+      app.getSize(); // Emit resize
+
+      window.addEventListener('resize', () => {
+        app.emit('resize');
+      }, false); // Emit orientationchange
+
+      window.addEventListener('orientationchange', () => {
+        app.emit('orientationchange');
+      });
+    },
+
+    orientationchange() {
+      const document = getDocument();
+      const device = getDevice(); // Fix iPad weird body scroll
+
+      if (device.ipad) {
+        document.body.scrollLeft = 0;
+        setTimeout(() => {
+          document.body.scrollLeft = 0;
+        }, 0);
+      }
+    },
+
+    resize() {
+      const app = this;
+      app.getSize();
+    }
+
+  }
+};

package/{esm/modules → modules}/router/app-router-check.js

@@ -1,5 +1,5 @@
 export default function appRouterCheck(router, method) {
   if (!router.view) {
-    throw new Error("Framework7: it is not allowed to use router methods on global app router. Use router methods only on related View, e.g. app.views.main.router." + method + "(...)");
+    throw new Error(`Framework7: it is not allowed to use router methods on global app router. Use router methods only on related View, e.g. app.views.main.router.${method}(...)`);
   }
 }

package/{esm/modules → modules}/router/async-component.js

@@ -1,11 +1,11 @@
 export default function asyncComponent(router, component, resolve, reject) {
   function resolvePromise(componentPromise) {
-    componentPromise.then(function (c) {
+    componentPromise.then(c => {
       // eslint-disable-next-line
       resolve({
         component: c.default || c._default || c
       });
-    }).catch(function (err) {
+    }).catch(err => {
       reject();
       throw new Error(err);
     });
@@ -16,7 +16,7 @@ export default function asyncComponent(router, component, resolve, reject) {
     return;
   }
 
-  var asyncComponentResult = component.call(router);
+  const asyncComponentResult = component.call(router);
 
   if (asyncComponentResult instanceof Promise) {
     resolvePromise(asyncComponentResult);