Merge branch 'master' into add-utility-methods

Author: sebastiandedeyne

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to `vue-tabs-component` will be documented in this file
 
+## 1.5.0 - 2018-06-06
+- Fixed bug #32 `changed` event fires twice on each change
+- Added `clicked` event, fires when active tab is clicked
+
 ## 1.4.0 - 2017-11-06
 - Added `isDisabled` prop to `Tab`
 

README.md

@@ -1,4 +1,4 @@
-# A Vue component to easily render tabs
+# A Vue component to easily render tabs
 
 [![Latest Version on NPM](https://img.shields.io/npm/v/vue-tabs-component.svg?style=flat-square)](https://npmjs.com/package/vue-tabs-component)
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
@@ -8,10 +8,10 @@
 The package contains a [Vue](https://vuejs.org/) component to easily display some tabs.
 
 This is how they can be used:
-
+=
 ```html
 <div>
-    <tabs>
+    <tabs :options="{ useUrlFragment: false }" @clicked="tabClicked" @changed="tabChanged">
         <tab name="First tab">
             This is the content of the first tab
         </tab>
@@ -122,6 +122,34 @@ When using with other libraries that use the url fragment, you can disable modif
 </tabs>
 ```
 
+### Callbacks
+Tabs has two events to which you can bind: `changed` and `clicked`
+
+```html
+<tabs @clicked="tabClicked" @changed="tabChanged">
+  ...
+</tabs>
+```
+
+```js
+export default {
+    ...
+    methods: {
+        ...
+        tabClicked (selectedTab) {
+            console.log('Current tab re-clicked:' + selectedTab.tab.name);
+        },
+        tabChanged (selectedTab) {
+            console.log('Tab changed to:' + selectedTab.tab.name);
+        },
+        ...
+    }
+}
+```
+
+`changed` is emitted when the tab changes and can be used as handle to load data on request.
+`clicked` is emitted when an active tab is re-clicked and can be used to e.g. reload the data in the current tab.
+
 ### Adding a suffix and a prefix to the tab name
 
 You can add a suffix and a prefix to the tab by using the `suffix` and `prefix` attributes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tabs-component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A Vue component to easily render tabs",
   "main": "dist/index.js",
   "jsnext:main": "src/index.js",

src/components/Tabs.vue

@@ -46,6 +46,7 @@
             tabs: [],
             activeTabHash: '',
             activeTabIndex: 0,
+            lastActiveTabHash: '',
         }),
 
         computed: {
@@ -99,6 +100,11 @@
                     return;
                 }
 
+                if (this.lastActiveTabHash === selectedTab.hash) {
+                    this.$emit('clicked', { tab: selectedTab });
+                    return;
+                }
+
                 this.tabs.forEach(tab => {
                     tab.isActive = (tab.hash === selectedTab.hash);
                 });
@@ -108,6 +114,8 @@
                 this.activeTabHash = selectedTab.hash;
                 this.activeTabIndex = this.getTabIndex(selectedTabHash);
 
+                this.lastActiveTabHash = this.activeTabHash = selectedTab.hash;
+
                 expiringStorage.set(this.storageKey, selectedTab.hash, this.cacheLifetime);
             },