@xenknight/framework7 0.0.5 → 0.0.7

package/components/swipeout/swipeout.js

@@ -1,7 +1,6 @@
 import { getDocument } from 'ssr-window';
 import $ from '../../shared/dom7.js';
 import { nextFrame, bindMethods } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 const Swipeout = {
   init() {
     const app = this;
@@ -46,12 +45,16 @@ const Swipeout = {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
       }
       if (isScrolling) {
+        $swipeoutEl.removeClass('swipeout-active');
         isTouched = false;
         return;
       }
       if (!isMoved) {
         if ($('.list.sortable-opened').length > 0) return;
         $swipeoutContent = $swipeoutEl.find('.swipeout-content');
+        if (!app.params.swipeout.noFollow) {
+          $swipeoutEl.addClass('swipeout-active');
+        }
         $actionsRight = $swipeoutEl.find('.swipeout-actions-right');
         $actionsLeft = $swipeoutEl.find('.swipeout-actions-left');
         actionsLeftWidth = null;
@@ -91,6 +94,7 @@ const Swipeout = {
       }
       if (translate > 0 && $actionsLeft.length === 0 || translate < 0 && $actionsRight.length === 0) {
         if (!opened) {
+          $swipeoutEl.removeClass('swipeout-active');
           isTouched = false;
           isMoved = false;
           $swipeoutContent.transform('');
@@ -151,11 +155,24 @@ const Swipeout = {
           if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
           }
+          if (typeof buttonEl.f7SwipeoutButtonWidth === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
+          }
           buttonOffset = buttonEl.f7SwipeoutButtonOffset;
+          const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
           if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') {
-            $buttonEl.css({
-              left: `${overswipeRight ? -buttonOffset : 0}px`
-            });
+            if (app.theme === 'ios') {
+              const newWidth = overswipeRight ? buttonWidth + buttonOffset - 8 : buttonWidth;
+              const diff = newWidth - buttonWidth;
+              $buttonEl.css({
+                width: `${newWidth}px`,
+                marginLeft: overswipeRight ? `${-diff}px` : '0px'
+              });
+            } else {
+              $buttonEl.css({
+                left: `${overswipeRight ? -buttonOffset : 0}px`
+              });
+            }
             if (overswipeRight) {
               if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
                 $swipeoutEl.trigger('swipeout:overswipeenter');
@@ -170,7 +187,15 @@ const Swipeout = {
               $buttonEl.removeClass('swipeout-overswipe-active');
             }
           }
-          $buttonEl.transform(`translate3d(${buttonTranslate - buttonOffset * (1 + Math.max(progress, -1))}px,0,0)`);
+          if (app.theme === 'ios') {
+            const buttonEndPos = actionsRightWidth - buttonOffset;
+            const buttonStartPos = actionsRightWidth - buttonOffset - buttonWidth;
+            let buttonProgress = (-buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
+            buttonProgress = Math.max(Math.min(buttonProgress, 1), 0);
+            $buttonEl.transform(`scale(${buttonProgress})`);
+          } else {
+            $buttonEl.transform(`translate3d(${buttonTranslate - buttonOffset * (1 + Math.max(progress, -1))}px,0,0)`);
+          }
         });
       }
       if ($actionsLeft.length > 0) {
@@ -191,14 +216,27 @@ const Swipeout = {
         }
         $leftButtons.each((buttonEl, index) => {
           const $buttonEl = $(buttonEl);
+          if (typeof buttonEl.f7SwipeoutButtonWidth === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
+          }
           if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
-            $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
+            $buttonEl[0].f7SwipeoutButtonOffset = app.theme === 'ios' ? buttonEl.offsetLeft : actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
           }
+          const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
           buttonOffset = buttonEl.f7SwipeoutButtonOffset;
           if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') {
-            $buttonEl.css({
-              left: `${overswipeLeft ? buttonOffset : 0}px`
-            });
+            if (app.theme === 'ios') {
+              const newWidth = overswipeLeft ? actionsLeftWidth - 16 : buttonWidth;
+              const diff = newWidth - buttonWidth;
+              $buttonEl.css({
+                width: `${newWidth}px`,
+                marginRight: overswipeLeft ? `${-diff}px` : '0px'
+              });
+            } else {
+              $buttonEl.css({
+                left: `${overswipeLeft ? buttonOffset : 0}px`
+              });
+            }
             if (overswipeLeft) {
               if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
                 $swipeoutEl.trigger('swipeout:overswipeenter');
@@ -216,7 +254,15 @@ const Swipeout = {
           if ($leftButtons.length > 1) {
             $buttonEl.css('z-index', $leftButtons.length - index);
           }
-          $buttonEl.transform(`translate3d(${buttonTranslate + buttonOffset * (1 - Math.min(progress, 1))}px,0,0)`);
+          if (app.theme === 'ios') {
+            const buttonStartPos = buttonOffset;
+            const buttonEndPos = buttonStartPos + buttonWidth;
+            let buttonProgress = (buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
+            buttonProgress = Math.max(Math.min(buttonProgress, 1), 0);
+            $buttonEl.transform(`scale(${buttonProgress})`);
+          } else {
+            $buttonEl.transform(`translate3d(${buttonTranslate + buttonOffset * (1 - Math.min(progress, 1))}px,0,0)`);
+          }
         });
       }
       $swipeoutEl.trigger('swipeout', progress);
@@ -229,6 +275,7 @@ const Swipeout = {
         isMoved = false;
         return;
       }
+      $swipeoutEl.removeClass('swipeout-active');
       isTouched = false;
       isMoved = false;
       const timeDiff = new Date().getTime() - touchStartTime;
@@ -257,7 +304,11 @@ const Swipeout = {
         $buttons = direction === 'to-left' ? $rightButtons : $leftButtons;
         if ($buttons) {
           for (i = 0; i < $buttons.length; i += 1) {
-            $($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
+            if (app.theme === 'ios') {
+              $($buttons[i]).transform(`scale(1)`);
+            } else {
+              $($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
+            }
           }
         }
         if (overswipeRight) {
@@ -282,7 +333,11 @@ const Swipeout = {
           if (typeof buttonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
           }
-          $buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
+          if (app.theme === 'ios') {
+            $buttonEl.transform(`scale(0)`);
+          } else {
+            $buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
+          }
         });
       }
       if ($rightButtons && $rightButtons.length > 0 && $rightButtons !== $buttons) {
@@ -292,7 +347,11 @@ const Swipeout = {
           if (typeof buttonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
           }
-          $buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);
+          if (app.theme === 'ios') {
+            $buttonEl.transform(`scale(0)`);
+          } else {
+            $buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);
+          }
         });
       }
       $swipeoutContent.transitionEnd(() => {
@@ -310,9 +369,9 @@ const Swipeout = {
         }
       });
     }
-    const passiveListener = getSupport().passiveListener ? {
+    const passiveListener = {
       passive: true
-    } : false;
+    };
     app.on('touchstart', e => {
       if (Swipeout.el) {
         const $targetEl = $(e.target);
@@ -354,10 +413,14 @@ const Swipeout = {
     if ($buttons.length > 1) {
       $buttons.each((buttonEl, buttonIndex) => {
         const $buttonEl = $(buttonEl);
-        if (side === 'right') {
-          $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+        if (app.theme === 'ios') {
+          $buttonEl.transform(`scale(1)`);
         } else {
-          $buttonEl.css('z-index', $buttons.length - buttonIndex).transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+          if (side === 'right') {
+            $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+          } else {
+            $buttonEl.css('z-index', $buttons.length - buttonIndex).transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+          }
         }
       });
     }
@@ -368,7 +431,11 @@ const Swipeout = {
       if (callback) callback.call($el[0]);
     });
     nextFrame(() => {
-      $buttons.transform(`translate3d(${translate}px,0,0)`);
+      if (app.theme === 'ios') {
+        $buttons.transform(`scale(1)`);
+      } else {
+        $buttons.transform(`translate3d(${translate}px,0,0)`);
+      }
       $swipeoutContent.transform(`translate3d(${translate}px,0,0)`);
     });
     Swipeout.el = $el[0];
@@ -401,14 +468,22 @@ const Swipeout = {
     closeTimeout = setTimeout(onSwipeoutClose, 500);
     $buttons.each(buttonEl => {
       const $buttonEl = $(buttonEl);
-      if (side === 'right') {
-        $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+      if (app.theme === 'ios') {
+        $buttonEl.transform(`scale(0)`);
       } else {
-        $buttonEl.transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+        if (side === 'right') {
+          $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+        } else {
+          $buttonEl.transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+        }
       }
+      const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
       $buttonEl.css({
-        left: '0px'
+        left: '0px',
+        width: buttonWidth ? `${buttonWidth}px` : '',
+        marginLeft: '0px'
       }).removeClass('swipeout-overswipe-active');
+      delete $buttonEl[0].f7SwipeoutButtonWidth;
     });
     if (Swipeout.el && Swipeout.el === $el[0]) Swipeout.el = undefined;
   },

package/components/swipeout/swipeout.less

@@ -13,11 +13,26 @@
 }
 .swipeout-transitioning {
   .swipeout-content,
+  .swipeout-content .item-inner::after {
+    transition-duration: 300ms;
+    transition-property: transform, left, background-color, border-radius, opacity;
+  }
   .swipeout-actions-right a,
   .swipeout-actions-left a,
   .swipeout-overswipe {
     transition-duration: 300ms;
-    transition-property: transform, left;
+    transition-property: transform, left, width, margin-left, margin-right;
+  }
+  &:not(.swipeout-opened) {
+    .swipeout-content {
+      transition-delay: 0ms, 0ms, 300ms, 300ms, 0ms;
+    }
+  }
+}
+.list li:has(+ li:is(.swipeout-opened, .swipeout-active)) {
+  .item-inner::after {
+    opacity: 0;
+    transition-duration: 300ms;
   }
 }
 .swipeout-content {
@@ -26,7 +41,6 @@
 }
 .swipeout-overswipe {
   transition-duration: 200ms;
-  transition-property: left;
 }
 .swipeout-actions-left,
 .swipeout-actions-right {
@@ -39,6 +53,9 @@
   > button,
   > span,
   > div {
+    box-sizing: border-box;
+    border-radius: var(--f7-swipeout-button-border-radius);
+
     color: var(--f7-swipeout-button-text-color);
     background: var(--f7-swipeout-button-bg-color);
     padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
@@ -48,53 +65,12 @@
     left: 0;
     font-size: var(--f7-swipeout-button-font-size);
     font-weight: var(--f7-swipeout-button-font-weight);
-    &:after {
-      content: '';
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      width: 600%;
-      height: 100%;
-      background: inherit;
-      z-index: -1;
-      transform: translate3d(0, 0, 0);
-      pointer-events: none;
-    }
   }
   .swipeout-delete {
     background: var(--f7-swipeout-delete-button-bg-color);
   }
 }
-.swipeout-actions-right {
-  right: 0%;
-  transform: translateX(calc(100% + 1px));
-  > a,
-  > button,
-  > span,
-  > div {
-    &:after {
-      left: 100%;
-    }
-    &:last-child {
-      padding-right: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right));
-    }
-  }
-}
-.swipeout-actions-left {
-  left: 0%;
-  transform: translateX(calc(-100% - 1px));
-  > a,
-  > button,
-  > span,
-  > div {
-    &:after {
-      right: 100%;
-    }
-    &:first-child {
-      padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
-    }
-  }
-}
+
 .swipeout-actions-left,
 .swipeout-actions-right {
   [class*='color-'] {

package/components/tabs/tabs.js

@@ -190,6 +190,11 @@ const Tab = {
         if (hasHighlight) {
           app.toolbar.setHighlight($tabbarEl);
         }
+        // Toolbar New Highlight
+        const $tabbarNewEl = $tabLinkEl.parents('.tabbar-new, .tabbar-new-icons');
+        if (app.toolbarNew && $tabbarNewEl.length > 0) {
+          app.toolbarNew.setHighlight($tabbarNewEl);
+        }
       }
     }
     return {

package/components/toast/toast-class.js

@@ -97,8 +97,8 @@ class Toast extends Modal {
       class: "toast-icon"
     }, icon), $jsx("div", {
       class: "toast-text"
-    }, text), closeButton && !icon && $jsx("a", {
-      class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}`
+    }, text), closeButton && !icon && $jsx("button", {
+      class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}${toast.app.theme === 'ios' ? ' button-round' : ''}`
     }, closeButtonText)));
   }
 }

package/components/toast/toast-ios.less

@@ -3,6 +3,8 @@
     transition-duration: 300ms;
     width: 100%;
     left: 0;
+    .ios-glass-backdrop();
+    box-shadow: var(--f7-glass-shadow);
     &.toast-top {
       top: 0;
       transform: translate3d(0, -100%, 0);

package/components/toast/toast-rtl.css

@@ -1 +1 @@
-:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px;width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0;-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}

package/components/toast/toast-vars.less

@@ -4,12 +4,10 @@
   --f7-toast-max-width: 568px;
 }
 .ios-vars({
-  --f7-toast-text-color: #fff;
-  --f7-toast-bg-color: rgba(0,0,0,0.75);
-  --f7-toast-bg-color-rgb: 0, 0, 0;
+  --f7-toast-bg-color: var(--f7-glass-bg-color);
   --f7-toast-padding-horizontal: 16px;
   --f7-toast-padding-vertical: 12px;
-  --f7-toast-border-radius: 8px;
+  --f7-toast-border-radius: 32px;
   --f7-toast-button-min-width: 64px;
 });
 .md-vars({

package/components/toast/toast.css

@@ -1 +1 @@
-:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px;width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0;-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}

package/components/toast/toast.less

@@ -11,7 +11,6 @@
   box-sizing: border-box;
   background-color: var(--f7-toast-bg-color);
   opacity: 0;
-  .ios-translucent-modals(var(--f7-toast-bg-color-rgb));
   &.modal-in {
     opacity: 1;
   }
@@ -32,6 +31,7 @@
     min-width: var(--f7-toast-button-min-width);
     margin-top: -8px;
     margin-bottom: -8px;
+    width: auto;
   }
   &.toast-with-icon {
     .toast-content {

package/components/toolbar-new/tabbar-highlight.js

@@ -0,0 +1,134 @@
+import { getDocument } from 'ssr-window';
+const startAnimation = data => {
+  data.raf = requestAnimationFrame(() => {
+    if (!data.setTransform) return;
+    const highlightEl = data.highlightEl;
+    if (!highlightEl) return;
+    highlightEl.style.transform = data.setTransform;
+    highlightEl.style.transitionTimingFunction = 'ease-out';
+    data.setTransform = null;
+  });
+};
+const stopAnimation = data => {
+  cancelAnimationFrame(data.raf);
+};
+const setHighlightOnTouch = (data, e) => {
+  const {
+    rect,
+    linkEls,
+    highlightEl
+  } = data;
+  if (!highlightEl) return;
+  const {
+    clientX
+  } = e;
+  const highlightWidth = rect.width / linkEls.length;
+  const leftOffset = clientX - rect.left - highlightWidth / 2;
+  const minLeft = 0;
+  const maxLeft = rect.width - highlightWidth;
+  const translateX = Math.max(minLeft, Math.min(leftOffset, maxLeft));
+  const linkCenters = [...linkEls].map((el, index) => {
+    return index * highlightWidth + highlightWidth / 2;
+  });
+  const closestLinkCenter = linkCenters.reduce((prev, curr) => {
+    const highlightCenter = translateX + highlightWidth / 2;
+    return Math.abs(curr - highlightCenter) < Math.abs(prev - highlightCenter) ? curr : prev;
+  }, linkCenters[0]);
+  const closestLinkIndex = linkCenters.indexOf(closestLinkCenter);
+  data.newActiveIndex = closestLinkIndex;
+  highlightEl.classList.add('tab-link-highlight-pressed');
+  data.setTransform = `translateX(${translateX}px)`;
+  startAnimation(data);
+};
+const unsetHighlightOnTouch = data => {
+  cancelAnimationFrame(data.raf);
+  data.setTransform = null;
+  const {
+    highlightEl
+  } = data;
+  if (!highlightEl) return;
+  highlightEl.classList.remove('tab-link-highlight-pressed');
+  const {
+    activeIndex,
+    newActiveIndex,
+    linkEls
+  } = data;
+  if (activeIndex !== newActiveIndex) {
+    linkEls[newActiveIndex].click();
+  }
+  highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+  highlightEl.style.transitionTimingFunction = '';
+  highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+};
+export const initTabbarNewHighlight = el => {
+  const document = getDocument();
+  if (!el) return;
+  if (el.classList.contains('tabbar-new-scrollable')) {
+    return;
+  }
+  const highlightEl = el.querySelector('.tab-link-highlight');
+  const toolbarPaneEl = el.querySelector('.toolbar-new-pane');
+  if (!highlightEl || !toolbarPaneEl) return;
+  const data = {
+    el,
+    highlightEl,
+    touched: false,
+    moved: false,
+    rect: null,
+    setTransform: null,
+    raf: null
+  };
+  el.f7ToolbarNewHighlightData = data;
+  el.f7ToolbarNewOnPointer = e => {
+    if (e.type === 'touchstart') {
+      e.preventDefault();
+    }
+    if (e.pointerType !== 'touch') return;
+    if (!el) return;
+    if (e.type === 'pointerdown') {
+      data.linkEls = el.querySelectorAll('.tab-link');
+      data.rect = toolbarPaneEl.getBoundingClientRect();
+      data.touched = true;
+      setHighlightOnTouch(data, e);
+      startAnimation(data);
+    }
+    if (e.type === 'pointermove') {
+      if (!data.touched) return;
+      data.moved = true;
+      setHighlightOnTouch(data, e);
+    }
+    if (e.type === 'pointerup') {
+      if (!data.touched) return;
+      data.touched = false;
+      data.moved = false;
+      unsetHighlightOnTouch(data);
+      stopAnimation(data);
+    }
+  };
+  el.addEventListener('touchstart', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  el.addEventListener('pointerdown', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointermove', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointerup', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointercancel', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+};
+export const destroyTabbarNewHighlight = el => {
+  if (!el || !el.f7ToolbarNewOnPointer) return;
+  const document = getDocument();
+  el.removeEventListener('touchstart', el.f7ToolbarNewOnPointer);
+  el.removeEventListener('pointerdown', el.f7ToolbarNewOnPointer);
+  document.removeEventListener('pointermove', el.f7ToolbarNewOnPointer);
+  document.removeEventListener('pointerup', el.f7ToolbarNewOnPointer);
+  document.removeEventListener('pointercancel', el.f7ToolbarNewOnPointer);
+  el.f7ToolbarNewOnPointer = null;
+  el.f7ToolbarNewHighlightData = null;
+};