@vizuaalog/bulmajs - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

changelog.md

@@ -0,1 +1,7 @@
+# 0.6.0
+The reason for this being a large version jump is due to the complete overhaul of the documentation. While this doesn't change the functionality of the code, I feel like this is a large enough change to the project to warrant more than a 'patch' version bump.
+
++ [#36](https://github.com/VizuaaLOG/BulmaJS/issues/36) The navbar burger button now has the `is-active` class toggled.
++ [#22](https://github.com/VizuaaLOG/BulmaJS/issues/22) Documentation has had a redesign and a complete rewrite. If you find a typo please blame my keyboard ( :) ) and file an issue or submit a pull request.
+
 # 0.5.0
@@ -2,0 +8,0 @@ + [#38](https://github.com/VizuaaLOG/BulmaJS/pull/38) Adjust how plugins are initialised by using classes instead. Data attributes can still be used for customising the plugins behaviour, if supported. (closes [#20](https://github.com/VizuaaLOG/BulmaJS/issues/20))

dist/bulma.js

@@ -190,3 +190,3 @@ /******/ (function(modules) { // webpackBootstrap
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n            this.trigger.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n            this.trigger.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
 
@@ -215,3 +215,3 @@ /***/ }),
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem \n     * @param {number} index \n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @return {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        console.log(new Tabs(options));\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string}\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     * @returns {void}\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem The nav item we are changing to\n     * @param {number} index The internal index of the nav item we're changing to\n     * @returns {void}\n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @returns {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @returns {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        new Tabs(options);\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string} The class this plugin is responsible for\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
 
@@ -218,0 +218,0 @@ /***/ })

dist/navbar.js

@@ -94,3 +94,3 @@ /******/ (function(modules) { // webpackBootstrap
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n            this.trigger.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n            this.trigger.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
 
@@ -97,0 +97,0 @@ /***/ })

dist/tabs.js

@@ -94,3 +94,3 @@ /******/ (function(modules) { // webpackBootstrap
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem \n     * @param {number} index \n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @return {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        console.log(new Tabs(options));\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string}\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     * @returns {void}\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem The nav item we are changing to\n     * @param {number} index The internal index of the nav item we're changing to\n     * @returns {void}\n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @returns {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @returns {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        new Tabs(options);\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string} The class this plugin is responsible for\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
 
@@ -97,0 +97,0 @@ /***/ })

docs/assets/js/bulmajs/bulma.js

@@ -190,3 +190,3 @@ /******/ (function(modules) { // webpackBootstrap
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n            this.trigger.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n            this.trigger.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
 
@@ -215,3 +215,3 @@ /***/ }),
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem \n     * @param {number} index \n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @return {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        console.log(new Tabs(options));\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string}\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     * @returns {void}\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem The nav item we are changing to\n     * @param {number} index The internal index of the nav item we're changing to\n     * @returns {void}\n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @returns {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @returns {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        new Tabs(options);\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string} The class this plugin is responsible for\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
 
@@ -218,0 +218,0 @@ /***/ })

docs/assets/js/bulmajs/navbar.js

@@ -94,3 +94,3 @@ /******/ (function(modules) { // webpackBootstrap
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Navbar\n * @since  0.1.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Navbar {\n\n    static getRootClass() {\n        return 'navbar';\n    }\n\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created plugin instance\n     */\n    constructor(options) {\n        if (!options.element || !options.trigger || !options.target) {\n            throw new Error('[BulmaJS] The navbar component requires an element, trigger and target to function.');\n        }\n\n        /**\n         * The root navbar element.\n         * @type {HTMLElement}\n         */\n        this.root = options.element;\n\n        /**\n         * The element used for the trigger.\n         * @type {HTMLElement}\n         */\n        this.trigger = options.trigger;\n\n        /**\n         * The target element.\n         * @type {HTMLELement}\n         */\n        this.target = options.target;\n\n        this.registerEvents();\n    }\n\n    /**\n     * Register all the events this module needs.\n     * @return {undefined}\n     */\n    registerEvents() {\n        this.trigger.addEventListener('click', this.handleTriggerClick.bind(this));\n    }\n\n    /**\n     * Handle the click event on the trigger.\n     * @return {undefined}\n     */\n    handleTriggerClick() {\n        if (this.target.classList.contains('is-active')) {\n            this.target.classList.remove('is-active');\n            this.trigger.classList.remove('is-active');\n        } else {\n            this.target.classList.add('is-active');\n            this.trigger.classList.add('is-active');\n        }\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        new Navbar({\n            element: element,\n            trigger: element.querySelector('.navbar-burger'),\n            target: element.querySelector('.navbar-menu')\n        });\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('navbar', Navbar);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Navbar);\n\n//# sourceURL=webpack:///./src/plugins/navbar.js?");
 
@@ -97,0 +97,0 @@ /***/ })

docs/assets/js/bulmajs/tabs.js

@@ -94,3 +94,3 @@ /******/ (function(modules) { // webpackBootstrap
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem \n     * @param {number} index \n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @return {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @return {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        console.log(new Tabs(options));\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string}\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since  0.4.0\n * @author  Thomas Erbe <[e-mail]>\n */\nclass Tabs {\n    /**\n     * Plugin constructor\n     * @param  {Object} options The options object for this plugin\n     * @return {this} The newly created instance\n     */\n    constructor(options) {\n        if (!options) {\n            options = {};\n        }\n\n        /**\n         * The root tab element\n         * @param {HTMLElement}\n         */\n        this.root = options.hasOwnProperty('root') ? options.root : null;\n\n        /**\n         * Whether the tabs should be changed when the nav item is hovered over\n         * @param {boolean}\n         */\n        this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n        /**\n         * The tab nav container\n         * @param {HTMLElement}\n         */\n        this.nav = this.findNav();\n\n        /**\n         * The tab's nav items\n         * @param {HTMLElement[]}\n         */\n        this.navItems = this.findNavItems();\n\n        /**\n         * The tab content container\n         * @param {HTMLElement}\n         */\n        this.content = this.findContent();\n\n        /**\n         * The tab's content items\n         * @param {HTMLElement[]}\n         */\n        this.contentItems = this.findContentItems();\n\n        this.setupNavEvents();\n    }\n\n    /**\n     * Find the tab navigation container.\n     * @returns {HTMLElement} The navigation container\n     */\n    findNav() {\n        return this.root.querySelector('.tabs');\n    }\n\n    /**\n     * Find each individual tab item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findNavItems() {\n        return this.nav.querySelectorAll('li');\n    }\n\n    /**\n     * Find the tab content container.\n     * @returns {HTMLElement} The content container\n     */\n    findContent() {\n        return this.root.querySelector('.tabs-content');\n    }\n\n    /**\n     * Find each individual content item\n     * @returns {HTMLElement[]} An array of the found items\n     */\n    findContentItems() {\n        return this.content.querySelectorAll('li');\n    }\n\n    /**\n     * Setup the events to handle tab changing\n     * @returns {void}\n     */\n    setupNavEvents() {\n        this.navItems.forEach((navItem, index) => {\n            navItem.addEventListener('click', () => {\n                this.handleNavClick(navItem, index);\n            });\n\n            if (this.hover) {\n                navItem.addEventListener('mouseover', () => {\n                    this.handleNavClick(navItem, index);\n                });\n            }\n        });\n    }\n\n    /**\n     * Handle the changing of the visible tab\n     * @param {HTMLelement} navItem The nav item we are changing to\n     * @param {number} index The internal index of the nav item we're changing to\n     * @returns {void}\n     */\n    handleNavClick(navItem, index) {\n        this.navItems.forEach(navItem => {\n            navItem.classList.remove('is-active');\n        });\n\n        this.contentItems.forEach(contentItem => {\n            contentItem.classList.remove('is-active');\n        });\n\n        navItem.classList.add('is-active');\n        this.contentItems[index].classList.add('is-active');\n    }\n\n    /**\n     * Helper method used by the Bulma core to create a new instance.\n     * @param  {Object} options The options object for this instance\n     * @returns {Tabs} The newly created instance\n     */\n    static create(options) {\n        return new Tabs(options);\n    }\n\n    /**\n     * Handle parsing the DOMs data attribute API.\n     * @param {HTMLElement} element The root element for this instance\n     * @returns {undefined}\n     */\n    static handleDomParsing(element) {\n        let hover = element.hasAttribute('data-hover') ? true : false;\n\n        let options = {\n            root: element,\n            hover: hover\n        };\n\n        new Tabs(options);\n    }\n\n    /**\n     * The root class used for initialisation\n     * @returns {string} The class this plugin is responsible for\n     */\n    static getRootClass() {\n        return 'tabs-wrapper';\n    }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?");
 
@@ -97,0 +97,0 @@ /***/ })

package.json

 {
   "name": "@vizuaalog/bulmajs",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Unofficial javascript extension to the awesome Bulma CSS framework.",
@@ -12,3 +12,3 @@ "main": "src/bulma.js",
     "babel-preset-env": "^1.6.1",
-    "bulma": "^0.6.2",
+    "bulma": "^0.7.1",
     "eslint": "^4.19.0",
@@ -15,0 +15,0 @@ "webpack": "^4.1.0",

src/core.js

@@ -6,3 +6,3 @@ const Bulma = {
      */
-    VERSION: '0.5.0',
+    VERSION: '0.6.0',
 
@@ -9,0 +9,0 @@ /**

src/plugins/navbar.js

@@ -60,4 +60,6 @@ import Bulma from '../core';
             this.target.classList.remove('is-active');
+            this.trigger.classList.remove('is-active');
         } else {
             this.target.classList.add('is-active');
+            this.trigger.classList.add('is-active');
         }
@@ -64,0 +66,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

786433

increased by11.41%

Number of package files

127

increased by15.45%

Worsened metrics

Lines of code

4340

decreased by-2.32%

No dependency changes