[build] 2.4.0

dist/dialog/index.js

@@ -0,0 +1,112 @@
+const _f = function () {};
+
+module.exports = {
+  showZanDialog(options = {}) {
+    const {
+      // 自定义 btn 列表
+      // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
+      buttons = [],
+      // 标题
+      title = '',
+      // 内容
+      content = ' ',
+      // 按钮是否展示为纵向
+      buttonsShowVertical = false,
+      // 是否展示确定
+      showConfirm = true,
+      // 确认按钮文案
+      confirmText = '确定',
+      // 确认按钮颜色
+      confirmColor = '#3CC51F',
+      // 是否展示取消
+      showCancel = false,
+      // 取消按钮文案
+      cancelText = '取消',
+      // 取消按钮颜色
+      cancelColor = '#333'
+    } = options;
+
+    // 处理默认按钮的展示
+    // 纵向排布确认按钮在上方
+    let showCustomBtns = false;
+    if (buttons.length === 0) {
+      if (showConfirm) {
+        buttons.push({
+          type: 'confirm',
+          text: confirmText,
+          color: confirmColor
+        });
+      }
+
+      if (showCancel) {
+        const cancelButton = {
+          type: 'cancel',
+          text: cancelText,
+          color: cancelColor
+        };
+        if (buttonsShowVertical) {
+          buttons.push(cancelButton);
+        } else {
+          buttons.unshift(cancelButton);
+        }
+      }
+    } else {
+      showCustomBtns = true;
+    }
+
+    return new Promise((resolve, reject) => {
+      this.setData({
+        zanDialog: {
+          show: true,
+          showCustomBtns,
+          buttons,
+          title,
+          content,
+          buttonsShowVertical,
+          showConfirm,
+          confirmText,
+          confirmColor,
+          showCancel,
+          cancelText,
+          cancelColor,
+          // 回调钩子
+          resolve,
+          reject
+        }
+      });
+    });
+  },
+
+  _handleZanDialogButtonClick(e) {
+    const { currentTarget = {} } = e;
+    const { dataset = {} } = currentTarget;
+
+    // 获取当次弹出框的信息
+    const zanDialogData = this.data.zanDialog || {};
+    const { resolve = _f, reject = _f } = zanDialogData;
+
+    // 重置 zanDialog 里的内容
+    this.setData({
+      zanDialog: { show: false }
+    });
+
+    // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
+    if (zanDialogData.showCustomBtns) {
+      resolve({
+        type: dataset.type
+      });
+      return;
+    }
+
+    // 默认按钮，确认为 resolve，取消为 reject
+    if (dataset.type === 'confirm') {
+      resolve({
+        type: 'confirm'
+      });
+    } else {
+      reject({
+        type: 'cancel'
+      });
+    }
+  }
+};

dist/dialog/index.wxml

@@ -0,0 +1,22 @@
+<template name="zan-dialog">
+  <view class="zan-dialog {{ zanDialog.show ? 'zan-dialog--show' : '' }}">
+    <view class="zan-dialog--mask"></view>
+    <view class="zan-dialog--container">
+      <view
+        wx:if="{{ zanDialog.title }}"
+        class="zan-dialog__header">{{ zanDialog.title }}</view>
+      <view
+        class="zan-dialog__content {{ zanDialog.title ? 'zan-dialog__content--title' : '' }}">{{ zanDialog.content }}</view>
+      <view
+        class="zan-dialog__footer {{ zanDialog.buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon' }}">
+        <block wx:for="{{ zanDialog.buttons }}" wx:key="{{ item.text }}-{{ item.type }}">
+          <button
+            class="zan-dialog__button zan-btn"
+            data-type="{{ item.type }}"
+            catchtap="_handleZanDialogButtonClick"
+            style="color: {{ item.color || '#333' }}">{{ item.text }}</button>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>

dist/dialog/index.wxss

@@ -1 +1 @@
-.zan-dialog__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.zan-dialog__container{position:fixed;left:0;bottom:0;width:750rpx;background:#fff;transform:translateY(150%);transition:all .4s ease;z-index:11}.zan-dialog--show .zan-dialog__container{transform:translateY(0)}.zan-dialog--show .zan-dialog__mask{display:block}
+.zan-dialog--container{position:fixed;top:45%;left:50%;width:80%;height:0;font-size:16px;overflow:hidden;transition:all .2s linear;border-radius:4px;background-color:#fff;transform:translate3d(-50%,-50%,0);color:#333;opacity:0}.zan-dialog--mask{position:fixed;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,.6);transition:.3s;display:none}.zan-dialog__header{padding:15px 0 0;text-align:center}.zan-dialog__content{padding:15px 20px;line-height:1.5;min-height:40px;border-bottom:1rpx solid #e5e5e5}.zan-dialog__content--title{color:#999;font-size:14px}.zan-dialog__footer{overflow:hidden}.zan-dialog__button{line-height:50px;height:50px;padding:0 5px;border:0 none;border-radius:0;margin-bottom:0}.zan-dialog--show .zan-dialog--container{opacity:1;height:auto}.zan-dialog--show .zan-dialog--mask{display:block}.zan-dialog__footer--horizon{display:flex}.zan-dialog__footer--horizon .zan-dialog__button{flex:1;border-right:1rpx solid #e5e5e5}.zan-dialog__footer--horizon .zan-dialog__button:last-child{border-right:0 none}.zan-dialog__footer--vertical .zan-dialog__button{flex:1;border-bottom:1rpx solid #e5e5e5}.zan-dialog__footer--vertical .zan-dialog__button:last-child{border-bottom:0 none}

dist/field/index.js

@@ -1,14 +1,42 @@
+const { extractComponentId } = require('../utils/index');
+
 module.exports = {
   _handleZanFieldChange(event) {
-    const { componentId } = event.currentTarget.dataset;
+    const componentId = extractComponentId(event);
     event.componentId = componentId;
 
     console.info('[zan:field:change]', event);
 
     if (this.handleZanFieldChange) {
       return this.handleZanFieldChange(event);
-    } else {
-      console.warn('页面缺少 handleZanFieldChange 回调函数');
     }
+
+    console.warn('页面缺少 handleZanFieldChange 回调函数');
+  },
+
+  _handleZanFieldFocus(event) {
+    const componentId = extractComponentId(event);
+    event.componentId = componentId;
+
+    console.info('[zan:field:focus]', event);
+
+    if (this.handleZanFieldFocus) {
+      return this.handleZanFieldFocus(event);
+    }
+
+    console.warn('页面缺少 handleZanFieldFocus 回调函数');
+  },
+
+  _handleZanFieldBlur(event) {
+    const componentId = extractComponentId(event);
+    event.componentId = componentId;
+
+    console.info('[zan:field:blur]', event);
+
+    if (this.handleZanFieldBlur) {
+      return this.handleZanFieldBlur(event);
+    }
+
+    console.warn('页面缺少 handleZanFieldBlur 回调函数');
   }
 };

dist/field/index.wxml

@@ -6,20 +6,26 @@
     <textarea
       wx:if="{{ type === 'textarea' }}"
       auto-height
+      name="{{ name || componentId || '' }}"
       value="{{ value }}"
       placeholder="{{ placeholder }}"
       class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
       placeholder-class="zan-field__placeholder"
       bindinput="_handleZanFieldChange"
-      data-component-id="{{ componentId }}"></textarea>
+      bindfocus="_handleZanFieldFocus"
+      bindblur="_handleZanFieldBlur"
+      data-component-id="{{ componentId || '' }}"></textarea>
     <input
       wx:else
       type="{{ inputType || 'text' }}"
+      name="{{ name || componentId || '' }}"
       value="{{ value }}"
       placeholder="{{ placeholder }}"
       class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
       placeholder-class="zan-field__placeholder"
       bindinput="_handleZanFieldChange"
-      data-component-id="{{ componentId }}"/>
+      bindfocus="_handleZanFieldFocus"
+      bindblur="_handleZanFieldBlur"
+      data-component-id="{{ componentId || '' }}"/>
   </view>
 </template>

dist/index.js

@@ -1,7 +1,8 @@
 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');

dist/label/index.wxss

@@ -1 +0,0 @@
-.zan-label{display:inline-block;font-size:12px;height:28px;line-height:28px;color:#333;border:1rpx solid #999;padding:0 10px;border-radius:2px;margin-right:10px;box-sizing:border-box;vertical-align:middle;text-align:center}.zan-label--primary{color:#fff;background:#f44;border:1rpx solid #f44}.zan-label--disabled{color:#cacaca;background:#eee;border:1rpx solid #e5e5e5}.zan-label--small{font-size:11px;height:16px;line-height:16px;padding:0 3px}.zan-label--plain.zan-label--primary{color:#f44;background:#fff}

dist/popup/index.wxss

@@ -1 +1 @@
-.zan-popup{position:fixed;background-color:#fff;width:100%;height:100%;top:50%;left:50%;transform:translate3d(-50%,-50%,0);transition:.2s ease-out}.zan-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%;transform:translate3d(-50%,0,0)}.zan-popup--right{transform:translate3d(50%,-50%,0)}.zan-popup--left{transform:translate3d(-150%,-50%,0)}.zan-popup--show{transform:translate3d(-50%,-50%,0)}
+.zan-popup__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.zan-popup__container{position:fixed;left:50%;top:50%;background:#fff;transform:translate3d(-50%,-50%,0);transform-origin:center;transition:all .4s ease;z-index:11;opacity:0}.zan-popup--show .zan-popup__container{opacity:1}.zan-popup--show .zan-popup__mask{display:block}.zan-popup--left .zan-popup__container{left:0;top:auto;transform:translate3d(-100%,0,0)}.zan-popup--show.zan-popup--left .zan-popup__container{transform:translate3d(0,0,0)}.zan-popup--right .zan-popup__container{right:0;top:auto;left:auto;transform:translate3d(100%,0,0)}.zan-popup--show.zan-popup--right .zan-popup__container{transform:translate3d(0,0,0)}.zan-popup--bottom .zan-popup__container{top:auto;left:auto;bottom:0;transform:translate3d(0,100%,0)}.zan-popup--show.zan-popup--bottom .zan-popup__container{transform:translate3d(0,0,0)}.zan-popup--top .zan-popup__container{top:0;left:auto;transform:translate3d(0,-100%,0)}.zan-popup--show.zan-popup--top .zan-popup__container{transform:translate3d(0,0,0)}

dist/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>

dist/quantity/index.wxss

@@ -1 +0,0 @@
-.zan-quantity{color:#666}.zan-quantity view{display:inline-block;line-height:20px;padding:5px 0;text-align:center;min-width:40px;box-sizing:border-box;vertical-align:middle;font-size:12px;border:1rpx solid #999}.zan-quantity .zan-quantity__minus{border-right:none;border-radius:2px 0 0 2px}.zan-quantity .zan-quantity__text{border:1rpx solid #999;display:inline-block;text-align:center;vertical-align:middle;height:30px;width:40px;font-size:12px;line-height:30px}.zan-quantity .zan-quantity__plus{border-left:none;border-radius:0 2px 2px 0}.zan-quantity .zan-quantity--disabled{background:#f8f8f8;color:#bbb;border-color:#e8e8e8}.zan-quantity--small view{min-width:36px;line-height:18px}.zan-quantity--small .zan-quantity__text{width:36px;line-height:28px;height:28px}

dist/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) {
-  quantity = +quantity;
-  var e = { componentId, quantity };
-  console.info('[zan:quantity:change]', e);
+function callback(componentId, stepper) {
+  stepper = +stepper;
+  var e = { componentId, stepper };
+  console.info('[zan:stepper:change]', e);
 
-  if (this.handleZanQuantityChange) {
-    this.handleZanQuantityChange(e);
+  if (this.handleZanStepperChange) {
+    this.handleZanStepperChange(e);
   } else {
-    console.warn('页面缺少 handleZanQuantityChange 回调函数');
+    console.warn('页面缺少 handleZanStepperChange 回调函数');
   }
 }
 
-var Quantity = {
-  _handleZanQuantityMinus(e) {
+var Stepper = {
+  _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;

dist/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>

dist/stepper/index.wxss

@@ -0,0 +1 @@
+.zan-stepper{color:#666}.zan-stepper view{display:inline-block;line-height:20px;padding:5px 0;text-align:center;min-width:40px;box-sizing:border-box;vertical-align:middle;font-size:12px;border:1rpx solid #999}.zan-stepper .zan-stepper__minus{border-right:none;border-radius:2px 0 0 2px}.zan-stepper .zan-stepper__text{border:1rpx solid #999;display:inline-block;text-align:center;vertical-align:middle;height:30px;width:40px;min-height:auto;font-size:12px;line-height:30px}.zan-stepper .zan-stepper__plus{border-left:none;border-radius:0 2px 2px 0}.zan-stepper .zan-stepper--disabled{background:#f8f8f8;color:#bbb;border-color:#e8e8e8}.zan-stepper--small view{min-width:36px;line-height:18px}.zan-stepper--small .zan-stepper__text{width:36px;line-height:28px;height:28px}

dist/tag/index.wxss

@@ -0,0 +1 @@
+.zan-tag{display:inline-block;box-sizing:border-box;line-height:16px;padding:0 5px;border-radius:2px;font-size:11px;background:#c9c9c9;border:1rpx solid #e5e5e5;color:#fff}.zan-tag--primary{color:#fff;background-color:#4b0;border:1rpx solid #4b0}.zan-tag--primary.zan-tag--plain{color:#4b0;background:#fff}.zan-tag--danger{color:#fff;background:#f44;border:1rpx solid #f44}.zan-tag--danger.zan-tag--plain{color:#f44;background:#fff}.zan-tag--warn{color:#fff;background:#f85;border:1rpx solid #f85}.zan-tag--warn.zan-tag--plain{color:#f85;background:#fff}.zan-tag--disabled{color:#cacaca!important;background:#eee;border:1rpx solid #e5e5e5}

dist/utils/index.js

@@ -0,0 +1,10 @@
+// 从事件对象中解析得到 componentId
+// 需要在元素上声明 data-component-id
+function extractComponentId(event = {}) {
+  const { dataset: { componentId } } = event.currentTarget || {};
+  return componentId;
+}
+
+module.exports = {
+  extractComponentId
+};