@xenknight/framework7 0.0.2

package/components/sheet/sheet-class.js

@@ -0,0 +1,673 @@
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, now, getTranslate } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+import { getDevice } from '../../shared/get-device.js';
+import Modal from '../modal/modal-class.js';
+class Sheet extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, app.params.sheet, params);
+
+    // Extends with open/close Modal methods;
+    super(app, extendedParams);
+    const sheet = this;
+    const window = getWindow();
+    const document = getDocument();
+    const support = getSupport();
+    const device = getDevice();
+    sheet.params = extendedParams;
+    if (typeof sheet.params.backdrop === 'undefined') {
+      sheet.params.backdrop = app.theme !== 'ios';
+    }
+
+    // Find Element
+    let $el;
+    if (!sheet.params.el) {
+      $el = $(sheet.params.content).filter(node => node.nodeType === 1).eq(0);
+    } else {
+      $el = $(sheet.params.el).eq(0);
+    }
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+    if ($el.length === 0) {
+      return sheet.destroy();
+    }
+    let $backdropEl;
+    if (sheet.params.backdrop && sheet.params.backdropEl) {
+      $backdropEl = $(sheet.params.backdropEl);
+    } else if (sheet.params.backdrop) {
+      if (sheet.params.backdropUnique) {
+        $backdropEl = $('<div class="sheet-backdrop sheet-backdrop-unique"></div>');
+        sheet.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = sheet.$containerEl.children('.sheet-backdrop');
+      }
+      if ($backdropEl.length === 0) {
+        $backdropEl = $('<div class="sheet-backdrop"></div>');
+        sheet.$containerEl.append($backdropEl);
+      }
+    }
+    extend(sheet, {
+      app,
+      push: $el.hasClass('sheet-modal-push') || sheet.params.push,
+      $el,
+      el: $el[0],
+      $backdropEl,
+      backdropEl: $backdropEl && $backdropEl[0],
+      type: 'sheet',
+      $htmlEl: $('html')
+    });
+    if (sheet.params.push) {
+      $el.addClass('sheet-modal-push');
+    }
+    let $pageContentEl;
+    function scrollToElementOnOpen() {
+      const $scrollEl = $(sheet.params.scrollToEl).eq(0);
+      if ($scrollEl.length === 0) return;
+      $pageContentEl = $scrollEl.parents('.page-content');
+      if ($pageContentEl.length === 0) return;
+      const paddingTop = parseInt($pageContentEl.css('padding-top'), 10);
+      const paddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
+      const pageHeight = $pageContentEl[0].offsetHeight - paddingTop - $el.height();
+      const pageScrollHeight = $pageContentEl[0].scrollHeight - paddingTop - $el.height();
+      const pageScroll = $pageContentEl.scrollTop();
+      let newPaddingBottom;
+      const scrollElTop = $scrollEl.offset().top - paddingTop + $scrollEl[0].offsetHeight;
+      if (scrollElTop > pageHeight) {
+        const scrollTop = pageScroll + scrollElTop - pageHeight;
+        if (scrollTop + pageHeight > pageScrollHeight) {
+          newPaddingBottom = scrollTop + pageHeight - pageScrollHeight + paddingBottom;
+          if (pageHeight === pageScrollHeight) {
+            newPaddingBottom = $el.height();
+          }
+          $pageContentEl.css({
+            'padding-bottom': `${newPaddingBottom}px`
+          });
+        }
+        $pageContentEl.scrollTop(scrollTop, 300);
+      }
+    }
+    function scrollToElementOnClose() {
+      if ($pageContentEl && $pageContentEl.length > 0) {
+        $pageContentEl.css({
+          'padding-bottom': ''
+        });
+      }
+    }
+    function handleClick(e) {
+      const target = e.target;
+      const $target = $(target);
+      const keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
+      if (keyboardOpened) return;
+      if ($target.closest(sheet.el).length === 0) {
+        if (sheet.params.closeByBackdropClick && sheet.params.backdrop && sheet.backdropEl && sheet.backdropEl === target) {
+          sheet.close();
+        } else if (sheet.params.closeByOutsideClick) {
+          sheet.close();
+        }
+      }
+    }
+    function onKeyDown(e) {
+      const keyCode = e.keyCode;
+      if (keyCode === 27 && sheet.params.closeOnEscape) {
+        sheet.close();
+      }
+    }
+    let pushOffset;
+    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;
+    let isScrolling;
+    let touchStartTime;
+    let touchesDiff;
+    let isMoved = false;
+    let isTopSheetModal;
+    let swipeStepTranslate;
+    let startTranslate;
+    let currentTranslate;
+    let sheetElOffsetHeight;
+    let minTranslate;
+    let maxTranslate;
+    let $pushViewEl;
+    let pushBorderRadius;
+    let sheetPageContentEl;
+    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 = {
+        x: e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX,
+        y: e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY
+      };
+      touchStartTime = now();
+      isScrolling = undefined;
+      isTopSheetModal = $el.hasClass('sheet-modal-top');
+      if (!sheet.params.swipeHandler && e.type === 'touchstart') {
+        sheetPageContentEl = $(e.target).closest('.page-content')[0];
+      }
+    }
+    function handleTouchMove(e) {
+      if (!isTouched || !e.isTrusted) return;
+      currentTouch = {
+        x: e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX,
+        y: e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY
+      };
+      if (typeof isScrolling === 'undefined') {
+        isScrolling = !!(isScrolling || Math.abs(currentTouch.x - startTouch.x) > Math.abs(currentTouch.y - startTouch.y));
+      }
+      if (isScrolling) {
+        isTouched = false;
+        isMoved = false;
+        return;
+      }
+      touchesDiff = startTouch.y - currentTouch.y;
+      const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
+      if (!isMoved) {
+        if (sheetPageContentEl && !$el.hasClass('modal-in-swipe-step')) {
+          sheetPageContentScrollTop = sheetPageContentEl.scrollTop;
+          sheetPageContentScrollHeight = sheetPageContentEl.scrollHeight;
+          sheetPageContentOffsetHeight = sheetPageContentEl.offsetHeight;
+          if (!(sheetPageContentScrollHeight === sheetPageContentOffsetHeight) && !(direction === 'to-bottom' && sheetPageContentScrollTop === 0) && !(direction === 'to-top' && sheetPageContentScrollTop === sheetPageContentScrollHeight - sheetPageContentOffsetHeight)) {
+            $el.transform('');
+            isTouched = false;
+            isMoved = false;
+            return;
+          }
+        }
+        if (sheet.push && pushOffset) {
+          $pushViewEl = app.$el.children('.view, .views');
+        }
+        sheetElOffsetHeight = $el[0].offsetHeight;
+        startTranslate = getTranslate($el[0], 'y');
+        if (isTopSheetModal) {
+          minTranslate = sheet.params.swipeToClose ? -sheetElOffsetHeight : -swipeStepTranslate;
+          maxTranslate = 0;
+        } else {
+          minTranslate = 0;
+          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 (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) {
+            progress = currentTranslate / swipeStepTranslate;
+          } else {
+            progress = 1 - (swipeStepTranslate - currentTranslate) / swipeStepTranslate;
+          }
+        }
+        progress = Math.abs(progress);
+        progress = Math.min(Math.max(progress, 0), 1);
+        const pushProgress = 1 - progress;
+        const scale = 1 - (1 - pushViewScale(pushOffset)) * pushProgress;
+        $pushViewEl.transition(0).forEach(el => {
+          el.style.setProperty('transform', `translate3d(0,0,0) scale(${scale})`, 'important');
+        });
+        if (sheet.params.swipeToStep) {
+          $pushViewEl.css('border-radius', `${pushBorderRadius * pushProgress}px`);
+        }
+      }
+      $el.transition(0).transform(`translate3d(0,${currentTranslate}px,0)`);
+      if (sheet.params.swipeToStep) {
+        let progress;
+        if (isTopSheetModal) {
+          progress = 1 - currentTranslate / swipeStepTranslate;
+        } else {
+          progress = (swipeStepTranslate - currentTranslate) / swipeStepTranslate;
+        }
+        progress = Math.min(Math.max(progress, 0), 1);
+        $el.trigger('sheet:stepprogress', progress);
+        sheet.emit('local::stepProgress sheetStepProgress', sheet, progress);
+      }
+    }
+    function handleTouchEnd() {
+      isTouched = false;
+      if (!isMoved) {
+        return;
+      }
+      isMoved = false;
+      $el.transform('').transition('');
+      if (sheet.push && pushOffset) {
+        $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 && !useBreakpoints) {
+        if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) {
+          return;
+        }
+        if (timeDiff < 300 && diff > 20 || timeDiff >= 300 && diff > sheetElOffsetHeight / 2) {
+          sheet.close();
+        }
+        return;
+      }
+      const openDirection = isTopSheetModal ? 'to-bottom' : 'to-top';
+      const closeDirection = isTopSheetModal ? 'to-top' : 'to-bottom';
+      const absCurrentTranslate = Math.abs(currentTranslate);
+      const absSwipeStepTranslate = Math.abs(swipeStepTranslate);
+      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');
+          $el.trigger('sheet:stepprogress', 1);
+          sheet.emit('local::stepProgress sheetStepProgress', sheet, 1);
+          sheet.emit('local::_swipeStep', false);
+          $el.trigger('sheet:stepopen');
+          sheet.emit('local::stepOpen sheetStepOpen', sheet);
+          if (sheet.push && pushOffset) {
+            sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
+            $pushViewEl.css('border-radius', '');
+          }
+        }
+        if (direction === closeDirection && absCurrentTranslate > absSwipeStepTranslate) {
+          // close sheet
+          if (sheet.params.swipeToClose) {
+            sheet.close();
+          } else {
+            // close step
+            $el.addClass('modal-in-swipe-step');
+            $el.trigger('sheet:stepprogress', 0);
+            sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+            sheet.emit('local::_swipeStep', true);
+            $el.trigger('sheet:stepclose');
+            sheet.emit('local::stepClose sheetStepClose', sheet);
+            if (sheet.push && pushOffset) {
+              sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
+              $pushViewEl.css('border-radius', '0px');
+            }
+          }
+        }
+        if (direction === closeDirection && absCurrentTranslate <= absSwipeStepTranslate) {
+          // close step
+          $el.addClass('modal-in-swipe-step');
+          $el.trigger('sheet:stepprogress', 0);
+          sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+          sheet.emit('local::_swipeStep', true);
+          $el.trigger('sheet:stepclose');
+          sheet.emit('local::stepClose sheetStepClose', sheet);
+          if (sheet.push && pushOffset) {
+            sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
+            $pushViewEl.css('border-radius', '0px');
+          }
+        }
+        return;
+      }
+      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) {
+            // open step
+            $el.removeClass('modal-in-swipe-step');
+            $el.trigger('sheet:stepprogress', 1);
+            sheet.emit('local::stepProgress sheetStepProgress', sheet, 1);
+            sheet.emit('local::_swipeStep', false);
+            $el.trigger('sheet:stepopen');
+            sheet.emit('local::stepOpen sheetStepOpen', sheet);
+            if (sheet.push && pushOffset) {
+              sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
+              $pushViewEl.css('border-radius', '');
+            }
+          } else if (absCurrentTranslate - absSwipeStepTranslate > (sheetElOffsetHeight - absSwipeStepTranslate) / 2) {
+            // close sheet
+            if (sheet.params.swipeToClose) sheet.close();
+          }
+        } else if (stepOpened) {
+          if (absCurrentTranslate > absSwipeStepTranslate + (sheetElOffsetHeight - absSwipeStepTranslate) / 2) {
+            // close sheet
+            if (sheet.params.swipeToClose) sheet.close();
+          } else if (absCurrentTranslate > absSwipeStepTranslate / 2) {
+            // close step
+            $el.addClass('modal-in-swipe-step');
+            $el.trigger('sheet:stepprogress', 0);
+            sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+            sheet.emit('local::_swipeStep', true);
+            $el.trigger('sheet:stepclose');
+            sheet.emit('local::stepClose sheetStepClose', sheet);
+            if (sheet.push && pushOffset) {
+              sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
+              $pushViewEl.css('border-radius', '0px');
+            }
+          }
+        }
+      }
+    }
+    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 {
+        swipeStepTranslate = $el[0].offsetHeight - ($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
+      }
+      $el[0].style.setProperty('--f7-sheet-swipe-step', `${swipeStepTranslate}px`);
+      if (!byResize) {
+        $el.addClass('modal-in-swipe-step');
+        sheet.emit('local::_swipeStep', true);
+      }
+    };
+    function onResize() {
+      if (useBreakpoints) {
+        setBreakpointsOnResize();
+      } else {
+        sheet.setSwipeStep(true);
+      }
+    }
+    const passive = support.passiveListener ? {
+      passive: true
+    } : false;
+    if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
+      $el.on(app.touchEvents.start, handleTouchStart, passive);
+      app.on('touchmove', handleTouchMove);
+      app.on('touchend:passive', handleTouchEnd);
+      sheet.once('sheetDestroy', () => {
+        $el.off(app.touchEvents.start, handleTouchStart, passive);
+        app.off('touchmove', handleTouchMove);
+        app.off('touchend:passive', handleTouchEnd);
+      });
+    }
+    sheet.on('open', () => {
+      if (sheet.params.closeOnEscape) {
+        $(document).on('keydown', onKeyDown);
+      }
+      $el.prevAll('.popup.modal-in').addClass('popup-behind');
+      app.on('resize', onResize);
+      if (sheet.params.scrollToEl) {
+        scrollToElementOnOpen();
+      }
+      if (sheet.push) {
+        pushOffset = parseInt($el.css('--f7-sheet-push-offset'), 10);
+        if (Number.isNaN(pushOffset)) pushOffset = 0;
+        if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
+        sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
+        $el.addClass('sheet-modal-push');
+        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 = 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) {
+        app.on('click', handleClick);
+      }
+    });
+    sheet.on('close', () => {
+      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);
+      if (sheet.params.closeOnEscape) {
+        $(document).off('keydown', onKeyDown);
+      }
+      if (sheet.params.scrollToEl) {
+        scrollToElementOnClose();
+      }
+      if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) {
+        app.off('click', handleClick);
+      }
+      $el.prevAll('.popup.modal-in').eq(0).removeClass('popup-behind');
+      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', () => {
+      if (sheet.push && pushOffset) {
+        sheet.$htmlEl.removeClass('with-modal-sheet-push-closing');
+        sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
+        sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-offset');
+      }
+    });
+    sheet.stepOpen = function stepOpen() {
+      $el.removeClass('modal-in-swipe-step');
+      sheet.emit('local::_swipeStep', false);
+      if (sheet.push) {
+        if (!pushOffset) {
+          pushOffset = parseInt($el.css('--f7-sheet-push-offset'), 10);
+          if (Number.isNaN(pushOffset)) pushOffset = 0;
+        }
+        if (pushOffset) {
+          sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
+        }
+      }
+    };
+    sheet.stepClose = function stepClose() {
+      $el.addClass('modal-in-swipe-step');
+      sheet.emit('local::_swipeStep', true);
+      if (sheet.push) {
+        sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
+      }
+    };
+    sheet.stepToggle = function stepToggle() {
+      $el.toggleClass('modal-in-swipe-step');
+      sheet.emit('local::_swipeStep', $el.hasClass('modal-in-swipe-step'));
+    };
+    $el[0].f7Modal = sheet;
+    return sheet;
+  }
+}
+export default Sheet;

package/components/sheet/sheet-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/sheet/sheet-md.less

@@ -0,0 +1,9 @@
+.md {
+  .sheet-modal {
+    .toolbar {
+      a.link:not(.tab-link) {
+        flex-shrink: 0;
+      }
+    }
+  }
+}