framework7 6.3.4 → 7.0.0-beta.3

package/components/actions/actions.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var s=o.$,a=o.utils,t=o.getDevice,l=(o.getSupport,o.Class,o.Modal),n=(o.ConstructorMethods,o.ModalMethods),r=a.extend,c=a.nextTick;class i extends l{constructor(o,e){const a=r({on:{}},o.params.actions,e);super(o,a);const l=this,n=t(),i=getWindow(),p=getDocument();let d,m,u;if(l.params=a,l.params.buttons&&(d=l.params.buttons,Array.isArray(d[0])||(d=[d])),l.groups=d,l.params.el?m=s(l.params.el).eq(0):l.params.content?m=s(l.params.content).filter((o=>1===o.nodeType)).eq(0):l.params.buttons&&(l.params.convertToPopover&&(l.popoverHtml=l.renderPopover()),l.actionsHtml=l.render()),m&&m.length>0&&m[0].f7Modal)return m[0].f7Modal;if(m&&0===m.length&&!l.actionsHtml&&!l.popoverHtml)return l.destroy();l.params.backdrop&&l.params.backdropEl?u=s(l.params.backdropEl):l.params.backdrop&&(u=l.$containerEl.children(".actions-backdrop"),0===u.length&&(u=s('<div class="actions-backdrop"></div>'),l.$containerEl.append(u)));const $=l.open,v=l.close;let b;function k(o){const e=s(this);let a,t;if(e.hasClass("list-button")||e.hasClass("item-link")?(a=e.parents("li").index(),t=e.parents(".list").index()):(a=e.index(),t=e.parents(".actions-group").index()),void 0!==d){const e=d[t][a];e.onClick&&e.onClick(l,o),l.params.onClick&&l.params.onClick(l,o),!1!==e.close&&l.close()}}function g(o){const e=o.target,a=s(e);!n.desktop&&n.cordova&&(i.Keyboard&&i.Keyboard.isVisible||i.cordova.plugins&&i.cordova.plugins.Keyboard&&i.cordova.plugins.Keyboard.isVisible)||0===a.closest(l.el).length&&(l.params.closeByBackdropClick&&l.params.backdrop&&l.backdropEl&&l.backdropEl===e||l.params.closeByOutsideClick)&&l.close()}function f(o){27===o.keyCode&&l.params.closeOnEscape&&l.close()}return l.open=function(e){let a=!1;const{targetEl:t,targetX:r,targetY:i,targetWidth:p,targetHeight:d}=l.params;return l.params.convertToPopover&&(t||void 0!==r&&void 0!==i)&&(l.params.forceToPopover||n.ios&&n.ipad||o.width>=768||n.desktop&&"aurora"===o.theme)&&(a=!0),a&&l.popoverHtml?(b=o.popover.create({containerEl:l.params.containerEl,content:l.popoverHtml,backdrop:l.params.backdrop,targetEl:t,targetX:r,targetY:i,targetWidth:p,targetHeight:d,on:{open(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:open ${l.type.toLowerCase()}:open`),l.emit(`local::open modalOpen ${l.type}Open`,l)},opened(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:opened ${l.type.toLowerCase()}:opened`),l.emit(`local::opened modalOpened ${l.type}Opened`,l)},close(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:close ${l.type.toLowerCase()}:close`),l.emit(`local::close modalClose ${l.type}Close`,l)},closed(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:closed ${l.type.toLowerCase()}:closed`),l.emit(`local::closed modalClosed ${l.type}Closed`,l)}}}),b.open(e),b.once("popoverOpened",(()=>{b.$el.find(".list-button, .item-link").each((o=>{s(o).on("click",k)}))})),b.once("popoverClosed",(()=>{b.$el.find(".list-button, .item-link").each((o=>{s(o).off("click",k)})),c((()=>{b.destroy(),b=void 0}))}))):(l.$el=l.actionsHtml?s(l.actionsHtml):l.$el,l.$el[0].f7Modal=l,l.groups&&(l.$el.find(".actions-button").each((o=>{s(o).on("click",k)})),l.once("actionsClosed",(()=>{l.$el.find(".actions-button").each((o=>{s(o).off("click",k)}))}))),l.el=l.$el[0],$.call(l,e)),l},l.close=function(o){return b?b.close(o):v.call(l,o),l},r(l,{app:o,$el:m,el:m?m[0]:void 0,$backdropEl:u,backdropEl:u&&u[0],type:"actions"}),l.params.closeOnEscape&&(l.on("open",(()=>{s(p).on("keydown",f)})),l.on("close",(()=>{s(p).off("keydown",f)}))),l.on("opened",(()=>{(l.params.closeByBackdropClick||l.params.closeByOutsideClick)&&o.on("click",g)})),l.on("close",(()=>{(l.params.closeByBackdropClick||l.params.closeByOutsideClick)&&o.off("click",g)})),m&&(m[0].f7Modal=l),l}render(){const o=this;if(o.params.render)return o.params.render.call(o,o);const{groups:e}=o,s=o.params.cssClass;return $jsx("div",{class:`actions-modal${o.params.grid?" actions-grid":""} ${s||""}`},e.map((o=>$jsx("div",{class:"actions-group"},o.map((o=>{const e=["actions-"+(o.label?"label":"button")],{color:s,bg:a,bold:t,disabled:l,label:n,text:r,icon:c}=o;return s&&e.push(`color-${s}`),a&&e.push(`bg-color-${a}`),t&&e.push("actions-button-bold"),l&&e.push("disabled"),n?$jsx("div",{class:e.join(" ")},r):$jsx("div",{class:e.join(" ")},c&&$jsx("div",{class:"actions-button-media"},c),$jsx("div",{class:"actions-button-text"},r))}))))))}renderPopover(){const o=this;if(o.params.renderPopover)return o.params.renderPopover.call(o,o);const{groups:e}=o,s=o.params.cssClass;return $jsx("div",{class:`popover popover-from-actions ${s||""}`},$jsx("div",{class:"popover-inner"},e.map((o=>$jsx("div",{class:"list"},$jsx("ul",null,o.map((o=>{const e=[],{color:s,bg:a,bold:t,disabled:l,label:n,text:r,icon:c}=o;return s&&e.push(`color-${s}`),a&&e.push(`bg-color-${a}`),t&&e.push("popover-from-actions-bold"),l&&e.push("disabled"),n?(e.push("popover-from-actions-label"),`<li class="${e.join(" ")}">${r}</li>`):c?(e.push("item-link item-content"),$jsx("li",null,$jsx("a",{class:e.join(" ")},$jsx("div",{class:"item-media"},c),$jsx("div",{class:"item-inner"},$jsx("div",{class:"item-title"},r))))):(e.push("list-button"),$jsx("li",null,$jsx("a",{class:e.join(" ")},r)))}))))))))}}var p={name:"actions",params:{actions:{convertToPopover:!0,forceToPopover:!1,backdrop:!0,backdropEl:void 0,cssClass:null,closeByBackdropClick:!0,closeOnEscape:!1,render:null,renderPopover:null,containerEl:null}},static:{Actions:i},create(){this.actions=n({app:this,constructor:i,defaultSelector:".actions-modal.modal-in"})},clicks:{".actions-open":function(o,e={}){this.actions.open(e.actions,e.animate,o)},".actions-close":function(o,e={}){this.actions.close(e.actions,e.animate,o)}}};if(e){if(o.prototype.modules&&o.prototype.modules[p.name])return;o.use(p),o.instance&&(o.instance.useModuleParams(p,o.instance.params),o.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/app/app-class.d.ts

@@ -53,8 +53,8 @@ export interface Framework7Parameters {
   language?: string;
   /** Array with default routes to all views.. (default []) */
   routes?: Router.RouteParameters[];
-  /** Enables auto dark theme */
-  autoDarkTheme?: boolean;
+  /** Enables auto dark mode */
+  autoDarkMode?: boolean;
   /** Lazy modules path */
   lazyModulesPath?: string;
   /** By default Framework7 will be initialized automatically when you call new Framework7(). If you want to prevent this behavior you can disable it with this option and then initialize it manually with init() when you need it.. (default true) */
@@ -116,8 +116,8 @@ export interface Framework7Plugin {
 export interface Framework7Events {
   /** Event will be fired on app initialization. Automatically after new Framework7() or after app.init() if you disabled auto init. */
   init: () => void;
-  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkTheme` enabled */
-  darkThemeChange: (isDark: boolean) => void;
+  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkMode` enabled */
+  darkModeChange: (isDark: boolean) => void;
   /** Event will be fired when app goes online */
   online: () => void;
   /** Event will be fired when app goes offline */
@@ -145,8 +145,8 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   rtl: boolean;
   /** Current app theme. Can be md, ios or aurora */
   theme: string;
-  /** Indicates whether the dark theme active or not. This property has effect only when `autoDarkTheme` enabled */
-  darkTheme: boolean;
+  /** Indicates whether the dark theme active or not. This property has effect only when `autoDarkMode` enabled */
+  darkMode: boolean;
   /** Object with app root data passed on intialization */
   data: any;
   /** Object with app root methods */
@@ -159,10 +159,10 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   $: Dom7;
   /** App parameters */
   params: Framework7Parameters;
-  /** Enables auto dark theme detection */
-  enableAutoDarkTheme(): void;
-  /** Disables auto dark theme detection */
-  disableAutoDarkTheme(): void;
+  /** Enables auto dark mode detection */
+  enableAutoDarkMode(): void;
+  /** Disables auto dark mode detection */
+  disableAutoDarkMode(): void;
   /** Initialize app. In case you disabled auto initialization with init: false parameter */
   init(): void;
   /** Load module */

package/{esm/components → components}/app/app-class.js

@@ -1,13 +1,3 @@
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 /* eslint-disable no-underscore-dangle */
 import { getWindow, getDocument } from 'ssr-window';
 import { extend, nextFrame } from '../../shared/utils';
@@ -20,37 +10,28 @@ import ModalMethods from '../../shared/modal-methods';
 import $ from '../../shared/dom7';
 import loadModule from './load-module';
 
-var Framework7 = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Framework7, _Framework7Class);
-
-  function Framework7(params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params) || this; // eslint-disable-next-line
+class Framework7 extends Framework7Class {
+  constructor(params = {}) {
+    super(params); // eslint-disable-next-line
 
     if (Framework7.instance && typeof window !== 'undefined') {
       throw new Error("Framework7 is already initialized and can't be initialized more than once");
     }
 
-    var device = getDevice({
+    const device = getDevice({
       userAgent: params.userAgent || undefined
     });
-    var support = getSupport();
-    var passedParams = extend({}, params); // App Instance
-
-    var app = _assertThisInitialized(_this);
+    const support = getSupport();
+    const passedParams = extend({}, params); // App Instance
 
+    const app = this;
     app.device = device;
     app.support = support;
-    var w = getWindow();
-    var d = getDocument();
+    const w = getWindow();
+    const d = getDocument();
     Framework7.instance = app; // Default
 
-    var defaults = {
+    const defaults = {
       version: '1.0.0',
       id: 'io.framework7.myapp',
       el: 'body',
@@ -61,7 +42,7 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
       lazyModulesPath: null,
       initOnDeviceReady: true,
       init: true,
-      autoDarkTheme: false,
+      autoDarkMode: false,
       iosTranslucentBars: true,
       iosTranslucentModals: true,
       component: undefined,
@@ -95,7 +76,7 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
         return app.params.theme;
       }(),
       // Initially passed parameters
-      passedParams: passedParams,
+      passedParams,
       online: w.navigator.onLine
     });
     if (params.store) app.params.store = params.store; // Save Root
@@ -111,7 +92,7 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
 
     if (app.params.init) {
       if (device.cordova && app.params.initOnDeviceReady) {
-        $(d).on('deviceready', function () {
+        $(d).on('deviceready', () => {
           app.init();
         });
       } else {
@@ -120,16 +101,14 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
     } // Return app instance
 
 
-    return app || _assertThisInitialized(_this);
+    return app;
   }
 
-  var _proto = Framework7.prototype;
-
-  _proto.mount = function mount(rootEl) {
-    var app = this;
-    var window = getWindow();
-    var document = getDocument();
-    var $rootEl = $(rootEl || app.params.el).eq(0);
+  mount(rootEl) {
+    const app = this;
+    const window = getWindow();
+    const document = getDocument();
+    const $rootEl = $(rootEl || app.params.el).eq(0);
     app.$el = $rootEl;
 
     if (app.$el && app.$el[0]) {
@@ -139,8 +118,8 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
     } // Auto Dark Theme
 
 
-    var DARK = '(prefers-color-scheme: dark)';
-    var LIGHT = '(prefers-color-scheme: light)';
+    const DARK = '(prefers-color-scheme: dark)';
+    const LIGHT = '(prefers-color-scheme: light)';
     app.mq = {};
 
     if (window.matchMedia) {
@@ -148,46 +127,46 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
       app.mq.light = window.matchMedia(LIGHT);
     }
 
-    app.colorSchemeListener = function colorSchemeListener(_ref) {
-      var matches = _ref.matches,
-          media = _ref.media;
-
+    app.colorSchemeListener = function colorSchemeListener({
+      matches,
+      media
+    }) {
       if (!matches) {
         return;
       }
 
-      var html = document.querySelector('html');
+      const html = document.querySelector('html');
 
       if (media === DARK) {
-        html.classList.add('theme-dark');
-        app.darkTheme = true;
-        app.emit('darkThemeChange', true);
+        html.classList.add('dark');
+        app.darkMode = true;
+        app.emit('darkModeChange', true);
       } else if (media === LIGHT) {
-        html.classList.remove('theme-dark');
-        app.darkTheme = false;
-        app.emit('darkThemeChange', false);
+        html.classList.remove('dark');
+        app.darkMode = false;
+        app.emit('darkModeChange', false);
       }
     };
 
     app.emit('mount');
-  };
+  }
 
-  _proto.initStore = function initStore() {
-    var app = this;
+  initStore() {
+    const app = this;
 
     if (typeof app.params.store !== 'undefined' && app.params.store.__store) {
       app.store = app.params.store;
     } else {
       app.store = app.createStore(app.params.store);
     }
-  };
+  }
 
-  _proto.enableAutoDarkTheme = function enableAutoDarkTheme() {
-    var window = getWindow();
-    var document = getDocument();
+  enableAutoDarkMode() {
+    const window = getWindow();
+    const document = getDocument();
     if (!window.matchMedia) return;
-    var app = this;
-    var html = document.querySelector('html');
+    const app = this;
+    const html = document.querySelector('html');
 
     if (app.mq.dark && app.mq.light) {
       app.mq.dark.addListener(app.colorSchemeListener);
@@ -195,44 +174,44 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (app.mq.dark && app.mq.dark.matches) {
-      html.classList.add('theme-dark');
-      app.darkTheme = true;
-      app.emit('darkThemeChange', true);
+      html.classList.add('dark');
+      app.darkMode = true;
+      app.emit('darkModeChange', true);
     } else if (app.mq.light && app.mq.light.matches) {
-      html.classList.remove('theme-dark');
-      app.darkTheme = false;
-      app.emit('darkThemeChange', false);
+      html.classList.remove('dark');
+      app.darkMode = false;
+      app.emit('darkModeChange', false);
     }
-  };
+  }
 
-  _proto.disableAutoDarkTheme = function disableAutoDarkTheme() {
-    var window = getWindow();
+  disableAutoDarkMode() {
+    const window = getWindow();
     if (!window.matchMedia) return;
-    var app = this;
+    const app = this;
     if (app.mq.dark) app.mq.dark.removeListener(app.colorSchemeListener);
     if (app.mq.light) app.mq.light.removeListener(app.colorSchemeListener);
-  };
+  }
 
-  _proto.initAppComponent = function initAppComponent(callback) {
-    var app = this;
+  initAppComponent(callback) {
+    const app = this;
     app.router.componentLoader(app.params.component, app.params.componentUrl, {
       componentOptions: {
         el: app.$el[0]
       }
-    }, function (el) {
+    }, el => {
       app.$el = $(el);
       app.$el[0].f7 = app;
       app.$elComponent = el.f7Component;
       app.el = app.$el[0];
       if (callback) callback();
-    }, function () {});
-  };
+    }, () => {});
+  }
 
-  _proto.init = function init(rootEl) {
-    var app = this;
+  init(rootEl) {
+    const app = this;
     app.mount(rootEl);
 
-    var init = function init() {
+    const init = () => {
       if (app.initialized) return;
       app.$el.addClass('framework7-initializing'); // RTL attr
 
@@ -241,18 +220,18 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
       } // Auto Dark Theme
 
 
-      if (app.params.autoDarkTheme) {
-        app.enableAutoDarkTheme();
+      if (app.params.autoDarkMode) {
+        app.enableAutoDarkMode();
       } // Watch for online/offline state
 
 
-      var window = getWindow();
-      window.addEventListener('offline', function () {
+      const window = getWindow();
+      window.addEventListener('offline', () => {
         app.online = false;
         app.emit('offline');
         app.emit('connection', false);
       });
-      window.addEventListener('online', function () {
+      window.addEventListener('online', () => {
         app.online = true;
         app.emit('online');
         app.emit('connection', true);
@@ -262,7 +241,7 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
 
       $('html').removeClass('ios md aurora').addClass(app.theme); // iOS Translucent
 
-      var device = app.device;
+      const device = app.device;
 
       if (app.params.iosTranslucentBars && app.theme === 'ios' && device.ios) {
         $('html').addClass('ios-translucent-bars');
@@ -273,7 +252,7 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
       } // Init class
 
 
-      nextFrame(function () {
+      nextFrame(() => {
         app.$el.removeClass('framework7-initializing');
       }); // Emit, init other modules
 
@@ -282,7 +261,7 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
     };
 
     if (app.params.component || app.params.componentUrl) {
-      app.initAppComponent(function () {
+      app.initAppComponent(() => {
         init();
       });
     } else {
@@ -291,72 +270,60 @@ var Framework7 = /*#__PURE__*/function (_Framework7Class) {
 
     return app;
   } // eslint-disable-next-line
-  ;
 
-  _proto.loadModule = function loadModule() {
-    return Framework7.loadModule.apply(Framework7, arguments);
+
+  loadModule(...args) {
+    return Framework7.loadModule(...args);
   } // eslint-disable-next-line
-  ;
 
-  _proto.loadModules = function loadModules() {
-    return Framework7.loadModules.apply(Framework7, arguments);
-  };
 
-  _proto.getVnodeHooks = function getVnodeHooks(hook, id) {
-    var app = this;
+  loadModules(...args) {
+    return Framework7.loadModules(...args);
+  }
+
+  getVnodeHooks(hook, id) {
+    const app = this;
     if (!app.vnodeHooks || !app.vnodeHooks[hook]) return [];
     return app.vnodeHooks[hook][id] || [];
   } // eslint-disable-next-line
-  ;
 
-  _createClass(Framework7, [{
-    key: "$",
-    get: function get() {
-      return $;
-    }
-  }], [{
-    key: "Dom7",
-    get: function get() {
-      return $;
-    }
-  }, {
-    key: "$",
-    get: function get() {
-      return $;
-    }
-  }, {
-    key: "device",
-    get: function get() {
-      return getDevice();
-    }
-  }, {
-    key: "support",
-    get: function get() {
-      return getSupport();
-    }
-  }, {
-    key: "Class",
-    get: function get() {
-      return Framework7Class;
-    }
-  }, {
-    key: "Events",
-    get: function get() {
-      return EventsClass;
-    }
-  }]);
 
-  return Framework7;
-}(Framework7Class);
+  get $() {
+    return $;
+  }
+
+  static get Dom7() {
+    return $;
+  }
+
+  static get $() {
+    return $;
+  }
+
+  static get device() {
+    return getDevice();
+  }
+
+  static get support() {
+    return getSupport();
+  }
+
+  static get Class() {
+    return Framework7Class;
+  }
+
+  static get Events() {
+    return EventsClass;
+  }
+
+}
 
 Framework7.ModalMethods = ModalMethods;
 Framework7.ConstructorMethods = ConstructorMethods;
 Framework7.loadModule = loadModule;
 
 Framework7.loadModules = function loadModules(modules) {
-  return Promise.all(modules.map(function (module) {
-    return Framework7.loadModule(module);
-  }));
+  return Promise.all(modules.map(module => Framework7.loadModule(module)));
 };
 
 export default Framework7;

package/components/app/app.less

@@ -34,11 +34,11 @@ body {
   line-height: var(--f7-line-height);
   color: var(--f7-text-color);
 }
-.theme-dark body,
-body.theme-dark {
+.dark body,
+body.dark {
   background: #000;
 }
-.theme-dark {
+.dark {
   color: var(--f7-text-color);
 }
 .framework7-root {

package/{esm/components → components}/app/load-module.js

@@ -1,17 +1,17 @@
 import { getWindow, getDocument } from 'ssr-window';
 import { id } from '../../shared/utils';
 import $ from '../../shared/dom7';
-var fetchedModules = [];
+const fetchedModules = [];
 
 function loadModule(moduleToLoad) {
-  var Framework7 = this;
-  var window = getWindow();
-  var document = getDocument();
-  return new Promise(function (resolve, reject) {
-    var app = Framework7.instance;
-    var modulePath;
-    var moduleObj;
-    var moduleFunc;
+  const Framework7 = this;
+  const window = getWindow();
+  const document = getDocument();
+  return new Promise((resolve, reject) => {
+    const app = Framework7.instance;
+    let modulePath;
+    let moduleObj;
+    let moduleFunc;
 
     if (!moduleToLoad) {
       reject(new Error('Framework7: Lazy module must be specified'));
@@ -28,7 +28,7 @@ function loadModule(moduleToLoad) {
     }
 
     if (typeof moduleToLoad === 'string') {
-      var matchNamePattern = moduleToLoad.match(/([a-z0-9-]*)/i);
+      const matchNamePattern = moduleToLoad.match(/([a-z0-9-]*)/i);
 
       if (moduleToLoad.indexOf('.') < 0 && matchNamePattern && matchNamePattern[0].length === moduleToLoad.length) {
         if (!app || app && !app.params.lazyModulesPath) {
@@ -36,7 +36,7 @@ function loadModule(moduleToLoad) {
           return;
         }
 
-        modulePath = app.params.lazyModulesPath + "/" + moduleToLoad + "/" + moduleToLoad + ".js";
+        modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.js`;
       } else {
         modulePath = moduleToLoad;
       }
@@ -48,7 +48,7 @@ function loadModule(moduleToLoad) {
     }
 
     if (moduleFunc) {
-      var module = moduleFunc(Framework7, false);
+      const module = moduleFunc(Framework7, false);
 
       if (!module) {
         reject(new Error("Framework7: Can't find Framework7 component in specified component function"));
@@ -67,21 +67,21 @@ function loadModule(moduleToLoad) {
     }
 
     if (moduleObj) {
-      var _module = moduleObj;
+      const module = moduleObj;
 
-      if (!_module) {
+      if (!module) {
         reject(new Error("Framework7: Can't find Framework7 component in specified component"));
         return;
       } // Check if it was added
 
 
-      if (Framework7.prototype.modules && Framework7.prototype.modules[_module.name]) {
+      if (Framework7.prototype.modules && Framework7.prototype.modules[module.name]) {
         resolve();
         return;
       } // Install It
 
 
-      install(_module);
+      install(module);
       resolve();
     }
 
@@ -92,20 +92,20 @@ function loadModule(moduleToLoad) {
       }
 
       fetchedModules.push(modulePath);
-      var scriptLoad = new Promise(function (resolveScript, rejectScript) {
-        Framework7.request.get(modulePath, function (scriptContent) {
-          var callbackId = id();
-          var callbackLoadName = "f7_component_loader_callback_" + callbackId;
-          var scriptEl = document.createElement('script');
-          scriptEl.innerHTML = "window." + callbackLoadName + " = function (Framework7, Framework7AutoInstallComponent) {return " + scriptContent.trim() + "}";
+      const scriptLoad = new Promise((resolveScript, rejectScript) => {
+        Framework7.request.get(modulePath, scriptContent => {
+          const callbackId = id();
+          const callbackLoadName = `f7_component_loader_callback_${callbackId}`;
+          const scriptEl = document.createElement('script');
+          scriptEl.innerHTML = `window.${callbackLoadName} = function (Framework7, Framework7AutoInstallComponent) {return ${scriptContent.trim()}}`;
           $('head').append(scriptEl);
-          var componentLoader = window[callbackLoadName];
+          const componentLoader = window[callbackLoadName];
           delete window[callbackLoadName];
           $(scriptEl).remove();
-          var module = componentLoader(Framework7, false);
+          const module = componentLoader(Framework7, false);
 
           if (!module) {
-            rejectScript(new Error("Framework7: Can't find Framework7 component in " + modulePath + " file"));
+            rejectScript(new Error(`Framework7: Can't find Framework7 component in ${modulePath} file`));
             return;
           } // Check if it was added
 
@@ -118,23 +118,23 @@ function loadModule(moduleToLoad) {
 
           install(module);
           resolveScript();
-        }, function (xhr, status) {
+        }, (xhr, status) => {
           rejectScript(xhr, status);
         });
       });
-      var styleLoad = new Promise(function (resolveStyle) {
-        Framework7.request.get(modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), function (styleContent) {
-          var styleEl = document.createElement('style');
+      const styleLoad = new Promise(resolveStyle => {
+        Framework7.request.get(modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
+          const styleEl = document.createElement('style');
           styleEl.innerHTML = styleContent;
           $('head').append(styleEl);
           resolveStyle();
-        }, function () {
+        }, () => {
           resolveStyle();
         });
       });
-      Promise.all([scriptLoad, styleLoad]).then(function () {
+      Promise.all([scriptLoad, styleLoad]).then(() => {
         resolve();
-      }).catch(function (err) {
+      }).catch(err => {
         reject(err);
       });
     }

package/components/appbar/appbar.js

@@ -1 +1,3 @@
-(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);e.$,e.utils,e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods;var t={name:"appbar"};if(o){if(e.prototype.modules&&e.prototype.modules[t.name])return;e.use(t),e.instance&&(e.instance.useModuleParams(t,e.instance.params),e.instance.useModule(t))}return t}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+export default {
+  name: 'appbar'
+};

package/components/appbar/appbar.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);e.$,e.utils,e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods;var t={name:"appbar"};if(o){if(e.prototype.modules&&e.prototype.modules[t.name])return;e.use(t),e.instance&&(e.instance.useModuleParams(t,e.instance.params),e.instance.useModule(t))}return t}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))