├── .gitignore
├── .babelrc
├── src
    ├── index.js
    ├── vue-accordion.vue
    └── vue-accordion-partial.vue
├── webpack.config.js
├── LICENSE
├── package.json
├── docs
    └── 0.0.3.md
├── README.md
└── dist
    └── vue-accordion.js


/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependency directory
2 | node_modules


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": [
3 | 		[
4 | 			"latest", {
5 | 				"es2015": { "modules": false }
6 | 			}
7 | 		]
8 | 	]
9 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import vueAccordion from './vue-accordion.vue'
2 | 
3 | // Why don't you export default?
4 | // https://github.com/webpack/webpack/issues/3560
5 | export {vueAccordion}
6 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | 
 4 | module.exports = {
 5 | 	entry: './src/index.js',
 6 | 	output: {
 7 | 		path: path.resolve(__dirname, './dist'),
 8 | 		filename: 'vue-accordion.js',
 9 | 		libraryTarget: 'umd'
10 | 	},
11 | 	module: {
12 | 		rules: [
13 | 			{
14 | 				test: /\.vue$/,
15 | 				loader: 'vue-loader'
16 | 			},
17 | 			{
18 | 				test: /\.js$/,
19 | 				loader: 'babel-loader',
20 | 				exclude: /node_modules/
21 | 			}
22 | 		]
23 | 	}
24 | };
25 | 
26 | if (process.env.NODE_ENV === 'production') {
27 | 	module.exports.plugins = (module.exports.plugins || []).concat([
28 | 		new webpack.DefinePlugin({
29 | 			'process.env': {
30 | 				NODE_ENV: '"production"'
31 | 			}
32 | 		}),
33 | 		new webpack.optimize.UglifyJsPlugin({
34 | 			sourceMap: true,
35 | 			compress: {
36 | 				warnings: false
37 | 			}
38 | 		}),
39 | 		new webpack.LoaderOptionsPlugin({
40 | 			minimize: true
41 | 		})
42 | 	])
43 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 
 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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-accordion",
 3 |   "version": "1.0.0",
 4 |   "description": "Simple accordion menu component for Vue.js",
 5 |   "main": "dist/vue-accordion.js",
 6 |   "scripts": {
 7 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
 8 |     "dev": "cross-env NODE_ENV=development webpack --watch",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/zeratulmdq/vue-accordion.git"
14 |   },
15 |   "keywords": [
16 |     "vue",
17 |     "vuejs",
18 |     "accordion",
19 |     "component"
20 |   ],
21 |   "author": "Martin Benvenuti",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/zeratulmdq/vue-accordion/issues"
25 |   },
26 |   "homepage": "https://github.com/zeratulmdq/vue-accordion#readme",
27 |   "devDependencies": {
28 |     "babel-core": "^6.24.1",
29 |     "babel-loader": "^7.0.0",
30 |     "babel-preset-latest": "^6.24.1",
31 |     "cross-env": "^4.0.0",
32 |     "css-loader": "^0.28.1",
33 |     "vue-loader": "^12.0.3",
34 |     "vue-template-compiler": "^2.3.2",
35 |     "webpack": "^2.5.1"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/vue-accordion.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div :class="accordionClass" :style="divStyles">
 3 | 		<ul>
 4 | 			<partial-accordion 
 5 | 				v-for="(item,index) in items" 
 6 | 				:item="item" 
 7 | 				:key="index"
 8 | 				:styles="styles"
 9 | 			></partial-accordion>
10 | 		</ul>
11 | 	</div>
12 | </template>
13 | <script>
14 | 	import partialAccordion from './vue-accordion-partial.vue'
15 | 
16 | 	export default {
17 | 		name: 'vue-accordion',
18 | 		props: {
19 | 			items: {
20 | 				type: Array
21 | 			},
22 | 			styles: {
23 | 				type: Object,
24 | 				default: function() {
25 | 					return {}
26 | 				}
27 | 			},
28 | 			accordionClass: {
29 | 				type: String,
30 | 				default: 'vue-accordion'
31 | 			}
32 | 		},
33 | 		computed: {
34 | 			divStyles() {
35 | 				return this.styles && this.styles.div ? this.styles.div : {};
36 | 			}
37 | 		},
38 | 		components: {
39 | 			partialAccordion
40 | 		}
41 | 	}
42 | </script>
43 | <style>
44 | 	.vue-accordion {
45 | 		width: 100%;
46 | 		overflow: hidden;
47 | 		height: 200px;
48 | 		max-width: 900px;
49 |     }
50 | 
51 |     .vue-accordion ul {
52 | 		width: 100%;
53 | 		height: 100%;
54 | 		display: table;
55 | 		table-layout: fixed;
56 | 		margin: 0;
57 | 		padding: 0;
58 |     }
59 | </style>


--------------------------------------------------------------------------------
/docs/0.0.3.md:
--------------------------------------------------------------------------------
 1 | # vue-accordion
 2 | Simple accordion menu component for Vuejs
 3 | 
 4 | You can see a live demo [here](http://zeratulmdq.github.io/vue-accordion/)
 5 | 
 6 | ## Install & usage
 7 | 
 8 | Simply install using npm (only for browserify)
 9 | 
10 | ```
11 | npm install vue-accordion
12 | ```
13 | 
14 | and require it like so
15 | 
16 | ```
17 | var Vue = require('vue')
18 | var accordion = require('vue-accordion')
19 | 
20 | var vm = new Vue({
21 | 	...
22 | 	components: {
23 | 		vueAccordion: accordion
24 | 	}
25 | 	...
26 | })
27 | ```
28 | 
29 | (you may also use the .vue files in the src folder for more flexibility)
30 | 
31 | In your HTML use simply use it like so
32 | 
33 | 	<vue-accordion :items="items"
34 | 				   :height="height" 
35 | 				   :top="top" 
36 | 				   :max-width="maxWidth">
37 | 	</vue-accordion>
38 | 
39 | ## Options
40 | 
41 | The component accepts four parameters:
42 | 
43 | ##### Height
44 | Numeric. The height of the accordion, defaults to 350.
45 | 
46 | ##### Width
47 | Numeric. The max width of the accordion, defaults to 900. The component will expand up to this param. If you set it to 0, it'll use 100% of the parent node. If you need to set a percentage width, just set this param to 0 and wrap the component in a X% width html element.
48 | 
49 | ##### Top
50 | Numeric. The top margin of the H2 element inside each panel, defaults to 50px.
51 | 
52 | ##### Items
53 | The only mandatory param. An array of objects to create the panels inside the accordeon. Each object must have this structure:
54 | 	
55 |     {
56 |     	title: 'First',
57 |         text: 'text',
58 |         url: '#',
59 |         image: '/images/one.jpg'
60 |     }
61 |    
62 | 
63 | Take into consideration the width of the accordion and the images you use. If the image is shorter, you'll see a an awful grey background.
64 | 
65 | ## TODO
66 | 
67 | Webpack / globals (help appreciated)
68 | 
69 | ## CREDITS
70 | 
71 | Most of the CSS belongs to [this guy](http://michael-ferry.com/)


--------------------------------------------------------------------------------
/src/vue-accordion-partial.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<li :style="liStyles">
  3 | 		<a :href="item.url" :style="aStyles">
  4 | 			<h2 v-text="item.title" :style="h2Styles"></h2>
  5 | 			<p v-text="item.text" :style="pStyles"></p>
  6 | 		</a>
  7 |     </li>
  8 | </template>
  9 | <script>
 10 | 	export default {
 11 | 		props: {
 12 | 			item: {
 13 | 				type: Object
 14 | 			},
 15 | 			styles: {
 16 | 				type: Object
 17 | 			}
 18 | 		},
 19 | 		computed: {
 20 | 			liStyles() {
 21 | 				const li = {
 22 | 					backgroundImage: 'url(' + this.item.image + ')'
 23 | 				};
 24 | 
 25 | 				if(this.styles && this.styles.li)
 26 | 					Object.assign(li, this.styles.li);
 27 | 
 28 | 				return li;
 29 | 			},
 30 | 			aStyles() {
 31 | 				return this.styles && this.styles.a ? this.styles.a : {};
 32 | 			},
 33 | 			h2Styles() {
 34 | 				return this.styles && this.styles.h2 ? this.styles.h2 : {};
 35 | 			},
 36 | 			pStyles() {
 37 | 				return this.styles && this.styles.p ? this.styles.p : {};
 38 | 			}
 39 | 		}
 40 | 	}
 41 | </script>
 42 | <style>
 43 | 	.vue-accordion ul li {
 44 | 		display: table-cell;
 45 | 		vertical-align: bottom;
 46 | 		position: relative;
 47 | 		width: 50%;
 48 | 		background-repeat: no-repeat;
 49 | 		background-position: center center;
 50 | 		transition: all 500ms ease;
 51 | 		height: 100%;
 52 |     }
 53 | 
 54 |     .vue-accordion ul li a {
 55 | 		display: block;
 56 | 		width: 100%;
 57 | 		position: relative;
 58 | 		z-index: 3;
 59 | 		vertical-align: bottom;
 60 | 		padding: 15px 20px;
 61 | 		box-sizing: border-box;
 62 | 		color: #fff;
 63 | 		text-decoration: none;
 64 | 		transition: all 200ms ease;
 65 | 		height: 100%;
 66 |     }
 67 | 
 68 |     .vue-accordion ul li a * {
 69 | 		opacity: 0;
 70 | 		margin: 0;
 71 | 		width: 100%;
 72 | 		text-overflow: ellipsis;
 73 | 		position: relative;
 74 | 		z-index: 5;
 75 | 		white-space: nowrap;
 76 | 		overflow: hidden;
 77 | 		-webkit-transform: translateX(-20px);
 78 | 		transform: translateX(-20px);
 79 | 		-webkit-transition: all 400ms ease;
 80 | 		transition: all 400ms ease;
 81 |     }
 82 | 
 83 |     .vue-accordion ul li a h2 {
 84 | 		text-overflow: clip;
 85 | 		font-size: 24px;
 86 | 		text-transform: uppercase;
 87 | 		margin-bottom: 2px;
 88 |     }
 89 | 
 90 |     .vue-accordion ul li a p {
 91 | 		font-size: 13.5px;
 92 |     }
 93 | 
 94 |     .vue-accordion ul:hover li { width: 15%; }
 95 | 
 96 |     .vue-accordion ul:hover li:hover { width: 60%; }
 97 | 
 98 |     .vue-accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }
 99 | 
100 |     .vue-accordion ul:hover li:hover a * {
101 | 		opacity: 1;
102 | 		-webkit-transform: translateX(0);
103 | 		transform: translateX(0);
104 |     }
105 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-accordion
  2 | Simple accordion menu component for Vuejs
  3 | 
  4 | [Check it out live!](http://zeratulmdq.github.io/vue-accordion/)
  5 | 
  6 | ## Note
  7 | 
  8 | The API has changed. Check [v0.0.3 documentation](/docs/0.0.3.md) if you use the old version.
  9 | 
 10 | ## Install
 11 | 
 12 | #### NPM / Yarn
 13 | 
 14 | Install the package:
 15 | 
 16 | ```
 17 | npm install vue-accordion
 18 | ```
 19 | 
 20 | Then import it in your project
 21 | 
 22 | ```js
 23 | import Vue from 'vue'
 24 | import {vueAccordion} from 'vue-accordion'
 25 | 
 26 | Vue.component('vue-accordion', vueAccordion)
 27 | ```
 28 | 
 29 | #### Browser global
 30 | 
 31 | Just include `vue` & `vue-accordion`
 32 | 
 33 | ```html
 34 | <script scr="path/to/vue.js"></script>
 35 | <script src="path/to/dist/vue-accordion.js"></script>
 36 | ```
 37 | 
 38 | If you just want to play around, [unpkg](https://unpkg.com/#/) has ready-to-use packages from NPM.
 39 | 
 40 | ```html
 41 | <script src="https://unpkg.com/vue"></script>
 42 | <script src="https://unpkg.com/vue-accordion"></script>
 43 | ```
 44 | 
 45 | Then register the component:
 46 | 
 47 | ```html
 48 | <script>
 49 |   Vue.component('vue-accordion', vueAccordion)
 50 |   
 51 |   var vm = new Vue({
 52 |     ...
 53 |   });
 54 | </script>
 55 | ```
 56 | 
 57 | ## Usage
 58 | 
 59 | Simply use it like so:
 60 | 
 61 | ```html
 62 | <vue-accordion :items="items" :accordionClass="acClass" :styles="styles"></vue-accordion>
 63 | ```
 64 | 
 65 | ## Structure
 66 | 
 67 | Once the accordion has been rendered, it'll create the following structure:
 68 | 
 69 | ````html
 70 | <div class="vue-accordion">
 71 |   <ul>
 72 |     <!-- First menu item-->
 73 |     <li>
 74 |       <a>
 75 |         <h2>...</h2>
 76 |         <p>...</p>
 77 |       </a>
 78 |     </li>
 79 |     <!-- Second menu item-->
 80 |     <li>
 81 |       <a>
 82 |         <h2>...</h2>
 83 |         <p>...</p>
 84 |       </a>
 85 |     </li>
 86 |     ...
 87 |   </ul>
 88 | </div>
 89 | ````
 90 | 
 91 | All CSS is based uppon this structure. 
 92 | 
 93 | ```css
 94 | .vue-accordion {
 95 |   ...
 96 | }
 97 | 
 98 | .vue-accordion ul {
 99 |   ...
100 | }
101 | 
102 | ...
103 | 
104 | .vue-accordion ul li a h2 {
105 |   ...
106 | }
107 | ```
108 | 
109 | If you want to modify the styling, take a look at the `accordionClass` and `styles` props.
110 | 
111 | ## Options
112 | 
113 | ##### items
114 | Mandatory. An array of objects to create the panels inside the accordion. Each object must have this structure:
115 | 
116 | ```  
117 | {
118 |   title: 'First',
119 |   text: 'text',
120 |   url: '#',
121 |   image: '/images/one.jpg'
122 | }
123 | ```
124 | 
125 | Take into consideration the width of the accordion and the images you use. If the image is shorter, you'll see a an awful grey background.
126 | 
127 | ##### accordionClass
128 | Optional. A string bounded to the class attribute of the main div. Defaults to `vue-accordion`.
129 | 
130 | ##### styles
131 | Optional. An object whose keys are other objects containing specific CSS properties to be bound to the elements created inside the accordion:
132 | 
133 | ```js
134 | {
135 |   // this will be bound to the style attribute of all `div`s inside the accordion
136 |   div: {
137 |     height: '350px'
138 |   },
139 |   // this will be bound to the style attribute of all `ul`s inside the accordion
140 |   ul: {
141 |     color: '#F00'
142 |   },
143 |   // this will be bound to the style attribute of all `li`s inside the accordion
144 |   li: {
145 |     fontSize: '15px'
146 |   },
147 |   // this will be bound to the style attribute of all `a`s inside the accordion
148 |   a: {
149 |     padding: '30px'
150 |   },
151 |   // this will be bound to the style attribute of all `h2`s inside the accordion
152 |   h2: {
153 |     marginTop: '100px'
154 |   },
155 |   // this will be bound to the style attribute of all `p`s inside the accordion
156 |   p: {
157 |     textTransform: 'uppercase'
158 |   }
159 | }
160 | ```
161 | 
162 | ## TODO
163 | 
164 | - Tests
165 | - Router-link
166 | 
167 | ## CREDITS
168 | 
169 | Most of the CSS belongs to [this guy](http://michael-ferry.com/)


--------------------------------------------------------------------------------
/dist/vue-accordion.js:
--------------------------------------------------------------------------------
1 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=6)}([function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t){e.exports=function(e,t,n,r,o){var i,s=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(i=e,s=e.default);var l="function"==typeof s?s.options:s;t&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns),r&&(l._scopeId=r);var u;if(o?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},l._ssrRegister=u):n&&(u=n),u){var c=l.functional,d=c?l.render:l.beforeCreate;c?l.render=function(e,t){return u.call(t),d(e,t)}:l.beforeCreate=d?[].concat(d,u):[u]}return{esModule:i,exports:s,options:l}}},function(e,t,n){function r(e){for(var t=0;t<e.length;t++){var n=e[t],r=c[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(i(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var s=[],o=0;o<n.parts.length;o++)s.push(i(n.parts[o]));c[n.id]={id:n.id,refs:1,parts:s}}}}function o(){var e=document.createElement("style");return e.type="text/css",d.appendChild(e),e}function i(e){var t,n,r=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(r){if(v)return h;r.parentNode.removeChild(r)}if(y){var i=p++;r=f||(f=o()),t=s.bind(null,r,i,!1),n=s.bind(null,r,i,!0)}else r=o(),t=a.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}function s(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=m(t,o);else{var i=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(i,s[t]):e.appendChild(i)}}function a(e,t){var n=t.css,r=t.media,o=t.sourceMap;if(r&&e.setAttribute("media",r),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=n(14),c={},d=l&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,v=!1,h=function(){},y="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n){v=n;var o=u(e,t);return r(o),function(t){for(var n=[],i=0;i<o.length;i++){var s=o[i],a=c[s.id];a.refs--,n.push(a)}t?(o=u(e,t),r(o)):o=[];for(var i=0;i<n.length;i++){var a=n[i];if(0===a.refs){for(var l=0;l<a.parts.length;l++)a.parts[l]();delete c[a.id]}}}};var m=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t,n){function r(e){n(13)}var o=n(1)(n(5),n(11),r,null,null);e.exports=o.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{item:{type:Object},styles:{type:Object}},computed:{liStyles:function(){var e={backgroundImage:"url("+this.item.image+")"};return this.styles&&this.styles.li&&Object.assign(e,this.styles.li),e},aStyles:function(){return this.styles&&this.styles.a?this.styles.a:{}},h2Styles:function(){return this.styles&&this.styles.h2?this.styles.h2:{}},pStyles:function(){return this.styles&&this.styles.p?this.styles.p:{}}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(9),o=n.n(r);t.default={name:"vue-accordion",props:{items:{type:Array},styles:{type:Object,default:function(){return{}}},accordionClass:{type:String,default:"vue-accordion"}},computed:{divStyles:function(){return this.styles&&this.styles.div?this.styles.div:{}}},components:{partialAccordion:o.a}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),o=n.n(r);n.d(t,"vueAccordion",function(){return o.a})},function(e,t,n){t=e.exports=n(0)(void 0),t.push([e.i,".vue-accordion ul li{display:table-cell;width:50%;background-repeat:no-repeat;background-position:50%;transition:all .5s ease}.vue-accordion ul li,.vue-accordion ul li a{vertical-align:bottom;position:relative;height:100%}.vue-accordion ul li a{display:block;width:100%;z-index:3;padding:15px 20px;box-sizing:border-box;color:#fff;text-decoration:none;transition:all .2s ease}.vue-accordion ul li a *{opacity:0;margin:0;width:100%;text-overflow:ellipsis;position:relative;z-index:5;white-space:nowrap;overflow:hidden;-webkit-transform:translateX(-20px);transform:translateX(-20px);-webkit-transition:all .4s ease;transition:all .4s ease}.vue-accordion ul li a h2{text-overflow:clip;font-size:24px;text-transform:uppercase;margin-bottom:2px}.vue-accordion ul li a p{font-size:13.5px}.vue-accordion ul:hover li{width:15%}.vue-accordion ul:hover li:hover{width:60%}.vue-accordion ul:hover li:hover a{background:rgba(0,0,0,.4)}.vue-accordion ul:hover li:hover a *{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}",""])},function(e,t,n){t=e.exports=n(0)(void 0),t.push([e.i,".vue-accordion{width:100%;overflow:hidden;height:200px;max-width:900px}.vue-accordion ul{width:100%;height:100%;display:table;table-layout:fixed;margin:0;padding:0}",""])},function(e,t,n){function r(e){n(12)}var o=n(1)(n(4),n(10),r,null,null);e.exports=o.exports},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("li",{style:e.liStyles},[n("a",{style:e.aStyles,attrs:{href:e.item.url}},[n("h2",{style:e.h2Styles,domProps:{textContent:e._s(e.item.title)}}),e._v(" "),n("p",{style:e.pStyles,domProps:{textContent:e._s(e.item.text)}})])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.accordionClass,style:e.divStyles},[n("ul",e._l(e.items,function(t,r){return n("partial-accordion",{key:r,attrs:{item:t,styles:e.styles}})}))])},staticRenderFns:[]}},function(e,t,n){var r=n(7);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(2)("672dc477",r,!0)},function(e,t,n){var r=n(8);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(2)("76735ab6",r,!0)},function(e,t){e.exports=function(e,t){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],s=i[0],a=i[1],l=i[2],u=i[3],c={id:e+":"+o,css:a,media:l,sourceMap:u};r[s]?r[s].parts.push(c):n.push(r[s]={id:s,parts:[c]})}return n}}])});


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