Merge branch 'master' into hotfix/switch_loading_fix

components.json

@@ -20,5 +20,6 @@
   "checkbox-group": "./packages/checkbox-group/index.js",
   "badge-group": "./packages/badge-group/index.js",
   "badge": "./packages/badge/index.js",
-  "search": "./packages/search/index.js"
+  "search": "./packages/search/index.js",
+  "step": "./packages/step/index.js"
 }

docs/build/1.ce826a4b.js

@@ -1,199 +0,0 @@
-webpackJsonp([1],{
-
-/***/ 169:
-/***/ (function(module, exports, __webpack_require__) {
-
-
-/* styles */
-__webpack_require__(263)
-
-var Component = __webpack_require__(0)(
-  /* script */
-  __webpack_require__(179),
-  /* template */
-  __webpack_require__(237),
-  /* scopeId */
-  null,
-  /* cssModules */
-  null
-)
-
-module.exports = Component.exports
-
-
-/***/ }),
-
-/***/ 179:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _navConfig = __webpack_require__(7);
-
-var _navConfig2 = _interopRequireDefault(_navConfig);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = {
-  data: function data() {
-    return {
-      highlights: [],
-      navState: [],
-      data: _navConfig2.default['zh-CN'],
-      base: '/component'
-    };
-  }
-}; //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/***/ }),
-
-/***/ 197:
-/***/ (function(module, exports, __webpack_require__) {
-
-exports = module.exports = __webpack_require__(4)();
-// imports
-
-
-// module
-exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
-
-// exports
-
-
-/***/ }),
-
-/***/ 237:
-/***/ (function(module, exports) {
-
-module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-  return _c('div', {
-    staticClass: "side-nav"
-  }, [_c('ul', _vm._l((_vm.data), function(item) {
-    return _c('li', {
-      staticClass: "nav-item"
-    }, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
-      attrs: {
-        "active-class": "active",
-        "to": _vm.base + item.path,
-        "exact": ""
-      },
-      domProps: {
-        "textContent": _vm._s(item.title || item.name)
-      }
-    }), _vm._v(" "), (item.children) ? _c('ul', {
-      staticClass: "pure-menu-list sub-nav"
-    }, _vm._l((item.children), function(navItem) {
-      return _c('li', {
-        staticClass: "nav-item"
-      }, [_c('router-link', {
-        attrs: {
-          "active-class": "active",
-          "to": _vm.base + navItem.path
-        },
-        domProps: {
-          "textContent": _vm._s(navItem.title || navItem.name)
-        }
-      })], 1)
-    })) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
-      return _c('div', {
-        staticClass: "nav-group"
-      }, [_c('div', {
-        staticClass: "nav-group__title"
-      }, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
-        staticClass: "pure-menu-list"
-      }, [_vm._l((group.list), function(navItem) {
-        return [(!navItem.disabled) ? _c('li', {
-          staticClass: "nav-item"
-        }, [_c('router-link', {
-          attrs: {
-            "active-class": "active",
-            "to": _vm.base + navItem.path
-          },
-          domProps: {
-            "textContent": _vm._s(navItem.title)
-          }
-        })], 1) : _vm._e()]
-      })], 2)])
-    }) : _vm._e()], 2)
-  }))])
-},staticRenderFns: []}
-
-/***/ }),
-
-/***/ 263:
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(197);
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var update = __webpack_require__(14)("1517d9c0", content, true);
-// Hot Module Replacement
-if(false) {
- // When the styles change, update the <style> tags
- if(!content.locals) {
-   module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
-     var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
-     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
-     update(newContent);
-   });
- }
- // When the module is disposed, remove the <style> tags
- module.hot.dispose(function() { update(); });
-}
-
-/***/ })
-
-});
-//# sourceMappingURL=1.ce826a4b.js.map

docs/build/1.js

@@ -1,17 +1,17 @@
 webpackJsonp([1],{
 
-/***/ 169:
+/***/ 194:
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(263)
+__webpack_require__(315)
 
 var Component = __webpack_require__(0)(
   /* script */
-  __webpack_require__(179),
+  __webpack_require__(204),
   /* template */
-  __webpack_require__(237),
+  __webpack_require__(279),
   /* scopeId */
   null,
   /* cssModules */
@@ -23,7 +23,7 @@ module.exports = Component.exports
 
 /***/ }),
 
-/***/ 179:
+/***/ 204:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -95,7 +95,7 @@ exports.default = {
 
 /***/ }),
 
-/***/ 197:
+/***/ 225:
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(4)();
@@ -110,7 +110,7 @@ exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px
 
 /***/ }),
 
-/***/ 237:
+/***/ 279:
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -168,13 +168,13 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 
 /***/ }),
 
-/***/ 263:
+/***/ 315:
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(197);
+var content = __webpack_require__(225);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM

docs/build/zanui-docs.js

@@ -137,7 +137,7 @@
 /******/ 	__webpack_require__.oe = function(err) { console.error(err); throw err; };
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 178);
+/******/ 	return __webpack_require__(__webpack_require__.s = 203);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -415,7 +415,7 @@ var registerRoute = function registerRoute(navConfig, isExample) {
     route.push({
       path: '/component' + page.path,
       component: function component(resolve) {
-        __webpack_require__.e/* require */(0).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [isExample ? __webpack_require__(158)("./examples" + page.path + '.vue') : __webpack_require__(159)("./examples-docs" + page.path + '.md')]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this)).catch(__webpack_require__.oe);
+        __webpack_require__.e/* require */(0).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [isExample ? __webpack_require__(183)("./examples" + page.path + '.vue') : __webpack_require__(184)("./examples-docs" + page.path + '.md')]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this)).catch(__webpack_require__.oe);
       }
     });
   }
@@ -2953,7 +2953,7 @@ function applyToTag (styleElement, obj) {
 
 /***/ }),
 
-/***/ 161:
+/***/ 186:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2963,7 +2963,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-__webpack_require__(168);
+__webpack_require__(193);
 
 var _navConfig = __webpack_require__(7);
 
@@ -2992,7 +2992,7 @@ exports.default = {
 
 /***/ }),
 
-/***/ 162:
+/***/ 187:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3064,7 +3064,7 @@ exports.default = {
 
 /***/ }),
 
-/***/ 163:
+/***/ 188:
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(4)();
@@ -3079,7 +3079,7 @@ exports.push([module.i, ".hljs{display:block;overflow-x:auto;padding:.5em;backgr
 
 /***/ }),
 
-/***/ 165:
+/***/ 190:
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(4)();
@@ -3094,7 +3094,7 @@ exports.push([module.i, ".side-nav{width:18%;box-sizing:border-box;padding:40px
 
 /***/ }),
 
-/***/ 166:
+/***/ 191:
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(4)();
@@ -3109,13 +3109,13 @@ exports.push([module.i, "a,abbr,acronym,address,applet,article,aside,audio,b,big
 
 /***/ }),
 
-/***/ 168:
+/***/ 193:
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(163);
+var content = __webpack_require__(188);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // add the styles to the DOM
 var update = __webpack_require__(27)(content, {});
@@ -3136,7 +3136,7 @@ if(false) {
 
 /***/ }),
 
-/***/ 170:
+/***/ 195:
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -3155,7 +3155,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 
 /***/ }),
 
-/***/ 171:
+/***/ 196:
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -3213,7 +3213,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 
 /***/ }),
 
-/***/ 172:
+/***/ 197:
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -3231,13 +3231,13 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 
 /***/ }),
 
-/***/ 174:
+/***/ 199:
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(165);
+var content = __webpack_require__(190);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -3258,13 +3258,13 @@ if(false) {
 
 /***/ }),
 
-/***/ 175:
+/***/ 200:
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(166);
+var content = __webpack_require__(191);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -3285,7 +3285,7 @@ if(false) {
 
 /***/ }),
 
-/***/ 178:
+/***/ 203:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3299,7 +3299,7 @@ var _vueRouter = __webpack_require__(13);
 
 var _vueRouter2 = _interopRequireDefault(_vueRouter);
 
-var _ExamplesDocsApp = __webpack_require__(48);
+var _ExamplesDocsApp = __webpack_require__(49);
 
 var _ExamplesDocsApp2 = _interopRequireDefault(_ExamplesDocsApp);
 
@@ -3311,11 +3311,11 @@ var _router = __webpack_require__(12);
 
 var _router2 = _interopRequireDefault(_router);
 
-var _sideNav = __webpack_require__(50);
+var _sideNav = __webpack_require__(51);
 
 var _sideNav2 = _interopRequireDefault(_sideNav);
 
-var _mobile = __webpack_require__(49);
+var _mobile = __webpack_require__(50);
 
 var _mobile2 = _interopRequireDefault(_mobile);
 
@@ -10450,37 +10450,18 @@ module.exports = function() {
 
 /***/ }),
 
-/***/ 48:
+/***/ 49:
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(175)
+__webpack_require__(200)
 
 var Component = __webpack_require__(0)(
   /* script */
-  __webpack_require__(161),
+  __webpack_require__(186),
   /* template */
-  __webpack_require__(172),
+  __webpack_require__(197),
-  /* scopeId */
-  null,
-  /* cssModules */
-  null
-)
-
-module.exports = Component.exports
-
-
-/***/ }),
-
-/***/ 49:
-/***/ (function(module, exports, __webpack_require__) {
-
-var Component = __webpack_require__(0)(
-  /* script */
-  null,
-  /* template */
-  __webpack_require__(170),
   /* scopeId */
   null,
   /* cssModules */
@@ -10495,15 +10476,34 @@ module.exports = Component.exports
 /***/ 50:
 /***/ (function(module, exports, __webpack_require__) {
 
+var Component = __webpack_require__(0)(
+  /* script */
+  null,
+  /* template */
+  __webpack_require__(195),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+
+module.exports = Component.exports
+
+
+/***/ }),
+
+/***/ 51:
+/***/ (function(module, exports, __webpack_require__) {
+
 
 /* styles */
-__webpack_require__(174)
+__webpack_require__(199)
 
 var Component = __webpack_require__(0)(
   /* script */
-  __webpack_require__(162),
+  __webpack_require__(187),
   /* template */
-  __webpack_require__(171),
+  __webpack_require__(196),
   /* scopeId */
   null,
   /* cssModules */
@@ -10520,6 +10520,23 @@ module.exports = Component.exports
 
 module.exports = {
 	"zh-CN": [
+		{
+			"name": "开发指南",
+			"groups": [
+				{
+					"list": [
+						{
+							"path": "/install",
+							"title": "安装"
+						},
+						{
+							"path": "/quickstart",
+							"title": "快速上手"
+						}
+					]
+				}
+			]
+		},
 		{
 			"name": "ZanUI组件",
 			"groups": [

docs/examples-docs/install.md

@@ -0,0 +1,7 @@
+## 安装
+
+### ynpm安装
+
+```
+npm i @youzan/zanui-vue -S
+```

docs/examples-docs/quickstart.md

@@ -0,0 +1,23 @@
+## 快速上手
+
+### 完整引入
+
+```
+import Vue from 'vue';
+import ZanUI from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/index.css';
+
+Vue.use(ZanUI);
+```
+
+### 按需引入
+
+```
+import Vue from 'vue';
+import { Button, Cell } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/button.css';
+import '@youzan/zanui-vue/lib/zanui-css/cell.css';
+
+Vue.component(Button.name, Button);
+Vue.component(Cell.name, Cell);
+```

docs/examples-docs/steps.md

@@ -1,4 +1,57 @@
 ## Steps 步骤条
 
+### 基础用法
+
+```html
+<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      if (++this.active > 3) this.active = 0;
+    }
+  }
+}
+</script>
+```
+
+### 只显示步骤条
+
+```html
+<zan-steps :active="active">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
+```
 
 
+### Steps API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| active | 当前激活的步骤，从0开始 | Number  | ''          | ''          |
+| icon | 当前步骤的icon | string  | ''          | ''          |
+| iconClass | 当前步骤栏为icon添加的类 | string  | ''          | ''          |
+| title | 当前步骤从标题 | string  | ''          | ''          |
+| description | 当前步骤描述 | string  | ''          | ''          |
+
+### Steps Slot
+
+| 名称       | 说明      |
+|-----------|-----------|
+| message-extra | 状态栏添加额外的元素 |
+

docs/examples/steps.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="page-steps">
+    <h1 class="page-title">Steps</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+      <zan-step>买家下单</zan-step>
+      <zan-step>商家接单</zan-step>
+      <zan-step>买家提货</zan-step>
+      <zan-step>交易完成</zan-step>
+    </zan-steps>
+    <zan-button @click="nextStep">下一步</zan-button>
+
+    <h2 class="page-sub-title">只显示步骤条</h2>
+    <zan-steps :active="active">
+      <zan-step>买家下单</zan-step>
+      <zan-step>商家接单</zan-step>
+      <zan-step>买家提货</zan-step>
+      <zan-step>交易完成</zan-step>
+    </zan-steps>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      if (++this.active > 3) this.active = 0;
+    }
+  }
+}
+</script>
+
+<style>
+.steps-success {
+  color: #06bf04;
+}
+
+.page-steps {
+  .page-sub-title {
+    padding: 20px 15px;
+  }
+
+  .zan-button {
+    margin-left: 15px;
+  }
+}
+</style>

docs/index.js

@@ -38,7 +38,6 @@ router.afterEach(route => {
     Vue.nextTick(() => {
       document.body.scrollTop = indexScrollTop;
     });
-
   }
 });
 

docs/nav.config.json

@@ -1,5 +1,22 @@
 {
   "zh-CN": [
+    {
+      "name": "开发指南",
+      "groups": [
+        {
+          "list": [
+            {
+              "path": "/install",
+              "title": "安装"
+            },
+            {
+              "path": "/quickstart",
+              "title": "快速上手"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "ZanUI组件",
       "groups": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.7",
+  "version": "0.0.12",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
-    "dev": "npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
+    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",

packages/button/src/button.js

@@ -61,9 +61,9 @@ export default {
           'zan-button--' + type,
           'zan-button--' + size,
           {
-            'is-disabled': disabled,
+            'z-button--disabled': disabled,
-            'is-loading': loading,
+            'z-button--loading': loading,
-            'is-block': block
+            'z-button--block': block
           }
         ]}
         onClick={this.handleClick}

packages/cell/src/cell.vue

@@ -11,7 +11,7 @@
     </div>
     <div class="zan-cell__value" :class="{
       'is-link': isLink,
-      'is-alone': !title && !label
+      'is-alone': !this.$slots.title && !title && !label
     }">
       <slot>
         <span v-text="value"></span>

packages/step/index.js

@@ -0,0 +1,3 @@
+import Step from 'packages/steps/src/step';
+
+export default Step;

packages/steps/src/step.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="zan-step" :class="`zan-step--${status}`">
+    <div class="zan-step__circle-container">
+      <i class="zan-step__circle" v-if="status !== 'process'"></i>
+      <i class="zan-icon zan-icon-checked" v-else></i>
+    </div>
+    <p class="zan-step__title">
+      <slot></slot>
+    </p>
+    <div class="zan-step__line"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-step',
+
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  computed: {
+    status() {
+      let index = this.$parent.steps.indexOf(this);
+      let active = this.$parent.active;
+
+      if (index === -1) {
+        return '';
+      } else if (index < active) {
+        return 'finish';
+      } else if (index === active) {
+        return 'process';
+      }
+    }
+  }
+};
+</script>

packages/steps/src/steps.vue

@@ -1,18 +1,51 @@
 <template>
-  <div>
+  <div class="zan-steps" :class="`zan-steps--${steps.length}`">
-    <h2>author: {{ author }}</h2>
+    <div class="zan-steps__status" v-if="icon">
-    <div>Hello {{ name }}</div>
+      <i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
+      <div class="zan-steps__message">
+        <div class="zan-steps__message-wrapper">
+          <h4 class="zan-steps__title" v-text="title"></h4>
+          <p class="zan-steps__desc" v-text="description"></p>
+        </div>
+      </div>
+      <slot name="message-extra">
+      </slot>
+    </div>
+    <div class="zan-steps__items">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
+export default {
-    name: 'Sample',
+  name: 'zan-steps',
-    props: ['author'],
+
-    data() {
+  props: {
-      return {
+    active: Number,
-        name: 'World'
+    icon: String,
-      };
+    iconClass: {
+      type: String,
+      default: ''
+    },
+    title: String,
+    description: String
+  },
+
+  computed: {
+    computedIconClass() {
+      let iconName = `zan-icon-${this.icon}`;
+      let result = this.iconClass.split(' ');
+      result.push(iconName);
+
+      return result;
     }
-  };
+  },
+
+  data() {
+    return {
+      steps: []
+    };
+  }
+};
 </script>

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.7",
+  "version": "0.0.12",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/zanui-css/src/button.css

@@ -75,13 +75,13 @@
       font-size: 10px;
     }
 
-    @when disabled {
+    @m disabled {
       color: $button-disabled-color;
       background-color: $button-disabled-background-color;
       border: 1px solid $button-disabled-border-color;
     }
 
-    @when block {
+    @m block {
       display: block;
     }
   }

packages/zanui-css/src/button_group.css

@@ -2,6 +2,7 @@
   display: inline-block;
   box-sizing: border-box;
   padding-right: 10px;
+  vertical-align: middle;
   &:last-child {
     padding-right: 0;
   }

packages/zanui-css/src/cell.css

@@ -5,6 +5,7 @@
   @b cell-group {
     padding-left: 10px;
     position: relative;
+    background-color: #fff;
 
     &::after {
       @mixin border-retina (top, bottom);

packages/zanui-css/src/icon.css

@@ -63,4 +63,4 @@
 .zan-icon-sign:before { content: '\e80d'; } /* '' */
 .zan-icon-store:before { content: '\e80e'; } /* '' */
 .zan-icon-topay:before { content: '\e80f'; } /* '' */
-.zan-icon-tosend:before { content: '\e810'; } /* '' */
+.zan-icon-tosend:before { content: '\e810'; } /* '' */

packages/zanui-css/src/steps.css

@@ -1,5 +1,149 @@
+@import "./common/var.css";
+@import "./mixins/ellipsis.css";
+
 @component-namespace zan {
   @b steps {
-    color: red;
+    overflow: hidden;
+    padding: 0 10px;
+
+    @m 4 {
+      .zan-step {
+        width: 33.2%;
+      }
+    }
+
+    @m 3 {
+      .zan-step {
+        width: 50%;
+      }
+    }
+
+    @e icon {
+      font-size: 40px;
+      line-height: 1;
+      float: left;
+      margin-right: 10px;
+    }
+
+    @e message {
+      display: table;
+      height: 40px;
+      margin: 15px 0;
+
+      .zan-steps__message-wrapper {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    @e title {
+      font-size: 14px;
+      color: $c-black;
+    }
+
+    @e desc {
+      font-size: 12px;
+      line-height: 1.5;
+      color: $c-gray-dark;
+      max-height: 18px;
+      @mixin multi-ellipsis 1;
+    }
+
+    @e items {
+      margin: 0 0 10px;
+      overflow: hidden;
+      padding-bottom: 20px;
+    }
+  }
+
+  @b step {
+    font-size: 14px;
+    float: left;
+    position: relative;
+    color: $c-gray-dark;
+
+    @m finish {
+      color: $c-black;
+
+      .zan-step__circle,
+      .zan-step__line {
+        background-color: $c-green;
+      }
+    }
+
+    @m process {
+      color: $c-black;
+
+      .zan-step__circle-container {
+        top: 24px;
+      }
+
+      .zan-icon {
+        font-size: 12px;
+        color: $c-green;
+        line-height: 1;
+        display: block;
+      }
+    }
+
+    &:first-child {
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      position: absolute;
+      right: 10px;
+      width: auto;
+
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+
+      .zan-step__circle-container {
+        left: auto;
+        right: -6px;
+      }
+
+      .zan-step__line {
+        width: 0;
+      }
+    }
+
+    .zan-step__circle-container {
+      position: absolute;
+      top: 28px;
+      left: -8px;
+      padding: 0 8px;
+      background-color: #fff;
+      z-index: 1;
+    }
+
+    @e circle {
+      display: block;
+      width: 5px;
+      height: 5px;
+      background-color: #888;
+      border-radius: 50%;
+    }
+
+    @e title {
+      font-size: 12px;
+      transform: translate3d(-50%, 0, 0);
+      display: inline-block;
+      margin-left: 3px;
+    }
+
+    @e line {
+      position: absolute;
+      left: 0px;
+      top: 30px;
+      width: 100%;
+      height: 1px;
+      background-color: $c-gray-light;
+    }
   }
 }

src/index.js

@@ -20,6 +20,7 @@ import CheckboxGroup from '../packages/checkbox-group/index.js';
 import BadgeGroup from '../packages/badge-group/index.js';
 import Badge from '../packages/badge/index.js';
 import Search from '../packages/search/index.js';
+import Step from '../packages/step/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -44,6 +45,7 @@ const install = function(Vue) {
   Vue.component(BadgeGroup.name, BadgeGroup);
   Vue.component(Badge.name, Badge);
   Vue.component(Search.name, Search);
+  Vue.component(Step.name, Step);
 };
 
 // auto install
@@ -53,7 +55,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.0.7',
+  version: '0.0.12',
   Button,
   Switch,
   Field,
@@ -75,5 +77,6 @@ module.exports = {
   CheckboxGroup,
   BadgeGroup,
   Badge,
-  Search
+  Search,
+  Step
 };

src/mixins/popup/index.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import merge from 'src/utils/merge';
 import PopupManager from './popup-manager';
 

src/mixins/popup/popup-manager.js

@@ -1,6 +1,6 @@
-import { addClass, removeClass } from 'src/utils/dom';
+import { addClass } from 'src/utils/dom';
 
-let hasModal = false;
+let hasModal = false; // eslint-disable-line
 
 const getModal = function() {
   let modalDom = PopupManager.modalDom;