framework7 8.2.0 → 8.3.1

package/components/sheet/sheet-class.js

@@ -120,6 +120,7 @@ class Sheet extends Modal {
     function pushViewScale(offset) {
       return (app.height - offset * 2) / app.height;
     }
+    const useBreakpoints = sheet.params.breakpoints && sheet.params.breakpoints.length > 0;
     let isTouched = false;
     let startTouch;
     let currentTouch;
@@ -140,11 +141,15 @@ class Sheet extends Modal {
     let sheetPageContentScrollTop;
     let sheetPageContentScrollHeight;
     let sheetPageContentOffsetHeight;
+    let breakpointsTranslate = [];
+    let currentBreakpointIndex;
+    let backdropBreakpointSet = true;
     function handleTouchStart(e) {
       if (isTouched || !(sheet.params.swipeToClose || sheet.params.swipeToStep) || !e.isTrusted) return;
       if (sheet.params.swipeHandler && $(e.target).closest(sheet.params.swipeHandler).length === 0) {
         return;
       }
+      if ($(e.target).closest('.sortable-handler').length > 0) return;
       isTouched = true;
       isMoved = false;
       startTouch = {
@@ -196,14 +201,23 @@ class Sheet extends Modal {
           maxTranslate = 0;
         } else {
           minTranslate = 0;
-          maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate;
+          maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : useBreakpoints ? breakpointsTranslate[0] : swipeStepTranslate;
         }
         isMoved = true;
       }
       currentTranslate = startTranslate - touchesDiff;
       currentTranslate = Math.min(Math.max(currentTranslate, minTranslate), maxTranslate);
       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;
         if (sheet.params.swipeToStep) {
           if (isTopSheetModal) {
@@ -244,14 +258,17 @@ class Sheet extends Modal {
       isMoved = false;
       $el.transform('').transition('');
       if (sheet.push && pushOffset) {
-        $pushViewEl.transition('').transform('');
-        $pushViewEl.css('border-radius', '');
+        $pushViewEl.transition('');
+        if (!useBreakpoints) {
+          $pushViewEl.transform('');
+          $pushViewEl.css('border-radius', '');
+        }
       }
       const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
       const diff = Math.abs(touchesDiff);
       if (diff === 0 || currentTranslate === startTranslate) return;
       const timeDiff = new Date().getTime() - touchStartTime;
-      if (!sheet.params.swipeToStep) {
+      if (!sheet.params.swipeToStep && !useBreakpoints) {
         if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) {
           return;
         }
@@ -264,7 +281,34 @@ class Sheet extends Modal {
       const closeDirection = isTopSheetModal ? 'to-top' : 'to-bottom';
       const absCurrentTranslate = Math.abs(currentTranslate);
       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) {
           // open step
           $el.removeClass('modal-in-swipe-step');
@@ -311,7 +355,26 @@ class Sheet extends Modal {
         }
         return;
       }
-      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');
         if (!stepOpened) {
           if (absCurrentTranslate < absSwipeStepTranslate / 2) {
@@ -350,12 +413,133 @@ class Sheet extends Modal {
         }
       }
     }
+    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) {
       if (byResize === void 0) {
         byResize = true;
       }
       const $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0);
       if (!$swipeStepEl.length) return;
+
+      // eslint-disable-next-line
       if ($el.hasClass('sheet-modal-top')) {
         swipeStepTranslate = -($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
       } else {
@@ -368,12 +552,16 @@ class Sheet extends Modal {
       }
     };
     function onResize() {
-      sheet.setSwipeStep(true);
+      if (useBreakpoints) {
+        setBreakpointsOnResize();
+      } else {
+        sheet.setSwipeStep(true);
+      }
     }
     const passive = support.passiveListener ? {
       passive: true
     } : false;
-    if (sheet.params.swipeToClose || sheet.params.swipeToStep) {
+    if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
@@ -388,10 +576,7 @@ class Sheet extends Modal {
         $(document).on('keydown', onKeyDown);
       }
       $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) {
         scrollToElementOnOpen();
       }
@@ -401,15 +586,23 @@ class Sheet extends Modal {
         if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
         sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
         $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);
+      }
     });
     sheet.on('opened', () => {
       if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) {
@@ -417,8 +610,9 @@ class Sheet extends Modal {
       }
     });
     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);
         app.off('resize', onResize);
       }
@@ -435,6 +629,10 @@ class Sheet extends Modal {
       if (sheet.push && pushOffset) {
         sheet.$htmlEl.removeClass('with-modal-sheet-push');
         sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+        if ($pushViewEl) {
+          $pushViewEl.transform('');
+          $pushViewEl.css('border-radius', '');
+        }
       }
     });
     sheet.on('closed', () => {

package/components/sheet/sheet-rtl.css

@@ -1 +1 @@
-:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-swipe-step,0),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;opacity:1;animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{animation:sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes sheet-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}
+:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-breakpoint,.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;opacity:1;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{opacity:0;animation:none}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}

package/components/sheet/sheet.css

@@ -1 +1 @@
-:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-swipe-step,0),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;opacity:1;animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{animation:sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes sheet-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}
+:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-breakpoint,.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;opacity:1;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{opacity:0;animation:none}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}

package/components/sheet/sheet.d.ts

@@ -13,6 +13,8 @@ export namespace Sheet {
     stepClose: (sheet: Sheet) => void;
     /** Event will be triggered on Sheet swipe step between step opened and closed state. As `progress` it receives step open progress number (from 0 to 1) */
     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 */
     open: (sheet: Sheet) => void;
     /** Event will be triggered when Sheet Modal completes its opening animation. As an argument event handler receives sheet instance */
@@ -49,8 +51,15 @@ export namespace Sheet {
     swipeToClose?: boolean;
     /** When enabled it will be possible to split opened sheet into two states: partially opened and fully opened that can be controlled with swipe (default false) */
     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) */
     push?: boolean;
     /** Element to mount modal to. (default app.el) */
@@ -87,8 +96,10 @@ export namespace Sheet {
     stepClose(): void;
     /** Toggle (open or close) sheet swipe step */
     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 */
     destroy(): void;
   }
@@ -127,6 +138,8 @@ export namespace Sheet {
       stepClose(el?: HTMLElement | CSSSelector): Sheet;
       /** toggle (open or close) Sheet swipe step */
       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;
     };
   }
   interface AppParams {
@@ -139,6 +152,8 @@ export namespace Sheet {
     sheetStepClose: (sheet: Sheet) => void;
     /** Event will be triggered on Sheet swipe step between step opened and closed state. As `progress` it receives step open progress number (from 0 to 1) */
     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 */
     sheetOpen: (sheet: Sheet) => void;
     /** Event will be triggered when Sheet Modal completes its opening animation. As an argument event handler receives sheet instance */

package/components/sheet/sheet.js

@@ -15,6 +15,9 @@ export default {
       closeOnEscape: false,
       swipeToClose: false,
       swipeToStep: false,
+      breakpoints: [],
+      backdropBreakpoint: 0,
+      pushBreakpoint: 0,
       swipeHandler: null,
       containerEl: null
     }
@@ -43,6 +46,11 @@ export default {
         const sheetInstance = app.sheet.get(sheet);
         if (sheetInstance && sheetInstance.stepToggle) return sheetInstance.stepToggle();
         return undefined;
+      },
+      setBreakpoint(sheet, breakpoint) {
+        const sheetInstance = app.sheet.get(sheet);
+        if (sheetInstance && sheetInstance.setBreakpoint) return sheetInstance.setBreakpoint(breakpoint);
+        return undefined;
       }
     });
   },

package/components/sheet/sheet.less

@@ -31,9 +31,10 @@
     display: block;
     transform: translate3d(0, 0, 0);
   }
-  &.modal-in-swipe-step {
+  &.modal-in-swipe-step,
+  &.modal-in-breakpoint {
     display: block;
-    transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
+    transform: translate3d(0, var(--f7-sheet-breakpoint, var(--f7-sheet-swipe-step, 0)), 0);
   }
   &.modal-out {
     transform: translate3d(0, 100%, 0);
@@ -141,9 +142,10 @@ html.with-modal-sheet-push-closing {
         height: 100%;
         background: rgba(255,255,255,0.1);
         z-index: 13000;
-        border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
         opacity: 1;
-        animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;
+        transition-duration: var(--f7-sheet-transition-duration);
+        transition-timing-function: var(--f7-sheet-transition-timing-function);
+        animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);
         animation-timing-function: var(--f7-sheet-transition-timing-function);
       }
     }
@@ -170,8 +172,8 @@ html.with-modal-sheet-push {
     .framework7-root > .views.dark,
     .framework7-root > .view.dark {
       &:after {
-        animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;
-        animation-timing-function: var(--f7-sheet-transition-timing-function);
+        opacity: 0;
+        animation: none;
       }
     }
   }
@@ -184,14 +186,6 @@ html.with-modal-sheet-push {
       opacity: 1;
     }
   }
-  @keyframes sheet-dark-push-overlay-fade-out {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
 });
 
 .if-ios-theme({

package/components/sortable/sortable-rtl.css

@@ -1 +1 @@
-.ios{--f7-sortable-handler-width:36px;--f7-sortable-sorting-item-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.6);--f7-sortable-handler-color:rgba(0, 0, 0, 0.22);--f7-sortable-sorting-item-bg-color:rgba(255, 255, 255, 0.8)}.ios .dark,.ios.dark{--f7-sortable-sorting-item-bg-color:rgba(50, 50, 50, 0.8);--f7-sortable-handler-color:rgba(255, 255, 255, 0.55)}.md{--f7-sortable-handler-width:42px;--f7-sortable-sorting-item-box-shadow:none}.md,.md .dark,.md [class*=color-]{--f7-sortable-handler-color:var(--f7-md-on-surface-variant);--f7-sortable-sorting-item-bg-color:var(--f7-md-surface-3)}.sortable .sortable-handler{width:var(--f7-sortable-handler-width);height:100%;position:absolute;top:0;z-index:10;opacity:0;pointer-events:none;cursor:move;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;left:var(--f7-safe-area-left)}.sortable .sortable-handler:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;transition-duration:.3s;transform:translateX(10px);color:var(--f7-sortable-handler-color);overflow:hidden;height:20px;width:18px}.sortable li.sorting{z-index:50;background:var(--f7-sortable-sorting-item-bg-color);transition-duration:0s;box-shadow:var(--f7-sortable-sorting-item-box-shadow)}.sortable li.sorting .item-inner:after{display:none!important}.sortable-opposite .sortable-handler{right:var(--f7-safe-area-left);left:auto}.sortable-opposite .sortable-handler:after{transform:translateX(-10px)}.sortable-opposite .item-content,.sortable-opposite.links-list li a,.sortable.simple-list li,.sortable:not(.sortable-opposite) .item-inner{transition-duration:.3s;transition-property:all}.sortable-sorting li{transition-duration:.3s}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler{pointer-events:auto;opacity:1}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after{transform:translateX(0px)}.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,.sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting)>a:before{display:none}.links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a,.no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),.sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,.sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner{padding-left:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a,.simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content{padding-right:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.ios .sortable-handler:after{content:'sort_ios'}.md .sortable-handler:after{content:'sort_md'}
+.ios{--f7-sortable-handler-width:36px;--f7-sortable-sorting-item-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.6);--f7-sortable-handler-color:rgba(0, 0, 0, 0.22);--f7-sortable-sorting-item-bg-color:rgba(255, 255, 255, 0.8)}.ios .dark,.ios.dark{--f7-sortable-sorting-item-bg-color:rgba(50, 50, 50, 0.8);--f7-sortable-handler-color:rgba(255, 255, 255, 0.55)}.md{--f7-sortable-handler-width:42px;--f7-sortable-sorting-item-box-shadow:none}.md,.md .dark,.md [class*=color-]{--f7-sortable-handler-color:var(--f7-md-on-surface-variant);--f7-sortable-sorting-item-bg-color:var(--f7-md-surface-3)}.sortable .sortable-handler{width:var(--f7-sortable-handler-width);height:100%;position:absolute;top:0;z-index:10;opacity:0;pointer-events:none;cursor:move;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;left:var(--f7-safe-area-left)}.sortable .sortable-handler:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;transition-duration:.3s;transform:translateX(10px);color:var(--f7-sortable-handler-color);overflow:hidden;height:20px;width:18px}.sortable li.sorting{z-index:50;background:var(--f7-sortable-sorting-item-bg-color);transition-duration:0s;box-shadow:var(--f7-sortable-sorting-item-box-shadow)}.sortable li.sorting .item-inner:after{display:none!important}.sortable-opposite .sortable-handler{right:var(--f7-safe-area-left);left:auto}.sortable-opposite .sortable-handler:after{transform:translateX(-10px)}.sortable-opposite .item-content,.sortable-opposite.links-list li a,.sortable.simple-list li,.sortable:not(.sortable-opposite) .item-inner{transition-duration:.3s;transition-property:all}.sortable-sorting li{transition-duration:.3s}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler{pointer-events:auto;touch-action:none;opacity:1}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after{transform:translateX(0px)}.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,.sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting)>a:before{display:none}.links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a,.no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),.sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,.sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner{padding-left:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a,.simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content{padding-right:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.ios .sortable-handler:after{content:'sort_ios'}.md .sortable-handler:after{content:'sort_md'}

package/components/sortable/sortable.css

@@ -1 +1 @@
-.ios{--f7-sortable-handler-width:36px;--f7-sortable-sorting-item-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.6);--f7-sortable-handler-color:rgba(0, 0, 0, 0.22);--f7-sortable-sorting-item-bg-color:rgba(255, 255, 255, 0.8)}.ios .dark,.ios.dark{--f7-sortable-sorting-item-bg-color:rgba(50, 50, 50, 0.8);--f7-sortable-handler-color:rgba(255, 255, 255, 0.55)}.md{--f7-sortable-handler-width:42px;--f7-sortable-sorting-item-box-shadow:none}.md,.md .dark,.md [class*=color-]{--f7-sortable-handler-color:var(--f7-md-on-surface-variant);--f7-sortable-sorting-item-bg-color:var(--f7-md-surface-3)}.sortable .sortable-handler{width:var(--f7-sortable-handler-width);height:100%;position:absolute;top:0;z-index:10;opacity:0;pointer-events:none;cursor:move;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;right:var(--f7-safe-area-right)}.sortable .sortable-handler:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;transition-duration:.3s;transform:translateX(10px);color:var(--f7-sortable-handler-color);overflow:hidden;height:20px;width:18px}.sortable li.sorting{z-index:50;background:var(--f7-sortable-sorting-item-bg-color);transition-duration:0s;box-shadow:var(--f7-sortable-sorting-item-box-shadow)}.sortable li.sorting .item-inner:after{display:none!important}.sortable-opposite .sortable-handler{left:var(--f7-safe-area-right);right:auto}.sortable-opposite .sortable-handler:after{transform:translateX(-10px)}.sortable-opposite .item-content,.sortable-opposite.links-list li a,.sortable.simple-list li,.sortable:not(.sortable-opposite) .item-inner{transition-duration:.3s;transition-property:all}.sortable-sorting li{transition-duration:.3s}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler{pointer-events:auto;opacity:1}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after{transform:translateX(0px)}.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,.sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting)>a:before{display:none}.links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a,.no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),.sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,.sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner{padding-right:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a,.simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content{padding-left:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.ios .sortable-handler:after{content:'sort_ios'}.md .sortable-handler:after{content:'sort_md'}
+.ios{--f7-sortable-handler-width:36px;--f7-sortable-sorting-item-box-shadow:0px 2px 8px rgba(0, 0, 0, 0.6);--f7-sortable-handler-color:rgba(0, 0, 0, 0.22);--f7-sortable-sorting-item-bg-color:rgba(255, 255, 255, 0.8)}.ios .dark,.ios.dark{--f7-sortable-sorting-item-bg-color:rgba(50, 50, 50, 0.8);--f7-sortable-handler-color:rgba(255, 255, 255, 0.55)}.md{--f7-sortable-handler-width:42px;--f7-sortable-sorting-item-box-shadow:none}.md,.md .dark,.md [class*=color-]{--f7-sortable-handler-color:var(--f7-md-on-surface-variant);--f7-sortable-sorting-item-bg-color:var(--f7-md-surface-3)}.sortable .sortable-handler{width:var(--f7-sortable-handler-width);height:100%;position:absolute;top:0;z-index:10;opacity:0;pointer-events:none;cursor:move;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;right:var(--f7-safe-area-right)}.sortable .sortable-handler:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;transition-duration:.3s;transform:translateX(10px);color:var(--f7-sortable-handler-color);overflow:hidden;height:20px;width:18px}.sortable li.sorting{z-index:50;background:var(--f7-sortable-sorting-item-bg-color);transition-duration:0s;box-shadow:var(--f7-sortable-sorting-item-box-shadow)}.sortable li.sorting .item-inner:after{display:none!important}.sortable-opposite .sortable-handler{left:var(--f7-safe-area-right);right:auto}.sortable-opposite .sortable-handler:after{transform:translateX(-10px)}.sortable-opposite .item-content,.sortable-opposite.links-list li a,.sortable.simple-list li,.sortable:not(.sortable-opposite) .item-inner{transition-duration:.3s;transition-property:all}.sortable-sorting li{transition-duration:.3s}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler{pointer-events:auto;touch-action:none;opacity:1}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after{transform:translateX(0px)}.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,.sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting)>a:before{display:none}.links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a,.no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),.sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,.sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner{padding-right:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a,.simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content{padding-left:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.ios .sortable-handler:after{content:'sort_ios'}.md .sortable-handler:after{content:'sort_md'}

package/components/sortable/sortable.less

@@ -70,6 +70,7 @@
 .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) {
   .sortable-handler {
     pointer-events: auto;
+    touch-action: none;
     opacity: 1;
     &:after {
       transform: translateX(0px);