feat(runtime): create Tabs component and improve demo app (WIP)

rigor789 · May 17, 2020 · 188a0bf · 188a0bf
1 parent 5c3178d
commit 188a0bf
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -311,7 +311,7 @@ if (!__TEST__) {
     }
   )
   registerElement(
-    'Tabs',
+    'InternalTabs',
     () => require('@nativescript/core').Tabs,
     {
       model: {