@xenknight/framework7 0.0.2

package/components/popover/popover-class.js

@@ -0,0 +1,293 @@
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import Modal from '../modal/modal-class.js';
+class Popover extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, app.params.popover, params);
+
+    // Extends with open/close Modal methods;
+    super(app, extendedParams);
+    const popover = this;
+    const device = getDevice();
+    const window = getWindow();
+    const document = getDocument();
+    popover.params = extendedParams;
+
+    // Find Element
+    let $el;
+    if (!popover.params.el) {
+      $el = $(popover.params.content).filter(node => node.nodeType === 1).eq(0);
+    } else {
+      $el = $(popover.params.el).eq(0);
+    }
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+
+    // Find Target
+    const $targetEl = $(popover.params.targetEl).eq(0);
+    if ($el.length === 0) {
+      return popover.destroy();
+    }
+
+    // Backdrop
+    let $backdropEl;
+    const forceBackdropUnique = popover.params.backdrop && app.$el.find('.popover.modal-in').filter(anotherPopoverEl => anotherPopoverEl !== $el[0]).length > 0;
+    if (popover.params.backdrop && popover.params.backdropEl) {
+      $backdropEl = $(popover.params.backdropEl);
+    } else if (popover.params.backdrop) {
+      if (popover.params.backdropUnique || forceBackdropUnique) {
+        $backdropEl = $('<div class="popover-backdrop popover-backdrop-unique"></div>');
+        $backdropEl[0].f7PopoverRef = popover;
+        popover.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = popover.$containerEl.children('.popover-backdrop');
+      }
+      if ($backdropEl.length === 0) {
+        $backdropEl = $('<div class="popover-backdrop"></div>');
+        popover.$containerEl.append($backdropEl);
+      }
+    }
+
+    // Find Arrow
+    let $arrowEl;
+    if ($el.find('.popover-arrow').length === 0 && popover.params.arrow) {
+      $arrowEl = $('<div class="popover-arrow"></div>');
+      $el.prepend($arrowEl);
+    } else {
+      $arrowEl = $el.find('.popover-arrow');
+    }
+
+    // Open
+    const originalOpen = popover.open;
+    extend(popover, {
+      app,
+      $el,
+      el: $el[0],
+      $targetEl,
+      targetEl: $targetEl[0],
+      $arrowEl,
+      arrowEl: $arrowEl[0],
+      $backdropEl,
+      backdropEl: $backdropEl && $backdropEl[0],
+      type: 'popover',
+      forceBackdropUnique,
+      open() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        let [targetEl, animate] = args;
+        if (typeof args[0] === 'boolean') [animate, targetEl] = args;
+        if (targetEl) {
+          popover.$targetEl = $(targetEl);
+          popover.targetEl = popover.$targetEl[0];
+        }
+        return originalOpen.call(popover, animate);
+      }
+    });
+    function handleResize() {
+      popover.resize();
+    }
+    popover.on('popoverOpen', () => {
+      popover.resize();
+      app.on('resize', handleResize);
+      $(window).on('keyboardDidShow keyboardDidHide', handleResize);
+      popover.on('popoverClose popoverBeforeDestroy', () => {
+        app.off('resize', handleResize);
+        $(window).off('keyboardDidShow keyboardDidHide', handleResize);
+      });
+    });
+    let touchStartTarget = null;
+    function handleTouchStart(e) {
+      touchStartTarget = e.target;
+    }
+    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(popover.el).length === 0) {
+        if (popover.params.closeByBackdropClick && popover.params.backdrop && popover.backdropEl && popover.backdropEl === target && touchStartTarget === target) {
+          popover.close();
+        } else if (popover.params.closeByOutsideClick && touchStartTarget === target) {
+          const isAnotherPopoverBackdrop = $target.hasClass('popover-backdrop-unique') && target.f7PopoverRef !== popover || $target.hasClass('popover-backdrop') && target !== popover.backdropEl;
+          const isAnotherPopoverTarget = target.closest('.popover') && target.closest('.popover') !== popover.$el[0];
+          if (!isAnotherPopoverBackdrop && !isAnotherPopoverTarget) {
+            popover.close();
+          }
+        }
+      }
+    }
+    function onKeyDown(e) {
+      const keyCode = e.keyCode;
+      if (keyCode === 27 && popover.params.closeOnEscape) {
+        popover.close();
+      }
+    }
+    if (popover.params.closeOnEscape) {
+      popover.on('popoverOpen', () => {
+        $(document).on('keydown', onKeyDown);
+      });
+      popover.on('popoverClose', () => {
+        $(document).off('keydown', onKeyDown);
+      });
+    }
+    popover.on('popoverOpened', () => {
+      if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) {
+        app.on('touchstart', handleTouchStart);
+        app.on('click', handleClick);
+      }
+    });
+    popover.on('popoverClose', () => {
+      if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) {
+        app.off('touchstart', handleTouchStart);
+        app.off('click', handleClick);
+      }
+    });
+    $el[0].f7Modal = popover;
+    return popover;
+  }
+  resize() {
+    const popover = this;
+    const {
+      app,
+      $el,
+      $targetEl,
+      $arrowEl
+    } = popover;
+    const {
+      targetX,
+      targetY,
+      verticalPosition
+    } = popover.params;
+    $el.css({
+      left: '',
+      top: ''
+    });
+    const [width, height] = [$el.width(), $el.height()];
+    let arrowSize = 0;
+    let arrowLeft;
+    let arrowTop;
+    const hasArrow = $arrowEl.length > 0;
+    const arrowMin = app.theme === 'ios' ? 13 : 24;
+    if (hasArrow) {
+      $arrowEl.removeClass('on-left on-right on-top on-bottom').css({
+        left: '',
+        top: ''
+      });
+      arrowSize = $arrowEl.width() / 2;
+    }
+    $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
+      left: '',
+      top: ''
+    });
+    let targetWidth;
+    let targetHeight;
+    let targetOffsetLeft;
+    let targetOffsetTop;
+    let safeAreaTop = parseInt($('html').css('--f7-safe-area-top'), 10);
+    let safeAreaLeft = parseInt($('html').css('--f7-safe-area-left'), 10);
+    let safeAreaRight = parseInt($('html').css('--f7-safe-area-right'), 10);
+    if (Number.isNaN(safeAreaTop)) safeAreaTop = 0;
+    if (Number.isNaN(safeAreaLeft)) safeAreaLeft = 0;
+    if (Number.isNaN(safeAreaRight)) safeAreaRight = 0;
+    if ($targetEl && $targetEl.length > 0) {
+      targetWidth = $targetEl.outerWidth();
+      targetHeight = $targetEl.outerHeight();
+      const targetOffset = $targetEl.offset();
+      targetOffsetLeft = targetOffset.left - app.left;
+      targetOffsetTop = targetOffset.top - app.top;
+      const targetParentPage = $targetEl.parents('.page');
+      if (targetParentPage.length > 0) {
+        targetOffsetTop -= targetParentPage[0].scrollTop;
+      }
+    } else if (typeof targetX !== 'undefined' && targetY !== 'undefined') {
+      targetOffsetLeft = targetX;
+      targetOffsetTop = targetY;
+      targetWidth = popover.params.targetWidth || 0;
+      targetHeight = popover.params.targetHeight || 0;
+    }
+    let [left, top, diff] = [0, 0, 0];
+    // Top Position
+    const forcedPosition = verticalPosition === 'auto' ? false : verticalPosition;
+    let position = forcedPosition || 'top';
+    if (forcedPosition === 'top' || !forcedPosition && height + arrowSize < targetOffsetTop - safeAreaTop) {
+      // On top
+      top = targetOffsetTop - height - arrowSize;
+    } else if (forcedPosition === 'bottom' || !forcedPosition && height + arrowSize < app.height - targetOffsetTop - targetHeight) {
+      // On bottom
+      position = 'bottom';
+      top = targetOffsetTop + targetHeight + arrowSize;
+    } else {
+      // On middle
+      position = 'middle';
+      top = targetHeight / 2 + targetOffsetTop - height / 2;
+      diff = top;
+      top = Math.max(5, Math.min(top, app.height - height - 5));
+      diff -= top;
+    }
+
+    // Horizontal Position
+    if (position === 'top' || position === 'bottom') {
+      left = targetWidth / 2 + targetOffsetLeft - width / 2;
+      diff = left;
+      left = Math.max(5, Math.min(left, app.width - width - 5));
+      if (safeAreaLeft) {
+        left = Math.max(left, safeAreaLeft);
+      }
+      if (safeAreaRight && left + width > app.width - 5 - safeAreaRight) {
+        left = app.width - 5 - safeAreaRight - width;
+      }
+      diff -= left;
+      if (hasArrow) {
+        if (position === 'top') {
+          $arrowEl.addClass('on-bottom');
+        }
+        if (position === 'bottom') {
+          $arrowEl.addClass('on-top');
+        }
+        arrowLeft = width / 2 - arrowSize + diff;
+        arrowLeft = Math.max(Math.min(arrowLeft, width - arrowSize * 2 - arrowMin), arrowMin);
+        $arrowEl.css({
+          left: `${arrowLeft}px`
+        });
+      }
+    } else if (position === 'middle') {
+      left = targetOffsetLeft - width - arrowSize;
+      if (hasArrow) $arrowEl.addClass('on-right');
+      if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
+        if (left < 5) left = targetOffsetLeft + targetWidth + arrowSize;
+        if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
+        if (left < safeAreaLeft) left = safeAreaLeft;
+        if (hasArrow) $arrowEl.removeClass('on-right').addClass('on-left');
+      }
+      if (hasArrow) {
+        arrowTop = height / 2 - arrowSize + diff;
+        arrowTop = Math.max(Math.min(arrowTop, height - arrowSize * 2 - arrowMin), arrowMin);
+        $arrowEl.css({
+          top: `${arrowTop}px`
+        });
+      }
+    }
+
+    // Horizontal Position
+    let hPosition;
+    if (targetOffsetLeft < app.width / 2) {
+      hPosition = 'right';
+    } else {
+      hPosition = 'left';
+    }
+    $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
+
+    // Apply Styles
+    $el.css({
+      top: `${top}px`,
+      left: `${left}px`
+    });
+  }
+}
+export default Popover;

package/components/popover/popover-ios.less

@@ -0,0 +1,6 @@
+.ios {
+  .popover {
+    transform: none;
+    transition-property: opacity;
+  }
+}

package/components/popover/popover-md.less

@@ -0,0 +1,41 @@
+.md {
+  .popover {
+    transform: scale(0.85, 0.6);
+    transition-property: opacity, transform;
+    &.modal-in {
+      opacity: 1;
+      transform: scale(1);
+    }
+    &.modal-out {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+  .popover-on-top {
+    transform-origin: center bottom;
+  }
+  .popover-on-top.popover-on-right {
+    transform-origin: left bottom;
+  }
+  .popover-on-top.popover-on-left {
+    transform-origin: right bottom;
+  }
+  .popover-on-middle {
+    transform-origin: center center;
+  }
+  .popover-on-middle.popover-on-right {
+    transform-origin: left center;
+  }
+  .popover-on-middle.popover-on-left {
+    transform-origin: right center;
+  }
+  .popover-on-bottom {
+    transform-origin: center top;
+  }
+  .popover-on-bottom.popover-on-right {
+    transform-origin: left top;
+  }
+  .popover-on-bottom.popover-on-left {
+    transform-origin: right top;
+  }
+}

package/components/popover/popover-rtl.css

@@ -0,0 +1 @@
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-popover-border-radius:28px;--f7-popover-actions-icon-size:24px}.md,.md .dark,.md [class*=color-]{--f7-popover-bg-color:var(--f7-md-surface-3);--f7-popover-actions-label-text-color:var(--f7-md-on-surface-variant)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);will-change:transform,opacity;--f7-safe-area-top:0px;--f7-safe-area-left:0px;--f7-safe-area-right:0px;--f7-safe-area-bottom:0px}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover,.popover-backdrop{transition-timing-function:var(--f7-popover-transition-timing-function)}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.ios .popover-from-actions-strong{font-weight:600}.md .popover-from-actions-strong{font-weight:500}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-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)))}.popover-from-actions-label:last-child:after{display:none!important}.md .popover-from-actions-label{justify-content:center}.popover-arrow{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.popover-arrow:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.popover-arrow.on-left{left:-26px}.popover-arrow.on-left:after{left:19px;top:0}.popover-arrow.on-right{left:100%}.popover-arrow.on-right:after{left:-19px;top:0}.popover-arrow.on-top{left:0;top:-26px}.popover-arrow.on-top:after{left:0;top:19px}.popover-arrow.on-bottom{left:0;top:100%}.popover-arrow.on-bottom:after{left:0;top:-19px}.ios .popover{transform:none;transition-property:opacity}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}

package/components/popover/popover-vars.less

@@ -0,0 +1,25 @@
+:root {
+  --f7-popover-width: 260px;
+}
+.ios-vars({
+  --f7-popover-border-radius: 13px;
+  --f7-popover-actions-icon-size: 28px;
+  --f7-popover-transition-timing-function: initial;
+  .light-vars({
+    --f7-popover-bg-color: rgba(255,255,255,0.95);
+    --f7-popover-actions-label-text-color: rgba(0,0,0,0.45);
+  });
+  .dark-vars({
+    --f7-popover-bg-color: rgba(30,30,30,0.95);
+    --f7-popover-actions-label-text-color: rgba(255,255,255,0.55);
+  });
+});
+.md-vars({
+  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  --f7-popover-border-radius: 28px;
+  --f7-popover-actions-icon-size: 24px;
+});
+.md-color-vars({
+  --f7-popover-bg-color: var(--f7-md-surface-3);
+  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
+});

package/components/popover/popover.css

@@ -0,0 +1 @@
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-popover-border-radius:28px;--f7-popover-actions-icon-size:24px}.md,.md .dark,.md [class*=color-]{--f7-popover-bg-color:var(--f7-md-surface-3);--f7-popover-actions-label-text-color:var(--f7-md-on-surface-variant)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);will-change:transform,opacity;--f7-safe-area-top:0px;--f7-safe-area-left:0px;--f7-safe-area-right:0px;--f7-safe-area-bottom:0px}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover,.popover-backdrop{transition-timing-function:var(--f7-popover-transition-timing-function)}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.ios .popover-from-actions-strong{font-weight:600}.md .popover-from-actions-strong{font-weight:500}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-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)))}.popover-from-actions-label:last-child:after{display:none!important}.md .popover-from-actions-label{justify-content:center}.popover-arrow{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.popover-arrow:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.popover-arrow.on-left{left:-26px}.popover-arrow.on-left:after{left:19px;top:0}.popover-arrow.on-right{left:100%}.popover-arrow.on-right:after{left:-19px;top:0}.popover-arrow.on-top{left:0;top:-26px}.popover-arrow.on-top:after{left:0;top:19px}.popover-arrow.on-bottom{left:0;top:100%}.popover-arrow.on-bottom:after{left:0;top:-19px}.ios .popover{transform:none;transition-property:opacity}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}

package/components/popover/popover.d.ts

@@ -0,0 +1,137 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Popover {
+  interface Events {
+    /** Event will be triggered when Popover starts its opening animation. As an argument event handler receives popover instance */
+    open: (popover: Popover) => void;
+    /** Event will be triggered when Popover completes its opening animation. As an argument event handler receives popover instance */
+    opened: (popover: Popover) => void;
+    /** Event will be triggered when Popover starts its closing animation. As an argument event handler receives popover instance */
+    close: (popover: Popover) => void;
+    /** Event will be triggered after Popover completes its closing animation. As an argument event handler receives popover instance */
+    closed: (popover: Popover) => void;
+    /** Event will be triggered right before Popover instance will be destroyed */
+    beforeDestroy: (popover: Popover) => void;
+  }
+  interface Parameters {
+    /** Popover element. Can be useful if you already have Popover element in your HTML and want to create new instance using this element. */
+    el?: HTMLElement | CSSSelector;
+    /** Full Popover HTML layout string. Can be useful if you want to create Popover element dynamically. */
+    content?: string;
+    /** Enables Popover arrow/corner. (default true) */
+    arrow?: boolean;
+    /** Enables Popover backdrop (dark semi transparent layer behind). (default true) */
+    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;
+    /** When enabled, popover will be closed on backdrop click. (default true) */
+    closeByBackdropClick?: boolean;
+    /** When enabled, popover will be closed on when click outside of it (default true) */
+    closeByOutsideClick?: boolean;
+    /** When enabled, popover will be closed on ESC keyboard key press (default false) */
+    closeOnEscape?: boolean;
+    /** Whether the Popover should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods. (default true) */
+    animate?: boolean;
+    /** HTML element or string CSS selector of target element */
+    targetEl?: HTMLElement | CSSSelector;
+    /** Virtual target element horizontal offset from left side of the screen. Required without using real target element (targetEl) */
+    targetX?: number;
+    /** Virtual target element vertical offset from top of the screen. Required without using real target element (targetEl) */
+    targetY?: number;
+    /** Virtual target element width (in px). Required without using real target element (targetEl) (default 0) */
+    targetWidth?: number;
+    /** Virtual target element height (in px). Required without using real target element (targetEl) (default 0) */
+    targetHeight?: number;
+    /** Element to mount modal to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+    /** Force popover vertical position, can be 'auto', 'top' or 'bottom' (default 'auto')  */
+    verticalPosition?: string;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Popover extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Popover HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with popover HTML element */
+    $el: Dom7Array;
+    /** Backdrop HTML element */
+    backdropEl: HTMLElement;
+    /** Dom7 instance with backdrop HTML element */
+    $backdropEl: Dom7Array;
+    /** Popover target HTML element */
+    targetEl: HTMLElement;
+    /** Dom7 instance with popover target HTML element */
+    $targetEl: Dom7Array;
+    /** Popover parameters */
+    params: Parameters;
+    /** Boolean prop indicating whether popover is opened or not */
+    opened: boolean;
+
+    /** Open popover. */
+    open(targetEl: HTMLElement | CSSSelector, animate?: boolean): Popover;
+    open(animate?: boolean): Popover;
+    /** Close popover. */
+    close(animate?: boolean): Popover;
+    /** Destroy popover */
+    destroy(): void;
+  }
+  interface DomEvents {
+    /** Event will be triggered when Popover starts its opening animation */
+    'popover:open': () => void;
+    /** Event will be triggered after Popover completes its opening animation */
+    'popover:opened': () => void;
+    /** Event will be triggered when Popover starts its closing animation */
+    'popover:close': () => void;
+    /** Event will be triggered after Popover completes its closing animation */
+    'popover:closed': () => void;
+  }
+
+  interface AppMethods {
+    popover: {
+      /** create Popover instance */
+      create(parameters: Parameters): Popover;
+      /** destroy Popover instance */
+      destroy(el: HTMLElement | CSSSelector | Popover): void;
+      /** get Popover instance by HTML element */
+      get(el?: HTMLElement | CSSSelector): Popover;
+      /** open Popover */
+      open(
+        el?: HTMLElement | CSSSelector,
+        targetEl?: HTMLElement | CSSSelector,
+        animate?: boolean,
+      ): Popover;
+      /** closes Popover */
+      close(el?: HTMLElement | CSSSelector, animate?: boolean): Popover;
+    };
+  }
+  interface AppParams {
+    popover?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when Popover starts its opening animation. As an argument event handler receives popover instance */
+    popoverOpen: (popover: Popover) => void;
+    /** Event will be triggered when Popover completes its opening animation. As an argument event handler receives popover instance */
+    popoverOpened: (popover: Popover) => void;
+    /** Event will be triggered when Popover starts its closing animation. As an argument event handler receives popover instance */
+    popoverClose: (popover: Popover) => void;
+    /** Event will be triggered after Popover completes its closing animation. As an argument event handler receives popover instance */
+    popoverClosed: (popover: Popover) => void;
+    /** Event will be triggered right before Popover instance will be destroyed */
+    popoverBeforeDestroy: (popover: Popover) => void;
+  }
+}
+
+declare const PopoverComponent: Framework7Plugin;
+
+export default PopoverComponent;

package/components/popover/popover.js

@@ -0,0 +1,75 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Popover from './popover-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'popover',
+  params: {
+    popover: {
+      verticalPosition: 'auto',
+      arrow: true,
+      backdrop: true,
+      backdropEl: undefined,
+      backdropUnique: false,
+      closeByBackdropClick: true,
+      closeByOutsideClick: true,
+      closeOnEscape: false,
+      containerEl: null
+    }
+  },
+  static: {
+    Popover
+  },
+  create() {
+    const app = this;
+    app.popover = extend(ModalMethods({
+      app,
+      constructor: Popover,
+      defaultSelector: '.popover.modal-in'
+    }), {
+      open(popoverEl, targetEl, animate) {
+        let $popoverEl = $(popoverEl);
+        if ($popoverEl.length > 1) {
+          // check if same popover in other page
+          const $targetPage = $(targetEl).parents('.page');
+          if ($targetPage.length) {
+            $popoverEl.each(el => {
+              const $el = $(el);
+              if ($el.parents($targetPage)[0] === $targetPage[0]) {
+                $popoverEl = $el;
+              }
+            });
+          }
+        }
+        if ($popoverEl.length > 1) {
+          $popoverEl = $popoverEl.eq($popoverEl.length - 1);
+        }
+        let popover = $popoverEl[0].f7Modal;
+        const data = $popoverEl.dataset();
+        if (!popover) {
+          popover = new Popover(app, Object.assign({
+            el: $popoverEl,
+            targetEl
+          }, data));
+        }
+        return popover.open(targetEl, animate);
+      }
+    });
+  },
+  clicks: {
+    '.popover-open': function openPopover($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.popover.open(data.popover, $clickedEl, data.animate);
+    },
+    '.popover-close': function closePopover($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.popover.close(data.popover, data.animate, $clickedEl);
+    }
+  }
+};