test: demo app

Author: farfromrefug

demo-vue/app/examples/BottomSheetInner.vue

@@ -1,9 +1,11 @@
 <template>
     <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">
+        <Stacklayout id="test2" row="0" backgroundColor="red" verticalAlignment="top">
             <Button @tap="toggleExtraContent" text="Toggle extra content"></Button>
-        </GridLayout>
+            <Button @tap="openAnotherInner" text="Open second"></Button>
+            <Button  id="innerButton" @tap="onButtonTap" text="close with result"></Button>
+        </Stacklayout>
         <GridLayout id="test4" row="1" v-if="showExtraContent">
             <Label text="Extra content"></Label>
         </GridLayout>
@@ -14,6 +16,8 @@
 <script lang="ts">
 import * as frameModule from '@nativescript/core/ui/frame';
 import Vue from 'vue';
+import NativeScriptVue from 'nativescript-vue';
+import BottomSheetInnerKeyboardVue from './BottomSheetInnerKeyboard.vue';
 
 export default Vue.extend({
     data() {
@@ -30,6 +34,15 @@ export default Vue.extend({
         },
         toggleExtraContent() {
             this.showExtraContent = !this.showExtraContent;
+        },
+        openAnotherInner() {
+            (this as NativeScriptVue).$showBottomSheet(BottomSheetInnerKeyboardVue, {
+                        // transparent:true,
+                        ignoreBottomSafeArea: true,
+                        closeCallback: (...args) => {
+                            console.log('bottom sheet closed', args);
+                        }
+                    });
         }
     }
 });

demo-vue/app/examples/BottomSheetInnerKeyboard.vue

@@ -1,5 +1,8 @@
 <template>
     <StackLayout>
+        <Stacklayout id="test2" row="0" backgroundColor="red" verticalAlignment="top">
+            <Button id="innerButtonK" @tap="onButtonTap" text="close with result k"></Button>
+        </Stacklayout>
         <MDTextField margin="10" variant="filled" hint="Working TextView hint 🤪" />
         <PreviousNextView />
     </StackLayout>
@@ -16,6 +19,9 @@ export default Vue.extend({
     methods: {
         onShownInBottomSheet(args) {
             console.log('onShownInBottomSheet');
+        },
+        onButtonTap(event) {
+            this.$closeBottomSheet(event.object.id);
         }
     }
 });

demo-vue/app/examples/Mixins.vue

@@ -4,14 +4,16 @@
             <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
         </ActionBar>
         <StackLayout>
-            <Button margin="10"  rippleColor="red" backgroundColor="green" borderRadius="10" fontSize="20" text="elevated button" />
+        <StackLayout backgroundColor="yellow" elevation="10" dynamicElevationOffset="3">
+            <Button margin="10"  elevation="5" rippleColor="red" backgroundColor="green" borderRadius="10" fontSize="20" text="elevated button" @tap="onButtonTap"/>
             <Button margin="10"  rippleColor="red" fontSize="20" text="elevated button" />
             <Label margin="10" horizontalAlignment="center" backgroundColor="yellow" padding="10" elevation="1" borderRadius="20" rippleColor="red" text="elevated text" />
             <Label margin="10" horizontalAlignment="center" padding="10" backgroundColor="yellow" dynamicElevationOffset="3" elevation="1" rippleColor="red" text="elevated text" />
             <StackLayout class="cardView" height="100" orientation="horizontal" >
                 <Label width="100%" textAlignment="center" verticalAlignment="center" text="elevated text" />
             </StackLayout>
         </StackLayout>
+        </StackLayout>
     </Page>
 </template>
 
@@ -34,6 +36,9 @@ export default Vue.extend({
     methods: {
         onNavigationButtonTap() {
             frameModule.Frame.topmost().goBack();
+        },
+        onButtonTap() {
+            console.log('onButtonTap');
         }
     },