test: demo app

Author: farfromrefug

demo-vue/app/examples/BottomSheet.vue

@@ -20,8 +20,8 @@ import { EventData, View, Color } from '@nativescript/core';
 import { StackLayout } from '@nativescript/core';
 import { ActivityIndicator } from '@nativescript/core';
 import { Label } from '@nativescript/core';
-import BottomSheetInner  from './BottomSheetInner.vue';
-import BottomSheetInnerKeyboard  from './BottomSheetInnerKeyboard.vue';
+import BottomSheetInner from './BottomSheetInner.vue';
+import BottomSheetInnerKeyboard from './BottomSheetInnerKeyboard.vue';
 import { NativeScriptVue } from 'nativescript-vue';
 
 export const title = 'BottomSheet sample';
@@ -44,7 +44,7 @@ export default Vue.extend({
             switch (objId) {
                 case 'bottomsheet': {
                     (this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
-                        transparent:true,
+                        // transparent: true,
                         closeCallback: (...args) => {
                             console.log('bottom sheet closed', args);
                         }
@@ -53,7 +53,7 @@ export default Vue.extend({
                 }
                 case 'dont_ignore_top_safe_area': {
                     (this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
-                        ignoreTopSafeArea:false,
+                        ignoreTopSafeArea: false,
                         // transparent:true,
                         closeCallback: (...args) => {
                             console.log('bottom sheet closed', args);
@@ -64,7 +64,7 @@ export default Vue.extend({
                 case 'ignore_bottom_safe_area': {
                     (this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
                         // transparent:true,
-                        ignoreBottomSafeArea:true,
+                        ignoreBottomSafeArea: true,
                         closeCallback: (...args) => {
                             console.log('bottom sheet closed', args);
                         }
@@ -74,8 +74,8 @@ export default Vue.extend({
                 case 'dont_ignore_top_ignore_bottom_safe_area': {
                     (this as NativeScriptVue).$showBottomSheet(BottomSheetInner, {
                         // transparent:true,
-                        ignoreTopSafeArea:false,
-                        ignoreBottomSafeArea:true,
+                        ignoreTopSafeArea: false,
+                        ignoreBottomSafeArea: true,
                         closeCallback: (...args) => {
                             console.log('bottom sheet closed', args);
                         }
@@ -94,4 +94,4 @@ export default Vue.extend({
         }
     }
 });
-</script>
+</script>

demo-vue/app/examples/BottomSheetInner.vue

@@ -1,10 +1,15 @@
 <template>
-    <MDCardView @shownInBottomSheet="onShownInBottomSheet" borderRadius="20" elevation="30" backgroundColor="green">
-        <StackLayout>
-            <MDButton id="test1" text="test1" borderRadius="20" margin="20"  @tap="onButtonTap"/>
-            <MDButton id="test2" text="test2" @tap="onButtonTap"/>
-        </StackLayout>
-    </MDCardView>
+    <!-- <MDCardView @shownInBottomSheet="onShownInBottomSheet" borderRadius="20" elevation="30" backgroundColor="green"> -->
+    <GridLayout id="test1" rows="auto auto" height="300" backgroundColor="yellow">
+        <!-- highlighted in red to demonstrate movement -->
+        <GridLayout id="test2" row="0" backgroundColor="red" verticalAlignment="top">
+            <Button @tap="toggleExtraContent" text="Toggle extra content"></Button>
+        </GridLayout>
+        <GridLayout id="test4" row="1" v-if="showExtraContent">
+            <Label text="Extra content"></Label>
+        </GridLayout>
+    </GridLayout>
+    <!-- </MDCardView> -->
 </template>
 
 <script lang="ts">
@@ -13,14 +18,19 @@ import Vue from 'vue';
 
 export default Vue.extend({
     data() {
-        return {};
+        return {
+            showExtraContent: false
+        };
     },
     methods: {
         onButtonTap(event) {
             this.$closeBottomSheet(event.object.id);
         },
         onShownInBottomSheet(args) {
             console.log('onShownInBottomSheet');
+        },
+        toggleExtraContent() {
+            this.showExtraContent = !this.showExtraContent;
         }
     }
 });

demo-vue/app/examples/BottomSheetInnerKeyboard.vue

@@ -19,4 +19,4 @@ export default Vue.extend({
         }
     }
 });
-</script>
+</script>

demo-vue/app/main.ts

@@ -1,6 +1,6 @@
 
 // import {Trace} from '@nativescript/core';
-// Trace.addCategories(Trace.categories.concat(Trace.categories.All));
+// Trace.addCategories(Trace.categories.concat(Trace.categories.Layout));
 // Trace.enable();
 
 import Vue from 'nativescript-vue';