add useScreenOrientation

Author: vallemar

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@nativescript/core": "^8.5.3",
-    "@vallemar/nativescript-vueuse": "^0.0.11",
+    "@vallemar/nativescript-vueuse": "^0.0.12",
     "nativescript-vue": "3.0.0-beta.8"
   },
   "devDependencies": {

src/components/Home.vue

@@ -7,6 +7,7 @@ import ElementSizeView from "~/components/ElementSizeView.vue";
 import ColorModeView from "~/components/ColorModeView.vue";
 import EventListenerComponent from "~/components/EventListenerComponent.vue";
 import RootLayoutView from './rootLayout/RootLayoutView.vue';
+import ScreenOrientationComponent from './ScreenOrientationComponent.vue';
 
 function onUseElementSize() {
   $navigateTo(ElementSizeView)
@@ -23,6 +24,10 @@ function onUseRootLayout() {
   $navigateTo(RootLayoutView)
 }
 
+function onUseScreenOrientation() {
+  $navigateTo(ScreenOrientationComponent)
+}
+
 </script>
 
 <template>
@@ -35,6 +40,7 @@ function onUseRootLayout() {
         <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>
   </Frame>

src/components/ScreenOrientationComponent.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useScreenOrientation } from '@vallemar/nativescript-vueuse';
+
+const {
+  orientation,
+  setOrientation,
+  enableRotation,
+  disableRotation
+} = useScreenOrientation({
+  onChange: (orientation) => {
+    console.log("useScreenOrientation onChange " + orientation);
+  }
+})
+
+</script>
+
+<template>
+  <Page actionBarHidden="true">
+    <ScrollView>
+      <StackLayout class="p-3">
+        <Label class="text-center text-2xl">ScreenOrientation {{ orientation }}</Label>
+        <Button @tap="setOrientation('portrait')" class="mx-1 mt-8" text="Set portrait"></Button>
+        <Button @tap="setOrientation('landscape')" class="mx-1 mt-8" text="Set landscape"></Button>
+        <Button @tap="setOrientation('landscapeleft')" class="mx-1 mt-8" text="Set landscapeleft"></Button>
+        <Button @tap="setOrientation('landscaperight')" class="mx-1 mt-8" text="Set landscaperight"></Button>
+        <Button @tap="enableRotation" class="mx-1 mt-8" text="Enable rotation"></Button>
+        <Button @tap="disableRotation" class="mx-1 mt-8" text="Disable rotation"></Button>
+      </StackLayout>
+    </ScrollView>
+  </Page>
+</template>