Merge branch 'master' into 69-default-tab

Author: sebastiandedeyne

CHANGELOG.md

@@ -2,8 +2,10 @@
 
 All notable changes to `vue-tabs-component` will be documented in this file
 
-## 1.5.0 - 2018-07-02
+## 1.5.0 - 2018-XX-XX
 - Added `defaultTabHash` option
+- 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",
@@ -42,7 +42,7 @@
     "vue": "^2.3.0",
     "vue-loader": "^12.0.3",
     "vue-template-compiler": "^2.3.0",
-    "webpack": "^2.3.3",
+    "webpack": "^3.12.0",
     "webpack-merge": "^4.1.0"
   },
   "jest": {

src/components/Tabs.vue

@@ -46,6 +46,8 @@
         data: () => ({
             tabs: [],
             activeTabHash: '',
+            activeTabIndex: 0,
+            lastActiveTabHash: '',
         }),
 
         computed: {
@@ -104,13 +106,21 @@
                     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.activeTabIndex = this.getTabIndex(selectedTabHash);
+
+                this.lastActiveTabHash = this.activeTabHash = selectedTab.hash;
 
                 expiringStorage.set(this.storageKey, selectedTab.hash, this.cacheLifetime);
             },
@@ -139,6 +149,30 @@
                     });
                 }
             },
+            
+            getTabIndex(hash){
+            	const tab = this.findTab(hash);
+            	
+            	return this.tabs.indexOf(tab);
+            },
+            
+			getTabHash(index){
+            	const tab = this.tabs.find(tab => this.tabs.indexOf(tab) === index);
+            	
+            	if (!tab) {
+					return;
+                }
+                
+                return tab.hash;
+			},
+            
+            getActiveTab(){
+            	return this.findTab(this.activeTabHash);
+            },
+            
+			getActiveTabIndex() {
+            	return this.getTabIndex(this.activeTabHash);
+            },
         },
     };
 </script>

webpack.config.js

@@ -9,7 +9,11 @@ module.exports = merge(require('./webpack.base'), {
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'index.js',
-        library: 'vue-tabs',
+        library: {
+            root: 'VueTabs',
+            amd: 'vue-tabs',
+            commonjs: 'vue-tabs'
+        },
         libraryTarget: 'umd',
     },