4.5.0 release

CHANGELOG.md

@@ -2,6 +2,43 @@
 
 # Change Log
 
+# [v4.5.0](https://github.com/framework7io/framework7/compare/v4.4.10...v4.5.0) - August 21, 2019
+  * Core
+    * Router Component
+      * Fixed issue breaking rendering when root component element is not a `div`
+    * Searchbar
+      * Fixed issue with scroll for expandable Searchbar in RTL direction
+    * Sortable
+      * Now new `no-sorting` or `disallow-sorting` class can be added to specific list item to disable sorting for it
+    * Infinite Scroll
+      * Fixed issue when it may not work on routable tab if routable tab content is infinite-scroll element
+    * Pull To Refresh
+      * Fixed issue when it may not work on routable tab if routable tab content is PTR element
+    * Dialog
+      * Fixed issue when calling `.close()` on queued dialog would still open it
+    * Smart Select
+      * New `formatValueText(values)` parameter to return formatted (custom) text value that appears on list item (in `item-after`)
+      * New `setValueText` (by default is `true`) parameter to set formatted text value on list item (in `item-after`)
+      * Now it emits `beforeOpen(instance, prevent)` event that allows to prevent its opening by calling `prevent()` function
+    * Preloader
+      * Fixed issue when it didn't initialize correctly in routable tab
+    * Progressbar
+      * Fixed issue when it didn't initialize correctly in routable tab
+    * Popover
+      * Fixed issue when during positioning it didn't consider top safe area
+  * Phenome
+    * Button, FabButton, Fab, Icon, Link, ListButton, ListItem
+      * Imporved `tooltip` prop reactivity to change, set or unset tooltip correctly
+    * ListItem
+      * Now settings `sortable: false` prop on it, will prevent this specific item from sorting
+    * Navbar
+      * `nav-left` slot is also available as `left` slot
+      * `nav-right` slot is also available as `right` slot
+      * New `title-large` slot to add custom content/layout to large title text 
+    * List, ListGroup
+      * New `sortableMoveElements` (boolean) prop that allow to override same `sortable.moveElements` global app parameter. That when disabled (`false`) won't move DOM elements on sort
+  * Minor fixes
+
 # [v4.4.10](https://github.com/framework7io/framework7/compare/v4.4.9...v4.4.10) - July 29, 2019
   * Core
     * Device

packages/core/components/color-picker/color-picker-class.js

@@ -547,7 +547,7 @@ class ColorPicker extends Framework7Class {
     self.attachEvents();
 
     params.modules.forEach((m) => {
-      if (typeof m === 'string' && modules[m] && modules[m].render) {
+      if (typeof m === 'string' && modules[m] && modules[m].init) {
         modules[m].init(self);
       } else if (m && m.init) {
         m.init(self);

packages/core/components/infinite-scroll/infinite-scroll.js

@@ -70,14 +70,18 @@ export default {
     tabMounted(tabEl) {
       const app = this;
       const $tabEl = $(tabEl);
-      $tabEl.find('.infinite-scroll-content').each((index, el) => {
+      const $isEls = $tabEl.find('.infinite-scroll-content');
+      if ($tabEl.is('.infinite-scroll-content')) $isEls.add($tabEl);
+      $isEls.each((index, el) => {
         app.infiniteScroll.create(el);
       });
     },
     tabBeforeRemove(tabEl) {
       const $tabEl = $(tabEl);
       const app = this;
-      $tabEl.find('.infinite-scroll-content').each((index, el) => {
+      const $isEls = $tabEl.find('.infinite-scroll-content');
+      if ($tabEl.is('.infinite-scroll-content')) $isEls.add($tabEl);
+      $isEls.each((index, el) => {
         app.infiniteScroll.destroy(el);
       });
     },

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

@@ -162,6 +162,9 @@ class Modal extends Framework7Class {
     }
 
     if (!$el || !$el.hasClass('modal-in')) {
+      if (dialogsQueue.indexOf(modal) >= 0) {
+        dialogsQueue.splice(dialogsQueue.indexOf(modal), 1);
+      }
       return modal;
     }
 

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

@@ -166,6 +166,8 @@ class Popover extends Modal {
     let targetHeight;
     let targetOffsetLeft;
     let targetOffsetTop;
+    let safeAreaTop = parseInt($('html').css('--f7-safe-area-top'), 10);
+    if (Number.isNaN(safeAreaTop)) safeAreaTop = 0;
     if ($targetEl && $targetEl.length > 0) {
       targetWidth = $targetEl.outerWidth();
       targetHeight = $targetEl.outerHeight();
@@ -193,7 +195,7 @@ class Popover extends Modal {
         // On bottom
         position = 'bottom';
         top = targetOffsetTop + targetHeight;
-      } else if (height < targetOffsetTop) {
+      } else if (height < targetOffsetTop - safeAreaTop) {
         // On top
         top = targetOffsetTop - height;
         position = 'top';
@@ -221,7 +223,7 @@ class Popover extends Modal {
       $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
     } else {
       // ios and aurora
-      if ((height + angleSize) < targetOffsetTop) {
+      if ((height + angleSize) < targetOffsetTop - safeAreaTop) {
         // On top
         top = targetOffsetTop - height - angleSize;
       } else if ((height + angleSize) < app.height - targetOffsetTop - targetHeight) {