framework7 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/list-index/list-index-class.js

@@ -1,29 +1,13 @@
-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 $ from '../../shared/dom7';
-import { extend, deleteProps } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
-import { getSupport } from '../../shared/get-support';
-
-var ListIndex = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(ListIndex, _Framework7Class);
-
-  function ListIndex(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var index = _assertThisInitialized(_this);
-
-    var defaults = {
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import { getSupport } from '../../shared/get-support.js';
+
+class ListIndex extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const index = this;
+    const defaults = {
       el: null,
       // where to render indexes
       listEl: null,
@@ -35,31 +19,36 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
       auroraItemHeight: 14,
       scrollList: true,
       label: false,
+
       // eslint-disable-next-line
-      renderItem: function renderItem(itemContent, itemIndex) {
-        return ("\n          <li>" + itemContent + "</li>\n        ").trim();
+      renderItem(itemContent, itemIndex) {
+        return `
+          <li>${itemContent}</li>
+        `.trim();
       },
-      renderSkipPlaceholder: function renderSkipPlaceholder() {
+
+      renderSkipPlaceholder() {
         return '<li class="list-index-skip-placeholder"></li>';
       },
+
       on: {}
     }; // Extend defaults with modules params
 
     index.useModulesParams(defaults);
     index.params = extend(defaults, params);
-    var $el;
-    var $listEl;
-    var $pageContentEl;
-    var $ul;
+    let $el;
+    let $listEl;
+    let $pageContentEl;
+    let $ul;
 
     if (index.params.el) {
       $el = $(index.params.el);
     } else {
-      return index || _assertThisInitialized(_this);
+      return index;
     }
 
     if ($el[0].f7ListIndex) {
-      return $el[0].f7ListIndex || _assertThisInitialized(_this);
+      return $el[0].f7ListIndex;
     }
 
     $ul = $el.find('ul');
@@ -74,7 +63,7 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (index.params.indexes === 'auto' && !$listEl) {
-      return index || _assertThisInitialized(_this);
+      return index;
     }
 
     if ($listEl) {
@@ -89,14 +78,14 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
 
     $el[0].f7ListIndex = index;
     extend(index, {
-      app: app,
-      $el: $el,
+      app,
+      $el,
       el: $el && $el[0],
-      $ul: $ul,
+      $ul,
       ul: $ul && $ul[0],
-      $listEl: $listEl,
+      $listEl,
       listEl: $listEl && $listEl[0],
-      $pageContentEl: $pageContentEl,
+      $pageContentEl,
       pageContentEl: $pageContentEl && $pageContentEl[0],
       indexes: params.indexes,
       height: 0,
@@ -106,8 +95,8 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
     index.useModules(); // Attach events
 
     function handleResize() {
-      var height = {
-        index: index
+      const height = {
+        index
       };
       index.calcSize();
 
@@ -117,16 +106,16 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
     }
 
     function handleClick(e) {
-      var $clickedLi = $(e.target).closest('li');
+      const $clickedLi = $(e.target).closest('li');
       if (!$clickedLi.length) return;
-      var itemIndex = $clickedLi.index();
+      let itemIndex = $clickedLi.index();
 
       if (index.skipRate > 0) {
-        var percentage = itemIndex / ($clickedLi.siblings('li').length - 1);
+        const percentage = itemIndex / ($clickedLi.siblings('li').length - 1);
         itemIndex = Math.round((index.indexes.length - 1) * percentage);
       }
 
-      var itemContent = index.indexes[itemIndex];
+      const itemContent = index.indexes[itemIndex];
       index.$el.trigger('listindex:click', {
         content: itemContent,
         index: itemIndex
@@ -143,16 +132,16 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var touchesStart = {};
-    var isTouched;
-    var isMoved;
-    var topPoint;
-    var bottomPoint;
-    var $labelEl;
-    var previousIndex = null;
+    const touchesStart = {};
+    let isTouched;
+    let isMoved;
+    let topPoint;
+    let bottomPoint;
+    let $labelEl;
+    let previousIndex = null;
 
     function handleTouchStart(e) {
-      var $children = $ul.children();
+      const $children = $ul.children();
       if (!$children.length) return;
       topPoint = $children[0].getBoundingClientRect().top;
       bottomPoint = $children[$children.length - 1].getBoundingClientRect().top + $children[0].offsetHeight;
@@ -172,18 +161,18 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
       }
 
       isMoved = true;
-      var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
       e.preventDefault();
-      var percentage = (pageY - topPoint) / (bottomPoint - topPoint);
+      let percentage = (pageY - topPoint) / (bottomPoint - topPoint);
       percentage = Math.min(Math.max(percentage, 0), 1);
-      var itemIndex = Math.round((index.indexes.length - 1) * percentage);
-      var itemContent = index.indexes[itemIndex];
-      var ulHeight = bottomPoint - topPoint;
-      var bubbleBottom = (index.height - ulHeight) / 2 + (1 - percentage) * ulHeight;
+      const itemIndex = Math.round((index.indexes.length - 1) * percentage);
+      const itemContent = index.indexes[itemIndex];
+      const ulHeight = bottomPoint - topPoint;
+      const bubbleBottom = (index.height - ulHeight) / 2 + (1 - percentage) * ulHeight;
 
       if (itemIndex !== previousIndex) {
         if (index.params.label) {
-          $labelEl.html(itemContent).transform("translateY(-" + bubbleBottom + "px)");
+          $labelEl.html(itemContent).transform(`translateY(-${bubbleBottom}px)`);
         }
 
         if (index.$listEl && index.params.scrollList) {
@@ -207,7 +196,7 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var passiveListener = getSupport().passiveListener ? {
+    const passiveListener = getSupport().passiveListener ? {
       passive: true
     } : false;
 
@@ -237,36 +226,36 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
 
 
     index.init();
-    return index || _assertThisInitialized(_this);
+    return index;
   } // eslint-disable-next-line
 
 
-  var _proto = ListIndex.prototype;
-
-  _proto.scrollListToIndex = function scrollListToIndex(itemContent, itemIndex) {
-    var index = this;
-    var $listEl = index.$listEl,
-        $pageContentEl = index.$pageContentEl,
-        app = index.app;
+  scrollListToIndex(itemContent, itemIndex) {
+    const index = this;
+    const {
+      $listEl,
+      $pageContentEl,
+      app
+    } = index;
     if (!$listEl || !$pageContentEl || $pageContentEl.length === 0) return index;
-    var $scrollToEl;
-    $listEl.find('.list-group-title, .item-divider').each(function (el) {
+    let $scrollToEl;
+    $listEl.find('.list-group-title, .item-divider').each(el => {
       if ($scrollToEl) return;
-      var $el = $(el);
+      const $el = $(el);
 
       if ($el.text() === itemContent) {
         $scrollToEl = $el;
       }
     });
     if (!$scrollToEl || $scrollToEl.length === 0) return index;
-    var parentTop = $scrollToEl.parent().offset().top;
-    var paddingTop = parseInt($pageContentEl.css('padding-top'), 10);
-    var scrollTop = $pageContentEl[0].scrollTop;
-    var scrollToElTop = $scrollToEl.offset().top;
+    const parentTop = $scrollToEl.parent().offset().top;
+    let paddingTop = parseInt($pageContentEl.css('padding-top'), 10);
+    const scrollTop = $pageContentEl[0].scrollTop;
+    const scrollToElTop = $scrollToEl.offset().top;
 
     if ($pageContentEl.parents('.page-with-navbar-large').length) {
-      var navbarInnerEl = app.navbar.getElByPage($pageContentEl.parents('.page-with-navbar-large').eq(0));
-      var $titleLargeEl = $(navbarInnerEl).find('.title-large');
+      const navbarInnerEl = app.navbar.getElByPage($pageContentEl.parents('.page-with-navbar-large').eq(0));
+      const $titleLargeEl = $(navbarInnerEl).find('.title-large');
 
       if ($titleLargeEl.length) {
         paddingTop -= $titleLargeEl[0].offsetHeight || 0;
@@ -280,31 +269,33 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return index;
-  };
+  }
 
-  _proto.renderSkipPlaceholder = function renderSkipPlaceholder() {
-    var index = this;
+  renderSkipPlaceholder() {
+    const index = this;
     return index.params.renderSkipPlaceholder.call(index);
-  };
+  }
 
-  _proto.renderItem = function renderItem(itemContent, itemIndex) {
-    var index = this;
+  renderItem(itemContent, itemIndex) {
+    const index = this;
     return index.params.renderItem.call(index, itemContent, itemIndex);
-  };
-
-  _proto.render = function render() {
-    var index = this;
-    var $ul = index.$ul,
-        indexes = index.indexes,
-        skipRate = index.skipRate;
-    var wasSkipped;
-    var html = indexes.map(function (itemContent, itemIndex) {
+  }
+
+  render() {
+    const index = this;
+    const {
+      $ul,
+      indexes,
+      skipRate
+    } = index;
+    let wasSkipped;
+    const html = indexes.map((itemContent, itemIndex) => {
       if (itemIndex % skipRate !== 0 && skipRate > 0) {
         wasSkipped = true;
         return '';
       }
 
-      var itemHtml = index.renderItem(itemContent, itemIndex);
+      let itemHtml = index.renderItem(itemContent, itemIndex);
 
       if (wasSkipped) {
         itemHtml = index.renderSkipPlaceholder() + itemHtml;
@@ -315,19 +306,21 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
     }).join('');
     $ul.html(html);
     return index;
-  };
-
-  _proto.calcSize = function calcSize() {
-    var index = this;
-    var app = index.app,
-        params = index.params,
-        el = index.el,
-        indexes = index.indexes;
-    var height = el.offsetHeight;
-    var itemHeight = params[app.theme + "ItemHeight"];
-    var maxItems = Math.floor(height / itemHeight);
-    var items = indexes.length;
-    var skipRate = 0;
+  }
+
+  calcSize() {
+    const index = this;
+    const {
+      app,
+      params,
+      el,
+      indexes
+    } = index;
+    const height = el.offsetHeight;
+    const itemHeight = params[`${app.theme}ItemHeight`];
+    const maxItems = Math.floor(height / itemHeight);
+    const items = indexes.length;
+    let skipRate = 0;
 
     if (items > maxItems) {
       skipRate = Math.ceil((items * 2 - 1) / maxItems);
@@ -336,15 +329,15 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
     index.height = height;
     index.skipRate = skipRate;
     return index;
-  };
+  }
 
-  _proto.calcIndexes = function calcIndexes() {
-    var index = this;
+  calcIndexes() {
+    const index = this;
 
     if (index.params.indexes === 'auto') {
       index.indexes = [];
-      index.$listEl.find('.list-group-title, .item-divider').each(function (el) {
-        var elContent = $(el).text();
+      index.$listEl.find('.list-group-title, .item-divider').each(el => {
+        const elContent = $(el).text();
 
         if (index.indexes.indexOf(elContent) < 0) {
           index.indexes.push(elContent);
@@ -355,26 +348,26 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return index;
-  };
+  }
 
-  _proto.update = function update() {
-    var index = this;
+  update() {
+    const index = this;
     index.calcIndexes();
     index.calcSize();
     index.render();
     return index;
-  };
+  }
 
-  _proto.init = function init() {
-    var index = this;
+  init() {
+    const index = this;
     index.calcIndexes();
     index.calcSize();
     index.render();
     index.attachEvents();
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var index = this;
+  destroy() {
+    let index = this;
     index.$el.trigger('listindex:beforedestroy', index);
     index.emit('local::beforeDestroy listIndexBeforeDestroy');
     index.detachEvents();
@@ -386,9 +379,8 @@ var ListIndex = /*#__PURE__*/function (_Framework7Class) {
 
     deleteProps(index);
     index = null;
-  };
+  }
 
-  return ListIndex;
-}(Framework7Class);
+}
 
 export default ListIndex;

package/components/list-index/list-index-rtl.css

@@ -1 +1 @@
-:root{--f7-list-index-width:16px;--f7-list-index-font-size:11px;--f7-list-index-font-weight:600;--f7-list-index-item-height:14px;--f7-list-index-label-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--f7-list-index-label-size:44px;--f7-list-index-label-font-size:17px;--f7-list-index-skip-dot-size:6px}.md{--f7-list-index-label-size:56px;--f7-list-index-label-font-size:20px;--f7-list-index-skip-dot-size:4px}.aurora{--f7-list-index-font-size:12px;--f7-list-index-label-size:32px;--f7-list-index-label-font-size:12px;--f7-list-index-label-font-weight:600;--f7-list-index-skip-dot-size:4px}.list-index{position:absolute;top:0;bottom:0;text-align:center;z-index:10;width:var(--f7-list-index-width);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:var(--f7-safe-area-left)}.list-index:before{content:'';position:absolute;width:20px;top:0;right:100%;height:100%}.list-index ul{color:var(--f7-list-index-text-color,var(--f7-theme-color));font-size:var(--f7-list-index-font-size);font-weight:var(--f7-list-index-font-weight);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;height:100%;width:100%;position:relative}.list-index li{margin:0;padding:0;list-style:none;position:relative;height:var(--f7-list-index-item-height);line-height:var(--f7-list-index-item-height);flex-shrink:0;display:block;width:100%}.list-index .list-index-skip-placeholder:after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;width:var(--f7-list-index-skip-dot-size);height:var(--f7-list-index-skip-dot-size);margin-left:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);margin-top:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);background:var(--f7-list-index-text-color,var(--f7-theme-color))}.list-index .list-index-label{position:absolute;bottom:0;right:100%;text-align:center;background-color:var(--f7-list-index-label-bg-color,var(--f7-theme-color));color:var(--f7-list-index-label-text-color);width:var(--f7-list-index-label-size);height:var(--f7-list-index-label-size);line-height:var(--f7-list-index-label-size);font-size:var(--f7-list-index-label-font-size);font-weight:var(--f7-list-index-label-font-weight)}.navbars~.page>.list-index,.navbar~.list-index,.navbar~.page>.list-index{top:var(--f7-navbar-height)}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md~.list-index,.ios .navbar~.toolbar-top-ios~.list-index,.navbars~.toolbar-top~.list-index,.navbar~.toolbar-top~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height))}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md.tabbar-labels~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-labels~.list-index,.navbars~.toolbar-top.tabbar-labels~.list-index,.navbar~.toolbar-top.tabbar-labels~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height))}.navbars~.subnavbar~.list-index,.navbar~.subnavbar~.list-index,.page-with-subnavbar .navbar~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-subnavbar-height))}.ios .toolbar-bottom-ios~* .page>.list-index,.ios .toolbar-bottom-ios~.list-index,.ios .toolbar-bottom-ios~.page>.list-index,.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.list-index,.md .toolbar-bottom-md~.page>.list-index,.toolbar-bottom~* .page>.list-index,.toolbar-bottom~.list-index,.toolbar-bottom~.page>.list-index{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.ios .toolbar-bottom-ios.tabbar-labels~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.page>.list-index,.md .toolbar-bottom-md.tabbar-labels~* .page>.list-index,.md .toolbar-bottom-md.tabbar-labels~.list-index,.md .toolbar-bottom-md.tabbar-labels~.page>.list-index,.toolbar-bottom.tabbar-labels~* .page>.list-index,.toolbar-bottom.tabbar-labels~.list-index,.toolbar-bottom.tabbar-labels~.page>.list-index{bottom:calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))}.ios .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.ios .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 0% 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}.md .list-index .list-index-label{border-radius:50% 50% 0 50%}.aurora .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.aurora .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 1px 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}
+:root{--f7-list-index-width:16px;--f7-list-index-font-size:11px;--f7-list-index-font-weight:600;--f7-list-index-item-height:14px;--f7-list-index-label-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--f7-list-index-label-size:44px;--f7-list-index-label-font-size:17px;--f7-list-index-skip-dot-size:6px}.md{--f7-list-index-label-size:56px;--f7-list-index-label-font-size:20px;--f7-list-index-skip-dot-size:4px}.aurora{--f7-list-index-font-size:12px;--f7-list-index-label-size:32px;--f7-list-index-label-font-size:12px;--f7-list-index-label-font-weight:600;--f7-list-index-skip-dot-size:4px}.list-index{position:absolute;top:0;bottom:0;text-align:center;z-index:10;width:var(--f7-list-index-width);cursor:pointer;-webkit-user-select:none;user-select:none;left:var(--f7-safe-area-left)}.list-index:before{content:'';position:absolute;width:20px;top:0;right:100%;height:100%}.list-index ul{color:var(--f7-list-index-text-color,var(--f7-theme-color));font-size:var(--f7-list-index-font-size);font-weight:var(--f7-list-index-font-weight);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;height:100%;width:100%;position:relative}.list-index li{margin:0;padding:0;list-style:none;position:relative;height:var(--f7-list-index-item-height);line-height:var(--f7-list-index-item-height);flex-shrink:0;display:block;width:100%}.list-index .list-index-skip-placeholder:after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;width:var(--f7-list-index-skip-dot-size);height:var(--f7-list-index-skip-dot-size);margin-left:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);margin-top:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);background:var(--f7-list-index-text-color,var(--f7-theme-color))}.list-index .list-index-label{position:absolute;bottom:0;right:100%;text-align:center;background-color:var(--f7-list-index-label-bg-color,var(--f7-theme-color));color:var(--f7-list-index-label-text-color);width:var(--f7-list-index-label-size);height:var(--f7-list-index-label-size);line-height:var(--f7-list-index-label-size);font-size:var(--f7-list-index-label-font-size);font-weight:var(--f7-list-index-label-font-weight)}.navbars~.page>.list-index,.navbar~.list-index,.navbar~.page>.list-index{top:var(--f7-navbar-height)}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md~.list-index,.ios .navbar~.toolbar-top-ios~.list-index,.navbars~.toolbar-top~.list-index,.navbar~.toolbar-top~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height))}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md.tabbar-labels~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-labels~.list-index,.navbars~.toolbar-top.tabbar-labels~.list-index,.navbar~.toolbar-top.tabbar-labels~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height))}.navbars~.subnavbar~.list-index,.navbar~.subnavbar~.list-index,.page-with-subnavbar .navbar~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-subnavbar-height))}.ios .toolbar-bottom-ios~* .page>.list-index,.ios .toolbar-bottom-ios~.list-index,.ios .toolbar-bottom-ios~.page>.list-index,.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.list-index,.md .toolbar-bottom-md~.page>.list-index,.toolbar-bottom~* .page>.list-index,.toolbar-bottom~.list-index,.toolbar-bottom~.page>.list-index{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.ios .toolbar-bottom-ios.tabbar-labels~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.page>.list-index,.md .toolbar-bottom-md.tabbar-labels~* .page>.list-index,.md .toolbar-bottom-md.tabbar-labels~.list-index,.md .toolbar-bottom-md.tabbar-labels~.page>.list-index,.toolbar-bottom.tabbar-labels~* .page>.list-index,.toolbar-bottom.tabbar-labels~.list-index,.toolbar-bottom.tabbar-labels~.page>.list-index{bottom:calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))}.ios .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.ios .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 0% 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}.md .list-index .list-index-label{border-radius:50% 50% 0 50%}.aurora .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.aurora .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 1px 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}

package/components/list-index/list-index.css

@@ -1 +1 @@
-:root{--f7-list-index-width:16px;--f7-list-index-font-size:11px;--f7-list-index-font-weight:600;--f7-list-index-item-height:14px;--f7-list-index-label-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--f7-list-index-label-size:44px;--f7-list-index-label-font-size:17px;--f7-list-index-skip-dot-size:6px}.md{--f7-list-index-label-size:56px;--f7-list-index-label-font-size:20px;--f7-list-index-skip-dot-size:4px}.aurora{--f7-list-index-font-size:12px;--f7-list-index-label-size:32px;--f7-list-index-label-font-size:12px;--f7-list-index-label-font-weight:600;--f7-list-index-skip-dot-size:4px}.list-index{position:absolute;top:0;bottom:0;text-align:center;z-index:10;width:var(--f7-list-index-width);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;right:var(--f7-safe-area-right)}.list-index:before{content:'';position:absolute;width:20px;top:0;right:100%;height:100%}.list-index ul{color:var(--f7-list-index-text-color,var(--f7-theme-color));font-size:var(--f7-list-index-font-size);font-weight:var(--f7-list-index-font-weight);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;height:100%;width:100%;position:relative}.list-index li{margin:0;padding:0;list-style:none;position:relative;height:var(--f7-list-index-item-height);line-height:var(--f7-list-index-item-height);flex-shrink:0;display:block;width:100%}.list-index .list-index-skip-placeholder:after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;width:var(--f7-list-index-skip-dot-size);height:var(--f7-list-index-skip-dot-size);margin-left:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);margin-top:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);background:var(--f7-list-index-text-color,var(--f7-theme-color))}.list-index .list-index-label{position:absolute;bottom:0;right:100%;text-align:center;background-color:var(--f7-list-index-label-bg-color,var(--f7-theme-color));color:var(--f7-list-index-label-text-color);width:var(--f7-list-index-label-size);height:var(--f7-list-index-label-size);line-height:var(--f7-list-index-label-size);font-size:var(--f7-list-index-label-font-size);font-weight:var(--f7-list-index-label-font-weight)}.navbars~.page>.list-index,.navbar~.list-index,.navbar~.page>.list-index{top:var(--f7-navbar-height)}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md~.list-index,.ios .navbar~.toolbar-top-ios~.list-index,.navbars~.toolbar-top~.list-index,.navbar~.toolbar-top~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height))}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md.tabbar-labels~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-labels~.list-index,.navbars~.toolbar-top.tabbar-labels~.list-index,.navbar~.toolbar-top.tabbar-labels~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height))}.navbars~.subnavbar~.list-index,.navbar~.subnavbar~.list-index,.page-with-subnavbar .navbar~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-subnavbar-height))}.ios .toolbar-bottom-ios~* .page>.list-index,.ios .toolbar-bottom-ios~.list-index,.ios .toolbar-bottom-ios~.page>.list-index,.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.list-index,.md .toolbar-bottom-md~.page>.list-index,.toolbar-bottom~* .page>.list-index,.toolbar-bottom~.list-index,.toolbar-bottom~.page>.list-index{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.ios .toolbar-bottom-ios.tabbar-labels~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.page>.list-index,.md .toolbar-bottom-md.tabbar-labels~* .page>.list-index,.md .toolbar-bottom-md.tabbar-labels~.list-index,.md .toolbar-bottom-md.tabbar-labels~.page>.list-index,.toolbar-bottom.tabbar-labels~* .page>.list-index,.toolbar-bottom.tabbar-labels~.list-index,.toolbar-bottom.tabbar-labels~.page>.list-index{bottom:calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))}.ios .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.ios .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 0% 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}.md .list-index .list-index-label{border-radius:50% 50% 0 50%}.aurora .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.aurora .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 1px 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}
+:root{--f7-list-index-width:16px;--f7-list-index-font-size:11px;--f7-list-index-font-weight:600;--f7-list-index-item-height:14px;--f7-list-index-label-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--f7-list-index-label-size:44px;--f7-list-index-label-font-size:17px;--f7-list-index-skip-dot-size:6px}.md{--f7-list-index-label-size:56px;--f7-list-index-label-font-size:20px;--f7-list-index-skip-dot-size:4px}.aurora{--f7-list-index-font-size:12px;--f7-list-index-label-size:32px;--f7-list-index-label-font-size:12px;--f7-list-index-label-font-weight:600;--f7-list-index-skip-dot-size:4px}.list-index{position:absolute;top:0;bottom:0;text-align:center;z-index:10;width:var(--f7-list-index-width);cursor:pointer;-webkit-user-select:none;user-select:none;right:var(--f7-safe-area-right)}.list-index:before{content:'';position:absolute;width:20px;top:0;right:100%;height:100%}.list-index ul{color:var(--f7-list-index-text-color,var(--f7-theme-color));font-size:var(--f7-list-index-font-size);font-weight:var(--f7-list-index-font-weight);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;height:100%;width:100%;position:relative}.list-index li{margin:0;padding:0;list-style:none;position:relative;height:var(--f7-list-index-item-height);line-height:var(--f7-list-index-item-height);flex-shrink:0;display:block;width:100%}.list-index .list-index-skip-placeholder:after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;width:var(--f7-list-index-skip-dot-size);height:var(--f7-list-index-skip-dot-size);margin-left:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);margin-top:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);background:var(--f7-list-index-text-color,var(--f7-theme-color))}.list-index .list-index-label{position:absolute;bottom:0;right:100%;text-align:center;background-color:var(--f7-list-index-label-bg-color,var(--f7-theme-color));color:var(--f7-list-index-label-text-color);width:var(--f7-list-index-label-size);height:var(--f7-list-index-label-size);line-height:var(--f7-list-index-label-size);font-size:var(--f7-list-index-label-font-size);font-weight:var(--f7-list-index-label-font-weight)}.navbars~.page>.list-index,.navbar~.list-index,.navbar~.page>.list-index{top:var(--f7-navbar-height)}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md~.list-index,.ios .navbar~.toolbar-top-ios~.list-index,.navbars~.toolbar-top~.list-index,.navbar~.toolbar-top~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height))}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md.tabbar-labels~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-labels~.list-index,.navbars~.toolbar-top.tabbar-labels~.list-index,.navbar~.toolbar-top.tabbar-labels~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height))}.navbars~.subnavbar~.list-index,.navbar~.subnavbar~.list-index,.page-with-subnavbar .navbar~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-subnavbar-height))}.ios .toolbar-bottom-ios~* .page>.list-index,.ios .toolbar-bottom-ios~.list-index,.ios .toolbar-bottom-ios~.page>.list-index,.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.list-index,.md .toolbar-bottom-md~.page>.list-index,.toolbar-bottom~* .page>.list-index,.toolbar-bottom~.list-index,.toolbar-bottom~.page>.list-index{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.ios .toolbar-bottom-ios.tabbar-labels~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.page>.list-index,.md .toolbar-bottom-md.tabbar-labels~* .page>.list-index,.md .toolbar-bottom-md.tabbar-labels~.list-index,.md .toolbar-bottom-md.tabbar-labels~.page>.list-index,.toolbar-bottom.tabbar-labels~* .page>.list-index,.toolbar-bottom.tabbar-labels~.list-index,.toolbar-bottom.tabbar-labels~.page>.list-index{bottom:calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))}.ios .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.ios .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 0% 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}.md .list-index .list-index-label{border-radius:50% 50% 0 50%}.aurora .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.aurora .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 1px 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}

package/components/list-index/list-index.js

@@ -1 +1,73 @@
-(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var n=e.$,i=e.utils,r=(e.getDevice,e.getSupport),a=e.Class,o=(e.Modal,e.ConstructorMethods),s=(e.ModalMethods,i.extend),l=i.deleteProps;function c(e){this.wrapped=e}function d(e){var t,n;function i(t,n){try{var a=e[t](n),o=a.value,s=o instanceof c;Promise.resolve(s?o.wrapped:o).then((function(e){s?i("return"===t?"return":"next",e):r(a.done?"return":"normal",e)}),(function(e){i("throw",e)}))}catch(e){r("throw",e)}}function r(e,r){switch(e){case"return":t.resolve({value:r,done:!0});break;case"throw":t.reject(r);break;default:t.resolve({value:r,done:!1})}(t=t.next)?i(t.key,t.arg):n=null}this._invoke=function(e,r){return new Promise((function(a,o){var s={key:e,arg:r,resolve:a,reject:o,next:null};n?n=n.next=s:(t=n=s,i(e,r))}))},"function"!=typeof e.return&&(this.return=void 0)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}d.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},d.prototype.next=function(e){return this._invoke("next",e)},d.prototype.throw=function(e){return this._invoke("throw",e)},d.prototype.return=function(e){return this._invoke("return",e)};var f=function(e){var t,i;function a(t,i){var a;void 0===i&&(i={});var o,l,c,d,u=p(a=e.call(this,i,[t])||this),f={el:null,listEl:null,indexes:"auto",iosItemHeight:14,mdItemHeight:14,auroraItemHeight:14,scrollList:!0,label:!1,renderItem:function(e,t){return("\n          <li>"+e+"</li>\n        ").trim()},renderSkipPlaceholder:function(){return'<li class="list-index-skip-placeholder"></li>'},on:{}};if(u.useModulesParams(f),u.params=s(f,i),!u.params.el)return u||p(a);if((o=n(u.params.el))[0].f7ListIndex)return o[0].f7ListIndex||p(a);if(0===(d=o.find("ul")).length&&(d=n("<ul></ul>"),o.append(d)),u.params.listEl&&(l=n(u.params.listEl)),"auto"===u.params.indexes&&!l)return u||p(a);function h(){var e={index:u};u.calcSize(),e!==u.height&&u.render()}function v(e){var t=n(e.target).closest("li");if(t.length){var i=t.index();if(u.skipRate>0){var r=i/(t.siblings("li").length-1);i=Math.round((u.indexes.length-1)*r)}var a=u.indexes[i];u.$el.trigger("listindex:click",{content:a,index:i}),u.emit("local::click listIndexClick",u,a,i),u.$el.trigger("listindex:select",{content:a,index:i}),u.emit("local::select listIndexSelect",u,a,i),u.$listEl&&u.params.scrollList&&u.scrollListToIndex(a,i)}}l?c=l.parents(".page-content").eq(0):0===(c=o.siblings(".page-content").eq(0)).length&&(c=o.parents(".page").eq(0).find(".page-content").eq(0)),o[0].f7ListIndex=u,s(u,{app:t,$el:o,el:o&&o[0],$ul:d,ul:d&&d[0],$listEl:l,listEl:l&&l[0],$pageContentEl:c,pageContentEl:c&&c[0],indexes:i.indexes,height:0,skipRate:0}),u.useModules();var g,x,m,I,y,b={},k=null;function L(e){var t=d.children();t.length&&(m=t[0].getBoundingClientRect().top,I=t[t.length-1].getBoundingClientRect().top+t[0].offsetHeight,b.x="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,b.y="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,g=!0,x=!1,k=null)}function E(e){if(g){!x&&u.params.label&&(y=n('<span class="list-index-label"></span>'),o.append(y)),x=!0;var t="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY;e.preventDefault();var i=(t-m)/(I-m);i=Math.min(Math.max(i,0),1);var r=Math.round((u.indexes.length-1)*i),a=u.indexes[r],s=I-m,l=(u.height-s)/2+(1-i)*s;r!==k&&(u.params.label&&y.html(a).transform("translateY(-"+l+"px)"),u.$listEl&&u.params.scrollList&&u.scrollListToIndex(a,r)),k=r,u.$el.trigger("listindex:select"),u.emit("local::select listIndexSelect",u,a,r)}}function $(){g&&(g=!1,x=!1,u.params.label&&(y&&y.remove(),y=void 0))}var w=!!r().passiveListener&&{passive:!0};return u.attachEvents=function(){o.parents(".tab").on("tab:show",h),o.parents(".page").on("page:reinit",h),o.parents(".panel").on("panel:open",h),o.parents(".sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast").on("modal:open",h),t.on("resize",h),o.on("click",v),o.on(t.touchEvents.start,L,w),t.on("touchmove:active",E),t.on("touchend:passive",$)},u.detachEvents=function(){o.parents(".tab").off("tab:show",h),o.parents(".page").off("page:reinit",h),o.parents(".panel").off("panel:open",h),o.parents(".sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast").off("modal:open",h),t.off("resize",h),o.off("click",v),o.off(t.touchEvents.start,L,w),t.off("touchmove:active",E),t.off("touchend:passive",$)},u.init(),u||p(a)}i=e,(t=a).prototype=Object.create(i.prototype),t.prototype.constructor=t,u(t,i);var o=a.prototype;return o.scrollListToIndex=function(e,t){var i,r=this,a=r.$listEl,o=r.$pageContentEl,s=r.app;if(!a||!o||0===o.length)return r;if(a.find(".list-group-title, .item-divider").each((function(t){if(!i){var r=n(t);r.text()===e&&(i=r)}})),!i||0===i.length)return r;var l=i.parent().offset().top,c=parseInt(o.css("padding-top"),10),d=o[0].scrollTop,u=i.offset().top;if(o.parents(".page-with-navbar-large").length){var p=s.navbar.getElByPage(o.parents(".page-with-navbar-large").eq(0)),f=n(p).find(".title-large");f.length&&(c-=f[0].offsetHeight||0)}return l<=c?o.scrollTop(l+d-c):o.scrollTop(u+d-c),r},o.renderSkipPlaceholder=function(){return this.params.renderSkipPlaceholder.call(this)},o.renderItem=function(e,t){return this.params.renderItem.call(this,e,t)},o.render=function(){var e,t=this,n=t.$ul,i=t.indexes,r=t.skipRate,a=i.map((function(n,i){if(i%r!=0&&r>0)return e=!0,"";var a=t.renderItem(n,i);return e&&(a=t.renderSkipPlaceholder()+a),e=!1,a})).join("");return n.html(a),t},o.calcSize=function(){var e=this,t=e.app,n=e.params,i=e.el,r=e.indexes,a=i.offsetHeight,o=n[t.theme+"ItemHeight"],s=Math.floor(a/o),l=r.length,c=0;return l>s&&(c=Math.ceil((2*l-1)/s)),e.height=a,e.skipRate=c,e},o.calcIndexes=function(){var e=this;return"auto"===e.params.indexes?(e.indexes=[],e.$listEl.find(".list-group-title, .item-divider").each((function(t){var i=n(t).text();e.indexes.indexOf(i)<0&&e.indexes.push(i)}))):e.indexes=e.params.indexes,e},o.update=function(){var e=this;return e.calcIndexes(),e.calcSize(),e.render(),e},o.init=function(){var e=this;e.calcIndexes(),e.calcSize(),e.render(),e.attachEvents()},o.destroy=function(){var e=this;e.$el.trigger("listindex:beforedestroy",e),e.emit("local::beforeDestroy listIndexBeforeDestroy"),e.detachEvents(),e.$el[0]&&(e.$el[0].f7ListIndex=null,delete e.$el[0].f7ListIndex),l(e),e=null},a}(a),h={name:"listIndex",static:{ListIndex:f},create:function(){this.listIndex=o({defaultSelector:".list-index",constructor:f,app:this,domProp:"f7ListIndex"})},on:{tabMounted:function(e){var t=this;n(e).find(".list-index-init").each((function(e){var i=s(n(e).dataset(),{el:e});t.listIndex.create(i)}))},tabBeforeRemove:function(e){n(e).find(".list-index-init").each((function(e){e.f7ListIndex&&e.f7ListIndex.destroy()}))},pageInit:function(e){var t=this;e.$el.find(".list-index-init").each((function(e){var i=s(n(e).dataset(),{el:e});t.listIndex.create(i)}))},pageBeforeRemove:function(e){e.$el.find(".list-index-init").each((function(e){e.f7ListIndex&&e.f7ListIndex.destroy()}))}},vnode:{"list-index-init":{insert:function(e){var t=e.elm,i=s(n(t).dataset(),{el:t});this.listIndex.create(i)},destroy:function(e){var t=e.elm;t.f7ListIndex&&t.f7ListIndex.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[h.name])return;e.use(h),e.instance&&(e.instance.useModuleParams(h,e.instance.params),e.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import ListIndex from './list-index-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'listIndex',
+  static: {
+    ListIndex
+  },
+
+  create() {
+    const app = this;
+    app.listIndex = ConstructorMethods({
+      defaultSelector: '.list-index',
+      constructor: ListIndex,
+      app,
+      domProp: 'f7ListIndex'
+    });
+  },
+
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.list-index-init').each(listIndexEl => {
+        const params = extend($(listIndexEl).dataset(), {
+          el: listIndexEl
+        });
+        app.listIndex.create(params);
+      });
+    },
+
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.list-index-init').each(listIndexEl => {
+        if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();
+      });
+    },
+
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.list-index-init').each(listIndexEl => {
+        const params = extend($(listIndexEl).dataset(), {
+          el: listIndexEl
+        });
+        app.listIndex.create(params);
+      });
+    },
+
+    pageBeforeRemove(page) {
+      page.$el.find('.list-index-init').each(listIndexEl => {
+        if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();
+      });
+    }
+
+  },
+  vnode: {
+    'list-index-init': {
+      insert(vnode) {
+        const app = this;
+        const listIndexEl = vnode.elm;
+        const params = extend($(listIndexEl).dataset(), {
+          el: listIndexEl
+        });
+        app.listIndex.create(params);
+      },
+
+      destroy(vnode) {
+        const listIndexEl = vnode.elm;
+        if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();
+      }
+
+    }
+  }
+};

package/components/list-index/list-index.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var n=e.$,s=e.utils,i=(e.getDevice,e.getSupport),l=e.Class,a=(e.Modal,e.ConstructorMethods),o=(e.ModalMethods,s.extend),r=s.deleteProps;class d extends l{constructor(e,t={}){super(t,[e]);const s=this,l={el:null,listEl:null,indexes:"auto",iosItemHeight:14,mdItemHeight:14,auroraItemHeight:14,scrollList:!0,label:!1,renderItem:(e,t)=>`\n            <li>${e}</li>\n          `.trim(),renderSkipPlaceholder:()=>'<li class="list-index-skip-placeholder"></li>',on:{}};let a,r,d,c;if(s.useModulesParams(l),s.params=o(l,t),!s.params.el)return s;if(a=n(s.params.el),a[0].f7ListIndex)return a[0].f7ListIndex;if(c=a.find("ul"),0===c.length&&(c=n("<ul></ul>"),a.append(c)),s.params.listEl&&(r=n(s.params.listEl)),"auto"===s.params.indexes&&!r)return s;function p(){const e={index:s};s.calcSize(),e!==s.height&&s.render()}function h(e){const t=n(e.target).closest("li");if(!t.length)return;let i=t.index();if(s.skipRate>0){const e=i/(t.siblings("li").length-1);i=Math.round((s.indexes.length-1)*e)}const l=s.indexes[i];s.$el.trigger("listindex:click",{content:l,index:i}),s.emit("local::click listIndexClick",s,l,i),s.$el.trigger("listindex:select",{content:l,index:i}),s.emit("local::select listIndexSelect",s,l,i),s.$listEl&&s.params.scrollList&&s.scrollListToIndex(l,i)}r?d=r.parents(".page-content").eq(0):(d=a.siblings(".page-content").eq(0),0===d.length&&(d=a.parents(".page").eq(0).find(".page-content").eq(0))),a[0].f7ListIndex=s,o(s,{app:e,$el:a,el:a&&a[0],$ul:c,ul:c&&c[0],$listEl:r,listEl:r&&r[0],$pageContentEl:d,pageContentEl:d&&d[0],indexes:t.indexes,height:0,skipRate:0}),s.useModules();const u={};let f,g,x,m,I,v=null;function $(e){const t=c.children();t.length&&(x=t[0].getBoundingClientRect().top,m=t[t.length-1].getBoundingClientRect().top+t[0].offsetHeight,u.x="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,u.y="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,f=!0,g=!1,v=null)}function L(e){if(!f)return;!g&&s.params.label&&(I=n('<span class="list-index-label"></span>'),a.append(I)),g=!0;const t="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY;e.preventDefault();let i=(t-x)/(m-x);i=Math.min(Math.max(i,0),1);const l=Math.round((s.indexes.length-1)*i),o=s.indexes[l],r=m-x,d=(s.height-r)/2+(1-i)*r;l!==v&&(s.params.label&&I.html(o).transform(`translateY(-${d}px)`),s.$listEl&&s.params.scrollList&&s.scrollListToIndex(o,l)),v=l,s.$el.trigger("listindex:select"),s.emit("local::select listIndexSelect",s,o,l)}function E(){f&&(f=!1,g=!1,s.params.label&&(I&&I.remove(),I=void 0))}const b=!!i().passiveListener&&{passive:!0};return s.attachEvents=function(){a.parents(".tab").on("tab:show",p),a.parents(".page").on("page:reinit",p),a.parents(".panel").on("panel:open",p),a.parents(".sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast").on("modal:open",p),e.on("resize",p),a.on("click",h),a.on(e.touchEvents.start,$,b),e.on("touchmove:active",L),e.on("touchend:passive",E)},s.detachEvents=function(){a.parents(".tab").off("tab:show",p),a.parents(".page").off("page:reinit",p),a.parents(".panel").off("panel:open",p),a.parents(".sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast").off("modal:open",p),e.off("resize",p),a.off("click",h),a.off(e.touchEvents.start,$,b),e.off("touchmove:active",L),e.off("touchend:passive",E)},s.init(),s}scrollListToIndex(e,t){const s=this,{$listEl:i,$pageContentEl:l,app:a}=s;if(!i||!l||0===l.length)return s;let o;if(i.find(".list-group-title, .item-divider").each((t=>{if(o)return;const s=n(t);s.text()===e&&(o=s)})),!o||0===o.length)return s;const r=o.parent().offset().top;let d=parseInt(l.css("padding-top"),10);const c=l[0].scrollTop,p=o.offset().top;if(l.parents(".page-with-navbar-large").length){const e=a.navbar.getElByPage(l.parents(".page-with-navbar-large").eq(0)),t=n(e).find(".title-large");t.length&&(d-=t[0].offsetHeight||0)}return r<=d?l.scrollTop(r+c-d):l.scrollTop(p+c-d),s}renderSkipPlaceholder(){return this.params.renderSkipPlaceholder.call(this)}renderItem(e,t){return this.params.renderItem.call(this,e,t)}render(){const e=this,{$ul:t,indexes:n,skipRate:s}=e;let i;const l=n.map(((t,n)=>{if(n%s!=0&&s>0)return i=!0,"";let l=e.renderItem(t,n);return i&&(l=e.renderSkipPlaceholder()+l),i=!1,l})).join("");return t.html(l),e}calcSize(){const e=this,{app:t,params:n,el:s,indexes:i}=e,l=s.offsetHeight,a=n[`${t.theme}ItemHeight`],o=Math.floor(l/a),r=i.length;let d=0;return r>o&&(d=Math.ceil((2*r-1)/o)),e.height=l,e.skipRate=d,e}calcIndexes(){const e=this;return"auto"===e.params.indexes?(e.indexes=[],e.$listEl.find(".list-group-title, .item-divider").each((t=>{const s=n(t).text();e.indexes.indexOf(s)<0&&e.indexes.push(s)}))):e.indexes=e.params.indexes,e}update(){const e=this;return e.calcIndexes(),e.calcSize(),e.render(),e}init(){const e=this;e.calcIndexes(),e.calcSize(),e.render(),e.attachEvents()}destroy(){let e=this;e.$el.trigger("listindex:beforedestroy",e),e.emit("local::beforeDestroy listIndexBeforeDestroy"),e.detachEvents(),e.$el[0]&&(e.$el[0].f7ListIndex=null,delete e.$el[0].f7ListIndex),r(e),e=null}}var c={name:"listIndex",static:{ListIndex:d},create(){this.listIndex=a({defaultSelector:".list-index",constructor:d,app:this,domProp:"f7ListIndex"})},on:{tabMounted(e){const t=this;n(e).find(".list-index-init").each((e=>{const s=o(n(e).dataset(),{el:e});t.listIndex.create(s)}))},tabBeforeRemove(e){n(e).find(".list-index-init").each((e=>{e.f7ListIndex&&e.f7ListIndex.destroy()}))},pageInit(e){const t=this;e.$el.find(".list-index-init").each((e=>{const s=o(n(e).dataset(),{el:e});t.listIndex.create(s)}))},pageBeforeRemove(e){e.$el.find(".list-index-init").each((e=>{e.f7ListIndex&&e.f7ListIndex.destroy()}))}},vnode:{"list-index-init":{insert(e){const t=e.elm,s=o(n(t).dataset(),{el:t});this.listIndex.create(s)},destroy(e){const t=e.elm;t.f7ListIndex&&t.f7ListIndex.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[c.name])return;e.use(c),e.instance&&(e.instance.useModuleParams(c,e.instance.params),e.instance.useModule(c))}return c}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/login-screen/login-screen-class.js

@@ -0,0 +1,43 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
+
+class LoginScreen extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, params); // Extends with open/close Modal methods;
+
+    super(app, extendedParams);
+    const loginScreen = this;
+    loginScreen.params = extendedParams; // Find Element
+
+    let $el;
+
+    if (!loginScreen.params.el) {
+      $el = $(loginScreen.params.content).filter(node => node.nodeType === 1).eq(0);
+    } else {
+      $el = $(loginScreen.params.el).eq(0);
+    }
+
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+
+    if ($el.length === 0) {
+      return loginScreen.destroy();
+    }
+
+    extend(loginScreen, {
+      app,
+      $el,
+      el: $el[0],
+      type: 'loginScreen'
+    });
+    $el[0].f7Modal = loginScreen;
+    return loginScreen;
+  }
+
+}
+
+export default LoginScreen;

package/components/login-screen/login-screen-rtl.css

@@ -1 +1 @@
-:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}:root .theme-dark,:root.theme-dark{--f7-login-screen-bg-color:#121212;--f7-login-screen-content-bg-color:#121212}.ios{--f7-login-screen-blocks-margin-vertical:25px}.ios .theme-dark,.ios.theme-dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-blocks-margin-vertical:24px}.aurora{--f7-login-screen-blocks-margin-vertical:16px}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:.4s}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .list-button,.login-screen-page .list-button{text-align:center;color:var(--f7-login-screen-list-button-text-color,var(--f7-theme-color))}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.theme-dark .login-screen-content .block-strong,.theme-dark .login-screen-content .list ul,.theme-dark .login-screen-page .block-strong,.theme-dark .login-screen-page .list ul,.theme-dark.login-screen-page .block-strong,.theme-dark.login-screen-page .list ul{background-color:transparent}
+:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}:root .dark,:root.dark{--f7-login-screen-bg-color:#121212;--f7-login-screen-content-bg-color:#121212}.ios{--f7-login-screen-blocks-margin-vertical:25px}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-blocks-margin-vertical:24px}.aurora{--f7-login-screen-blocks-margin-vertical:16px}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:.4s}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .list-button,.login-screen-page .list-button{text-align:center;color:var(--f7-login-screen-list-button-text-color,var(--f7-theme-color))}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:transparent}

package/components/login-screen/login-screen.css

@@ -1 +1 @@
-:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}:root .theme-dark,:root.theme-dark{--f7-login-screen-bg-color:#121212;--f7-login-screen-content-bg-color:#121212}.ios{--f7-login-screen-blocks-margin-vertical:25px}.ios .theme-dark,.ios.theme-dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-blocks-margin-vertical:24px}.aurora{--f7-login-screen-blocks-margin-vertical:16px}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:.4s}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .list-button,.login-screen-page .list-button{text-align:center;color:var(--f7-login-screen-list-button-text-color,var(--f7-theme-color))}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.theme-dark .login-screen-content .block-strong,.theme-dark .login-screen-content .list ul,.theme-dark .login-screen-page .block-strong,.theme-dark .login-screen-page .list ul,.theme-dark.login-screen-page .block-strong,.theme-dark.login-screen-page .list ul{background-color:transparent}
+:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}:root .dark,:root.dark{--f7-login-screen-bg-color:#121212;--f7-login-screen-content-bg-color:#121212}.ios{--f7-login-screen-blocks-margin-vertical:25px}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-blocks-margin-vertical:24px}.aurora{--f7-login-screen-blocks-margin-vertical:16px}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:.4s}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .list-button,.login-screen-page .list-button{text-align:center;color:var(--f7-login-screen-list-button-text-color,var(--f7-theme-color))}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:transparent}