framework7 7.0.0-beta.2 → 7.0.0-beta.3

package/framework7-bundle.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 7.0.0-beta.2
+ * Framework7 7.0.0-beta.3
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: October 5, 2021
  */
 
 import $ from './shared/dom7';

package/framework7-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 7.0.0-beta.2
+ * Framework7 7.0.0-beta.3
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: October 5, 2021
  */
 
 (function (global, factory) {
@@ -2897,7 +2897,7 @@
           lazyModulesPath: null,
           initOnDeviceReady: true,
           init: true,
-          autoDarkTheme: false,
+          autoDarkMode: false,
           iosTranslucentBars: true,
           iosTranslucentModals: true,
           component: undefined,
@@ -2993,13 +2993,13 @@
           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);
           }
         };
 
@@ -3016,7 +3016,7 @@
         }
       }
 
-      enableAutoDarkTheme() {
+      enableAutoDarkMode() {
         const window = getWindow();
         const document = getDocument();
         if (!window.matchMedia) return;
@@ -3029,17 +3029,17 @@
         }
 
         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);
         }
       }
 
-      disableAutoDarkTheme() {
+      disableAutoDarkMode() {
         const window = getWindow();
         if (!window.matchMedia) return;
         const app = this;
@@ -3075,8 +3075,8 @@
           } // Auto Dark Theme
 
 
-          if (app.params.autoDarkTheme) {
-            app.enableAutoDarkTheme();
+          if (app.params.autoDarkMode) {
+            app.enableAutoDarkMode();
           } // Watch for online/offline state
 
 
@@ -6631,52 +6631,6 @@
       return router;
     }
 
-    function openIn(router, url, options) {
-      const navigateOptions = {
-        url,
-        route: {
-          path: url,
-          options: { ...options,
-            openIn: undefined
-          }
-        }
-      };
-      const params = { ...options
-      };
-
-      if (options.openIn === 'popup') {
-        params.content = `<div class="popup popup-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
-        navigateOptions.route.popup = params;
-      }
-
-      if (options.openIn === 'loginScreen') {
-        params.content = `<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
-        navigateOptions.route.loginScreen = params;
-      }
-
-      if (options.openIn === 'sheet') {
-        params.content = `<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
-        navigateOptions.route.sheet = params;
-      }
-
-      if (options.openIn === 'popover') {
-        params.targetEl = options.clickedEl || options.targetEl;
-        params.content = `<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
-        navigateOptions.route.popover = params;
-      }
-
-      if (options.openIn.indexOf('panel') >= 0) {
-        const parts = options.openIn.split(':');
-        const side = parts[1] || 'left';
-        const effect = parts[2] || 'cover';
-        params.targetEl = options.clickedEl || options.targetEl;
-        params.content = `<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
-        navigateOptions.route.panel = params;
-      }
-
-      return router.navigate(navigateOptions);
-    }
-
     function navigate(navigateParams, navigateOptions = {}) {
       const router = this;
       if (router.swipeBackActive) return router;
@@ -6766,7 +6720,7 @@
       }
 
       if (options.openIn && (!router.params.ignoreOpenIn || router.params.ignoreOpenIn && router.history.length > 0)) {
-        return openIn(router, navigateUrl, options);
+        return router.openIn(router, navigateUrl, options);
       }
 
       options.route = route;
@@ -10240,6 +10194,52 @@
     var RouterComponentLoaderModule = {
       name: 'routerComponentLoader',
       proto: {
+        openIn(router, url, options) {
+          const navigateOptions = {
+            url,
+            route: {
+              path: url,
+              options: { ...options,
+                openIn: undefined
+              }
+            }
+          };
+          const params = { ...options
+          };
+
+          if (options.openIn === 'popup') {
+            params.content = `<div class="popup popup-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+            navigateOptions.route.popup = params;
+          }
+
+          if (options.openIn === 'loginScreen') {
+            params.content = `<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+            navigateOptions.route.loginScreen = params;
+          }
+
+          if (options.openIn === 'sheet') {
+            params.content = `<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
+            navigateOptions.route.sheet = params;
+          }
+
+          if (options.openIn === 'popover') {
+            params.targetEl = options.clickedEl || options.targetEl;
+            params.content = `<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
+            navigateOptions.route.popover = params;
+          }
+
+          if (options.openIn.indexOf('panel') >= 0) {
+            const parts = options.openIn.split(':');
+            const side = parts[1] || 'left';
+            const effect = parts[2] || 'cover';
+            params.targetEl = options.clickedEl || options.targetEl;
+            params.content = `<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+            navigateOptions.route.panel = params;
+          }
+
+          return router.navigate(navigateOptions);
+        },
+
         componentLoader(component, componentUrl, options = {}, resolve, reject) {
           const router = this;
           const {
@@ -49174,7 +49174,7 @@
         const self = this;
         self.popover = self.app.popover.create({
           content: `
-        <div class="popover theme-dark text-editor-popover">
+        <div class="popover dark text-editor-popover">
           <div class="popover-inner">${self.renderButtons()}</div>
         </div>
       `,