add collapse component

examples/app.json

@@ -34,7 +34,8 @@
     "pages/swipeout/index",
     "pages/count-down/index",
     "pages/divider/index",
-    "pages/index-list/index"
+    "pages/index-list/index",
+    "pages/collapse/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#FAFAFA",

examples/pages/collapse/index.js

@@ -0,0 +1,6 @@
+Page({
+  data: {
+    name: 'name1'
+  }
+});
+

examples/pages/collapse/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "折叠面板",
+  "usingComponents": {
+    "i-collapse": "../../dist/collapse/index",
+    "i-collapse-item": "../../dist/collapse-item/index"
+  }
+}

examples/pages/collapse/index.wxml

@@ -0,0 +1,74 @@
+<view class="caption-wrap">
+  <text class="caption-title">折叠面板</text>
+  <i-collapse name="{{name}}" >
+    <i-collapse-item title="史蒂夫·乔布斯" name="name1">
+      <view slot="content">
+        史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
+      </view>
+    </i-collapse-item>
+    <i-collapse-item title="斯蒂夫·盖瑞·沃兹尼亚克" name="name2">
+      <view slot="content" i-class-content="green-text">
+        斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
+      </view>
+    </i-collapse-item>
+    <i-collapse-item title="乔纳森·伊夫" name="name3">
+      <view slot="content">
+        乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
+      </view>
+    </i-collapse-item>
+  </i-collapse>
+</view>
+
+<view class="caption-wrap">
+  <text class="caption-title">折叠面板 - 手风琴模式</text>
+  <i-collapse name="{{name}}" accordion>
+    <i-collapse-item title="史蒂夫·乔布斯" name="name1">
+      <view slot="content">
+        史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
+      </view>
+    </i-collapse-item>
+    <i-collapse-item title="斯蒂夫·盖瑞·沃兹尼亚克" name="name2">
+      <view slot="content">
+        斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
+      </view>
+    </i-collapse-item>
+    <i-collapse-item title="乔纳森·伊夫" name="name3">
+      <view slot="content">
+       乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
+      </view>
+    </i-collapse-item>
+  </i-collapse>
+</view>
+
+<view class="caption-wrap">
+  <text class="caption-title">修改样式</text>
+  <i-collapse name="{{name}}" accordion>
+    <i-collapse-item 
+      name="name1" 
+      title="史蒂夫·乔布斯" 
+      i-class-title="collapse-item-title" 
+      i-class-content="collapse-item-content">
+      <view slot="content">
+        史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
+      </view>
+    </i-collapse-item>
+    <i-collapse-item 
+      name="name2" 
+      title="斯蒂夫·盖瑞·沃兹尼亚克" 
+      i-class-title="collapse-item-title" 
+      i-class-content="collapse-item-content">
+      <view slot="content" i-class-content="green-text">
+        斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
+      </view>
+    </i-collapse-item>
+    <i-collapse-item 
+      name="name3" 
+      title="乔纳森·伊夫" 
+      i-class-title="collapse-item-title" 
+      i-class-content="collapse-item-content">
+      <view slot="content">
+        乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
+      </view>
+    </i-collapse-item>
+  </i-collapse>
+</view>

examples/pages/collapse/index.wxss

@@ -0,0 +1,22 @@
+
+.caption-wrap{
+  margin-bottom: 30px;
+}
+
+.caption-title{
+  font-weight: bold;
+  padding:20px 10px;
+}
+
+.collapse-item-title{
+  font-size: 12px;
+  color: #737373;
+  font-weight: bold;
+}
+
+.collapse-item-content{
+  font-size: 14px;
+  color: #444444;
+}
+
+

examples/pages/index/index.wxml

@@ -47,6 +47,7 @@
         <i-cell title="Avatar 头像" is-link url="/pages/avatar/index"></i-cell>
         <i-cell title="countDown 倒计时" is-link url="/pages/count-down/index"></i-cell>
         <i-cell title="Divider 分隔符" is-link url="/pages/divider/index"></i-cell>
+        <i-cell title="Collapse 折叠面板" is-link url="/pages/collapse/index"></i-cell>
     </i-cell-group>
 </i-panel>
 <i-panel title="表单">

src/collapse-item/index.js

@@ -0,0 +1,41 @@
+Component({
+  relations: {
+    '../collapse/index': {
+      type: 'parent', 
+      linked: function(target) {
+        const options = {
+          accordion: target.data.accordion
+        }
+        if (target.data.name === this.data.name) {
+          options.showContent = 'show-content';
+        }
+        this.setData(options);
+      }
+    }
+  },
+  externalClasses: ['i-class-content','i-class-title'],
+  options: {
+    multipleSlots: true 
+  },
+  properties: {
+    title: String,
+    name: String
+  },
+  data: {
+    showContent: '',
+    accordion: false
+  },
+  methods: {
+    trigger(e) {
+      const data = this.data;
+      if (data.accordion) {
+        this.triggerEvent('collapse', {name: data.name}, {composed: true, bubbles: true});
+      } else {
+        this.setData({
+          showContent: data.showContent ? '' : 'show-content' 
+        });
+      }
+    },
+  }
+});
+

src/collapse-item/index.json

@@ -0,0 +1,7 @@
+
+{
+  "component": true,
+  "usingComponents": {
+    "i-icon": "../icon/index"
+  }
+}

src/collapse-item/index.less

@@ -0,0 +1,24 @@
+
+.collapse-item{
+  padding: 2px 8px;
+  border-top: 1px solid #ccc;
+}
+
+.title-wrap{
+  padding: 2px 0 0px
+}
+
+.item-title{
+  vertical-align: middle;
+}
+
+
+.item-content {
+  padding: 6px;
+  display: none;
+}
+
+.show-content{
+  display: block;
+}
+

src/collapse-item/index.wxml

@@ -0,0 +1,9 @@
+<view id="{{name}}" class="collapse-item ">
+  <view class="title-wrap" bindtap="trigger">
+    <i-icon size="16" type="return" />
+    <text class="item-title i-class-title">{{title}}</text>
+  </view>
+  <view class="item-content {{showContent}}  i-class-content">
+    <slot name="content" ></slot>
+  </view>
+</view>

src/collapse/index.js

@@ -0,0 +1,29 @@
+Component({
+  relations: {
+    '../collapse-item/index': {
+      type: 'child'
+    }
+  },
+  properties: {
+    name: String,
+    accordion: Boolean
+  },
+  methods: {
+    clickfn(e) {
+      const params = e.detail;
+      const allList = this.getRelationNodes('../collapse-item/index');
+      allList.forEach((item) => {
+        if (params.name === item.data.name) {
+          item.setData({
+            showContent: 'show-content'
+          });
+        } else {
+          item.setData({
+            showContent: ''
+          });
+        }
+      });
+    },
+  }
+});
+

src/collapse/index.json

@@ -0,0 +1,4 @@
+
+{
+  "component": true
+}

src/collapse/index.less

@@ -0,0 +1 @@
+

src/collapse/index.wxml

@@ -0,0 +1,4 @@
+<view class="collapse-wrap" bindcollapse="clickfn">
+  <slot></slot>
+</view>
+