framework7 6.3.15 → 7.0.0-beta.11

package/components/actions/actions.js

@@ -1 +1,43 @@
-(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var t=o.$,n=o.utils,r=o.getDevice,a=(o.getSupport,o.Class,o.Modal),s=(o.ConstructorMethods,o.ModalMethods);function i(o){this.wrapped=o}function c(o){var e,t;function n(e,t){try{var a=o[e](t),s=a.value,c=s instanceof i;Promise.resolve(c?s.wrapped:s).then((function(o){c?n("return"===e?"return":"next",o):r(a.done?"return":"normal",o)}),(function(o){n("throw",o)}))}catch(o){r("throw",o)}}function r(o,r){switch(o){case"return":e.resolve({value:r,done:!0});break;case"throw":e.reject(r);break;default:e.resolve({value:r,done:!1})}(e=e.next)?n(e.key,e.arg):t=null}this._invoke=function(o,r){return new Promise((function(a,s){var i={key:o,arg:r,resolve:a,reject:s,next:null};t?t=t.next=i:(e=t=i,n(o,r))}))},"function"!=typeof o.return&&(this.return=void 0)}function l(o,e){return(l=Object.setPrototypeOf||function(o,e){return o.__proto__=e,o})(o,e)}function p(o){if(void 0===o)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return o}c.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},c.prototype.next=function(o){return this._invoke("next",o)},c.prototype.throw=function(o){return this._invoke("throw",o)},c.prototype.return=function(o){return this._invoke("return",o)};var d=n.extend,u=n.nextTick,m=function(o){var e,n;function a(e,n){var a,s,i,c,l=d({on:{}},e.params.actions,n),m=p(a=o.call(this,e,l)||this),f=r();if(m.params=l,m.params.buttons&&(s=m.params.buttons,Array.isArray(s[0])||(s=[s])),m.groups=s,m.params.el?i=t(m.params.el).eq(0):m.params.content?i=t(m.params.content).filter((function(o){return 1===o.nodeType})).eq(0):m.params.buttons&&(m.params.convertToPopover&&(m.popoverHtml=m.renderPopover()),m.actionsHtml=m.render()),i&&i.length>0&&i[0].f7Modal)return i[0].f7Modal||p(a);if(i&&0===i.length&&!m.actionsHtml&&!m.popoverHtml)return m.destroy()||p(a);m.params.backdrop&&m.params.backdropEl?c=t(m.params.backdropEl):m.params.backdrop&&0===(c=m.$containerEl.children(".actions-backdrop")).length&&(c=t('<div class="actions-backdrop"></div>'),m.$containerEl.append(c));var v,b=m.open,h=m.close;function k(o){var e,n,r=t(this);if(r.hasClass("list-button")||r.hasClass("item-link")?(e=r.parents("li").index(),n=r.parents(".list").index()):(e=r.index(),n=r.parents(".actions-group").index()),void 0!==s){var a=s[n][e];a.onClick&&a.onClick(m,o),m.params.onClick&&m.params.onClick(m,o),!1!==a.close&&m.close()}}function y(o){var e=o.target,n=t(e);!f.desktop&&f.cordova&&(window.Keyboard&&window.Keyboard.isVisible||window.cordova.plugins&&window.cordova.plugins.Keyboard&&window.cordova.plugins.Keyboard.isVisible)||0===n.closest(m.el).length&&(m.params.closeByBackdropClick&&m.params.backdrop&&m.backdropEl&&m.backdropEl===e||m.params.closeByOutsideClick)&&m.close()}function $(o){27===o.keyCode&&m.params.closeOnEscape&&m.close()}return m.open=function(o){var n=!1,r=m.params,a=r.targetEl,s=r.targetX,i=r.targetY,c=r.targetWidth,l=r.targetHeight;return m.params.convertToPopover&&(a||void 0!==s&&void 0!==i)&&(m.params.forceToPopover||f.ios&&f.ipad||e.width>=768||f.desktop&&"aurora"===e.theme)&&(n=!0),n&&m.popoverHtml?((v=e.popover.create({containerEl:m.params.containerEl,content:m.popoverHtml,backdrop:m.params.backdrop,targetEl:a,targetX:s,targetY:i,targetWidth:c,targetHeight:l,on:{open:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:open "+m.type.toLowerCase()+":open"),m.emit("local::open modalOpen "+m.type+"Open",m)},opened:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:opened "+m.type.toLowerCase()+":opened"),m.emit("local::opened modalOpened "+m.type+"Opened",m)},close:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:close "+m.type.toLowerCase()+":close"),m.emit("local::close modalClose "+m.type+"Close",m)},closed:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:closed "+m.type.toLowerCase()+":closed"),m.emit("local::closed modalClosed "+m.type+"Closed",m)}}})).open(o),v.once("popoverOpened",(function(){v.$el.find(".list-button, .item-link").each((function(o){t(o).on("click",k)}))})),v.once("popoverClosed",(function(){v.$el.find(".list-button, .item-link").each((function(o){t(o).off("click",k)})),u((function(){v.destroy(),v=void 0}))}))):(m.$el=m.actionsHtml?t(m.actionsHtml):m.$el,m.$el[0].f7Modal=m,m.groups&&(m.$el.find(".actions-button").each((function(o){t(o).on("click",k)})),m.once("actionsClosed",(function(){m.$el.find(".actions-button").each((function(o){t(o).off("click",k)}))}))),m.el=m.$el[0],b.call(m,o)),m},m.close=function(o){return v?v.close(o):h.call(m,o),m},d(m,{app:e,$el:i,el:i?i[0]:void 0,$backdropEl:c,backdropEl:c&&c[0],type:"actions"}),m.params.closeOnEscape&&(m.on("open",(function(){t(document).on("keydown",$)})),m.on("close",(function(){t(document).off("keydown",$)}))),m.on("opened",(function(){(m.params.closeByBackdropClick||m.params.closeByOutsideClick)&&e.on("click",y)})),m.on("close",(function(){(m.params.closeByBackdropClick||m.params.closeByOutsideClick)&&e.off("click",y)})),i&&(i[0].f7Modal=m),m||p(a)}n=o,(e=a).prototype=Object.create(n.prototype),e.prototype.constructor=e,l(e,n);var s=a.prototype;return s.render=function(){var o=this;if(o.params.render)return o.params.render.call(o,o);var e=o.groups,t=o.params.cssClass;return $jsx("div",{class:"actions-modal"+(o.params.grid?" actions-grid":"")+" "+(t||"")},e.map((function(o){return $jsx("div",{class:"actions-group"},o.map((function(o){var e=["actions-"+(o.label?"label":"button")],t=o.color,n=o.bg,r=o.bold,a=o.disabled,s=o.label,i=o.text,c=o.icon;return t&&e.push("color-"+t),n&&e.push("bg-color-"+n),r&&e.push("actions-button-bold"),a&&e.push("disabled"),s?$jsx("div",{class:e.join(" ")},i):$jsx("div",{class:e.join(" ")},c&&$jsx("div",{class:"actions-button-media"},c),$jsx("div",{class:"actions-button-text"},i))})))})))},s.renderPopover=function(){var o=this;if(o.params.renderPopover)return o.params.renderPopover.call(o,o);var e=o.groups,t=o.params.cssClass;return $jsx("div",{class:"popover popover-from-actions "+(t||"")},$jsx("div",{class:"popover-inner"},e.map((function(o){return $jsx("div",{class:"list"},$jsx("ul",null,o.map((function(o){var e=[],t=o.color,n=o.bg,r=o.bold,a=o.disabled,s=o.label,i=o.text,c=o.icon;return t&&e.push("color-"+t),n&&e.push("bg-color-"+n),r&&e.push("popover-from-actions-bold"),a&&e.push("disabled"),s?(e.push("popover-from-actions-label"),'<li class="'+e.join(" ")+'">'+i+"</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"},i))))):(e.push("list-button"),$jsx("li",null,$jsx("a",{class:e.join(" ")},i)))}))))}))))},a}(a),f={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:m},create:function(){this.actions=s({app:this,constructor:m,defaultSelector:".actions-modal.modal-in"})},clicks:{".actions-open":function(o,e){void 0===e&&(e={});this.actions.open(e.actions,e.animate,o)},".actions-close":function(o,e){void 0===e&&(e={});this.actions.close(e.actions,e.animate,o)}}};if(e){if(o.prototype.modules&&o.prototype.modules[f.name])return;o.use(f),o.instance&&(o.instance.useModuleParams(f,o.instance.params),o.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import Actions from './actions-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'actions',
+  params: {
+    actions: {
+      convertToPopover: true,
+      forceToPopover: false,
+      backdrop: true,
+      backdropEl: undefined,
+      backdropUnique: false,
+      cssClass: null,
+      closeByBackdropClick: true,
+      closeOnEscape: false,
+      render: null,
+      renderPopover: null,
+      containerEl: null
+    }
+  },
+  static: {
+    Actions
+  },
+
+  create() {
+    const app = this;
+    app.actions = ModalMethods({
+      app,
+      constructor: Actions,
+      defaultSelector: '.actions-modal.modal-in'
+    });
+  },
+
+  clicks: {
+    '.actions-open': function openActions($clickedEl, data = {}) {
+      const app = this;
+      app.actions.open(data.actions, data.animate, $clickedEl);
+    },
+    '.actions-close': function closeActions($clickedEl, data = {}) {
+      const app = this;
+      app.actions.close(data.actions, data.animate, $clickedEl);
+    }
+  }
+};

package/components/actions/actions.lazy.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&&(l.params.backdropUnique?(u=s('<div class="popup-backdrop popup-backdrop-unique"></div>'),l.$containerEl.append(u)):u=l.$containerEl.children(".actions-backdrop"),0===u.length&&(u=s('<div class="actions-backdrop"></div>'),l.$containerEl.append(u)));const $=l.open,b=l.close;let v;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?(v=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=v.$el),l.$el.trigger(`modal:open ${l.type.toLowerCase()}:open`),l.emit(`local::open modalOpen ${l.type}Open`,l)},opened(){l.$el||(l.$el=v.$el),l.$el.trigger(`modal:opened ${l.type.toLowerCase()}:opened`),l.emit(`local::opened modalOpened ${l.type}Opened`,l)},close(){l.$el||(l.$el=v.$el),l.$el.trigger(`modal:close ${l.type.toLowerCase()}:close`),l.emit(`local::close modalClose ${l.type}Close`,l)},closed(){l.$el||(l.$el=v.$el),l.$el.trigger(`modal:closed ${l.type.toLowerCase()}:closed`),l.emit(`local::closed modalClosed ${l.type}Closed`,l)}}}),v.open(e),v.once("popoverOpened",(()=>{v.$el.find(".list-button, .item-link").each((o=>{s(o).on("click",k)}))})),v.once("popoverClosed",(()=>{v.$el.find(".list-button, .item-link").each((o=>{s(o).off("click",k)})),c((()=>{v.destroy(),v=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 v?v.close(o):b.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,backdropUnique:!1,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/actions/actions.less

@@ -1,6 +1,9 @@
 /* === Actions === */
 @import './actions-vars.less';
 .actions-backdrop {
+  &-unique {
+    z-index: 13500;
+  }
 }
 .actions-modal {
   position: absolute;

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 mode 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,56 +1,37 @@
-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';
-import { getDevice } from '../../shared/get-device';
-import { getSupport } from '../../shared/get-support';
-import Framework7Class from '../../shared/class';
-import EventsClass from '../../shared/events-class';
-import ConstructorMethods from '../../shared/constructor-methods';
-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
+import { extend, nextFrame } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import { getSupport } from '../../shared/get-support.js';
+import Framework7Class from '../../shared/class.js';
+import EventsClass from '../../shared/events-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+import ModalMethods from '../../shared/modal-methods.js';
+import $ from '../../shared/dom7.js';
+import loadModule from './load-module.js';
+
+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,27 +101,25 @@ 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]) {
       app.el = app.$el[0];
       app.el.f7 = app;
       app.rtl = $rootEl.css('direction') === 'rtl';
-    } // Auto Dark Theme
+    } // Auto Dark Mode
 
 
-    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,64 +174,64 @@ 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
 
       if (app.rtl) {
         $('html').attr('dir', 'rtl');
-      } // Auto Dark Theme
+      } // Auto Dark Mode
 
 
-      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 {