framework7 7.0.0-beta.10 → 7.0.0-beta.11

package/components/tabs/tabs.js

@@ -211,12 +211,11 @@ const Tab = {
       if ($tabLinkEl && $tabLinkEl.length > 0) {
         $tabLinkEl.addClass('tab-link-active'); // Material Highlight
 
-        if (app.theme !== 'ios' && app.toolbar) {
-          const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
+        const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
+        const hasHighlight = app.toolbar && $tabbarEl.length > 0 && ($tabbarEl.hasClass('tabbar-highlight') || app.theme !== 'ios');
 
-          if ($tabbarEl.length > 0) {
-            app.toolbar.setHighlight($tabbarEl);
-          }
+        if (hasHighlight) {
+          app.toolbar.setHighlight($tabbarEl);
         }
       }
     }

package/components/tabs/tabs.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(t,a){void 0===a&&(a=!0);var e=t.$,n=t.utils,i=(t.getDevice,t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,n.extend);const s={show(...t){const a=this;let n,i,s,r,l;1===t.length&&t[0]&&t[0].constructor===Object?(n=t[0].tabEl,i=t[0].tabLinkEl,s=t[0].animate,r=t[0].tabRoute,l=t[0].animatedInit):([n,i,s,r]=t,"boolean"==typeof t[1]&&([n,s,i,r]=t,t.length>2&&i.constructor===Object&&([n,s,r,i]=t))),void 0===s&&(s=!0);const o=e(n);if(r&&o[0]&&(o[0].f7TabRoute=r),!l&&(0===o.length||o.hasClass("tab-active")))return{$newTabEl:o,newTabEl:o[0]};let b;i&&(b=e(i));const h=o.parent(".tabs");if(0===h.length)return{$newTabEl:o,newTabEl:o[0]};a.swipeout&&(a.swipeout.allowOpen=!0);const d=[];function g(){d.forEach((t=>{t()}))}let c,p=!1;if(h.parent().hasClass("tabs-animated-wrap")){h.parent()[s?"removeClass":"addClass"]("not-animated");const t=parseFloat(h.css("transition-duration").replace(",","."));s&&t&&(h.transitionEnd(g),p=!0);const e=100*(a.rtl?o.index():-o.index());h.transform(`translate3d(${e}%,0,0)`)}h.parent().hasClass("tabs-swipeable-wrap")&&a.swiper&&(c=h.parent()[0].swiper,c&&c.activeIndex!==o.index()?(p=!0,c.once("slideChangeTransitionEnd",(()=>{g()})).slideTo(o.index(),s?void 0:0)):c&&c.animating&&(p=!0,c.once("slideChangeTransitionEnd",(()=>{g()}))));const u=h.children(".tab-active");if(u.removeClass("tab-active"),!l&&(!c||c&&!c.animating||c&&r)&&(u.hasClass("view")&&u.children(".page").length&&u.children(".page").each((t=>{e(t).trigger("page:tabhide"),a.emit("pageTabHide",t)})),u.trigger("tab:hide"),a.emit("tabHide",u[0])),o.addClass("tab-active"),!l&&(!c||c&&!c.animating||c&&r)&&(o.hasClass("view")&&o.children(".page").length&&o.children(".page").each((t=>{e(t).trigger("page:tabshow"),a.emit("pageTabShow",t)})),o.trigger("tab:show"),a.emit("tabShow",o[0])),!b&&(b=e("string"==typeof n?`.tab-link[href="${n}"]`:`.tab-link[href="#${o.attr("id")}"]`),(!b||b&&0===b.length)&&e("[data-tab]").each((t=>{o.is(e(t).attr("data-tab"))&&(b=e(t))})),r&&(!b||b&&0===b.length)&&(b=e(`[data-route-tab-id="${r.route.tab.id}"]`),0===b.length&&(b=e(`.tab-link[href="${r.url}"]`))),b.length>1&&o.parents(".page").length&&(b=b.filter((t=>e(t).parents(".page")[0]===o.parents(".page")[0])),"ios"===a.theme&&0===b.length&&r))){const t=o.parents(".page"),n=e(a.navbar.getElByPage(t));b=n.find(`[data-route-tab-id="${r.route.tab.id}"]`),0===b.length&&(b=n.find(`.tab-link[href="${r.url}"]`))}if(b.length>0){let t;if(u&&u.length>0){const a=u.attr("id");a&&(t=e(`.tab-link[href="#${a}"]`),(!t||t&&0===t.length)&&(t=e(`.tab-link[data-route-tab-id="${a}"]`))),(!t||t&&0===t.length)&&e("[data-tab]").each((a=>{u.is(e(a).attr("data-tab"))&&(t=e(a))})),(!t||t&&0===t.length)&&(t=b.siblings(".tab-link-active"))}else r&&(t=b.siblings(".tab-link-active"));if(t&&t.length>1&&u&&u.parents(".page").length&&(t=t.filter((t=>e(t).parents(".page")[0]===u.parents(".page")[0]))),t&&t.length>0&&t.removeClass("tab-link-active"),b&&b.length>0&&(b.addClass("tab-link-active"),"ios"!==a.theme&&a.toolbar)){const t=b.parents(".tabbar, .tabbar-labels");t.length>0&&a.toolbar.setHighlight(t)}}return{$newTabEl:o,newTabEl:o[0],$oldTabEl:u,oldTabEl:u[0],onTabsChanged:function(t){d.push(t)},animated:p}}};var r={name:"tabs",create(){i(this,{tab:{show:s.show.bind(this)}})},on:{"pageInit tabMounted":function(t){const a=e(t.el||t).find(".tabs-animated-wrap > .tabs > .tab-active")[0];if(!a)return;this.tab.show({tabEl:a,animatedInit:!0,animate:!1})}},clicks:{".tab-link":function(t,a={}){if(t.attr("href")&&0===t.attr("href").indexOf("#")||t.attr("data-tab")){this.tab.show({tabEl:a.tab||t.attr("href"),tabLinkEl:t,animate:a.animate})}}}};if(a){if(t.prototype.modules&&t.prototype.modules[r.name])return;t.use(r),t.instance&&(t.instance.useModuleParams(r,t.instance.params),t.instance.useModule(r))}return r}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(t,a){void 0===a&&(a=!0);var e=t.$,n=t.utils,i=(t.getDevice,t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,n.extend);const s={show(...t){const a=this;let n,i,s,r,l;1===t.length&&t[0]&&t[0].constructor===Object?(n=t[0].tabEl,i=t[0].tabLinkEl,s=t[0].animate,r=t[0].tabRoute,l=t[0].animatedInit):([n,i,s,r]=t,"boolean"==typeof t[1]&&([n,s,i,r]=t,t.length>2&&i.constructor===Object&&([n,s,r,i]=t))),void 0===s&&(s=!0);const o=e(n);if(r&&o[0]&&(o[0].f7TabRoute=r),!l&&(0===o.length||o.hasClass("tab-active")))return{$newTabEl:o,newTabEl:o[0]};let b;i&&(b=e(i));const h=o.parent(".tabs");if(0===h.length)return{$newTabEl:o,newTabEl:o[0]};a.swipeout&&(a.swipeout.allowOpen=!0);const d=[];function g(){d.forEach((t=>{t()}))}let c,p=!1;if(h.parent().hasClass("tabs-animated-wrap")){h.parent()[s?"removeClass":"addClass"]("not-animated");const t=parseFloat(h.css("transition-duration").replace(",","."));s&&t&&(h.transitionEnd(g),p=!0);const e=100*(a.rtl?o.index():-o.index());h.transform(`translate3d(${e}%,0,0)`)}h.parent().hasClass("tabs-swipeable-wrap")&&a.swiper&&(c=h.parent()[0].swiper,c&&c.activeIndex!==o.index()?(p=!0,c.once("slideChangeTransitionEnd",(()=>{g()})).slideTo(o.index(),s?void 0:0)):c&&c.animating&&(p=!0,c.once("slideChangeTransitionEnd",(()=>{g()}))));const u=h.children(".tab-active");if(u.removeClass("tab-active"),!l&&(!c||c&&!c.animating||c&&r)&&(u.hasClass("view")&&u.children(".page").length&&u.children(".page").each((t=>{e(t).trigger("page:tabhide"),a.emit("pageTabHide",t)})),u.trigger("tab:hide"),a.emit("tabHide",u[0])),o.addClass("tab-active"),!l&&(!c||c&&!c.animating||c&&r)&&(o.hasClass("view")&&o.children(".page").length&&o.children(".page").each((t=>{e(t).trigger("page:tabshow"),a.emit("pageTabShow",t)})),o.trigger("tab:show"),a.emit("tabShow",o[0])),!b&&(b=e("string"==typeof n?`.tab-link[href="${n}"]`:`.tab-link[href="#${o.attr("id")}"]`),(!b||b&&0===b.length)&&e("[data-tab]").each((t=>{o.is(e(t).attr("data-tab"))&&(b=e(t))})),r&&(!b||b&&0===b.length)&&(b=e(`[data-route-tab-id="${r.route.tab.id}"]`),0===b.length&&(b=e(`.tab-link[href="${r.url}"]`))),b.length>1&&o.parents(".page").length&&(b=b.filter((t=>e(t).parents(".page")[0]===o.parents(".page")[0])),"ios"===a.theme&&0===b.length&&r))){const t=o.parents(".page"),n=e(a.navbar.getElByPage(t));b=n.find(`[data-route-tab-id="${r.route.tab.id}"]`),0===b.length&&(b=n.find(`.tab-link[href="${r.url}"]`))}if(b.length>0){let t;if(u&&u.length>0){const a=u.attr("id");a&&(t=e(`.tab-link[href="#${a}"]`),(!t||t&&0===t.length)&&(t=e(`.tab-link[data-route-tab-id="${a}"]`))),(!t||t&&0===t.length)&&e("[data-tab]").each((a=>{u.is(e(a).attr("data-tab"))&&(t=e(a))})),(!t||t&&0===t.length)&&(t=b.siblings(".tab-link-active"))}else r&&(t=b.siblings(".tab-link-active"));if(t&&t.length>1&&u&&u.parents(".page").length&&(t=t.filter((t=>e(t).parents(".page")[0]===u.parents(".page")[0]))),t&&t.length>0&&t.removeClass("tab-link-active"),b&&b.length>0){b.addClass("tab-link-active");const t=b.parents(".tabbar, .tabbar-labels");a.toolbar&&t.length>0&&(t.hasClass("tabbar-highlight")||"ios"!==a.theme)&&a.toolbar.setHighlight(t)}}return{$newTabEl:o,newTabEl:o[0],$oldTabEl:u,oldTabEl:u[0],onTabsChanged:function(t){d.push(t)},animated:p}}};var r={name:"tabs",create(){i(this,{tab:{show:s.show.bind(this)}})},on:{"pageInit tabMounted":function(t){const a=e(t.el||t).find(".tabs-animated-wrap > .tabs > .tab-active")[0];if(!a)return;this.tab.show({tabEl:a,animatedInit:!0,animate:!1})}},clicks:{".tab-link":function(t,a={}){if(t.attr("href")&&0===t.attr("href").indexOf("#")||t.attr("data-tab")){this.tab.show({tabEl:a.tab||t.attr("href"),tabLinkEl:t,animate:a.animate})}}}};if(a){if(t.prototype.modules&&t.prototype.modules[r.name])return;t.use(r),t.instance&&(t.instance.useModuleParams(r,t.instance.params),t.instance.useModule(r))}return r}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/toast/toast.d.ts

@@ -60,9 +60,9 @@ export namespace Toast {
     params: Parameters;
 
     /** Open toast */
-    open(): Toast;
+    open(animate?: boolean): Toast;
     /** Close toast */
-    close(): Toast;
+    close(animate?: boolean): Toast;
     /** Destroy toast */
     destroy(): void;
   }

package/components/toolbar/toolbar-aurora.less

@@ -10,19 +10,6 @@
   }
   .tabbar,
   .tabbar-labels {
-    .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;
-      });
-    }
     .toolbar-inner {
       padding-left: 0;
       padding-right: 0;

package/components/toolbar/toolbar-md.less

@@ -26,19 +26,6 @@
       overflow: hidden;
       position: relative;
     }
-    .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-labels {

package/components/toolbar/toolbar.js

@@ -3,8 +3,8 @@ import { nextFrame, bindMethods } from '../../shared/utils.js';
 const Toolbar = {
   setHighlight(tabbarEl) {
     const app = this;
-    if (app.theme === 'ios') return;
     const $tabbarEl = $(tabbarEl);
+    if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
     if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) return;
     let $highlightEl = $tabbarEl.find('.tab-link-highlight');
     const tabLinksCount = $tabbarEl.find('.tab-link').length;

package/components/toolbar/toolbar.less

@@ -153,6 +153,19 @@
     height: var(--f7-tabbar-icon-size);
     line-height: var(--f7-tabbar-icon-size);
   }
+  .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-labels {
   --f7-toolbar-height: var(--f7-tabbar-labels-height);

package/components/view/view.d.ts

@@ -158,6 +158,8 @@ export namespace View {
     browserHistoryInitialMatch?: boolean;
     /**	When enabled (by default), it will store router history in localStorage and try to restore it on next web app visit */
     browserHistoryStoreHistory?: boolean;
+    /** When "replace" (by default), it will replace state on routable tabs change, otherwise (if "push"), it will add to history every routable tab change, so it will be possible to switch back between tabs with browser back button */
+    browserHistoryTabs?: 'replace' | 'push';
     /** Object with events handlers.. */
     on?: {
       [event in keyof Events]?: Events[event];

package/components/view/view.js

@@ -98,6 +98,7 @@ export default {
       browserHistoryOnLoad: true,
       browserHistoryInitialMatch: false,
       browserHistoryStoreHistory: true,
+      browserHistoryTabs: 'replace',
       // Animate Pages
       animate: true,
       // iOS Dynamic Navbar