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

package/less/mixins.less

@@ -53,8 +53,8 @@
 }
 .dark-vars(@ruleset) {
   & when (@includeDarkTheme) {
-    .theme-dark,
-    &.theme-dark {
+    .dark,
+    &.dark {
       @ruleset();
     }
   }

package/modules/clicks/clicks.js

@@ -1,6 +1,6 @@
 import { getWindow } from 'ssr-window';
-import $ from '../../shared/dom7';
-import ViewClass from '../../components/view/view-class';
+import $ from '../../shared/dom7.js';
+import ViewClass from '../../components/view/view-class.js';
 
 function initClicks(app) {
   function handleClicks(e) {

package/modules/component/$h.js

@@ -1,5 +1,5 @@
 import htm from 'htm';
-import { flattenArray } from '../../shared/utils';
+import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
 
 const h = (type, props, ...children) => {

package/modules/component/$jsx.js

@@ -1,4 +1,4 @@
-import { flattenArray } from '../../shared/utils';
+import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
 
 const $jsx = (type, props, ...children) => {

package/modules/component/component-class.js

@@ -1,10 +1,10 @@
 /* eslint no-underscore-dangle: "off" */
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import $h from './$h';
-import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../../shared/utils';
-import vdom from './vdom';
-import patch from './patch';
+import $ from '../../shared/dom7.js';
+import $h from './$h.js';
+import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../../shared/utils.js';
+import vdom from './vdom.js';
+import patch from './patch.js';
 
 class Component {
   constructor(app, component, props = {}, {

package/modules/component/component.js

@@ -1,7 +1,7 @@
-import Component from './component-class';
-import parseComponent from './parse-component';
-import customComponents from './custom-components';
-import $jsx from './$jsx';
+import Component from './component-class.js';
+import parseComponent from './parse-component.js';
+import customComponents from './custom-components.js';
+import $jsx from './$jsx.js';
 
 function registerComponent(tagName, component) {
   customComponents[tagName] = component;

package/modules/component/eventslisteners.js

@@ -1,4 +1,4 @@
-import $ from '../../shared/dom7';
+import $ from '../../shared/dom7.js';
 
 function invokeHandler(handler, event, args) {
   if (typeof handler === 'function') {

package/modules/component/parse-component.js

@@ -1,6 +1,6 @@
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { id } from '../../shared/utils';
+import $ from '../../shared/dom7.js';
+import { id } from '../../shared/utils.js';
 
 function parseComponent(componentString) {
   const window = getWindow();

package/modules/component/patch.js

@@ -1,8 +1,8 @@
 /* eslint import/no-named-as-default: off */
-import { init } from './snabbdom/snabbdom';
-import attributesModule from './snabbdom/modules/attributes';
-import propsModule from './snabbdom/modules/props';
-import styleModule from './snabbdom/modules/style';
-import eventListenersModule from './eventslisteners';
+import { init } from './snabbdom/snabbdom.js';
+import attributesModule from './snabbdom/modules/attributes.js';
+import propsModule from './snabbdom/modules/props.js';
+import styleModule from './snabbdom/modules/style.js';
+import eventListenersModule from './eventslisteners.js';
 const patch = init([attributesModule, propsModule, styleModule, eventListenersModule]);
 export default patch;

package/modules/component/snabbdom/h.js

@@ -1,4 +1,4 @@
-import { vnode } from './vnode';
+import { vnode } from './vnode.js';
 import * as is from './is';
 
 function addNS(data, children, sel) {

package/modules/component/snabbdom/snabbdom.bundle.js

@@ -1,15 +1,15 @@
-import { init } from './snabbdom';
-import { attributesModule } from './modules/attributes'; // for setting attributes on DOM elements
+import { init } from './snabbdom.js';
+import { attributesModule } from './modules/attributes.js'; // for setting attributes on DOM elements
 
-import { classModule } from './modules/class'; // makes it easy to toggle classes
+import { classModule } from './modules/class.js'; // makes it easy to toggle classes
 
-import { propsModule } from './modules/props'; // for setting properties on DOM elements
+import { propsModule } from './modules/props.js'; // for setting properties on DOM elements
 
-import { styleModule } from './modules/style'; // handles styling on elements with support for animations
+import { styleModule } from './modules/style.js'; // handles styling on elements with support for animations
 
-import { eventListenersModule } from './modules/eventlisteners'; // attaches event listeners
+import { eventListenersModule } from './modules/eventlisteners.js'; // attaches event listeners
 
-import { h } from './h'; // helper function for creating vnodes
+import { h } from './h.js'; // helper function for creating vnodes
 
 var patch = init([attributesModule, classModule, propsModule, styleModule, eventListenersModule]);
 export var snabbdomBundle = {

package/modules/component/snabbdom/snabbdom.js

@@ -1,6 +1,6 @@
-import vnode from './vnode';
-import * as is from './is';
-import htmlDomApi from './htmldomapi';
+import vnode from './vnode.js';
+import * as is from './is.js';
+import htmlDomApi from './htmldomapi.js';
 
 function isUndef(s) {
   return s === undefined;

package/modules/component/snabbdom/thunk.js

@@ -1,4 +1,4 @@
-import { h } from './h';
+import { h } from './h.js';
 
 function copyToThunk(vnode, thunk) {
   thunk.elm = vnode.elm;

package/modules/component/snabbdom/tovnode.js

@@ -1,5 +1,5 @@
-import vnode from './vnode';
-import htmlDomApi from './htmldomapi';
+import vnode from './vnode.js';
+import htmlDomApi from './htmldomapi.js';
 export function toVNode(node, domApi) {
   var api = domApi !== undefined ? domApi : htmlDomApi;
   var text;

package/modules/component/vdom.js

@@ -1,9 +1,9 @@
 /* eslint no-use-before-define: "off" */
 
 /* eslint import/no-named-as-default: "off" */
-import h from './snabbdom/h';
-import customComponents from './custom-components';
-import { isObject, eventNameToColonCase } from '../../shared/utils';
+import h from './snabbdom/h.js';
+import customComponents from './custom-components.js';
+import { isObject, eventNameToColonCase } from '../../shared/utils.js';
 const SELF_CLOSING = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' ');
 const PROPS_ATTRS = 'hidden checked disabled readonly selected autofocus autoplay required multiple value indeterminate routeProps innerHTML'.split(' ');
 const BOOLEAN_PROPS = 'hidden checked disabled readonly selected autofocus autoplay required multiple readOnly indeterminate'.split(' ');

package/modules/device/device.js

@@ -1,5 +1,5 @@
 import { getDocument } from 'ssr-window';
-import { getDevice } from '../../shared/get-device';
+import { getDevice } from '../../shared/get-device.js';
 export default {
   name: 'device',
   static: {

package/modules/history/history.js

@@ -1,4 +1,4 @@
-import History from '../../shared/history';
+import History from '../../shared/history.js';
 export default {
   name: 'history',
   static: {

package/modules/request/request.js

@@ -1,5 +1,5 @@
 /* eslint no-param-reassign: "off" */
-import request from '../../shared/request';
+import request from '../../shared/request.js';
 export default {
   name: 'request',
   proto: {

package/modules/resize/resize.js

@@ -1,5 +1,5 @@
 import { getWindow, getDocument } from 'ssr-window';
-import { getDevice } from '../../shared/get-device';
+import { getDevice } from '../../shared/get-device.js';
 export default {
   name: 'resize',
 

package/modules/router/back.js

@@ -1,12 +1,12 @@
 import { getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, parseUrlQuery } from '../../shared/utils';
-import { getDevice } from '../../shared/get-device';
-import History from '../../shared/history';
-import redirect from './redirect';
-import processRouteQueue from './process-route-queue';
-import appRouterCheck from './app-router-check';
-import asyncComponent from './async-component';
+import $ from '../../shared/dom7.js';
+import { extend, parseUrlQuery } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import History from '../../shared/history.js';
+import redirect from './redirect.js';
+import processRouteQueue from './process-route-queue.js';
+import appRouterCheck from './app-router-check.js';
+import asyncComponent from './async-component.js';
 
 function backward(router, el, backwardOptions) {
   const device = getDevice();

package/modules/router/clear-previous-history.js

@@ -1,5 +1,5 @@
-import $ from '../../shared/dom7';
-import appRouterCheck from './app-router-check';
+import $ from '../../shared/dom7.js';
+import appRouterCheck from './app-router-check.js';
 
 function clearPreviousPages(router) {
   appRouterCheck(router, 'clearPreviousPages');

package/modules/router/component-loader.js

@@ -1,7 +1,53 @@
-import { merge } from '../../shared/utils';
+import { merge } from '../../shared/utils.js';
 export default {
   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 {

package/modules/router/modal.js

@@ -1,6 +1,6 @@
-import { extend, nextTick } from '../../shared/utils';
-import History from '../../shared/history';
-import asyncComponent from './async-component';
+import { extend, nextTick } from '../../shared/utils.js';
+import History from '../../shared/history.js';
+import asyncComponent from './async-component.js';
 
 function modalLoad(modalType, route, loadOptions = {}, direction) {
   const router = this;

package/modules/router/navigate.js

@@ -1,11 +1,11 @@
 import { getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, parseUrlQuery } from '../../shared/utils';
-import History from '../../shared/history';
-import redirect from './redirect';
-import processRouteQueue from './process-route-queue';
-import appRouterCheck from './app-router-check';
-import asyncComponent from './async-component';
+import $ from '../../shared/dom7.js';
+import { extend, parseUrlQuery } from '../../shared/utils.js';
+import History from '../../shared/history.js';
+import redirect from './redirect.js';
+import processRouteQueue from './process-route-queue.js';
+import appRouterCheck from './app-router-check.js';
+import asyncComponent from './async-component.js';
 
 function refreshPage() {
   const router = this;
@@ -730,52 +730,6 @@ function load(router, loadParams = {}, loadOptions = {}, ignorePageChange) {
   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;
@@ -865,7 +819,7 @@ function navigate(navigateParams, navigateOptions = {}) {
   }
 
   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;

package/modules/router/redirect.js

@@ -1,4 +1,4 @@
-import { extend } from '../../shared/utils';
+import { extend } from '../../shared/utils.js';
 export default function redirect(direction, route, options) {
   const router = this;
   const r = route.route.redirect;

package/modules/router/router-class.js

@@ -1,16 +1,16 @@
 import { getWindow, getDocument } from 'ssr-window';
 import { pathToRegexp, compile } from 'path-to-regexp';
-import $ from '../../shared/dom7';
-import Framework7Class from '../../shared/class';
-import { extend, nextFrame, parseUrlQuery, serializeObject, now, eventNameToColonCase } from '../../shared/utils';
-import History from '../../shared/history';
-import SwipeBack from './swipe-back';
-import { refreshPage, navigate } from './navigate';
-import { tabLoad, tabRemove } from './tab';
-import { modalLoad, modalRemove } from './modal';
-import { back } from './back';
-import { clearPreviousHistory } from './clear-previous-history';
-import appRouterCheck from './app-router-check';
+import $ from '../../shared/dom7.js';
+import Framework7Class from '../../shared/class.js';
+import { extend, nextFrame, parseUrlQuery, serializeObject, now, eventNameToColonCase } from '../../shared/utils.js';
+import History from '../../shared/history.js';
+import SwipeBack from './swipe-back.js';
+import { refreshPage, navigate } from './navigate.js';
+import { tabLoad, tabRemove } from './tab.js';
+import { modalLoad, modalRemove } from './modal.js';
+import { back } from './back.js';
+import { clearPreviousHistory } from './clear-previous-history.js';
+import appRouterCheck from './app-router-check.js';
 
 class Router extends Framework7Class {
   constructor(app, view) {

package/modules/router/router.js

@@ -1,4 +1,4 @@
-import Router from './router-class';
+import Router from './router-class.js';
 export default {
   name: 'router',
   static: {

package/modules/router/swipe-back.js

@@ -1,8 +1,8 @@
-import $ from '../../shared/dom7';
-import History from '../../shared/history';
-import { getSupport } from '../../shared/get-support';
-import { getDevice } from '../../shared/get-device';
-import { now } from '../../shared/utils';
+import $ from '../../shared/dom7.js';
+import History from '../../shared/history.js';
+import { getSupport } from '../../shared/get-support.js';
+import { getDevice } from '../../shared/get-device.js';
+import { now } from '../../shared/utils.js';
 
 function SwipeBack(r) {
   const router = r;

package/modules/router/tab.js

@@ -1,7 +1,7 @@
-import $ from '../../shared/dom7';
-import { extend } from '../../shared/utils';
-import History from '../../shared/history';
-import asyncComponent from './async-component';
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import History from '../../shared/history.js';
+import asyncComponent from './async-component.js';
 
 function tabLoad(tabRoute, loadOptions = {}) {
   const router = this;

package/modules/service-worker/service-worker.js

@@ -1,5 +1,5 @@
 import { getWindow } from 'ssr-window';
-import { extend } from '../../shared/utils';
+import { extend } from '../../shared/utils.js';
 const SW = {
   registrations: [],
 

package/modules/store/create-store.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { extend } from '../../shared/utils';
+import { extend } from '../../shared/utils.js';
 
 function createStore(storeParams = {}) {
   const store = {

package/modules/store/store.js

@@ -1,4 +1,4 @@
-import createStore from './create-store';
+import createStore from './create-store.js';
 export { createStore };
 export default {
   name: 'store',

package/modules/support/support.js

@@ -1,4 +1,4 @@
-import { getSupport } from '../../shared/get-support';
+import { getSupport } from '../../shared/get-support.js';
 export default {
   name: 'support',
   static: {

package/modules/touch/touch.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-nested-ternary */
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { getSupport } from '../../shared/get-support';
-import { getDevice } from '../../shared/get-device';
-import { extend } from '../../shared/utils';
+import $ from '../../shared/dom7.js';
+import { getSupport } from '../../shared/get-support.js';
+import { getDevice } from '../../shared/get-device.js';
+import { extend } from '../../shared/utils.js';
 
 function initTouch() {
   const app = this;

package/modules/utils/utils.js

@@ -1,4 +1,4 @@
-import * as utils from '../../shared/utils';
+import * as utils from '../../shared/utils.js';
 export default {
   name: 'utils',
   proto: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.5",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
   "type": "module",
   "exports": {
@@ -8,6 +8,7 @@
     "./core": "./framework7.esm.js",
     "./bundle": "./framework7-bundle.esm.js",
     "./lite": "./framework7-lite.esm.js",
+    "./lite/bundle": "./framework7-lite-bundle.esm.js",
     "./lite-bundle": "./framework7-lite-bundle.esm.js",
     "./less": "./framework7.less",
     "./css": "./framework7.css",

package/shared/class.js

@@ -1,5 +1,5 @@
-import { extend, now } from './utils';
-import EventsClass from './events-class';
+import { extend, now } from './utils.js';
+import EventsClass from './events-class.js';
 
 class Framework7Class extends EventsClass {
   constructor(params = {}, parents = []) {

package/shared/constructor-methods.js

@@ -1,4 +1,4 @@
-import $ from './dom7';
+import $ from './dom7.js';
 export default function ConstructorMethods(parameters = {}) {
   const {
     defaultSelector,

package/shared/get-device.js

@@ -1,5 +1,5 @@
 import { getWindow } from 'ssr-window';
-import { getSupport } from './get-support';
+import { getSupport } from './get-support.js';
 let deviceCalculated;
 
 function calcDevice({

package/shared/history.js

@@ -1,6 +1,6 @@
 import { getWindow, getDocument } from 'ssr-window';
-import $ from './dom7';
-import { extend } from './utils';
+import $ from './dom7.js';
+import { extend } from './utils.js';
 const History = {
   queue: [],
 

package/shared/modal-methods.js

@@ -1,6 +1,6 @@
-import $ from './dom7';
-import { extend } from './utils';
-import ConstructorMethods from './constructor-methods';
+import $ from './dom7.js';
+import { extend } from './utils.js';
+import ConstructorMethods from './constructor-methods.js';
 export default function ModalMethods(parameters = {}) {
   const {
     defaultSelector,

package/shared/request.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import { getWindow, getDocument } from 'ssr-window';
-import { extend, serializeObject } from './utils';
+import { extend, serializeObject } from './utils.js';
 const globals = {};
 let jsonpRequests = 0;