From 77f8e724b52baa1310c0f875418ebd43422d911f Mon Sep 17 00:00:00 2001
From: Yao <chenyao1102@gmail.com>
Date: Thu, 26 Apr 2018 23:30:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=A2=9E=E5=8A=A0=20group=20?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/pages/btn/index.json     |  5 ++-
 example/pages/btn/index.wxml     | 64 +++++++++++++++-----------------
 example/pages/dialog/index.json  |  3 +-
 example/pages/dialog/index.wxml  | 29 +--------------
 example/pages/popup/index.json   |  3 +-
 example/pages/popup/index.wxml   |  4 +-
 example/pages/toast/index.json   |  1 +
 example/pages/toast/index.wxml   |  4 +-
 example/pages/toptips/index.wxml |  6 +--
 packages/btn-group/index.js      | 28 ++++++++++++++
 packages/btn-group/index.json    |  3 ++
 packages/btn-group/index.wxml    |  3 ++
 packages/btn-group/index.wxss    |  3 ++
 packages/btn/index.js            | 21 +++++++++++
 packages/btn/index.pcss          | 34 ++++++++++++-----
 packages/btn/index.wxml          |  2 +-
 16 files changed, 131 insertions(+), 82 deletions(-)
 create mode 100644 packages/btn-group/index.js
 create mode 100644 packages/btn-group/index.json
 create mode 100644 packages/btn-group/index.wxml
 create mode 100644 packages/btn-group/index.wxss

diff --git a/example/pages/btn/index.json b/example/pages/btn/index.json
index 30791fdc..eb9e7d48 100644
--- a/example/pages/btn/index.json
+++ b/example/pages/btn/index.json
@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "Button 按钮",
   "usingComponents": {
-    "zan-button": "/dist/btn/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }
diff --git a/example/pages/btn/index.wxml b/example/pages/btn/index.wxml
index b4e65e14..b4032d5c 100644
--- a/example/pages/btn/index.wxml
+++ b/example/pages/btn/index.wxml
@@ -1,56 +1,52 @@
-<view class="container">
+<doc-page title="BUTTON" without-padding>
 
-  <view class="doc-title zan-hairline--bottom">BUTTON</view>
-
-  <view class="zan-panel-title">普通按钮</view>
-  <view class="zan-panel">
-    <view class="zan-btns">
+  <zan-panel title="普通按钮">
+    <zan-button-group>
       <zan-button>取消订单</zan-button>
       <zan-button type="primary">确认付款</zan-button>
       <zan-button type="danger">确认付款</zan-button>
       <zan-button type="warn">确认付款</zan-button>
-    </view>
-  </view>
+    </zan-button-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
-  <view class="zan-panel">
+  <zan-panel title="大号按钮，没有边框线及圆角">
     <zan-button size="large" type="primary">确认付款</zan-button>
     <zan-button size="large" type="warn">立即购买</zan-button>
     <zan-button size="large" type="danger">立即购买</zan-button>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">小号按钮</view>
-  <view class="zan-panel" style="padding: 15px;">
-    <zan-button size="small">取消订单</zan-button>
-    <zan-button size="small" type="primary">确认付款</zan-button>
-  </view>
+  <zan-panel title="小号按钮">
+    <zan-button-group>
+      <zan-button size="small">取消订单</zan-button>
+      <zan-button size="small" type="primary">确认付款</zan-button>
+    </zan-button-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">迷你按钮</view>
-  <view class="zan-panel" style="padding: 15px;">
-    <zan-button size="mini">取消订单</zan-button>
-    <zan-button size="mini" type="primary">确认付款</zan-button>
-    <zan-button size="mini" type="warn">确认付款</zan-button>
-    <zan-button size="mini" type="danger">确认付款</zan-button>
-  </view>
+  <zan-panel title="迷你按钮">
+    <zan-button-group>
+      <zan-button size="mini">取消订单</zan-button>
+      <zan-button size="mini" type="primary">确认付款</zan-button>
+      <zan-button size="mini" type="warn">确认付款</zan-button>
+      <zan-button size="mini" type="danger">确认付款</zan-button>
+    </zan-button-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">Loading</view>
-  <view class="zan-panel">
-    <view class="zan-btns">
+  <zan-panel title="Loading">
+    <zan-button-group>
       <zan-button loading>取消订单</zan-button>
       <zan-button loading type="primary">确认付款</zan-button>
       <zan-button loading type="danger">确认付款</zan-button>
       <zan-button loading type="warn">确认付款</zan-button>
-    </view>
-  </view>
+    </zan-button-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">Disabled</view>
-  <view class="zan-panel">
-    <view class="zan-btns">
+  <zan-panel title="Disabled">
+    <zan-button-group>
       <zan-button disabled>取消订单</zan-button>
       <zan-button disabled type="primary">确认付款</zan-button>
       <zan-button disabled type="danger">确认付款</zan-button>
       <zan-button disabled type="warn">确认付款</zan-button>
-    </view>
-  </view>
+    </zan-button-group>
+  </zan-panel>
 
-</view>
+</doc-page>
diff --git a/example/pages/dialog/index.json b/example/pages/dialog/index.json
index 6df5df6c..d954d661 100644
--- a/example/pages/dialog/index.json
+++ b/example/pages/dialog/index.json
@@ -3,6 +3,7 @@
   "usingComponents": {
     "doc-page": "../../components/doc-page/index",
     "zan-dialog": "../../dist/dialog/index",
-    "zan-button": "../../dist/btn/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index"
   }  
 }
diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml
index 41a48074..1a18e75b 100644
--- a/example/pages/dialog/index.wxml
+++ b/example/pages/dialog/index.wxml
@@ -1,38 +1,13 @@
 <doc-page title="DIALOG">
-  <view class="zan-btns" style="margin-top: 30vh;">
+  <zan-button-group style="margin-top: 30vh; display: block;">
     <zan-button bindtap="toggleBaseDialog">基础 Dialog</zan-button>
     <zan-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</zan-button>
     <zan-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</zan-button>
     <zan-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</zan-button>
-  </view>
+  </zan-button-group>
 
   <zan-dialog id="zan-base-dialog"></zan-dialog>
   <zan-dialog id="zan-no-title-dialog"></zan-dialog>
   <zan-dialog id="zan-button-dialog"></zan-dialog>
   <zan-dialog id="zan-vertical-dialog"></zan-dialog>
 </doc-page>
-
-<!-- <import src="/dist/dialog/index.wxml" />
-
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">DIALOG</view>
-
-  <view class="zan-btns" style="margin-top: 30vh;">
-    <button class="zan-btn" bindtap="toggleBaseDialog">
-      基础 Dialog
-    </button>
-    <button class="zan-btn" bindtap="toggleWithoutTitleDialog">
-      Dialog - 无标题
-    </button>
-    <button class="zan-btn" bindtap="toggleButtonDialog">
-      Dialog - 自定义显示按钮
-    </button>
-    <button class="zan-btn" bindtap="toggleVerticalDialog">
-      Dialog - 按钮纵向排布
-    </button>
-  </view>
-
-</view>
-
-<template is="zan-dialog" data="{{ zanDialog }}"></template> -->
diff --git a/example/pages/popup/index.json b/example/pages/popup/index.json
index 5a6d5b1a..e2ae2c0e 100644
--- a/example/pages/popup/index.json
+++ b/example/pages/popup/index.json
@@ -3,7 +3,8 @@
   "usingComponents": {
     "doc-page": "../../components/doc-page/index",
     "zan-popup": "../../dist/popup/index",
-    "zan-button": "../../dist/btn/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index"
   }  
 }
 
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index 433dbd88..c9994d17 100644
--- a/example/pages/popup/index.wxml
+++ b/example/pages/popup/index.wxml
@@ -1,5 +1,5 @@
 <doc-page title="POPUP">
-  <view class="zan-btns" style="margin-top: 10vh;">
+  <zan-button-group style="margin-top: 10vh;display: block;">
     <zan-button class="zan-btn" bind:btnclick="togglePopup">
       弹出popup
     </zan-button>
@@ -15,7 +15,7 @@
     <zan-button class="zan-btn" bind:btnclick="toggleRightPopup">
       从右边弹出popup
     </zan-button>
-  </view>
+  </zan-button-group>
 
   <!-- 中间弹出框 -->
   <zan-popup
diff --git a/example/pages/toast/index.json b/example/pages/toast/index.json
index 4c395287..38e0d46a 100644
--- a/example/pages/toast/index.json
+++ b/example/pages/toast/index.json
@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Toast 轻提示",
   "usingComponents": {
     "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index",
     "zan-toast": "../../dist/toast/index"
   }
 }
diff --git a/example/pages/toast/index.wxml b/example/pages/toast/index.wxml
index f309f5c3..9a8edf73 100644
--- a/example/pages/toast/index.wxml
+++ b/example/pages/toast/index.wxml
@@ -4,7 +4,7 @@
 
   <view class="doc-title zan-hairline--bottom">TOAST</view>
 
-  <view class="zan-btns" style="margin-top: 15vh;">
+  <zan-button-group style="margin-top: 15vh;display: block;">
     <zan-button bind:btnclick="showToast">
       显示toast
     </zan-button>
@@ -28,7 +28,7 @@
     <zan-button bind:btnclick="showLoading">
       显示 Loading
     </zan-button>
-  </view>
+  </zan-button-group>
 </view>
 
 <!-- <template is="zan-toast" data="{{ zanToast }}"></template> -->
diff --git a/example/pages/toptips/index.wxml b/example/pages/toptips/index.wxml
index 05fa6b38..3ed074f9 100644
--- a/example/pages/toptips/index.wxml
+++ b/example/pages/toptips/index.wxml
@@ -1,17 +1,17 @@
 <doc-page title="TOPTIPS">
-  <view class="zan-btns" style="margin-top: 30vh;">
+  <view style="margin-top: 30vh;">
     <zan-button bind:btnclick="showTopTips">
       显示toptips，声明式调用
     </zan-button>
   </view>
 
-  <view class="zan-btns" style="margin-top: 30px;">
+  <view style="margin-top: 30px;">
     <zan-button bind:btnclick="showTopTips2">
       显示toptips，命令式调用
     </zan-button>
   </view>
 
-  <view class="zan-btns" style="margin-top: 30px;">
+  <view style="margin-top: 30px;">
     <zan-button bind:btnclick="showTopTips3">
       显示toptips，持续一秒
     </zan-button>
diff --git a/packages/btn-group/index.js b/packages/btn-group/index.js
new file mode 100644
index 00000000..3497ac16
--- /dev/null
+++ b/packages/btn-group/index.js
@@ -0,0 +1,28 @@
+Component({
+  relations: {
+    '../btn/index': {
+      type: 'child',
+      linked () {
+        updateBtnChild.call(this);
+      },
+      linkChange() {
+        updateBtnChild.call(this);
+      },
+      unlinked() {
+        updateBtnChild.call(this);
+      }
+    }
+  }
+});
+
+function updateBtnChild() {
+  let btns = this.getRelationNodes('../btn/index')
+    
+  if (btns.length > 0) {
+    let lastIndex = btns.length - 1
+
+    btns.forEach((btn, index) => {
+      btn.switchLastButtonStatus(index === lastIndex);
+    });
+  }
+}
diff --git a/packages/btn-group/index.json b/packages/btn-group/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/btn-group/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/packages/btn-group/index.wxml b/packages/btn-group/index.wxml
new file mode 100644
index 00000000..aa76fe4d
--- /dev/null
+++ b/packages/btn-group/index.wxml
@@ -0,0 +1,3 @@
+<view class="btn-group">
+  <slot></slot>
+</view>
diff --git a/packages/btn-group/index.wxss b/packages/btn-group/index.wxss
new file mode 100644
index 00000000..88223f09
--- /dev/null
+++ b/packages/btn-group/index.wxss
@@ -0,0 +1,3 @@
+.btn-group {
+  margin: 15px;
+}
diff --git a/packages/btn/index.js b/packages/btn/index.js
index 8795e4ee..257012e8 100644
--- a/packages/btn/index.js
+++ b/packages/btn/index.js
@@ -1,6 +1,17 @@
 
 Component({
   externalClasses: ['custom-class'],
+  relations: {
+    '../btn-group/index': {
+      type: 'parent',
+      linked() {
+        this.setData({ inGroup: true });
+      },
+      unlinked() {
+        this.setData({ inGroup: false });
+      }
+    }
+  },
   properties: {
     type: {
       type: String,
@@ -27,9 +38,19 @@ Component({
       value: ''
     }
   },
+
+  data: {
+    inGroup: false,
+    isLast: false
+  },
+
   methods: {
     handleTap() {
       this.triggerEvent('btnclick');
+    },
+
+    switchLastButtonStatus(isLast = false) {
+      this.setData({ isLast });
     }
   }
 });
\ No newline at end of file
diff --git a/packages/btn/index.pcss b/packages/btn/index.pcss
index c62145c8..9f9d0099 100644
--- a/packages/btn/index.pcss
+++ b/packages/btn/index.pcss
@@ -4,7 +4,6 @@
   position: relative;
   color: #333;
   background-color: #fff;
-  margin-bottom: 10px;
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 2px;
@@ -17,14 +16,16 @@
   vertical-align: middle;
   overflow: visible;
 }
+
+.zan-btn--group {
+  margin-bottom: 10px;
+}
+
 .zan-btn::after {
   @mixin hairline;
   border-width: 1px;
   border-radius: 4px;
 }
-.zan-btns {
-  margin: 15px;
-}
 
 /* type */
 .zan-btn--primary {
@@ -60,26 +61,36 @@
   height: 30px;
   line-height: 30px;
   font-size: 12px;
-  margin-right: 5px;
-  margin-bottom: 0;
+  /* margin-right: 5px; */
 }
+.zan-btn--small.zan-btn--group {
+  margin-bottom: 0;
+  margin-right: 5px;
+}
+
 .zan-btn--mini {
   display: inline-block;
   line-height: 21px;
   height: 22px;
   font-size: 10px;
-  margin-right: 5px;
-  margin-bottom: 0;
+  /* margin-right: 5px; */
   padding-left: 5px;
   padding-right: 5px;
 }
+.zan-btn--mini.zan-btn--group {
+  margin-bottom: 0;
+  margin-right: 5px;
+}
+
 .zan-btn--large {
   border-radius: 0;
-  margin-bottom: 0;
   border: none;
   line-height: 50px;
   height: 50px;
 }
+.zan-btn--large.zan-btn--group {
+  margin-bottom: 0;
+}
 
 /* plain */
 .zan-btn--plain.zan-btn {
@@ -151,5 +162,8 @@
 }
 
 /* :last-child */
-
+.zan-btn--group.zan-btn--last {
+  margin-bottom: 0;
+  margin-right: 0;
+}
 
diff --git a/packages/btn/index.wxml b/packages/btn/index.wxml
index ab1e53a6..6bbd1437 100644
--- a/packages/btn/index.wxml
+++ b/packages/btn/index.wxml
@@ -1,5 +1,5 @@
 <button 
-  class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  class="custom-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
   disabled="{{ disabled }}"
   open-type="{{ openType }}"
   bindtap="handleTap"