├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    ├── Collapse.vue
    ├── Item.vue
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Fangdun Cai <cfddream@gmail.com> (fundon.me)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Collapse
 2 | 
 3 | Collapse component for Vue Bulma.
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```
 9 | $ npm install vue-bulma-collapse --save
10 | ```
11 | 
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <collapse accordion is-fullwidth>
18 |     <collapse-item title="Components">
19 |       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
20 |     </collapse-item>
21 |     <collapse-item title="Elements">
22 |       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
23 |     </collapse-item>
24 |       <collapse-item title="Nests" selected>
25 |       <collapse>
26 |         <collapse-item title="Nest Child" selected>
27 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
28 |         </collapse-item>
29 |       </collapse>
30 |     </collapse-item>
31 |   </collapse>
32 | </template>
33 | 
34 | <script>
35 | import { Collapse, Item as CollapseItem } from 'vue-bulma-collapse'
36 | 
37 | export default {
38 |   components: {
39 |     Collapse,
40 |     CollapseItem
41 |   }
42 | }
43 | </script>
44 | ```
45 | 
46 | 
47 | ## Badges
48 | 
49 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
50 | ![](https://img.shields.io/badge/status-stable-green.svg)
51 | 
52 | ---
53 | 
54 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
55 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
56 | > Twitter [@_fundon](https://twitter.com/_fundon)
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-collapse",
 3 |   "version": "1.0.3",
 4 |   "description": "Collapse component for Vue Bulma",
 5 |   "repository": "vue-bulma/collapse",
 6 |   "license": "MIT",
 7 |   "author": {
 8 |     "name": "Fangdun Cai",
 9 |     "email": "cfddream@gmail.com",
10 |     "url": "fundon.me"
11 |   },
12 |   "keywords": [
13 |     "vue",
14 |     "bulma",
15 |     "vue-bulma",
16 |     "vue-bulma-component",
17 |     "vue-bulma-collapse",
18 |     "collapse"
19 |   ],
20 |   "main": "src/index.js",
21 |   "peerDependencies": {
22 |     "bulma": ">=0.2",
23 |     "vue": ">=2"
24 |   },
25 |   "dependencies": {
26 |     "animejs": "1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/Collapse.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="collapse is-fullwidth">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     isFullwidth: Boolean,
11 |     accordion: Boolean
12 |   },
13 | 
14 |   computed: {
15 |     $collapseItems () {
16 |       return this.$children.filter(child => child._isCollapseItem)
17 |     }
18 |   },
19 | 
20 |   methods: {
21 |     openByIndex (index) {
22 |       if (this.accordion) {
23 |         this.$collapseItems.forEach((item, i) => {
24 |           if (i !== index) {
25 |             item.isActived = false
26 |           }
27 |         })
28 |       }
29 |     }
30 |   }
31 | 
32 | }
33 | </script>
34 | 
35 | <style>
36 | .collapse.is-fullwidth {
37 |   width: 100%;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/Item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="card collapse-item" :class="{ 'is-fullwidth': $parent.isFullwidth, 'is-active': isActived }">
  3 |     <header class="card-header touchable" role="tab" :aria-expanded="selected ? 'true' : 'fase'" @click="toggle">
  4 |       <h3 class="card-header-title">{{ title }}</h3>
  5 |       <span class="card-header-icon">
  6 |         <i class="fa fa-angle-right"></i>
  7 |       </span>
  8 |     </header>
  9 |     <transition
 10 |       name="collapsed-fade"
 11 |       :css="false"
 12 |       appear
 13 |       @before-appear="before"
 14 |       @appear="enter"
 15 |       @appear-cancel="cancel"
 16 |       @before-enter="before"
 17 |       @enter="enter"
 18 |       @enter-cancel="cancel"
 19 |       @leave="leave"
 20 |       @leave-cancel="cancel"
 21 |     >
 22 |     <div class="card-content" v-show="isActived">
 23 |       <div class="card-content-box">
 24 |         <slot></slot>
 25 |       </div>
 26 |     </div>
 27 |   </transition>
 28 | </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import anime from 'animejs'
 33 | 
 34 | export default {
 35 |   props: {
 36 |     selected: Boolean,
 37 |     title: {
 38 |       type: String,
 39 |       required: true
 40 |     }
 41 |   },
 42 | 
 43 |   data () {
 44 |     return {
 45 |       isActived: this.selected
 46 |     }
 47 |   },
 48 | 
 49 |   created () {
 50 |     this._isCollapseItem = true
 51 |   },
 52 | 
 53 |   mounted () {
 54 |     this.$on('open', this.$parent.openByIndex)
 55 |     if (this.isActived) {
 56 |       this.$emit('open', this.index)
 57 |     }
 58 |   },
 59 | 
 60 |   beforeDestroy () {
 61 |     if (this.anime && this.targets) {
 62 |       anime.remove(this.targets)
 63 |     }
 64 |     this.$off('open', this.$parent.openByIndex)
 65 |   },
 66 | 
 67 |   computed: {
 68 |     index () {
 69 |       return this.$parent.$collapseItems.indexOf(this)
 70 |     }
 71 |   },
 72 | 
 73 |   methods: {
 74 |     toggle () {
 75 |       if ((this.isActived = !this.isActived)) {
 76 |         this.$emit('open', this.index)
 77 |       }
 78 |     },
 79 | 
 80 |     getAnime (targets) {
 81 |       if (this.anime) return this.anime
 82 |       return this.anime = anime({ targets })
 83 |     },
 84 | 
 85 |     cancel () {
 86 |       this.anime.pause()
 87 |     },
 88 | 
 89 |     before (targets) {
 90 |       if (!this.targets) this.targets = targets
 91 |       targets.removeAttribute('style')
 92 |     },
 93 | 
 94 |     enter (targets, done) {
 95 |       const height = targets.scrollHeight
 96 |       targets.style.height = 0
 97 |       targets.style.opacity = 0
 98 |       this.getAnime(targets).play({
 99 |         targets,
100 |         duration: 377,
101 |         easing: 'easeOutExpo',
102 |         opacity: [0, 1],
103 |         height,
104 |         complete () {
105 |           targets.removeAttribute('style')
106 |           done()
107 |         }
108 |       })
109 |     },
110 | 
111 |     leave (targets, complete) {
112 |       this.getAnime(targets).play({
113 |         targets,
114 |         duration: 377,
115 |         easing: 'easeOutExpo',
116 |         opacity: [1, 0],
117 |         height: 0,
118 |         complete
119 |       })
120 |     }
121 |   }
122 | }
123 | </script>
124 | 
125 | <style lang="scss">
126 | .collapse-item {
127 |   .card-header {
128 |     cursor: pointer;
129 |   }
130 |   .card-header-icon {
131 |     transition: transform .377s ease;
132 |   }
133 |   .card-content {
134 |     padding-top: 0;
135 |     padding-bottom: 0;
136 |     overflow: hidden;
137 |   }
138 |   .card-content-box {
139 |     padding-top: 20px;
140 |     padding-bottom: 20px;
141 |   }
142 | 
143 |   &.is-active {
144 |     > .card-header {
145 |       > .card-header-icon {
146 |         transform: rotate(90deg);
147 |       }
148 |     }
149 |   }
150 | }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | exports.Collapse = require('./Collapse')
2 | exports.Item = require('./Item')
3 | 


--------------------------------------------------------------------------------