@nativescript/template-tab-navigation-vue 9.0.1 → 9.0.3

package/App_Resources/iOS/Info.plist

@@ -15,11 +15,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
+	<string>1.0.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0</string>
+	<string>1.0.0</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>UILaunchStoryboardName</key>

package/app/app.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+ActionBar {
+    background-color: #65adf1;
+    color: white;
+}
+
+.fas {
+    font-family: 'Font Awesome 5 Free', 'fa-solid-900';
+    font-weight: 900;
+}
+
+.far {
+    font-family: 'Font Awesome 5 Free', 'fa-regular-400';
+    font-weight: 400;
+}
+
+.fab {
+    font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
+    font-weight: 400;
+}

package/app/app.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'nativescript-vue'
+
+import App from './components/App.vue'
+
+createApp(App).start()

package/app/components/App.vue

@@ -1,44 +1,36 @@
-<template lang="html">
+<template>
     <TabView androidTabsPosition="bottom">
         <TabViewItem title="Home">
             <Frame id="items">
-                <Items/>
+                <Items />
             </Frame>
         </TabViewItem>
 
         <TabViewItem title="Browse">
             <Frame id="browse">
-                <Browse/>
+                <Browse />
             </Frame>
         </TabViewItem>
 
         <TabViewItem title="Search">
             <Frame id="search">
-                <Search/>
+                <Search />
             </Frame>
         </TabViewItem>
     </TabView>
 </template>
 
-<script>
-  import Items from "./Items.vue";
-  import Browse from "./Browse.vue";
-  import Search from "./Search.vue";
+<script lang="ts">
+  import { defineComponent } from 'nativescript-vue'
+  import Items from './Items.vue'
+  import Browse from './Browse.vue'
+  import Search from './Search.vue'
 
-  export default {
+  export default defineComponent({
     components: {
       Items,
       Browse,
       Search
     }
-  };
+  })
 </script>
-
-<style lang="scss">
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>

package/app/components/Browse.vue

@@ -1,31 +1,18 @@
-<template lang="html">
+<template>
     <Page>
         <ActionBar>
-            <Label text="Browse"></Label>
+            <Label text="Browse"/>
         </ActionBar>
 
-        <GridLayout class="page__content">
-            <Label class="page__content-icon far" text.decode="&#xf1ea;"></Label>
-            <Label class="page__content-placeholder" :text="message"></Label>
+        <GridLayout>
+            <Label class="far text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf1ea;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Browse page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
-<script>
-  export default {
-    data() {
-      return {
-        message: "<!-- Browse page content goes here -->"
-      };
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
+<script lang="ts">
+  import { defineComponent } from 'nativescript-vue'
 
-    // Custom styles
-
-</style>
+  export default defineComponent({})
+</script>

package/app/components/ItemDetails.vue

@@ -2,26 +2,19 @@
     <Page>
         <ActionBar>
             <NavigationButton @tap="$navigateBack()" android.systemIcon="ic_menu_back"/>
-            <Label :text="item.name"></Label>
+            <Label :text="item.name"/>
         </ActionBar>
 
         <GridLayout>
-            <Label class="m-10 h3" :text="item.description" verticalAlignment="top"></Label>
+            <Label class="m-2 text-lg" :text="item.description" verticalAlignment="top"/>
         </GridLayout>
     </Page>
 </template>
 
-<script>
-  export default {
-    props: ["item"],
-  };
-</script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
+<script lang="ts">
+  import { defineComponent } from 'nativescript-vue'
 
-    // Custom styles
-
-</style>
+  export default defineComponent({
+    props: ['item']
+  })
+</script>

package/app/components/Items.vue

@@ -1,115 +1,59 @@
 <template>
     <Page>
         <ActionBar>
-            <Label text="Home"></Label>
+            <Label text="Home"/>
         </ActionBar>
 
-        <ListView for="item in items" @itemTap="onItemTap">
-            <v-template>
+        <ListView :items="items" @itemTap="onItemTap">
+            <template #default="{ item }">
                 <StackLayout orientation="horizontal">
-                    <Label :text="item.name" textWrap="true"></Label>
+                    <Label :text="item.name" textWrap="true"/>
                 </StackLayout>
-            </v-template>
+            </template>
         </ListView>
     </Page>
 </template>
 
-<script>
-  import ItemDetails from "./ItemDetails";
+<script lang="ts">
+  import { defineComponent, $navigateTo } from 'nativescript-vue'
+  import ItemDetails from './ItemDetails.vue'
 
-  export default {
+  export default defineComponent({
     data() {
       return {
         items: [
-          {
-            name: "Item 1",
-            description: "Description for Item 1"
-          },
-          {
-            name: "Item 2",
-            description: "Description for Item 2"
-          },
-          {
-            name: "Item 3",
-            description: "Description for Item 3"
-          },
-          {
-            name: "Item 4",
-            description: "Description for Item 4"
-          },
-          {
-            name: "Item 5",
-            description: "Description for Item 5"
-          },
-          {
-            name: "Item 6",
-            description: "Description for Item 6"
-          },
-          {
-            name: "Item 7",
-            description: "Description for Item 7"
-          },
-          {
-            name: "Item 8",
-            description: "Description for Item 8"
-          },
-          {
-            name: "Item 9",
-            description: "Description for Item 9"
-          },
-          {
-            name: "Item 10",
-            description: "Description for Item 10"
-          },
-          {
-            name: "Item 11",
-            description: "Description for Item 11"
-          },
-          {
-            name: "Item 12",
-            description: "Description for Item 12"
-          },
-          {
-            name: "Item 13",
-            description: "Description for Item 13"
-          },
-          {
-            name: "Item 14",
-            description: "Description for Item 14"
-          },
-          {
-            name: "Item 15",
-            description: "Description for Item 15"
-          },
-          {
-            name: "Item 16",
-            description: "Description for Item 16"
-          }
+          { name: "Item 1", description: "Description for Item 1" },
+          { name: "Item 2", description: "Description for Item 2" },
+          { name: "Item 3", description: "Description for Item 3" },
+          { name: "Item 4", description: "Description for Item 4" },
+          { name: "Item 5", description: "Description for Item 5" },
+          { name: "Item 6", description: "Description for Item 6" },
+          { name: "Item 7", description: "Description for Item 7" },
+          { name: "Item 8", description: "Description for Item 8" },
+          { name: "Item 9", description: "Description for Item 9" },
+          { name: "Item 10", description: "Description for Item 10" },
+          { name: "Item 11", description: "Description for Item 11" },
+          { name: "Item 12", description: "Description for Item 12" },
+          { name: "Item 13", description: "Description for Item 13" },
+          { name: "Item 14", description: "Description for Item 14" },
+          { name: "Item 15", description: "Description for Item 15" },
+          { name: "Item 16", description: "Description for Item 16" }
         ]
-      };
+      }
     },
     methods: {
-      onItemTap(args) {
-        this.$navigateTo(ItemDetails, {
+      onItemTap(args: any) {
+        $navigateTo(ItemDetails, {
           frame: 'items',
-          props: {item: args.item},
+          props: { item: args.item },
           animated: true,
           transition: {
             name: "slide",
             duration: 200,
             curve: "ease"
           }
-        });
+        })
       }
     }
-  };
+  })
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>

package/app/components/Search.vue

@@ -1,31 +1,18 @@
-<template lang="html">
+<template>
     <Page>
         <ActionBar>
-            <Label text="Search"></Label>
+            <Label text="Search"/>
         </ActionBar>
 
-        <GridLayout class="page__content">
-            <Label class="page__content-icon fas" text.decode="&#xf002;"></Label>
-            <Label class="page__content-placeholder" :text="message"></Label>
+        <GridLayout>
+            <Label class="fas text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf002;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Search page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
-<script>
-  export default {
-    data() {
-      return {
-        message: "<!-- Search page content goes here -->"
-      };
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
+<script lang="ts">
+  import { defineComponent } from 'nativescript-vue'
 
-    // Custom styles
-
-</style>
+  export default defineComponent({})
+</script>

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nativescript/template-tab-navigation-vue",
-  "main": "app/app.js",
+  "main": "app/app.ts",
   "displayName": "Tabs",
-  "version": "9.0.1",
+  "version": "9.0.3",
   "description": "Tabbed interface template using Vue",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -24,7 +24,8 @@
     "tools",
     "!tools/assets",
     ".editorconfig",
-    "jsconfig.json"
+    "types",
+    "tsconfig.json"
   ],
   "keywords": [
     "nstudio",
@@ -41,11 +42,14 @@
   ],
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "@nativescript/theme": "^3.1.0",
-    "nativescript-vue": "~2.9.3"
+    "nativescript-vue": "^3.0.0"
   },
   "devDependencies": {
-    "@nativescript/webpack": "5.0.24",
-    "nativescript-vue-template-compiler": "~2.9.3"
+    "@nativescript/tailwind": "^4.0.0",
+    "@nativescript/types": "~9.0.0",
+    "@nativescript/webpack": "~5.0.31",
+    "@types/node": "^20.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.8.0"
   }
 }

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ES2020",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": ["dom", "ESNext"],
+    "sourceMap": true,
+    "noEmitHelpers": true,
+    "importHelpers": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["app/*"],
+      "@/*": ["app/*"]
+    },
+    "typeRoots": ["types"],
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true
+  },
+  "include": ["app", "types"],
+  "exclude": ["node_modules", "platforms"]
+}

package/types/references.d.ts

@@ -0,0 +1 @@
+/// <reference path="../node_modules/@nativescript/types/index.d.ts" />

package/types/shims.vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'nativescript-vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/app/_app-common.scss

@@ -1,46 +0,0 @@
-@import '@nativescript/theme/core';
-@import '@nativescript/theme/default';
-
-// Place any CSS rules you want to apply on both iOS and Android here.
-// This is where the vast majority of your CSS code goes.
-
-// Font icon class
-.fab {
-  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
-  font-weight: 400;
-}
-
-.fas {
-  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
-  font-weight: 900;
-}
-
-.far {
-  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
-  font-weight: 400;
-}
-
-// Custom tabstrip item class
-.navigation__item {
-  &:active,
-  &:active Label {
-    @include colorize($color: complementary);
-  }
-}
-
-// Common page class
-.page__content {
-  &-icon,
-  &-placeholder {
-    color: const(grey);
-    font-size: 20;
-    vertical-align: center;
-    horizontal-align: center;
-  }
-
-  &-icon {
-    font-size: 72;
-    vertical-align: top;
-    margin-top: 20%;
-  }
-}

package/app/app.android.scss

@@ -1,4 +0,0 @@
-// Import common styles
-@import 'app-common';
-
-// Place any CSS rules you want to apply only on Android here

package/app/app.ios.scss

@@ -1,4 +0,0 @@
-// Import common styles
-@import 'app-common';
-
-// Place any CSS rules you want to apply only on iOS here

package/app/app.js

@@ -1,7 +0,0 @@
-import Vue from 'nativescript-vue'
-
-import App from './components/App'
-
-new Vue({
-  render: (h) => h(App),
-}).$start()

package/jsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "./",
-    "paths": {
-      "~/*": ["app/*"],
-      "@/*": ["app/*"]
-    }
-  },
-  "include": ["app/**/*"]
-}