vue-bulma-accordion/dist/main.js

A simple, easily configurable accordion or collapsible for Vue, styled with Bulma

(function () {var h=this;var b={};function e($){e.installed||(e.installed=!0,$.component("bulma-accordion",c),$.component("bulma-accordion-item",d))}function k(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function l(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}var a={caretAnimation:{duration:"450ms",timerFunc:"ease 0s"},dropdown:!1,icon:"caret",slide:{duration:"700ms",timerFunc:"ease 0s"}};var m=function(){function e(t){k(this,e),this.open_items=[],this.current_id=1,this.initially_open=null,this.config=t}return l(e,[{key:"setInitiallyOpen",value:function(e){var t=this;this.initially_open=e,"string"==typeof e||"number"==typeof e?this._addItem(e.toString()):Array.isArray(e)&&e.forEach(function(e){t._addItem(e.toString())})}},{key:"getNextId",value:function(){var e=this.current_id.toString();return this.current_id+=1,e}},{key:"isOpen",value:function(e){return this.open_items.includes(e)}},{key:"setOpen",value:function(e,t){t?this._addItem(e):this._removeItem(e)}},{key:"toggleOpen",value:function(e){this.open_items.includes(e)?this._removeItem(e):this._addItem(e)}},{key:"register",value:function(){return this.getNextId()}},{key:"_removeItem",value:function(e){var t=this.open_items.findIndex(function(t){return t===e});-1!==t&&this.open_items.splice(t,1)}},{key:"_addItem",value:function(e){this.config.dropdown?this.open_items.push(e):this.open_items=[e]}}]),e}();var g=new m(a),c={name:"bulma-accordion",provide:{AccordionItemController:g,AccordionItemConfig:a},props:{initialOpenItem:{required:!1,type:[Number,String],default:null},initialOpenItems:{required:!1,type:Array,default:null,validator:function(e){return Array.isArray(e)&&!e.some(function(e){return"number"!=typeof e})}},caretAnimation:{required:!1,type:Object,default:function(){return{duration:"450ms",timerFunc:"ease 0s"}},validator:function(e){return"string"==typeof e.duration&&"string"==typeof e.timerFunc||!0===e.none}},dropdown:{required:!1,type:Boolean,default:!1},icon:{required:!1,type:String,default:"caret",validator:function(e){return"caret"===e||"plus-minus"===e||"custom"===e}},slide:{required:!1,type:Object,default:function(){return{duration:"700ms",timerFunc:"ease 0s"}},validator:function(e){return"string"==typeof e.duration&&"string"==typeof e.timerFunc}}},beforeMount:function(){a.caretAnimation=this.caretAnimation,a.dropdown=this.dropdown,a.icon=this.icon,a.slide=this.slide,g.setInitiallyOpen(this.initialOpenItem||this.initialOpenItems)},data:function(){return{AccordionItemController:g}},methods:{}};if(typeof c==="function"){c=c.options}Object.assign(c,function(){var render=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"accordion"},[_vm._t("default")],2)};var staticRenderFns=[];return{render:render,staticRenderFns:staticRenderFns,_compiled:true,_scopeId:null,functional:undefined}}());var f={props:{minus:{required:!0,type:Boolean}},computed:{verticalClasses:function(){return{vertical:!0,"vertical-rotated":this.minus}}}};if(typeof f==="function"){f=f.options}Object.assign(f,function(){var render=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"plus-minus"},[_c("span",{staticClass:"horizontal"}),_vm._v(" "),_c("span",{class:_vm.verticalClasses})])};var staticRenderFns=[];return{render:render,staticRenderFns:staticRenderFns,_compiled:true,_scopeId:"data-v-3ea109",functional:undefined}}());function o(n){var t={transition:"transitionend",OTransition:"otransitionend",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var i in t)if(t.hasOwnProperty(i)&&void 0!==n.style[i])return t[i];throw new Error("TransitionEnd event is not supported in this browser")}var d={name:"bulma-accordion-item",components:{PlusMinus:f},inject:["AccordionItemController","AccordionItemConfig"],mounted:function(){var t=this;this.uniqueId=this.AccordionItemController.register(),this.$nextTick(function(){var n=t.$refs.body,i=o(n);n.addEventListener(i,function(i){"0px"!==n.style.height?t.autoHeightStart(n):(t.autoHeightStop(),t.showCardContent=!1)})})},beforeDestroy:function(){this.autoHeightStop()},data:function(){return{autoHeightInterval:null,showCardContent:!1,uniqueId:null}},watch:{isOpen:function(t){t?this.$emit("open"):this.$emit("close"),this.doTheSlide()}},computed:{config:function(){return this.AccordionItemConfig||a},dropdownIconClasses:function(){return{"header-icon":!0,"caret-down":this.isOpen}},card_classes:function(){return{card:!0,"card-active":this.isOpen}},card_content_classes:function(){return{"card-content":!0,"is-hidden":!this.showCardContent}},footerClasses:function(){return{"card-footer":!0,"is-hidden":!this.$slots.footer}},usingCustomIcon:function(){return"custom"===this.config.icon},showCaret:function(){return"caret"===this.config.icon},showPlus:function(){return"plus-minus"===this.config.icon&&!this.isOpen},showMinus:function(){return"plus-minus"===this.config.icon&&this.isOpen},slideStyle:function(){var t=this.config.slide;return{transition:"all ".concat(t.duration," ").concat(t.timerFunc)}},iconStyle:function(){var t=this.config.caretAnimation;return!0===t.none?{}:{transition:"all ".concat(t.duration," ").concat(t.timerFunc)}},isOpen:function(){return this.AccordionItemController.isOpen(this.uniqueId)}},methods:{setUniqueId:function(t){this.uniqueId=t},handleClick:function(){this.uniqueId&&this.AccordionItemController.toggleOpen(this.uniqueId)},collapse:function(){this.AccordionItemController.setOpen(this.uniqueId,!1)},toggleCollapsed:function(){this.AccordionItemController.toggleOpen(this.uniqueId)},doTheSlide:function(){var t=this,n=this.$refs.body;!0===this.isOpen?(this.showCardContent=!0,this.$nextTick().then(function(){t.adjustHeight(n,n.scrollHeight)})):this.slideUp(n)},adjustHeight:function(t,n){t.style.height="".concat(n,"px")},slideUp:function(t){"auto"===t.style.height&&(t.style.height="".concat(t.scrollHeight,"px")),t.style.height="0px"},autoHeightStart:function(t){var n=this;this.autoHeightInterval&&this.autoHeightStop(),this.autoHeightInterval=setInterval(function(){try{var i=n.$refs.bodyContent.scrollHeight+n.$refs.bodyFooter.scrollHeight+1;"0px"!==t.style.height&&i!==t.style.height&&n.isOpen&&n.adjustHeight(t,i)}catch(e){n.autoHeightStop()}},100)},autoHeightStop:function(){clearInterval(this.autoHeightInterval),this.autoHeightInterval=null}}};if(typeof d==="function"){d=d.options}Object.assign(d,function(){var render=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{class:_vm.card_classes},[_c("div",{staticClass:"card-header",on:{"click":_vm.handleClick}},[_c("p",{staticClass:"card-header-title"},[_vm._t("title")],2),_vm._v(" "),_c("p",{staticClass:"card-header-icon"},[!_vm.usingCustomIcon?_c("span",{staticClass:"icon"},[_vm.showCaret?_c("span",{class:_vm.dropdownIconClasses,style:_vm.iconStyle},[_c("svg",{attrs:{"viewBox":"0 0 129 129"}},[_c("g",[_c("path",{attrs:{"d":"M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"}})])])]):_vm._e(),_vm._v(" "),_vm.showPlus||_vm.showMinus?_c("PlusMinus",{attrs:{"minus":_vm.showMinus}}):_vm._e()],1):_c("span",{staticClass:"icon"},[_vm._t("icon"),_vm._v(" "),_vm.isOpen?_vm._t("icon-open"):_vm._t("icon-closed")],2)])]),_vm._v(" "),_c("div",{ref:"body",staticClass:"accordion-body",style:_vm.slideStyle},[_c("div",{ref:"bodyContent",class:_vm.card_content_classes},[_vm._t("content")],2),_vm._v(" "),_c("div",{ref:"bodyFooter",class:_vm.footerClasses},[_vm._t("footer")],2)])])};var staticRenderFns=[];return{render:render,staticRenderFns:staticRenderFns,_compiled:true,_scopeId:"data-v-717e16",functional:undefined}}());b.install=e;var n={install:e},j=null;"undefined"!=typeof window?j=window.Vue:"undefined"!=typeof h&&(j=h.Vue),j&&j.use(n);var p=c;b.BulmaAccordion=p;var q=d;b.BulmaAccordionItem=q;if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=b}else if(typeof define==="function"&&define.amd){define(function(){return b})}})();