├── .gitignore ├── demo ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── main.js │ └── App.vue ├── .gitignore ├── README.md └── package.json ├── src ├── index.js └── vue-faq-accordion.vue ├── LICENSE ├── package.json ├── README.md └── dist ├── vue-faq-accordion.min.js ├── vue-faq-accordion.esm.js └── vue-faq-accordion.umd.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gerasimvol/vue-faq-accordion/HEAD/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # demo 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.4", 11 | "vue": "^2.6.11", 12 | "vue2-transitions": "^0.3.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^4.2.0", 16 | "@vue/cli-service": "^4.2.0", 17 | "node-sass": "^4.13.1", 18 | "sass-loader": "^8.0.2", 19 | "vue-template-compiler": "^2.6.11" 20 | }, 21 | "browserslist": [ 22 | "> 1%", 23 | "last 2 versions" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // Import vue component 2 | import component from './vue-faq-accordion.vue'; 3 | 4 | // install function executed by Vue.use() 5 | export function install(Vue) { 6 | if (install.installed) return; 7 | install.installed = true; 8 | Vue.component('VueFaqAccordion', component); 9 | } 10 | 11 | // Create module definition for Vue.use() 12 | const plugin = { 13 | install, 14 | }; 15 | 16 | // To auto-install when vue is found 17 | let GlobalVue = null; 18 | if (typeof window !== 'undefined') { 19 | GlobalVue = window.Vue; 20 | } else if (typeof global !== 'undefined') { 21 | GlobalVue = global.Vue; 22 | } 23 | if (GlobalVue) { 24 | GlobalVue.use(plugin); 25 | } 26 | 27 | // To allow use as module (npm/webpack/etc.) export component 28 | export default component; 29 | 30 | // It's possible to expose named exports when writing components that can 31 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo'; 32 | // export const RollupDemoDirective = component; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Vladimir Gerasimenko 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-faq-accordion", 3 | "version": "1.6.2", 4 | "description": "Simple and smooth vue accordion. Perfect for your FAQ section.", 5 | "main": "dist/vue-faq-accordion.umd.js", 6 | "module": "dist/vue-faq-accordion.esm.js", 7 | "unpkg": "dist/vue-faq-accordion.min.js", 8 | "browser": { 9 | "./sfc": "src/vue-faq-accordion.vue" 10 | }, 11 | "scripts": { 12 | "build": "npm run build:unpkg & npm run build:es & npm run build:umd", 13 | "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-faq-accordion.umd.js", 14 | "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-faq-accordion.esm.js", 15 | "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-faq-accordion.min.js" 16 | }, 17 | "dependencies": { 18 | "vue2-transitions": "^0.3.0" 19 | }, 20 | "devDependencies": { 21 | "minimist": "^1.2.0", 22 | "rollup": "^1.32.0", 23 | "rollup-plugin-buble": "^0.19.8", 24 | "rollup-plugin-uglify-es": "0.0.1", 25 | "rollup-plugin-vue": "^5.1.6", 26 | "vue": "^2.6.11", 27 | "vue-template-compiler": "^2.6.11" 28 | }, 29 | "repository": { 30 | "type": "git", 31 | "url": "git+https://github.com/gerasimvol/vue-faq-accordion.git" 32 | }, 33 | "keywords": [ 34 | "vue", 35 | "vuejs", 36 | "accordion", 37 | "faq" 38 | ], 39 | "author": "gerasim_vol", 40 | "license": "MIT", 41 | "bugs": { 42 | "url": "https://github.com/gerasimvol/vue-faq-accordion/issues" 43 | }, 44 | "homepage": "https://github.com/gerasimvol/vue-faq-accordion#readme" 45 | } 46 | -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-faq-accordion 2 | 3 | 4 | [![npm](https://img.shields.io/npm/v/vue-faq-accordion.svg)](https://www.npmjs.com/package/vue-faq-accordion) 5 | [![npm](https://img.shields.io/npm/dt/vue-faq-accordion.svg)](https://www.npmjs.com/package/vue-faq-accordion) 6 | 7 | 8 | #### 🗃 Simple and smooth vue accordion. Perfect for your FAQ section. 9 | 10 | ![FAQ Section demo](https://media.giphy.com/media/XKU7gqsiq2KRAPoHZm/giphy.gif) 11 | 12 | #### 💡 [Live demo here](https://codesandbox.io/s/vue-faq-accordion-gh6yl) 13 | 14 | ### 🛠 Install 15 | 16 | ```bash 17 | npm i vue-faq-accordion 18 | ``` 19 | ```bash 20 | yarn add vue-faq-accordion 21 | ``` 22 | 23 | ### 🚀 Usage 24 | 25 | ```vue 26 | 31 | 32 | 62 | ``` 63 | 64 | ### ⚙ Props 65 | ```js 66 | props: { 67 | 68 | /** 69 | * Array of items 70 | * Object style {questionProperty: string, answerProperty: string, tabName: string} 71 | * You can change object keys names using other props (questionProperty, answerProperty, tabName) 72 | */ 73 | items: { 74 | type: Array, 75 | required: true 76 | }, 77 | 78 | /** 79 | * Key name of object in items array for specifying title of question 80 | */ 81 | questionProperty: { 82 | type: String, 83 | default: 'title' 84 | }, 85 | 86 | /** 87 | * Key name of object in items array for specifying content text of open question 88 | */ 89 | answerProperty: { 90 | type: String, 91 | default: 'value' 92 | }, 93 | 94 | /** 95 | * Key name of object in items array for specifying navigation tab name 96 | */ 97 | tabName: { 98 | type: String, 99 | default: 'category' 100 | }, 101 | 102 | /** 103 | * Color for hover and active tab/question 104 | * possible format: 'red', '#F00', 'rgba(255, 0, 0, 1)' 105 | */ 106 | activeColor: { 107 | type: String, 108 | default: '#D50000' 109 | }, 110 | 111 | /** 112 | * Color for borders 113 | */ 114 | borderColor: { 115 | type: String, 116 | default: '#9E9E9E' 117 | }, 118 | 119 | /** 120 | * Color for fonts 121 | */ 122 | fontColor: { 123 | type: String, 124 | default: '#000000' 125 | }, 126 | 127 | /** 128 | * Opened by default tabName (category) 129 | */ 130 | initialTab: { 131 | type: String, 132 | default: null 133 | }, 134 | 135 | /** 136 | * Opened by default question 137 | * All closed by default 138 | */ 139 | initialQuestionIndex: { 140 | type: Number, 141 | default: null 142 | } 143 | 144 | } 145 | ``` 146 | 147 | ### 🔥 Events 148 | 149 | | Event | Payload | Description | 150 | | -| - | -| 151 | | categorySelect | `{ categoryIndex }` | Emitted on category change | 152 | | itemSelect | `{ itemIndex }` | Emitted on item open | 153 | 154 | ### 📎 Slots 155 | 156 | You can define own item markup via slots: 157 | ```vue 158 | 162 | 163 | 164 | ``` 165 | - item data is available via scoped slot (v-slot="itemData") 166 | - don't add margins to this element (animation become choppy) 167 | -------------------------------------------------------------------------------- /src/vue-faq-accordion.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 196 | 197 | 360 | -------------------------------------------------------------------------------- /dist/vue-faq-accordion.min.js: -------------------------------------------------------------------------------- 1 | var VueFaqAccordion=function(n,e){"use strict";function t(n){return function(n,e){return o(n,e)}}function o(n,e){var t=c?e.media||"default":n,o=s[t]||(s[t]={ids:new Set,styles:[]});if(!o.ids.has(n)){o.ids.add(n);var a=e.source;if(e.map&&(a+="\n/*# sourceURL="+e.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),void 0===i&&(i=document.head||document.getElementsByTagName("head")[0]),i.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(a),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{var r=o.ids.size-1,A=document.createTextNode(a),l=o.element.childNodes;l[r]&&o.element.removeChild(l[r]),l.length?o.element.insertBefore(A,l[r]):o.element.appendChild(A)}}}function a(n){a.installed||(a.installed=!0,n.component("VueFaqAccordion",u))}var i,r={name:"VueFaqAccordion",components:{CollapseTransition:e.CollapseTransition},data:function(){return{activeTab:"",activeQuestionIndex:null,showAccordion:!0}},props:{items:{type:Array,required:!0},questionProperty:{type:String,default:"title"},answerProperty:{type:String,default:"value"},tabName:{type:String,default:"category"},activeColor:{type:String,default:"#D50000"},borderColor:{type:String,default:"#9E9E9E"},fontColor:{type:String,default:"#000000"},initialTab:{type:String,default:null},initialQuestionIndex:{type:Number,default:null}},computed:{categories:function(){var n=this,e=this.items.map(function(e){return e[n.tabName]}).filter(function(n,e,t){return t.indexOf(n)===e});return this.activeTab=this.initialTab||e[0],this.activeQuestionIndex=this.initialQuestionIndex||null,e},categoryItems:function(){var n=this;return this.items.filter(function(e){return e[n.tabName]===n.activeTab})},hasNavigation:function(){return!!this.categories[0]}},methods:{makeActive:function(n){this.activeQuestionIndex=this.activeQuestionIndex===n?null:n,this.$emit("itemSelect",{itemIndex:n})},generateButtonClasses:function(n){return["accordion__toggle-button",this.activeQuestionIndex===n?"accordion__toggle-button_active":null]},generateQuestionClasses:function(n){return["accordion__title",this.activeQuestionIndex===n?"accordion__title_active":null]},makeActiveCategory:function(n,e){var t=this;this.activeTab!==n&&(this.showAccordion=!1,this.activeTab=n,this.activeQuestionIndex=null,setTimeout(function(){t.$emit("categorySelect",{categoryIndex:e}),t.showAccordion=!0},300))},generateCategoryClasses:function(n){return["faq__nav-item",this.activeTab===n?"faq__nav-item_active":null]}},mounted:function(){this.$refs.rootEl.style.setProperty("--active-color",this.activeColor),this.$refs.rootEl.style.setProperty("--border-color",this.borderColor),this.$refs.rootEl.style.setProperty("--font-color",this.fontColor)}},c="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),s={},A=r,l=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("section",{ref:"rootEl",staticClass:"faq"},[t("div",{staticClass:"faq-wrapper"},[n.hasNavigation?t("nav",{staticClass:"faq__nav"},n._l(n.categories,function(e,o){return t("div",{key:"category-"+o,class:n.generateCategoryClasses(e),domProps:{innerHTML:n._s(e)},on:{click:function(t){return n.makeActiveCategory(e,o)}}})}),0):n._e(),n._v(" "),t("transition",{attrs:{name:"accordion-fade-slide",mode:"out-in"}},[n.showAccordion?t("div",{staticClass:"accordion"},n._l(n.categoryItems,function(e,o){return t("div",{key:"accordion-item-"+o,staticClass:"accordion__item"},[t("div",{class:n.generateQuestionClasses(o),on:{click:function(e){return n.makeActive(o)}}},[t("p",{staticClass:"accordion__title-text",domProps:{innerHTML:n._s(e[n.questionProperty])}}),n._v(" "),t("button",{class:n.generateButtonClasses(o)})]),n._v(" "),t("collapse-transition",[o===n.activeQuestionIndex?t("div",[t("div",{staticClass:"accordion__value"},[n._t("default",[t("div",{domProps:{innerHTML:n._s(e[n.answerProperty])}})],null,e)],2)]):n._e()])],1)}),0):n._e()])],1)])},d=[];l._withStripped=!0;var u=function(n,e,t,o,a,i,r,c,s,A){"boolean"!=typeof r&&(s=c,c=r,r=!1);var l="function"==typeof t?t.options:t;n&&n.render&&(l.render=n.render,l.staticRenderFns=n.staticRenderFns,l._compiled=!0,a&&(l.functional=!0)),o&&(l._scopeId=o);var d;if(i?(d=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,s(n)),n&&n._registeredComponents&&n._registeredComponents.add(i)},l._ssrRegister=d):e&&(d=r?function(n){e.call(this,A(n,this.$root.$options.shadowRoot))}:function(n){e.call(this,c(n))}),d)if(l.functional){var u=l.render;l.render=function(n,e){return d.call(e),u(n,e)}}else{var v=l.beforeCreate;l.beforeCreate=v?[].concat(v,d):[d]}return t}({render:l,staticRenderFns:d},function(n){n&&n("data-v-5d9392b3_0",{source:'*[data-v-5d9392b3] {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\nbutton[data-v-5d9392b3] {\n border: none;\n background: none;\n outline: none;\n}\n.faq[data-v-5d9392b3] {\n width: 100%;\n padding: 0 10px;\n}\n.faq-wrapper[data-v-5d9392b3] {\n max-width: 825px;\n}\n.faq__title[data-v-5d9392b3] {\n text-align: center;\n margin-bottom: 25px;\n}\n.faq__nav[data-v-5d9392b3] {\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--border-color);\n border-radius: 5px;\n}\n.faq__nav-item[data-v-5d9392b3] {\n height: 60px;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n border-right: 2px solid var(--border-color);\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n text-align: center;\n user-select: none;\n color: var(--font-color);\n}\n.faq__nav-item_active[data-v-5d9392b3] {\n color: var(--active-color);\n}\n.faq__nav-item[data-v-5d9392b3]:hover {\n color: var(--active-color);\n}\n.faq__nav-item[data-v-5d9392b3]:last-child {\n border-right: none;\n}\n.faq__accordion[data-v-5d9392b3] {\n min-height: 250px;\n}\n.accordion-fade-slide-enter-active[data-v-5d9392b3], .accordion-fade-slide-leave-active[data-v-5d9392b3] {\n transition: all 0.3s;\n}\n.accordion-fade-slide-enter[data-v-5d9392b3] {\n transform: translateY(-25px);\n opacity: 0;\n}\n.accordion-fade-slide-leave-to[data-v-5d9392b3] {\n transform: translateY(25px);\n opacity: 0;\n}\n.accordion[data-v-5d9392b3] {\n border: 2px solid var(--border-color);\n border-radius: 5px;\n margin-top: 15px;\n}\n.accordion__item[data-v-5d9392b3] {\n border-bottom: 2px solid var(--border-color);\n}\n.accordion__item[data-v-5d9392b3]:last-child {\n border-bottom: none;\n}\n.accordion__title[data-v-5d9392b3] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 25px;\n cursor: pointer;\n transition: all 0.3s;\n color: var(--font-color);\n}\n.accordion__title_active[data-v-5d9392b3] {\n color: var(--active-color);\n}\n.accordion__title[data-v-5d9392b3]:hover {\n color: var(--active-color);\n}\n.accordion__title:hover .accordion__toggle-button[data-v-5d9392b3]::before, .accordion__title:hover .accordion__toggle-button[data-v-5d9392b3]::after {\n background: var(--active-color);\n}\n.accordion__title-text[data-v-5d9392b3] {\n margin-right: 10px;\n}\n.accordion__value[data-v-5d9392b3] {\n padding: 0 25px 25px 25px;\n text-align: left;\n color: var(--font-color);\n}\n.accordion__toggle-button[data-v-5d9392b3] {\n position: relative;\n width: 16px;\n height: 16px;\n transition: all 0.3s;\n transform-origin: 50% 50%;\n padding-left: 16px;\n cursor: pointer;\n}\n.accordion__toggle-button[data-v-5d9392b3]::before, .accordion__toggle-button[data-v-5d9392b3]::after {\n content: "";\n position: absolute;\n left: 0;\n width: 100%;\n height: 2px;\n transition: all 0.3s;\n background: black;\n}\n.accordion__toggle-button[data-v-5d9392b3]::before {\n transform: rotate(90deg);\n}\n.accordion__toggle-button_active[data-v-5d9392b3] {\n transform: rotate(45deg);\n}\n.accordion__toggle-button_active[data-v-5d9392b3]::before, .accordion__toggle-button_active[data-v-5d9392b3]::after {\n background: var(--active-color);\n}\n\n/*# sourceMappingURL=vue-faq-accordion.vue.map */',map:{version:3,sources:["/Users/gerasimvol/Documents/Projects/Own/vue-faq-accordion/src/vue-faq-accordion.vue","vue-faq-accordion.vue"],names:[],mappings:"AAqMA;EACA,sBAAA;EACA,SAAA;EACA,UAAA;ACpMA;ADuMA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;ACpMA;ADuMA;EACA,WAAA;EACA,eAAA;ACpMA;ADsMA;EACA,gBAAA;ACpMA;ADuMA;EACA,kBAAA;EACA,mBAAA;ACrMA;ADwMA;EACA,aAAA;EACA,8BAAA;EACA,qCAAA;EACA,kBAAA;ACtMA;ADyMA;EACA,YAAA;EACA,OAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,2CAAA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,kBAAA;EACA,iBAAA;EACA,wBAAA;ACvMA;ADyMA;EACA,0BAAA;ACvMA;AD0MA;EACA,0BAAA;ACxMA;AD2MA;EACA,kBAAA;ACzMA;AD6MA;EACA,iBAAA;AC3MA;ADgNA;EAEA,oBAAA;AC9MA;ADgNA;EACA,4BAAA;EACA,UAAA;AC9MA;ADgNA;EACA,2BAAA;EACA,UAAA;AC9MA;ADkNA;EACA,qCAAA;EACA,kBAAA;EACA,gBAAA;AC/MA;ADiNA;EACA,4CAAA;AC/MA;ADiNA;EACA,mBAAA;AC/MA;ADmNA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,aAAA;EACA,eAAA;EACA,oBAAA;EACA,wBAAA;ACjNA;ADmNA;EACA,0BAAA;ACjNA;ADoNA;EACA,0BAAA;AClNA;ADqNA;EAEA,+BAAA;ACpNA;ADyNA;EACA,kBAAA;ACvNA;AD2NA;EACA,yBAAA;EACA,gBAAA;EACA,wBAAA;ACzNA;AD4NA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;AC1NA;AD4NA;EAEA,WAAA;EACA,kBAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,oBAAA;EACA,iBAAA;AC3NA;AD8NA;EACA,wBAAA;AC5NA;AD+NA;EACA,wBAAA;AC7NA;AD+NA;EAEA,+BAAA;AC9NA;;AAEA,gDAAgD",file:"vue-faq-accordion.vue",sourcesContent:['\n\n\n\n\n","* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbutton {\n border: none;\n background: none;\n outline: none;\n}\n\n.faq {\n width: 100%;\n padding: 0 10px;\n}\n.faq-wrapper {\n max-width: 825px;\n}\n.faq__title {\n text-align: center;\n margin-bottom: 25px;\n}\n.faq__nav {\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--border-color);\n border-radius: 5px;\n}\n.faq__nav-item {\n height: 60px;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n border-right: 2px solid var(--border-color);\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n text-align: center;\n user-select: none;\n color: var(--font-color);\n}\n.faq__nav-item_active {\n color: var(--active-color);\n}\n.faq__nav-item:hover {\n color: var(--active-color);\n}\n.faq__nav-item:last-child {\n border-right: none;\n}\n.faq__accordion {\n min-height: 250px;\n}\n\n.accordion-fade-slide-enter-active, .accordion-fade-slide-leave-active {\n transition: all 0.3s;\n}\n.accordion-fade-slide-enter {\n transform: translateY(-25px);\n opacity: 0;\n}\n.accordion-fade-slide-leave-to {\n transform: translateY(25px);\n opacity: 0;\n}\n\n.accordion {\n border: 2px solid var(--border-color);\n border-radius: 5px;\n margin-top: 15px;\n}\n.accordion__item {\n border-bottom: 2px solid var(--border-color);\n}\n.accordion__item:last-child {\n border-bottom: none;\n}\n.accordion__title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 25px;\n cursor: pointer;\n transition: all 0.3s;\n color: var(--font-color);\n}\n.accordion__title_active {\n color: var(--active-color);\n}\n.accordion__title:hover {\n color: var(--active-color);\n}\n.accordion__title:hover .accordion__toggle-button::before, .accordion__title:hover .accordion__toggle-button::after {\n background: var(--active-color);\n}\n.accordion__title-text {\n margin-right: 10px;\n}\n.accordion__value {\n padding: 0 25px 25px 25px;\n text-align: left;\n color: var(--font-color);\n}\n.accordion__toggle-button {\n position: relative;\n width: 16px;\n height: 16px;\n transition: all 0.3s;\n transform-origin: 50% 50%;\n padding-left: 16px;\n cursor: pointer;\n}\n.accordion__toggle-button::before, .accordion__toggle-button::after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n height: 2px;\n transition: all 0.3s;\n background: black;\n}\n.accordion__toggle-button::before {\n transform: rotate(90deg);\n}\n.accordion__toggle-button_active {\n transform: rotate(45deg);\n}\n.accordion__toggle-button_active::before, .accordion__toggle-button_active::after {\n background: var(--active-color);\n}\n\n/*# sourceMappingURL=vue-faq-accordion.vue.map */"]}, media: undefined }); 412 | 413 | }; 414 | /* scoped */ 415 | var __vue_scope_id__ = "data-v-5d9392b3"; 416 | /* module identifier */ 417 | var __vue_module_identifier__ = undefined; 418 | /* functional template */ 419 | var __vue_is_functional_template__ = false; 420 | /* style inject SSR */ 421 | 422 | /* style inject shadow dom */ 423 | 424 | 425 | 426 | var __vue_component__ = normalizeComponent( 427 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 428 | __vue_inject_styles__, 429 | __vue_script__, 430 | __vue_scope_id__, 431 | __vue_is_functional_template__, 432 | __vue_module_identifier__, 433 | false, 434 | createInjector, 435 | undefined, 436 | undefined 437 | ); 438 | 439 | // Import vue component 440 | 441 | // install function executed by Vue.use() 442 | function install(Vue) { 443 | if (install.installed) { return; } 444 | install.installed = true; 445 | Vue.component('VueFaqAccordion', __vue_component__); 446 | } 447 | 448 | // Create module definition for Vue.use() 449 | var plugin = { 450 | install: install, 451 | }; 452 | 453 | // To auto-install when vue is found 454 | var GlobalVue = null; 455 | if (typeof window !== 'undefined') { 456 | GlobalVue = window.Vue; 457 | } else if (typeof global !== 'undefined') { 458 | GlobalVue = global.Vue; 459 | } 460 | if (GlobalVue) { 461 | GlobalVue.use(plugin); 462 | } 463 | 464 | // It's possible to expose named exports when writing components that can 465 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo'; 466 | // export const RollupDemoDirective = component; 467 | 468 | export default __vue_component__; 469 | export { install }; 470 | -------------------------------------------------------------------------------- /dist/vue-faq-accordion.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue2-transitions')) : 3 | typeof define === 'function' && define.amd ? define(['exports', 'vue2-transitions'], factory) : 4 | (global = global || self, factory(global.VueFaqAccordion = {}, global.vue2Transitions)); 5 | }(this, (function (exports, vue2Transitions) { 'use strict'; 6 | 7 | // 8 | 9 | var script = { 10 | name: 'VueFaqAccordion', 11 | 12 | components: { 13 | CollapseTransition: vue2Transitions.CollapseTransition 14 | }, 15 | 16 | data: function data () { 17 | return { 18 | activeTab: '', 19 | activeQuestionIndex: null, 20 | showAccordion: true 21 | } 22 | }, 23 | 24 | props: { 25 | /** 26 | * Array of items 27 | * Object style {questionProperty: string, answerProperty: string, tabName: string} 28 | * You can change object keys names using other props (questionProperty, answerProperty, tabName) 29 | */ 30 | items: { 31 | type: Array, 32 | required: true 33 | }, 34 | /** 35 | * Key name of object in items array for specifying title of question 36 | */ 37 | questionProperty: { 38 | type: String, 39 | default: 'title' 40 | }, 41 | /** 42 | * Key name of object in items array for specifying content text of open question 43 | */ 44 | answerProperty: { 45 | type: String, 46 | default: 'value' 47 | }, 48 | /** 49 | * Key name of object in items array for specifying navigation tab name 50 | */ 51 | tabName: { 52 | type: String, 53 | default: 'category' 54 | }, 55 | /** 56 | * Color for hover and active tab/question 57 | * possible values: 'red', '#F00', 'rgb(255, 0, 0)' 58 | */ 59 | activeColor: { 60 | type: String, 61 | default: '#D50000' 62 | }, 63 | /** 64 | * Color for borders 65 | */ 66 | borderColor: { 67 | type: String, 68 | default: '#9E9E9E' 69 | }, 70 | /** 71 | * Color for fonts 72 | */ 73 | fontColor: { 74 | type: String, 75 | default: '#000000' 76 | }, 77 | /** 78 | * Opened by default tabName (category) 79 | */ 80 | initialTab: { 81 | type: String, 82 | default: null 83 | }, 84 | /** 85 | * Opened by default question 86 | * All closed by default 87 | */ 88 | initialQuestionIndex: { 89 | type: Number, 90 | default: null 91 | } 92 | }, 93 | 94 | computed: { 95 | categories: function categories () { 96 | var this$1 = this; 97 | 98 | var uniqueCategories = this.items 99 | .map(function (item) { return item[this$1.tabName]; }) 100 | .filter(function (category, index, categories) { return categories.indexOf(category) === index; }); 101 | this.activeTab = this.initialTab || uniqueCategories[0]; 102 | this.activeQuestionIndex = this.initialQuestionIndex || null; 103 | return uniqueCategories 104 | }, 105 | categoryItems: function categoryItems () { 106 | var this$1 = this; 107 | 108 | return this.items 109 | .filter(function (item) { return item[this$1.tabName] === this$1.activeTab; }) 110 | }, 111 | hasNavigation: function hasNavigation () { 112 | return !!this.categories[0] 113 | } 114 | }, 115 | 116 | methods: { 117 | makeActive: function makeActive (itemIndex) { 118 | this.activeQuestionIndex = this.activeQuestionIndex === itemIndex ? null : itemIndex; 119 | this.$emit('itemSelect', { itemIndex: itemIndex }); 120 | }, 121 | generateButtonClasses: function generateButtonClasses (buttonIndex) { 122 | return [ 123 | 'accordion__toggle-button', 124 | this.activeQuestionIndex === buttonIndex 125 | ? 'accordion__toggle-button_active' 126 | : null 127 | ] 128 | }, 129 | generateQuestionClasses: function generateQuestionClasses (questionIndex) { 130 | return [ 131 | 'accordion__title', 132 | this.activeQuestionIndex === questionIndex 133 | ? 'accordion__title_active' 134 | : null 135 | ] 136 | }, 137 | makeActiveCategory: function makeActiveCategory (category, categoryIndex) { 138 | var this$1 = this; 139 | 140 | if (this.activeTab === category) { return } 141 | 142 | this.showAccordion = false; 143 | this.activeTab = category; 144 | this.activeQuestionIndex = null; 145 | setTimeout( function () { 146 | this$1.$emit('categorySelect', { categoryIndex: categoryIndex }); 147 | this$1.showAccordion = true; 148 | }, 300 ); 149 | }, 150 | generateCategoryClasses: function generateCategoryClasses (category) { 151 | return [ 152 | 'faq__nav-item', 153 | this.activeTab === category 154 | ? 'faq__nav-item_active' 155 | : null 156 | ] 157 | } 158 | }, 159 | 160 | mounted: function mounted () { 161 | this.$refs.rootEl.style.setProperty('--active-color', this.activeColor); 162 | this.$refs.rootEl.style.setProperty('--border-color', this.borderColor); 163 | this.$refs.rootEl.style.setProperty('--font-color', this.fontColor); 164 | } 165 | }; 166 | 167 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 168 | if (typeof shadowMode !== 'boolean') { 169 | createInjectorSSR = createInjector; 170 | createInjector = shadowMode; 171 | shadowMode = false; 172 | } 173 | // Vue.extend constructor export interop. 174 | var options = typeof script === 'function' ? script.options : script; 175 | // render functions 176 | if (template && template.render) { 177 | options.render = template.render; 178 | options.staticRenderFns = template.staticRenderFns; 179 | options._compiled = true; 180 | // functional template 181 | if (isFunctionalTemplate) { 182 | options.functional = true; 183 | } 184 | } 185 | // scopedId 186 | if (scopeId) { 187 | options._scopeId = scopeId; 188 | } 189 | var hook; 190 | if (moduleIdentifier) { 191 | // server build 192 | hook = function (context) { 193 | // 2.3 injection 194 | context = 195 | context || // cached call 196 | (this.$vnode && this.$vnode.ssrContext) || // stateful 197 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional 198 | // 2.2 with runInNewContext: true 199 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 200 | context = __VUE_SSR_CONTEXT__; 201 | } 202 | // inject component styles 203 | if (style) { 204 | style.call(this, createInjectorSSR(context)); 205 | } 206 | // register component module identifier for async chunk inference 207 | if (context && context._registeredComponents) { 208 | context._registeredComponents.add(moduleIdentifier); 209 | } 210 | }; 211 | // used by ssr in case component is cached and beforeCreate 212 | // never gets called 213 | options._ssrRegister = hook; 214 | } 215 | else if (style) { 216 | hook = shadowMode 217 | ? function (context) { 218 | style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); 219 | } 220 | : function (context) { 221 | style.call(this, createInjector(context)); 222 | }; 223 | } 224 | if (hook) { 225 | if (options.functional) { 226 | // register for functional component in vue file 227 | var originalRender = options.render; 228 | options.render = function renderWithStyleInjection(h, context) { 229 | hook.call(context); 230 | return originalRender(h, context); 231 | }; 232 | } 233 | else { 234 | // inject component registration as beforeCreate hook 235 | var existing = options.beforeCreate; 236 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 237 | } 238 | } 239 | return script; 240 | } 241 | 242 | var isOldIE = typeof navigator !== 'undefined' && 243 | /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); 244 | function createInjector(context) { 245 | return function (id, style) { return addStyle(id, style); }; 246 | } 247 | var HEAD; 248 | var styles = {}; 249 | function addStyle(id, css) { 250 | var group = isOldIE ? css.media || 'default' : id; 251 | var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); 252 | if (!style.ids.has(id)) { 253 | style.ids.add(id); 254 | var code = css.source; 255 | if (css.map) { 256 | // https://developer.chrome.com/devtools/docs/javascript-debugging 257 | // this makes source maps inside style tags work properly in Chrome 258 | code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; 259 | // http://stackoverflow.com/a/26603875 260 | code += 261 | '\n/*# sourceMappingURL=data:application/json;base64,' + 262 | btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + 263 | ' */'; 264 | } 265 | if (!style.element) { 266 | style.element = document.createElement('style'); 267 | style.element.type = 'text/css'; 268 | if (css.media) 269 | { style.element.setAttribute('media', css.media); } 270 | if (HEAD === undefined) { 271 | HEAD = document.head || document.getElementsByTagName('head')[0]; 272 | } 273 | HEAD.appendChild(style.element); 274 | } 275 | if ('styleSheet' in style.element) { 276 | style.styles.push(code); 277 | style.element.styleSheet.cssText = style.styles 278 | .filter(Boolean) 279 | .join('\n'); 280 | } 281 | else { 282 | var index = style.ids.size - 1; 283 | var textNode = document.createTextNode(code); 284 | var nodes = style.element.childNodes; 285 | if (nodes[index]) 286 | { style.element.removeChild(nodes[index]); } 287 | if (nodes.length) 288 | { style.element.insertBefore(textNode, nodes[index]); } 289 | else 290 | { style.element.appendChild(textNode); } 291 | } 292 | } 293 | } 294 | 295 | /* script */ 296 | var __vue_script__ = script; 297 | 298 | /* template */ 299 | var __vue_render__ = function() { 300 | var _vm = this; 301 | var _h = _vm.$createElement; 302 | var _c = _vm._self._c || _h; 303 | return _c("section", { ref: "rootEl", staticClass: "faq" }, [ 304 | _c( 305 | "div", 306 | { staticClass: "faq-wrapper" }, 307 | [ 308 | _vm.hasNavigation 309 | ? _c( 310 | "nav", 311 | { staticClass: "faq__nav" }, 312 | _vm._l(_vm.categories, function(category, i) { 313 | return _c("div", { 314 | key: "category-" + i, 315 | class: _vm.generateCategoryClasses(category), 316 | domProps: { innerHTML: _vm._s(category) }, 317 | on: { 318 | click: function($event) { 319 | return _vm.makeActiveCategory(category, i) 320 | } 321 | } 322 | }) 323 | }), 324 | 0 325 | ) 326 | : _vm._e(), 327 | _vm._v(" "), 328 | _c( 329 | "transition", 330 | { attrs: { name: "accordion-fade-slide", mode: "out-in" } }, 331 | [ 332 | _vm.showAccordion 333 | ? _c( 334 | "div", 335 | { staticClass: "accordion" }, 336 | _vm._l(_vm.categoryItems, function(item, i) { 337 | return _c( 338 | "div", 339 | { 340 | key: "accordion-item-" + i, 341 | staticClass: "accordion__item" 342 | }, 343 | [ 344 | _c( 345 | "div", 346 | { 347 | class: _vm.generateQuestionClasses(i), 348 | on: { 349 | click: function($event) { 350 | return _vm.makeActive(i) 351 | } 352 | } 353 | }, 354 | [ 355 | _c("p", { 356 | staticClass: "accordion__title-text", 357 | domProps: { 358 | innerHTML: _vm._s(item[_vm.questionProperty]) 359 | } 360 | }), 361 | _vm._v(" "), 362 | _c("button", { 363 | class: _vm.generateButtonClasses(i) 364 | }) 365 | ] 366 | ), 367 | _vm._v(" "), 368 | _c("collapse-transition", [ 369 | i === _vm.activeQuestionIndex 370 | ? _c("div", [ 371 | _c( 372 | "div", 373 | { staticClass: "accordion__value" }, 374 | [ 375 | _vm._t( 376 | "default", 377 | [ 378 | _c("div", { 379 | domProps: { 380 | innerHTML: _vm._s( 381 | item[_vm.answerProperty] 382 | ) 383 | } 384 | }) 385 | ], 386 | null, 387 | item 388 | ) 389 | ], 390 | 2 391 | ) 392 | ]) 393 | : _vm._e() 394 | ]) 395 | ], 396 | 1 397 | ) 398 | }), 399 | 0 400 | ) 401 | : _vm._e() 402 | ] 403 | ) 404 | ], 405 | 1 406 | ) 407 | ]) 408 | }; 409 | var __vue_staticRenderFns__ = []; 410 | __vue_render__._withStripped = true; 411 | 412 | /* style */ 413 | var __vue_inject_styles__ = function (inject) { 414 | if (!inject) { return } 415 | inject("data-v-5d9392b3_0", { source: "*[data-v-5d9392b3] {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\nbutton[data-v-5d9392b3] {\n border: none;\n background: none;\n outline: none;\n}\n.faq[data-v-5d9392b3] {\n width: 100%;\n padding: 0 10px;\n}\n.faq-wrapper[data-v-5d9392b3] {\n max-width: 825px;\n}\n.faq__title[data-v-5d9392b3] {\n text-align: center;\n margin-bottom: 25px;\n}\n.faq__nav[data-v-5d9392b3] {\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--border-color);\n border-radius: 5px;\n}\n.faq__nav-item[data-v-5d9392b3] {\n height: 60px;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n border-right: 2px solid var(--border-color);\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n text-align: center;\n user-select: none;\n color: var(--font-color);\n}\n.faq__nav-item_active[data-v-5d9392b3] {\n color: var(--active-color);\n}\n.faq__nav-item[data-v-5d9392b3]:hover {\n color: var(--active-color);\n}\n.faq__nav-item[data-v-5d9392b3]:last-child {\n border-right: none;\n}\n.faq__accordion[data-v-5d9392b3] {\n min-height: 250px;\n}\n.accordion-fade-slide-enter-active[data-v-5d9392b3], .accordion-fade-slide-leave-active[data-v-5d9392b3] {\n transition: all 0.3s;\n}\n.accordion-fade-slide-enter[data-v-5d9392b3] {\n transform: translateY(-25px);\n opacity: 0;\n}\n.accordion-fade-slide-leave-to[data-v-5d9392b3] {\n transform: translateY(25px);\n opacity: 0;\n}\n.accordion[data-v-5d9392b3] {\n border: 2px solid var(--border-color);\n border-radius: 5px;\n margin-top: 15px;\n}\n.accordion__item[data-v-5d9392b3] {\n border-bottom: 2px solid var(--border-color);\n}\n.accordion__item[data-v-5d9392b3]:last-child {\n border-bottom: none;\n}\n.accordion__title[data-v-5d9392b3] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 25px;\n cursor: pointer;\n transition: all 0.3s;\n color: var(--font-color);\n}\n.accordion__title_active[data-v-5d9392b3] {\n color: var(--active-color);\n}\n.accordion__title[data-v-5d9392b3]:hover {\n color: var(--active-color);\n}\n.accordion__title:hover .accordion__toggle-button[data-v-5d9392b3]::before, .accordion__title:hover .accordion__toggle-button[data-v-5d9392b3]::after {\n background: var(--active-color);\n}\n.accordion__title-text[data-v-5d9392b3] {\n margin-right: 10px;\n}\n.accordion__value[data-v-5d9392b3] {\n padding: 0 25px 25px 25px;\n text-align: left;\n color: var(--font-color);\n}\n.accordion__toggle-button[data-v-5d9392b3] {\n position: relative;\n width: 16px;\n height: 16px;\n transition: all 0.3s;\n transform-origin: 50% 50%;\n padding-left: 16px;\n cursor: pointer;\n}\n.accordion__toggle-button[data-v-5d9392b3]::before, .accordion__toggle-button[data-v-5d9392b3]::after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n height: 2px;\n transition: all 0.3s;\n background: black;\n}\n.accordion__toggle-button[data-v-5d9392b3]::before {\n transform: rotate(90deg);\n}\n.accordion__toggle-button_active[data-v-5d9392b3] {\n transform: rotate(45deg);\n}\n.accordion__toggle-button_active[data-v-5d9392b3]::before, .accordion__toggle-button_active[data-v-5d9392b3]::after {\n background: var(--active-color);\n}\n\n/*# sourceMappingURL=vue-faq-accordion.vue.map */", map: {"version":3,"sources":["/Users/gerasimvol/Documents/Projects/Own/vue-faq-accordion/src/vue-faq-accordion.vue","vue-faq-accordion.vue"],"names":[],"mappings":"AAqMA;EACA,sBAAA;EACA,SAAA;EACA,UAAA;ACpMA;ADuMA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;ACpMA;ADuMA;EACA,WAAA;EACA,eAAA;ACpMA;ADsMA;EACA,gBAAA;ACpMA;ADuMA;EACA,kBAAA;EACA,mBAAA;ACrMA;ADwMA;EACA,aAAA;EACA,8BAAA;EACA,qCAAA;EACA,kBAAA;ACtMA;ADyMA;EACA,YAAA;EACA,OAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,2CAAA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,kBAAA;EACA,iBAAA;EACA,wBAAA;ACvMA;ADyMA;EACA,0BAAA;ACvMA;AD0MA;EACA,0BAAA;ACxMA;AD2MA;EACA,kBAAA;ACzMA;AD6MA;EACA,iBAAA;AC3MA;ADgNA;EAEA,oBAAA;AC9MA;ADgNA;EACA,4BAAA;EACA,UAAA;AC9MA;ADgNA;EACA,2BAAA;EACA,UAAA;AC9MA;ADkNA;EACA,qCAAA;EACA,kBAAA;EACA,gBAAA;AC/MA;ADiNA;EACA,4CAAA;AC/MA;ADiNA;EACA,mBAAA;AC/MA;ADmNA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,aAAA;EACA,eAAA;EACA,oBAAA;EACA,wBAAA;ACjNA;ADmNA;EACA,0BAAA;ACjNA;ADoNA;EACA,0BAAA;AClNA;ADqNA;EAEA,+BAAA;ACpNA;ADyNA;EACA,kBAAA;ACvNA;AD2NA;EACA,yBAAA;EACA,gBAAA;EACA,wBAAA;ACzNA;AD4NA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;AC1NA;AD4NA;EAEA,WAAA;EACA,kBAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,oBAAA;EACA,iBAAA;AC3NA;AD8NA;EACA,wBAAA;AC5NA;AD+NA;EACA,wBAAA;AC7NA;AD+NA;EAEA,+BAAA;AC9NA;;AAEA,gDAAgD","file":"vue-faq-accordion.vue","sourcesContent":["\n\n\n\n\n","* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbutton {\n border: none;\n background: none;\n outline: none;\n}\n\n.faq {\n width: 100%;\n padding: 0 10px;\n}\n.faq-wrapper {\n max-width: 825px;\n}\n.faq__title {\n text-align: center;\n margin-bottom: 25px;\n}\n.faq__nav {\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--border-color);\n border-radius: 5px;\n}\n.faq__nav-item {\n height: 60px;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n border-right: 2px solid var(--border-color);\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n text-align: center;\n user-select: none;\n color: var(--font-color);\n}\n.faq__nav-item_active {\n color: var(--active-color);\n}\n.faq__nav-item:hover {\n color: var(--active-color);\n}\n.faq__nav-item:last-child {\n border-right: none;\n}\n.faq__accordion {\n min-height: 250px;\n}\n\n.accordion-fade-slide-enter-active, .accordion-fade-slide-leave-active {\n transition: all 0.3s;\n}\n.accordion-fade-slide-enter {\n transform: translateY(-25px);\n opacity: 0;\n}\n.accordion-fade-slide-leave-to {\n transform: translateY(25px);\n opacity: 0;\n}\n\n.accordion {\n border: 2px solid var(--border-color);\n border-radius: 5px;\n margin-top: 15px;\n}\n.accordion__item {\n border-bottom: 2px solid var(--border-color);\n}\n.accordion__item:last-child {\n border-bottom: none;\n}\n.accordion__title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 25px;\n cursor: pointer;\n transition: all 0.3s;\n color: var(--font-color);\n}\n.accordion__title_active {\n color: var(--active-color);\n}\n.accordion__title:hover {\n color: var(--active-color);\n}\n.accordion__title:hover .accordion__toggle-button::before, .accordion__title:hover .accordion__toggle-button::after {\n background: var(--active-color);\n}\n.accordion__title-text {\n margin-right: 10px;\n}\n.accordion__value {\n padding: 0 25px 25px 25px;\n text-align: left;\n color: var(--font-color);\n}\n.accordion__toggle-button {\n position: relative;\n width: 16px;\n height: 16px;\n transition: all 0.3s;\n transform-origin: 50% 50%;\n padding-left: 16px;\n cursor: pointer;\n}\n.accordion__toggle-button::before, .accordion__toggle-button::after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n height: 2px;\n transition: all 0.3s;\n background: black;\n}\n.accordion__toggle-button::before {\n transform: rotate(90deg);\n}\n.accordion__toggle-button_active {\n transform: rotate(45deg);\n}\n.accordion__toggle-button_active::before, .accordion__toggle-button_active::after {\n background: var(--active-color);\n}\n\n/*# sourceMappingURL=vue-faq-accordion.vue.map */"]}, media: undefined }); 416 | 417 | }; 418 | /* scoped */ 419 | var __vue_scope_id__ = "data-v-5d9392b3"; 420 | /* module identifier */ 421 | var __vue_module_identifier__ = undefined; 422 | /* functional template */ 423 | var __vue_is_functional_template__ = false; 424 | /* style inject SSR */ 425 | 426 | /* style inject shadow dom */ 427 | 428 | 429 | 430 | var __vue_component__ = normalizeComponent( 431 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 432 | __vue_inject_styles__, 433 | __vue_script__, 434 | __vue_scope_id__, 435 | __vue_is_functional_template__, 436 | __vue_module_identifier__, 437 | false, 438 | createInjector, 439 | undefined, 440 | undefined 441 | ); 442 | 443 | // Import vue component 444 | 445 | // install function executed by Vue.use() 446 | function install(Vue) { 447 | if (install.installed) { return; } 448 | install.installed = true; 449 | Vue.component('VueFaqAccordion', __vue_component__); 450 | } 451 | 452 | // Create module definition for Vue.use() 453 | var plugin = { 454 | install: install, 455 | }; 456 | 457 | // To auto-install when vue is found 458 | var GlobalVue = null; 459 | if (typeof window !== 'undefined') { 460 | GlobalVue = window.Vue; 461 | } else if (typeof global !== 'undefined') { 462 | GlobalVue = global.Vue; 463 | } 464 | if (GlobalVue) { 465 | GlobalVue.use(plugin); 466 | } 467 | 468 | // It's possible to expose named exports when writing components that can 469 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo'; 470 | // export const RollupDemoDirective = component; 471 | 472 | exports.default = __vue_component__; 473 | exports.install = install; 474 | 475 | Object.defineProperty(exports, '__esModule', { value: true }); 476 | 477 | }))); 478 | --------------------------------------------------------------------------------