@nativescript/template-blank-vue-ts 9.0.0 → 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,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+ActionBar {
+    background-color: #65adf1;
+    color: white;
+}

package/app/components/Home.vue

@@ -1,16 +1,11 @@
 <template>
   <Page>
     <ActionBar>
-      <Label text="Home"/>
+      <Label text="Home" class="font-bold text-lg"/>
     </ActionBar>
 
     <GridLayout>
-      <Label class="info">
-        <FormattedString>
-          <Span class="fas" text.decode="&#xf135; "/>
-          <Span :text="message"/>
-        </FormattedString>
-      </Label>
+      <Label class="text-xl align-middle text-center text-gray-500" :text="message" @tap="logMessage" />
     </GridLayout>
   </Page>
 </template>
@@ -23,21 +18,18 @@
       message() {
         return "Blank {N}-Vue app";
       }
+    },
+
+    methods: {
+      logMessage() {
+        console.log('You have tapped the message!')
+      }
     }
   });
 </script>
 
-<style scoped lang="scss">
-  @import '@nativescript/theme/scss/variables/blue';
-
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-
-  .info {
+<style>
+  /* .info {
     font-size: 20;
-    horizontal-align: center;
-    vertical-align: center;
-  }
+  } */
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue-ts",
   "main": "app/app.ts",
   "displayName": "Blank Vue Typescript",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "description": "Blank Typescript template for NativeScript apps using Vue.",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -25,6 +25,7 @@
     "!tools/assets",
     "types",
     ".editorconfig",
+    "tailwind.config.js",
     "tsconfig.json"
   ],
   "keywords": [
@@ -42,14 +43,14 @@
   ],
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "@nativescript/theme": "^3.1.0",
     "nativescript-vue": "~2.9.3"
   },
   "devDependencies": {
     "@nativescript/types": "~9.0.0",
-    "@nativescript/webpack": "~5.0.25",
-    "@types/node": "~17.0.21",
+    "@nativescript/webpack": "5.0.24",
+    "@types/node": "^20.0.0",
     "nativescript-vue-template-compiler": "~2.9.3",
+    "tailwindcss": "~3.4.0",
     "typescript": "~5.4.0",
     "vue": "~2.6.12"
   }

package/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{css,html,vue,ts,tsx}'],
+  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
+  darkMode: ['class', '.ns-dark'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false, // disables browser-specific resets
+  },
+}

package/app/app.scss

@@ -1,21 +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;
-}