framework7 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/tooltip/tooltip-class.js

@@ -1,32 +1,16 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import { getDocument } from 'ssr-window';
 import $ from '../../shared/dom7';
 import { extend, deleteProps } from '../../shared/utils';
 import { getSupport } from '../../shared/get-support';
 import Framework7Class from '../../shared/class';
 
-var Tooltip = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Tooltip, _Framework7Class);
-
-  function Tooltip(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var tooltip = _assertThisInitialized(_this);
-
-    var support = getSupport();
-    var defaults = extend({}, app.params.tooltip);
-    var document = getDocument(); // Extend defaults with modules params
+class Tooltip extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const tooltip = this;
+    const support = getSupport();
+    const defaults = extend({}, app.params.tooltip);
+    const document = getDocument(); // Extend defaults with modules params
 
     tooltip.useModulesParams(defaults);
     tooltip.params = extend(defaults, params);
@@ -35,35 +19,36 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
       tooltip.params.offset = 10;
     }
 
-    var _tooltip$params = tooltip.params,
-        targetEl = _tooltip$params.targetEl,
-        containerEl = _tooltip$params.containerEl;
-    if (!targetEl && !tooltip.params.delegated) return tooltip || _assertThisInitialized(_this);
-    var $targetEl = $(targetEl);
-    if ($targetEl.length === 0 && !tooltip.params.delegated) return tooltip || _assertThisInitialized(_this);
-    if ($targetEl[0] && $targetEl[0].f7Tooltip && !tooltip.params.delegated) return $targetEl[0].f7Tooltip || _assertThisInitialized(_this);
-    var $containerEl = $(containerEl || app.$el).eq(0);
+    const {
+      targetEl,
+      containerEl
+    } = tooltip.params;
+    if (!targetEl && !tooltip.params.delegated) return tooltip;
+    const $targetEl = $(targetEl);
+    if ($targetEl.length === 0 && !tooltip.params.delegated) return tooltip;
+    if ($targetEl[0] && $targetEl[0].f7Tooltip && !tooltip.params.delegated) return $targetEl[0].f7Tooltip;
+    let $containerEl = $(containerEl || app.$el).eq(0);
 
     if ($containerEl.length === 0) {
       $containerEl = app.$el;
     }
 
-    var $el = $(tooltip.render()).eq(0);
+    const $el = $(tooltip.render()).eq(0);
     extend(tooltip, {
-      app: app,
-      $targetEl: $targetEl,
+      app,
+      $targetEl,
       targetEl: $targetEl && $targetEl[0],
-      $containerEl: $containerEl,
+      $containerEl,
       containerEl: $containerEl && $containerEl[0],
-      $el: $el,
+      $el,
       el: $el && $el[0],
       text: tooltip.params.text || '',
       visible: false,
       opened: false
     });
     if ($targetEl[0]) $targetEl[0].f7Tooltip = tooltip;
-    var touchesStart = {};
-    var isTouched;
+    const touchesStart = {};
+    let isTouched;
 
     function handleClick() {
       if (tooltip.opened) tooltip.hide();else tooltip.show(this);
@@ -84,9 +69,9 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
 
     function handleTouchMove(e) {
       if (!isTouched) return;
-      var x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
-      var y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-      var distance = Math.pow(Math.pow(x - touchesStart.x, 2) + Math.pow(y - touchesStart.y, 2), 0.5);
+      const x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      const distance = ((x - touchesStart.x) ** 2 + (y - touchesStart.y) ** 2) ** 0.5;
 
       if (distance > 50) {
         isTouched = false;
@@ -131,7 +116,7 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
       if (tooltip.params.trigger === 'manual') return;
 
       if (support.touch) {
-        var passive = support.passiveListener ? {
+        const passive = support.passiveListener ? {
           passive: true
         } : false;
 
@@ -172,7 +157,7 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
       if (tooltip.params.trigger === 'manual') return;
 
       if (support.touch) {
-        var passive = support.passiveListener ? {
+        const passive = support.passiveListener ? {
           passive: true
         } : false;
 
@@ -199,70 +184,66 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
 
     tooltip.useModules();
     tooltip.init();
-    return tooltip || _assertThisInitialized(_this);
+    return tooltip;
   }
 
-  var _proto = Tooltip.prototype;
-
-  _proto.setTargetEl = function setTargetEl(targetEl) {
-    var tooltip = this;
+  setTargetEl(targetEl) {
+    const tooltip = this;
     tooltip.detachEvents();
     tooltip.$targetEl = $(targetEl);
     tooltip.targetEl = tooltip.$targetEl[0];
     tooltip.attachEvents();
     return tooltip;
-  };
-
-  _proto.position = function position(targetEl) {
-    var tooltip = this;
-    var $el = tooltip.$el,
-        app = tooltip.app,
-        $containerEl = tooltip.$containerEl;
-    var hasContainerEl = !!tooltip.params.containerEl;
-    var tooltipOffset = tooltip.params.offset || 0;
+  }
+
+  position(targetEl) {
+    const tooltip = this;
+    const {
+      $el,
+      app,
+      $containerEl
+    } = tooltip;
+    const hasContainerEl = !!tooltip.params.containerEl;
+    const tooltipOffset = tooltip.params.offset || 0;
     $el.css({
       left: '',
       top: ''
     });
-    var $targetEl = $(targetEl || tooltip.targetEl);
-    var _ref = [$el.width(), $el.height()],
-        width = _ref[0],
-        height = _ref[1];
+    const $targetEl = $(targetEl || tooltip.targetEl);
+    const [width, height] = [$el.width(), $el.height()];
     $el.css({
       left: '',
       top: ''
     });
-    var targetWidth;
-    var targetHeight;
-    var targetOffsetLeft;
-    var targetOffsetTop;
-    var boundaries = hasContainerEl && $containerEl.length ? $containerEl[0].getBoundingClientRect() : app;
+    let targetWidth;
+    let targetHeight;
+    let targetOffsetLeft;
+    let targetOffsetTop;
+    const boundaries = hasContainerEl && $containerEl.length ? $containerEl[0].getBoundingClientRect() : app;
 
     if ($targetEl && $targetEl.length > 0) {
       targetWidth = $targetEl.outerWidth();
       targetHeight = $targetEl.outerHeight();
 
       if (typeof targetWidth === 'undefined' && typeof targetHeight === 'undefined') {
-        var clientRect = $targetEl[0].getBoundingClientRect();
+        const clientRect = $targetEl[0].getBoundingClientRect();
         targetWidth = clientRect.width;
         targetHeight = clientRect.height;
       }
 
-      var targetOffset = $targetEl.offset();
+      const targetOffset = $targetEl.offset();
       targetOffsetLeft = targetOffset.left - boundaries.left;
       targetOffsetTop = targetOffset.top - boundaries.top;
-      var targetParentPage = $targetEl.parents('.page');
+      const targetParentPage = $targetEl.parents('.page');
 
       if (targetParentPage.length > 0) {
         targetOffsetTop -= targetParentPage[0].scrollTop;
       }
     }
 
-    var _ref2 = [0, 0, 0],
-        left = _ref2[0],
-        top = _ref2[1]; // Top Position
+    let [left, top] = [0, 0, 0]; // Top Position
 
-    var position = 'top';
+    let position = 'top';
 
     if (height + tooltipOffset < targetOffsetTop) {
       // On top
@@ -300,23 +281,25 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
 
 
     $el.css({
-      top: top + "px",
-      left: left + "px"
+      top: `${top}px`,
+      left: `${left}px`
     });
-  };
+  }
 
-  _proto.show = function show(aroundEl) {
-    var tooltip = this;
-    var $el = tooltip.$el,
-        $targetEl = tooltip.$targetEl,
-        $containerEl = tooltip.$containerEl;
+  show(aroundEl) {
+    const tooltip = this;
+    const {
+      $el,
+      $targetEl,
+      $containerEl
+    } = tooltip;
 
     if ($containerEl[0] && $el[0] && !$containerEl[0].contains($el[0])) {
       $containerEl.append($el);
     }
 
     tooltip.position(aroundEl);
-    var $aroundEl = $(aroundEl);
+    const $aroundEl = $(aroundEl);
     tooltip.visible = true;
     tooltip.opened = true;
     $targetEl.trigger('tooltip:show');
@@ -329,12 +312,14 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
     tooltip.emit('local::show tooltipShow', tooltip);
     $el.removeClass('tooltip-out').addClass('tooltip-in');
     return tooltip;
-  };
+  }
 
-  _proto.hide = function hide() {
-    var tooltip = this;
-    var $el = tooltip.$el,
-        $targetEl = tooltip.$targetEl;
+  hide() {
+    const tooltip = this;
+    const {
+      $el,
+      $targetEl
+    } = tooltip;
     tooltip.visible = false;
     tooltip.opened = false;
     $targetEl.trigger('tooltip:hide');
@@ -342,19 +327,24 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
     tooltip.emit('local::hide tooltipHide', tooltip);
     $el.addClass('tooltip-out').removeClass('tooltip-in');
     return tooltip;
-  };
+  }
 
-  _proto.render = function render() {
-    var tooltip = this;
+  render() {
+    const tooltip = this;
     if (tooltip.params.render) return tooltip.params.render.call(tooltip, tooltip);
-    var _tooltip$params2 = tooltip.params,
-        cssClass = _tooltip$params2.cssClass,
-        text = _tooltip$params2.text;
-    return ("\n      <div class=\"tooltip " + (cssClass || '') + "\">\n        <div class=\"tooltip-content\">" + (text || '') + "</div>\n      </div>\n    ").trim();
-  };
+    const {
+      cssClass,
+      text
+    } = tooltip.params;
+    return `
+      <div class="tooltip ${cssClass || ''}">
+        <div class="tooltip-content">${text || ''}</div>
+      </div>
+    `.trim();
+  }
 
-  _proto.setText = function setText(newText) {
-    var tooltip = this;
+  setText(newText) {
+    const tooltip = this;
 
     if (typeof newText === 'undefined') {
       return tooltip;
@@ -372,15 +362,15 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return tooltip;
-  };
+  }
 
-  _proto.init = function init() {
-    var tooltip = this;
+  init() {
+    const tooltip = this;
     tooltip.attachEvents();
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var tooltip = this;
+  destroy() {
+    const tooltip = this;
     if (!tooltip.$targetEl || tooltip.destroyed) return;
     tooltip.$targetEl.trigger('tooltip:beforedestroy');
     tooltip.emit('local::beforeDestroy tooltipBeforeDestroy', tooltip);
@@ -389,9 +379,8 @@ var Tooltip = /*#__PURE__*/function (_Framework7Class) {
     tooltip.detachEvents();
     deleteProps(tooltip);
     tooltip.destroyed = true;
-  };
+  }
 
-  return Tooltip;
-}(Framework7Class);
+}
 
 export default Tooltip;

package/components/tooltip/tooltip.js

@@ -1 +1,144 @@
-(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,r=t.utils,n=(t.getDevice,t.getSupport),a=t.Class,i=(t.Modal,t.ConstructorMethods);t.ModalMethods;function l(t){this.wrapped=t}function s(t){var e,o;function r(e,o){try{var a=t[e](o),i=a.value,s=i instanceof l;Promise.resolve(s?i.wrapped:i).then((function(t){s?r("return"===e?"return":"next",t):n(a.done?"return":"normal",t)}),(function(t){r("throw",t)}))}catch(t){n("throw",t)}}function n(t,n){switch(t){case"return":e.resolve({value:n,done:!0});break;case"throw":e.reject(n);break;default:e.resolve({value:n,done:!1})}(e=e.next)?r(e.key,e.arg):o=null}this._invoke=function(t,n){return new Promise((function(a,i){var l={key:t,arg:n,resolve:a,reject:i,next:null};o?o=o.next=l:(e=o=l,r(t,n))}))},"function"!=typeof t.return&&(this.return=void 0)}function p(t,e){return(p=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}s.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},s.prototype.next=function(t){return this._invoke("next",t)},s.prototype.throw=function(t){return this._invoke("throw",t)},s.prototype.return=function(t){return this._invoke("return",t)};var u=r.extend,f=r.deleteProps,d=function(t){var e,r;function a(e,r){var a;void 0===r&&(r={});var i=c(a=t.call(this,r,[e])||this),l=n(),s=u({},e.params.tooltip);i.useModulesParams(s),i.params=u(s,r),void 0===r.offset&&l.touch&&"hover"===i.params.trigger&&(i.params.offset=10);var p=i.params,f=p.targetEl,d=p.containerEl;if(!f&&!i.params.delegated)return i||c(a);var h=o(f);if(0===h.length&&!i.params.delegated)return i||c(a);if(h[0]&&h[0].f7Tooltip&&!i.params.delegated)return h[0].f7Tooltip||c(a);var v=o(d||e.$el).eq(0);0===v.length&&(v=e.$el);var g=o(i.render()).eq(0);u(i,{app:e,$targetEl:h,targetEl:h&&h[0],$containerEl:v,containerEl:v&&v[0],$el:g,el:g&&g[0],text:i.params.text||"",visible:!1,opened:!1}),h[0]&&(h[0].f7Tooltip=i);var m,E={};function y(){i.opened?i.hide():i.show(this)}function $(t){i.opened&&(o(t.target).closest(h).length||o(t.target).closest(i.$el).length)||i.hide()}function w(t){m||(m=!0,E.x="touchstart"===t.type?t.targetTouches[0].pageX:t.pageX,E.y="touchstart"===t.type?t.targetTouches[0].pageY:t.pageY,i.show(this))}function T(t){if(m){var e="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,o="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY;Math.pow(Math.pow(e-E.x,2)+Math.pow(o-E.y,2),.5)>50&&(m=!1,i.hide())}}function b(){m&&(m=!1,i.hide())}function x(){i.show(this)}function k(){i.hide()}function C(){g.hasClass("tooltip-in")||g.removeClass("tooltip-out").remove()}return i.attachEvents=function(){if(g.on("transitionend",C),"click"===i.params.trigger)return i.params.delegated?o(document).on("click",i.params.targetEl,y):i.$targetEl.on("click",y),void o("html").on("click",$);if("manual"!==i.params.trigger)if(l.touch){var t=!!l.passiveListener&&{passive:!0};i.params.delegated?o(document).on(e.touchEvents.start,i.params.targetEl,w,t):i.$targetEl.on(e.touchEvents.start,w,t),e.on("touchmove",T),e.on("touchend:passive",b)}else i.params.delegated?(o(document).on(l.pointerEvents?"pointerenter":"mouseenter",i.params.targetEl,x,!0),o(document).on(l.pointerEvents?"pointerleave":"mouseleave",i.params.targetEl,k,!0)):(i.$targetEl.on(l.pointerEvents?"pointerenter":"mouseenter",x),i.$targetEl.on(l.pointerEvents?"pointerleave":"mouseleave",k))},i.detachEvents=function(){if(g.off("transitionend",C),"click"===i.params.trigger)return i.params.delegated?o(document).on("click",i.params.targetEl,y):i.$targetEl.off("click",y),void o("html").off("click",$);if("manual"!==i.params.trigger)if(l.touch){var t=!!l.passiveListener&&{passive:!0};i.params.delegated?o(document).off(e.touchEvents.start,i.params.targetEl,w,t):i.$targetEl.off(e.touchEvents.start,w,t),e.off("touchmove",T),e.off("touchend:passive",b)}else i.params.delegated?(o(document).off(l.pointerEvents?"pointerenter":"mouseenter",i.params.targetEl,x,!0),o(document).off(l.pointerEvents?"pointerleave":"mouseleave",i.params.targetEl,k,!0)):(i.$targetEl.off(l.pointerEvents?"pointerenter":"mouseenter",x),i.$targetEl.off(l.pointerEvents?"pointerleave":"mouseleave",k))},i.useModules(),i.init(),i||c(a)}r=t,(e=a).prototype=Object.create(r.prototype),e.prototype.constructor=e,p(e,r);var i=a.prototype;return i.setTargetEl=function(t){var e=this;return e.detachEvents(),e.$targetEl=o(t),e.targetEl=e.$targetEl[0],e.attachEvents(),e},i.position=function(t){var e=this,r=e.$el,n=e.app,a=e.$containerEl,i=!!e.params.containerEl,l=e.params.offset||0;r.css({left:"",top:""});var s,p,c,u,f=o(t||e.targetEl),d=[r.width(),r.height()],h=d[0],v=d[1];r.css({left:"",top:""});var g=i&&a.length?a[0].getBoundingClientRect():n;if(f&&f.length>0){if(s=f.outerWidth(),p=f.outerHeight(),void 0===s&&void 0===p){var m=f[0].getBoundingClientRect();s=m.width,p=m.height}var E=f.offset();c=E.left-g.left,u=E.top-g.top;var y=f.parents(".page");y.length>0&&(u-=y[0].scrollTop)}var $=[0,0,0],w=$[0],T=$[1],b="top";v+l<u?T=u-v-l:v<g.height-u-p?(b="bottom",T=u+p+l):(b="middle",(T=p/2+u-v/2)<=0?T=8:T+v>=g.height&&(T=g.height-v-8)),"top"===b||"bottom"===b?((w=s/2+c-h/2)<8&&(w=8),w+h>g.width&&(w=g.width-h-8),w<0&&(w=0)):"middle"===b&&((w=c-h)<8||w+h>g.width)&&(w<8&&(w=c+s),w+h>g.width&&(w=g.width-h-8)),r.css({top:T+"px",left:w+"px"})},i.show=function(t){var e=this,r=e.$el,n=e.$targetEl,a=e.$containerEl;a[0]&&r[0]&&!a[0].contains(r[0])&&a.append(r),e.position(t);var i=o(t);return e.visible=!0,e.opened=!0,n.trigger("tooltip:show"),r.trigger("tooltip:show"),i.length&&i[0]!==n[0]&&i.trigger("tooltip:show"),e.emit("local::show tooltipShow",e),r.removeClass("tooltip-out").addClass("tooltip-in"),e},i.hide=function(){var t=this,e=t.$el,o=t.$targetEl;return t.visible=!1,t.opened=!1,o.trigger("tooltip:hide"),e.trigger("tooltip:hide"),t.emit("local::hide tooltipHide",t),e.addClass("tooltip-out").removeClass("tooltip-in"),t},i.render=function(){var t=this;if(t.params.render)return t.params.render.call(t,t);var e=t.params;return('\n      <div class="tooltip '+(e.cssClass||"")+'">\n        <div class="tooltip-content">'+(e.text||"")+"</div>\n      </div>\n    ").trim()},i.setText=function(t){var e=this;return void 0===t||(e.params.text=t,e.text=t,e.$el&&e.$el.children(".tooltip-content").html(t),e.opened&&e.position()),e},i.init=function(){this.attachEvents()},i.destroy=function(){var t=this;t.$targetEl&&!t.destroyed&&(t.$targetEl.trigger("tooltip:beforedestroy"),t.emit("local::beforeDestroy tooltipBeforeDestroy",t),t.$el.remove(),t.$targetEl[0]&&delete t.$targetEl[0].f7Tooltip,t.detachEvents(),f(t),t.destroyed=!0)},a}(a),h={name:"tooltip",static:{Tooltip:d},create:function(){var t=this;t.tooltip=i({defaultSelector:".tooltip",constructor:d,app:t,domProp:"f7Tooltip"}),t.tooltip.show=function(t){var e=o(t);if(0!==e.length){var r=e[0].f7Tooltip;if(r)return r.show(e[0]),r}},t.tooltip.hide=function(t){var e=o(t);if(0!==e.length){var r=e[0].f7Tooltip;if(r)return r.hide(),r}},t.tooltip.setText=function(t,e){var r=o(t);if(0!==r.length){var n=r[0].f7Tooltip;if(n)return n.setText(e),n}}},params:{tooltip:{targetEl:null,delegated:!1,text:null,cssClass:null,render:null,offset:0,trigger:"hover",containerEl:void 0}},on:{tabMounted:function(t){var e=this;o(t).find(".tooltip-init").each((function(t){var r=o(t).attr("data-tooltip");r&&e.tooltip.create({targetEl:t,text:r})}))},tabBeforeRemove:function(t){o(t).find(".tooltip-init").each((function(t){t.f7Tooltip&&t.f7Tooltip.destroy()}))},pageInit:function(t){var e=this;t.$el.find(".tooltip-init").each((function(t){var r=o(t).attr("data-tooltip");r&&e.tooltip.create({targetEl:t,text:r})})),"ios"===e.theme&&t.view&&t.view.router.dynamicNavbar&&t.$navbarEl&&t.$navbarEl.length>0&&t.$navbarEl.find(".tooltip-init").each((function(t){var r=o(t).attr("data-tooltip");r&&e.tooltip.create({targetEl:t,text:r})}))},pageBeforeRemove:function(t){t.$el.find(".tooltip-init").each((function(t){t.f7Tooltip&&t.f7Tooltip.destroy()})),"ios"===this.theme&&t.view&&t.view.router.dynamicNavbar&&t.$navbarEl&&t.$navbarEl.length>0&&t.$navbarEl.find(".tooltip-init").each((function(t){t.f7Tooltip&&t.f7Tooltip.destroy()}))}},vnode:{"tooltip-init":{insert:function(t){var e=t.elm,r=o(e).attr("data-tooltip");r&&this.tooltip.create({targetEl:e,text:r})},update:function(t){var e=t.elm;e.f7Tooltip&&t&&t.data&&t.data.attrs&&t.data.attrs["data-tooltip"]&&e.f7Tooltip.setText(t.data.attrs["data-tooltip"])},destroy:function(t){var e=t.elm;e.f7Tooltip&&e.f7Tooltip.destroy()}}}};if(e){if(t.prototype.modules&&t.prototype.modules[h.name])return;t.use(h),t.instance&&(t.instance.useModuleParams(h,t.instance.params),t.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7';
+import Tooltip from './tooltip-class';
+import ConstructorMethods from '../../shared/constructor-methods';
+export default {
+  name: 'tooltip',
+  static: {
+    Tooltip
+  },
+
+  create() {
+    const app = this;
+    app.tooltip = ConstructorMethods({
+      defaultSelector: '.tooltip',
+      constructor: Tooltip,
+      app,
+      domProp: 'f7Tooltip'
+    });
+
+    app.tooltip.show = function show(el) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const tooltip = $el[0].f7Tooltip;
+      if (!tooltip) return undefined;
+      tooltip.show($el[0]);
+      return tooltip;
+    };
+
+    app.tooltip.hide = function hide(el) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const tooltip = $el[0].f7Tooltip;
+      if (!tooltip) return undefined;
+      tooltip.hide();
+      return tooltip;
+    };
+
+    app.tooltip.setText = function text(el, newText) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const tooltip = $el[0].f7Tooltip;
+      if (!tooltip) return undefined;
+      tooltip.setText(newText);
+      return tooltip;
+    };
+  },
+
+  params: {
+    tooltip: {
+      targetEl: null,
+      delegated: false,
+      text: null,
+      cssClass: null,
+      render: null,
+      offset: 0,
+      trigger: 'hover',
+      containerEl: undefined
+    }
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.tooltip-init').each(el => {
+        const text = $(el).attr('data-tooltip');
+        if (!text) return;
+        app.tooltip.create({
+          targetEl: el,
+          text
+        });
+      });
+    },
+
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.tooltip-init').each(el => {
+        if (el.f7Tooltip) el.f7Tooltip.destroy();
+      });
+    },
+
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.tooltip-init').each(el => {
+        const text = $(el).attr('data-tooltip');
+        if (!text) return;
+        app.tooltip.create({
+          targetEl: el,
+          text
+        });
+      });
+
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
+        page.$navbarEl.find('.tooltip-init').each(el => {
+          const text = $(el).attr('data-tooltip');
+          if (!text) return;
+          app.tooltip.create({
+            targetEl: el,
+            text
+          });
+        });
+      }
+    },
+
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.tooltip-init').each(el => {
+        if (el.f7Tooltip) el.f7Tooltip.destroy();
+      });
+
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
+        page.$navbarEl.find('.tooltip-init').each(el => {
+          if (el.f7Tooltip) el.f7Tooltip.destroy();
+        });
+      }
+    }
+
+  },
+  vnode: {
+    'tooltip-init': {
+      insert(vnode) {
+        const app = this;
+        const el = vnode.elm;
+        const text = $(el).attr('data-tooltip');
+        if (!text) return;
+        app.tooltip.create({
+          targetEl: el,
+          text
+        });
+      },
+
+      update(vnode) {
+        const el = vnode.elm;
+        if (!el.f7Tooltip) return;
+
+        if (vnode && vnode.data && vnode.data.attrs && vnode.data.attrs['data-tooltip']) {
+          el.f7Tooltip.setText(vnode.data.attrs['data-tooltip']);
+        }
+      },
+
+      destroy(vnode) {
+        const el = vnode.elm;
+        if (el.f7Tooltip) el.f7Tooltip.destroy();
+      }
+
+    }
+  }
+};

package/components/tooltip/tooltip.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,a=t.utils,i=(t.getDevice,t.getSupport),r=t.Class,n=(t.Modal,t.ConstructorMethods),s=(t.ModalMethods,a.extend),l=a.deleteProps;class p extends r{constructor(t,e={}){super(e,[t]);const a=this,r=i(),n=s({},t.params.tooltip),l=getDocument();a.useModulesParams(n),a.params=s(n,e),void 0===e.offset&&r.touch&&"hover"===a.params.trigger&&(a.params.offset=10);const{targetEl:p,containerEl:c}=a.params;if(!p&&!a.params.delegated)return a;const d=o(p);if(0===d.length&&!a.params.delegated)return a;if(d[0]&&d[0].f7Tooltip&&!a.params.delegated)return d[0].f7Tooltip;let h=o(c||t.$el).eq(0);0===h.length&&(h=t.$el);const g=o(a.render()).eq(0);s(a,{app:t,$targetEl:d,targetEl:d&&d[0],$containerEl:h,containerEl:h&&h[0],$el:g,el:g&&g[0],text:a.params.text||"",visible:!1,opened:!1}),d[0]&&(d[0].f7Tooltip=a);const f={};let u;function m(){a.opened?a.hide():a.show(this)}function v(t){a.opened&&(o(t.target).closest(d).length||o(t.target).closest(a.$el).length)||a.hide()}function E(t){u||(u=!0,f.x="touchstart"===t.type?t.targetTouches[0].pageX:t.pageX,f.y="touchstart"===t.type?t.targetTouches[0].pageY:t.pageY,a.show(this))}function $(t){if(!u)return;const e="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,o="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY;((e-f.x)**2+(o-f.y)**2)**.5>50&&(u=!1,a.hide())}function T(){u&&(u=!1,a.hide())}function w(){a.show(this)}function y(){a.hide()}function x(){g.hasClass("tooltip-in")||g.removeClass("tooltip-out").remove()}return a.attachEvents=function(){if(g.on("transitionend",x),"click"===a.params.trigger)return a.params.delegated?o(l).on("click",a.params.targetEl,m):a.$targetEl.on("click",m),void o("html").on("click",v);if("manual"!==a.params.trigger)if(r.touch){const e=!!r.passiveListener&&{passive:!0};a.params.delegated?o(l).on(t.touchEvents.start,a.params.targetEl,E,e):a.$targetEl.on(t.touchEvents.start,E,e),t.on("touchmove",$),t.on("touchend:passive",T)}else a.params.delegated?(o(l).on(r.pointerEvents?"pointerenter":"mouseenter",a.params.targetEl,w,!0),o(l).on(r.pointerEvents?"pointerleave":"mouseleave",a.params.targetEl,y,!0)):(a.$targetEl.on(r.pointerEvents?"pointerenter":"mouseenter",w),a.$targetEl.on(r.pointerEvents?"pointerleave":"mouseleave",y))},a.detachEvents=function(){if(g.off("transitionend",x),"click"===a.params.trigger)return a.params.delegated?o(l).on("click",a.params.targetEl,m):a.$targetEl.off("click",m),void o("html").off("click",v);if("manual"!==a.params.trigger)if(r.touch){const e=!!r.passiveListener&&{passive:!0};a.params.delegated?o(l).off(t.touchEvents.start,a.params.targetEl,E,e):a.$targetEl.off(t.touchEvents.start,E,e),t.off("touchmove",$),t.off("touchend:passive",T)}else a.params.delegated?(o(l).off(r.pointerEvents?"pointerenter":"mouseenter",a.params.targetEl,w,!0),o(l).off(r.pointerEvents?"pointerleave":"mouseleave",a.params.targetEl,y,!0)):(a.$targetEl.off(r.pointerEvents?"pointerenter":"mouseenter",w),a.$targetEl.off(r.pointerEvents?"pointerleave":"mouseleave",y))},a.useModules(),a.init(),a}setTargetEl(t){const e=this;return e.detachEvents(),e.$targetEl=o(t),e.targetEl=e.$targetEl[0],e.attachEvents(),e}position(t){const e=this,{$el:a,app:i,$containerEl:r}=e,n=!!e.params.containerEl,s=e.params.offset||0;a.css({left:"",top:""});const l=o(t||e.targetEl),[p,c]=[a.width(),a.height()];let d,h,g,f;a.css({left:"",top:""});const u=n&&r.length?r[0].getBoundingClientRect():i;if(l&&l.length>0){if(d=l.outerWidth(),h=l.outerHeight(),void 0===d&&void 0===h){const t=l[0].getBoundingClientRect();d=t.width,h=t.height}const t=l.offset();g=t.left-u.left,f=t.top-u.top;const e=l.parents(".page");e.length>0&&(f-=e[0].scrollTop)}let[m,v]=[0,0,0],E="top";c+s<f?v=f-c-s:c<u.height-f-h?(E="bottom",v=f+h+s):(E="middle",v=h/2+f-c/2,v<=0?v=8:v+c>=u.height&&(v=u.height-c-8)),"top"===E||"bottom"===E?(m=d/2+g-p/2,m<8&&(m=8),m+p>u.width&&(m=u.width-p-8),m<0&&(m=0)):"middle"===E&&(m=g-p,(m<8||m+p>u.width)&&(m<8&&(m=g+d),m+p>u.width&&(m=u.width-p-8))),a.css({top:`${v}px`,left:`${m}px`})}show(t){const e=this,{$el:a,$targetEl:i,$containerEl:r}=e;r[0]&&a[0]&&!r[0].contains(a[0])&&r.append(a),e.position(t);const n=o(t);return e.visible=!0,e.opened=!0,i.trigger("tooltip:show"),a.trigger("tooltip:show"),n.length&&n[0]!==i[0]&&n.trigger("tooltip:show"),e.emit("local::show tooltipShow",e),a.removeClass("tooltip-out").addClass("tooltip-in"),e}hide(){const t=this,{$el:e,$targetEl:o}=t;return t.visible=!1,t.opened=!1,o.trigger("tooltip:hide"),e.trigger("tooltip:hide"),t.emit("local::hide tooltipHide",t),e.addClass("tooltip-out").removeClass("tooltip-in"),t}render(){const t=this;if(t.params.render)return t.params.render.call(t,t);const{cssClass:e,text:o}=t.params;return`\n        <div class="tooltip ${e||""}">\n          <div class="tooltip-content">${o||""}</div>\n        </div>\n      `.trim()}setText(t){const e=this;return void 0===t||(e.params.text=t,e.text=t,e.$el&&e.$el.children(".tooltip-content").html(t),e.opened&&e.position()),e}init(){this.attachEvents()}destroy(){const t=this;t.$targetEl&&!t.destroyed&&(t.$targetEl.trigger("tooltip:beforedestroy"),t.emit("local::beforeDestroy tooltipBeforeDestroy",t),t.$el.remove(),t.$targetEl[0]&&delete t.$targetEl[0].f7Tooltip,t.detachEvents(),l(t),t.destroyed=!0)}}var c={name:"tooltip",static:{Tooltip:p},create(){const t=this;t.tooltip=n({defaultSelector:".tooltip",constructor:p,app:t,domProp:"f7Tooltip"}),t.tooltip.show=function(t){const e=o(t);if(0===e.length)return;const a=e[0].f7Tooltip;return a?(a.show(e[0]),a):void 0},t.tooltip.hide=function(t){const e=o(t);if(0===e.length)return;const a=e[0].f7Tooltip;return a?(a.hide(),a):void 0},t.tooltip.setText=function(t,e){const a=o(t);if(0===a.length)return;const i=a[0].f7Tooltip;return i?(i.setText(e),i):void 0}},params:{tooltip:{targetEl:null,delegated:!1,text:null,cssClass:null,render:null,offset:0,trigger:"hover",containerEl:void 0}},on:{tabMounted(t){const e=this;o(t).find(".tooltip-init").each((t=>{const a=o(t).attr("data-tooltip");a&&e.tooltip.create({targetEl:t,text:a})}))},tabBeforeRemove(t){o(t).find(".tooltip-init").each((t=>{t.f7Tooltip&&t.f7Tooltip.destroy()}))},pageInit(t){const e=this;t.$el.find(".tooltip-init").each((t=>{const a=o(t).attr("data-tooltip");a&&e.tooltip.create({targetEl:t,text:a})})),"ios"===e.theme&&t.view&&t.view.router.dynamicNavbar&&t.$navbarEl&&t.$navbarEl.length>0&&t.$navbarEl.find(".tooltip-init").each((t=>{const a=o(t).attr("data-tooltip");a&&e.tooltip.create({targetEl:t,text:a})}))},pageBeforeRemove(t){t.$el.find(".tooltip-init").each((t=>{t.f7Tooltip&&t.f7Tooltip.destroy()})),"ios"===this.theme&&t.view&&t.view.router.dynamicNavbar&&t.$navbarEl&&t.$navbarEl.length>0&&t.$navbarEl.find(".tooltip-init").each((t=>{t.f7Tooltip&&t.f7Tooltip.destroy()}))}},vnode:{"tooltip-init":{insert(t){const e=t.elm,a=o(e).attr("data-tooltip");a&&this.tooltip.create({targetEl:e,text:a})},update(t){const e=t.elm;e.f7Tooltip&&t&&t.data&&t.data.attrs&&t.data.attrs["data-tooltip"]&&e.f7Tooltip.setText(t.data.attrs["data-tooltip"])},destroy(t){const e=t.elm;e.f7Tooltip&&e.f7Tooltip.destroy()}}}};if(e){if(t.prototype.modules&&t.prototype.modules[c.name])return;t.use(c),t.instance&&(t.instance.useModuleParams(c,t.instance.params),t.instance.useModule(c))}return c}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/touch-ripple/touch-ripple-class.js

@@ -0,0 +1,98 @@
+import $ from '../../shared/dom7';
+export default class TouchRipple {
+  constructor(app, $el, x, y) {
+    const ripple = this;
+    if (!$el) return undefined;
+    const {
+      left,
+      top,
+      width,
+      height
+    } = $el[0].getBoundingClientRect();
+    const center = {
+      x: x - left,
+      y: y - top
+    };
+    let diameter = Math.max((height ** 2 + width ** 2) ** 0.5, 48);
+    let isInset = false;
+    const insetElements = app.params.touch.touchRippleInsetElements || '';
+
+    if (insetElements && $el.is(insetElements)) {
+      isInset = true;
+    }
+
+    if (isInset) {
+      diameter = Math.max(Math.min(width, height), 48);
+    }
+
+    if (!isInset && $el.css('overflow') === 'hidden') {
+      const distanceFromCenter = ((center.x - width / 2) ** 2 + (center.y - height / 2) ** 2) ** 0.5;
+      const scale = (diameter / 2 + distanceFromCenter) / (diameter / 2);
+      ripple.rippleTransform = `translate3d(0px, 0px, 0) scale(${scale})`;
+    } else {
+      // prettier-ignore
+      ripple.rippleTransform = `translate3d(${-center.x + width / 2}px, ${-center.y + height / 2}px, 0) scale(1)`;
+    }
+
+    if (isInset) {
+      $el.addClass('ripple-inset');
+    }
+
+    ripple.$rippleWaveEl = $(`<div class="ripple-wave" style="width: ${diameter}px; height: ${diameter}px; margin-top:-${diameter / 2}px; margin-left:-${diameter / 2}px; left:${center.x}px; top:${center.y}px; --f7-ripple-transform: ${ripple.rippleTransform}"></div>`);
+    $el.prepend(ripple.$rippleWaveEl);
+    ripple.$rippleWaveEl.animationEnd(() => {
+      if (!ripple.$rippleWaveEl) return;
+      if (ripple.$rippleWaveEl.hasClass('ripple-wave-out')) return;
+      ripple.$rippleWaveEl.addClass('ripple-wave-in');
+
+      if (ripple.shouldBeRemoved) {
+        ripple.out();
+      }
+    });
+    return ripple;
+  }
+
+  destroy() {
+    let ripple = this;
+
+    if (ripple.$rippleWaveEl) {
+      ripple.$rippleWaveEl.remove();
+    }
+
+    Object.keys(ripple).forEach(key => {
+      ripple[key] = null;
+      delete ripple[key];
+    });
+    ripple = null;
+  }
+
+  out() {
+    const ripple = this;
+    const {
+      $rippleWaveEl
+    } = this;
+    clearTimeout(ripple.removeTimeout);
+    $rippleWaveEl.addClass('ripple-wave-out');
+    ripple.removeTimeout = setTimeout(() => {
+      ripple.destroy();
+    }, 300);
+    $rippleWaveEl.animationEnd(() => {
+      clearTimeout(ripple.removeTimeout);
+      ripple.destroy();
+    });
+  }
+
+  remove() {
+    const ripple = this;
+    if (ripple.shouldBeRemoved) return;
+    ripple.removeTimeout = setTimeout(() => {
+      ripple.destroy();
+    }, 400);
+    ripple.shouldBeRemoved = true;
+
+    if (ripple.$rippleWaveEl.hasClass('ripple-wave-in')) {
+      ripple.out();
+    }
+  }
+
+}

package/components/touch-ripple/touch-ripple-vars.less

@@ -3,6 +3,6 @@
   --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
 }
-.theme-dark {
+.dark {
   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
 }

package/components/touch-ripple/touch-ripple.js

@@ -0,0 +1,18 @@
+import TouchRipple from './touch-ripple-class';
+export default {
+  name: 'touch-ripple',
+  static: {
+    TouchRipple
+  },
+
+  create() {
+    const app = this;
+    app.touchRipple = {
+      create(...args) {
+        return new TouchRipple(...args);
+      }
+
+    };
+  }
+
+};