zanui demos

components.json

@@ -13,5 +13,6 @@
   "waterfall": "./packages/waterfall/index.js",
   "loading": "./packages/loading/index.js",
   "panel": "./packages/panel/index.js",
-  "card": "./packages/card/index.js"
+  "card": "./packages/card/index.js",
+  "steps": "./packages/steps/index.js"
 }

docs/ExamplesApp.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="examples-container">
+    <router-link class="page-back" v-if="visible" :to="'/'">
+      <i class="zui-icon zui-icon-arrow"></i>
+    </router-link>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    visible() {
+      return ['/'].indexOf(this.$route.path) < 0;
+    }
+  }
+};
+</script>
+
+<style>
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+  }
+
+  a {
+    color: #4078c0;
+    text-decoration: none;
+  }
+
+  .examples-container {
+    padding-bottom: 30px;
+  }
+
+  .page-back {
+    display: inline-block;
+    position: absolute;
+    top: 12px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    color: #333;
+    transform: rotate(180deg);
+
+    i {
+      font-size: 24px;
+      line-height: 40px;
+    }
+  }
+
+  .page-title {
+    font-size: 20px;
+    margin: 20px auto;
+    text-align: center;
+    display: block;
+    line-height: 1;
+  }
+
+  .page-sub-title {
+    font-size: 16px;
+    padding: 10px 0;
+  }
+</style>

docs/ExamplesDocsApp.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="page-container">
+  <div class="page-container clearfix">
     <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
     <div class="page-content">
       <router-view></router-view>
     </div>
+    <mobile></mobile>
   </div>
 </template>
 
@@ -24,9 +25,8 @@ export default {
   @import './assets/docs.css';
 
   .page-container {
-    width: 1140px;
+    height: 100%;
-    padding: 0 30px;
+    min-width: 960px;
-    margin: 0 auto;
 
     h2 {
       font-size: 28px;
@@ -34,10 +34,12 @@ export default {
       margin: 20px 0;
       line-height: 40px;
     }
+
     h3 {
       font-size: 22px;
       margin: 23px 0;
     }
+
     h2, h3, h4, h5 {
       font-weight: normal;
       color: #1f2f3d;
@@ -57,6 +59,7 @@ export default {
         }
       }
     }
+
     p {
       font-size: 14px;
       color: #5e6d82;
@@ -65,8 +68,32 @@ export default {
   }
 
   .page-content {
-    width: 75%;
+    width: 52%;
+    box-sizing: border-box;
     float: left;
+    padding: 0 15px;
+    overflow: auto;
+    height: inherit;
+  }
+
+  .mobile-wrapper {
+    float: left;
+    width: 30%;
+    height: 300px;
+    position: relative;
+  }
+
+  .mobile {
+    margin: 20px 20px 0;
+    height: 100%;
+    box-sizing: border-box;
+    width: 365px;
+  }
+
+  .demo-page {
+    width: 100%;
+    border: 5px solid #f5f5f5;
+    height: 580px;
   }
 
   .table {
@@ -77,16 +104,16 @@ export default {
     font-size: 14px;
     margin-bottom: 45px;
 
-    th:first-child {
-      padding-left: 10px;
-    }
-
     th {
       text-align: left;
       border-top: 1px solid #eaeefb;
       border-bottom: 1px solid #eaeefb;
       background-color: #eff2f7;
       padding: 10px;
+
+      &:first-child {
+        padding-left: 10px;
+      }
     }
 
     td {

docs/assets/docs.css

@@ -18,11 +18,16 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-  overflow: auto;
+  overflow: hidden;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
+  height: 100%;
 }
 
 a {
@@ -53,4 +58,16 @@ ul {
   -webkit-font-smoothing: auto;
 }
 
+.clearfix {
+  &::before {
+    display: table;
+    content: "";
+  }
+
+  &::after {
+    display: table;
+    content: "";
+    clear: both;
+  }
+}
 

docs/components/demo-list.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="side-nav">
+    <ul>
+      <li class="nav-item" v-for="item in data">
+        <a v-if="!item.path">{{item.name}}</a>
+        <router-link
+          v-else
+          active-class="active"
+          :to="base + item.path"
+          exact
+          v-text="item.title || item.name">
+        </router-link>
+        <ul class="pure-menu-list sub-nav" v-if="item.children">
+          <li class="nav-item" v-for="navItem in item.children">
+            <router-link
+              active-class="active"
+              :to="base + navItem.path"
+              v-text="navItem.title || navItem.name">
+            </router-link>
+          </li>
+        </ul>
+        <template v-if="item.groups">
+          <div class="nav-group" v-for="group in item.groups">
+            <div class="nav-group__title">{{group.groupName}}</div>
+            <ul class="pure-menu-list">
+              <template v-for="navItem in group.list">
+                <li
+                  class="nav-item"
+                  v-if="!navItem.disabled">
+                  <router-link
+                    active-class="active"
+                    :to="base + navItem.path"
+                    v-text="navItem.title">
+                  </router-link>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import navConfig from '../nav.config.json';
+
+export default {
+  data() {
+    return {
+      highlights: [],
+      navState: [],
+      data: navConfig['zh-CN'],
+      base: '/component'
+    };
+  }
+};
+</script>
+
+<style>
+  .side-nav {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 40px 20px;
+    background: #f9fafb;
+
+    li {
+      list-style: none;
+    }
+    ul {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+
+    .nav-item {
+      a {
+        font-size: 16px;
+        color: #5e6d82;
+        line-height: 40px;
+        height: 40px;
+        margin: 0;
+        padding: 0;
+        text-decoration: none;
+        display: block;
+        position: relative;
+        transition: all .3s;
+
+        &.active {
+          color: #20a0ff;
+        }
+      }
+      .nav-item {
+        a {
+          display: block;
+          height: 40px;
+          line-height: 40px;
+          font-size: 13px;
+          padding-left: 24px;
+
+
+          &:hover {
+            color: #20a0ff;
+          }
+        }
+      }
+    }
+    .nav-group__title {
+      font-size: 12px;
+      color: #99a9bf;
+      padding-left: 8px;
+      line-height: 26px;
+      margin-top: 10px;
+    }
+  }
+</style>

docs/components/mobile.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="mobile-wrapper">
+    <div class="mobile">
+      <iframe class="demo-page" :src="'./examples.html#' + $route.path" frameborder="0"></iframe>
+    </div>
+  </div>
+</template>

docs/components/side-nav.vue

@@ -62,10 +62,13 @@
 
 <style lang="css">
   .side-nav {
-    width: 25%;
+    width: 18%;
     box-sizing: border-box;
-    padding-right: 30px;
+    padding: 40px 20px;
     float: left;
+    background: #f9fafb;
+    height: inherit;
+    overflow: auto;
 
     li {
       list-style: none;

docs/examples-docs/button.md

@@ -1,18 +1,9 @@
-<style lang="css">
-  @component-namespace z {
-    @component button-group {
-      .z-button-1 {
-        margin-bottom: 15px;
-      }
-    }
-  }
-</style>
-
 ## Button组件
 
 ### 按钮功能
 
-:::demo 只接受primary, default, danger三种类型，默认default
+只接受primary, default, danger三种类型，默认default。
+
 ```html
 <div class="z-button-group">
   <div class="z-button-1">
@@ -26,11 +17,9 @@
   </div>
 </div>
 ```
-:::
 
 ### 禁用状态
 
-:::demo 
 ```html
 <div class="z-button-group">
   <div class="z-button-1">
@@ -38,11 +27,11 @@
   </div>
 </div>
 ```
-:::
 
 ### 按钮尺寸
 
-:::demo 只接受large, normal, small, mini四种尺寸，默认normal
+只接受large, normal, small, mini四种尺寸，默认normal。
+
 ```html 
 <div class="z-button-group">
   <div class="z-button-1">
@@ -62,11 +51,11 @@
 </div>
 
 ```
-:::
 
 ### 自定义按钮标签
 
-:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
+按钮默认是button标签，可以使用tag属性修改为一个a标签。
+
 ```html 
 <div class="z-button-group">
   <div class="z-button-1">
@@ -74,10 +63,11 @@
   </div>
 </div>
 ```
-:::
 
 ### button group
-:::demo 一组按钮
+
+一组按钮。
+
 ```html 
 <div class="z-button-group">
   <z-button type="primary" size="small">确认付款</z-button>
@@ -85,8 +75,6 @@
   <z-button size="small">取消订单</z-button>
 </div>
 ```
-:::
-
 
 ### API
 

docs/examples-docs/card.md

@@ -4,7 +4,6 @@
 
 当没有底部按钮时，右侧内容会居中显示。
 
-:::demo 不带底部按钮时，右侧内容会居中显示。
 ```html
 <z-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
@@ -13,13 +12,11 @@
 </z-card>
 
 ```
-:::
 
 ### 高级用法
 
-可以使用具名`slot`自定义对应的内容。
+可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
 
-:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
 ```html
 <z-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
@@ -39,7 +36,6 @@
   </div>
 </z-card>
 ```
-:::
 
 ### API
 

docs/examples-docs/cell.md

@@ -20,53 +20,50 @@ export default {
 
 ### 基础用法
 
-:::demo 样例代码
 ```html
 <z-cell-group>
   <z-cell title="单元格1" value="单元格1内容"></z-cell>
   <z-cell title="单元格2" value="单元格2内容"></z-cell>
 </z-cell-group>
 ```
-:::
 
 ### 标题带描述信息
 
-:::demo 传入`label`属性，属性值为描述信息的值。
+传入`label`属性，属性值为描述信息的值。
+
 ```html
 <z-cell-group>
   <z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
   <z-cell title="单元格2" label="描述信息"></z-cell>
 </z-cell-group>
 ```
-:::
 
 ### 带图标
 
-:::demo 传入`icon`属性
+传入`icon`属性。
+
 ```html
 <z-cell-group>
   <z-cell title="起码运动馆" icon="home"></z-cell>
   <z-cell title="线下门店" icon="location"></z-cell>
 </z-cell-group>
 ```
-:::
 
 ### 可点击的链接
 
-:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
+传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
+
 ```html
 <z-cell-group>
   <z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
   <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
 </z-cell-group>
 ```
-:::
 
 ### 高级用法
 
-如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。
+如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 
-:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 ```html
 <z-cell-group>
   <z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
@@ -78,7 +75,6 @@ export default {
   <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
 </z-cell-group>
 ```
-:::
 
 ### API
 

docs/examples-docs/dialog.md

@@ -30,13 +30,39 @@ export default {
 
 ### 基础用法
 
-:::demo
 ```html
 <z-button @click="handleAlertClick">alert</z-button>
 
 <z-button @click="handleConfirmClick">confirm</z-button>
+
+<script>
+import { Dialog } from 'src/index';
+
+export default {
+  methods: {
+    handleAlertClick() {
+      Dialog.alert({
+        title: 'alert标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      });
+    },
+
+    handleConfirmClick() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+  }
+};
+</script>
 ```
-:::
 
 ### API
 

docs/examples-docs/field.md

@@ -1,26 +1,11 @@
-<script>
-export default {
-  data() {
-    return {
-      name: ''
-    };
-  },
-
-  methods: {
-    handleChange() {
-      console.log(this.name);
-    }
-  }
-};
-</script>
-
 ## Field组件
 
 表单中`input`或`textarea`的输入框。
 
 ### 基础用法
 
-:::demo 根据`type`属性显示不同的输入框。
+根据`type`属性显示不同的输入框。
+
 ```html
 <z-cell-group>
   <z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
@@ -28,27 +13,26 @@ export default {
   <z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
 </z-cell-group>
 ```
-:::
 
 ### 无label的输入框
 
-:::demo 不传入`label`属性即可。
+不传入`label`属性即可。
+
 ```html
 <z-cell-group>
   <z-field type="text" placeholder="请输入用户名"></z-field>
 </z-cell-group>
 ```
-:::
 
 ### 监听change事件
 
-:::demo 监听组件的`change`事件。
+监听组件的`change`事件。
+
 ```html
 <z-cell-group>
   <z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
 </z-cell-group>
 ```
-:::
 
 ### API
 

docs/examples-docs/panel.md

@@ -1,33 +1,9 @@
-<style>
-.z-panel-sum {
-  background: #fff;
-  text-align: right;
-  font-size: 14px;
-  color: #333;
-  line-height: 30px;
-  padding-right: 15px;
-
-  span {
-    color: red;
-  }
-}
-
-.z-panel-buttons {
-  text-align: right;
-
-  .z-button {
-    margin-left: 5px;
-  }
-}
-</style>
-
 ## Panel 面板
 
 面板只是一个容器，里面可以放入自定义的内容。
 
 ### 基础用法
 
-:::demo
 ```html
 <z-panel title="标题" desc="标题描述" status="状态">
   <z-card
@@ -52,13 +28,11 @@
   </div>
 </z-panel>
 ```
-:::
 
 ### 高级用法
 
 使用具名`slot`自定义内容。
 
-:::demo
 ```html
 <z-panel title="标题" desc="标题描述" status="状态">
   <z-card
@@ -87,7 +61,6 @@
   </div>
 </z-panel>
 ```
-:::
 
 ### API
 

docs/examples-docs/picker.md

@@ -1,45 +1,12 @@
-<script>
-const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
-};
-
-export default {
-  data() {
-    return {
-      pickerColumns: [
-        {
-          values: Object.keys(citys),
-          className: 'column1'
-        },
-        {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-          className: 'column2'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    handlePickerChange(picker, values) {
-      picker.setColumnValues(1, citys[values[0]]);
-    }
-  }
-};
-</script>
-
 ## Picker组件
 
 模仿iOS中的`UIPickerView`。
 
 ### 基础用法
 
-:::demo 基础用法
 ```html
 <z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
 ```
-:::
 
 ### API
 

docs/examples-docs/popup.md

@@ -1,3 +1,36 @@
+## Popup组件
+
+### 基础用法
+
+```html
+<div class="z-button-1">
+  <z-button @click="popupShow1 = true">从下方弹出popup</z-button>
+</div>
+<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
+  xxxx
+</z-popup>
+
+<div class="z-button-1">
+  <z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
+</div>
+<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
+  更新成功
+</z-popup>
+
+<div class="z-button-1">
+  <z-button @click="popupShow3 = true">从右方弹出popup</z-button>
+</div>
+<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
+  <z-button @click.native="popupShow3 = false">关闭 popup</z-button>
+</z-popup>
+
+<div class="z-button-1">
+  <z-button @click="popupShow4 = true">从中间弹出popup</z-button>
+</div>
+<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
+  一些内容
+</z-popup>
+
 <script>
 export default {
   data() {
@@ -20,62 +53,7 @@ export default {
   }
 };
 </script>
-
-<style>
-.z-popup-1 {
-  width: 100%;
-  height: 200px;
-}
-
-.z-popup-2 {
-  width: 100%;
-  line-height: 44px;
-  background-color: rgba(0, 0, 0, 0.701961);
-  text-align: center;
-  color: #fff;
-}
-
-.z-popup-3 {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-}
-
-.z-popup-4 {
-  width: 50%;
-  height: 200px;
-  background: #fff;
-  border-radius: 10px;
-}
-</style>
-
-## Popup组件
-
-### 基础用法
-
-:::demo
-```html
-<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
-<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
-  xxxx
-</z-popup>
-
-<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
-<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
-  更新成功
-</z-popup>
-
-<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
-<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
-  <z-button @click.native="popupShow3 = false">关闭 popup</z-button>
-</z-popup>
-
-<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
-<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
-  一些内容
-</z-popup>
 ```
-:::
 
 ### API
 

docs/examples-docs/steps.md

@@ -0,0 +1,4 @@
+## Steps 步骤条
+
+
+

docs/examples-docs/switch.md

@@ -1,46 +1,7 @@
-<script>
-export default {
-  data() {
-    return {
-      switchState: true
-    };
-  },
-  computed: {
-    switchStateText() {
-      return this.switchState ? 'ON' : 'OFF';
-    }
-  },
-  methods: {
-    updateState(newState) {
-      this.switchState = newState;
-    }
-  }
-};
-</script>
-<style lang="css">
-  @component-namespace page {
-    @component switch {
-      padding: 0 15px 15px;
-
-      @descendent wrapper {
-        margin: 30px;
-        width: 100px;
-        float: left;
-        text-align: center;
-      }
-
-      @descendent text {
-        margin: 20px 0;
-      }
-    }
-  }
-</style>
-
 ## Switch组件
 
 ### 基础用法
 
-:::demo 样例代码
 ```html
 <div class="page-switch">
   <div class="page-switch__wrapper">
@@ -56,10 +17,8 @@ export default {
     <div class="page-switch__text">OFF, DISABLED</div>
   </div>
 </div>
-```
 
-
+<script>
-```javascript
 export default {
   data() {
     return {
@@ -76,9 +35,9 @@ export default {
       this.switchState = newState;
     }
   }
-};
+};  
+</script>
 ```
-:::
 
 ### API
 

docs/examples-docs/waterfall.md

@@ -1,3 +1,28 @@
+## Waterfall 瀑布流
+
+### 基础用法
+
+```html
+<div class="waterfall">
+  <div
+    v-waterfall-lower="loadMore"
+    v-waterfall-upper="loadMoreUpper"
+    waterfall-disabled="isWaterfallDisabled"
+    waterfall-offset="400"
+  >
+    <div
+      class="waterfall-item"
+      v-for="item in list"
+      style="text-align: center;"
+    >
+      {{ item }}
+    </div>
+    <div v-if="loading" style="text-align: center;">
+      loading
+    </div>
+  </div>
+</div>
+
 <script>
 export default {
   data() {
@@ -36,44 +61,7 @@ export default {
   }
 };
 </script>
-<style lang="css">
-  .waterfall {
-    height: 300px;
-    overflow: scroll;
-  }
-  .waterfall-item {
-    line-height: 20px;
-    padding: 5px 0;
-  }
-</style>
-
-## Waterfall组件
-
-### 基础用法
-
-:::demo 样例代码
-```html
-<div class="waterfall">
-  <div
-    v-waterfall-lower="loadMore"
-    v-waterfall-upper="loadMoreUpper"
-    waterfall-disabled="isWaterfallDisabled"
-    waterfall-offset="400"
-  >
-    <div
-      class="waterfall-item"
-      v-for="item in list"
-      style="text-align: center;"
-    >
-      {{ item }}
-    </div>
-    <div v-if="loading" style="text-align: center;">
-      loading
-    </div>
-  </div>
-</div>
 ```
-:::
 
 ### API
 

docs/examples.js

@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import App from './ExamplesApp';
+import navConfig from './nav.config.json';
+import routes from './router.config';
+import ZanUI from '../src/index';
+
+import 'packages/zanui-css/src/index.css';
+
+Vue.use(ZanUI);
+Vue.use(VueRouter);
+
+let routesConfig = routes(navConfig, true);
+routesConfig.push({
+  path: '/',
+  component: function(resolve) {
+    require(['./components/demo-list.vue'], resolve);
+  }
+});
+const router = new VueRouter({
+  mode: 'hash',
+  base: __dirname,
+  routes: routesConfig
+});
+
+let indexScrollTop = 0;
+router.beforeEach((route, redirect, next) => {
+  if (route.path !== '/') {
+    indexScrollTop = document.body.scrollTop;
+  }
+  document.title = route.meta.title || document.title;
+  next();
+});
+
+router.afterEach(route => {
+  if (route.path !== '/') {
+    document.body.scrollTop = 0;
+  } else {
+    Vue.nextTick(() => {
+      document.body.scrollTop = indexScrollTop;
+    });
+  }
+});
+
+new Vue({ // eslint-disable-line
+  render: h => h(App),
+  router
+}).$mount('#app-container');

docs/examples/button.vue

@@ -1,10 +1,70 @@
 <template>
-  <div class="button-demos">
+  <div class="page-button">
+    <h1 class="page-title">Button</h1>
+    <h2 class="page-sub-title">按钮功能</h2>
+    <div class="page-button__group">
+      <div class="z-button-1">
+        <z-button>default</z-button>
+      </div>
+      <div class="z-button-1">
+        <z-button type="primary">primary</z-button>
+      </div>
+      <div class="z-button-1">
+        <z-button type="danger">danger</z-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">禁用状态</h2>
+    <div class="page-button__group">
+      <div class="z-button-1">
+        <z-button disabled>diabled</z-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">按钮尺寸</h2>
+    <div class="page-button__group">
+      <div class="z-button-1">
+        <z-button size="large">large</z-button>
+      </div>
+    </div>
+    <div class="page-button__group">
+      <div class="z-button-3">
+        <z-button type="primary">normal</z-button>
+      </div>
+      <div class="z-button-3">
+        <z-button size="small">small</z-button>
+      </div>
+      <div class="z-button-3">
+        <z-button size="mini">mini</z-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">自定义按钮标签</h2>
+    <div class="page-button__group">
+      <div class="z-button-1">
+        <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">button group</h2>
+    <div class="page-button__group">
+      <z-button type="primary" size="small">确认付款</z-button>
+      <z-button size="small">确认收货</z-button>
+      <z-button size="small">取消订单</z-button>
+    </div>
   </div>
 </template>
 
-<script>
+<style>
-export default {
+  @component-namespace page {
+    @b button {
+      padding: 0 20px;
 
-};
+      @e group {
-</script>
+        .z-button-1 {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+</style>

docs/examples/card.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="page-card">
+    <h1 class="page-title">Card</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <z-card
+      title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+      desc="描述"
+      thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    </z-card>
+
+    <h2 class="page-sub-title">高级用法</h2>
+    <z-card
+      title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+      desc="商品SKU1，商品SKU2"
+      thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+      <div class="z-card__row" slot="title">
+        <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+        <span class="z-card__price">¥ 2.00</span>
+      </div>
+      <div class="z-card__row" slot="desc">
+        <h4 class="z-card__desc">商品sku</h4>
+        <span class="z-card__num">x 2</span>
+      </div>
+      <div class="z-card__footer" slot="footer">
+        <z-button size="mini">按钮一</z-button>
+        <z-button size="mini">按钮二</z-button>
+      </div>
+    </z-card>
+  </div>
+</template>
+
+<style>
+.page-sub-title {
+  padding: 15px;
+}
+</style>

docs/examples/cell.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="page-cell">
+    <h1 class="page-title">Cell</h1>
+    
+    <h2 class="page-sub-title">基础用法</h2>
+    <z-cell-group>
+      <z-cell title="单元格1" value="单元格1内容"></z-cell>
+      <z-cell title="单元格2" value="单元格2内容"></z-cell>
+    </z-cell-group>
+
+    <h2 class="page-sub-title">标题带描述信息</h2>
+    <z-cell-group>
+      <z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
+      <z-cell title="单元格2" label="描述信息"></z-cell>
+    </z-cell-group>
+
+    <h2 class="page-sub-title">带图标</h2>
+    <z-cell-group>
+      <z-cell title="起码运动馆" icon="home"></z-cell>
+      <z-cell title="线下门店" icon="location"></z-cell>
+    </z-cell-group>
+
+    <h2 class="page-sub-title">可点击的链接</h2>
+    <z-cell-group>
+      <z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
+      <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
+    </z-cell-group>
+
+    <h2 class="page-sub-title">高级用法</h2>
+    <z-cell-group>
+      <z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+        <template slot="title">
+          <span class="z-cell-text">起码运动馆</span>
+          <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
+        </template>
+      </z-cell>
+      <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
+    </z-cell-group>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      console.log('cell click');
+    }
+  }
+};
+</script>
+
+<style>
+.official-img {
+  width: 31px;
+  vertical-align: middle;
+  border: 0;
+}
+
+.page-sub-title {
+  padding: 25px 15px;
+}
+</style>

docs/examples/dialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="page-dialog">
+    <h1 class="page-title">Dialog</h1>
+
+    <div class="z-button-1">
+      <z-button @click="handleAlertClick">点击我打开alert提示框</z-button>
+    </div>
+
+    <div class="z-button-1">
+      <z-button @click="handleConfirmClick">点击我打开confirm提示框</z-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { Dialog } from 'src/index';
+
+export default {
+  methods: {
+    handleAlertClick() {
+      Dialog.alert({
+        title: 'alert标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      });
+    },
+
+    handleConfirmClick() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+  }
+};
+</script>
+
+<style>
+@component-namespace page {
+  @b dialog {
+    padding: 0 15px;
+
+    .z-button-1 {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

docs/examples/field.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="page-field">
+    <h1 class="page-title">Field</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <z-cell-group>
+      <z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
+      <z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
+      <z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
+    </z-cell-group>
+
+    <h2 class="page-sub-title">无label的输入框</h2>
+    <z-cell-group>
+      <z-field type="text" placeholder="请输入用户名"></z-field>
+    </z-cell-group>
+
+    <h2 class="page-sub-title">监听change事件</h2>
+    <z-cell-group>
+      <z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
+    </z-cell-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: ''
+    };
+  },
+
+  methods: {
+    handleChange() {
+      console.log(this.name);
+    }
+  }
+};
+</script>
+
+<style>
+.page-sub-title {
+  padding: 20px 15px;
+}
+</style>

docs/examples/panel.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="page-panel">
+    <h1 class="page-title">Panel</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <z-panel title="标题" desc="标题描述" status="状态">
+      <z-card
+        title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+        desc="商品SKU1，商品SKU2"
+        thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+        <div class="z-card__row" slot="title">
+          <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+          <span class="z-card__price">¥ 2.00</span>
+        </div>
+        <div class="z-card__row" slot="desc">
+          <h4 class="z-card__desc">商品sku</h4>
+          <span class="z-card__num">x 2</span>
+        </div>
+        <div class="z-card__footer" slot="footer">
+          <z-button size="mini">按钮一</z-button>
+          <z-button size="mini">按钮二</z-button>
+        </div>
+      </z-card>
+      <div class="z-panel-sum">
+        合计：<span>¥ 1999.90</span>
+      </div>
+    </z-panel>
+
+    <h2 class="page-sub-title">高级用法</h2>
+    <z-panel title="标题" desc="标题描述" status="状态">
+      <z-card
+        title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+        desc="商品SKU1，商品SKU2"
+        thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+        <div class="z-card__row" slot="title">
+          <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+          <span class="z-card__price">¥ 2.00</span>
+        </div>
+        <div class="z-card__row" slot="desc">
+          <h4 class="z-card__desc">商品sku</h4>
+          <span class="z-card__num">x 2</span>
+        </div>
+        <div class="z-card__footer" slot="footer">
+          <z-button size="mini">按钮一</z-button>
+          <z-button size="mini">按钮二</z-button>
+        </div>
+      </z-card>
+      <div class="z-panel-sum">
+        合计：<span>¥ 1999.90</span>
+      </div>
+      <div class="z-panel-buttons" slot="footer">
+        <z-button size="small">按钮一</z-button>
+        <z-button size="small" type="danger">按钮二</z-button>
+      </div>
+    </z-panel>
+  </div>  
+</template>
+
+<style>
+.z-panel-sum {
+  background: #fff;
+  text-align: right;
+  font-size: 14px;
+  color: #333;
+  line-height: 30px;
+  padding-right: 15px;
+
+  span {
+    color: red;
+  }
+}
+
+.z-panel-buttons {
+  text-align: right;
+
+  .z-button {
+    margin-left: 5px;
+  }
+}
+</style>

docs/examples/picker.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="page-picker">
+    <h1 class="page-title">Picker</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
+  </div>  
+</template>
+
+<script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>

docs/examples/popup.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="page-popup">
+    <h1 class="page-title">Popup</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div class="z-button-1">
+      <z-button @click="popupShow1 = true">从下方弹出popup</z-button>
+    </div>
+    <z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
+      xxxx
+    </z-popup>
+
+    <div class="z-button-1">
+      <z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
+    </div>
+    <z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
+      更新成功
+    </z-popup>
+
+    <div class="z-button-1">
+      <z-button @click="popupShow3 = true">从右方弹出popup</z-button>
+    </div>
+    <z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
+      <z-button @click.native="popupShow3 = false">关闭 popup</z-button>
+    </z-popup>
+
+    <div class="z-button-1">
+      <z-button @click="popupShow4 = true">从中间弹出popup</z-button>
+    </div>
+    <z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
+      一些内容
+    </z-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      popupShow1: false,
+      popupShow2: false,
+      popupShow3: false,
+      popupShow4: false
+    }
+  },
+
+  watch: {
+    popupShow2(val) {
+      if (val) {
+        setTimeout(() => {
+          this.popupShow2 = false;
+        }, 2000);
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.z-popup-1 {
+  width: 100%;
+  height: 200px;
+}
+
+.z-popup-2 {
+  width: 100%;
+  line-height: 44px;
+  background-color: rgba(0, 0, 0, 0.701961);
+  text-align: center;
+  color: #fff;
+}
+
+.z-popup-3 {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.z-popup-4 {
+  width: 50%;
+  height: 200px;
+  background: #fff;
+  border-radius: 10px;
+}
+
+.page-popup .z-button-1 {
+  margin-bottom: 10px;
+}
+
+.page-sub-title {
+  padding: 20px 15px;
+}
+</style>

docs/examples/switch.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="page-switch">
+    <h1 class="page-title">Switch</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div class="page-switch">
+      <div class="page-switch__wrapper">
+        <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
+        <div class="page-switch__text">{{switchStateText}}</div>
+      </div>
+      <div class="page-switch__wrapper">
+        <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
+        <div class="page-switch__text">ON, DISABLED</div>
+      </div>
+      <div class="page-switch__wrapper">
+        <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+        <div class="page-switch__text">OFF, DISABLED</div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      switchState: true
+    };
+  },
+  computed: {
+    switchStateText() {
+      return this.switchState ? 'ON' : 'OFF';
+    }
+  },
+  methods: {
+    updateState(newState) {
+      this.switchState = newState;
+    }
+  }
+};
+</script>
+
+<style>
+  @component-namespace page {
+    @component switch {
+      padding: 0 15px 15px;
+
+      @descendent wrapper {
+        width: 33.33%;
+        float: left;
+        text-align: center;
+      }
+
+      @descendent text {
+        margin: 20px 0;
+      }
+    }
+  }
+</style>

docs/examples/waterfall.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="page-card">
+    <h1 class="page-title">Card</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div class="waterfall">
+      <div
+        v-waterfall-lower="loadMore"
+        v-waterfall-upper="loadMoreUpper"
+        waterfall-disabled="isWaterfallDisabled"
+        waterfall-offset="400"
+      >
+        <div
+          class="waterfall-item"
+          v-for="item in list"
+          style="text-align: center;"
+        >
+          {{ item }}
+        </div>
+        <div v-if="loading" style="text-align: center;">
+          loading
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [1, 2, 3, 4, 5],
+      loading: false,
+      finished: false
+    };
+  },
+  methods: {
+    loadMore() {
+      if (this.list.length >= 200) {
+        this.finished = true;
+        return;
+      }
+
+      this.loading = true;
+      setTimeout(() => {
+        let lastNumber = this.list[this.list.length - 1];
+        for (let i = 0; i < 5; i ++) {
+          lastNumber += 1;
+          this.list.push(lastNumber);
+        }
+        this.loading = false;
+      }, 2500);
+    },
+    loadMoreUpper() {
+      if (this.list[0] < 0) return;
+      this.list.unshift(-1);
+    }
+  },
+  computed: {
+    isWaterfallDisabled: function() {
+      return this.loading || this.finished;
+    }
+  }
+};
+</script>
+
+<style>
+.waterfall {
+  height: 300px;
+  overflow: scroll;
+}
+.waterfall-item {
+  line-height: 20px;
+  padding: 5px 0;
+}
+.page-sub-title {
+  padding: 15px;
+}
+</style>

docs/index.js

@@ -1,9 +1,11 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesDocsApp';
+import navConfig from './nav.config.json';
 import routes from './router.config';
 import demoBlock from './components/demo-block';
 import SideNav from './components/side-nav';
+import Mobile from './components/mobile';
 import Oxygen from '../src/index';
 
 import 'packages/zanui-css/src/index.css';
@@ -12,11 +14,12 @@ Vue.use(Oxygen);
 Vue.use(VueRouter);
 Vue.component('demo-block', demoBlock);
 Vue.component('side-nav', SideNav);
+Vue.component('mobile', Mobile);
 
 const router = new VueRouter({
   mode: 'hash',
   base: __dirname,
-  routes
+  routes: routes(navConfig)
 });
 
 let indexScrollTop = 0;

docs/nav.config.json

@@ -1,7 +1,7 @@
 {
   "zh-CN": [
     {
-      "name": "oxygen组件",
+      "name": "ZanUI组件",
       "groups": [
         {
           "groupName": "CSS组件",

docs/router.config.js

@@ -1,6 +1,4 @@
-import navConfig from './nav.config.json';
+const registerRoute = (navConfig, isExample) => {
-
-const registerRoute = (navConfig) => {
   let route = [];
   let navs = navConfig['zh-CN'];
   navs.forEach(nav => {
@@ -23,14 +21,14 @@ const registerRoute = (navConfig) => {
     route.push({
       path: '/component' + page.path,
       component: function(resolve) {
-        require([`./examples-docs${page.path}.md`], resolve);
+        require([isExample ? `./examples${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
       }
     });
   }
 
+  // console.log(route);
+
   return route;
 };
 
-let route = registerRoute(navConfig);
+export default registerRoute;
-
-export default route;

examples.html

@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>Oxygen</title>
+  <title>ZanUI</title>
 </head>
 <body>
 

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Oxygen</title>
+  <title>ZanUI</title>
 </head>
 <body>
 

packages/card/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
+  "name": "@youzan/z-card",
-  "version": "<%= version %>",
+  "version": "0.0.1",
-  "description": "<%= description %>",
+  "description": "card component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
-  "author": "<%= author %>",
+  "author": "zhangmin <zhangmin@youzan.com>",
-  "license": "<%= license %>",
+  "license": "MIT",
   "devDependencies": {},
   "dependencies": {}
 }

packages/panel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youzan/z-panel",
   "version": "0.0.1",
-  "description": "picker component",
+  "description": "panel component",
   "main": "./index.js",
   "author": "zhangmin <zhangmin@youzan.com>",
   "license": "MIT",

packages/steps/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/steps/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/steps/index.js

@@ -0,0 +1,3 @@
+import Steps from './src/steps';
+
+export default Steps;

packages/steps/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/steps/src/steps.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h2>author: {{ author }}</h2>
+    <div>Hello {{ name }}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Sample',
+    props: ['author'],
+    data() {
+      return {
+        name: 'World'
+      };
+    }
+  };
+</script>

packages/zanui-css/src/button.css

@@ -53,6 +53,7 @@
     }
 
     @m normal {
+      padding: 0 10px;
       font-size: 14px;
     }
 

packages/zanui-css/src/button_group.css

@@ -23,6 +23,7 @@
   }
   @b button-1 {
     @mixin button-wrap;
+    padding-right: 0;
     width: 100%;
   }
   @b button-2 {

packages/zanui-css/src/index.css

@@ -14,3 +14,4 @@
 @import './radio.css';
 @import './switch.css';
 @import './panel.css';
+@import './steps.css';

src/index.js

@@ -13,6 +13,7 @@ import Waterfall from '../packages/waterfall/index.js';
 import Loading from '../packages/loading/index.js';
 import Panel from '../packages/panel/index.js';
 import Card from '../packages/card/index.js';
+import Steps from '../packages/steps/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -30,6 +31,7 @@ const install = function(Vue) {
   Vue.component(Loading.name, Loading);
   Vue.component(Panel.name, Panel);
   Vue.component(Card.name, Card);
+  Vue.component(Steps.name, Steps);
 };
 
 // auto install
@@ -54,5 +56,6 @@ module.exports = {
   Waterfall,
   Loading,
   Panel,
-  Card
+  Card,
+  Steps
 };