增加折叠组件

src/base/card.wc

@@ -12,16 +12,6 @@
   border-radius: 3px;
 }
 
-.header {
-  display: none;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--color-plain-2);
-  font-size: 16px;
-
-  &.show {
-    display: block;
-  }
-}
 .card {
   display: flex;
   flex-direction: column;
@@ -34,6 +24,17 @@
   transition: box-shadow 0.3s ease-in-out;
 }
 
+.header {
+  display: none;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-plain-2);
+  font-size: 16px;
+
+  &.show {
+    display: block;
+  }
+}
+
 :host([shadow='hover']) {
   .card {
     box-shadow: none;

src/base/collapse-item.wc

@@ -0,0 +1,127 @@
+<template>
+  <div class="collapse">
+    <header class="header">
+      <span class="title"><slot name="title"/></span>
+      <wc-icon is="right"></wc-icon>
+    </header>
+    <main class="wrapper">
+      <div class="content"><slot /></div>
+    </main>
+  </div>
+</template>
+
+<style lang="scss">
+:host {
+  overflow: hidden;
+  display: flex;
+  width: 100%;
+  border-bottom: 1px solid var(--color-plain-2);
+}
+
+.collapse {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-size: 14px;
+  background: #fff;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  color: var(--color-dark-2);
+  cursor: pointer;
+
+  wc-icon {
+    --size: 12px;
+    margin-right: 8px;
+    color: var(--color-grey-3);
+    transition: transform 0.3s;
+  }
+
+  &.expanded {
+    wc-icon {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.wrapper {
+  overflow: hidden;
+  height: 0px;
+  will-change: height;
+  transition: height 0.3s ease-in-out;
+}
+</style>
+
+<script>
+import $ from '../utils'
+import '../icon/index'
+
+export default class Collapse {
+  props = {
+    title: ''
+  }
+
+  state = {
+    expanded: false
+  }
+
+  __init__() {
+    /* render */
+
+    var elem = this.root.children[1]
+    this.__HEADER__ = elem.children[0]
+    this.__WRAPPER__ = elem.children[1]
+    this.__CONTENT__ = this.__WRAPPER__.firstElementChild
+    this.__TITLE__ = this.__HEADER__.firstElementChild
+  }
+
+  _toggle() {
+    this.state.expanded = !this.state.expanded
+    this._updateStyle()
+
+    if (this._isInGroup) {
+      this.parentNode.dispatchEvent(
+        new CustomEvent('child-expanded', {
+          detail: { expanded: this.state.expanded, item: this }
+        })
+      )
+    }
+  }
+
+  _updateStyle() {
+    var { expanded } = this.state
+    this.__HEADER__.classList.toggle('expanded', expanded)
+    this.__WRAPPER__.style.cssText = `height:${expanded ? this.__CONTENT__.clientHeight : 0}px;`
+  }
+
+  get expanded() {
+    return this.state.expanded
+  }
+
+  set expanded(val) {
+    this.state.expanded = !!val
+    this._updateStyle()
+  }
+
+  mounted() {
+    this._isInGroup = this.parentNode.tagName === 'WC-COLLAPSE-GROUP'
+
+    this._handlClick = $.bind(this.__HEADER__, 'click', ev => {
+      ev.stopPropagation()
+      this._toggle()
+    })
+  }
+
+  watch() {
+    switch (name) {
+      case 'title':
+        this.__TITLE__.textContent = val
+        break
+    }
+  }
+}
+</script>

src/base/collapse.wc

@@ -0,0 +1,58 @@
+<template>
+  <slot />
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-top: 1px solid var(--color-plain-2);
+  border-bottom: 1px solid var(--color-plain-2);
+}
+
+::slotted(wc-collapse:last-child) {
+  border-bottom: 0;
+}
+</style>
+
+<script>
+import $ from '../utils'
+import './collapse-item'
+
+export default class CollapseGroup {
+  props = {
+    multi: false
+  }
+
+  __init__() {
+    /* render */
+  }
+
+  get multi() {
+    return this.props.multi
+  }
+
+  set multi(val) {
+    this.props.multi = !!val
+  }
+
+  mounted() {
+    this._pickedFn = $.bind(this, 'child-expanded', ev => {
+      if (this.multi === false && ev.detail.expanded) {
+        Array.from(this.children).forEach(it => {
+          it.expanded = it === ev.detail.item ? true : false
+        })
+      }
+    })
+  }
+
+  watch() {
+    switch (name) {
+      case 'multi':
+        this.multi = true
+        break
+    }
+  }
+}
+</script>

src/base/index.js

@@ -0,0 +1,3 @@
+import './row'
+import './card'
+import './collapse'

src/index.js

@@ -1,7 +1,6 @@
 import './avatar/index'
 import './badge/index'
-import './base/row'
-import './base/card'
+import './base/index'
 import './code/index'
 import './color/index'
 import './drag/index'