Skip to content

Commit

Permalink
Possible solution for spatie#32
Browse files Browse the repository at this point in the history
- 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.
  • Loading branch information
JBtje committed Jun 6, 2018
1 parent 88b969c commit 29a10d4
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 4 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
34 changes: 31 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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>
Expand Down Expand Up @@ -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.
Expand Down
8 changes: 7 additions & 1 deletion src/components/Tabs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
data: () => ({
tabs: [],
activeTabHash: '',
lastActiveTabHash: '',
}),
computed: {
Expand Down Expand Up @@ -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);
},
Expand Down

0 comments on commit 29a10d4

Please sign in to comment.