fix change tab path functionality

Author: budiadiono

demo/src/demo/routes.ts

@@ -11,6 +11,7 @@ import { Numeric } from './numeric';
 import { Currency } from './currency';
 import { TabBasic } from './tab/basic';
 import { TabInteractive } from './tab/interactive';
+import { TabPath } from './tab/path';
 import { Button } from './button';
 import { Radio } from './radio';
 import { Checkbox } from './checkbox';
@@ -49,6 +50,7 @@ const m = [
 	{ group: 'component/datetime', text: 'DateTime', path: 'datetime', component: DateTime },
 	{ group: 'component/tab', text: 'Tab', path: 'tab/basic', component: TabBasic },
 	{ group: 'component/tab', text: 'Tab Interactive', path: 'tab/interactive', component: TabInteractive },
+	{ group: 'component/tab', text: 'Tab Path', path: 'tab/path', component: TabPath },
 	{ group: 'component/button', text: 'Buttons', path: 'button', component: Button },
 	{ group: 'component/radio', text: 'Radio', path: 'radio', component: Radio },
 	{ group: 'component/checkbox', text: 'Checkbox', path: 'checkbox', component: Checkbox },

demo/src/demo/tab/path/index.html

@@ -0,0 +1,11 @@
+<div>
+
+	<ui-tab id="tab-path-example">
+		<ui-tab-item caption="Tab 1" path="one">Contents of Tab 1</ui-tab-item>
+		<ui-tab-item caption="Tab 2" path="two">Contents of Tab 2</ui-tab-item>
+		<ui-tab-item caption="Tab 3" path="three">Contents of Tab 3</ui-tab-item>
+	</ui-tab>
+
+	<ui-button @click="tab1">Tab 1</ui-button> <ui-button @click="tab2">Tab 2</ui-button> <ui-button @click="tab3">Tab 3</ui-button>
+
+</div>

demo/src/demo/tab/path/index.ts

@@ -0,0 +1,18 @@
+import { Component } from 'vue-typed';
+import { Base } from '../../base'
+import * as Vue from 'vue'
+
+@Component({
+	template: require('./index.html')
+})
+export class TabPath extends Base  {
+	tab1() {
+		this.$ui.tab('#tab-path-example').changeTab('one')
+	}
+	tab2() {
+		this.$ui.tab('#tab-path-example').changeTab('two')
+	}
+	tab3() {
+		this.$ui.tab('#tab-path-example').changeTab('three')
+	}
+}

dist/vue-typed-ui.js

@@ -1852,13 +1852,13 @@ var Tab = function (_TabBase2) {
         var _this = possibleConstructorReturn(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));
 
         _this.items = [];
+        _this.firstTab = undefined;
         return _this;
     }
 
     createClass(Tab, [{
         key: 'created',
         value: function created() {
-            this.activeTab = this._tabName(1);
             this.items = [];
             this.updateStyle();
         }
@@ -1868,6 +1868,7 @@ var Tab = function (_TabBase2) {
             var _this2 = this;
 
             Vue.nextTick(function () {
+                _this2.activeTab = _this2.firstTab;
                 _this2._suiInit();
             });
         }
@@ -1885,7 +1886,8 @@ var Tab = function (_TabBase2) {
         key: 'createItem',
         value: function createItem(item) {
             this.items.push(item);
-            var tabName = this._tabName(this.items.length);
+            var tabName = item.path || this._tabName(this.items.length);
+            if (!this.firstTab) this.firstTab = tabName;
             if (item.active == true) {
                 this.activeTab = tabName;
             }
@@ -1955,6 +1957,9 @@ __decorate([vueTyped.Prop({
 __decorate([vueTyped.Prop({
     type: Boolean
 })], _TabItemBase.prototype, "active", void 0);
+__decorate([vueTyped.Prop({
+    type: String
+})], _TabItemBase.prototype, "path", void 0);
 
 var TabItem = function (_TabItemBase2) {
     inherits(TabItem, _TabItemBase2);
@@ -3039,7 +3044,7 @@ function tab(instance, $this) {
     return function (element) {
         return {
             changeTab: function changeTab(path) {
-                return $(element).tab('change tab', path);
+                return $(element).find('.item').tab('change tab', path);
             }
         };
     };

doc/api.json

@@ -1039,6 +1039,10 @@
       "caption": {
         "type": "string",
         "description": "Tab caption"
+      },
+      "path": {
+        "type": "string",
+        "description": "Name of path"
       }
     },
     "methods": {}

src/components/containers/tab-item/_base.ts

@@ -28,4 +28,14 @@ export abstract class _TabItemBase extends Vue {
     })
     active: boolean
 
+    /**
+     * Name of path
+     * 
+     * @type {string}
+     */
+    @Prop({
+        type: String
+    })
+    path: string
+
 }

src/components/containers/tab-item/schema/props.json

@@ -6,10 +6,14 @@
 		"caption": {
 			"type": "string",
 			"description": "Tab caption"
-		},
+		},		
 		"active": {
 			"type": "boolean",
 			"description": "Set tab to active"
+		},
+		"path": {
+			"type": "string",
+			"description": "Name of path"
 		}
 	}
 }

src/components/containers/tab/index.ts

@@ -21,15 +21,15 @@ export class Tab extends _TabBase {
 
 	items: any[] = []
 
-	created() {
-		this.activeTab = this._tabName(1);
+	created() {		
 		this.items = [];
 		this.updateStyle();
 	}
 
 	mounted() {
 
 		Vue.nextTick(() => {
+			this.activeTab = this.firstTab;
 			this._suiInit();
 		})
 	}
@@ -43,10 +43,13 @@ export class Tab extends _TabBase {
 
 	}
 
+	firstTab = undefined
+
 	createItem(item): string {
 
 		this.items.push(item);
-		var tabName = this._tabName(this.items.length);
+		let tabName = item.path || this._tabName(this.items.length);
+		if (!this.firstTab) this.firstTab = tabName
 
 		if (item.active == true) {
 			this.activeTab = tabName;

src/components/containers/tab/methods.ts

@@ -4,7 +4,7 @@ import { Tab } from '../../../../lib/methods'
 export function tab(instance, $this: Vue) {
 	return function (element: string | HTMLElement | JQuery): Tab {
 		return {
-			changeTab(path: string) {  return $(element).tab('change tab', path);  }
+			changeTab(path: string) {  return $(element).find('.item').tab('change tab', path);  }
 		}
 	}
 }