framework7 6.3.4 → 7.0.0-beta.3

package/{esm/modules → modules}/touch/touch.js

@@ -6,41 +6,41 @@ import { getDevice } from '../../shared/get-device';
 import { extend } from '../../shared/utils';
 
 function initTouch() {
-  var app = this;
-  var device = getDevice();
-  var support = getSupport();
-  var window = getWindow();
-  var document = getDocument();
-  var params = app.params.touch;
-  var useRipple = params[app.theme + "TouchRipple"];
+  const app = this;
+  const device = getDevice();
+  const support = getSupport();
+  const window = getWindow();
+  const document = getDocument();
+  const params = app.params.touch;
+  const useRipple = params[`${app.theme}TouchRipple`];
 
   if (device.ios && device.webView) {
     // Strange hack required for iOS 8 webview to work on inputs
-    window.addEventListener('touchstart', function () {});
+    window.addEventListener('touchstart', () => {});
   }
 
-  var touchStartX;
-  var touchStartY;
-  var targetElement;
-  var isMoved;
-  var tapHoldFired;
-  var tapHoldTimeout;
-  var preventClick;
-  var activableElement;
-  var activeTimeout;
-  var rippleWave;
-  var rippleTarget;
-  var rippleTimeout;
+  let touchStartX;
+  let touchStartY;
+  let targetElement;
+  let isMoved;
+  let tapHoldFired;
+  let tapHoldTimeout;
+  let preventClick;
+  let activableElement;
+  let activeTimeout;
+  let rippleWave;
+  let rippleTarget;
+  let rippleTimeout;
 
   function findActivableElement(el) {
-    var target = $(el);
-    var parents = target.parents(params.activeStateElements);
+    const target = $(el);
+    const parents = target.parents(params.activeStateElements);
 
     if (target.closest('.no-active-state').length) {
       return null;
     }
 
-    var activable;
+    let activable;
 
     if (target.is(params.activeStateElements)) {
       activable = target;
@@ -51,10 +51,10 @@ function initTouch() {
     }
 
     if (activable && activable.length > 1) {
-      var newActivable = [];
-      var preventPropagation;
+      const newActivable = [];
+      let preventPropagation;
 
-      for (var i = 0; i < activable.length; i += 1) {
+      for (let i = 0; i < activable.length; i += 1) {
         if (!preventPropagation) {
           newActivable.push(activable[i]);
 
@@ -71,7 +71,7 @@ function initTouch() {
   }
 
   function isInsideScrollableView(el) {
-    var pageContent = el.parents('.page-content');
+    const pageContent = el.parents('.page-content');
     return pageContent.length > 0;
   }
 
@@ -88,8 +88,8 @@ function initTouch() {
 
 
   function findRippleElement(el) {
-    var rippleElements = params.touchRippleElements;
-    var $el = $(el);
+    const rippleElements = params.touchRippleElements;
+    const $el = $(el);
 
     if ($el.is(rippleElements)) {
       if ($el.hasClass('no-ripple')) {
@@ -100,7 +100,7 @@ function initTouch() {
     }
 
     if ($el.parents(rippleElements).length > 0) {
-      var rippleParent = $el.parents(rippleElements).eq(0);
+      const rippleParent = $el.parents(rippleElements).eq(0);
 
       if (rippleParent.hasClass('no-ripple')) {
         return false;
@@ -132,14 +132,14 @@ function initTouch() {
       return;
     }
 
-    var inScrollable = isInsideScrollableView(rippleTarget);
+    const inScrollable = isInsideScrollableView(rippleTarget);
 
     if (!inScrollable) {
       removeRipple();
       createRipple(rippleTarget, touchStartX, touchStartY);
     } else {
       clearTimeout(rippleTimeout);
-      rippleTimeout = setTimeout(function () {
+      rippleTimeout = setTimeout(() => {
         removeRipple();
         createRipple(rippleTarget, touchStartX, touchStartY);
       }, 80);
@@ -163,13 +163,13 @@ function initTouch() {
 
 
   function handleMouseDown(e) {
-    var $activableEl = findActivableElement(e.target);
+    const $activableEl = findActivableElement(e.target);
 
     if ($activableEl) {
       $activableEl.addClass('active-state');
 
       if ('which' in e && e.which === 3) {
-        setTimeout(function () {
+        setTimeout(() => {
           $('.active-state').removeClass('active-state');
         }, 0);
       }
@@ -216,12 +216,12 @@ function initTouch() {
     }
   }
 
-  var isScrolling;
-  var isSegmentedStrong = false;
-  var segmentedStrongEl = null;
-  var touchMoveActivableIos = '.dialog-button, .actions-button';
-  var isTouchMoveActivable = false;
-  var touchmoveActivableEl = null;
+  let isScrolling;
+  let isSegmentedStrong = false;
+  let segmentedStrongEl = null;
+  const touchMoveActivableIos = '.dialog-button, .actions-button';
+  let isTouchMoveActivable = false;
+  let touchmoveActivableEl = null;
 
   function handleTouchStart(e) {
     isMoved = false;
@@ -240,7 +240,7 @@ function initTouch() {
 
     if (params.tapHold) {
       if (tapHoldTimeout) clearTimeout(tapHoldTimeout);
-      tapHoldTimeout = setTimeout(function () {
+      tapHoldTimeout = setTimeout(() => {
         if (e && e.touches && e.touches.length > 1) return;
         tapHoldFired = true;
         e.preventDefault();
@@ -278,17 +278,17 @@ function initTouch() {
   }
 
   function handleTouchMove(e) {
-    var touch;
-    var distance;
-    var shouldRemoveActive = true;
+    let touch;
+    let distance;
+    let shouldRemoveActive = true;
 
     if (e.type === 'touchmove') {
       touch = e.targetTouches[0];
       distance = params.touchClicksDistanceThreshold;
     }
 
-    var touchCurrentX = e.targetTouches[0].pageX;
-    var touchCurrentY = e.targetTouches[0].pageY;
+    const touchCurrentX = e.targetTouches[0].pageX;
+    const touchCurrentY = e.targetTouches[0].pageY;
 
     if (typeof isScrolling === 'undefined') {
       isScrolling = !!(isScrolling || Math.abs(touchCurrentY - touchStartY) > Math.abs(touchCurrentX - touchStartX));
@@ -299,8 +299,8 @@ function initTouch() {
     }
 
     if (!isScrolling && isSegmentedStrong && segmentedStrongEl) {
-      var elementFromPoint = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
-      var buttonEl = elementFromPoint.closest('.segmented-strong .button:not(.button-active):not(.tab-link-active)');
+      const elementFromPoint = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
+      const buttonEl = elementFromPoint.closest('.segmented-strong .button:not(.button-active):not(.tab-link-active)');
 
       if (buttonEl && segmentedStrongEl.contains(buttonEl)) {
         $(buttonEl).trigger('click', 'f7Segmented');
@@ -309,8 +309,8 @@ function initTouch() {
     }
 
     if (distance && touch) {
-      var pageX = touch.pageX;
-      var pageY = touch.pageY;
+      const pageX = touch.pageX;
+      const pageY = touch.pageY;
 
       if (Math.abs(pageX - touchStartX) > distance || Math.abs(pageY - touchStartY) > distance) {
         isMoved = true;
@@ -323,14 +323,13 @@ function initTouch() {
       preventClick = true; // Keep active state on touchMove (for dialog and actions buttons)
 
       if (isTouchMoveActivable) {
-        var _elementFromPoint = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
-
-        touchmoveActivableEl = _elementFromPoint.closest(touchMoveActivableIos);
+        const elementFromPoint = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
+        touchmoveActivableEl = elementFromPoint.closest(touchMoveActivableIos);
 
         if (touchmoveActivableEl && activableElement && activableElement[0] === touchmoveActivableEl) {
           shouldRemoveActive = false;
         } else if (touchmoveActivableEl) {
-          setTimeout(function () {
+          setTimeout(() => {
             activableElement = findActivableElement(touchmoveActivableEl);
             addActive();
           });
@@ -394,11 +393,11 @@ function initTouch() {
   }
 
   function handleClick(e) {
-    var isOverswipe = e && e.detail && e.detail === 'f7Overswipe';
-    var isSegmented = e && e.detail && e.detail === 'f7Segmented'; // eslint-disable-next-line
+    const isOverswipe = e && e.detail && e.detail === 'f7Overswipe';
+    const isSegmented = e && e.detail && e.detail === 'f7Segmented'; // eslint-disable-next-line
 
-    var isTouchMoveActivable = e && e.detail && e.detail === 'f7TouchMoveActivable';
-    var localPreventClick = preventClick;
+    const isTouchMoveActivable = e && e.detail && e.detail === 'f7TouchMoveActivable';
+    let localPreventClick = preventClick;
 
     if (targetElement && e.target !== targetElement) {
       if (isOverswipe || isSegmented || isTouchMoveActivable) {
@@ -421,7 +420,7 @@ function initTouch() {
     }
 
     if (params.tapHold) {
-      tapHoldTimeout = setTimeout(function () {
+      tapHoldTimeout = setTimeout(() => {
         tapHoldFired = false;
       }, device.ios || device.androidChrome ? 100 : 400);
     }
@@ -466,17 +465,17 @@ function initTouch() {
     emitAppTouchEvent('touchend:passive', e);
   }
 
-  var passiveListener = support.passiveListener ? {
+  const passiveListener = support.passiveListener ? {
     passive: true
   } : false;
-  var passiveListenerCapture = support.passiveListener ? {
+  const passiveListenerCapture = support.passiveListener ? {
     passive: true,
     capture: true
   } : true;
-  var activeListener = support.passiveListener ? {
+  const activeListener = support.passiveListener ? {
     passive: false
   } : false;
-  var activeListenerCapture = support.passiveListener ? {
+  const activeListenerCapture = support.passiveListener ? {
     passive: false,
     capture: true
   } : true;
@@ -490,15 +489,15 @@ function initTouch() {
     document.addEventListener(app.touchEvents.move, appTouchMovePassive, passiveListener);
     document.addEventListener(app.touchEvents.end, appTouchEndPassive, passiveListener);
   } else {
-    document.addEventListener(app.touchEvents.start, function (e) {
+    document.addEventListener(app.touchEvents.start, e => {
       appTouchStartActive(e);
       appTouchStartPassive(e);
     }, true);
-    document.addEventListener(app.touchEvents.move, function (e) {
+    document.addEventListener(app.touchEvents.move, e => {
       appTouchMoveActive(e);
       appTouchMovePassive(e);
     }, false);
-    document.addEventListener(app.touchEvents.end, function (e) {
+    document.addEventListener(app.touchEvents.end, e => {
       appTouchEndActive(e);
       appTouchEndPassive(e);
     }, false);
@@ -521,7 +520,7 @@ function initTouch() {
     });
   }
 
-  document.addEventListener('contextmenu', function (e) {
+  document.addEventListener('contextmenu', e => {
     if (params.disableContextMenu && (device.ios || device.android || device.cordova || window.Capacitor && window.Capacitor.isNative)) {
       e.preventDefault();
     }
@@ -556,9 +555,10 @@ export default {
       touchRippleInsetElements: '.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back'
     }
   },
-  create: function create() {
-    var app = this;
-    var support = getSupport();
+
+  create() {
+    const app = this;
+    const support = getSupport();
     extend(app, {
       touchEvents: {
         start: support.touch ? 'touchstart' : support.pointerEvents ? 'pointerdown' : 'mousedown',
@@ -567,6 +567,7 @@ export default {
       }
     });
   },
+
   on: {
     init: initTouch
   }

package/{esm/modules → modules}/utils/utils.js

@@ -2,9 +2,9 @@ import * as utils from '../../shared/utils';
 export default {
   name: 'utils',
   proto: {
-    utils: utils
+    utils
   },
   static: {
-    utils: utils
+    utils
   }
 };

package/package.json

@@ -1,16 +1,257 @@
 {
   "name": "framework7",
-  "version": "6.3.4",
+  "version": "7.0.0-beta.3",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
-  "main": "cjs/framework7.js",
-  "module": "esm/framework7.js",
-  "jsnext:main": "esm/framework7.js",
+  "type": "module",
+  "exports": {
+    ".": "./framework7.esm.js",
+    "./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",
+    "./css/rtl": "./framework7-rtl.css",
+    "./css/bundle": "./framework7-bundle.css",
+    "./css/bundle/rtl": "./framework7-bundle-rtl.css",
+    "./types": "./framework7-types.d.ts",
+    "./components/appbar": "./components/appbar/appbar.js",
+    "./components/appbar/less": "./components/appbar/appbar.less",
+    "./components/appbar/css": "./components/appbar/appbar.css",
+    "./components/appbar/css/rtl": "./components/appbar/appbar-rtl.css",
+    "./components/dialog": "./components/dialog/dialog.js",
+    "./components/dialog/less": "./components/dialog/dialog.less",
+    "./components/dialog/css": "./components/dialog/dialog.css",
+    "./components/dialog/css/rtl": "./components/dialog/dialog-rtl.css",
+    "./components/popup": "./components/popup/popup.js",
+    "./components/popup/less": "./components/popup/popup.less",
+    "./components/popup/css": "./components/popup/popup.css",
+    "./components/popup/css/rtl": "./components/popup/popup-rtl.css",
+    "./components/login-screen": "./components/login-screen/login-screen.js",
+    "./components/login-screen/less": "./components/login-screen/login-screen.less",
+    "./components/login-screen/css": "./components/login-screen/login-screen.css",
+    "./components/login-screen/css/rtl": "./components/login-screen/login-screen-rtl.css",
+    "./components/popover": "./components/popover/popover.js",
+    "./components/popover/less": "./components/popover/popover.less",
+    "./components/popover/css": "./components/popover/popover.css",
+    "./components/popover/css/rtl": "./components/popover/popover-rtl.css",
+    "./components/actions": "./components/actions/actions.js",
+    "./components/actions/less": "./components/actions/actions.less",
+    "./components/actions/css": "./components/actions/actions.css",
+    "./components/actions/css/rtl": "./components/actions/actions-rtl.css",
+    "./components/sheet": "./components/sheet/sheet.js",
+    "./components/sheet/less": "./components/sheet/sheet.less",
+    "./components/sheet/css": "./components/sheet/sheet.css",
+    "./components/sheet/css/rtl": "./components/sheet/sheet-rtl.css",
+    "./components/toast": "./components/toast/toast.js",
+    "./components/toast/less": "./components/toast/toast.less",
+    "./components/toast/css": "./components/toast/toast.css",
+    "./components/toast/css/rtl": "./components/toast/toast-rtl.css",
+    "./components/preloader": "./components/preloader/preloader.js",
+    "./components/preloader/less": "./components/preloader/preloader.less",
+    "./components/preloader/css": "./components/preloader/preloader.css",
+    "./components/preloader/css/rtl": "./components/preloader/preloader-rtl.css",
+    "./components/progressbar": "./components/progressbar/progressbar.js",
+    "./components/progressbar/less": "./components/progressbar/progressbar.less",
+    "./components/progressbar/css": "./components/progressbar/progressbar.css",
+    "./components/progressbar/css/rtl": "./components/progressbar/progressbar-rtl.css",
+    "./components/sortable": "./components/sortable/sortable.js",
+    "./components/sortable/less": "./components/sortable/sortable.less",
+    "./components/sortable/css": "./components/sortable/sortable.css",
+    "./components/sortable/css/rtl": "./components/sortable/sortable-rtl.css",
+    "./components/swipeout": "./components/swipeout/swipeout.js",
+    "./components/swipeout/less": "./components/swipeout/swipeout.less",
+    "./components/swipeout/css": "./components/swipeout/swipeout.css",
+    "./components/swipeout/css/rtl": "./components/swipeout/swipeout-rtl.css",
+    "./components/accordion": "./components/accordion/accordion.js",
+    "./components/accordion/less": "./components/accordion/accordion.less",
+    "./components/accordion/css": "./components/accordion/accordion.css",
+    "./components/accordion/css/rtl": "./components/accordion/accordion-rtl.css",
+    "./components/contacts-list": "./components/contacts-list/contacts-list.js",
+    "./components/contacts-list/less": "./components/contacts-list/contacts-list.less",
+    "./components/contacts-list/css": "./components/contacts-list/contacts-list.css",
+    "./components/contacts-list/css/rtl": "./components/contacts-list/contacts-list-rtl.css",
+    "./components/virtual-list": "./components/virtual-list/virtual-list.js",
+    "./components/virtual-list/less": "./components/virtual-list/virtual-list.less",
+    "./components/virtual-list/css": "./components/virtual-list/virtual-list.css",
+    "./components/virtual-list/css/rtl": "./components/virtual-list/virtual-list-rtl.css",
+    "./components/list-index": "./components/list-index/list-index.js",
+    "./components/list-index/less": "./components/list-index/list-index.less",
+    "./components/list-index/css": "./components/list-index/list-index.css",
+    "./components/list-index/css/rtl": "./components/list-index/list-index-rtl.css",
+    "./components/timeline": "./components/timeline/timeline.js",
+    "./components/timeline/less": "./components/timeline/timeline.less",
+    "./components/timeline/css": "./components/timeline/timeline.css",
+    "./components/timeline/css/rtl": "./components/timeline/timeline-rtl.css",
+    "./components/tabs": "./components/tabs/tabs.js",
+    "./components/tabs/less": "./components/tabs/tabs.less",
+    "./components/tabs/css": "./components/tabs/tabs.css",
+    "./components/tabs/css/rtl": "./components/tabs/tabs-rtl.css",
+    "./components/panel": "./components/panel/panel.js",
+    "./components/panel/less": "./components/panel/panel.less",
+    "./components/panel/css": "./components/panel/panel.css",
+    "./components/panel/css/rtl": "./components/panel/panel-rtl.css",
+    "./components/card": "./components/card/card.js",
+    "./components/card/less": "./components/card/card.less",
+    "./components/card/css": "./components/card/card.css",
+    "./components/card/css/rtl": "./components/card/card-rtl.css",
+    "./components/chip": "./components/chip/chip.js",
+    "./components/chip/less": "./components/chip/chip.less",
+    "./components/chip/css": "./components/chip/chip.css",
+    "./components/chip/css/rtl": "./components/chip/chip-rtl.css",
+    "./components/form": "./components/form/form.js",
+    "./components/form/less": "./components/form/form.less",
+    "./components/form/css": "./components/form/form.css",
+    "./components/form/css/rtl": "./components/form/form-rtl.css",
+    "./components/input": "./components/input/input.js",
+    "./components/input/less": "./components/input/input.less",
+    "./components/input/css": "./components/input/input.css",
+    "./components/input/css/rtl": "./components/input/input-rtl.css",
+    "./components/checkbox": "./components/checkbox/checkbox.js",
+    "./components/checkbox/less": "./components/checkbox/checkbox.less",
+    "./components/checkbox/css": "./components/checkbox/checkbox.css",
+    "./components/checkbox/css/rtl": "./components/checkbox/checkbox-rtl.css",
+    "./components/radio": "./components/radio/radio.js",
+    "./components/radio/less": "./components/radio/radio.less",
+    "./components/radio/css": "./components/radio/radio.css",
+    "./components/radio/css/rtl": "./components/radio/radio-rtl.css",
+    "./components/toggle": "./components/toggle/toggle.js",
+    "./components/toggle/less": "./components/toggle/toggle.less",
+    "./components/toggle/css": "./components/toggle/toggle.css",
+    "./components/toggle/css/rtl": "./components/toggle/toggle-rtl.css",
+    "./components/range": "./components/range/range.js",
+    "./components/range/less": "./components/range/range.less",
+    "./components/range/css": "./components/range/range.css",
+    "./components/range/css/rtl": "./components/range/range-rtl.css",
+    "./components/stepper": "./components/stepper/stepper.js",
+    "./components/stepper/less": "./components/stepper/stepper.less",
+    "./components/stepper/css": "./components/stepper/stepper.css",
+    "./components/stepper/css/rtl": "./components/stepper/stepper-rtl.css",
+    "./components/smart-select": "./components/smart-select/smart-select.js",
+    "./components/smart-select/less": "./components/smart-select/smart-select.less",
+    "./components/smart-select/css": "./components/smart-select/smart-select.css",
+    "./components/smart-select/css/rtl": "./components/smart-select/smart-select-rtl.css",
+    "./components/grid": "./components/grid/grid.js",
+    "./components/grid/less": "./components/grid/grid.less",
+    "./components/grid/css": "./components/grid/grid.css",
+    "./components/grid/css/rtl": "./components/grid/grid-rtl.css",
+    "./components/calendar": "./components/calendar/calendar.js",
+    "./components/calendar/less": "./components/calendar/calendar.less",
+    "./components/calendar/css": "./components/calendar/calendar.css",
+    "./components/calendar/css/rtl": "./components/calendar/calendar-rtl.css",
+    "./components/picker": "./components/picker/picker.js",
+    "./components/picker/less": "./components/picker/picker.less",
+    "./components/picker/css": "./components/picker/picker.css",
+    "./components/picker/css/rtl": "./components/picker/picker-rtl.css",
+    "./components/infinite-scroll": "./components/infinite-scroll/infinite-scroll.js",
+    "./components/infinite-scroll/less": "./components/infinite-scroll/infinite-scroll.less",
+    "./components/infinite-scroll/css": "./components/infinite-scroll/infinite-scroll.css",
+    "./components/infinite-scroll/css/rtl": "./components/infinite-scroll/infinite-scroll-rtl.css",
+    "./components/pull-to-refresh": "./components/pull-to-refresh/pull-to-refresh.js",
+    "./components/pull-to-refresh/less": "./components/pull-to-refresh/pull-to-refresh.less",
+    "./components/pull-to-refresh/css": "./components/pull-to-refresh/pull-to-refresh.css",
+    "./components/pull-to-refresh/css/rtl": "./components/pull-to-refresh/pull-to-refresh-rtl.css",
+    "./components/lazy": "./components/lazy/lazy.js",
+    "./components/lazy/less": "./components/lazy/lazy.less",
+    "./components/lazy/css": "./components/lazy/lazy.css",
+    "./components/lazy/css/rtl": "./components/lazy/lazy-rtl.css",
+    "./components/data-table": "./components/data-table/data-table.js",
+    "./components/data-table/less": "./components/data-table/data-table.less",
+    "./components/data-table/css": "./components/data-table/data-table.css",
+    "./components/data-table/css/rtl": "./components/data-table/data-table-rtl.css",
+    "./components/fab": "./components/fab/fab.js",
+    "./components/fab/less": "./components/fab/fab.less",
+    "./components/fab/css": "./components/fab/fab.css",
+    "./components/fab/css/rtl": "./components/fab/fab-rtl.css",
+    "./components/searchbar": "./components/searchbar/searchbar.js",
+    "./components/searchbar/less": "./components/searchbar/searchbar.less",
+    "./components/searchbar/css": "./components/searchbar/searchbar.css",
+    "./components/searchbar/css/rtl": "./components/searchbar/searchbar-rtl.css",
+    "./components/messages": "./components/messages/messages.js",
+    "./components/messages/less": "./components/messages/messages.less",
+    "./components/messages/css": "./components/messages/messages.css",
+    "./components/messages/css/rtl": "./components/messages/messages-rtl.css",
+    "./components/messagebar": "./components/messagebar/messagebar.js",
+    "./components/messagebar/less": "./components/messagebar/messagebar.less",
+    "./components/messagebar/css": "./components/messagebar/messagebar.css",
+    "./components/messagebar/css/rtl": "./components/messagebar/messagebar-rtl.css",
+    "./components/swiper": "./components/swiper/swiper.js",
+    "./components/swiper/less": "./components/swiper/swiper.less",
+    "./components/swiper/css": "./components/swiper/swiper.css",
+    "./components/swiper/css/rtl": "./components/swiper/swiper-rtl.css",
+    "./components/photo-browser": "./components/photo-browser/photo-browser.js",
+    "./components/photo-browser/less": "./components/photo-browser/photo-browser.less",
+    "./components/photo-browser/css": "./components/photo-browser/photo-browser.css",
+    "./components/photo-browser/css/rtl": "./components/photo-browser/photo-browser-rtl.css",
+    "./components/notification": "./components/notification/notification.js",
+    "./components/notification/less": "./components/notification/notification.less",
+    "./components/notification/css": "./components/notification/notification.css",
+    "./components/notification/css/rtl": "./components/notification/notification-rtl.css",
+    "./components/autocomplete": "./components/autocomplete/autocomplete.js",
+    "./components/autocomplete/less": "./components/autocomplete/autocomplete.less",
+    "./components/autocomplete/css": "./components/autocomplete/autocomplete.css",
+    "./components/autocomplete/css/rtl": "./components/autocomplete/autocomplete-rtl.css",
+    "./components/tooltip": "./components/tooltip/tooltip.js",
+    "./components/tooltip/less": "./components/tooltip/tooltip.less",
+    "./components/tooltip/css": "./components/tooltip/tooltip.css",
+    "./components/tooltip/css/rtl": "./components/tooltip/tooltip-rtl.css",
+    "./components/gauge": "./components/gauge/gauge.js",
+    "./components/gauge/less": "./components/gauge/gauge.less",
+    "./components/gauge/css": "./components/gauge/gauge.css",
+    "./components/gauge/css/rtl": "./components/gauge/gauge-rtl.css",
+    "./components/skeleton": "./components/skeleton/skeleton.js",
+    "./components/skeleton/less": "./components/skeleton/skeleton.less",
+    "./components/skeleton/css": "./components/skeleton/skeleton.css",
+    "./components/skeleton/css/rtl": "./components/skeleton/skeleton-rtl.css",
+    "./components/menu": "./components/menu/menu.js",
+    "./components/menu/less": "./components/menu/menu.less",
+    "./components/menu/css": "./components/menu/menu.css",
+    "./components/menu/css/rtl": "./components/menu/menu-rtl.css",
+    "./components/color-picker": "./components/color-picker/color-picker.js",
+    "./components/color-picker/less": "./components/color-picker/color-picker.less",
+    "./components/color-picker/css": "./components/color-picker/color-picker.css",
+    "./components/color-picker/css/rtl": "./components/color-picker/color-picker-rtl.css",
+    "./components/treeview": "./components/treeview/treeview.js",
+    "./components/treeview/less": "./components/treeview/treeview.less",
+    "./components/treeview/css": "./components/treeview/treeview.css",
+    "./components/treeview/css/rtl": "./components/treeview/treeview-rtl.css",
+    "./components/text-editor": "./components/text-editor/text-editor.js",
+    "./components/text-editor/less": "./components/text-editor/text-editor.less",
+    "./components/text-editor/css": "./components/text-editor/text-editor.css",
+    "./components/text-editor/css/rtl": "./components/text-editor/text-editor-rtl.css",
+    "./components/pie-chart": "./components/pie-chart/pie-chart.js",
+    "./components/pie-chart/less": "./components/pie-chart/pie-chart.less",
+    "./components/pie-chart/css": "./components/pie-chart/pie-chart.css",
+    "./components/pie-chart/css/rtl": "./components/pie-chart/pie-chart-rtl.css",
+    "./components/area-chart": "./components/area-chart/area-chart.js",
+    "./components/area-chart/less": "./components/area-chart/area-chart.less",
+    "./components/area-chart/css": "./components/area-chart/area-chart.css",
+    "./components/area-chart/css/rtl": "./components/area-chart/area-chart-rtl.css",
+    "./components/elevation": "./components/elevation/elevation.js",
+    "./components/elevation/less": "./components/elevation/elevation.less",
+    "./components/elevation/css": "./components/elevation/elevation.css",
+    "./components/elevation/css/rtl": "./components/elevation/elevation-rtl.css",
+    "./components/typography": "./components/typography/typography.js",
+    "./components/typography/less": "./components/typography/typography.less",
+    "./components/typography/css": "./components/typography/typography.css",
+    "./components/typography/css/rtl": "./components/typography/typography-rtl.css"
+  },
   "typings": "framework7.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./framework7.d.ts"
+      ],
+      "types": [
+        "./framework7-types.d.ts"
+      ]
+    }
+  },
   "sideEffects": [
     "*.less",
     "*.css",
-    "cjs/utils/dom7.js",
-    "esm/utils/dom7.js"
+    "shared/dom7.js"
   ],
   "scripts": {
     "postinstall": "node postinstall.js"
@@ -50,11 +291,11 @@
     "url": "https://www.patreon.com/framework7"
   },
   "dependencies": {
-    "dom7": "^3.0.0",
+    "dom7": "^4.0.0",
     "htm": "^3.1.0",
     "path-to-regexp": "^6.2.0",
-    "skeleton-elements": "^3.5.0",
-    "ssr-window": "^3.0.0",
-    "swiper": "^6.8.4"
+    "skeleton-elements": "^4.0.0-beta.2",
+    "ssr-window": "^4.0.0",
+    "swiper": "^7.0.8"
   }
-}
+}

package/shared/$jsx.js

@@ -0,0 +1,22 @@
+/* eslint-disable prefer-rest-params */
+const $jsx = (tag, props, ...args) => {
+  const attrs = props || {};
+  const children = args || [];
+  const attrsString = Object.keys(attrs).map(attr => {
+    if (attr[0] === '_') {
+      if (attrs[attr]) return attr.replace('_', '');
+      return '';
+    }
+
+    return `${attr}="${attrs[attr]}"`;
+  }).filter(attr => !!attr).join(' ');
+
+  if (['path', 'img', 'circle', 'polygon', 'line', 'input'].indexOf(tag) >= 0) {
+    return `<${tag} ${attrsString} />`.trim();
+  }
+
+  const childrenContent = children.filter(c => !!c).map(c => Array.isArray(c) ? c.join('') : c).join('');
+  return `<${tag} ${attrsString}>${childrenContent}</${tag}>`.trim();
+};
+
+export default $jsx;