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

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.js

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

package/app/components/App.vue

@@ -1,29 +1,29 @@
-<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";
+  import Items from './Items.vue'
+  import Browse from './Browse.vue'
+  import Search from './Search.vue'
 
   export default {
     components: {
@@ -31,14 +31,5 @@
       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,16 @@
-<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 -->"
-      };
-    }
-  }
+  export default {}
 </script>
-
-<style lang="scss" scoped>
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>

package/app/components/ItemDetails.vue

@@ -2,26 +2,17 @@
     <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"],
-  };
+    props: ['item']
+  }
 </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/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";
+  import { $navigateTo } from 'nativescript-vue'
+  import ItemDetails from './ItemDetails.vue'
 
   export default {
     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, {
+        $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,16 @@
-<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 -->"
-      };
-    }
-  }
+  export default {}
 </script>
-
-<style lang="scss" scoped>
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nativescript/template-tab-navigation-vue",
   "main": "app/app.js",
   "displayName": "Tabs",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Tabbed interface template using Vue",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -41,11 +41,11 @@
   ],
   "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/webpack": "~5.0.31",
+    "tailwindcss": "^4.0.0"
   }
 }

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