framework7 - npm Package Compare versions

Comparing version 8.2.0 to 8.3.0

components/popup/popup-class.js

@@ -114,2 +114,3 @@ import { getWindow, getDocument } from 'ssr-window';
       }
+      if ($(e.target).closest('.sortable-handler').length > 0) return;
       isTouched = true;
@@ -116,0 +117,0 @@ isMoved = false;

components/sheet/sheet-class.js

@@ -123,2 +123,3 @@ import { getWindow, getDocument } from 'ssr-window';
     }
+    const useBreakpoints = sheet.params.breakpoints && sheet.params.breakpoints.length > 0;
     let isTouched = false;
@@ -144,2 +145,5 @@ let startTouch;
     let sheetPageContentOffsetHeight;
+    let breakpointsTranslate = [];
+    let currentBreakpointIndex;
+    let backdropBreakpointSet = true;
     function handleTouchStart(e) {
@@ -150,2 +154,3 @@ if (isTouched || !(sheet.params.swipeToClose || sheet.params.swipeToStep) || !e.isTrusted) return;
       }
+      if ($(e.target).closest('.sortable-handler').length > 0) return;
       isTouched = true;
@@ -202,3 +207,3 @@ isMoved = false;
           minTranslate = 0;
-          maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate;
+          maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : useBreakpoints ? breakpointsTranslate[0] : swipeStepTranslate;
         }
@@ -210,3 +215,12 @@ isMoved = true;
       e.preventDefault();
-      if (sheet.push && pushOffset) {
+      if (useBreakpoints) {
+        let progress = isTopSheetModal ? 1 + currentTranslate / sheetElOffsetHeight : 1 - currentTranslate / sheetElOffsetHeight;
+        progress = Math.abs(progress);
+        progress = Math.min(Math.max(progress, 0), 1);
+        // eslint-disable-next-line
+        setBackdropBreakpoint(progress);
+        // eslint-disable-next-line
+        setPushBreakpoint(progress);
+      }
+      if (sheet.push && pushOffset && !useBreakpoints) {
         let progress = (currentTranslate - startTranslate) / sheetElOffsetHeight;
@@ -252,4 +266,7 @@ if (sheet.params.swipeToStep) {
       if (sheet.push && pushOffset) {
-        $pushViewEl.transition('').transform('');
-        $pushViewEl.css('border-radius', '');
+        $pushViewEl.transition('');
+        if (!useBreakpoints) {
+          $pushViewEl.transform('');
+          $pushViewEl.css('border-radius', '');
+        }
       }
@@ -260,3 +277,3 @@ const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
       const timeDiff = new Date().getTime() - touchStartTime;
-      if (!sheet.params.swipeToStep) {
+      if (!sheet.params.swipeToStep && !useBreakpoints) {
         if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) {
@@ -274,3 +291,30 @@ return;
       const absSwipeStepTranslate = Math.abs(swipeStepTranslate);
-      if (timeDiff < 300 && diff > 10) {
+      if (timeDiff < 300 && diff > 10 && useBreakpoints) {
+        // SHORT SWIPES BREAKPOINTS
+        if (direction === openDirection && typeof currentBreakpointIndex !== 'undefined') {
+          if (currentBreakpointIndex === params.breakpoints.length - 1) {
+            // open
+            sheet.setBreakpoint(1);
+          } else {
+            // move to next breakpoint
+            currentBreakpointIndex = Math.min(breakpointsTranslate.length - 1, currentBreakpointIndex + 1);
+            sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+          }
+        }
+        if (direction === closeDirection) {
+          if (currentBreakpointIndex === 0) {
+            // close
+            sheet.close();
+          } else {
+            // move to prev breakpoint
+            if (typeof currentBreakpointIndex === 'undefined') {
+              currentBreakpointIndex = params.breakpoints.length - 1;
+            } else {
+              currentBreakpointIndex = Math.max(0, currentBreakpointIndex - 1);
+            }
+            sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+          }
+        }
+      } else if (timeDiff < 300 && diff > 10) {
+        // SHORT SWIPES SWIPE STEP
         if (direction === openDirection && absCurrentTranslate < absSwipeStepTranslate) {
@@ -322,3 +366,22 @@ // open step
       }
-      if (timeDiff >= 300) {
+      if (timeDiff >= 300 && useBreakpoints) {
+        // LONG SWIPES BREAKPOINTS
+        const allBreakpoints = [sheetElOffsetHeight, ...breakpointsTranslate, 0];
+        const closestTranslate = allBreakpoints.reduce((prev, curr) => {
+          return Math.abs(curr - currentTranslate) < Math.abs(prev - currentTranslate) ? curr : prev;
+        });
+        const closestIndex = allBreakpoints.indexOf(closestTranslate);
+        if (closestTranslate === 0) {
+          // open
+          sheet.setBreakpoint(1);
+        } else if (closestIndex === 0) {
+          // close
+          sheet.close();
+        } else {
+          // set bp
+          currentBreakpointIndex = closestIndex - 1;
+          sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+        }
+      } else if (timeDiff >= 300) {
+        // LONG SWIPES SWIPE STEP
         const stepOpened = !$el.hasClass('modal-in-swipe-step');
@@ -362,2 +425,121 @@ if (!stepOpened) {
     }
+    const setPushBreakpoint = breakpoint => {
+      const {
+        pushBreakpoint
+      } = params;
+      if (pushBreakpoint === null || typeof pushBreakpoint === 'undefined' || !sheet.push || !pushOffset) return;
+      if (breakpoint >= pushBreakpoint) {
+        sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+        $pushViewEl.transition('').forEach(el => {
+          el.style.setProperty('transform', `translate3d(0,0,0) scale(${pushViewScale(pushOffset)})`, 'important');
+        });
+        $pushViewEl.css('border-radius', `${pushBorderRadius * 1}px`);
+      } else {
+        const pushBreakpoints = [0, ...params.breakpoints, 1];
+        const pushTransparentBreakpoint = pushBreakpoints[pushBreakpoints.indexOf(pushBreakpoint) - 1];
+        if (breakpoint <= pushTransparentBreakpoint) {
+          $pushViewEl.transition('').css('transform', '');
+          $pushViewEl.css('border-radius', '');
+          sheet.$htmlEl.removeClass('with-modal-sheet-push');
+          if (breakpoint === pushTransparentBreakpoint) {
+            sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+          }
+        } else {
+          const progress = (breakpoint - pushTransparentBreakpoint) / (pushBreakpoint - pushTransparentBreakpoint);
+          sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+          $pushViewEl.transition(0).forEach(el => {
+            el.style.setProperty('transform', `translate3d(0,0,0) scale(${1 - (1 - pushViewScale(pushOffset)) * progress})`, 'important');
+          });
+          $pushViewEl.css('border-radius', `${pushBorderRadius * progress}px`);
+        }
+      }
+    };
+    const setBackdropBreakpoint = breakpoint => {
+      const {
+        backdrop,
+        backdropBreakpoint
+      } = params;
+      if (!backdropBreakpoint || !backdrop || !$backdropEl.length) return;
+      if (breakpoint >= backdropBreakpoint) {
+        if (!backdropBreakpointSet) {
+          $backdropEl.transition('').css({
+            opacity: '',
+            pointerEvents: ''
+          });
+        }
+        backdropBreakpointSet = true;
+      } else {
+        const backdropBreakpoints = [0, ...params.breakpoints, 1];
+        const backdropTransparentBreakpoint = backdropBreakpoints[backdropBreakpoints.indexOf(backdropBreakpoint) - 1];
+        if (breakpoint <= backdropTransparentBreakpoint) {
+          if (backdropBreakpointSet) {
+            $backdropEl.transition('').css({
+              opacity: 0,
+              pointerEvents: 'none'
+            });
+          }
+          backdropBreakpointSet = false;
+        } else {
+          const progress = (breakpoint - backdropTransparentBreakpoint) / (backdropBreakpoint - backdropTransparentBreakpoint);
+          $backdropEl.transition(0).css({
+            opacity: progress,
+            pointerEvents: 'auto'
+          });
+        }
+      }
+    };
+    sheet.calcBreakpoints = () => {
+      if (!useBreakpoints) {
+        return;
+      }
+      const fullSize = $el[0].offsetHeight;
+      // eslint-disable-next-line
+      const isTopSheetModal = $el.hasClass('sheet-modal-top');
+      breakpointsTranslate = [];
+      sheet.params.breakpoints.forEach(ratio => {
+        breakpointsTranslate.push((fullSize - fullSize * ratio) * (isTopSheetModal ? -1 : 1));
+      });
+    };
+    sheet.setBreakpoint = value => {
+      if (!useBreakpoints) {
+        return sheet;
+      }
+      if (value === 1) {
+        // open
+        if (!sheet.opened) {
+          sheet.open();
+        }
+        $el.removeClass('modal-in-breakpoint');
+        currentBreakpointIndex = undefined;
+        setBackdropBreakpoint(value);
+        setPushBreakpoint(value);
+        $el.trigger('sheet:breakpoint', value);
+        sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+      } else if (value === 0) {
+        // close
+        $el.trigger('sheet:breakpoint', value);
+        sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+        sheet.close();
+      } else {
+        const index = params.breakpoints.indexOf(value);
+        if (index < 0) return sheet;
+        if (!sheet.opened) {
+          sheet.open();
+        }
+        setBackdropBreakpoint(value);
+        setPushBreakpoint(value);
+        $el.trigger('sheet:breakpoint', value);
+        sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+        currentBreakpointIndex = index;
+        $el[0].style.setProperty('--f7-sheet-breakpoint', `${breakpointsTranslate[index]}px`);
+        $el.addClass('modal-in-breakpoint');
+      }
+      return sheet;
+    };
+    const setBreakpointsOnResize = () => {
+      sheet.calcBreakpoints();
+      if (typeof currentBreakpointIndex !== 'undefined') {
+        sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+      }
+    };
     sheet.setSwipeStep = function setSwipeStep(byResize) {
@@ -369,2 +551,4 @@ if (byResize === void 0) {
       if (!$swipeStepEl.length) return;
+
+      // eslint-disable-next-line
       if ($el.hasClass('sheet-modal-top')) {
@@ -382,3 +566,7 @@ swipeStepTranslate = -($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
     function onResize() {
-      sheet.setSwipeStep(true);
+      if (useBreakpoints) {
+        setBreakpointsOnResize();
+      } else {
+        sheet.setSwipeStep(true);
+      }
     }
@@ -388,3 +576,3 @@ const passive = support.passiveListener ? {
     } : false;
-    if (sheet.params.swipeToClose || sheet.params.swipeToStep) {
+    if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
@@ -404,6 +592,3 @@ app.on('touchmove', handleTouchMove);
       $el.prevAll('.popup.modal-in').addClass('popup-behind');
-      if (sheet.params.swipeToStep) {
-        sheet.setSwipeStep(false);
-        app.on('resize', onResize);
-      }
+      app.on('resize', onResize);
       if (sheet.params.scrollToEl) {
@@ -418,11 +603,19 @@ scrollToElementOnOpen();
         $el.addClass('sheet-modal-push');
-        sheet.$htmlEl.addClass('with-modal-sheet-push');
-        if (!sheet.params.swipeToStep) {
+        if (!useBreakpoints) {
+          sheet.$htmlEl.addClass('with-modal-sheet-push');
+        }
+        if (!sheet.params.swipeToStep && !useBreakpoints) {
           sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
         } else {
           $pushViewEl = app.$el.children('.view, .views');
-          pushBorderRadius = parseFloat($el.css(`border-${isTopSheetModal ? 'bottom' : 'top'}-left-radius`));
+          pushBorderRadius = app.theme === 'ios' ? 10 : 16;
           $pushViewEl.css('border-radius', '0px');
         }
       }
+      if (useBreakpoints) {
+        sheet.calcBreakpoints();
+        sheet.setBreakpoint(params.breakpoints[0]);
+      } else if (sheet.params.swipeToStep) {
+        sheet.setSwipeStep(false);
+      }
     });
@@ -435,4 +628,5 @@ sheet.on('opened', () => {
     sheet.on('close', () => {
-      if (sheet.params.swipeToStep) {
-        $el.removeClass('modal-in-swipe-step');
+      currentBreakpointIndex = undefined;
+      if (sheet.params.swipeToStep || useBreakpoints) {
+        $el.removeClass('modal-in-swipe-step modal-in-breakpoint');
         sheet.emit('local::_swipeStep', false);
@@ -454,2 +648,6 @@ app.off('resize', onResize);
         sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+        if ($pushViewEl) {
+          $pushViewEl.transform('');
+          $pushViewEl.css('border-radius', '');
+        }
       }
@@ -456,0 +654,0 @@ });

components/sheet/sheet.d.ts

@@ -16,2 +16,4 @@ import { Dom7Array } from 'dom7';
     stepProgress: (sheet: Sheet, progress: number) => void;
+    /** Event will be triggered on Sheet breakpoint change */
+    breakpoint: (sheet: Sheet, breakpoint: number) => void;
     /** Event will be triggered when Sheet Modal starts its opening animation. As an argument event handler receives sheet instance */
@@ -53,4 +55,11 @@ open: (sheet: Sheet) => void;
     swipeToStep?: boolean;
+    /** Use instead of swipeToStep to enable swipe breakpoints. Must be an array of numbers > 0 and < 1, where 0 is fully closed and 1 is fully opened, e.g. [0.33, 0.66], [0.5], etc. */
+    breakpoints?: number[];
+    /** Defines breakpoint when backdrop becomes visible. Number from `0` (ideally from the lowest (first) value of `breakpoints` array) to `1`  (default 0) */
+    backdropBreakpoint?: number;
+    /** Defines breakpoint when to push back the view behind (`push` must be enabled). Number from `0` (ideally from the lowest (first) value of `breakpoints` array) to `1` (default 0)  */
+    pushBreakpoint?: number;
     /** When enabled it will be possible to close sheet with swipe only on specified handler element (default null) */
     swipeHandler?: HTMLElement | CSSSelector;
+
     /** When enabled it will push view behind on open. Works only when top safe area is in place. It can also be enabled by adding `sheet-modal-push` class to Sheet element. (default false) */
@@ -92,4 +101,6 @@ push?: boolean;
     stepToggle(): void;
-    /** Update step position. Required to call after content of sheet modal has been modified manually when it is opened */
+    /** Update (recalculate) breakpoints positions. Required to call after content of sheet modal has been modified manually when it is opened */
     setSwipeStep(): void;
+    /** Set/open sheet modal on specific breakpoint (from `breakpoints` array parameter). Also passing `0` will close sheet modal, passing `1` will fully open it */
+    setBreakpoint(breakpoint: number): Sheet;
     /** Destroy sheet */
@@ -133,2 +144,4 @@ destroy(): void;
       stepToggle(el?: HTMLElement | CSSSelector): Sheet;
+      /** Set/open sheet modal on specific breakpoint (from `breakpoints` array parameter). Also passing `0` will close sheet modal, passing `1` will fully open it */
+      setBreakpoint(el?: HTMLElement | CSSSelector, breakpoint: number): Sheet;
     };
@@ -146,2 +159,4 @@ }
     sheetStepProgress: (sheet: Sheet, progress: number) => void;
+    /** Event will be triggered on Sheet breakpoint change */
+    sheetBreakpoint: (sheet: Sheet, breakpoint: number) => void;
     /** Event will be triggered when Sheet Modal starts its opening animation. As an argument event handler receives sheet instance */
@@ -148,0 +163,0 @@ sheetOpen: (sheet: Sheet) => void;

components/sheet/sheet.js

@@ -18,2 +18,5 @@ import $ from '../../shared/dom7.js';
       swipeToStep: false,
+      breakpoints: [],
+      backdropBreakpoint: 0,
+      pushBreakpoint: 0,
       swipeHandler: null,
@@ -47,2 +50,7 @@ containerEl: null
         return undefined;
+      },
+      setBreakpoint(sheet, breakpoint) {
+        const sheetInstance = app.sheet.get(sheet);
+        if (sheetInstance && sheetInstance.setBreakpoint) return sheetInstance.setBreakpoint(breakpoint);
+        return undefined;
       }
@@ -49,0 +57,0 @@ });

framework7-bundle.esm.js

 /**
- * Framework7 8.2.0
+ * Framework7 8.3.0
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: July 6, 2023
+ * Released on: August 18, 2023
  */
@@ -13,0 +13,0 @@

framework7-lite-bundle.esm.js

 /**
- * Framework7 8.2.0
+ * Framework7 8.3.0
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: July 6, 2023
+ * Released on: August 18, 2023
  */
@@ -13,0 +13,0 @@

framework7-lite.esm.js

 /**
- * Framework7 8.2.0
+ * Framework7 8.3.0
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: July 6, 2023
+ * Released on: August 18, 2023
  */
@@ -13,0 +13,0 @@

framework7.esm.js

 /**
- * Framework7 8.2.0
+ * Framework7 8.3.0
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: July 6, 2023
+ * Released on: August 18, 2023
  */
@@ -13,0 +13,0 @@

modules/clicks/clicks.js

@@ -64,3 +64,3 @@ import { getWindow } from 'ssr-window';
         view = $clickedEl.parents('.view')[0] && $clickedEl.parents('.view')[0].f7View;
-        if (!$clickedLinkEl.hasClass('back') && view && view.params.linksView) {
+        if (view && view.params.linksView && (!$clickedLinkEl.hasClass('back') || $clickedLinkEl.hasClass('back') && view.router.history.length === 1)) {
           if (typeof view.params.linksView === 'string') view = $(view.params.linksView)[0].f7View;else if (view.params.linksView instanceof ViewClass) view = view.params.linksView;
@@ -67,0 +67,0 @@ }

modules/router/component-loader.js

@@ -19,12 +19,50 @@ import { merge } from '../../shared/utils.js';
       };
+      const component = (props, ctx) => {
+        const {
+          $h,
+          $onMounted,
+          $el,
+          $f7
+        } = ctx;
+        $onMounted(() => {
+          const viewEl = $el.value.find('.view');
+          const view = $f7.view.create(viewEl, {
+            linksView: router.view.selector,
+            ignoreOpenIn: true,
+            loadInitialPage: false
+          });
+          view.router.navigate(url, {
+            props: options.props,
+            reloadAll: true
+          });
+        });
+        // eslint-disable-next-line
+        return () => {
+          if (options.openIn === 'popup') {
+            return $h`<div class="popup popup-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+          }
+          if (options.openIn === 'loginScreen') {
+            return $h`<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+          }
+          if (options.openIn === 'sheet') {
+            return $h`<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view"></div></div></div>`;
+          }
+          if (options.openIn === 'popover') {
+            return $h`<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view"></div></div></div>`;
+          }
+          if (options.openIn.indexOf('panel') >= 0) {
+            const parts = options.openIn.split(':');
+            const side = parts[1] || 'left';
+            const effect = parts[2] || 'cover';
+            return $h`<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view"></div></div>`;
+          }
+        };
+      };
       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;
@@ -34,13 +72,9 @@ }
         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;
       }
+      params.component = component;
       return router.navigate(navigateOptions);
@@ -47,0 +81,0 @@ },

package.json

 {
   "name": "framework7",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
@@ -437,5 +437,5 @@ "type": "module",
     "ssr-window": "^4.0.2",
-    "swiper": "^10.0.3"
+    "swiper": "^10.2.0"
   },
-  "releaseDate": "July 6, 2023"
+  "releaseDate": "August 18, 2023"
 }

New alerts

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

14375085

increased by0.56%

Number of package files

676

increased by0.45%

Lines of code

143135

increased by0.47%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedswiper@^10.2.0