5.5.1 release

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 # Change Log
 
+# [v5.5.1](https://github.com/framework7io/framework7/compare/v5.5.0...v5.5.1) - March 20, 2020
+  * Core
+    * Action Sheet
+      * Fixed issue when it stops to emit events when converted to popover
+      * Added `cssClass` parameter to add custom css class to generated element
+    * Login Screen
+      * Fixed issue with appearance in dark theme
+    * Popup
+      * New events when swipeToClose enabled: `swipeStart`, `swipeMove`, `swipeEnd`, `swipeClose`
+    * Searchbar
+      * Fixed inline-searchbar styles when used with large navbar
+    * Subnavbar
+      * Fixed issue with disabled pointer-events in hidden navbar
+  * Minor fixes
+
 # [v5.5.0](https://github.com/framework7io/framework7/compare/v5.4.5...v5.5.0) - March 6, 2020
   * Core
     * Card

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

@@ -105,6 +105,24 @@ class Actions extends Modal {
           targetY,
           targetWidth,
           targetHeight,
+          on: {
+            open() {
+              actions.$el.trigger(`modal:open ${actions.type.toLowerCase()}:open`);
+              actions.emit(`local::open modalOpen ${actions.type}Open`, actions);
+            },
+            opened() {
+              actions.$el.trigger(`modal:opened ${actions.type.toLowerCase()}:opened`);
+              actions.emit(`local::opened modalOpened ${actions.type}Opened`, actions);
+            },
+            close() {
+              actions.$el.trigger(`modal:close ${actions.type.toLowerCase()}:close`);
+              actions.emit(`local::close modalClose ${actions.type}Close`, actions);
+            },
+            closed() {
+              actions.$el.trigger(`modal:closed ${actions.type.toLowerCase()}:closed`);
+              actions.emit(`local::closed modalClosed ${actions.type}Closed`, actions);
+            },
+          },
         });
         popover.open(animate);
         popover.once('popoverOpened', () => {
@@ -215,8 +233,9 @@ class Actions extends Modal {
     const actions = this;
     if (actions.params.render) return actions.params.render.call(actions, actions);
     const { groups } = actions;
+    const cssClass = actions.params.cssClass;
     return `
-      <div class="actions-modal${actions.params.grid ? ' actions-grid' : ''}">
+      <div class="actions-modal${actions.params.grid ? ' actions-grid' : ''} ${cssClass || ''}">
         ${groups.map(group => `<div class="actions-group">
             ${group.map((button) => {
               const buttonClasses = [`actions-${button.label ? 'label' : 'button'}`];
@@ -243,8 +262,9 @@ class Actions extends Modal {
     const actions = this;
     if (actions.params.renderPopover) return actions.params.renderPopover.call(actions, actions);
     const { groups } = actions;
+    const cssClass = actions.params.cssClass;
     return `
-      <div class="popover popover-from-actions">
+      <div class="popover popover-from-actions ${cssClass || ''}">
         <div class="popover-inner">
           ${groups.map(group => `
             <div class="list">

packages/core/components/actions/actions.d.ts

@@ -54,6 +54,8 @@ export namespace Actions {
     content?:string
     /** Enables Action Sheet backdrop (dark semi transparent layer behind)*/
     backdrop?:boolean
+    /** Custom css class added to Actions Sheet element */
+    cssClass?: string
     /** When enabled, action sheet will be closed on backdrop click*/
     closeByBackdropClick?:boolean
     /** When enabled, action sheet will be closed on when click outside of it*/
@@ -147,4 +149,4 @@ export namespace Actions {
 
 declare const ActionsComponent: Framework7Plugin;
 
-export default ActionsComponent;
+export default ActionsComponent;

packages/core/components/actions/actions.js

@@ -9,6 +9,7 @@ export default {
       forceToPopover: false,
       backdrop: true,
       backdropEl: undefined,
+      cssClass: null,
       closeByBackdropClick: true,
       closeOnEscape: false,
       render: null,