framework7 8.3.4 → 9.0.0

package/components/toolbar/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 initTabbarHighlight = el => {
+  const document = getDocument();
+  if (!el) return;
+  if (el.classList.contains('tabbar-scrollable')) {
+    return;
+  }
+  const highlightEl = el.querySelector('.tab-link-highlight');
+  const toolbarPaneEl = el.querySelector('.toolbar-pane');
+  if (!highlightEl || !toolbarPaneEl) return;
+  const data = {
+    el,
+    highlightEl,
+    touched: false,
+    moved: false,
+    rect: null,
+    setTransform: null,
+    raf: null
+  };
+  el.f7ToolbarHighlightData = data;
+  el.f7ToolbarOnPointer = 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.f7ToolbarOnPointer, {
+    passive: false
+  });
+  el.addEventListener('pointerdown', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointermove', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointerup', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointercancel', el.f7ToolbarOnPointer, {
+    passive: false
+  });
+};
+export const destroyTabbarHighlight = el => {
+  if (!el || !el.f7ToolbarOnPointer) return;
+  const document = getDocument();
+  el.removeEventListener('touchstart', el.f7ToolbarOnPointer);
+  el.removeEventListener('pointerdown', el.f7ToolbarOnPointer);
+  document.removeEventListener('pointermove', el.f7ToolbarOnPointer);
+  document.removeEventListener('pointerup', el.f7ToolbarOnPointer);
+  document.removeEventListener('pointercancel', el.f7ToolbarOnPointer);
+  el.f7ToolbarOnPointer = null;
+  el.f7ToolbarHighlightData = null;
+};

package/components/toolbar/toolbar-ios.less

@@ -1,13 +1,119 @@
 .ios {
+  .toolbar-pane {
+    user-select: none;
+  }
+  .toolbar-pane,
+  .toolbar .left,
+  .toolbar .right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    border-radius: 32px;
+    .ios-glass();
+  }
   .toolbar {
-    a.icon-only {
-      min-height: var(--f7-toolbar-height);
+    .left {
+      margin-right: auto;
+    }
+    .right {
+      margin-left: auto;
+    }
+    .left:empty,
+    .right:empty {
+      display: none;
+    }
+
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 0;
-      min-width: 44px;
+      min-width: 48px;
+      min-height: 48px;
+      padding: 0;
+    }
+    .link {
+      padding: 0 12px;
+      height: 100%;
+    }
+    &::before,
+    &::after {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      inset: 0;
     }
+    &::before {
+      backdrop-filter: blur(2px);
+      mask-image: linear-gradient(
+        to top,
+        black calc(50% + var(--f7-safe-area-bottom, 0px)),
+        transparent 100%
+      );
+    }
+    &::after {
+      background-image: linear-gradient(
+        to top,
+        var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-bottom, 0px),
+        transparent 100%
+      );
+    }
+    &.toolbar-bottom,
+    &.messagebar {
+      &::before,
+      &::after {
+        top: -16px;
+      }
+      .toolbar-inner {
+        padding-bottom: 16px;
+      }
+    }
+    &.toolbar-top,
+    &:not(.toolbar-bottom, .toolbar-top, .messagebar) {
+      &::before {
+        mask-image: linear-gradient(
+          to bottom,
+          black calc(50% + var(--f7-safe-area-top, 0px)),
+          transparent 100%
+        );
+      }
+      &::after {
+        background-image: linear-gradient(
+          to bottom,
+          var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-top, 0px),
+          transparent 100%
+        );
+      }
+      &::before,
+      &::after {
+        bottom: -16px;
+      }
+      .toolbar-inner {
+        padding-top: 16px;
+      }
+    }
+  }
+  .navbar ~ .toolbar-top {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+  .toolbar-inner {
+    justify-content: center;
+    overflow: visible;
+    gap: 16px;
+  }
+  .tabbar-scrollable .toolbar-pane {
+    .scrollable();
+    .no-scrollbar();
+    justify-content: flex-start;
+  }
+  .tabbar:not(.tabbar-scrollable) {
+    touch-action: none;
   }
   .tabbar-icons {
     .tab-link,
@@ -20,17 +126,16 @@
       }
     }
   }
-  @media (min-width: 768px) and (min-height: 600px) {
-    .tabbar,
-    .tabbar-icons {
-      .tab-link,
-      .link {
-        justify-content: center;
-        flex-direction: row;
-        i + span {
-          margin-left: 5px;
-        }
-      }
+  @media (max-width: 767px) {
+    .tabbar .toolbar-pane {
+      width: 100%;
+    }
+  }
+  @media (min-width: 768px) {
+    .tabbar .tab-link {
+      padding-left: 16px;
+      padding-right: 16px;
+      min-width: 96px;
     }
   }
 
@@ -44,4 +149,45 @@
       padding: 0 8px;
     }
   }
+  .tab-link-highlight {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    transition-duration: 300ms;
+    border-radius: inherit;
+    .ltr({
+      left: 0;
+    });
+    .rtl({
+      right: 0;
+    });
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 4px;
+      border-radius: inherit;
+      transition-duration: 300ms;
+    }
+    &::before {
+      background-color: var(--f7-tabbar-link-highlight-bg-color);
+    }
+    &::after {
+      opacity: 0;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      background-color: var(--f7-tabbar-link-highlight-active-bg-color);
+    }
+  }
+  .tab-link-highlight-pressed {
+    &::before {
+      opacity: 0;
+    }
+    &::after {
+      opacity: 1;
+    }
+    &::before,
+    &::after {
+      scale: 1.4;
+    }
+  }
 }

package/components/toolbar/toolbar-md.less

@@ -1,14 +1,58 @@
 .md {
+  .toolbar-pane {
+    display: contents;
+  }
   .toolbar {
+    background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
     .link {
       justify-content: center;
       padding: 0 12px;
       min-width: 48px;
+      min-height: 48px;
+      line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
+      height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
     }
-    a.icon-only {
-      min-width: 0;
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
+      min-width: 48px;
       flex-shrink: 0;
+      padding: 0;
+    }
+  }
+  .toolbar-top,
+  .md .toolbar-top-md {
+    &.no-outline {
+      &:after {
+        display: none !important;
+      }
+    }
+    &.toolbar-hidden {
+      &:before {
+        display: none !important;
+      }
+    }
+    &:after,
+    &:before {
+      backface-visibility: hidden;
+    }
+    .hairline(bottom, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-bottom,
+  .md .toolbar-bottom-md {
+    &.no-outline {
+      &:before {
+        display: none !important;
+      }
+    }
+    &.toolbar-hidden {
+      &:after {
+        display: none !important;
+      }
     }
+    .hairline(top, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-inner {
+    justify-content: space-between;
+    overflow: hidden;
   }
   .tabbar,
   .tabbar-icons {
@@ -17,7 +61,7 @@
       padding-left: 0;
       padding-right: 0;
     }
-    a.icon-only {
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
       flex-shrink: initial;
     }
     .tab-link {
@@ -74,4 +118,34 @@
       padding: 0 12px;
     }
   }
+  .toolbar-top-md,
+  .toolbar-top {
+    .tab-link-highlight {
+      bottom: 0;
+    }
+  }
+  .toolbar-bottom,
+  .toolbar-bottom-md {
+    .tab-link-highlight {
+      top: 0;
+    }
+  }
+  .tabbar,
+  .tabbar-icons {
+    &.tabbar-icons .tab-link-highlight {
+      display: none;
+    }
+    &:not(.tabbar-icons) .tab-link-highlight {
+      position: absolute;
+      height: 2px;
+      background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
+      transition-duration: 300ms;
+      .ltr({
+        left: 0;
+      });
+      .rtl({
+        right: 0;
+      });
+    }
+  }
 }

package/components/toolbar/toolbar-vars.less

@@ -3,7 +3,6 @@
   --f7-toolbar-bg-color: var(--f7-bars-bg-color);
   --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
   --f7-toolbar-border-color: var(--f7-bars-border-color);
-  --f7-toolbar-link-color: var(--f7-bars-link-color);
   --f7-toolbar-text-color: var(--f7-bars-text-color);
   */
   --f7-tabbar-link-active-bg-color: transparent;
@@ -11,18 +10,20 @@
   --f7-toolbar-hide-show-transition-duration: 400ms;
 }
 .ios-vars({
-  --f7-toolbar-height: 44px;
+  --f7-toolbar-height: 64px;
   --f7-toolbar-font-size: 17px;
-  --f7-toolbar-inner-padding-left: 8px;
-  --f7-toolbar-inner-padding-right: 8px;
+  --f7-toolbar-inner-padding-left: 16px;
+  --f7-toolbar-inner-padding-right: 16px;
   --f7-toolbar-link-font-weight: 400;
+  --f7-toolbar-link-color: var(--f7-bars-text-color);
+  --f7-tabbar-link-inactive-color: var(--f7-bars-text-color);
   /*
   --f7-toolbar-link-height: var(--f7-toolbar-height);
   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
   --f7-tabbar-link-active-color: var(--f7-theme-color);
   */
-  --f7-tabbar-icons-height: 50px;
-  --f7-tabbar-icons-tablet-height: 50px;
+  --f7-tabbar-icons-height: 80px;
+  --f7-tabbar-icons-tablet-height: 80px;
   --f7-tabbar-icon-size: 28px;
   --f7-tabbar-link-text-transform: none;
   --f7-tabbar-link-font-weight: 400;
@@ -32,11 +33,13 @@
   --f7-tabbar-label-tablet-font-size: 14px;
   --f7-tabbar-label-font-weight: 500;
   --f7-tabbar-label-letter-spacing: 0.01;
-  .light-vars({
-    --f7-tabbar-link-inactive-color: rgba(0,0,0,0.4);
-  });
   .dark-vars({
-    --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
+    --f7-tabbar-link-highlight-bg-color: rgba(255,255,255,0.15);
+    --f7-tabbar-link-highlight-active-bg-color: rgba(255,255,255,0.1);
+  });
+  .light-vars({
+    --f7-tabbar-link-highlight-bg-color: rgba(0,0,0,0.1);
+    --f7-tabbar-link-highlight-active-bg-color: rgba(0,0,0,0.05);
   });
 
 });
@@ -46,6 +49,7 @@
   --f7-toolbar-inner-padding-left: 0px;
   --f7-toolbar-inner-padding-right: 0px;
   /*
+  --f7-toolbar-link-color: var(--f7-bars-link-color);
   --f7-toolbar-link-height: var(--f7-toolbar-height);
   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
   */

package/components/toolbar/toolbar.js

@@ -1,11 +1,13 @@
 import $ from '../../shared/dom7.js';
 import { nextFrame, bindMethods } from '../../shared/utils.js';
+import { destroyTabbarHighlight, initTabbarHighlight } from './tabbar-highlight.js';
 const Toolbar = {
   setHighlight(tabbarEl) {
     const app = this;
     const $tabbarEl = $(tabbarEl);
-    if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
-    if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-icons'))) return;
+    if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-icons'))) {
+      return;
+    }
     let $highlightEl = $tabbarEl.find('.tab-link-highlight');
     const tabLinksCount = $tabbarEl.find('.tab-link').length;
     if (tabLinksCount === 0) {
@@ -13,10 +15,18 @@ const Toolbar = {
       return;
     }
     if ($highlightEl.length === 0) {
-      $tabbarEl.children('.toolbar-inner').append('<span class="tab-link-highlight"></span>');
+      if (app.theme === 'ios') {
+        $tabbarEl.children('.toolbar-inner').children('.toolbar-pane').append('<span class="tab-link-highlight"></span>');
+      } else {
+        $tabbarEl.children('.toolbar-inner').append('<span class="tab-link-highlight"></span>');
+      }
       $highlightEl = $tabbarEl.find('.tab-link-highlight');
-    } else if ($highlightEl.next().length) {
-      $tabbarEl.children('.toolbar-inner').append($highlightEl);
+    } else if ($highlightEl.next('a,button,.tab-link').length) {
+      if (app.theme === 'ios') {
+        $tabbarEl.children('.toolbar-inner').children('.toolbar-pane').append($highlightEl);
+      } else {
+        $tabbarEl.children('.toolbar-inner').append($highlightEl);
+      }
     }
     const $activeLink = $tabbarEl.find('.tab-link-active');
     let highlightWidth;
@@ -36,11 +46,15 @@ const Toolbar = {
   init(tabbarEl) {
     const app = this;
     app.toolbar.setHighlight(tabbarEl);
+    if (app.theme !== 'ios') return;
+    initTabbarHighlight(tabbarEl);
   },
-  hide(el, animate) {
-    if (animate === void 0) {
-      animate = true;
-    }
+  destroy(tabbarEl) {
+    const app = this;
+    if (app.theme !== 'ios') return;
+    destroyTabbarHighlight(tabbarEl);
+  },
+  hide(el, animate = true) {
     const app = this;
     const $el = $(el);
     if ($el.hasClass('toolbar-hidden')) return;
@@ -52,10 +66,7 @@ const Toolbar = {
     $el.trigger('toolbar:hide');
     app.emit('toolbarHide', $el[0]);
   },
-  show(el, animate) {
-    if (animate === void 0) {
-      animate = true;
-    }
+  show(el, animate = true) {
     const app = this;
     const $el = $(el);
     if (!$el.hasClass('toolbar-hidden')) return;
@@ -146,9 +157,13 @@ export default {
   },
   on: {
     pageBeforeRemove(page) {
+      const app = this;
       if (page.$el[0].f7ScrollToolbarHandler) {
         page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true);
       }
+      page.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
+        app.toolbar.destroy(tabbarEl);
+      });
     },
     pageBeforeIn(page) {
       const app = this;
@@ -192,6 +207,10 @@ export default {
       insert(vnode) {
         const app = this;
         app.toolbar.init(vnode.elm);
+      },
+      destroy(vnode) {
+        const app = this;
+        app.toolbar.destroy(vnode.elm);
       }
     }
   }

package/components/toolbar/toolbar.less

@@ -11,10 +11,10 @@
   box-sizing: border-box;
   left: 0;
   height: var(--f7-toolbar-height);
-  background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
+  flex-shrink: 0;
   color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
   font-size: var(--f7-toolbar-font-size);
-  .ios-translucent-bars(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
+
   b {
     font-weight: 600;
   }
@@ -28,8 +28,7 @@
   }
   .link {
     display: flex;
-    line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
-    height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
+
     font-weight: var(--f7-toolbar-link-font-weight);
   }
   i.icon {
@@ -51,63 +50,31 @@
 .ios .toolbar-top-ios,
 .md .toolbar-top-md {
   top: 0;
-  .tab-link-highlight {
-    bottom: 0;
-  }
-  &.no-outline {
-    &:after {
-      display: none !important;
-    }
-  }
-  &.toolbar-hidden {
-    &:before {
-      display: none !important;
-    }
-  }
-  &:after,
-  &:before {
-    backface-visibility: hidden;
-  }
-  .hairline(bottom, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
 }
 .toolbar-bottom,
 .ios .toolbar-bottom-ios,
 .md .toolbar-bottom-md {
   bottom: 0;
   height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
-  .tab-link-highlight {
-    top: 0;
-  }
   .toolbar-inner {
     height: auto;
     top: 0;
     bottom: var(--f7-safe-area-bottom);
   }
-  &.no-outline {
-    &:before {
-      display: none !important;
-    }
-  }
-  &.toolbar-hidden {
-    &:after {
-      display: none !important;
-    }
-  }
-
-  .hairline(top, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
 }
 .toolbar-inner {
   position: absolute;
+  z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   display: flex;
-  justify-content: space-between;
+
   box-sizing: border-box;
   align-items: center;
   align-content: center;
-  overflow: hidden;
+
   padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0
     calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
 }
@@ -145,22 +112,6 @@
     height: var(--f7-tabbar-icon-size);
     line-height: var(--f7-tabbar-icon-size);
   }
-  .md &.tabbar-icons .tab-link-highlight {
-    display: none;
-  }
-  .md &:not(.tabbar-icons) .tab-link-highlight {
-    position: absolute;
-    left: 0;
-    height: 2px;
-    background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-    transition-duration: 300ms;
-    .ltr({
-      left: 0;
-    });
-    .rtl({
-      right: 0;
-    });
-  }
 }
 .tabbar-icons {
   --f7-toolbar-height: var(--f7-tabbar-icons-height);
@@ -228,7 +179,8 @@
 }
 .toolbar-top,
 .ios .toolbar-top-ios,
-.md .toolbar-top-md {
+.md .toolbar-top-md,
+.sheet-modal-bottom > .toolbar:not(.toolbar-bottom) {
   ~ * {
     --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
   }