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

package/framework7.css

@@ -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
  */
 
 /*====================
@@ -93,8 +93,8 @@
   --f7-bars-bg-color: #f7f7f8;
   --f7-bars-bg-color-rgb: 247, 247, 248;
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-bars-text-color: #fff;
 }
 .ios {
@@ -103,8 +103,8 @@
   --f7-text-color: #000;
   --f7-bars-border-color: rgba(0, 0, 0, 0.25);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-text-color: #fff;
   --f7-bars-bg-color: #121212;
   --f7-bars-bg-color-rgb: 22, 22, 22;
@@ -116,8 +116,8 @@
   --f7-bars-border-color: transparent;
   --f7-text-color: #212121;
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-text-color: rgba(255, 255, 255, 0.87);
   --f7-bars-bg-color: #202020;
 }
@@ -127,8 +127,8 @@
   --f7-text-color: #000;
   --f7-bars-border-color: rgba(0, 0, 0, 0.2);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-text-color: #fff;
   --f7-bars-bg-color: #202020;
   --f7-bars-border-color: rgba(255, 255, 255, 0.1);
@@ -612,11 +612,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 {
@@ -774,8 +774,8 @@ html.device-full-viewport body {
   --f7-page-title-padding-vertical: 6px;
   --f7-page-bg-color: #efeff4;
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-page-bg-color: #000;
 }
 .md {
@@ -786,8 +786,8 @@ html.device-full-viewport body {
   --f7-page-title-padding-vertical: 8px;
   --f7-page-bg-color: #fff;
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-page-bg-color: #121212;
 }
 .aurora {
@@ -798,11 +798,11 @@ html.device-full-viewport body {
   --f7-page-title-padding-vertical: 7px;
   --f7-page-bg-color: #f3f4f6;
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-page-bg-color: #121212;
 }
-.theme-dark {
+.dark {
   --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
 }
 .pages {
@@ -1695,8 +1695,8 @@ html.device-full-viewport body {
   */
   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
 }
 .md {
@@ -1721,8 +1721,8 @@ html.device-full-viewport body {
   --f7-navbar-link-line-height: 48px;
   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
 }
 .aurora {
@@ -1747,8 +1747,8 @@ html.device-full-viewport body {
   --f7-navbar-link-line-height: inherit;
   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
 }
 .navbars,
@@ -2800,8 +2800,8 @@ html.device-full-viewport body {
   --f7-tabbar-label-letter-spacing: 0.01;
   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
 }
 .md {
@@ -2830,8 +2830,8 @@ html.device-full-viewport body {
   --f7-tabbar-label-letter-spacing: 0;
   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
 }
 .aurora {
@@ -2858,8 +2858,8 @@ html.device-full-viewport body {
   --f7-tabbar-label-letter-spacing: 0;
   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
 }
 .toolbar {
@@ -3763,8 +3763,8 @@ html.device-full-viewport body {
   --f7-block-title-large-text-color: #000;
   --f7-block-strong-bg-color: #fff;
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-block-title-text-color: #fff;
   --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
   --f7-block-title-medium-text-color: #fff;
@@ -3790,8 +3790,8 @@ html.device-full-viewport body {
   --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-strong-text-color: #fff;
@@ -3815,8 +3815,8 @@ html.device-full-viewport body {
   --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
 }
@@ -3839,8 +3839,8 @@ html.device-full-viewport body {
   --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
   --f7-block-strong-text-color: #fff;
@@ -4209,8 +4209,8 @@ html.device-full-viewport body {
   --f7-menu-list-selected-text-color: var(--f7-theme-color);
   --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
   --f7-list-bg-color: #1c1c1d;
   --f7-list-border-color: rgba(255, 255, 255, 0.15);
@@ -4255,8 +4255,8 @@ html.device-full-viewport body {
   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
   --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
@@ -4301,8 +4301,8 @@ html.device-full-viewport body {
   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-list-item-divider-text-color: #fff;
   --f7-list-group-title-text-color: #fff;
   --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
@@ -4346,8 +4346,8 @@ html.device-full-viewport body {
   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
@@ -5302,8 +5302,8 @@ li.list-group-title,
   --f7-segmented-strong-button-active-text-color: #000;
   --f7-segmented-strong-button-active-bg-color: #fff;
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
   --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
   --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
@@ -5785,7 +5785,7 @@ input[type='reset'].button {
   --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
 }
-.theme-dark {
+.dark {
   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
 }
 .ripple,

package/framework7.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.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
 
 
@@ -6577,52 +6577,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;
@@ -6712,7 +6666,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;
@@ -10186,6 +10140,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 {