demo(vue): more tests

Author: farfromrefug

demo-snippets/vue/ColorFilter.vue

@@ -5,7 +5,7 @@
         </ActionBar>
 
         <GridLayout rows="*, auto, auto">
-                <NSZoomImg backgroundColor="yellow" ref="opacityImg" placeholderImageUri="res://logo" :colorMatrix="colorMatrix" :src="src"> </NSZoomImg>
+                <NSImg backgroundColor="yellow" ref="opacityImg" placeholderImageUri="res://logo" :colorMatrix="colorMatrix" :src="src"> </NSImg>
                 <StackLayout orientation="horizontal"  row="1"> 
                     <Button text="nightVision" row="1" @tap="onSetNightVision"></Button>
             <Button text="polaroid"  @tap="onSetPolaroid"></Button>
@@ -47,9 +47,9 @@ export default {
      data: function() {
         return {
             colorMatrix:filters.nightVision,
-            src:'~/images/dessert.jpg',
+            src:'~/assets/images/dessert.jpg',
             // warning image source native android image will not be released!
-            imgSource: ImageSource.fromFileSync('~/images/dessert.jpg')
+            // imgSource: ImageSource.fromFileSync('~/assets/images/dessert.jpg')
         };
     },
     methods: {
@@ -69,7 +69,7 @@ export default {
             this.colorMatrix = null
         },
         onChangeImage(){
-            this.src= this.src=== '~/images/dessert.jpg' ? '~/images/drink.jpg': '~/images/dessert.jpg';
+            this.src= this.src=== '~/assets/images/dessert.jpg' ? '~/assets/images/drink.jpg': '~/assets/images/dessert.jpg';
         }
     }
 };

demo-snippets/vue/Details.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+</script>
+
+<template>
+  <Page >
+    <ActionBar>
+            <Label text="Details" />
+        </ActionBar>
+    <GridLayout rows="auto, *">
+      <Img
+          height="200"
+          row="1"
+          width="200"
+          src="https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TWV4aWNhbiUyMGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
+        />
+    </GridLayout>
+  </Page>
+</template>

demo-snippets/vue/NavigationTest.vue

@@ -0,0 +1,55 @@
+<template>
+    <Page>
+        <ActionBar>
+            <Label text="NavigationTest" />
+        </ActionBar>
+
+        <GridLayout rows="auto,*, auto">
+        <Img
+          height="200"
+          width="200"
+          src="https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TWV4aWNhbiUyMGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
+        />
+
+        <Button
+          row="2"
+          text="View Details"
+          @tap="onNavigate"
+          class="mt-4 px-4 py-2 bg-white border-2 border-blue-400 rounded-lg"
+          horizontalAlignment="center"
+        >
+        </Button>
+      </StackLayout>
+        </GridLayout>
+    </Page>
+</template>
+
+<script lang="ts">
+import { ImageSource } from '@nativescript/core';
+import Details from './Details.vue';
+
+export default {
+    methods: {
+        onNavigate(args) {
+            this.$navigateTo(Details, {transition: {name: 'slideLeft', duration: 2000}});
+        },
+    }
+};
+</script>
+
+<style scoped lang="scss">
+ActionBar {
+    background-color: #42b883;
+}
+.item {
+    padding: 10;
+    color: white;
+    .title {
+        font-size: 17;
+        font-weight: bold;
+    }
+    .subtitle {
+        font-size: 14;
+    }
+}
+</style>

demo-snippets/vue/ZoomImage.vue

@@ -1,7 +1,7 @@
 <template>
     <Page>
         <ActionBar>
-            <Label text="Simple Grid" />
+            <Label text="Zoom Image" />
         </ActionBar>
 
         <NSZoomImg :src="imgSource"/>
@@ -15,7 +15,7 @@ export default {
     data: function() {
         return {
             // warning image source native android image will not be released!
-            imgSource: ImageSource.fromFileSync('~/images/dessert.jpg')
+            imgSource: ImageSource.fromFileSync('~/assets/images/dessert.jpg')
         };
     },
 };

demo-snippets/vue/install.ts

@@ -9,6 +9,7 @@ import { installMixins } from '@nativescript-community/ui-image-colorfilter';
 import Simple from './Simple.vue';
 import ZoomImage from './ZoomImage.vue';
 import ColorFilter from './ColorFilter.vue';
+import NavigationTest from './NavigationTest.vue';
 
 Trace.addCategories('NativescriptImage');
 Trace.enable();
@@ -22,6 +23,7 @@ export function installPlugin() {
 
 export const demos = [
     { name: 'Simple', path: 'simple', component: Simple },
+    { name: 'NavigationTest', path: 'navigation', component: NavigationTest },
     { name: 'ZoomImage', path: 'zoom', component: ZoomImage },
     { name: 'ColorFilter', path: 'color-filter', component: ColorFilter }
 ];