[breaking change] Stepper: Quantity 更名为 Stepper (#70)

* rename stepper

* update icon readme

example/app.json

@@ -15,7 +15,7 @@
     "pages/noticebar/index",
     "pages/panel/index",
     "pages/popup/index",
-    "pages/quantity/index",
+    "pages/stepper/index",
     "pages/steps/index",
     "pages/switch/index",
     "pages/tab/index",

example/pages/dashboard/config.js

@@ -41,12 +41,12 @@ export default {
       }, {
         name: 'Popup 弹出层',
         path: '/pages/popup/index'
-      }, {
-        name: 'Quantity 计数器',
-        path: '/pages/quantity/index'
       }, {
         name: 'Select 选择',
         path: '/pages/select/index'
+      }, {
+        name: 'Stepper 计数器',
+        path: '/pages/stepper/index'
       }, {
         name: 'Steps 步骤条',
         path: '/pages/steps/index'

example/pages/quantity/index.js

@@ -1,30 +0,0 @@
-var Zan = require('../../dist/index');
-
-Page(Object.assign({}, Zan.Quantity, {
-  data: {
-    quantity1: {
-      quantity: 10,
-      min: 1,
-      max: 20
-    },
-    quantity2: {
-      quantity: 1,
-      min: 1,
-      max: 1
-    },
-    quantity3: {
-      quantity: 10,
-      min: 1,
-      max: 20
-    }
-  },
-
-  handleZanQuantityChange(e) {
-    var componentId = e.componentId;
-    var quantity = e.quantity;
-
-    this.setData({
-      [`${componentId}.quantity`]: quantity
-    });
-  }
-}));

example/pages/quantity/index.json

@@ -1,3 +0,0 @@
-{
-  "navigationBarTitleText": "Quantity 计数器"
-}

example/pages/quantity/index.wxml

@@ -1,20 +0,0 @@
-<import src="/dist/quantity/index.wxml" />
-
-<view class="container">
-
-  <view class="doc-title">QUANTITY</view>
-
-  <view style="padding: 40px 15px">
-    <template is="zan-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
-  </view>
-
-  <!-- 当最大值等于最小值时，组件不可用 -->
-  <view style="padding: 40px 15px ">
-    <template is="zan-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" />
-  </view>
-
-  <!-- small size -->
-  <view style="padding: 40px 15px ">
-    <template is="zan-quantity" data="{{ ...quantity3, componentId: 'quantity3', size: 'small' }}" />
-  </view>
-</view>

example/pages/stepper/index.js

@@ -0,0 +1,30 @@
+var Zan = require('../../dist/index');
+
+Page(Object.assign({}, Zan.Stepper, {
+  data: {
+    stepper1: {
+      stepper: 10,
+      min: 1,
+      max: 20
+    },
+    stepper2: {
+      stepper: 1,
+      min: 1,
+      max: 1
+    },
+    stepper3: {
+      stepper: 10,
+      min: 1,
+      max: 20
+    }
+  },
+
+  handleZanStepperChange(e) {
+    var componentId = e.componentId;
+    var stepper = e.stepper;
+
+    this.setData({
+      [`${componentId}.stepper`]: stepper
+    });
+  }
+}));

example/pages/stepper/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Stepper 计数器"
+}

example/pages/stepper/index.wxml

@@ -0,0 +1,20 @@
+<import src="/dist/stepper/index.wxml" />
+
+<view class="container">
+
+  <view class="doc-title">Stepper</view>
+
+  <view style="padding: 40px 15px">
+    <template is="zan-stepper" data="{{ ...stepper1, componentId: 'stepper1' }}" />
+  </view>
+
+  <!-- 当最大值等于最小值时，组件不可用 -->
+  <view style="padding: 40px 15px ">
+    <template is="zan-stepper" data="{{ ...stepper2, componentId: 'stepper2' }}" />
+  </view>
+
+  <!-- small size -->
+  <view style="padding: 40px 15px ">
+    <template is="zan-stepper" data="{{ ...stepper3, componentId: 'stepper3', size: 'small' }}" />
+  </view>
+</view>

packages/icon/README.md

@@ -13,7 +13,9 @@
 ```
 
 支持的 icon 和 名称 见下图
-![](https://img.yzcdn.cn/public_files/2017/12/03/0b16c04ff01157265954649a145b67b1.jpg)
+
-![](https://img.yzcdn.cn/public_files/2017/12/03/aa7c71a4001bd18b0e1704b5f634df89.jpg)
+![](https://img.yzcdn.cn/public_files/2017/12/03/c582397894f57f1c72fb28118588f833.jpeg?imageView2/2/w/500/h/0/q/100)
-![](https://img.yzcdn.cn/public_files/2017/12/03/3459325308e41cebd519c34e02a99c7c.jpg)
+![](https://img.yzcdn.cn/public_files/2017/12/03/ab37f55520dfdcdf8dbe8951025e379a.jpeg?imageView2/2/w/500/h/0/q/100)
-![](https://img.yzcdn.cn/public_files/2017/12/03/d96b6e3f1127fe884e48171b62142aa9.jpg)
+![](https://img.yzcdn.cn/public_files/2017/12/03/ab37f55520dfdcdf8dbe8951025e379a.jpeg?imageView2/2/w/500/h/0/q/100)
+![](https://img.yzcdn.cn/public_files/2017/12/03/e862638f5cab9c0c7d2be38702c162df.jpeg?imageView2/2/w/500/h/0/q/100)
+![](https://img.yzcdn.cn/public_files/2017/12/03/dfa76b99ca1c37671628e1c7b224dbb9.jpeg?imageView2/2/w/500/h/0/q/100)

packages/index.js

@@ -2,7 +2,7 @@ exports.CheckLabel = require('./select/index');
 exports.Dialog = require('./dialog/index');
 exports.Field = require('./field/index');
 exports.NoticeBar = require('./noticebar/index');
-exports.Quantity = require('./quantity/index');
+exports.Stepper = require('./stepper/index');
 exports.Switch = require('./switch/index');
 exports.Tab = require('./tab/index');
 exports.Toast = require('./toast/index');

packages/index.pcss

@@ -13,9 +13,9 @@
 @import "noticebar/index.pcss";
 @import "panel/index.pcss";
 @import "popup/index.pcss";
-@import "quantity/index.pcss";
 @import "row/index.pcss";
 @import "select/index.pcss";
+@import "stepper/index.pcss";
 @import "steps/index.pcss";
 @import "switch/index.pcss";
 @import "tab/index.pcss";

packages/quantity/README.md

@@ -1,3 +0,0 @@
-## Quantity 计数器
-
-文档补充中

packages/quantity/index.wxml

@@ -1,28 +0,0 @@
-<template name="zan-quantity">
-  <view class="zan-quantity {{ size === 'small' ? 'zan-quantity--small' : '' }}">
-    <view
-      class="zan-quantity__minus {{ quantity <= min ? 'zan-quantity--disabled' : '' }}"
-      data-component-id="{{ componentId }}"
-      data-quantity="{{ quantity }}"
-      data-disabled="{{ quantity <= min }}"
-      bindtap="_handleZanQuantityMinus"
-    >-</view>
-    <input
-      class="zan-quantity__text {{ min >= max ? 'zan-quantity--disabled' : '' }}"
-      type="number"
-      data-component-id="{{ componentId }}"
-      data-min="{{ min }}"
-      data-max="{{ max }}"
-      value="{{ quantity }}"
-      disabled="{{ min >= max }}"
-      bindblur="_handleZanQuantityBlur"
-    ></input>
-    <view
-      class="zan-quantity__plus {{ quantity >= max ? 'zan-quantity--disabled' : '' }}"
-      data-component-id="{{ componentId }}"
-      data-quantity="{{ quantity }}"
-      data-disabled="{{ quantity >= max }}"
-      bindtap="_handleZanQuantityPlus"
-    >+</view>
-  </view>
-</template>

packages/stepper/README.md

@@ -0,0 +1,52 @@
+## Stepper 计数器
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+<import src="path/to/zanui-weapp/dist/stepper/index.wxml" />
+
+<template is="zan-stepper" data="{{ ...stepper, componentId: 'stepper' }}"></template>
+```
+```js
+const Stepper = require('path/to/zanui-weapp/dist/stepper/index');
+
+// 在 Page 中混入 Stepper 里面声明的方法
+Page(Object.assign({}, Stepper, {
+  // ...
+}));
+```
+
+### 代码演示
+#### 基础功能
+`Stepper` 组件通过传入的 stepper 对象控制，内部数据格式如下：
+```js
+const stepper = {
+  // 当前 stepper 数字
+  stepper: 1,
+  // 最小可到的数字
+  min: 1,
+  // 最大可到的数字
+  max: 1
+};
+```
+
+当一个 `Stepper` 中，min 超过 max，就会导致组件被置灰
+
+当 stepper 被点击时，可以在页面中注册 handleZanStepperChange 方法来监听
+```js
+Page(Object.assign({}, Stepper, {
+  handleZanStepperChange({ componentId, stepper }) {
+    // componentId 即为在模板中传入的 componentId
+    // 用于在一个页面上使用多个 stepper 时，进行区分
+    // stepper 代表操作后，应该要展示的数字，需要设置到数据对象里，才会更新页面展示
+    this.setData({
+      stepper
+    });
+  }
+}));
+```

packages/stepper/index.js

@@ -2,35 +2,35 @@ function handle(e, num) {
   var dataset = e.currentTarget.dataset;
   var componentId = dataset.componentId;
   var disabled = dataset.disabled;
-  var quantity = +dataset.quantity;
+  var stepper = +dataset.stepper;
 
   if (disabled) return null;
 
-  callback.call(this, componentId, quantity + num);
+  callback.call(this, componentId, stepper + num);
 }
 
-function callback(componentId, quantity) {
+function callback(componentId, stepper) {
-  quantity = +quantity;
+  stepper = +stepper;
-  var e = { componentId, quantity };
+  var e = { componentId, stepper };
-  console.info('[zan:quantity:change]', e);
+  console.info('[zan:stepper:change]', e);
 
-  if (this.handleZanQuantityChange) {
+  if (this.handleZanStepperChange) {
-    this.handleZanQuantityChange(e);
+    this.handleZanStepperChange(e);
   } else {
-    console.warn('页面缺少 handleZanQuantityChange 回调函数');
+    console.warn('页面缺少 handleZanStepperChange 回调函数');
   }
 }
 
-var Quantity = {
+var Stepper = {
-  _handleZanQuantityMinus(e) {
+  _handleZanStepperMinus(e) {
     handle.call(this, e, -1);
   },
 
-  _handleZanQuantityPlus(e) {
+  _handleZanStepperPlus(e) {
     handle.call(this, e, +1);
   },
 
-  _handleZanQuantityBlur(e) {
+  _handleZanStepperBlur(e) {
     var dataset = e.currentTarget.dataset;
     var componentId = dataset.componentId;
     var max = +dataset.max;
@@ -58,4 +58,4 @@ var Quantity = {
   }
 };
 
-module.exports = Quantity;
+module.exports = Stepper;

packages/stepper/index.pcss

@@ -1,7 +1,7 @@
-.zan-quantity {
+.zan-stepper {
   color: #666;
 }
-.zan-quantity view {
+.zan-stepper view {
   display: inline-block;
   line-height: 20px;
   padding: 5px 0;
@@ -12,34 +12,36 @@
   font-size: 12px;
   border: 1rpx solid #999;
 }
-.zan-quantity .zan-quantity__minus {
+.zan-stepper .zan-stepper__minus {
   border-right: none;
   border-radius: 2px 0 0 2px;
 }
-.zan-quantity .zan-quantity__text {
+.zan-stepper .zan-stepper__text {
   border: 1rpx solid #999;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   height: 30px;
   width: 40px;
+  /* 重置 input 默认样式 */
+  min-height: auto;
   font-size: 12px;
   line-height: 30px;
 }
-.zan-quantity .zan-quantity__plus {
+.zan-stepper .zan-stepper__plus {
   border-left: none;
   border-radius: 0 2px 2px 0;
 }
-.zan-quantity .zan-quantity--disabled {
+.zan-stepper .zan-stepper--disabled {
   background: #f8f8f8;
   color: #bbb;
   border-color: #e8e8e8;
 }
-.zan-quantity--small view {
+.zan-stepper--small view {
   min-width: 36px;
   line-height: 18px;
 }
-.zan-quantity--small .zan-quantity__text {
+.zan-stepper--small .zan-stepper__text {
   width: 36px;
   line-height: 28px;
   height: 28px;

packages/stepper/index.wxml

@@ -0,0 +1,28 @@
+<template name="zan-stepper">
+  <view class="zan-stepper {{ size === 'small' ? 'zan-stepper--small' : '' }}">
+    <view
+      class="zan-stepper__minus {{ stepper <= min ? 'zan-stepper--disabled' : '' }}"
+      data-component-id="{{ componentId }}"
+      data-stepper="{{ stepper }}"
+      data-disabled="{{ stepper <= min }}"
+      bindtap="_handleZanStepperMinus"
+    >-</view>
+    <input
+      class="zan-stepper__text {{ min >= max ? 'zan-stepper--disabled' : '' }}"
+      type="number"
+      data-component-id="{{ componentId }}"
+      data-min="{{ min }}"
+      data-max="{{ max }}"
+      value="{{ stepper }}"
+      disabled="{{ min >= max }}"
+      bindblur="_handleZanStepperBlur"
+    ></input>
+    <view
+      class="zan-stepper__plus {{ stepper >= max ? 'zan-stepper--disabled' : '' }}"
+      data-component-id="{{ componentId }}"
+      data-stepper="{{ stepper }}"
+      data-disabled="{{ stepper >= max }}"
+      bindtap="_handleZanStepperPlus"
+    >+</view>
+  </view>
+</template>