Issue spatie#69: Allow setting default tab

This adds the ability to set a defaultTabHash so that you can stop from
just arbitrarily displaying the first tab if nothing is selected.

This is especially useful when turning off caching

Tests passing, does not break functionality so bumping version in
changelog to 1.5.0

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to `vue-tabs-component` will be documented in this file
 
+## 1.5.0 - 2018-07-02
+- Added `defaultTabHash` option
+
 ## 1.4.0 - 2017-11-06
 - Added `isDisabled` prop to `Tab`
 

README.md

@@ -154,6 +154,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,
                 }),
             },
         },
@@ -72,6 +73,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);
             }