[new feature] add Collapse component (#674)

packages/address-edit/Detail.vue

@@ -11,8 +11,8 @@
       :error="isError"
       :on-icon-click="onIconClick"
       @input="$emit('input', $event)"
-      @focus="handleFocus"
-      @blur="handleBlur"
+      @focus="onFocus"
+      @blur="onBlur"
     >
       <div slot="icon">
         <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">{{ $t('complete') }}</span>
@@ -79,13 +79,13 @@ export default create({
   },
 
   methods: {
-    handleFocus(e) {
+    onFocus(e) {
       this.isFocused = true;
       this.$emit('focus', e);
       this.$refs.root.scrollIntoView();
     },
 
-    handleBlur(e) {
+    onBlur(e) {
       // wait for click event finished
       setTimeout(() => {
         this.isFocused = false;

packages/collapse-item/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="van-collapse-item"
+    :class="{
+      'van-hairline--top': index,
+      'van-collapse-item--expanded': expanded
+    }"
+  >
+    <cell class="van-collapse-item__title" is-link @click="onClick">
+      <slot name="title">{{ title }}</slot>
+    </cell>
+    <div class="van-collapse-item__content" v-show="expanded">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import Cell from '../cell';
+import findParent from '../mixins/find-parent';
+import { create, isDef } from '../utils';
+
+export default create({
+  name: 'van-collapse-item',
+
+  mixins: [findParent],
+
+  components: {
+    Cell
+  },
+
+  props: {
+    name: [String, Number],
+    title: String
+  },
+
+  computed: {
+    items() {
+      return this.parentGroup.items;
+    },
+
+    index() {
+      return this.items.indexOf(this);
+    },
+
+    currentName() {
+      return isDef(this.name) ? this.name : this.index;
+    },
+
+    expanded() {
+      const { activeNames } = this.parentGroup;
+      return this.parentGroup.accordion
+        ? activeNames === this.currentName
+        : activeNames.some(name => name === this.currentName);
+    }
+  },
+
+  created() {
+    this.findParentByName('van-collapse');
+    this.items.push(this);
+  },
+
+  destroyed() {
+    this.items.splice(this.index, 1);
+  },
+
+  methods: {
+    onClick() {
+      const { parentGroup } = this;
+      const name = parentGroup.accordion && this.currentName === parentGroup.activeNames ? '' : this.currentName;
+      this.parentGroup.switch(name, !this.expanded);
+    }
+  }
+});
+</script>

packages/collapse/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="van-collapse van-hairline--top-bottom">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { create } from '../utils';
+
+export default create({
+  name: 'van-collapse',
+
+  model: {
+    prop: 'activeNames'
+  },
+
+  props: {
+    accordion: Boolean,
+    activeNames: [String, Number, Array]
+  },
+
+  data() {
+    return {
+      items: []
+    };
+  },
+
+  methods: {
+    switch(name, expanded) {
+      const { activeNames } = this;
+      if (!this.accordion) {
+        name = expanded
+          ? activeNames.concat(name)
+          : activeNames.filter(activeName => activeName !== name);
+      }
+      this.$emit('change', name);
+      this.$emit('input', name);
+    }
+  }
+});
+</script>

packages/index.js

@@ -14,6 +14,8 @@ import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
 import Circle from './circle';
 import Col from './col';
+import Collapse from './collapse';
+import CollapseItem from './collapse-item';
 import ContactCard from './contact-card';
 import ContactEdit from './contact-edit';
 import ContactList from './contact-list';
@@ -80,6 +82,8 @@ const components = [
   CheckboxGroup,
   Circle,
   Col,
+  Collapse,
+  CollapseItem,
   ContactCard,
   ContactEdit,
   ContactList,
@@ -153,6 +157,8 @@ export {
   CheckboxGroup,
   Circle,
   Col,
+  Collapse,
+  CollapseItem,
   ContactCard,
   ContactEdit,
   ContactList,

packages/vant-css/src/collapse.css

@@ -0,0 +1,31 @@
+@import './common/var.css';
+
+.van-collapse-item {
+  &__title {
+    .van-cell__right-icon::before {
+      transition: .3s;
+      transform: rotate(90deg);
+    }
+
+    &::after {
+      visibility: hidden;
+    }
+  }
+
+  &__content {
+    padding: 15px;
+    background-color: #fff;
+  }
+
+  &--expanded {
+    .van-collapse-item__title {
+      .van-cell__right-icon::before {
+        transform: rotate(-90deg);
+      }
+
+      &::after {
+        visibility: visible;
+      }
+    }
+  }
+}

packages/vant-css/src/index.css

@@ -13,6 +13,7 @@
 @import './button.css';
 @import './cell.css';
 @import './circle.css';
+@import './collapse.css';
 @import './loading.css';
 @import './nav-bar.css';
 @import './notice-bar.css';