chore: demo

Author: farfromrefug

demo-snippets/vue/ColorFilter.vue

@@ -30,7 +30,7 @@ const filters = {
 };
 
 export default {
-    data: function () {
+    data() {
         return {
             colorMatrix: filters.nightVision,
             src: '~/assets/images/dessert.jpg'

demo-snippets/vue/Details.vue

@@ -2,17 +2,12 @@
 </script>
 
 <template>
-  <Page >
-    <ActionBar>
+    <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>
+        <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

@@ -5,21 +5,10 @@
         </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"
-        />
+            <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>
+            <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>
         </GridLayout>
     </Page>
 </template>
@@ -31,8 +20,8 @@ import Details from './Details.vue';
 export default {
     methods: {
         onNavigate(args) {
-            this.$navigateTo(Details, {transition: {name: 'slideLeft', duration: 2000}});
-        },
+            this.$navigateTo(Details, { transition: { name: 'slideLeft', duration: 2000 } });
+        }
     }
 };
 </script>

demo-snippets/vue/Simple.vue

@@ -7,7 +7,7 @@
         <GridLayout rows="*, auto, auto, auto, auto, auto">
             <StackLayout orientation="horizontal">
                 <NSImg backgroundColor="yellow" height="400" ref="opacityImg" verticalAlignment="center" borderRadius="100" width="50%" src="~/assets/images/dessert.jpg"> </NSImg>
-                <NSImg backgroundColor="red" width="50%" height="100" verticalAlignment="center" borderRadius="100" :src="imgSource" > </NSImg>
+                <NSImg backgroundColor="red" width="50%" height="100" verticalAlignment="center" borderRadius="100" :src="imgSource"> </NSImg>
             </StackLayout>
             <Button text="Set 1" row="1" @tap="onSeOpacityTo1"></Button>
             <Button text="Set 0.5" row="2" @tap="onSeOpacityTo05"></Button>
@@ -22,7 +22,7 @@
 import { ImageSource } from '@nativescript/core';
 
 export default {
-     data: function() {
+    data() {
         return {
             // warning image source native android image will not be released!
             imgSource: ImageSource.fromFileSync('~/assets/images/drink.jpg')

demo-snippets/vue/ZoomImage.vue

@@ -4,20 +4,20 @@
             <Label text="Zoom Image" />
         </ActionBar>
 
-        <NSZoomImg :src="imgSource"/>
+        <NSZoomImg :src="imgSource" />
     </Page>
 </template>
 
 <script lang="ts">
 import { ImageSource } from '@nativescript/core';
 
 export default {
-    data: function() {
+    data() {
         return {
             // warning image source native android image will not be released!
-            imgSource: ImageSource.fromFileSync('~/assets/images/dessert.jpg')
+            imgSource: ImageSource.fromFileSync('~/assets/images/drink.jpg')
         };
-    },
+    }
 };
 </script>