3.3.2 release

Author: nolimits4web

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 # Change Log
 
+# [v3.3.2](https://github.com/framework7io/framework7/compare/v3.3.1...v3.3.2) - September 20, 2018
+  * Core
+    * Support for new iPhone XR / XS / XS Max
+    * View
+      * Now it emits `view:init` DOM event and `viewInit` app event
+    * Router
+      * Now it is possible to pass React/Vue component `props` in route `options` or when navigating like `router.navigate('/somepage/', { props: { foo: 'bar' } })`
+  * Phenome
+    * View Component - added support `viewInit` event
+    * Improved TypeScript declaration for React components events
+  * Minor fixes
+
 # [v3.3.1](https://github.com/framework7io/framework7/compare/v3.3.0...v3.3.1) - September 14, 2018
   * Core
     * Router

packages/core/components/grid/grid-ios.less

@@ -4,8 +4,8 @@
   .row {
     .-(@i: length(@cols)) when (@i > 0) {
       @divider: e(extract(@cols, @i));
-      @className: `Math.floor(@{divider})`;
-      @n: `100/parseFloat(@{divider})`;
+      @className: framework7_floor(@divider);
+      @n: framework7_calculateN(@divider);
       @n-1: @n - 1;
       .col-@{className} {
         width: ~"@{divider}%";
@@ -42,8 +42,8 @@
     .row {
       .-(@i: length(@cols)) when (@i > 0) {
         @divider: e(extract(@cols, @i));
-        @className: `Math.floor(@{divider})`;
-        @n: `100/parseFloat(@{divider})`;
+        @className: framework7_floor(@divider);
+        @n: framework7_calculateN(@divider);
         @n-1: @n - 1;
         .tablet-@{className} {
           width: ~"@{divider}%";
@@ -79,8 +79,8 @@
     .row {
       .-(@i: length(@cols)) when (@i > 0) {
         @divider: e(extract(@cols, @i));
-        @className: `Math.floor(@{divider})`;
-        @n: `100/parseFloat(@{divider})`;
+        @className: framework7_floor(@divider);
+        @n: framework7_calculateN(@divider);
         @n-1: @n - 1;
         .desktop-@{className} {
           width: ~"@{divider}%";

packages/core/components/grid/grid-md.less

@@ -4,8 +4,8 @@
   .row {
     .-(@i: length(@cols)) when (@i > 0) {
       @divider: e(extract(@cols, @i));
-      @className: `Math.floor(@{divider})`;
-      @n: `100/parseFloat(@{divider})`;
+      @className: framework7_floor(@divider);
+      @n: framework7_calculateN(@divider);
       @n-1: @n - 1;
       .col-@{className} {
         width: ~"@{divider}%";
@@ -42,8 +42,8 @@
     .row {
       .-(@i: length(@cols)) when (@i > 0) {
         @divider: e(extract(@cols, @i));
-        @className: `Math.floor(@{divider})`;
-        @n: `100/parseFloat(@{divider})`;
+        @className: framework7_floor(@divider);
+        @n: framework7_calculateN(@divider);
         @n-1: @n - 1;
         .tablet-@{className} {
           width: ~"@{divider}%";
@@ -80,8 +80,8 @@
     .row {
       .-(@i: length(@cols)) when (@i > 0) {
         @divider: e(extract(@cols, @i));
-        @className: `Math.floor(@{divider})`;
-        @n: `100/parseFloat(@{divider})`;
+        @className: framework7_floor(@divider);
+        @n: framework7_calculateN(@divider);
         @n-1: @n - 1;
         .desktop-@{className} {
           width: ~"@{divider}%";

packages/core/components/searchbar/searchbar-class.js

@@ -291,6 +291,9 @@ class Searchbar extends FrameworkClass {
         sb.backdropShow();
       }
       sb.$el.addClass('searchbar-enabled');
+      if (!sb.$disableButtonEl || (sb.$disableButtonEl && sb.$disableButtonEl.length === 0)) {
+        sb.$el.addClass('searchbar-enabled-no-disable-button');
+      }
       if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme === 'ios') {
         if (!sb.disableButtonHasMargin) {
           sb.setDisableButtonMargin();
@@ -337,8 +340,7 @@ class Searchbar extends FrameworkClass {
     if (!sb.enabled) return sb;
     const app = sb.app;
     sb.$inputEl.val('').trigger('change');
-    sb.$el.removeClass('searchbar-enabled');
-    sb.$el.removeClass('searchbar-focused');
+    sb.$el.removeClass('searchbar-enabled searchbar-focused searchbar-enabled-no-disable-button');
     if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme === 'ios') {
       sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
     }
@@ -391,6 +393,7 @@ class Searchbar extends FrameworkClass {
         sb.enable();
       }
       sb.$inputEl.val(query);
+      sb.$inputEl.trigger('input');
     }
     sb.query = query;
     sb.value = query;

packages/core/components/searchbar/searchbar-md.less

@@ -63,7 +63,7 @@
       .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='#737373'/></svg>");
     });
   }
-  .searchbar-enabled {
+  .searchbar-enabled:not(.searchbar-enabled-no-disable-button) {
     .searchbar-disable-button {
       transform: rotate(0deg) scale(1);
       pointer-events: auto;

packages/core/components/smart-select/smart-select-class.js

@@ -342,9 +342,9 @@ class SmartSelect extends Framework7Class {
       const $itemTitleEl = ss.$el.find('.item-title');
       pageTitle = $itemTitleEl.length ? $itemTitleEl.text().trim() : '';
     }
-    const cssClass = ss.params.cssClass;
+    const cssClass = ss.params.cssClass || '';
     const popupHtml = `
-      <div class="popup smart-select-popup ${cssClass}" data-select-name="${ss.selectName}">
+      <div class="popup smart-select-popup ${cssClass} ${ss.params.popupTabletFullscreen ? 'popup-tablet-fullscreen' : ''}" data-select-name="${ss.selectName}">
         <div class="view">
           <div class="page smart-select-page ${ss.params.searchbar ? 'page-with-subnavbar' : ''}" data-name="smart-select-page">
             <div class="navbar ${ss.params.navbarColorTheme ? `color-theme-${ss.params.navbarColorTheme}` : ''}">

packages/core/components/smart-select/smart-select.d.ts

@@ -31,6 +31,8 @@ export namespace SmartSelect {
     pageBackLinkText?: string
     /** Smart select Popup close link text (default 'Close') */
     popupCloseLinkText?: string
+    /** Smart select Popup will be opened as full screen popup on tablet */
+    popupTabletFullscreen?: boolean
     /** Smart select Sheet close link text (default 'Done') */
     sheetCloseLinkText?: string
     /** Enables Searchbar on smart select page. If passed as object then it should be valid Searchbar parameters (default false) */

packages/core/components/smart-select/smart-select.js

@@ -13,6 +13,7 @@ export default {
       pageTitle: undefined,
       pageBackLinkText: 'Back',
       popupCloseLinkText: 'Close',
+      popupTabletFullscreen: false,
       sheetCloseLinkText: 'Done',
       searchbar: false,
       searchbarPlaceholder: 'Search',

packages/core/components/tabs/tabs.js

@@ -4,6 +4,7 @@ import Utils from '../../utils/utils';
 const Tab = {
   show(...args) {
     const app = this;
+
     let tabEl;
     let tabLinkEl;
     let animate;
@@ -78,8 +79,9 @@ const Tab = {
     }
 
     // Swipeable tabs
+    let swiper;
     if ($tabsEl.parent().hasClass('tabs-swipeable-wrap') && app.swiper) {
-      const swiper = $tabsEl.parent()[0].swiper;
+      swiper = $tabsEl.parent()[0].swiper;
       if (swiper && swiper.activeIndex !== $newTabEl.index()) {
         animated = true;
         swiper
@@ -98,16 +100,18 @@ const Tab = {
 
     // Remove active class from old tabs
     const $oldTabEl = $tabsEl.children('.tab-active');
-    $oldTabEl
-      .removeClass('tab-active')
-      .trigger('tab:hide');
-    app.emit('tabHide', $oldTabEl[0]);
+    $oldTabEl.removeClass('tab-active');
+    if (!swiper || (swiper && !swiper.animating)) {
+      $oldTabEl.trigger('tab:hide');
+      app.emit('tabHide', $oldTabEl[0]);
+    }
 
     // Trigger 'show' event on new tab
-    $newTabEl
-      .addClass('tab-active')
-      .trigger('tab:show');
-    app.emit('tabShow', $newTabEl[0]);
+    $newTabEl.addClass('tab-active');
+    if (!swiper || (swiper && !swiper.animating)) {
+      $newTabEl.trigger('tab:show');
+      app.emit('tabShow', $newTabEl[0]);
+    }
 
     // Find related link for new tab
     if (!$tabLinkEl) {

packages/core/components/timeline/timeline.less

@@ -138,7 +138,7 @@
   @cols: 5, 10, 15, 20, 25, 30, 100/3, 35, 40, 45, 50, 55, 60, 65, 100*(2/3), 70, 75, 80, 85, 90, 95, 100;
   .-(@i: length(@cols)) when (@i > 0) {
     @divider: e(extract(@cols, @i));
-    @className: `Math.floor(@{divider})`;
+    @className: framework7_floor(@divider);
     &.col-@{className} .timeline-item {
       width: ~"@{divider}vw";
     }
@@ -148,7 +148,7 @@
   @media (min-width:768px) {
     .-(@i: length(@cols)) when (@i > 0) {
       @divider: e(extract(@cols, @i));
-      @className: `Math.floor(@{divider})`;
+      @className: framework7_floor(@divider);
       &.tablet-@{className} .timeline-item {
         width: ~"@{divider}vw";
       }