chore: finalize sheet breakpoints

Author: nolimits4web

src/core/components/sheet/sheet-class.js

@@ -605,8 +605,8 @@ class Sheet extends Modal {
         }
         setBackdropBreakpoint(value);
         setPushBreakpoint(value);
-        $el.trigger('sheet:breakpoint', index);
-        sheet.emit('local::breakpoint sheetBreakpoint', sheet, index);
+        $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');
@@ -688,9 +688,7 @@ class Sheet extends Modal {
           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');
         }
       }
@@ -727,8 +725,10 @@ class Sheet extends Modal {
       if (sheet.push && pushOffset) {
         sheet.$htmlEl.removeClass('with-modal-sheet-push');
         sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
-        $pushViewEl.transform('');
-        $pushViewEl.css('border-radius', '');
+        if ($pushViewEl) {
+          $pushViewEl.transform('');
+          $pushViewEl.css('border-radius', '');
+        }
       }
     });
     sheet.on('closed', () => {

src/core/components/sheet/sheet.d.ts

@@ -53,9 +53,9 @@ export namespace Sheet {
     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`  */
+    /** 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`  */
+    /** 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;

src/core/components/sheet/sheet.js

@@ -17,8 +17,8 @@ export default {
       swipeToClose: false,
       swipeToStep: false,
       breakpoints: [],
-      backdropBreakpoint: null,
-      pushBreakpoint: null,
+      backdropBreakpoint: 0,
+      pushBreakpoint: 0,
       swipeHandler: null,
       containerEl: null,
     },

src/core/components/sheet/sheet.less

@@ -142,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);
       }
     }
@@ -171,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;
       }
     }
   }
@@ -185,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({

src/svelte/components/sheet.svelte

@@ -39,6 +39,7 @@
     isOpened: opened,
     isClosing: false,
     swipeStep: false,
+    breakpoint: false,
   };
 
   export function instance() {
@@ -59,6 +60,7 @@
     {
       'sheet-modal-push': push,
       'modal-in-swipe-step': state.swipeStep,
+      'modal-in-breakpoint': state.breakpoint,
     },
 
     modalStateClasses(state),
@@ -127,7 +129,14 @@
         stepOpen: onStepOpen,
         stepClose: onStepClose,
         stepProgress: onStepProgress,
-        breakpoint: onBreakpoint,
+        breakpoint: (s, value) => {
+          if (value > 0 && value < 1) {
+            state.breakpoint = true;
+          } else {
+            state.breakpoint = false;
+          }
+          onBreakpoint(s, value);
+        },
         // eslint-disable-next-line
         _swipeStep(isSwipeStep) {
           state.swipeStep = isSwipeStep;