feat: add CCollapse component

Author: woothu

src/components/Collapse/CCollapse.js

@@ -0,0 +1,82 @@
+export const props = {
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  duration: {
+    type: Number,
+    default: 400
+  },
+  transition: {
+    type: String,
+    default: 'ease-in-out'
+  },
+  show: Boolean,
+  navbar: Boolean
+}
+
+export default {
+  name: 'CCollapse',
+  props,
+  data () {
+    return {
+      collapsing: false,
+      heightWatcher: null
+    }
+  },
+  watch: {
+    show (val) {
+      if(this.collapsing){
+        this.turn()
+        const height = Number(this.collapsing.slice(0,-2))
+        const current = this.$el.offsetHeight
+        const time =  val ?  (height - current) / height :  current / height
+        this.setFinishTimer(this.duration * time)
+      }else{
+        val ? this.toggle(true) : this.toggle(false)
+        this.setFinishTimer(this.duration)
+      }
+    },
+  },
+  mounted () {
+    this.$el.style.display = this.show ?  '' : 'none'
+  },
+  methods: {
+    turn () {
+      if(this.show)
+        this.$el.style.height = this.collapsing
+      else
+        this.$el.style.height = 0
+    },
+    toggle (val) {
+      this.$el.style.display = ''
+      this.collapsing = this.$el.scrollHeight + 'px'
+      this.$el.style.height = val ? 0 : this.$el.scrollHeight + 'px'
+      this.$el.style.overflow = 'hidden'
+      this.$el.style.transition = `all ${this.duration}ms ${this.transition}`
+      const self = this
+      setTimeout(() => { self.$el.style.height = val ? this.collapsing : 0 }, 0)
+    },
+    setFinishTimer (duration) {
+      clearTimeout(this.heightWatcher)
+      const self = this
+      this.heightWatcher = setTimeout(() => {
+        self.collapsing = false
+        self.$el.style.display = self.show ? '' : 'none'
+        self.$el.style.height = ''
+        self.$el.style.overflow = ''
+        self.$el.style.transition = ''
+        this.$emit('finish', self.show)
+      }, duration)
+    }
+  },
+  render (h) {
+    return h(
+      this.tag,
+      {
+        class: { 'navbar-collapse': this.navbar }
+      },
+      [ this.$slots.default ]
+    )
+  }
+}

src/components/Collapse/index.js

@@ -0,0 +1,5 @@
+import CCollapse from './CCollapse'
+
+export {
+  CCollapse
+}

src/components/index.js

@@ -20,3 +20,4 @@ export * from './Pagination'
 export * from './Tooltip'
 export * from './Table'
 export * from './Form'
+export * from './Collapse'