framework7 8.3.4 → 9.0.0-beta.1

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);
   }

package/components/tooltip/tooltip-class.js

@@ -4,10 +4,7 @@ import { extend, deleteProps } from '../../shared/utils.js';
 import { getSupport } from '../../shared/get-support.js';
 import Framework7Class from '../../shared/class.js';
 class Tooltip extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const tooltip = this;
     const support = getSupport();
@@ -101,9 +98,9 @@ class Tooltip extends Framework7Class {
       }
       if (tooltip.params.trigger === 'manual') return;
       if (support.touch) {
-        const passive = support.passiveListener ? {
+        const passive = {
           passive: true
-        } : false;
+        };
         if (tooltip.params.delegated) {
           $(document).on(app.touchEvents.start, tooltip.params.targetEl, handleTouchStart, passive);
         } else {
@@ -114,11 +111,11 @@ class Tooltip extends Framework7Class {
       } else {
         // eslint-disable-next-line
         if (tooltip.params.delegated) {
-          $(document).on(support.pointerEvents ? 'pointerenter' : 'mouseenter', tooltip.params.targetEl, handleMouseEnter, true);
-          $(document).on(support.pointerEvents ? 'pointerleave' : 'mouseleave', tooltip.params.targetEl, handleMouseLeave, true);
+          $(document).on('pointerenter', tooltip.params.targetEl, handleMouseEnter, true);
+          $(document).on('pointerleave', tooltip.params.targetEl, handleMouseLeave, true);
         } else {
-          tooltip.$targetEl.on(support.pointerEvents ? 'pointerenter' : 'mouseenter', handleMouseEnter);
-          tooltip.$targetEl.on(support.pointerEvents ? 'pointerleave' : 'mouseleave', handleMouseLeave);
+          tooltip.$targetEl.on('pointerenter', handleMouseEnter);
+          tooltip.$targetEl.on('pointerleave', handleMouseLeave);
         }
       }
     };
@@ -135,9 +132,9 @@ class Tooltip extends Framework7Class {
       }
       if (tooltip.params.trigger === 'manual') return;
       if (support.touch) {
-        const passive = support.passiveListener ? {
+        const passive = {
           passive: true
-        } : false;
+        };
         if (tooltip.params.delegated) {
           $(document).off(app.touchEvents.start, tooltip.params.targetEl, handleTouchStart, passive);
         } else {
@@ -148,11 +145,11 @@ class Tooltip extends Framework7Class {
       } else {
         // eslint-disable-next-line
         if (tooltip.params.delegated) {
-          $(document).off(support.pointerEvents ? 'pointerenter' : 'mouseenter', tooltip.params.targetEl, handleMouseEnter, true);
-          $(document).off(support.pointerEvents ? 'pointerleave' : 'mouseleave', tooltip.params.targetEl, handleMouseLeave, true);
+          $(document).off('pointerenter', tooltip.params.targetEl, handleMouseEnter, true);
+          $(document).off('pointerleave', tooltip.params.targetEl, handleMouseLeave, true);
         } else {
-          tooltip.$targetEl.off(support.pointerEvents ? 'pointerenter' : 'mouseenter', handleMouseEnter);
-          tooltip.$targetEl.off(support.pointerEvents ? 'pointerleave' : 'mouseleave', handleMouseLeave);
+          tooltip.$targetEl.off('pointerenter', handleMouseEnter);
+          tooltip.$targetEl.off('pointerleave', handleMouseLeave);
         }
       }
     };

package/components/tooltip/tooltip.js

@@ -78,27 +78,11 @@ export default {
           text
         });
       });
-      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
-        page.$navbarEl.find('.tooltip-init').each(el => {
-          const text = $(el).attr('data-tooltip');
-          if (!text) return;
-          app.tooltip.create({
-            targetEl: el,
-            text
-          });
-        });
-      }
     },
     pageBeforeRemove(page) {
-      const app = this;
       page.$el.find('.tooltip-init').each(el => {
         if (el.f7Tooltip) el.f7Tooltip.destroy();
       });
-      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
-        page.$navbarEl.find('.tooltip-init').each(el => {
-          if (el.f7Tooltip) el.f7Tooltip.destroy();
-        });
-      }
     }
   },
   vnode: {

package/components/touch-highlight/touch-highlight-ios.less

@@ -0,0 +1,17 @@
+.ios {
+  .toolbar-pane,
+  .navbar .left,
+  .navbar .right,
+  .popover-inner,
+  .actions-group:not(.actions-grid .actions-group),
+  .searchbar-input-wrap,
+  .searchbar-disable-button,
+  .subnavbar,
+  .searchbar-input-wrap .autocomplete-dropdown,
+  .messagebar-area,
+  .notification,
+  .toast,
+  .fab > a {
+    touch-action: none;
+  }
+}

package/components/touch-highlight/touch-highlight-md.less

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

package/components/touch-highlight/touch-highlight-vars.less

@@ -0,0 +1,8 @@
+.ios-vars({
+  .light-vars({
+    --f7-touch-highlight-bg-color: rgba(255, 255, 255, 0.5);
+  });
+  .dark-vars({
+    --f7-touch-highlight-bg-color: rgba(255, 255, 255, 0.3);
+  });
+});

package/components/touch-highlight/touch-highlight.d.ts

@@ -0,0 +1,25 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace TouchHighlight {
+  interface TouchHighlight {
+    $highlightEl: Dom7Array;
+    highlightTransform: string;
+    removing: boolean;
+    remove(): void;
+  }
+  interface AppMethods {
+    touchHighlight: {
+      create($el: Dom7Array, x: number, y: number): TouchHighlight;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const TouchHighlightComponent: Framework7Plugin;
+export default TouchHighlightComponent;

package/components/touch-highlight/touch-highlight.js

@@ -0,0 +1,123 @@
+import { getDocument } from 'ssr-window';
+const initTouchHighlight = app => {
+  const document = getDocument();
+  const isEnabled = app.params.touch.touchHighlight;
+  const elements = app.params.touch.touchHighlightElements;
+  const data = {};
+  const offset = 1;
+  const opacity = 1;
+  const zIndex = 500;
+  const removeHoverHighlight = () => {
+    const el = data.currentEl;
+    if (el && data.elScale) {
+      data.elScale = false;
+      el.style.scale = '';
+      const onTransitionEnd = () => {
+        el.style.transitionDuration = '';
+        el.style.transitionTimingFunction = '';
+        el.removeEventListener('transitionend', onTransitionEnd);
+      };
+      el.addEventListener('transitionend', onTransitionEnd);
+    }
+    if (data.lightElWrap) {
+      const lightElWrap = data.lightElWrap;
+      if (lightElWrap.style.opacity === '0') {
+        lightElWrap.remove();
+      } else {
+        lightElWrap.addEventListener('transitionend', () => {
+          lightElWrap.remove();
+        });
+        lightElWrap.style.opacity = 0;
+      }
+    }
+    data.currentEl = null;
+    data.lightElWrap = null;
+    data.lightEl = null;
+  };
+  const setLightPosition = e => {
+    if (data.lightEl) {
+      const {
+        x,
+        y
+      } = e;
+      const offsetX = x - data.rect.x;
+      const offsetY = y - data.rect.y;
+      data.lightEl.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
+    }
+  };
+  const onPointerMove = e => {
+    if (!isEnabled) return;
+    setLightPosition(e);
+  };
+  const onPointerLeave = () => {
+    if (!isEnabled) return;
+    removeHoverHighlight();
+  };
+  const onPointerDown = e => {
+    if (!isEnabled) return;
+    if (e.pointerType === 'mouse') return;
+    const d = data;
+    const el = e.target.closest(elements);
+    if (!el) return;
+    if (d.currentEl === el) return;
+    d.currentEl = el;
+    d.rect = el.getBoundingClientRect();
+    const lightElWrap = document.createElement('span');
+    lightElWrap.className = 'rounded-[inherit]';
+    lightElWrap.style = `left: ${offset}px; top: ${offset}px; right: ${offset}px; bottom: ${offset}px;transition-duration: 300ms; opacity: 0; position: absolute; overflow: hidden; pointer-events: none; border-radius: inherit;`;
+    const lightEl = document.createElement('span');
+    const {
+      width,
+      height
+    } = d.rect;
+    const radius = (width ** 2 + height ** 2) ** 0.5;
+    lightEl.style.position = `absolute`;
+    lightEl.style.zIndex = zIndex;
+    lightEl.style.width = `${radius * 2}px`;
+    lightEl.style.left = `${-radius}px`;
+    lightEl.style.height = `${radius * 2}px`;
+    lightEl.style.top = `${-radius}px`;
+    lightEl.style.borderRadius = `50%`;
+    const lightColor = 'var(--f7-touch-highlight-bg-color)';
+    lightEl.style.backgroundImage = `radial-gradient(circle at center, color-mix(in oklab, ${lightColor} ${opacity * 100}%, transparent), transparent 50%)`;
+    lightEl.style.pointerEvents = 'none';
+    d.lightEl = lightEl;
+    d.lightElWrap = lightElWrap;
+    setLightPosition(e);
+    lightElWrap.append(lightEl);
+    el.append(lightElWrap);
+    if (e.pointerType !== 'mouse') {
+      if (e.pointerType !== 'mouse') {
+        d.elScale = true;
+        let scale = 1.25;
+        if (d.rect.width > 60 || d.rect.height > 60) {
+          scale = 1.05;
+        }
+        el.style.scale = scale;
+        el.style.transitionDuration = '300ms';
+        el.style.transitionTimingFunction = 'ease-in-out';
+      }
+    }
+    requestAnimationFrame(() => {
+      lightElWrap.style.opacity = 1;
+    });
+    el.removeEventListener('pointermove', onPointerMove);
+    el.removeEventListener('pointerleave', onPointerLeave);
+    el.addEventListener('pointermove', onPointerMove);
+    el.addEventListener('pointerleave', onPointerLeave);
+  };
+  document.addEventListener('pointerdown', onPointerDown, {
+    capture: true
+  });
+  document.addEventListener('contextmenu', onPointerLeave, {
+    capture: true
+  });
+};
+export default {
+  name: 'touch-highlight',
+  on: {
+    init() {
+      initTouchHighlight(this);
+    }
+  }
+};

package/components/touch-highlight/touch-highlight.less

@@ -0,0 +1,9 @@
+/* === Touch Highlight === */
+@import './touch-highlight-vars.less';
+
+.if-ios-theme({
+  @import './touch-highlight-ios.less';
+});
+.if-md-theme({
+  @import './touch-highlight-md.less';
+});

package/components/touch-ripple/touch-ripple.js

@@ -7,10 +7,7 @@ export default {
   create() {
     const app = this;
     app.touchRipple = {
-      create() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+      create(...args) {
         return new TouchRipple(...args);
       }
     };

package/components/view/resizable-view.js

@@ -1,9 +1,7 @@
 import $ from '../../shared/dom7.js';
 import { extend } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 function resizableView(view) {
   const app = view.app;
-  const support = getSupport();
   if (view.resizableInitialized) return;
   extend(view, {
     resizable: true,
@@ -104,9 +102,9 @@ function resizableView(view) {
   $el.addClass('view-resizable');
 
   // Add Events
-  const passive = support.passiveListener ? {
+  const passive = {
     passive: true
-  } : false;
+  };
   view.$el.on(app.touchEvents.start, '.view-resize-handler', handleTouchStart, passive);
   app.on('touchmove:active', handleTouchMove);
   app.on('touchend:passive', handleTouchEnd);

package/components/view/view-class.js

@@ -4,10 +4,7 @@ import Router from '../../modules/router/router.js';
 import Framework7Class from '../../shared/class.js';
 import resizableView from './resizable-view.js';
 class View extends Framework7Class {
-  constructor(app, el, viewParams) {
-    if (viewParams === void 0) {
-      viewParams = {};
-    }
+  constructor(app, el, viewParams = {}) {
     super(viewParams, [app]);
     const view = this;
     const ssr = view.params.routerId;
@@ -154,21 +151,10 @@ class View extends Framework7Class {
       // Supposed to be HTMLElement or Dom7
       selector = ($el.attr('id') ? `#${$el.attr('id')}` : '') + ($el.attr('class') ? `.${$el.attr('class').replace(/ /g, '.').replace('.active', '')}` : '');
     }
-
-    // DynamicNavbar
-    let $navbarsEl;
-    if (app.theme === 'ios' && view.params.iosDynamicNavbar) {
-      $navbarsEl = $el.children('.navbars').eq(0);
-      if ($navbarsEl.length === 0) {
-        $navbarsEl = $('<div class="navbars"></div>');
-      }
-    }
     extend(view, {
       $el,
       el: $el[0],
       main: view.main || $el.hasClass('view-main'),
-      $navbarsEl,
-      navbarsEl: $navbarsEl ? $navbarsEl[0] : undefined,
       selector
     });
     if (view.main) {

package/components/view/view.d.ts

@@ -110,10 +110,6 @@ export namespace View {
     componentCache?: boolean;
     /** When enabled, and there is no children pages inside of the View. It will load initial page that matches to initial URL (default true) */
     loadInitialPage?: boolean;
-    /**	Enables dynamic navbar for iOS theme */
-    iosDynamicNavbar?: boolean;
-    /**	This option (when enabled) gives more native look for dynamic navbar left back-link icon animation. Useful only when you use dynamic navbar with default back-link icon on left side set as "sliding". */
-    iosAnimateNavbarBackIcon?: boolean;
     /**	Enable/disable ability to swipe back from left edge of screen to get to the previous page. For iOS theme */
     iosSwipeBack?: boolean;
     /**	Value in px. Swipe back action will start if "touch distance" will be more than this value. For iOS theme */

package/components/view/view.js

@@ -73,7 +73,7 @@ export default {
       iosSwipeBackThreshold: 0,
       mdSwipeBack: false,
       mdSwipeBackAnimateShadow: true,
-      mdSwipeBackAnimateOpacity: false,
+      mdSwipeBackAnimateOpacity: true,
       mdSwipeBackActiveArea: 30,
       mdSwipeBackThreshold: 0,
       // Push State
@@ -88,10 +88,6 @@ export default {
       browserHistoryTabs: 'replace',
       // Animate Pages
       animate: true,
-      // iOS Dynamic Navbar
-      iosDynamicNavbar: true,
-      // Animate iOS Navbar Back Icon
-      iosAnimateNavbarBackIcon: true,
       // Delays
       iosPageLoadDelay: 0,
       mdPageLoadDelay: 0,

package/components/virtual-list/virtual-list-class.js

@@ -4,10 +4,7 @@ import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 import { getDevice } from '../../shared/get-device.js';
 class VirtualList extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const vl = this;
     const device = getDevice();
@@ -333,10 +330,7 @@ class VirtualList extends Framework7Class {
   }
 
   // Filter
-  filterItems(indexes, resetScrollTop) {
-    if (resetScrollTop === void 0) {
-      resetScrollTop = true;
-    }
+  filterItems(indexes, resetScrollTop = true) {
     const vl = this;
     vl.filteredItems = [];
     for (let i = 0; i < indexes.length; i += 1) {