Merge remote-tracking branch 'main/dev' into dev

changelog.md

@@ -1,5 +1,31 @@
 `ZanUI-WeApp` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
 
+## [v3.1.0](https://github.com/youzan/zanui-weapp/tree/v3.1.0) (2018-07-31)
+[Full Changelog](https://github.com/youzan/zanui-weapp/compare/v3.0.10...v3.1.0)
+
+**Breaking changes**
+
+- 修复 Field 组件错误的事件参数 [\#391](https://github.com/youzan/zanui-weapp/pull/391) ([pangxie1991](https://github.com/pangxie1991))
+
+**Improvements**
+
+- 示例小程序增加 tree-select DEMO [\#392](https://github.com/youzan/zanui-weapp/pull/392) ([pangxie1991](https://github.com/pangxie1991))
+- 文档增加 timeout 的单位标注 [\#389](https://github.com/youzan/zanui-weapp/pull/389) ([upupming](https://github.com/upupming))
+- 修复文档 Card 示例页 title 错误标注为 CAPSULE 的问题 [\#385](https://github.com/youzan/zanui-weapp/pull/385) ([Fyerl](https://github.com/Fyerl))
+
+
+## [v3.0.10](https://github.com/youzan/zanui-weapp/tree/v3.0.10) (2018-07-27)
+[Full Changelog](https://github.com/youzan/zanui-weapp/compare/v3.0.9...v3.0.10)
+
+**new feature**
+
+- cell-group 组件支持显示上下边框 [\#380](https://github.com/youzan/zanui-weapp/pull/380) ([rex-zsd](https://github.com/rex-zsd))
+
+**Improvements**
+
+- Cell 组件去掉 title 区域的最小宽度 [\#376](https://github.com/youzan/zanui-weapp/pull/376) ([ylethe](https://github.com/ylethe))
+
+
 ## [v3.0.9](https://github.com/youzan/zanui-weapp/tree/v3.0.9) (2018-07-17)
 [Full Changelog](https://github.com/youzan/zanui-weapp/compare/v3.0.8...v3.0.9)
 

dist/field/index.js

@@ -49,13 +49,19 @@ Component({
 
       this.setData({ value: value });
 
-      this.triggerEvent('change', event);
+      this.triggerEvent('change', Object.assign({}, detail));
     },
-    handleFieldFocus: function handleFieldFocus(event) {
+    handleFieldFocus: function handleFieldFocus(_ref) {
-      this.triggerEvent('focus', event);
+      var _ref$detail = _ref.detail,
+          detail = _ref$detail === undefined ? {} : _ref$detail;
+
+      this.triggerEvent('focus', Object.assign({}, detail));
     },
-    handleFieldBlur: function handleFieldBlur(event) {
+    handleFieldBlur: function handleFieldBlur(_ref2) {
-      this.triggerEvent('blur', event);
+      var _ref2$detail = _ref2.detail,
+          detail = _ref2$detail === undefined ? {} : _ref2$detail;
+
+      this.triggerEvent('blur', Object.assign({}, detail));
     },
     updateIsLastElement: function updateIsLastElement(isLastField) {
       var showBorder = true;

dist/search/index.js

@@ -2,6 +2,9 @@
 
 Component({
   externalClasses: ['search-class', 'input-class', 'cancel-class'],
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
   properties: {
     cancelText: {
       type: String,

dist/search/index.wxml

@@ -7,6 +7,7 @@
     style="{{ inputStyle }}"
   >
     <icon type="search" size="15" color="#a9a9a9" />
+    <slot name="input"></slot>
     <input
       class="zan-search__input"
       placeholder="{{ placeholder }}"

dist/search/index.wxss

@@ -1 +1 @@
-.zan-search{box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;background:0 0;padding:5px 10px}.zan-search.center-placeholder{background:#fff}.zan-search.center-placeholder .zan-search__form{margin-left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border:none}.zan-search.zan-cell::after{display:none}.zan-search__form{display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1;background:#fff;border-radius:4rpx;height:64rpx;line-height:56rpx;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}.zan-search picker{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:100%;padding-right:20rpx}.zan-search__form .picker{position:relative;width:110rpx;height:100%;color:#666;font-size:28rpx;margin-left:20rpx}.zan-search__form .picker::after{content:'';width:0;height:0;position:absolute;right:0;top:50%;margin-top:-6rpx;border-top:12rpx solid #333;border-right:8rpx solid transparent;border-left:8rpx solid transparent}.zan-search__form input{height:100%;-webkit-box-flex:1;flex:1;padding:0 20rpx;font-size:28rpx;color:#333}.zan-search__form icon{margin-left:20rpx;line-height:1}.zan-search__clear{padding:12rpx 20rpx}.zan-search__placeholder{font-size:28rpx;color:#cacaca}.zan-search__cancel{align-self:stretch;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;padding-left:30rpx;font-size:28rpx;color:#38f}
+.zan-search{box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;background:0 0;padding:5px 10px}.zan-search.center-placeholder{background:#fff}.zan-search.center-placeholder .zan-search__form{margin-left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border:none}.zan-search.zan-cell::after{display:none}.zan-search__form{display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1;background:#fff;border-radius:4rpx;height:64rpx;line-height:56rpx;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}.zan-search__form input{height:100%;-webkit-box-flex:1;flex:1;padding:0 20rpx;font-size:28rpx;color:#333}.zan-search__form icon{margin-left:20rpx;line-height:1}.zan-search__clear{padding:12rpx 20rpx}.zan-search__placeholder{font-size:28rpx;color:#cacaca}.zan-search__cancel{align-self:stretch;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;padding-left:30rpx;font-size:28rpx;color:#38f}

example/components/doc-page/index.wxml

@@ -1,5 +1,11 @@
+<wxs module="filter">
+  module.exports.toUpperCase = function(v) {
+    return v.toUpperCase();
+  }
+</wxs>
+
 <view class="doc-container">
-  <view class="doc-title">{{ title }}</view>
+  <view class="doc-title">{{ filter.toUpperCase(title) }}</view>
   <view class="doc-content {{ withoutPadding ? 'doc-content--without-pd' : '' }}">
     <slot></slot>
   </view>

example/pages/card/index.wxml

@@ -1,4 +1,4 @@
-<doc-page title="CAPSULE" without-padding>
+<doc-page title="CARD" without-padding>
 
   <zan-panel without-border>
     <zan-card

example/pages/dashboard/config.js

@@ -100,5 +100,14 @@ export default {
         path: '/pages/toptips/index'
       }
     ]
+  },
+  complexComponent: {
+    title: '高阶组件',
+    content: [
+      {
+        name: 'TreeSelect 分类选择',
+        path: '/pages/tree-select/index'
+      }
+    ]
   }
 };

example/pages/field/index.wxml

@@ -7,6 +7,9 @@
         placeholder="{{ config.base.name.placeholder }}"
         focus="{{ config.base.name.focus }}"
         value="{{ value }}"
+        bind:change="handleZanFieldChange"
+        bind:focus="handleZanFieldFocus"
+        bind:blur="handleZanFieldBlur"
       >
       </zan-field>
       <zan-field
@@ -14,6 +17,7 @@
         placeholder="{{ config.base.tel.placeholder }}"
         error="{{ config.base.tel.error }}"
         input-type="{{ config.base.tel.inputType }}"
+        bind:change="handleZanFieldChange"
       >
       </zan-field>
       <zan-field
@@ -21,12 +25,14 @@
         type="{{ config.base.address.type }}"
         placeholder="{{ config.base.address.placeholder }}"
         maxlength="50"
+        bind:change="handleZanFieldChange"
       >
       </zan-field>
       <zan-field
         title="{{ config.base.disabled.title }}"
         value="{{ config.base.disabled.value }}"
         disabled="{{ config.base.disabled.disabled }}"
+        bind:change="handleZanFieldChange"
       >
       </zan-field>
     </zan-cell-group>

example/pages/search/index.js

@@ -1,7 +1,9 @@
 Page({
   data: {
     inputValue: '',
-    focus: true
+    focus: true,
+    range: ['门店', '配送至'],
+    rangeIndex: 0
   },
 
   searchChange(e) {
@@ -16,5 +18,11 @@ Page({
 
   handleCancel() {
     console.error('cancel')
+  },
+
+  pickerChange(e) {
+    this.setData({
+      rangeIndex: e.detail.value
+    })
   }
 });

example/pages/search/index.wxml

@@ -2,10 +2,8 @@
 
   <zan-panel title='基本用法'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       keyword="{{ inputValue }}"
-      placeholder="搜索商品"
       focus="{{ focus }}"
       bindchange="searchChange"
       bindsearch="searchDone"
@@ -14,21 +12,17 @@
 
   <zan-panel title='不可用'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       disabled="{{ true }}"
-      placeholder="搜索商品"
     />
   </zan-panel>
 
   <zan-panel title='自定义样式'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       searchStyle="height: 88rpx; padding: 0 30rpx; background: {{ searchbg || '#F2F2F2' }};"
       inputStyle="height: 56rpx; border-radius: 8rpx;"
       keyword="{{ inputValue }}"
-      placeholder="搜索商品"
       focus="{{ focus }}"
       bindchange="searchChange"
       bindsearch="searchDone"
@@ -37,10 +31,8 @@
 
   <zan-panel title='取消按钮'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       keyword="{{ inputValue }}"
-      placeholder="搜索商品"
       focus="{{ focus }}"
       useCancel="{{ true }}"
       bindchange="searchChange"
@@ -48,4 +40,29 @@
       bindcancel="handleCancel"
     />
   </zan-panel>
+
+  <zan-panel title="高级用法 自定义input插槽">
+    <zan-search
+      placeholder="搜索..."
+      keyword="{{ inputValue }}"
+      focus="{{ focus }}"
+      useCancel="{{ true }}"
+      bindchange="searchChange"
+      bindsearch="searchDone"
+      bindcancel="handleCancel"
+    >
+      <picker
+        slot="input"
+        mode="selector"
+        class="zan-search__selector"
+        bindchange="pickerChange"
+        style="width: 60px"
+        range="{{ range }}"
+        value="{{ rangeIndex }}"
+        wx:if="{{ range.length > 0}}"
+      >
+        <view class="picker">{{ range[rangeIndex] }}</view>
+      </picker>
+    </zan-search>
+  </zan-panel>
 </doc-page>

example/pages/search/index.wxss

@@ -0,0 +1,27 @@
+picker {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-right: 20rpx;
+}
+
+.picker {
+  position: relative;
+  width: 110rpx;
+  height: 100%;
+  color: #666;
+  font-size: 28rpx;
+  margin-left: 20rpx;
+}
+.picker::after {
+  content: '';
+  width: 0;
+  height: 0;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  margin-top: -6rpx;
+  border-top: 12rpx solid #333;
+  border-right: 8rpx solid transparent;
+  border-left: 8rpx solid transparent;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zanui-weapp",
-  "version": "3.0.10",
+  "version": "3.1.1",
   "description": "高颜值、好用、易扩展的小程序 UI 库，Powered by 有赞",
   "main": "app.js",
   "directories": {
@@ -57,6 +57,7 @@
     "gulp-remove-logging": "^1.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.8",
+    "lodash": "^4.17.10",
     "node-watch": "^0.5.5",
     "postcss-calc": "^6.0.1",
     "postcss-easy-import": "^3.0.0",

packages/field/index.js

@@ -44,15 +44,15 @@ Component({
       const { value = '' } = detail;
       this.setData({ value });
 
-      this.triggerEvent('change', event);
+      this.triggerEvent('change', { ...detail });
     },
 
-    handleFieldFocus(event) {
+    handleFieldFocus({ detail = {} }) {
-      this.triggerEvent('focus', event);
+      this.triggerEvent('focus', { ...detail });
     },
 
-    handleFieldBlur(event) {
+    handleFieldBlur({ detail = {} }) {
-      this.triggerEvent('blur', event);
+      this.triggerEvent('blur', { ...detail });
     },
 
     updateIsLastElement(isLastField) {

packages/search/README.md

@@ -39,6 +39,28 @@ searchDone(e) {
 }
 ```
 
+### 使用slot
+
+```js
+<zan-search
+  placeholder="搜索..."
+  useCancel
+>
+  <picker
+    slot="input"
+    mode="selector"
+    range="{{ range }}"
+    value="{{ rangeIndex }}"
+    bindchange="pickerChange"
+    class="zan-search__selector"
+    style="width: 60px"
+    wx:if="{{ range.length > 0}}"
+  >
+    <view class="picker">{{ range[rangeIndex] }}</view>
+  </picker>
+</zan-search>
+```
+
 ### API
 
 #### 参数

packages/search/index.js

@@ -1,5 +1,8 @@
 Component({
   externalClasses: ['search-class', 'input-class', 'cancel-class'],
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
   properties: {
     cancelText: {
       type: String,

packages/search/index.pcss

@@ -32,33 +32,6 @@
   align-items: center;
 }
 
-.zan-search picker {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding-right: 20rpx;
-}
-
-.zan-search__form .picker {
-  position: relative;
-  width: 110rpx;
-  height: 100%;
-  color: #666;
-  font-size: 28rpx;
-  margin-left: 20rpx;
-}
-.zan-search__form .picker::after {
-  content: '';
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-top: -6rpx;
-  border-top: 12rpx solid #333;
-  border-right: 8rpx solid transparent;
-  border-left: 8rpx solid transparent;
-}
 .zan-search__form input {
   height: 100%;
   flex: 1;

packages/search/index.wxml

@@ -7,6 +7,7 @@
     style="{{ inputStyle }}"
   >
     <icon type="search" size="15" color="#a9a9a9" />
+    <slot name="input"></slot>
     <input
       class="zan-search__input"
       placeholder="{{ placeholder }}"

packages/toast/README.md

@@ -52,4 +52,4 @@ Toast.loading({
 | type | 提示类型, 可选值：loading，success，fail | String | - |
 | icon | toast 显示图标，可以用 icon 里面支持的所有图标	 | String | - |
 | image | toast 显示图标，为图片的链接，传入此值后会覆盖 icon 值 | String | - |
-| timeout | toast 显示时间，小于0则会一直显示，需要手动调用 Toast.clear 清除 | Number | - |
+| timeout | toast 显示时间，单位为毫秒，小于0则会一直显示，需要手动调用 Toast.clear 清除 | Number | - |

scripts/utils/extracter.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const fs = require('fs-extra');
 const nodeWatch = require('node-watch');
+const debounce = require('lodash/debounce');
 require('shelljs/global');
 
 module.exports = function (config = {}) {
@@ -10,10 +11,11 @@ module.exports = function (config = {}) {
   extracter(config);
 
   if (config.watch) {
-    nodeWatch(config.src, { recursive: true }, () => extracter(config));
+    nodeWatch(config.src, { recursive: true }, () => debouncedFunc(config));
   }
 };
 
+const debouncedFunc = debounce(config => extracter(config), 500);
 
 function extracter(config = {}) {
   // 复制 src