├── .gitignore
├── main.js
├── src
    ├── arrow-down.svg
    └── components
    │   └── Collapse.vue
├── package.json
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const Collapse = require('./src/components/Collapse.vue')
2 | module.exports = Collapse
3 | 


--------------------------------------------------------------------------------
/src/arrow-down.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="10.031" height="5.969" viewBox="0 0 10.031 5.969">
 2 |   <defs>
 3 |     <style>
 4 |       .cls-1 {
 5 |         fill: #c5c9d0;
 6 |         fill-rule: evenodd;
 7 |       }
 8 |     </style>
 9 |   </defs>
10 |   <path id="Rounded_Rectangle_7_copy" data-name="Rounded Rectangle 7 copy" class="cls-1" d="M914.7,242.832l-3.836,3.836a1.407,1.407,0,0,1-1.732,0l-3.836-3.836a1.085,1.085,0,1,1,1.535-1.534L910,244.466l3.167-3.168A1.085,1.085,0,1,1,914.7,242.832Z" transform="translate(-905 -241)"/>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-collapse",
 3 |   "version": "1.0.3",
 4 |   "description": "A simple collapse component for vue.js",
 5 |   "main": "./main.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/cezardasilva/vue-collapse.git"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "vue-component",
13 |     "vue-collapse",
14 |     "collapse"
15 |   ],
16 |   "author": "Cezar Alexandre",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/cezardasilva/vue-collapse/issues"
20 |   },
21 |   "homepage": "https://github.com/cezardasilva/vue-collapse#readme",
22 |   "peerDependencies": {
23 |     "vue": "2.x.x"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Collapse [![npm](https://img.shields.io/npm/dt/vue-collapse.svg)]() [![npm](https://img.shields.io/npm/v/vue-collapse.svg)]() [![npm](https://img.shields.io/npm/l/vue-collapse.svg)]() [![GitHub stars](https://img.shields.io/github/stars/cezardasilva/vue-collapse.svg?style=social&label=Star)]() [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/cezaralex)
 2 | 
 3 | 
 4 | 
 5 | 
 6 | > A simple collapse component for vue.js
 7 | 
 8 | # Instalation
 9 | ```bash
10 | npm install vue-collapse --save-dev
11 | ```
12 | 
13 | # Usage
14 | ```Vue
15 | <template>
16 |     <div>
17 |         <collapse :selected="true">
18 | 			<div slot="collapse-header">
19 | 
20 | 			</div>
21 | 			<div slot="collapse-body">
22 | 
23 | 			</div>
24 | 		</collapse>
25 |     </div>
26 | </template>
27 | 
28 | <script>
29 | 
30 | import Collapse from 'vue-collapse'
31 | export default {
32 | 	name: "YourComponent",
33 | 	components: {
34 | 	    Collapse
35 | 	}
36 | }
37 | </script>
38 | ```
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Cezar Alexandre
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/Collapse.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .collapse {
  3 |   margin-bottom: 2px;
  4 | }
  5 | .collapse .collapse-header {
  6 |   padding: 20px 20px 20px 40px;
  7 |   background: #f7f7f7;
  8 |   border-radius: 3px;
  9 |   position: relative;
 10 | }
 11 | .collapse .collapse-header > div {
 12 |   display: flex;
 13 |   justify-content: space-between;
 14 |   align-items: center;
 15 | }
 16 | .collapse .collapse-header h3 {
 17 |   font-size: 0.938em;
 18 |   font-weight: bold;
 19 | }
 20 | .collapse .collapse-header::before {
 21 |   -moz-transition: all .2s;
 22 |   -o-transition: all .2s;
 23 |   -webkit-transition: all .2s;
 24 |   transition: all .2s;
 25 |   content: url('../arrow-down.svg');
 26 |   position: absolute;
 27 |   font-size: 0.4em;
 28 |   top: calc(50% - 0.4em);
 29 |   left: 20px;
 30 |   color: #c5c9d0;
 31 |   -moz-transform: rotate(-90deg);
 32 |   -o-transform: rotate(-90deg);
 33 |   -ms-transform: rotate(-90deg);
 34 |   -webkit-transform: rotate(-90deg);
 35 |   transform: rotate(-90deg);
 36 | }
 37 | .collapse.is-active .collapse-header::before {
 38 |   -moz-transform: rotate(0deg);
 39 |   -o-transform: rotate(0deg);
 40 |   -ms-transform: rotate(0deg);
 41 |   -webkit-transform: rotate(0deg);
 42 |   transform: rotate(0deg);
 43 | }
 44 | .collapse .collapse-content-box {
 45 |   -moz-transition: all .2s;
 46 |   -o-transition: all .2s;
 47 |   -webkit-transition: all .2s;
 48 |   transition: all .2s;
 49 |   padding: 30px 40px;
 50 |   border-left: 2px solid #f7f7f7;
 51 |   border-bottom: 2px solid #f7f7f7;
 52 |   border-right: 2px solid #f7f7f7;
 53 |   border-bottom-left-radius: 3px;
 54 |   border-bottom-right-radius: 3px;
 55 | }
 56 | 
 57 | </style>
 58 | 
 59 | <template>
 60 |   <div class="collapse collapse-item" :class="{ 'is-active': active }">
 61 |     <div class="collapse-header touchable" role="tab" :aria-expanded="active ? 'true' : 'false'" @click.prevent="toggle">
 62 |       <slot name="collapse-header"></slot>
 63 |     </div>
 64 |     <transition name="fade">
 65 |       <div class="collapse-content" v-if="active">
 66 |         <div class="collapse-content-box">
 67 |           <slot name="collapse-body"></slot>
 68 |         </div>
 69 |       </div>
 70 |     </transition>
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | 
 76 | export default {
 77 |   name: "Collapse",
 78 | 
 79 |   data(){
 80 |     return {
 81 |       active: false
 82 |     }
 83 |   },
 84 | 
 85 |   props: {
 86 |     selected: {
 87 |       type: Boolean,
 88 |       required: true,
 89 |       default: false
 90 |     }
 91 |   },
 92 | 
 93 |   created () {
 94 |     this._isCollapseItem = true
 95 |     this.active = this.selected
 96 |   },
 97 |   ready () {
 98 |     if (this.active) {
 99 |       this.$emit('collapse-open', this.index)
100 |     }
101 |   },
102 |   methods: {
103 |     toggle () {
104 |       this.active = !this.active
105 |       if (this.active) {
106 |         this.$emit('collapse-open', this.index)
107 |       }
108 |     }
109 |   }
110 | }
111 | </script>
112 | 


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