framework7 7.0.0-beta.1 → 7.0.0-beta.5

package/framework7-bundle.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 7.0.0-beta.1
+ * Framework7 7.0.0-beta.5
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,91 +7,91 @@
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: October 13, 2021
  */
 
-import $ from './shared/dom7';
-import Framework7 from './components/app/app-class';
-import request from './shared/request';
-import * as utils from './shared/utils';
-import { getSupport } from './shared/get-support';
-import { getDevice } from './shared/get-device';
-import DeviceModule from './modules/device/device';
-import SupportModule from './modules/support/support';
-import UtilsModule from './modules/utils/utils';
-import ResizeModule from './modules/resize/resize';
-import RequestModule from './modules/request/request';
-import TouchModule from './modules/touch/touch';
-import ClicksModule from './modules/clicks/clicks';
-import RouterModule from './modules/router/router';
-import RouterComponentLoaderModule from './modules/router/component-loader';
-import ComponentModule, { Component, $jsx } from './modules/component/component';
-import HistoryModule from './modules/history/history';
-import ServiceWorkerModule from './modules/service-worker/service-worker';
-import StoreModule, { createStore } from './modules/store/store';
-import Statusbar from './components/statusbar/statusbar';
-import View from './components/view/view';
-import Navbar from './components/navbar/navbar';
-import Toolbar from './components/toolbar/toolbar';
-import Subnavbar from './components/subnavbar/subnavbar';
-import TouchRipple from './components/touch-ripple/touch-ripple';
-import Modal from './components/modal/modal';
-import Router from './modules/router/router-class';
-import Appbar from './components/appbar/appbar';
-import Dialog from './components/dialog/dialog';
-import Popup from './components/popup/popup';
-import LoginScreen from './components/login-screen/login-screen';
-import Popover from './components/popover/popover';
-import Actions from './components/actions/actions';
-import Sheet from './components/sheet/sheet';
-import Toast from './components/toast/toast';
-import Preloader from './components/preloader/preloader';
-import Progressbar from './components/progressbar/progressbar';
-import Sortable from './components/sortable/sortable';
-import Swipeout from './components/swipeout/swipeout';
-import Accordion from './components/accordion/accordion';
-import ContactsList from './components/contacts-list/contacts-list';
-import VirtualList from './components/virtual-list/virtual-list';
-import ListIndex from './components/list-index/list-index';
-import Timeline from './components/timeline/timeline';
-import Tabs from './components/tabs/tabs';
-import Panel from './components/panel/panel';
-import Card from './components/card/card';
-import Chip from './components/chip/chip';
-import Form from './components/form/form';
-import Input from './components/input/input';
-import Checkbox from './components/checkbox/checkbox';
-import Radio from './components/radio/radio';
-import Toggle from './components/toggle/toggle';
-import Range from './components/range/range';
-import Stepper from './components/stepper/stepper';
-import SmartSelect from './components/smart-select/smart-select';
-import Grid from './components/grid/grid';
-import Calendar from './components/calendar/calendar';
-import Picker from './components/picker/picker';
-import InfiniteScroll from './components/infinite-scroll/infinite-scroll';
-import PullToRefresh from './components/pull-to-refresh/pull-to-refresh';
-import Lazy from './components/lazy/lazy';
-import DataTable from './components/data-table/data-table';
-import Fab from './components/fab/fab';
-import Searchbar from './components/searchbar/searchbar';
-import Messages from './components/messages/messages';
-import Messagebar from './components/messagebar/messagebar';
-import Swiper from './components/swiper/swiper';
-import PhotoBrowser from './components/photo-browser/photo-browser';
-import Notification from './components/notification/notification';
-import Autocomplete from './components/autocomplete/autocomplete';
-import Tooltip from './components/tooltip/tooltip';
-import Gauge from './components/gauge/gauge';
-import Skeleton from './components/skeleton/skeleton';
-import Menu from './components/menu/menu';
-import ColorPicker from './components/color-picker/color-picker';
-import Treeview from './components/treeview/treeview';
-import TextEditor from './components/text-editor/text-editor';
-import PieChart from './components/pie-chart/pie-chart';
-import AreaChart from './components/area-chart/area-chart';
-import Elevation from './components/elevation/elevation';
-import Typography from './components/typography/typography';
+import $ from './shared/dom7.js';
+import Framework7 from './components/app/app-class.js';
+import request from './shared/request.js';
+import * as utils from './shared/utils.js';
+import { getSupport } from './shared/get-support.js';
+import { getDevice } from './shared/get-device.js';
+import DeviceModule from './modules/device/device.js';
+import SupportModule from './modules/support/support.js';
+import UtilsModule from './modules/utils/utils.js';
+import ResizeModule from './modules/resize/resize.js';
+import RequestModule from './modules/request/request.js';
+import TouchModule from './modules/touch/touch.js';
+import ClicksModule from './modules/clicks/clicks.js';
+import RouterModule from './modules/router/router.js';
+import RouterComponentLoaderModule from './modules/router/component-loader.js';
+import ComponentModule, { Component, $jsx } from './modules/component/component.js';
+import HistoryModule from './modules/history/history.js';
+import ServiceWorkerModule from './modules/service-worker/service-worker.js';
+import StoreModule, { createStore } from './modules/store/store.js';
+import Statusbar from './components/statusbar/statusbar.js';
+import View from './components/view/view.js';
+import Navbar from './components/navbar/navbar.js';
+import Toolbar from './components/toolbar/toolbar.js';
+import Subnavbar from './components/subnavbar/subnavbar.js';
+import TouchRipple from './components/touch-ripple/touch-ripple.js';
+import Modal from './components/modal/modal.js';
+import Router from './modules/router/router-class.js';
+import Appbar from './components/appbar/appbar.js';
+import Dialog from './components/dialog/dialog.js';
+import Popup from './components/popup/popup.js';
+import LoginScreen from './components/login-screen/login-screen.js';
+import Popover from './components/popover/popover.js';
+import Actions from './components/actions/actions.js';
+import Sheet from './components/sheet/sheet.js';
+import Toast from './components/toast/toast.js';
+import Preloader from './components/preloader/preloader.js';
+import Progressbar from './components/progressbar/progressbar.js';
+import Sortable from './components/sortable/sortable.js';
+import Swipeout from './components/swipeout/swipeout.js';
+import Accordion from './components/accordion/accordion.js';
+import ContactsList from './components/contacts-list/contacts-list.js';
+import VirtualList from './components/virtual-list/virtual-list.js';
+import ListIndex from './components/list-index/list-index.js';
+import Timeline from './components/timeline/timeline.js';
+import Tabs from './components/tabs/tabs.js';
+import Panel from './components/panel/panel.js';
+import Card from './components/card/card.js';
+import Chip from './components/chip/chip.js';
+import Form from './components/form/form.js';
+import Input from './components/input/input.js';
+import Checkbox from './components/checkbox/checkbox.js';
+import Radio from './components/radio/radio.js';
+import Toggle from './components/toggle/toggle.js';
+import Range from './components/range/range.js';
+import Stepper from './components/stepper/stepper.js';
+import SmartSelect from './components/smart-select/smart-select.js';
+import Grid from './components/grid/grid.js';
+import Calendar from './components/calendar/calendar.js';
+import Picker from './components/picker/picker.js';
+import InfiniteScroll from './components/infinite-scroll/infinite-scroll.js';
+import PullToRefresh from './components/pull-to-refresh/pull-to-refresh.js';
+import Lazy from './components/lazy/lazy.js';
+import DataTable from './components/data-table/data-table.js';
+import Fab from './components/fab/fab.js';
+import Searchbar from './components/searchbar/searchbar.js';
+import Messages from './components/messages/messages.js';
+import Messagebar from './components/messagebar/messagebar.js';
+import Swiper from './components/swiper/swiper.js';
+import PhotoBrowser from './components/photo-browser/photo-browser.js';
+import Notification from './components/notification/notification.js';
+import Autocomplete from './components/autocomplete/autocomplete.js';
+import Tooltip from './components/tooltip/tooltip.js';
+import Gauge from './components/gauge/gauge.js';
+import Skeleton from './components/skeleton/skeleton.js';
+import Menu from './components/menu/menu.js';
+import ColorPicker from './components/color-picker/color-picker.js';
+import Treeview from './components/treeview/treeview.js';
+import TextEditor from './components/text-editor/text-editor.js';
+import PieChart from './components/pie-chart/pie-chart.js';
+import AreaChart from './components/area-chart/area-chart.js';
+import Elevation from './components/elevation/elevation.js';
+import Typography from './components/typography/typography.js';
 Router.use([RouterComponentLoaderModule]);
 Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, RequestModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar, View, Navbar, Toolbar, Subnavbar, TouchRipple, Modal, Appbar, Dialog, Popup, LoginScreen, Popover, Actions, Sheet, Toast, Preloader, Progressbar, Sortable, Swipeout, Accordion, ContactsList, VirtualList, ListIndex, Timeline, Tabs, Panel, Card, Chip, Form, Input, Checkbox, Radio, Toggle, Range, Stepper, SmartSelect, Grid, Calendar, Picker, InfiniteScroll, PullToRefresh, Lazy, DataTable, Fab, Searchbar, Messages, Messagebar, Swiper, PhotoBrowser, Notification, Autocomplete, Tooltip, Gauge, Skeleton, Menu, ColorPicker, Treeview, TextEditor, PieChart, AreaChart, Elevation, Typography]);
 export { Component, $jsx, $ as Dom7, request, utils, getDevice, getSupport, createStore };

package/framework7-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 7.0.0-beta.1
+ * Framework7 7.0.0-beta.5
  * 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 13, 2021
  */
 
 (function (global, factory) {
@@ -2758,7 +2758,7 @@
               return;
             }
 
-            modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.js`;
+            modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.lazy.js`;
           } else {
             modulePath = moduleToLoad;
           }
@@ -2845,7 +2845,7 @@
             });
           });
           const styleLoad = new Promise(resolveStyle => {
-            Framework7.request.get(modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
+            Framework7.request.get(modulePath.replace('.lazy.js', app.rtl ? '.rtl.css' : '.css').replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
               const styleEl = document.createElement('style');
               styleEl.innerHTML = styleContent;
               $('head').append(styleEl);
@@ -2897,7 +2897,7 @@
           lazyModulesPath: null,
           initOnDeviceReady: true,
           init: true,
-          autoDarkTheme: false,
+          autoDarkMode: false,
           iosTranslucentBars: true,
           iosTranslucentModals: true,
           component: undefined,
@@ -2970,7 +2970,7 @@
           app.el = app.$el[0];
           app.el.f7 = app;
           app.rtl = $rootEl.css('direction') === 'rtl';
-        } // Auto Dark Theme
+        } // Auto Dark Mode
 
 
         const DARK = '(prefers-color-scheme: dark)';
@@ -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;
@@ -3072,11 +3072,11 @@
 
           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
 
 
@@ -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>
       `,