framework7 - npm Package Compare versions

Comparing version 8.0.0-beta.4 to 8.0.0-beta.5

components/app/app-class.d.ts

@@ -46,12 +46,6 @@ import { Dom7, Dom7Array } from 'dom7';
   el?: string;
-  /** App bundle id.. (default io.framework7.testapp) */
-  id?: string | 'io.framework7.testapp';
   /** App name. Can be used by other components, e.g. as the default title for Dialog component.. (default Framework7) */
   name?: string;
-  /** App version. Can be used by other components.. (default 1.0.0) */
-  version?: string;
   /** App theme. Can be ios, md or auto. In case of auto it will use iOS theme for iOS devices and MD theme for all other devices.. (default 'auto') */
   theme?: string;
-  /** App language. Can be used by other components. By default equal to the current browser/webview language (i.e. navigator.language).. */
-  language?: string;
   /** Array with default routes to all views.. (default []) */
@@ -135,12 +129,6 @@ routes?: Router.RouteParameters[];
 interface Framework7 extends Framework7Class<Framework7Events> {
-  /** App ID passed in parameters */
-  id: string;
   /** App name passed in parameters */
   name: string;
-  /** App version */
-  version: string;
   /** App routes */
   routes: Router.RouteParameters[];
-  /** App language */
-  language: string;
   /** App root HTML element */
@@ -147,0 +135,0 @@ el: HTMLElement;

components/app/app-class.js

@@ -40,7 +40,4 @@ /* eslint-disable no-underscore-dangle */
     const defaults = {
-      version: '1.0.0',
-      id: 'io.framework7.myapp',
       el: 'body',
       theme: 'auto',
-      language: w.navigator.language,
       routes: [],
@@ -83,12 +80,6 @@ name: 'Framework7',
     extend(app, {
-      // App Id
-      id: app.params.id,
       // App Name
       name: app.params.name,
-      // App version
-      version: app.params.version,
       // Routes
       routes: app.params.routes,
-      // Lang
-      language: app.params.language,
       // Theme
@@ -95,0 +86,0 @@ theme: function getTheme() {

components/panel/swipe-panel.js

@@ -47,3 +47,3 @@ import $ from '../../shared/dom7.js';
     if (e.target && e.target.nodeName.toLowerCase() === 'input' && e.target.type === 'range') return;
-    if ($(e.target).closest('.range-slider, .tabs-swipeable-wrap, .calendar-months, .no-swipe-panel, .card-opened').length > 0) return;
+    if ($(e.target).closest('.range-slider, swiper-container.tabs, .calendar-months, .no-swipe-panel, .card-opened').length > 0) return;
     touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
@@ -50,0 +50,0 @@ touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;

components/popover/popover-class.js

@@ -56,9 +56,9 @@ import { getWindow, getDocument } from 'ssr-window';
 
-    // Find Angle
-    let $angleEl;
-    if ($el.find('.popover-angle').length === 0 && popover.params.angle) {
-      $angleEl = $('<div class="popover-angle"></div>');
-      $el.prepend($angleEl);
+    // Find Arrow
+    let $arrowEl;
+    if ($el.find('.popover-arrow').length === 0 && popover.params.arrow) {
+      $arrowEl = $('<div class="popover-arrow"></div>');
+      $el.prepend($arrowEl);
     } else {
-      $angleEl = $el.find('.popover-angle');
+      $arrowEl = $el.find('.popover-arrow');
     }
@@ -74,4 +74,4 @@
       targetEl: $targetEl[0],
-      $angleEl,
-      angleEl: $angleEl[0],
+      $arrowEl,
+      arrowEl: $arrowEl[0],
       $backdropEl,
@@ -162,3 +162,3 @@ backdropEl: $backdropEl && $backdropEl[0],
       $targetEl,
-      $angleEl
+      $arrowEl
     } = popover;
@@ -175,13 +175,13 @@ const {
     const [width, height] = [$el.width(), $el.height()];
-    let angleSize = 0;
-    let angleLeft;
-    let angleTop;
-    const hasAngle = $angleEl.length > 0;
-    const angleMin = app.theme === 'ios' ? 13 : 24;
-    if (hasAngle) {
-      $angleEl.removeClass('on-left on-right on-top on-bottom').css({
+    let arrowSize = 0;
+    let arrowLeft;
+    let arrowTop;
+    const hasArrow = $arrowEl.length > 0;
+    const arrowMin = app.theme === 'ios' ? 13 : 24;
+    if (hasArrow) {
+      $arrowEl.removeClass('on-left on-right on-top on-bottom').css({
         left: '',
         top: ''
       });
-      angleSize = $angleEl.width() / 2;
+      arrowSize = $arrowEl.width() / 2;
     }
@@ -222,9 +222,9 @@ $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
     let position = forcedPosition || 'top';
-    if (forcedPosition === 'top' || !forcedPosition && height + angleSize < targetOffsetTop - safeAreaTop) {
+    if (forcedPosition === 'top' || !forcedPosition && height + arrowSize < targetOffsetTop - safeAreaTop) {
       // On top
-      top = targetOffsetTop - height - angleSize;
-    } else if (forcedPosition === 'bottom' || !forcedPosition && height + angleSize < app.height - targetOffsetTop - targetHeight) {
+      top = targetOffsetTop - height - arrowSize;
+    } else if (forcedPosition === 'bottom' || !forcedPosition && height + arrowSize < app.height - targetOffsetTop - targetHeight) {
       // On bottom
       position = 'bottom';
-      top = targetOffsetTop + targetHeight + angleSize;
+      top = targetOffsetTop + targetHeight + arrowSize;
     } else {
@@ -251,29 +251,29 @@ // On middle
       diff -= left;
-      if (hasAngle) {
+      if (hasArrow) {
         if (position === 'top') {
-          $angleEl.addClass('on-bottom');
+          $arrowEl.addClass('on-bottom');
         }
         if (position === 'bottom') {
-          $angleEl.addClass('on-top');
+          $arrowEl.addClass('on-top');
         }
-        angleLeft = width / 2 - angleSize + diff;
-        angleLeft = Math.max(Math.min(angleLeft, width - angleSize * 2 - angleMin), angleMin);
-        $angleEl.css({
-          left: `${angleLeft}px`
+        arrowLeft = width / 2 - arrowSize + diff;
+        arrowLeft = Math.max(Math.min(arrowLeft, width - arrowSize * 2 - arrowMin), arrowMin);
+        $arrowEl.css({
+          left: `${arrowLeft}px`
         });
       }
     } else if (position === 'middle') {
-      left = targetOffsetLeft - width - angleSize;
-      if (hasAngle) $angleEl.addClass('on-right');
+      left = targetOffsetLeft - width - arrowSize;
+      if (hasArrow) $arrowEl.addClass('on-right');
       if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
-        if (left < 5) left = targetOffsetLeft + targetWidth + angleSize;
+        if (left < 5) left = targetOffsetLeft + targetWidth + arrowSize;
         if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
         if (left < safeAreaLeft) left = safeAreaLeft;
-        if (hasAngle) $angleEl.removeClass('on-right').addClass('on-left');
+        if (hasArrow) $arrowEl.removeClass('on-right').addClass('on-left');
       }
-      if (hasAngle) {
-        angleTop = height / 2 - angleSize + diff;
-        angleTop = Math.max(Math.min(angleTop, height - angleSize * 2 - angleMin), angleMin);
-        $angleEl.css({
-          top: `${angleTop}px`
+      if (hasArrow) {
+        arrowTop = height / 2 - arrowSize + diff;
+        arrowTop = Math.max(Math.min(arrowTop, height - arrowSize * 2 - arrowMin), arrowMin);
+        $arrowEl.css({
+          top: `${arrowTop}px`
         });
@@ -280,0 +280,0 @@ }

components/popover/popover.d.ts

@@ -26,4 +26,4 @@ import { Dom7Array } from 'dom7';
     content?: string;
-    /** Enables Popover angle/corner. (default true) */
-    angle?: boolean;
+    /** Enables Popover arrow/corner. (default true) */
+    arrow?: boolean;
     /** Enables Popover backdrop (dark semi transparent layer behind). (default true) */
@@ -30,0 +30,0 @@ backdrop?: boolean;

components/popover/popover.js

@@ -10,3 +10,3 @@ import $ from '../../shared/dom7.js';
       verticalPosition: 'auto',
-      angle: true,
+      arrow: true,
       backdrop: true,
@@ -13,0 +13,0 @@ backdropEl: undefined,

components/searchbar/searchbar-class.js

@@ -37,3 +37,3 @@ import { getDocument } from 'ssr-window';
       customSearch: false,
-      hideDividers: true,
+      hideGroupTitles: true,
       hideGroups: true,
@@ -525,3 +525,3 @@ disableOnBackdropClick: true,
       });
-      if (sb.params.hideDividers) {
+      if (sb.params.hideGroupTitles) {
         $searchContainer.find(sb.params.searchGroupTitle).each(titleEl => {
@@ -528,0 +528,0 @@ const $titleEl = $(titleEl);

components/searchbar/searchbar.d.ts

@@ -26,3 +26,3 @@ import { Dom7Array } from 'dom7';
     searchGroup?: CSSSelector;
-    /** CSS selector of group titles and dividers. Used when hideDividers enabled to hide group titles and dividers. If we do a search in List View, then it usually a list group title or list item divider (default ".list-group-title") */
+    /** CSS selector of group titles. Used when hideGroupTitles enabled to hide group titles. If we do a search in List View, then it usually a list group title (default ".list-group-title") */
     searchGroupTitle?: CSSSelector;
@@ -48,3 +48,3 @@ /** CSS selector or HTMLElement of searchbar "found" element to make it hidden when there is no search results (default ".searchbar-found") */
     /** If enabled, then search will consider item dividers and group titles and hide them if there are no found items right after them (default true) */
-    hideDividers?: boolean;
+    hideGroupTitles?: boolean;
     /** If enabled, then search will consider list view groups hide them if there are no found items inside of these groups (default true) */
@@ -51,0 +51,0 @@ hideGroups?: boolean;

components/swiper/swiper.js

@@ -15,3 +15,4 @@ // eslint-disable-next-line
   if ($swiperEl.length === 0) return;
-  if ($swiperEl[0].swiper) return;
+  const isElement = $swiperEl[0].swiper && $swiperEl[0].swiper.isElement;
+  if ($swiperEl[0].swiper && !$swiperEl[0].swiper.isElement) return;
   let initialSlide;
@@ -21,5 +22,4 @@ let params = {};
   let isRoutableTabs;
-  if ($swiperEl.hasClass('tabs-swipeable-wrap')) {
-    $swiperEl.addClass('swiper').children('.tabs').addClass('swiper-wrapper').children('.tab').addClass('swiper-slide');
-    initialSlide = $swiperEl.children('.tabs').children('.tab-active').index();
+  if ($swiperEl.hasClass('tabs')) {
+    initialSlide = $swiperEl.children('swiper-slide').indexOf($swiperEl.children('.tab-active')[0]);
     isTabs = true;
@@ -48,3 +48,6 @@ isRoutableTabs = $swiperEl.find('.tabs-routable').length > 0;
   }
-  const swiper = app.swiper.create($swiperEl[0], params);
+  const swiper = isElement ? $swiperEl[0].swiper : app.swiper.create($swiperEl[0], params);
+  if (isElement) {
+    swiper.slideTo(initialSlide, 0);
+  }
   function updateSwiper() {
@@ -54,3 +57,3 @@ swiper.update();
   const $tabEl = $swiperEl.parents('.tab').filter(tabEl => {
-    return $(tabEl).parent('.tabs').parent('.tabs-animated-wrap, .tabs-swipeable-wrap').length === 0;
+    return $(tabEl).parent('.tabs').parent('.tabs-animated-wrap, swiper-container.tabs').length === 0;
   }).eq(0);
@@ -103,11 +106,5 @@ $swiperEl.parents('.popup, .login-screen, .sheet-modal, .popover').on('modal:open', updateSwiper);
   on: {
-    pageBeforeRemove(page) {
-      const app = this;
-      page.$el.find('.tabs-swipeable-wrap').each(swiperEl => {
-        app.swiper.destroy(swiperEl);
-      });
-    },
     pageMounted(page) {
       const app = this;
-      page.$el.find('.tabs-swipeable-wrap').each(swiperEl => {
+      page.$el.find('swiper-container.tabs').each(swiperEl => {
         initSwiper.call(app, swiperEl);
@@ -118,3 +115,3 @@ });
       const app = this;
-      page.$el.find('.tabs-swipeable-wrap').each(swiperEl => {
+      page.$el.find('swiper-container.tabs').each(swiperEl => {
         initSwiper.call(app, swiperEl);
@@ -125,3 +122,3 @@ });
       const app = this;
-      page.$el.find('.tabs-swipeable-wrap').each(swiperEl => {
+      page.$el.find('swiper-container.tabs').each(swiperEl => {
         const swiper = app.swiper.get(swiperEl);
@@ -133,3 +130,3 @@ if (swiper && swiper.update) swiper.update();
       const app = this;
-      $(tabEl).find('.tabs-swipeable-wrap').each(swiperEl => {
+      $(tabEl).find('swiper-container.tabs').each(swiperEl => {
         initSwiper.call(app, swiperEl);
@@ -140,3 +137,3 @@ });
       const app = this;
-      $(tabEl).find('.tabs-swipeable-wrap').each(swiperEl => {
+      $(tabEl).find('swiper-container.tabs').each(swiperEl => {
         const swiper = app.swiper.get(swiperEl);
@@ -148,21 +145,7 @@ if (swiper && swiper.update) swiper.update();
       const app = this;
-      $(tabEl).find('.tabs-swipeable-wrap').each(swiperEl => {
+      $(tabEl).find('swiper-container.tabs').each(swiperEl => {
         app.swiper.destroy(swiperEl);
       });
     }
-  },
-  vnode: {
-    'tabs-swipeable-wrap': {
-      insert(vnode) {
-        const app = this;
-        const swiperEl = vnode.elm;
-        initSwiper.call(app, swiperEl);
-      },
-      destroy(vnode) {
-        const app = this;
-        const swiperEl = vnode.elm;
-        app.swiper.destroy(swiperEl);
-      }
-    }
   }
 };

components/tabs/tabs.js

@@ -77,9 +77,10 @@ import $ from '../../shared/dom7.js';
     let swiper;
-    if ($tabsEl.parent().hasClass('tabs-swipeable-wrap') && app.swiper) {
-      swiper = $tabsEl.parent()[0].swiper;
-      if (swiper && swiper.activeIndex !== $newTabEl.index()) {
+    if ($tabsEl[0].nodeName.toLowerCase() === 'swiper-container' && app.swiper) {
+      swiper = $tabsEl[0].swiper;
+      const newTabIndex = swiper.slides.indexOf($newTabEl[0]);
+      if (swiper && swiper.activeIndex !== newTabIndex) {
         animated = true;
         swiper.once('slideChangeTransitionEnd', () => {
           tabsChanged();
-        }).slideTo($newTabEl.index(), animate ? undefined : 0);
+        }).slideTo(newTabIndex, animate ? undefined : 0);
       } else if (swiper && swiper.animating) {
@@ -86,0 +87,0 @@ animated = true;

components/virtual-list/virtual-list-class.js

@@ -129,3 +129,3 @@ import { getDocument } from 'ssr-window';
       $tabEl = vl.$el.parents('.tab').filter(tabEl => {
-        return $(tabEl).parent('.tabs').parent('.tabs-animated-wrap, .tabs-swipeable-wrap').length === 0;
+        return $(tabEl).parent('.tabs').parent('.tabs-animated-wrap, swiper-container.tabs').length === 0;
       }).eq(0);
@@ -132,0 +132,0 @@ $panelEl = vl.$el.parents('.panel').eq(0);

framework7-bundle.esm.js

 /**
- * Framework7 8.0.0-beta.4
+ * Framework7 8.0.0-beta.5
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 14, 2023
+ * Released on: March 23, 2023
  */
@@ -13,0 +13,0 @@

framework7-lite-bundle.esm.js

 /**
- * Framework7 8.0.0-beta.4
+ * Framework7 8.0.0-beta.5
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 14, 2023
+ * Released on: March 23, 2023
  */
@@ -13,0 +13,0 @@

framework7-lite.esm.js

 /**
- * Framework7 8.0.0-beta.4
+ * Framework7 8.0.0-beta.5
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 14, 2023
+ * Released on: March 23, 2023
  */
@@ -13,0 +13,0 @@

framework7.esm.js

 /**
- * Framework7 8.0.0-beta.4
+ * Framework7 8.0.0-beta.5
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 14, 2023
+ * Released on: March 23, 2023
  */
@@ -13,0 +13,0 @@

package.json

 {
   "name": "framework7",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
@@ -437,5 +437,5 @@ "type": "module",
     "ssr-window": "^4.0.2",
-    "swiper": "^9.0.3"
+    "swiper": "^9.1.1"
   },
-  "releaseDate": "March 14, 2023"
+  "releaseDate": "March 23, 2023"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14165355

increased by0.02%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

673

decreased by-0.44%

Lines of code

139022

decreased by-0.09%

Dependency changes

• Updatedswiper@^9.1.1