From 188a0bf929d1eb7e77b3934666e9af5c78a99d69 Mon Sep 17 00:00:00 2001
From: Manuel Saelices <msaelices@gmail.com>
Date: Mon, 18 May 2020 00:39:39 +0200
Subject: [PATCH] feat(runtime): create Tabs component and improve demo app
 (WIP)

---
 apps/demo/app/Tabs.js                   | 70 +++++++++++++------------
 packages/runtime/src/components/Tabs.ts | 17 ++++++
 packages/runtime/src/index.ts           |  1 +
 packages/runtime/src/registry.ts        |  2 +-
 4 files changed, 55 insertions(+), 35 deletions(-)
 create mode 100644 packages/runtime/src/components/Tabs.ts

diff --git a/apps/demo/app/Tabs.js b/apps/demo/app/Tabs.js
index 0f9f1eaf..0e52d345 100644
--- a/apps/demo/app/Tabs.js
+++ b/apps/demo/app/Tabs.js
@@ -1,39 +1,41 @@
-import PageComp from '~/PageComp'
-import { ref } from 'nativescript-vue'
+import { Tabs } from 'nativescript-vue'
+
 export default {
-  template: `<Tabs selectedIndex="1">
-  <TabStrip>
-    <TabStripItem>
-      <Label text="Home"></Label>
-    </TabStripItem>
-    <TabStripItem>
-      <Label text="Account"></Label>
-    </TabStripItem>
-    <TabStripItem>
-      <Label text="Search"></Label>
-    </TabStripItem>
-  </TabStrip>
-  <TabContentItem>
-    <GridLayout>
-      <Label text="Home Page"></Label>
-    </GridLayout>
-  </TabContentItem>
-  <TabContentItem>
-    <GridLayout>
-      <Label text="Account Page"></Label>
-    </GridLayout>
-  </TabContentItem>
-  <TabContentItem>
-    <GridLayout>
-      <Label text="Search Page"></Label>
-    </GridLayout>
-  </TabContentItem>
-</Tabs>`,
-  data() {
-    return {}
+  components: {
+    Tabs,
   },
-  watch: {
-    model(value) {},
+  template: `
+<StackLayout>
+  <Label :text="activeTab" />
+  <Button text="Add tab" @tap="tabs.push({title: 'new', text: 'new tab'})" />
+  <Button text="Go last" @tap="activeTab = tabs.length - 1" />
+
+  <Tabs v-model="activeTab">
+    <TabStrip>
+      <TabStripItem
+        v-for="(tab, i) in tabs"
+        :key="i + tab.title"
+        :title="tab.title">
+      </TabStripItem>
+    </TabStrip>
+    <TabContentItem
+      v-for="(tab, i) in tabs"
+      :key="i + tab.title">
+      <GridLayout>
+        <Label :text="tab.text" />
+      </GridLayout>
+    </TabContentItem>
+  </Tabs>
+</StackLayout>`,
+  data() {
+    return {
+      activeTab: 1,
+      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' },
+      ],
+    }
   },
   mounted() {},
 }
diff --git a/packages/runtime/src/components/Tabs.ts b/packages/runtime/src/components/Tabs.ts
new file mode 100644
index 00000000..adfc58f1
--- /dev/null
+++ b/packages/runtime/src/components/Tabs.ts
@@ -0,0 +1,17 @@
+import { FunctionalComponent, h } from '@vue/runtime-core'
+import { NSVElement } from '../nodes'
+
+export const Tabs: FunctionalComponent = (props, ctx) => {
+  return h(
+    'InternalTabs',
+    {
+      ...ctx.attrs,
+      onVnodeMounted(vnode) {
+        const el = vnode.el as NSVElement
+        console.log(el)
+        // TODO: Implement
+      },
+    },
+    ctx.slots.default ? ctx.slots.default() : undefined
+  )
+}
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
index dd6d4fb1..401f6c52 100644
--- a/packages/runtime/src/index.ts
+++ b/packages/runtime/src/index.ts
@@ -79,5 +79,6 @@ export { vShow } from './directives/vShow'
 // Runtime components
 export { ActionBar } from './components/ActionBar'
 export { ListView } from './components/ListView'
+export { Tabs } from './components/Tabs'
 
 export * from '@vue/runtime-core'
diff --git a/packages/runtime/src/registry.ts b/packages/runtime/src/registry.ts
index fdb401f7..0e194d38 100644
--- a/packages/runtime/src/registry.ts
+++ b/packages/runtime/src/registry.ts
@@ -311,7 +311,7 @@ if (!__TEST__) {
     }
   )
   registerElement(
-    'Tabs',
+    'InternalTabs',
     () => require('@nativescript/core').Tabs,
     {
       model: {