[new feature] add IndexBar component

docs/markdown/v2-progress-tracking.md

@@ -52,7 +52,8 @@
 ## 新特性
 
 - 新增`Skeleton`骨架屏组件
-- 新增`DropdownMenu`下拉菜单组件
+- 新增`IndexBar`、`IndexAnchor`索引栏组件
+- 新增`DropdownMenu`、`DropdownItem`下拉菜单组件
 
 ### ActionSheet
 

docs/src/WapApp.vue

@@ -75,6 +75,11 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
 .van-doc-nav-bar {
   height: 56px;
   line-height: 56px;

docs/src/demo-entry.js

@@ -23,6 +23,7 @@ export default {
   'goods-action': () => wrapper(import('../../packages/goods-action/demo'), 'goods-action'),
   'icon': () => wrapper(import('../../packages/icon/demo'), 'icon'),
   'image-preview': () => wrapper(import('../../packages/image-preview/demo'), 'image-preview'),
+  'index-bar': () => wrapper(import('../../packages/index-bar/demo'), 'index-bar'),
   'lazyload': () => wrapper(import('../../packages/lazyload/demo'), 'lazyload'),
   'list': () => wrapper(import('../../packages/list/demo'), 'list'),
   'loading': () => wrapper(import('../../packages/loading/demo'), 'loading'),

docs/src/doc.config.js

@@ -259,6 +259,10 @@ module.exports = {
             groupName: '导航组件',
             icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
             list: [
+              {
+                path: '/index-bar',
+                title: 'IndexBar 索引栏'
+              },
               {
                 path: '/nav-bar',
                 title: 'NavBar 导航栏'
@@ -574,6 +578,10 @@ module.exports = {
             groupName: 'Navigation Components',
             icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
             list: [
+              {
+                path: '/index-bar',
+                title: 'IndexBar'
+              },
               {
                 path: '/nav-bar',
                 title: 'NavBar'

docs/src/docs-entry.js

@@ -53,6 +53,8 @@ export default {
   'icon.zh-CN': () => import('../../packages/icon/zh-CN.md'),
   'image-preview.en-US': () => import('../../packages/image-preview/en-US.md'),
   'image-preview.zh-CN': () => import('../../packages/image-preview/zh-CN.md'),
+  'index-bar.en-US': () => import('../../packages/index-bar/en-US.md'),
+  'index-bar.zh-CN': () => import('../../packages/index-bar/zh-CN.md'),
   'lazyload.en-US': () => import('../../packages/lazyload/en-US.md'),
   'lazyload.zh-CN': () => import('../../packages/lazyload/zh-CN.md'),
   'list.en-US': () => import('../../packages/list/en-US.md'),

packages/index-anchor/index.js

@@ -0,0 +1,26 @@
+import { use } from '../utils';
+import { ChildrenMixin } from '../mixins/relation';
+
+const [sfc, bem] = use('index-anchor');
+
+export default sfc({
+  mixins: [ChildrenMixin('vanIndexBar', { indexKey: 'childrenIndex' })],
+
+  props: {
+    index: [String, Number]
+  },
+
+  methods: {
+    scrollIntoView() {
+      this.$el.scrollIntoView();
+    }
+  },
+
+  render(h) {
+    return (
+      <div class={bem()}>
+        {this.slots('default') ? this.slots('default') : this.index}
+      </div>
+    );
+  }
+});

packages/index-anchor/index.less

@@ -0,0 +1,8 @@
+@import '../style/var';
+
+.van-index-anchor {
+  padding: 0 15px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 32px;
+}

packages/index-bar/demo/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <demo-section>
+    <van-tabs v-model="activeTab">
+      <van-tab :title="$t('basicUsage')">
+        <van-index-bar>
+          <div
+            v-for="index in indexList"
+            :key="index"
+          >
+            <van-index-anchor :index="index" />
+            <van-cell :title="$t('text')" />
+            <van-cell :title="$t('text')" />
+            <van-cell :title="$t('text')" />
+          </div>
+        </van-index-bar>
+      </van-tab>
+
+      <van-tab :title="$t('customIndexList')">
+        <van-index-bar :index-list="customIndexList">
+          <div
+            v-for="index in customIndexList"
+            :key="index"
+          >
+            <van-index-anchor :index="index">
+              {{ $t('title') + index }}
+            </van-index-anchor>
+            <van-cell :title="$t('text')" />
+            <van-cell :title="$t('text')" />
+            <van-cell :title="$t('text')" />
+          </div>
+        </van-index-bar>
+      </van-tab>
+    </van-tabs>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      customIndexList: '自定义索引列表'
+    },
+    'en-US': {
+      text: 'Text',
+      customIndexList: 'Custom Index List'
+    }
+  },
+
+  data() {
+    const indexList = [];
+    const charCodeOfA = 'A'.charCodeAt(0);
+    for (let i = 0; i < 26; i++) {
+      indexList.push(String.fromCharCode(charCodeOfA + i));
+    }
+
+    return {
+      activeTab: 0,
+      indexList,
+      customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10]
+    };
+  }
+};
+</script>

packages/index-bar/en-US.md

@@ -0,0 +1,75 @@
+## IndexBar
+
+### Install
+
+``` javascript
+import { IndexBar } from 'vant';
+
+Vue.use(IndexBar);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-index-bar>
+  <van-index-anchor index="A" />
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+
+  <van-index-anchor index="B" />
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+
+  ...
+</van-index-bar>
+```
+
+#### Custom Index List
+
+```html
+<van-index-bar :index-list="indexList">
+  <van-index-anchor index="1">Title 1</van-index-anchor>
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+
+  <van-index-anchor index="2">Title 2</van-index-anchor>
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+  <van-cell title="Text" />
+
+  ...
+</van-index-bar>
+```
+
+```js
+export default {
+  data() {
+    return {
+      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+    }
+  }
+}
+```
+
+### IndexBar Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| index-list | Index List | `Array` | `A-Z` |
+
+### IndexAnchor Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| index | Index | `String | Number` | - |
+
+### IndexAnchor Slots
+
+| Name | Description |
+|------|------|
+| default | Anchor content, show index by default |

packages/index-bar/index.js

@@ -0,0 +1,92 @@
+import { use } from '../utils';
+import { TouchMixin } from '../mixins/touch';
+import { ParentMixin } from '../mixins/relation';
+
+const [sfc, bem] = use('index-bar');
+
+export default sfc({
+  mixins: [TouchMixin, ParentMixin('vanIndexBar')],
+
+  props: {
+    indexList: {
+      type: Array,
+      default() {
+        const indexList = [];
+        const charCodeOfA = 'A'.charCodeAt(0);
+
+        for (let i = 0; i < 26; i++) {
+          indexList.push(String.fromCharCode(charCodeOfA + i));
+        }
+
+        return indexList;
+      }
+    }
+  },
+
+  methods: {
+    onClick(event) {
+      this.scrollToElement(event.target);
+    },
+
+    onTouchStart(event) {
+      this.touchStart(event);
+    },
+
+    onTouchMove(event) {
+      this.touchMove(event);
+
+      if (this.direction === 'vertical') {
+        /* istanbul ignore else */
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+
+        const { clientX, clientY } = event.touches[0];
+        const target = document.elementFromPoint(clientX, clientY);
+        this.scrollToElement(target);
+      }
+    },
+
+    scrollToElement(element, setActive) {
+      if (!element) {
+        return;
+      }
+
+      const { index } = element.dataset;
+      if (!index) {
+        return;
+      }
+
+      const match = this.children.filter(item => String(item.index) === index);
+      if (match[0]) {
+        match[0].scrollIntoView();
+      }
+    },
+
+    onTouchEnd() {
+      this.active = null;
+    }
+  },
+
+  render(h) {
+    return (
+      <div class={bem()}>
+        <div
+          class={bem('sidebar')}
+          onClick={this.onClick}
+          onTouchstart={this.onTouchStart}
+          onTouchmove={this.onTouchMove}
+          onTouchend={this.onTouchEnd}
+          onTouchcancel={this.onTouchEnd}
+        >
+          {this.indexList.map(index => (
+            <span class={bem('index')} data-index={index}>
+              {index}
+            </span>
+          ))}
+        </div>
+        {this.slots('default')}
+      </div>
+    );
+  }
+});

packages/index-bar/index.less

@@ -0,0 +1,22 @@
+@import '../style/var';
+
+.van-index-bar {
+  &__sidebar {
+    position: fixed;
+    display: flex;
+    top: 50%;
+    right: 0;
+    z-index: 1;
+    user-select: none;
+    text-align: center;
+    flex-direction: column;
+    transform: translateY(-50%);
+  }
+
+  &__index {
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 14px;
+    padding: 0 3px 0 15px;
+  }
+}

packages/index-bar/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__line"></div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div class="van-tab__pane" style="display:none;">
+        <!---->
+      </div>
+      <div class="van-tab__pane" style="display:none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/index-bar/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom anchor text 1`] = `
+<div class="van-index-bar">
+  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+  <div class="van-index-anchor">Title A</div>
+  <div class="van-index-anchor">Title B</div>
+</div>
+`;

packages/index-bar/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

packages/index-bar/test/index.spec.js

@@ -0,0 +1,85 @@
+import { mount, trigger, triggerDrag } from '../../../test/utils';
+import Vue from 'vue';
+import IndexBar from '..';
+import IndexAnchor from '../../index-anchor';
+
+Vue.use(IndexBar);
+Vue.use(IndexAnchor);
+
+function mockScrollIntoView() {
+  const fn = jest.fn();
+  Element.prototype.scrollIntoView = fn;
+  return fn;
+}
+
+test('custom anchor text', () => {
+  const wrapper = mount({
+    template: `
+      <van-index-bar>
+        <van-index-anchor index="A">Title A</van-index-anchor>
+        <van-index-anchor index="B">Title B</van-index-anchor>
+      </van-index-bar>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('click and scroll to anchor', () => {
+  const wrapper = mount({
+    template: `
+      <van-index-bar>
+        <van-index-anchor index="A" />
+        <van-index-anchor index="B" />
+      </van-index-bar>
+    `
+  });
+
+  const fn = mockScrollIntoView();
+  const indexes = wrapper.findAll('.van-index-bar__index');
+  indexes.at(0).trigger('click');
+  expect(fn).toHaveBeenCalledTimes(1);
+});
+
+test('touch and scroll to anchor', () => {
+  const wrapper = mount({
+    template: `
+      <van-index-bar>
+        <van-index-anchor index="A" />
+        <van-index-anchor index="B" />
+        <van-index-anchor index="XXX" />
+      </van-index-bar>
+    `
+  });
+
+  const fn = mockScrollIntoView();
+  const sidebar = wrapper.find('.van-index-bar__sidebar');
+  const indexes = wrapper.findAll('.van-index-bar__index');
+
+  document.elementFromPoint = function (x, y) {
+    const index = y / 100;
+
+    if (index === 1 || index === 2) {
+      return indexes.at(index).element;
+    }
+
+    if (index === 3) {
+      return {
+        dataset: {}
+      };
+    }
+  };
+
+  // horizontal drag
+  triggerDrag(sidebar, 100, 0);
+  expect(fn).toHaveBeenCalledTimes(0);
+
+  // vertiacl drag
+  trigger(sidebar, 'touchstart', 0, 0);
+  trigger(sidebar, 'touchmove', 0, 100);
+  trigger(sidebar, 'touchmove', 0, 200);
+  trigger(sidebar, 'touchmove', 0, 300);
+  trigger(sidebar, 'touchmove', 0, 400);
+  trigger(sidebar, 'touchend', 0, 400);
+  expect(fn).toHaveBeenCalledTimes(1);
+});

packages/index-bar/zh-CN.md

@@ -0,0 +1,79 @@
+## IndexBar 索引栏
+
+### 使用指南
+
+``` javascript
+import { IndexBar, IndexAnchor } from 'vant';
+
+Vue.use(IndexBar).use(IndexAnchor);
+```
+
+### 代码演示
+
+#### 基础用法
+
+点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置
+
+```html
+<van-index-bar>
+  <van-index-anchor index="A" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  <van-index-anchor index="B" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  ...
+</van-index-bar>
+```
+
+#### 自定义索引列表
+
+可以通过`index-list`属性自定义展示的索引字符列表，
+
+```html
+<van-index-bar :index-list="indexList">
+  <van-index-anchor index="1">标题1</van-index-anchor>
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  <van-index-anchor index="2">标题2</van-index-anchor>
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+  <van-cell title="文本" />
+
+  ...
+</van-index-bar>
+```
+
+```js
+export default {
+  data() {
+    return {
+      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+    }
+  }
+}
+```
+
+### IndexBar Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| index-list | 索引字符列表 | `Array` | `A-Z` | - |
+
+### IndexAnchor Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| index | 索引字符 | `String | Number` | - | - |
+
+### IndexAnchor Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 锚点位置显示内容，默认为索引字符 |

packages/index.less

@@ -34,6 +34,8 @@
 @import './stepper/index';
 @import './swipe/index';
 @import './swipe-item/index';
+@import './index-anchor/index';
+@import './index-bar/index';
 
 /* form components */
 @import './checkbox/index';

packages/index.ts

@@ -31,6 +31,8 @@ import GoodsActionButton from './goods-action-button';
 import GoodsActionIcon from './goods-action-icon';
 import Icon from './icon';
 import ImagePreview from './image-preview';
+import IndexAnchor from './index-anchor';
+import IndexBar from './index-bar';
 import Info from './info';
 import Lazyload from './lazyload';
 import List from './list';
@@ -114,6 +116,8 @@ const components = [
   GoodsActionIcon,
   Icon,
   ImagePreview,
+  IndexAnchor,
+  IndexBar,
   Info,
   List,
   Loading,
@@ -202,6 +206,8 @@ export {
   GoodsActionIcon,
   Icon,
   ImagePreview,
+  IndexAnchor,
+  IndexBar,
   Info,
   Lazyload,
   List,

packages/mixins/relation.js

@@ -1,4 +1,6 @@
-export function ChildrenMixin(parent) {
+export function ChildrenMixin(parent, options = {}) {
+  const indexKey = options.indexKey || 'index';
+
   return {
     inject: {
       [parent]: {
@@ -11,7 +13,7 @@ export function ChildrenMixin(parent) {
         return this[parent];
       },
 
-      index() {
+      [indexKey]() {
         this.bindRelation();
         return this.parent.children.indexOf(this);
       }