add generic androidStatusBarBackground

Author: vallemar

package-lock.json

@@ -2,6 +2,7 @@
 import { ListItem } from "nativescript-vue";
 import { useColorMode, useColorPalette } from "@vallemar/nativescript-vueuse";
 import { Patelle, THEMES } from "~/data";
+import CustomPage from "./CustomPage.vue";
 
 const { schema } = useColorMode({
   onChanged: (mode) => {
@@ -18,7 +19,7 @@ function changeTheme(newTheme: any) {
 </script>
 
 <template>
-  <Page actionBarHidden="true">
+  <CustomPage>
     <StackLayout class="py-4 pl-3">
       <Label :text="`Current Theme: ${schema}`" />
 
@@ -46,5 +47,5 @@ function changeTheme(newTheme: any) {
         </StackLayout>
       </FlexboxLayout>
     </StackLayout>
-  </Page>
+  </CustomPage>
 </template>

src/components/ColorModeView.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { useColorPalette } from '@vallemar/nativescript-vueuse';
+import { Patelle } from '~/data';
+
+const { palette } = useColorPalette<string, Patelle>()
+</script>
+
+<template>
+  <Page actionBarHidden="true" :androidStatusBarBackground="palette?.colors.bg">
+    <slot></slot>
+  </Page>
+</template>
+

src/components/CustomPage.vue

@@ -1,20 +1,21 @@
 <script lang="ts" setup>
 import { ref } from "nativescript-vue";
 import { useElementSize, unrefView } from "@vallemar/nativescript-vueuse";
+import CustomPage from "./CustomPage.vue";
 
 const refView = ref()
 const { width, height } = useElementSize(refView);
 
 function changeSize() {
   const view = unrefView(refView);
-  if(view){
+  if (view) {
     view.height = view.getActualSize().height === 400 ? 150 : 400;
   }
 }
 </script>
 
 <template>
-  <Page actionBarHidden="true">
+  <CustomPage>
     <StackLayout class="p-4">
       <StackLayout originY="0" ref="refView" class="bg-variant rounded-2xl p-3 text-center">
         <Label :text="`Width: ${width}`" />
@@ -23,5 +24,5 @@ function changeSize() {
 
       <Button @tap="changeSize" text="Change size" class="mt-12 mx-1"></Button>
     </StackLayout>
-  </Page>
+  </CustomPage>
 </template>

src/components/ElementSizeView.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ref } from "nativescript-vue";
-import {alert, StackLayout} from "@nativescript/core";
+import { alert, StackLayout } from "@nativescript/core";
 import { useEventListener } from "@vallemar/nativescript-vueuse";
+import CustomPage from "./CustomPage.vue";
 
 const el = ref()
 
@@ -19,11 +20,11 @@ const { cleanup } = useEventListener<StackLayout>(el, {
 </script>
 
 <template>
-  <Page actionBarHidden="true">
+  <CustomPage>
     <StackLayout class="p-4">
       <FlexboxLayout ref="el" class="bg-variant rounded-2xl p-3 text-center h-[200] items-center justify-center">
         <Label class="text-2xl">Tap Me!</Label>
       </FlexboxLayout>
     </StackLayout>
-  </Page>
+  </CustomPage>
 </template>

src/components/EventListenerComponent.vue

@@ -8,6 +8,11 @@ import ColorModeView from "~/components/ColorModeView.vue";
 import EventListenerComponent from "~/components/EventListenerComponent.vue";
 import RootLayoutView from './rootLayout/RootLayoutView.vue';
 import ScreenOrientationComponent from './ScreenOrientationComponent.vue';
+import { useColorPalette } from '@vallemar/nativescript-vueuse';
+import { Patelle } from '~/data';
+import CustomPage from './CustomPage.vue';
+
+const { palette } = useColorPalette<string, Patelle>()
 
 function onUseElementSize() {
   $navigateTo(ElementSizeView)
@@ -32,17 +37,16 @@ function onUseScreenOrientation() {
 
 <template>
   <Frame backgroundColor="transparent">
-    <Page actionBarHidden="true">
+    <CustomPage>
       <StackLayout ref="test" class="px-4">
         <Label text="NativeScript-VueUse APP" class="text-2xl font-bold mt-3" />
-
         <Button @tap="onUseElementSize" text="Use Element Size" class="mt-12 m-1"></Button>
         <Button @tap="onUseColorMode" text="Use Color Mode" class="mt-8 m-1"></Button>
         <Button @tap="onUseEventListener" text="Use Event Listener" class="mt-8 m-1"></Button>
         <Button @tap="onUseRootLayout" text="Use Root Layout" class="mt-8 m-1"></Button>
         <Button @tap="onUseScreenOrientation" text="Use Screen Orientation" class="mt-8 m-1"></Button>
       </StackLayout>
-    </Page>
+    </CustomPage>
   </Frame>
 </template>
 

src/components/Home.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useScreenOrientation } from '@vallemar/nativescript-vueuse';
+import CustomPage from './CustomPage.vue';
 
 const {
   orientation,
@@ -15,7 +16,7 @@ const {
 </script>
 
 <template>
-  <Page actionBarHidden="true">
+  <CustomPage>
     <ScrollView>
       <StackLayout class="p-3">
         <Label class="text-center text-2xl">ScreenOrientation {{ orientation }}</Label>
@@ -27,5 +28,5 @@ const {
         <Button @tap="disableRotation" class="mx-1 mt-8" text="Disable rotation"></Button>
       </StackLayout>
     </ScrollView>
-  </Page>
+  </CustomPage>
 </template>

src/components/ScreenOrientationComponent.vue

@@ -5,6 +5,7 @@ import BottomSheet from "./BottomSheet.vue";
 import Modal from './Modal.vue';
 import SideBar from './SideBar.vue';
 import SnackBar from './SnackBar.vue';
+import CustomPage from '../CustomPage.vue';
 
 
 const { show: showBottomSheet } = useRootLayout(BottomSheet, {
@@ -101,16 +102,15 @@ const { show: showSnackbar } = useRootLayout(SnackBar, {
 </script>
 
 <template>
-  <Page actionBarHidden="true">
+  <CustomPage>
     <RootLayout>
       <StackLayout class="p-3">
         <Label class="text-center text-2xl">RootLayout example</Label>
         <Button @tap="showBottomSheet" class="mx-1 mt-8" text="Open BottomSheet"></Button>
         <Button @tap="showModal" class="mx-1 mt-8" text="Open Modal"></Button>
         <Button @tap="showSideBar" class="mx-1 mt-8" text="Open Sidebar"></Button>
         <Button @tap="showSnackbar" class="mx-1 mt-8" text="Open Snackbar"></Button>
-
       </StackLayout>
     </RootLayout>
-  </Page>
+  </CustomPage>
 </template>