framework7 6.3.16 → 7.0.0-beta.12

package/{esm/modules → modules}/router/tab.js

@@ -1,15 +1,11 @@
-import $ from '../../shared/dom7';
-import { extend } from '../../shared/utils';
-import History from '../../shared/history';
-import asyncComponent from './async-component';
-
-function tabLoad(tabRoute, loadOptions) {
-  if (loadOptions === void 0) {
-    loadOptions = {};
-  }
-
-  var router = this;
-  var options = extend({
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import History from '../../shared/history.js';
+import asyncComponent from './async-component.js';
+
+function tabLoad(tabRoute, loadOptions = {}) {
+  const router = this;
+  const options = extend({
     animate: router.params.animate,
     browserHistory: true,
     history: true,
@@ -17,8 +13,8 @@ function tabLoad(tabRoute, loadOptions) {
     preload: false,
     on: {}
   }, loadOptions);
-  var currentRoute;
-  var previousRoute;
+  let currentRoute;
+  let previousRoute;
 
   if (options.route) {
     // Set Route
@@ -37,7 +33,7 @@ function tabLoad(tabRoute, loadOptions) {
 
 
     if (router.params.browserHistory && options.browserHistory && !options.reloadPrevious) {
-      History.replace(router.view.id, {
+      History[router.params.browserHistoryTabs](router.view.id, {
         url: options.route.url
       }, (router.params.browserHistoryRoot || '') + router.params.browserHistorySeparator + options.route.url);
     } // Update Router History
@@ -50,29 +46,31 @@ function tabLoad(tabRoute, loadOptions) {
   } // Show Tab
 
 
-  var $parentPageEl = $(options.parentPageEl || router.currentPageEl);
-  var tabEl;
+  const $parentPageEl = $(options.parentPageEl || router.currentPageEl);
+  let tabEl;
 
-  if ($parentPageEl.length && $parentPageEl.find("#" + tabRoute.id).length) {
-    tabEl = $parentPageEl.find("#" + tabRoute.id).eq(0);
+  if ($parentPageEl.length && $parentPageEl.find(`#${tabRoute.id}`).length) {
+    tabEl = $parentPageEl.find(`#${tabRoute.id}`).eq(0);
   } else if (router.view.selector) {
-    tabEl = router.view.selector + " #" + tabRoute.id;
+    tabEl = `${router.view.selector} #${tabRoute.id}`;
   } else {
-    tabEl = "#" + tabRoute.id;
+    tabEl = `#${tabRoute.id}`;
   }
 
-  var tabShowResult = router.app.tab.show({
-    tabEl: tabEl,
+  const tabShowResult = router.app.tab.show({
+    tabEl,
     animate: options.animate,
     tabRoute: options.route
   });
-  var $newTabEl = tabShowResult.$newTabEl,
-      $oldTabEl = tabShowResult.$oldTabEl,
-      animated = tabShowResult.animated,
-      onTabsChanged = tabShowResult.onTabsChanged;
+  const {
+    $newTabEl,
+    $oldTabEl,
+    animated,
+    onTabsChanged
+  } = tabShowResult;
 
   if ($newTabEl && $newTabEl.parents('.page').length > 0 && options.route) {
-    var tabParentPageData = $newTabEl.parents('.page')[0].f7Page;
+    const tabParentPageData = $newTabEl.parents('.page')[0].f7Page;
 
     if (tabParentPageData && options.route) {
       tabParentPageData.route = options.route;
@@ -83,14 +81,14 @@ function tabLoad(tabRoute, loadOptions) {
   function onTabLoaded(contentEl) {
     // Remove theme elements
     router.removeThemeElements($newTabEl);
-    var tabEventTarget = $newTabEl;
+    let tabEventTarget = $newTabEl;
     if (typeof contentEl !== 'string') tabEventTarget = $(contentEl);
     tabEventTarget.trigger('tab:init tab:mounted', tabRoute);
     router.emit('tabInit tabMounted', $newTabEl[0], tabRoute);
 
     if ($oldTabEl && $oldTabEl.length) {
       if (animated) {
-        onTabsChanged(function () {
+        onTabsChanged(() => {
           router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
 
           if (router.params.unloadTabContent) {
@@ -111,7 +109,7 @@ function tabLoad(tabRoute, loadOptions) {
     if (!$oldTabEl || !$oldTabEl.length) return router;
 
     if (animated) {
-      onTabsChanged(function () {
+      onTabsChanged(() => {
         router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
       });
     } else {
@@ -124,11 +122,13 @@ function tabLoad(tabRoute, loadOptions) {
 
   function loadTab(loadTabParams, loadTabOptions) {
     // Load Tab Props
-    var url = loadTabParams.url,
-        content = loadTabParams.content,
-        el = loadTabParams.el,
-        component = loadTabParams.component,
-        componentUrl = loadTabParams.componentUrl; // Component/Template Callbacks
+    const {
+      url,
+      content,
+      el,
+      component,
+      componentUrl
+    } = loadTabParams; // Component/Template Callbacks
 
     function resolve(contentEl) {
       router.allowPageChange = true;
@@ -140,7 +140,7 @@ function tabLoad(tabRoute, loadOptions) {
         $newTabEl.html('');
 
         if (contentEl.f7Component) {
-          contentEl.f7Component.mount(function (componentEl) {
+          contentEl.f7Component.mount(componentEl => {
             $newTabEl.append(componentEl);
           });
         } else {
@@ -166,11 +166,11 @@ function tabLoad(tabRoute, loadOptions) {
       try {
         router.tabComponentLoader({
           tabEl: $newTabEl[0],
-          component: component,
-          componentUrl: componentUrl,
+          component,
+          componentUrl,
           options: loadTabOptions,
-          resolve: resolve,
-          reject: reject
+          resolve,
+          reject
         });
       } catch (err) {
         router.allowPageChange = true;
@@ -183,21 +183,21 @@ function tabLoad(tabRoute, loadOptions) {
         router.xhrAbortController = false;
       }
 
-      router.xhrRequest(url, loadTabOptions).then(function (tabContent) {
+      router.xhrRequest(url, loadTabOptions).then(tabContent => {
         resolve(tabContent);
-      }).catch(function () {
+      }).catch(() => {
         router.allowPageChange = true;
       });
     }
   }
 
-  var hasContentLoadProp;
-  'url content component el componentUrl'.split(' ').forEach(function (tabLoadProp) {
+  let hasContentLoadProp;
+  'url content component el componentUrl'.split(' ').forEach(tabLoadProp => {
     if (tabRoute[tabLoadProp]) {
-      var _loadTab;
-
       hasContentLoadProp = true;
-      loadTab((_loadTab = {}, _loadTab[tabLoadProp] = tabRoute[tabLoadProp], _loadTab), options);
+      loadTab({
+        [tabLoadProp]: tabRoute[tabLoadProp]
+      }, options);
     }
   }); // Async
 
@@ -211,7 +211,7 @@ function tabLoad(tabRoute, loadOptions) {
 
   if (tabRoute.async) {
     tabRoute.async.call(router, {
-      router: router,
+      router,
       to: currentRoute,
       from: previousRoute,
       resolve: asyncResolve,
@@ -228,15 +228,15 @@ function tabLoad(tabRoute, loadOptions) {
 }
 
 function tabRemove($oldTabEl, $newTabEl, tabRoute) {
-  var router = this;
-  var hasTabComponentChild;
+  const router = this;
+  let hasTabComponentChild;
 
   if ($oldTabEl[0]) {
     $oldTabEl[0].f7RouterTabLoaded = false;
     delete $oldTabEl[0].f7RouterTabLoaded;
   }
 
-  $oldTabEl.children().each(function (tabChild) {
+  $oldTabEl.children().each(tabChild => {
     if (tabChild.f7Component) {
       hasTabComponentChild = true;
       $(tabChild).trigger('tab:beforeremove', tabRoute);

package/{esm/modules → modules}/service-worker/service-worker.js

@@ -1,58 +1,59 @@
 import { getWindow } from 'ssr-window';
-import { extend } from '../../shared/utils';
-var SW = {
+import { extend } from '../../shared/utils.js';
+const SW = {
   registrations: [],
-  register: function register(path, scope) {
-    var app = this;
-    var window = getWindow();
+
+  register(path, scope) {
+    const app = this;
+    const window = getWindow();
 
     if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) {
-      return new Promise(function (resolve, reject) {
+      return new Promise((resolve, reject) => {
         reject(new Error('Service worker is not supported'));
       });
     }
 
-    return new Promise(function (resolve, reject) {
+    return new Promise((resolve, reject) => {
       app.serviceWorker.container.register(path, scope ? {
-        scope: scope
-      } : {}).then(function (reg) {
+        scope
+      } : {}).then(reg => {
         SW.registrations.push(reg);
         app.emit('serviceWorkerRegisterSuccess', reg);
         resolve(reg);
-      }).catch(function (error) {
+      }).catch(error => {
         app.emit('serviceWorkerRegisterError', error);
         reject(error);
       });
     });
   },
-  unregister: function unregister(registration) {
-    var app = this;
-    var window = getWindow();
+
+  unregister(registration) {
+    const app = this;
+    const window = getWindow();
 
     if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) {
-      return new Promise(function (resolve, reject) {
+      return new Promise((resolve, reject) => {
         reject(new Error('Service worker is not supported'));
       });
     }
 
-    var registrations;
+    let registrations;
     if (!registration) registrations = SW.registrations;else if (Array.isArray(registration)) registrations = registration;else registrations = [registration];
-    return Promise.all(registrations.map(function (reg) {
-      return new Promise(function (resolve, reject) {
-        reg.unregister().then(function () {
-          if (SW.registrations.indexOf(reg) >= 0) {
-            SW.registrations.splice(SW.registrations.indexOf(reg), 1);
-          }
+    return Promise.all(registrations.map(reg => new Promise((resolve, reject) => {
+      reg.unregister().then(() => {
+        if (SW.registrations.indexOf(reg) >= 0) {
+          SW.registrations.splice(SW.registrations.indexOf(reg), 1);
+        }
 
-          app.emit('serviceWorkerUnregisterSuccess', reg);
-          resolve();
-        }).catch(function (error) {
-          app.emit('serviceWorkerUnregisterError', reg, error);
-          reject(error);
-        });
+        app.emit('serviceWorkerUnregisterSuccess', reg);
+        resolve();
+      }).catch(error => {
+        app.emit('serviceWorkerUnregisterError', reg, error);
+        reject(error);
       });
-    }));
+    })));
   }
+
 };
 export default {
   name: 'sw',
@@ -62,9 +63,10 @@ export default {
       scope: undefined
     }
   },
-  create: function create() {
-    var app = this;
-    var window = getWindow();
+
+  create() {
+    const app = this;
+    const window = getWindow();
     extend(app, {
       serviceWorker: {
         container: 'serviceWorker' in window.navigator ? window.navigator.serviceWorker : undefined,
@@ -74,20 +76,22 @@ export default {
       }
     });
   },
+
   on: {
-    init: function init() {
-      var window = getWindow();
+    init() {
+      const window = getWindow();
       if (!('serviceWorker' in window.navigator)) return;
-      var app = this;
+      const app = this;
       if (app.device.cordova || window.Capacitor && window.Capacitor.isNative) return;
       if (!app.serviceWorker.container) return;
-      var paths = app.params.serviceWorker.path;
-      var scope = app.params.serviceWorker.scope;
+      const paths = app.params.serviceWorker.path;
+      const scope = app.params.serviceWorker.scope;
       if (!paths || Array.isArray(paths) && !paths.length) return;
-      var toRegister = Array.isArray(paths) ? paths : [paths];
-      toRegister.forEach(function (path) {
+      const toRegister = Array.isArray(paths) ? paths : [paths];
+      toRegister.forEach(path => {
         app.serviceWorker.register(path, scope);
       });
     }
+
   }
 };

package/modules/store/create-store.js

@@ -0,0 +1,149 @@
+/* eslint-disable no-underscore-dangle */
+import { extend } from '../../shared/utils.js';
+
+function createStore(storeParams = {}) {
+  const store = {
+    __store: true
+  };
+  const originalState = { ...(storeParams.state || {})
+  };
+  const actions = { ...(storeParams.actions || {})
+  };
+  const getters = { ...(storeParams.getters || {})
+  };
+  const state = extend({}, originalState);
+  let propsQueue = [];
+  const gettersDependencies = {};
+  const gettersCallbacks = {};
+  Object.keys(getters).forEach(getterKey => {
+    gettersDependencies[getterKey] = [];
+    gettersCallbacks[getterKey] = [];
+  });
+
+  const getGetterValue = getterKey => {
+    return getters[getterKey]({
+      state: store.state
+    });
+  };
+
+  const addGetterDependencies = (getterKey, deps) => {
+    if (!gettersDependencies[getterKey]) gettersDependencies[getterKey] = [];
+    deps.forEach(dep => {
+      if (gettersDependencies[getterKey].indexOf(dep) < 0) {
+        gettersDependencies[getterKey].push(dep);
+      }
+    });
+  };
+
+  const addGetterCallback = (getterKey, callback) => {
+    if (!gettersCallbacks[getterKey]) gettersCallbacks[getterKey] = [];
+    gettersCallbacks[getterKey].push(callback);
+  };
+
+  const runGetterCallbacks = stateKey => {
+    const keys = Object.keys(gettersDependencies).filter(getterKey => {
+      return gettersDependencies[getterKey].indexOf(stateKey) >= 0;
+    });
+    keys.forEach(getterKey => {
+      if (!gettersCallbacks[getterKey] || !gettersCallbacks[getterKey].length) return;
+      gettersCallbacks[getterKey].forEach(callback => {
+        callback(getGetterValue(getterKey));
+      });
+    });
+  };
+
+  const removeGetterCallback = callback => {
+    Object.keys(gettersCallbacks).forEach(stateKey => {
+      const callbacks = gettersCallbacks[stateKey];
+
+      if (callbacks.indexOf(callback) >= 0) {
+        callbacks.splice(callbacks.indexOf(callback), 1);
+      }
+    });
+  }; // eslint-disable-next-line
+
+
+  store.__removeCallback = callback => {
+    removeGetterCallback(callback);
+  };
+
+  const getterValue = (getterKey, addCallback = true) => {
+    if (getterKey === 'constructor') return undefined;
+    propsQueue = [];
+    const value = getGetterValue(getterKey);
+    addGetterDependencies(getterKey, propsQueue);
+
+    const onUpdated = callback => {
+      addGetterCallback(getterKey, callback);
+    };
+
+    const obj = {
+      value,
+      onUpdated
+    };
+
+    if (!addCallback) {
+      return obj;
+    }
+
+    const callback = v => {
+      obj.value = v;
+    };
+
+    obj.__callback = callback;
+    addGetterCallback(getterKey, callback); // eslint-disable-next-line
+
+    return obj;
+  };
+
+  store.state = new Proxy(state, {
+    set: (target, prop, value) => {
+      target[prop] = value;
+      runGetterCallbacks(prop);
+      return true;
+    },
+    get: (target, prop) => {
+      propsQueue.push(prop);
+      return target[prop];
+    }
+  });
+  store.getters = new Proxy(getters, {
+    set: () => false,
+    get: (target, prop) => {
+      if (!target[prop]) {
+        return undefined;
+      }
+
+      return getterValue(prop, true);
+    }
+  });
+  store._gettersPlain = new Proxy(getters, {
+    set: () => false,
+    get: (target, prop) => {
+      if (!target[prop]) {
+        return undefined;
+      }
+
+      return getterValue(prop, false);
+    }
+  });
+
+  store.dispatch = (actionName, data) => {
+    return new Promise((resolve, reject) => {
+      if (!actions[actionName]) {
+        reject();
+        throw new Error(`Framework7: Store action "${actionName}" is not found`);
+      }
+
+      const result = actions[actionName]({
+        state: store.state,
+        dispatch: store.dispatch
+      }, data);
+      resolve(result);
+    });
+  };
+
+  return store;
+}
+
+export default createStore;

package/modules/store/store.js

@@ -0,0 +1,11 @@
+import createStore from './create-store.js';
+export { createStore };
+export default {
+  name: 'store',
+  static: {
+    createStore
+  },
+  proto: {
+    createStore
+  }
+};

package/modules/support/support.js

@@ -0,0 +1,7 @@
+import { getSupport } from '../../shared/get-support.js';
+export default {
+  name: 'support',
+  static: {
+    getSupport
+  }
+};