Merge pull request spatie#70 from dissolve/69-default-tab

Issue spatie#69: Allow setting default tab

Author: sebastiandedeyne

CHANGELOG.md

@@ -2,7 +2,8 @@
 
 All notable changes to `vue-tabs-component` will be documented in this file
 
-## 1.5.0 - 2018-06-06
+## 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
 

README.md

@@ -182,6 +182,22 @@ You can customize that fragment by using the `id` attribute.
 
 Clicking on `My tab` will then append `#custom-fragment` to the url.
 
+
+### Setting a default tab
+
+When disabling the cache, it can be useful to specify a default tab to load which is not the first one.  You can select this by passing the `defaultTabHash` option.
+
+```html
+<tabs :options="{ defaultTabHash: 'second-tab' }">
+    <tab id="first-tab" name="First tab">
+        First tab content
+    </tab>
+    <tab id="second-tab" name="Default tab">
+        Second tab content
+    </tab>
+</tabs>
+```
+
 ### CSS
 
 You can use the [CSS](docs/resources/tabs-component.css) from the docs as a starting point for your own styling.

src/components/Tabs.vue

@@ -38,6 +38,7 @@
                 required: false,
                 default: () => ({
                     useUrlFragment: true,
+                    defaultTabHash: null,
                 }),
             },
         },
@@ -74,6 +75,11 @@
                 return;
             }
 
+            if(this.options.defaultTabHash !== null && this.findTab("#" + this.options.defaultTabHash)) {
+                this.selectTab("#" + this.options.defaultTabHash);
+                return;
+            }
+
             if (this.tabs.length) {
                 this.selectTab(this.tabs[0].hash);
             }