@xenknight/framework7 0.0.2

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

@@ -0,0 +1,333 @@
+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) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const index = this;
+    const defaults = {
+      el: null,
+      // where to render indexes
+      listEl: null,
+      // list el to generate indexes
+      indexes: 'auto',
+      // or array of indexes
+      iosItemHeight: 14,
+      mdItemHeight: 14,
+      scrollList: true,
+      label: false,
+      // eslint-disable-next-line
+      renderItem(itemContent, itemIndex) {
+        return `
+          <li>${itemContent}</li>
+        `.trim();
+      },
+      renderSkipPlaceholder() {
+        return '<li class="list-index-skip-placeholder"></li>';
+      },
+      on: {}
+    };
+
+    // Extend defaults with modules params
+    index.useModulesParams(defaults);
+    index.params = extend(defaults, params);
+    let $el;
+    let $listEl;
+    let $pageContentEl;
+    let $ul;
+    if (index.params.el) {
+      $el = $(index.params.el);
+    } else {
+      return index;
+    }
+    if ($el[0].f7ListIndex) {
+      return $el[0].f7ListIndex;
+    }
+    $ul = $el.find('ul');
+    if ($ul.length === 0) {
+      $ul = $('<ul></ul>');
+      $el.append($ul);
+    }
+    if (index.params.listEl) {
+      $listEl = $(index.params.listEl);
+    }
+    if (index.params.indexes === 'auto' && !$listEl) {
+      return index;
+    }
+    if ($listEl) {
+      $pageContentEl = $listEl.parents('.page-content').eq(0);
+    } else {
+      $pageContentEl = $el.siblings('.page-content').eq(0);
+      if ($pageContentEl.length === 0) {
+        $pageContentEl = $el.parents('.page').eq(0).find('.page-content').eq(0);
+      }
+    }
+    $el[0].f7ListIndex = index;
+    extend(index, {
+      app,
+      $el,
+      el: $el && $el[0],
+      $ul,
+      ul: $ul && $ul[0],
+      $listEl,
+      listEl: $listEl && $listEl[0],
+      $pageContentEl,
+      pageContentEl: $pageContentEl && $pageContentEl[0],
+      indexes: params.indexes,
+      height: 0,
+      skipRate: 0
+    });
+
+    // Install Modules
+    index.useModules();
+
+    // Attach events
+    function handleResize() {
+      const height = {
+        index
+      };
+      index.calcSize();
+      if (height !== index.height) {
+        index.render();
+      }
+    }
+    function handleClick(e) {
+      const $clickedLi = $(e.target).closest('li');
+      if (!$clickedLi.length) return;
+      let itemIndex = $clickedLi.index();
+      if (index.skipRate > 0) {
+        const percentage = itemIndex / ($clickedLi.siblings('li').length - 1);
+        itemIndex = Math.round((index.indexes.length - 1) * percentage);
+      }
+      const itemContent = index.indexes[itemIndex];
+      index.$el.trigger('listindex:click', {
+        content: itemContent,
+        index: itemIndex
+      });
+      index.emit('local::click listIndexClick', index, itemContent, itemIndex);
+      index.$el.trigger('listindex:select', {
+        content: itemContent,
+        index: itemIndex
+      });
+      index.emit('local::select listIndexSelect', index, itemContent, itemIndex);
+      if (index.$listEl && index.params.scrollList) {
+        index.scrollListToIndex(itemContent, itemIndex);
+      }
+    }
+    const touchesStart = {};
+    let isTouched;
+    let isMoved;
+    let topPoint;
+    let bottomPoint;
+    let $labelEl;
+    let previousIndex = null;
+    function handleTouchStart(e) {
+      const $children = $ul.children();
+      if (!$children.length) return;
+      topPoint = $children[0].getBoundingClientRect().top;
+      bottomPoint = $children[$children.length - 1].getBoundingClientRect().top + $children[0].offsetHeight;
+      touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      isTouched = true;
+      isMoved = false;
+      previousIndex = null;
+    }
+    function handleTouchMove(e) {
+      if (!isTouched) return;
+      if (!isMoved && index.params.label) {
+        $labelEl = $('<span class="list-index-label"></span>');
+        $el.append($labelEl);
+      }
+      isMoved = true;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      e.preventDefault();
+      let percentage = (pageY - topPoint) / (bottomPoint - topPoint);
+      percentage = Math.min(Math.max(percentage, 0), 1);
+      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)`);
+        }
+        if (index.$listEl && index.params.scrollList) {
+          index.scrollListToIndex(itemContent, itemIndex);
+        }
+      }
+      previousIndex = itemIndex;
+      index.$el.trigger('listindex:select');
+      index.emit('local::select listIndexSelect', index, itemContent, itemIndex);
+    }
+    function handleTouchEnd() {
+      if (!isTouched) return;
+      isTouched = false;
+      isMoved = false;
+      if (index.params.label) {
+        if ($labelEl) $labelEl.remove();
+        $labelEl = undefined;
+      }
+    }
+    const passiveListener = getSupport().passiveListener ? {
+      passive: true
+    } : false;
+    index.attachEvents = function attachEvents() {
+      $el.parents('.tab').on('tab:show', handleResize);
+      $el.parents('.page').on('page:reinit', handleResize);
+      $el.parents('.panel').on('panel:open', handleResize);
+      $el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast').on('modal:open', handleResize);
+      app.on('resize', handleResize);
+      $el.on('click', handleClick);
+      $el.on(app.touchEvents.start, handleTouchStart, passiveListener);
+      app.on('touchmove:active', handleTouchMove);
+      app.on('touchend:passive', handleTouchEnd);
+    };
+    index.detachEvents = function attachEvents() {
+      $el.parents('.tab').off('tab:show', handleResize);
+      $el.parents('.page').off('page:reinit', handleResize);
+      $el.parents('.panel').off('panel:open', handleResize);
+      $el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast').off('modal:open', handleResize);
+      app.off('resize', handleResize);
+      $el.off('click', handleClick);
+      $el.off(app.touchEvents.start, handleTouchStart, passiveListener);
+      app.off('touchmove:active', handleTouchMove);
+      app.off('touchend:passive', handleTouchEnd);
+    };
+    // Init
+    index.init();
+    return index;
+  }
+  // eslint-disable-next-line
+  scrollListToIndex(itemContent, itemIndex) {
+    const index = this;
+    const {
+      $listEl,
+      $pageContentEl,
+      app
+    } = index;
+    if (!$listEl || !$pageContentEl || $pageContentEl.length === 0) return index;
+    let $scrollToEl;
+    $listEl.find('.list-group-title').each(el => {
+      if ($scrollToEl) return;
+      const $el = $(el);
+      if ($el.text() === itemContent) {
+        $scrollToEl = $el;
+      }
+    });
+    if (!$scrollToEl || $scrollToEl.length === 0) return index;
+    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) {
+      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;
+      }
+    }
+    if (parentTop <= paddingTop) {
+      $pageContentEl.scrollTop(parentTop + scrollTop - paddingTop);
+    } else {
+      $pageContentEl.scrollTop(scrollToElTop + scrollTop - paddingTop);
+    }
+    return index;
+  }
+  renderSkipPlaceholder() {
+    const index = this;
+    return index.params.renderSkipPlaceholder.call(index);
+  }
+  renderItem(itemContent, itemIndex) {
+    const index = this;
+    return index.params.renderItem.call(index, 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 '';
+      }
+      let itemHtml = index.renderItem(itemContent, itemIndex);
+      if (wasSkipped) {
+        itemHtml = index.renderSkipPlaceholder() + itemHtml;
+      }
+      wasSkipped = false;
+      return itemHtml;
+    }).join('');
+    $ul.html(html);
+    return index;
+  }
+  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);
+    }
+    index.height = height;
+    index.skipRate = skipRate;
+    return index;
+  }
+  calcIndexes() {
+    const index = this;
+    if (index.params.indexes === 'auto') {
+      index.indexes = [];
+      index.$listEl.find('.list-group-title').each(el => {
+        const elContent = $(el).text();
+        if (index.indexes.indexOf(elContent) < 0) {
+          index.indexes.push(elContent);
+        }
+      });
+    } else {
+      index.indexes = index.params.indexes;
+    }
+    return index;
+  }
+  update() {
+    const index = this;
+    index.calcIndexes();
+    index.calcSize();
+    index.render();
+    return index;
+  }
+  init() {
+    const index = this;
+    index.calcIndexes();
+    index.calcSize();
+    index.render();
+    index.attachEvents();
+  }
+  destroy() {
+    let index = this;
+    index.$el.trigger('listindex:beforedestroy', index);
+    index.emit('local::beforeDestroy listIndexBeforeDestroy');
+    index.detachEvents();
+    if (index.$el[0]) {
+      index.$el[0].f7ListIndex = null;
+      delete index.$el[0].f7ListIndex;
+    }
+    deleteProps(index);
+    index = null;
+  }
+}
+export default ListIndex;

package/components/list-index/list-index-ios.less

@@ -0,0 +1,21 @@
+.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%;
+      &: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;
+      }
+    }
+  }
+}

package/components/list-index/list-index-md.less

@@ -0,0 +1,7 @@
+.md {
+  .list-index {
+    .list-index-label {
+      border-radius: 50% 50% 0 50%;
+    }
+  }
+}

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

@@ -0,0 +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-font-weight:500}.ios{--f7-list-index-label-text-color:#fff;--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}.md,.md .dark,.md [class*=color-]{--f7-list-index-label-bg-color:var(--f7-md-primary);--f7-list-index-label-text-color:var(--f7-md-on-primary)}.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-icons~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-icons~.list-index,.navbars~.toolbar-top.tabbar-icons~.list-index,.navbar~.toolbar-top.tabbar-icons~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-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-icons~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.page>.list-index,.md .toolbar-bottom-md.tabbar-icons~* .page>.list-index,.md .toolbar-bottom-md.tabbar-icons~.list-index,.md .toolbar-bottom-md.tabbar-icons~.page>.list-index,.toolbar-bottom.tabbar-icons~* .page>.list-index,.toolbar-bottom.tabbar-icons~.list-index,.toolbar-bottom.tabbar-icons~.page>.list-index{bottom:calc(var(--f7-tabbar-icons-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%}

package/components/list-index/list-index-vars.less

@@ -0,0 +1,25 @@
+:root {
+  --f7-list-index-width: 16px;
+  --f7-list-index-font-size: 11px;
+  --f7-list-index-font-weight: 600;
+  /* --f7-list-index-text-color: var(--f7-theme-color); */
+  --f7-list-index-item-height: 14px;
+  --f7-list-index-label-font-weight: 500;
+}
+.ios-vars({
+  --f7-list-index-label-text-color: #fff;
+  /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
+  --f7-list-index-label-size: 44px;
+  --f7-list-index-label-font-size: 17px;
+  --f7-list-index-skip-dot-size: 6px;
+});
+.md-vars({
+  --f7-list-index-label-size: 56px;
+  --f7-list-index-label-font-size: 20px;
+  --f7-list-index-skip-dot-size: 4px;
+});
+
+.md-color-vars({
+  --f7-list-index-label-bg-color: var(--f7-md-primary);
+  --f7-list-index-label-text-color: var(--f7-md-on-primary);
+});

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

@@ -0,0 +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-font-weight:500}.ios{--f7-list-index-label-text-color:#fff;--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}.md,.md .dark,.md [class*=color-]{--f7-list-index-label-bg-color:var(--f7-md-primary);--f7-list-index-label-text-color:var(--f7-md-on-primary)}.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-icons~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-icons~.list-index,.navbars~.toolbar-top.tabbar-icons~.list-index,.navbar~.toolbar-top.tabbar-icons~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-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-icons~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.page>.list-index,.md .toolbar-bottom-md.tabbar-icons~* .page>.list-index,.md .toolbar-bottom-md.tabbar-icons~.list-index,.md .toolbar-bottom-md.tabbar-icons~.page>.list-index,.toolbar-bottom.tabbar-icons~* .page>.list-index,.toolbar-bottom.tabbar-icons~.list-index,.toolbar-bottom.tabbar-icons~.page>.list-index{bottom:calc(var(--f7-tabbar-icons-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%}

package/components/list-index/list-index.d.ts

@@ -0,0 +1,101 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace ListIndex {
+  interface ListIndex extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** List index HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with list index HTML element */
+    $el: Dom7Array;
+    /** Dynamically created inner <ul> HTML element */
+    ul: HTMLElement;
+    /** Dom7 instance with dynamically created inner <ul> HTML element */
+    $ul: Dom7Array;
+    /** Related List HTML element, passed in listEl parameter */
+    listEl: HTMLElement;
+    /** Dom7 instance with related List HTML element, passed in listEl parameter */
+    $listEl: Dom7Array;
+    /** Array with calculated indexes */
+    indexes: number[];
+    /** List index parameters */
+    params: Parameters;
+
+    /** Recalculates indexes, sizes and rerenders list index */
+    update(): ListIndex;
+    /** Scrolls related list to specified index content */
+    scrollToList(itemContent: string): ListIndex;
+    /** Destroys list index instance */
+    destroy(): void;
+  }
+
+  interface Parameters {
+    /** List Index element. HTMLElement or string with CSS selector of list index element. */
+    el?: HTMLElement | CSSSelector;
+    /** Related List View element. HTMLElement or string with CSS selector of List View element. */
+    listEl?: HTMLElement | CSSSelector;
+    /** Array with indexes. If not passed then it will automatically generate it based on list-group-title elements inside of passed List View element in listEl parameter. (default auto) */
+    indexes?: string[] | string; // ??
+    /** Will automatically scroll related List View to the selected index. (default true) */
+    scrollList?: boolean;
+    /** Enables label bubble with selected index when you swipe over list index. (default false) */
+    label?: boolean;
+    /** Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For iOS theme. (default 14) */
+    iosItemHeight?: number;
+    /** Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For MD theme. (default 14) */
+    mdItemHeight?: number;
+    /** Object with events handlers.. */
+    on: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered on index select rather by click or swiping. As an argument event handler receives list index instance and selected index item content */
+    select(listIndex: ListIndex, itemContent: string, itemIndex: number): void;
+    /** Event will be triggered on index click. As an argument event handler receives list index instance and clicked index item content */
+    click(listIndex: ListIndex, itemContent: string, itemIndex: number): void;
+    /** Event will be triggered right before List Index instance will be destroyed. As an argument event handler receives list index instance */
+    beforeDestroy(listIndex: ListIndex): void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered on index select rather by click or swiping */
+    'listindex:select': () => void;
+    /** Event will be triggered on index click */
+    'listindex:click': () => void;
+    /** Event will be triggered right before List Index instance will be destroyed */
+    'listindex:beforedestroy': () => void;
+  }
+
+  interface AppMethods {
+    listIndex: {
+      /** create ListIndex instance */
+      create(parameters: Parameters): ListIndex;
+      /** destroy ListIndex instance */
+      destroy(el: HTMLElement | CSSSelector | ListIndex): void;
+      /** get ListIndex instance by HTML element */
+      get(el: HTMLElement | CSSSelector): ListIndex;
+    };
+  }
+  interface AppParams {
+    listIndex?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered on index select rather by click or swiping. As an argument event handler receives list index instance and selected index item content */
+    listIndexSelect(listIndex: ListIndex, itemContent: string, itemIndex: number): void;
+    /** Event will be triggered on index click. As an argument event handler receives list index instance and clicked index item content */
+    listIndexClick(listIndex: ListIndex, itemContent: string, itemIndex: number): void;
+    /** Event will be triggered right before List Index instance will be destroyed. As an argument event handler receives list index instance */
+    listIndexBeforeDestroy(listIndex: ListIndex): void;
+  }
+}
+
+declare const ListIndexComponent: Framework7Plugin;
+
+export default ListIndexComponent;

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

@@ -0,0 +1,65 @@
+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();
+      }
+    }
+  }
+};