Added TabView compoenents, needs some clean up

rigor789 · rigor789 · commit f30baca13eab · 2017-05-02T22:11:46.000+01:00
diff --git a/nativescript-vue/dist/index.js b/nativescript-vue/dist/index.js
diff --git a/nativescript-vue/dist/index.js.map b/nativescript-vue/dist/index.js.map
diff --git a/nativescript-vue/platform/nativescript/element-registry.js b/nativescript-vue/platform/nativescript/element-registry.js
@@ -116,12 +116,17 @@ registerElement("Switch", () => require("ui/switch").Switch, {
         event: 'checkedChange'
     }
 });
-registerElement("TabView", () => require("ui/tab-view").TabView, {
+
+registerElement("NativeTabView", () => require("ui/tab-view").TabView, {
     model: {
         prop: 'selectedIndex',
         event: 'selectedIndexChange'
     }
 });
+registerElement("NativeTabViewItem", () => require("ui/tab-view").TabViewItem, {
+    skipAddToDom: true
+});
+
 registerElement("TextField", () => require("ui/text-field").TextField);
 registerElement("TextView", () => require("ui/text-view").TextView);
 registerElement("TimePicker", () => require("ui/time-picker").TimePicker, {
diff --git a/nativescript-vue/platform/nativescript/framework.js b/nativescript-vue/platform/nativescript/framework.js
@@ -1 +1,5 @@
+console.keys = function (object) {
+    console.dir(Object.keys(object))
+}
+
 export {default} from './runtime/index'
diff --git a/nativescript-vue/platform/nativescript/runtime/components/index.js b/nativescript-vue/platform/nativescript/runtime/components/index.js
@@ -1,5 +1,9 @@
 import ListView from './list-view'
+import TabView from './tab-view'
+import TabViewItem from './tab-view-item'
 
 export default {
-    ListView
+    ListView,
+    TabView,
+    TabViewItem,
 }
diff --git a/nativescript-vue/platform/nativescript/runtime/components/tab-view-item.js b/nativescript-vue/platform/nativescript/runtime/components/tab-view-item.js
@@ -0,0 +1,17 @@
+import {warn} from 'core/util/debug'
+
+export default {
+    name: 'tab-view-item',
+
+    template: `<native-tab-view-item ref="tabViewItem"><slot></slot></native-tab-view-item>`,
+
+    mounted() {
+        if (this.$el.childNodes.length > 1) {
+            warn('TabViewItem should contain only 1 root element', this)
+        }
+
+        let _nativeView = this.$refs.tabViewItem.nativeView
+        _nativeView.view = this.$el.childNodes[0].nativeView
+        this.$parent.registerTab(_nativeView)
+    }
+}
diff --git a/nativescript-vue/platform/nativescript/runtime/components/tab-view.js b/nativescript-vue/platform/nativescript/runtime/components/tab-view.js
@@ -0,0 +1,27 @@
+export default {
+    name: 'tab-view',
+
+    props: ['selectedTab'],
+
+    template: `<native-tab-view ref="tabView" v-model="selectedIndex"><slot></slot></native-tab-view>`,
+
+    data() {
+        return {
+            selectedIndex: 0
+        }
+    },
+
+    watch: {
+        'selectedTab'(index) {
+            this.selectedIndex = index
+        }
+    },
+
+    methods: {
+        registerTab(tabView) {
+            let items = this.$refs.tabView.nativeView.items || []
+
+            this.$refs.tabView.setAttribute('items', items.concat([tabView]))
+        }
+    }
+}
diff --git a/vue-sample/app/app-with-tab-view.js b/vue-sample/app/app-with-tab-view.js
@@ -0,0 +1,27 @@
+const Vue = require('nativescript-vue/dist/index')
+
+let app = new Vue({
+    data: {
+        selectedTab: 0,
+        tabs: [
+            {title: 'First Tab', text: 'im the first tab'},
+            {title: 'Second Tab', text: 'im the second tab'},
+            {title: 'Third Tab', text: 'im the third tab'},
+        ]
+    },
+
+    template: `
+        <page>
+            <stack-layout>
+                <button @tap="tabs.push({title: 'added', text: 'added tab'})">Click me!</button>
+                <tab-view :selectedIndex="selectedTab">
+                    <tab-view-item  v-for="(tab, i) in tabs" key="i" :title="tab.title">
+                        <label>{{ tab.text }}</label>
+                    </tab-view-item>
+                </tab-view>
+            </stack-layout>
+        </page>
+    `,
+})
+
+app.$start()
