优化 toptips、dialog、xnumber 组件，增加 seats 组件

CHANGELOG.md

@@ -1,3 +1,10 @@
+#### v 1.1.2 (2017-03-24)
+
+- 【优化】 toptips 组件，更新入场与离场动画效果
+- 【优化】 dialog 组件，增加配置项 verticalButtons 垂直按钮布局、buttons[].bold 是否加粗按钮的文字
+- 【优化】 xnumber 组件，增加配置项 longpress 禁用长按
+- 【增强】 增加 seats 组件
+
 #### v 1.1.1 (2017-03-08)
 
 - 【修复】 toast 组件，未触发回调函数

README.md

@@ -29,9 +29,10 @@
 * [Qrcode - 二维码](https://github.com/skyvow/wux/blob/master/docs/components/qrcode.md)
 * [Rater - 评分组件](https://github.com/skyvow/wux/blob/master/docs/components/rater.md)
 * [Refresher - 下拉刷新](https://github.com/skyvow/wux/blob/master/docs/components/refresher.md)
+* [Seats - 座位图](https://github.com/skyvow/wux/blob/master/docs/components/seats.md)
 * [Toast - 提示框](https://github.com/skyvow/wux/blob/master/docs/components/toast.md)
 * [Toptips - 顶部提示](https://github.com/skyvow/wux/blob/master/docs/components/toptips.md)
-* [Xnumber - 计数器](https://github.com/skyvow/wux/blob/master/docs/components/xnumber.md)
+* [Xnumber - 数字输入框](https://github.com/skyvow/wux/blob/master/docs/components/xnumber.md)
 
 ## 项目截图
 
@@ -55,6 +56,8 @@
 
 <img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-04-3.png" width="375px" style="display:inline;">
 
+<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-04-4.png" width="375px" style="display:inline;">
+
 <img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-05.png" width="375px" style="display:inline;">
 
 <img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-06.png" width="375px" style="display:inline;">
@@ -69,6 +72,8 @@
 
 <img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-21.png" width="375px" style="display:inline;">
 
+<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-22.png" width="375px" style="display:inline;">
+
 <img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-11-1.png" width="375px" style="display:inline;">
 
 <img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-11-2.png" width="375px" style="display:inline;">

docs/README.md

@@ -13,6 +13,7 @@
 - [Qrcode - 二维码](components/qrcode.md)
 - [Rater - 评分](components/rater.md)
 - [Refresher - 下拉刷新](components/refresher.md)
+- [Seats - 座位图](components/seats.md)
 - [Toast - 提示框](components/toast.md)
 - [Toptips - 顶部提示](components/toptips.md)
-- [Xnumber - 计数器](components/xnumber.md)
+- [Xnumber - 数字输入框](components/xnumber.md)

docs/components/dialog.md

@@ -6,9 +6,11 @@
 | options | <code>object</code> | 配置项 |
 | options.title | <code>string</code> | 提示标题 |
 | options.content | <code>string</code> | 提示文本 |
+| options.verticalButtons | <code>boolean</code> | 是否显示垂直按钮布局 |
 | options.buttons | <code>array</code> | 按钮 |
 | options.buttons[].text | <code>string</code> | 按钮的文本 |
 | options.buttons[].type | <code>string</code> | 按钮的类型 |
+| options.buttons[].bold | <code>boolean</code> | 是否加粗按钮的文字 |
 | options.buttons[].onTap | <code>function</code> | 按钮的点击事件 |
 
 **Example**  
@@ -29,6 +31,7 @@
             <button class="weui-btn" type="default" bindtap="alert">Alert Dialog</button>
             <button class="weui-btn" type="default" bindtap="prompt">Prompt Dialog</button>
             <button class="weui-btn" type="default" bindtap="custom">Custom Dialog</button>
+            <button class="weui-btn" type="default" bindtap="vertical">Vertical Buttons Dialog</button>
         </view>
     </view>
 </view>
@@ -141,5 +144,26 @@ Page({
             ],
         })
     },
+    vertical() {
+        this.$wuxDialog.open({
+            title: '请问需要反馈什么问题？',
+            content: '你也可以在个人页的反馈帮助中心里找到这个功能',
+            verticalButtons: !0, 
+            buttons: [
+                { 
+                    text: '遇到问题', 
+                    bold: !0, 
+                },
+                { 
+                    text: '意见建议', 
+                    bold: !0, 
+                },
+                { 
+                    text: '没啥事', 
+                    bold: !0, 
+                },
+            ],
+        })
+    },
 })
 ```

docs/components/seats.md

@@ -0,0 +1,87 @@
+## seats(id, options)
+座位图
+
+| 参数 | 类型 | 描述 |
+| --- | --- | --- |
+| id | <code>string</code> | 唯一标识 |
+| options | <code>object</code> | 配置项 |
+| options.maps | <code>array</code> | 座位图 |
+| options.max | <code>number</code> | 勾选最大值 |
+| options.maxRowIndex | <code>number</code> | 最大行数 |
+| options.maxColumnIndex | <code>number</code> | 最大列数 |
+| options.onSelect | <code>function</code> | 监听选中时的回调函数 |
+
+**Example**  
+```html
+<import src="../../components/seats/seats.wxml"/>
+
+<view class="seats-ticket">
+    <view class="movie-info">
+        <view class="movie">
+            <view class="title">金刚狼3：殊死一战
+                <text class="sub hide">英语/2D</text>
+            </view>
+            <view class="time">今天3月5日(周日) 16:55</view>
+        </view>
+    </view>
+</view>
+
+<view class="seats-img">
+    <text class="seats-icon seats-available"></text>
+    <text class="text">可选</text>
+    <text class="seats-icon selected"></text>
+    <text class="text">已选</text>
+    <text class="seats-icon unavailable"></text>
+    <text class="text">已售</text>
+    <text class="seats-icon double"></text>
+    <text class="text">情侣座</text>
+    <view class="front">5号厅银幕</view>
+</view>
+
+<view class="seats-area">
+    <template is="seats" data="{{ ...$wux.seats.movie }}"/>
+</view>
+
+<view class="selected-seats">
+	<view class="info" wx:if="{{ !items.length }}">一次最多选5个座位</view>
+	<view class="seat-wrap" wx:if="{{ !!items.length }}">
+		<view class="seat" data-id="{{ item.id }}" wx:for="{{ items }}" wx:key="">{{ item.label }}</view>
+	</view>
+	<view class="money">￥{{ total || '00.00' }}</view>
+</view>
+```
+
+```js
+import data from './data'
+const App = getApp()
+
+Page({
+	data: {},
+	onLoad() {
+		this.initSeats()
+	},
+	initSeats() {
+		const seatingPlan = data.msg.seatingPlan
+		const maps = seatingPlan.ajaxSeatBeanList
+		const maxRowIndex = seatingPlan.maxRowIndex
+		const maxColumnIndex = seatingPlan.maxColumnIndex
+
+		this.$wuxSeats = App.Wux().$wuxSeats.init('movie', {
+			maps: maps, 
+			maxRowIndex: maxRowIndex, 
+			maxColumnIndex: maxColumnIndex, 
+			max: 5, 
+			onSelect(items) {
+				console.log(items)
+
+				this.page.setData({
+					items, 
+					total: (items.length * 20).toFixed(2)
+				})
+			},
+		})
+
+		this.$wuxSeats.disabled([`4520200`])
+	},
+})
+```

docs/components/xnumber.md

@@ -1,5 +1,5 @@
 ## xnumber(id, options)
-计数器
+数字输入框
 
 | 参数 | 类型 | 描述 |
 | --- | --- | --- |
@@ -9,7 +9,8 @@
 | options.max | <code>number</code> | 最大值 |
 | options.step | <code>number</code> | 计数间隔 |
 | options.value | <code>number</code> | 默认值 |
-| options.disabled | <code>boolean</code> | 禁用点击 |
+| options.disabled | <code>boolean</code> | 禁用输入 |
+| options.longpress | <code>boolean</code> | 禁用长按 |
 | options.className | <code>string</code> | 自定义类名 |
 | options.callback | <code>function</code> | 监听值变化的回调函数 |
 
@@ -20,7 +21,7 @@
 <view class="page">
     <view class="page__hd">
         <view class="page__title">Xnumber</view>
-        <view class="page__desc">计数器</view>
+        <view class="page__desc">数字输入框</view>
     </view>
     <view class="page__bd">
         <view class="weui-cells__title">默认</view>
@@ -77,6 +78,15 @@
                 </view>
             </view>
         </view>
+        <view class="weui-cells__title">设置长按快速加减</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell">
+                <view class="weui-cell__bd">数量</view>
+                <view class="weui-cell__ft">
+                    <template is="xnumber" data="{{ ...$wux.xnumber.num7 }}"/>
+                </view>
+            </view>
+        </view>
     </view>
 </view>
 ```
@@ -112,6 +122,10 @@ Page({
         this.$wuxXnumber.init('num6', {
             disabled: !1, 
         })
+
+        this.$wuxXnumber.init('num7', {
+            longpress: !0, 
+        })
     },
 })
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wux",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "微信小程序 - 自定义组件",
   "main": "src/app.js",
   "dependencies": {},

src/app.json

@@ -17,6 +17,7 @@
     "pages/prompt/index",
     "pages/barcode/index",
     "pages/refresher/index",
+    "pages/seats/index",
     "pages/about/index"
   ],
   "window": {

src/assets/plugins/WxValidate.js

@@ -1,5 +1,5 @@
 /**
- * 创建验证字段的工厂函数
+ * 表单验证
  * 
  * @param {Object} rules 验证字段的规则
  * @param {Object} messages 验证字段的提示信息
@@ -20,13 +20,14 @@ class WxValidate {
 	__init() {
 		this.__initMethods()
 		this.__initDefaults()
-		this.__initErrorList()
+		this.__initData()
 	}
 
 	/**
-	 * 初始化错误信息
+	 * 初始化数据
 	 */
-	__initErrorList() {
+	__initData() {
+		this.form = {}
 		this.errorList = []
 	}
 
@@ -69,7 +70,12 @@ class WxValidate {
 			required(value, param) {
 				if (!that.depend(param)) {
 					return 'dependency-mismatch'
+				} else if (typeof value === 'number') {
+					value = value.toString()
+				} else if (typeof value === 'boolean') {
+					return !0
 				}
+
 				return value.length > 0
 			},
 			/**
@@ -309,7 +315,7 @@ class WxValidate {
 		// 缓存字段对应的值
 		const data = event.detail.value
 		const value = data[param] || ''
-		
+
 		// 遍历某个指定字段的所有规则，依次验证规则，否则缓存错误信息
 		for(let method in rules) {
 
@@ -330,6 +336,8 @@ class WxValidate {
 					continue
 				}
 
+				this.setValue(param, method, result, value)
+
 				// 判断是否通过验证，否则缓存错误信息，跳出循环
 				if (!result) {
 					this.formatTplAndAdd(param, rule, value)
@@ -339,14 +347,46 @@ class WxValidate {
 		}
 	}
 
+	/**
+	 * 设置字段的默认验证值
+	 * @param {String} param 字段名
+	 */
+	setView(param) {
+		this.form[param] = {
+			$name: param, 
+			$valid: true, 
+			$invalid: false, 
+			$error: {}, 
+			$success: {}, 
+			$viewValue: ``, 
+		}
+	}
+
+	/**
+	 * 设置字段的验证值
+	 * @param {String} param 字段名
+	 * @param {String} method 字段的方法
+	 * @param {Boolean} result 是否通过验证
+	 * @param {String} value 字段的值
+	 */
+	setValue(param, method, result, value) {
+		const params = this.form[param]
+		params.$valid = result
+		params.$invalid = !result
+		params.$error[method] = !result
+		params.$success[method] = result
+		params.$viewValue = value
+	}
+
 	/**
 	 * 验证所有字段的规则，返回验证是否通过
 	 * @param {Object} event 表单数据对象
 	 */
 	checkForm(event) {
-		this.errorList = []
+		this.__initData()
 
 		for (let param in this.rules) {
+			this.setView(param)
 			this.checkParam(param, this.rules[param], event)
 		}
 

src/components/dialog/dialog.js

@@ -9,6 +9,7 @@ export default {
 			title: undefined, 
 			content: undefined, 
 			buttons: [], 
+			verticalButtons: !1, 
 		}
 	},
 	/**
@@ -29,9 +30,11 @@ export default {
 	 * @param {Object} opts 配置项
 	 * @param {String} opts.title 提示标题
 	 * @param {String} opts.content 提示文本
+	 * @param {Boolean} opts.verticalButtons 是否显示垂直按钮布局
 	 * @param {Array} opts.buttons 按钮
 	 * @param {String} opts.buttons.text 按钮的文字
 	 * @param {String} opts.buttons.type 按钮的类型
+	 * @param {Boolean} opts.buttons.bold 是否加粗按钮的文字
 	 * @param {Function} opts.buttons.onTap 按钮的点击事件
 	 */
 	open(opts = {}) {

src/components/dialog/dialog.wxml

@@ -8,8 +8,10 @@
             <view class="weui-dialog__content">{{ content }}</view>
             <input wx:if="{{ prompt }}" type="{{ prompt.fieldtype }}" class="weui-input weui-prompt-input" value="{{ prompt.response }}" password="{{ prompt.password }}" placeholder="{{ prompt.placeholder }}" maxlength="{{ maxlength }}" bindinput="{{ bindinput }}" />
         </view>
-        <view class="weui-dialog__ft" wx:if="{{ buttons.length }}">
-            <view class="weui-dialog__btn weui-dialog__btn_default {{ item.type }}" wx:for="{{ buttons }}" wx:key="" data-index="{{ index }}" bindtap="{{ buttonTapped }}">{{ item.text }}</view>
+        <view class="weui-dialog__ft {{ verticalButtons ? 'weui-dialog__btns_vertical' : '' }}" wx:if="{{ buttons.length }}">
+            <block wx:for="{{ buttons }}" wx:key="">
+                <view class="weui-dialog__btn weui-dialog__btn_default {{ item.type }} {{ item.bold ? 'weui-dialog__btn_bold' : '' }}" data-index="{{ index }}" bindtap="{{ buttonTapped }}">{{ item.text }}</view>
+            </block>
         </view>
     </view>
 </template>