@xenknight/framework7 0.0.2

package/components/actions/actions-class.js

@@ -0,0 +1,325 @@
+/* eslint indent: ["off"] */
+import { getWindow, getDocument } from 'ssr-window';
+import { getDevice } from '../../shared/get-device.js';
+import { extend, nextTick } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
+import $ from '../../shared/dom7.js';
+/** @jsx $jsx */
+import $jsx from '../../shared/$jsx.js';
+class Actions extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, app.params.actions, params);
+
+    // Extends with open/close Modal methods;
+    super(app, extendedParams);
+    const actions = this;
+    const device = getDevice();
+    const window = getWindow();
+    const document = getDocument();
+    actions.params = extendedParams;
+
+    // Buttons
+    let groups;
+    if (actions.params.buttons) {
+      groups = actions.params.buttons;
+      if (!Array.isArray(groups[0])) groups = [groups];
+    }
+    actions.groups = groups;
+
+    // Find Element
+    let $el;
+    if (actions.params.el) {
+      $el = $(actions.params.el).eq(0);
+    } else if (actions.params.content) {
+      $el = $(actions.params.content).filter(node => node.nodeType === 1).eq(0);
+    } else if (actions.params.buttons) {
+      if (actions.params.convertToPopover) {
+        actions.popoverHtml = actions.renderPopover();
+      }
+      actions.actionsHtml = actions.render();
+    }
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+    if ($el && $el.length === 0 && !(actions.actionsHtml || actions.popoverHtml)) {
+      return actions.destroy();
+    }
+
+    // Backdrop
+    let $backdropEl;
+    if (actions.params.backdrop && actions.params.backdropEl) {
+      $backdropEl = $(actions.params.backdropEl);
+    } else if (actions.params.backdrop) {
+      if (actions.params.backdropUnique) {
+        $backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
+        actions.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = actions.$containerEl.children('.actions-backdrop');
+      }
+      if ($backdropEl.length === 0) {
+        $backdropEl = $('<div class="actions-backdrop"></div>');
+        actions.$containerEl.append($backdropEl);
+      }
+    }
+    const originalOpen = actions.open;
+    const originalClose = actions.close;
+    let popover;
+    function buttonOnClick(e) {
+      const $buttonEl = $(this);
+      let buttonIndex;
+      let groupIndex;
+      if ($buttonEl.hasClass('list-button') || $buttonEl.hasClass('item-link')) {
+        buttonIndex = $buttonEl.parents('li').index();
+        groupIndex = $buttonEl.parents('.list').index();
+      } else {
+        buttonIndex = $buttonEl.index();
+        groupIndex = $buttonEl.parents('.actions-group').index();
+      }
+      if (typeof groups !== 'undefined') {
+        const button = groups[groupIndex][buttonIndex];
+        if (button.onClick) button.onClick(actions, e);
+        if (actions.params.onClick) actions.params.onClick(actions, e);
+        if (button.close !== false) actions.close();
+      }
+    }
+    actions.open = function open(animate) {
+      let convertToPopover = false;
+      const {
+        targetEl,
+        targetX,
+        targetY,
+        targetWidth,
+        targetHeight
+      } = actions.params;
+      if (actions.params.convertToPopover && (targetEl || targetX !== undefined && targetY !== undefined)) {
+        // Popover
+        if (actions.params.forceToPopover || device.ios && device.ipad || app.width >= 768 || device.desktop) {
+          convertToPopover = true;
+        }
+      }
+      if (convertToPopover && actions.popoverHtml) {
+        popover = app.popover.create({
+          containerEl: actions.params.containerEl,
+          content: actions.popoverHtml,
+          backdrop: actions.params.backdrop,
+          targetEl,
+          targetX,
+          targetY,
+          targetWidth,
+          targetHeight,
+          on: {
+            open() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+              actions.$el.trigger(`modal:open ${actions.type.toLowerCase()}:open`);
+              actions.emit(`local::open modalOpen ${actions.type}Open`, actions);
+            },
+            opened() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+              actions.$el.trigger(`modal:opened ${actions.type.toLowerCase()}:opened`);
+              actions.emit(`local::opened modalOpened ${actions.type}Opened`, actions);
+            },
+            close() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+              actions.$el.trigger(`modal:close ${actions.type.toLowerCase()}:close`);
+              actions.emit(`local::close modalClose ${actions.type}Close`, actions);
+            },
+            closed() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+              actions.$el.trigger(`modal:closed ${actions.type.toLowerCase()}:closed`);
+              actions.emit(`local::closed modalClosed ${actions.type}Closed`, actions);
+            }
+          }
+        });
+        popover.open(animate);
+        popover.once('popoverOpened', () => {
+          popover.$el.find('.list-button, .item-link').each(buttonEl => {
+            $(buttonEl).on('click', buttonOnClick);
+          });
+        });
+        popover.once('popoverClosed', () => {
+          popover.$el.find('.list-button, .item-link').each(buttonEl => {
+            $(buttonEl).off('click', buttonOnClick);
+          });
+          nextTick(() => {
+            popover.destroy();
+            popover = undefined;
+          });
+        });
+      } else {
+        actions.$el = actions.actionsHtml ? $(actions.actionsHtml) : actions.$el;
+        actions.$el[0].f7Modal = actions;
+        if (actions.groups) {
+          actions.$el.find('.actions-button').each(buttonEl => {
+            $(buttonEl).on('click', buttonOnClick);
+          });
+          actions.once('actionsClosed', () => {
+            actions.$el.find('.actions-button').each(buttonEl => {
+              $(buttonEl).off('click', buttonOnClick);
+            });
+          });
+        }
+        actions.el = actions.$el[0];
+        originalOpen.call(actions, animate);
+      }
+      return actions;
+    };
+    actions.close = function close(animate) {
+      if (popover) {
+        popover.close(animate);
+      } else {
+        originalClose.call(actions, animate);
+      }
+      return actions;
+    };
+    extend(actions, {
+      app,
+      $el,
+      el: $el ? $el[0] : undefined,
+      $backdropEl,
+      backdropEl: $backdropEl && $backdropEl[0],
+      type: 'actions'
+    });
+    function handleClick(e) {
+      const target = e.target;
+      const $target = $(target);
+      const keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
+      if (keyboardOpened) return;
+      if ($target.closest(actions.el).length === 0) {
+        if (actions.params.closeByBackdropClick && actions.params.backdrop && actions.backdropEl && actions.backdropEl === target) {
+          actions.close();
+        } else if (actions.params.closeByOutsideClick) {
+          actions.close();
+        }
+      }
+    }
+    function onKeyDown(e) {
+      const keyCode = e.keyCode;
+      if (keyCode === 27 && actions.params.closeOnEscape) {
+        actions.close();
+      }
+    }
+    if (actions.params.closeOnEscape) {
+      actions.on('open', () => {
+        $(document).on('keydown', onKeyDown);
+      });
+      actions.on('close', () => {
+        $(document).off('keydown', onKeyDown);
+      });
+    }
+    actions.on('opened', () => {
+      if (actions.params.closeByBackdropClick || actions.params.closeByOutsideClick) {
+        app.on('click', handleClick);
+      }
+    });
+    actions.on('close', () => {
+      if (actions.params.closeByBackdropClick || actions.params.closeByOutsideClick) {
+        app.off('click', handleClick);
+      }
+    });
+    if ($el) {
+      $el[0].f7Modal = actions;
+    }
+    return actions;
+  }
+  render() {
+    const actions = this;
+    if (actions.params.render) return actions.params.render.call(actions, actions);
+    const {
+      groups
+    } = actions;
+    const cssClass = actions.params.cssClass;
+    return $jsx("div", {
+      class: `actions-modal${actions.params.grid ? ' actions-grid' : ''} ${cssClass || ''}`
+    }, groups.map(group => $jsx("div", {
+      class: "actions-group"
+    }, group.map(button => {
+      const buttonClasses = [`actions-${button.label ? 'label' : 'button'}`];
+      const {
+        color,
+        bg,
+        strong,
+        disabled,
+        label,
+        text,
+        icon
+      } = button;
+      if (color) buttonClasses.push(`color-${color}`);
+      if (bg) buttonClasses.push(`bg-color-${bg}`);
+      if (strong) buttonClasses.push('actions-button-strong');
+      if (disabled) buttonClasses.push('disabled');
+      if (label) {
+        return $jsx("div", {
+          class: buttonClasses.join(' ')
+        }, text);
+      }
+      return $jsx("div", {
+        class: buttonClasses.join(' ')
+      }, icon && $jsx("div", {
+        class: "actions-button-media"
+      }, icon), $jsx("div", {
+        class: "actions-button-text"
+      }, text));
+    }))));
+  }
+  renderPopover() {
+    const actions = this;
+    if (actions.params.renderPopover) return actions.params.renderPopover.call(actions, actions);
+    const {
+      groups
+    } = actions;
+    const cssClass = actions.params.cssClass;
+    return $jsx("div", {
+      class: `popover popover-from-actions ${cssClass || ''}`
+    }, $jsx("div", {
+      class: "popover-inner"
+    }, groups.map(group => $jsx("div", {
+      class: "list"
+    }, $jsx("ul", null, group.map(button => {
+      const itemClasses = [];
+      const {
+        color,
+        bg,
+        strong,
+        disabled,
+        label,
+        text,
+        icon
+      } = button;
+      if (color) itemClasses.push(`color-${color}`);
+      if (bg) itemClasses.push(`bg-color-${bg}`);
+      if (strong) itemClasses.push('popover-from-actions-strong');
+      if (disabled) itemClasses.push('disabled');
+      if (label) {
+        itemClasses.push('popover-from-actions-label');
+        return `<li class="${itemClasses.join(' ')}">${text}</li>`;
+      }
+      if (icon) {
+        itemClasses.push('item-link item-content');
+        return $jsx("li", null, $jsx("a", {
+          class: itemClasses.join(' ')
+        }, $jsx("div", {
+          class: "item-media"
+        }, icon), $jsx("div", {
+          class: "item-inner"
+        }, $jsx("div", {
+          class: "item-title"
+        }, text))));
+      }
+      itemClasses.push('list-button');
+      return $jsx("li", null, $jsx("a", {
+        class: itemClasses.join(' ')
+      }, text));
+    }))))));
+  }
+}
+export default Actions;

package/components/actions/actions-ios.less

@@ -0,0 +1,51 @@
+.ios {
+  .actions-group {
+    border-radius: var(--f7-actions-border-radius);
+  }
+  .actions-button,
+  .actions-label {
+    background: var(--f7-actions-bg-color);
+    .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
+    &:first-child {
+      border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
+    }
+    &:last-child {
+      .hairline-remove(bottom);
+      border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
+    }
+    &:first-child:last-child {
+      border-radius: var(--f7-actions-border-radius);
+    }
+    b,
+    &.actions-button-strong {
+      font-weight: 600;
+    }
+  }
+  .actions-grid {
+    .actions-group {
+      border-radius: 0;
+      background: var(--f7-actions-bg-color);
+      .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
+      &:first-child {
+        border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
+      }
+      &:last-child {
+        border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
+      }
+      &:first-child:last-child {
+        border-radius: var(--f7-actions-border-radius);
+      }
+    }
+    .actions-button,
+    .actions-label {
+      border-radius: 0 !important;
+    }
+  }
+  .actions-button-media {
+    margin-left: 16px;
+    + .actions-button-text {
+      text-align: left;
+      margin-left: 16px;
+    }
+  }
+}

package/components/actions/actions-md.less

@@ -0,0 +1,24 @@
+.md {
+  .actions-modal {
+    background-color: var(--f7-actions-bg-color);
+    border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
+    padding-bottom: var(--f7-safe-area-bottom);
+  }
+  .actions-button {
+    transition-duration: 300ms;
+  }
+  .actions-button,
+  .actions-label {
+    b,
+    &.actions-button-strong {
+      font-weight: 500;
+    }
+  }
+
+  .actions-button-media {
+    min-width: 40px;
+    + .actions-button-text {
+      margin-left: 16px;
+    }
+  }
+}

package/components/actions/actions-rtl.css

@@ -0,0 +1 @@
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:13px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-group{border-radius:var(--f7-actions-border-radius)}.ios .actions-button,.ios .actions-label{background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-button,.ios-translucent-modals .ios .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid .actions-group{border-radius:0;background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:0!important}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}

package/components/actions/actions-vars.less

@@ -0,0 +1,72 @@
+:root {
+  --f7-actions-grid-button-font-size: 12px;
+  --f7-actions-grid-button-icon-size: 48px;
+}
+.ios-vars({
+  --f7-actions-transition-timing-function: initial;
+  --f7-actions-border-radius: 13px;
+  /*
+  --f7-actions-button-text-color: var(--f7-theme-color);
+  */
+  --f7-actions-grid-button-text-color: #757575;
+  --f7-actions-button-padding: 0px;
+  --f7-actions-button-text-align: center;
+  --f7-actions-button-height: 57px;
+  --f7-actions-button-height-landscape: 44px;
+  --f7-actions-button-font-size: 20px;
+  --f7-actions-button-icon-size: 28px;
+  --f7-actions-button-justify-content: center;
+  --f7-actions-label-padding: 8px 10px;
+  --f7-actions-label-font-weight: 400;
+  --f7-actions-label-font-size: 13px;
+  --f7-actions-label-justify-content: center;
+  --f7-actions-group-border-color: transparent;
+  --f7-actions-group-margin: 8px;
+  .light-vars({
+    --f7-actions-bg-color: rgba(255,255,255,0.95);
+    --f7-actions-bg-color-rgb: 255, 255, 255;
+    --f7-actions-button-border-color: rgba(0,0,0,0.2);
+    --f7-actions-button-pressed-bg-color: rgba(230,230,230,0.9);
+    --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
+    --f7-actions-label-text-color: #8a8a8a;
+  });
+  .dark-vars({
+    --f7-actions-bg-color: rgba(45,45,45,0.95);
+    --f7-actions-bg-color-rgb: 45, 45, 45;
+    --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
+    --f7-actions-button-pressed-bg-color: rgba(50,50,50,0.9);
+    --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
+    --f7-actions-label-text-color:rgba(255,255,255,0.55);
+
+  })
+});
+.md-vars({
+  --f7-actions-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  --f7-actions-border-radius: 16px;
+  --f7-actions-button-border-color: transparent;
+  --f7-actions-button-padding: 0 16px;
+  --f7-actions-button-text-align: left;
+  --f7-actions-button-height: 48px;
+  --f7-actions-button-height-landscape: 48px;
+  --f7-actions-button-font-size: 16px;
+  --f7-actions-button-icon-size: 24px;
+  --f7-actions-button-justify-content: space-between;
+  --f7-actions-label-padding: 12px 16px;
+  --f7-actions-label-font-size: 14px;
+  --f7-actions-label-font-weight: 500;
+  --f7-actions-label-justify-content: flex-start;
+  --f7-actions-group-margin: 0px;
+  .light-vars({
+    --f7-actions-button-pressed-bg-color: #e5e5e5;
+  });
+  .dark-vars({
+    --f7-actions-button-pressed-bg-color: #2e2e2e;
+  });
+});
+.md-color-vars({
+  --f7-actions-button-text-color: var(--f7-md-on-surface);
+  --f7-actions-bg-color: var(--f7-md-surface-3);
+  --f7-actions-group-border-color: var(--f7-md-outline);
+  --f7-actions-label-text-color: var(--f7-theme-color);
+  --f7-actions-grid-button-text-color: var(--f7-md-on-surface);
+});

package/components/actions/actions.css

@@ -0,0 +1 @@
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:13px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-group{border-radius:var(--f7-actions-border-radius)}.ios .actions-button,.ios .actions-label{background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-button,.ios-translucent-modals .ios .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid .actions-group{border-radius:0;background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:0!important}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}

package/components/actions/actions.d.ts

@@ -0,0 +1,164 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Actions {
+  interface Actions extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Action sheet HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with action sheet HTML element */
+    $el: Dom7Array;
+    /** Backdrop HTML element */
+    backdropEl: HTMLElement;
+    /** Dom7 instance with backdrop HTML element */
+    $backdropEl: Dom7Array;
+    /** Action sheet instance parameters */
+    params: Parameters;
+    /** Boolean prop indicating whether action sheet is opened or not */
+    opened: boolean;
+
+    /** Open action sheet. Where animate - boolean (by default true) - defines whether it should be opened with animation */
+    open(animate?: boolean): void;
+    /** Close action sheet. Where animate - boolean (by default true) - defines whether it should be closed with animation */
+    close(animate?: boolean): void;
+    /** Destroy action sheet */
+    destroy(): void;
+  }
+
+  interface Button {
+    /** String with Button's text (could be HTML string) */
+    text: string;
+    /** HTML string of icon */
+    icon?: string;
+    /** Enables strong button text */
+    strong?: boolean;
+    /** Button color, one of default colors */
+    color?: string;
+    /** Button background color, one of default colors */
+    bg?: string;
+    /** If enabled then it will be rendered as label instead of button */
+    label?: boolean;
+    /** Defines whether the button is disabled or not. */
+    disabled?: boolean;
+    /** If enabled then button click will close Action Sheet */
+    close?: boolean;
+    /** Callback function that will be executed after click on this button */
+    onClick?: (actions: Actions, e: unknown) => void;
+  }
+
+  interface Parameters {
+    /** Action Sheet element. Can be useful if you already have Action Sheet element in your HTML and want to create new instance using this element*/
+    el?: HTMLElement | CSSSelector;
+    /** Full Action Sheet HTML content string. Can be useful if you want to create Action Sheet element with custom HTML*/
+    content?: string;
+    /** Enables Action Sheet backdrop (dark semi transparent layer behind)*/
+    backdrop?: boolean;
+    /** Backdrop element to share across instances */
+    backdropEl?: HTMLElement | CSSSelector;
+    /** If enabled it creates unique backdrop element exclusively for this modal (default false) */
+    backdropUnique?: 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*/
+    closeByOutsideClick?: boolean;
+    /** When enabled, action sheet will be closed on ESC keyboard key press (default false) */
+    closeOnEscape?: boolean;
+    /** Whether the Action Sheet should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods*/
+    animate?: boolean;
+    /** Action sheet groups/buttons. In this case Actions layout will be generated dynamically based on passed groups and buttons. In case of groups it should array where each item represent array with buttons for group.*/
+    buttons?: Button[] | Button[][];
+    /** Enables grid buttons layout*/
+    grid?: boolean;
+    /** When enabled, action sheet will be converted to Popover on large screens.*/
+    convertToPopover?: boolean;
+    /** When enabled, action sheet will be always converted to Popover.*/
+    forceToPopover?: boolean;
+    /** HTML element or string CSS selector of target element. Required when conversion to popover is in use*/
+    targetEl?: HTMLElement | CSSSelector;
+    /** Virtual target element horizontal offset from left side of the screen. Required when conversion to popover is in use without using real target element (targetEl)*/
+    targetX?: number;
+    /** Virtual target element vertical offset from top of the screen. Required when conversion to popover is in use without using real target element (targetEl)*/
+    targetY?: number;
+    /** Virtual target element width (in px). Required when conversion to popover is in use without using real target element (targetEl)*/
+    targetWidth?: number;
+    /** Virtual target element height (in px). Required when conversion to popover is in use without using real target element (targetEl)*/
+    targetHeight?: number;
+    /** Element to mount modal to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+    /** Callback function that will be executed after click on the Action Sheet button*/
+    onClick?: (actions: Actions, e: unknown) => void;
+    /** Custom function to render Action Sheet. Must return Action Sheet html*/
+    render?: () => string;
+    /** Custom function to render Popover when conversion to popover is in use. Must return Popover html*/
+    renderPopover?: () => string;
+    /** Object with event handlers */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered when Action Sheet starts its opening animation. As an argument event handler receives action sheet instance */
+    open: (actions: Actions) => void;
+    /** Event will be triggered after Action Sheet completes its opening animation. As an argument event handler receives action sheet instance */
+    opened: (actions: Actions) => void;
+    /** Event will be triggered when Action Sheet starts its closing animation. As an argument event handler receives action sheet instance */
+    close: (actions: Actions) => void;
+    /** Event will be triggered after Action Sheet completes its closing animation. As an argument event handler receives action sheet instance */
+    closed: (actions: Actions) => void;
+    /** Event will be triggered right before Action Sheet instance will be destroyed. As an argument event handler receives action sheet instance */
+    beforeDestroy: (actions: Actions) => void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered when Action Sheet starts its opening animation */
+    'actions:open': (actions: Actions) => void;
+    /** Event will be triggered after Action Sheet completes its opening animation */
+    'actions:opened': (actions: Actions) => void;
+    /** Event will be triggered when Action Sheet starts its closing animation */
+    'actions:close': (actions: Actions) => void;
+    /** Event will be triggered after Action Sheet completes its closing animation */
+    'actions:closed': (actions: Actions) => void;
+  }
+
+  interface AppMethods {
+    actions: {
+      /** create Action Sheet instance */
+      create(parameters: Parameters): Actions;
+      /** destroy Action Sheet instance */
+      destroy(el: HTMLElement | CSSSelector | Actions): void;
+      /** get Action Sheet instance by HTML element */
+      get(el?: HTMLElement | CSSSelector): Actions;
+      /** opens Action Sheet */
+      open(el?: HTMLElement | CSSSelector, animate?: boolean): Actions;
+      /** closes Action Sheet */
+      close(el?: HTMLElement | CSSSelector, animate?: boolean): Actions;
+    };
+  }
+  interface AppParams {
+    actions?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when Action Sheet starts its opening animation. As an argument event handler receives action sheet instance */
+    actionsOpen: (actions: Actions) => void;
+    /** Event will be triggered after Action Sheet completes its opening animation. As an argument event handler receives action sheet instance */
+    actionsOpened: (actions: Actions) => void;
+    /** Event will be triggered when Action Sheet starts its closing animation. As an argument event handler receives action sheet instance */
+    actionsClose: (actions: Actions) => void;
+    /** Event will be triggered after Action Sheet completes its closing animation. As an argument event handler receives action sheet instance */
+    actionsClosed: (actions: Actions) => void;
+    /** Event will be triggered right before Action Sheet instance will be destroyed. As an argument event handler receives action sheet instance */
+    actionsBeforeDestroy: (actions: Actions) => void;
+  }
+}
+
+declare const ActionsComponent: Framework7Plugin;
+
+export default ActionsComponent;