Possible solution for spatie#32

- Store the last tab name
- If the tab name is the same, emit "clicked" and return.
- Updated readme, added the events.

Breaking:
- If a user clicks the tab that is already active, it will no longer emit "changed"

Suggested solution (already in place):
- Emit "clicked" when an active tab is clicked, emit "changed" when the tab actually changed.
- "clicked" can be used to update the content of the tab.

Author: JBtje

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.

src/components/Tabs.vue

@@ -45,6 +45,7 @@
         data: () => ({
             tabs: [],
             activeTabHash: '',
+            lastActiveTabHash: '',
         }),
 
         computed: {
@@ -98,13 +99,18 @@
                     return;
                 }
 
+                if (this.lastActiveTabHash === selectedTab.hash) {
+                    this.$emit('clicked', { tab: selectedTab });
+                    return;
+                }
+
                 this.tabs.forEach(tab => {
                     tab.isActive = (tab.hash === selectedTab.hash);
                 });
 
                 this.$emit('changed', { tab: selectedTab });
 
-                this.activeTabHash = selectedTab.hash;
+                this.lastActiveTabHash = this.activeTabHash = selectedTab.hash;
 
                 expiringStorage.set(this.storageKey, selectedTab.hash, this.cacheLifetime);
             },