[breaking change] Badge: rename to sidebar

packages/sidebar/demo/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-sidebar
+        :active-key="activeKey"
+        @change="onChange"
+      >
+        <van-sidebar-item :title="$t('title')" />
+        <van-sidebar-item
+          :title="$t('title')"
+          info="8"
+        />
+        <van-sidebar-item
+          :title="$t('title')"
+          info="99"
+        />
+        <van-sidebar-item
+          :title="$t('title')"
+          info="99+"
+        />
+      </van-sidebar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title: '标签名称'
+    }
+  },
+
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+
+  methods: {
+    onChange(key) {
+      this.activeKey = key;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-sidebar {
+  .van-sidebar {
+    width: auto;
+    margin: 0 15px;
+    padding: 20px 0;
+    background-color: @white;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .van-sidebar-item {
+    width: 85px;
+    margin: 0 auto;
+  }
+}
+</style>

packages/sidebar/en-US.md

@@ -0,0 +1,67 @@
+## Sidebar
+
+### Install
+
+``` javascript
+import { Sidebar, SidebarItem } from 'vant';
+
+Vue.use(Sidebar);
+Vue.use(SidebarItem);
+```
+
+### Usage
+
+#### Basic Usage
+
+Use `active-key` prop to set index of chosen item
+
+```html
+<van-sidebar :active-key="activeKey" @change="onChange">
+  <van-sidebar-item title="Title" />
+  <van-sidebar-item title="Title" info="8" />
+  <van-sidebar-item title="Title" info="99" />
+  <van-sidebar-item title="Title" info="99+" />
+</van-sidebar>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+
+  methods: {
+    onChange(key) {
+      this.activeKey = key;
+    }
+  }
+};
+```
+
+### Sidebar API
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| active-key | Index of chosen item | `String | Number` | `0` |
+
+### Sidebar Event
+
+| Event | Description | Arguments |
+|------|------|------|
+| change | Triggered when item changed | key: index of current item |
+
+### SidebarItem API
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| title | Content | `String` | `''` |
+| info | Info Message | `String | Number` | `''` |
+| url | Link | `String` | - |
+
+### SidebarItem Event
+
+| Event | Description | Arguments |
+|------|------|------|
+| click | Triggered when click item | key: index of current item |

packages/sidebar/index.js

@@ -0,0 +1,28 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('sidebar');
+
+export default sfc({
+  props: {
+    activeKey: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+
+  provide() {
+    return {
+      vanSidebar: this
+    };
+  },
+
+  data() {
+    return {
+      items: []
+    };
+  },
+
+  render(h) {
+    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
+  }
+});

packages/sidebar/index.less

@@ -0,0 +1,5 @@
+@import '../style/var';
+
+.van-sidebar {
+  width: @sidebar-width;
+}

packages/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
+        <div class="van-sidebar-item__text">标签名称
+          <!---->
+        </div>
+      </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
+        </div>
+      </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
+        </div>
+      </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
+        </div>
+      </a></div>
+  </div>
+</div>
+`;

packages/sidebar/test/demo.spec.js

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

packages/sidebar/test/index.spec.js

@@ -0,0 +1,39 @@
+import { mount } from '../../../test/utils';
+import Sidebar from '..';
+import SidebarItem from '../../sidebar-item';
+
+test('event', () => {
+  const onClick = jest.fn();
+  const onChange = jest.fn();
+  const wrapper = mount({
+    template: `
+      <sidebar @change="onChange">
+        <sidebar-item @click="onClick">Text</sidebar-item>
+      </sidebar>
+    `,
+    components: {
+      Sidebar,
+      SidebarItem
+    },
+    methods: {
+      onClick,
+      onChange
+    }
+  });
+
+  wrapper.find('.van-sidebar-item').trigger('click');
+  expect(onClick).toHaveBeenCalledWith(0);
+  expect(onChange).toHaveBeenCalledWith(0);
+  wrapper.vm.$destroy();
+});
+
+test('without parent', () => {
+  const consoleError = console.error;
+  try {
+    console.error = jest.fn();
+    mount(Sidebar);
+  } catch (err) {
+    console.error = consoleError;
+    expect(err).toBeTruthy();
+  }
+});

packages/sidebar/zh-CN.md

@@ -0,0 +1,67 @@
+## Sidebar 侧边导航
+
+### 使用指南
+
+``` javascript
+import { Sidebar, SidebarItem } from 'vant';
+
+Vue.use(Sidebar);
+Vue.use(SidebarItem);
+```
+
+### 代码演示
+
+#### 基础用法
+
+通过在`van-sidebar`上设置`active-key`属性来控制选中项
+
+```html
+<van-sidebar :active-key="activeKey" @change="onChange">
+  <van-sidebar-item title="标签名称" />
+  <van-sidebar-item title="标签名称" info="8" />
+  <van-sidebar-item title="标签名称" info="99" />
+  <van-sidebar-item title="标签名称" info="99+" />
+</van-sidebar>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+
+  methods: {
+    onChange(key) {
+      this.activeKey = key;
+    }
+  }
+};
+```
+
+### Sidebar API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| active-key | 当前导航项的索引 | `String | Number` | `0` | - |
+
+### Sidebar Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| change | 切换当前导航项时触发 | key: 当前导航项的索引 |
+
+### SidebarItem API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| title | 内容 | `String` | `''` | - |
+| info | 提示消息 | `String | Number` | `''` | - |
+| url | 跳转链接 | `String` | - | - |
+
+### SidebarItem Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| click | 点击时触发 | key: 当前导航项的索引 |