refactor

Author: vallemar

package-lock.json

@@ -1,6 +1,6 @@
 import { createApp } from 'nativescript-vue';
 import { useColorMode, useColorPalette } from "@vallemar/nativescript-vueuse";
-import Home from './components/Home.vue';
+import Home from './views/Home.vue';
 import { PALETTES, THEMES } from "~/data";
 
 /* Init Color mode and Palette */

src/app.ts

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import CustomPage from "@/components/CustomPage.vue";
 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) => {

src/components/Home.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import CustomPage from "@/components/CustomPage.vue";
 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);

src/components/ColorModeView.vue renamed to src/views/ColorModeView.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import CustomPage from "@/components/CustomPage.vue";
 import { ref } from "nativescript-vue";
 import { alert, StackLayout } from "@nativescript/core";
 import { useEventListener } from "@vallemar/nativescript-vueuse";
-import CustomPage from "./CustomPage.vue";
 
 const el = ref()
 

src/components/ElementSizeView.vue renamed to src/views/ElementSizeView.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import {
+  $navigateTo
+} from 'nativescript-vue';
+import ElementSizeView from "./ElementSizeView.vue";
+import ColorModeView from "./ColorModeView.vue";
+import EventListenerComponent from "./EventListenerComponent.vue";
+import RootLayoutView from './RootLayoutView.vue';
+import ScreenOrientationComponent from './ScreenOrientationComponent.vue';
+import CustomPage from '@/components/CustomPage.vue';
+import { useColorPalette } from '@vallemar/nativescript-vueuse';
+import { Patelle } from '~/data';
+
+const { palette } = useColorPalette<string, Patelle>()
+
+function onUseElementSize() {
+  $navigateTo(ElementSizeView)
+}
+function onUseColorMode() {
+  $navigateTo(ColorModeView)
+}
+
+function onUseEventListener() {
+  $navigateTo(EventListenerComponent)
+}
+
+function onUseRootLayout() {
+  $navigateTo(RootLayoutView)
+}
+
+function onUseScreenOrientation() {
+  $navigateTo(ScreenOrientationComponent)
+}
+
+</script>
+
+<template>
+  <Frame :backgroundColor="palette?.colors.bg">
+    <CustomPage>
+      <ScrollView>
+        <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>
+      </ScrollView>
+    </CustomPage>
+  </Frame>
+</template>
+
+<style>
+/* .info {
+    font-size: 20;
+  } */
+</style>

src/components/EventListenerComponent.vue renamed to src/views/EventListenerComponent.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'nativescript-vue'
+import BottomSheet from "@/components/rootLayout/BottomSheet.vue";
+import Modal from '@/components/rootLayout/Modal.vue';
+import SideBar from '@/components/rootLayout/SideBar.vue';
+import SnackBar from '@/components/rootLayout/SnackBar.vue';
+import CustomPage from "@/components/CustomPage.vue";
 import { useRootLayout } from '@vallemar/nativescript-vueuse'
-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, {
   rootLayoutOption: {

src/views/Home.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import CustomPage from "@/components/CustomPage.vue";
 import { useScreenOrientation } from '@vallemar/nativescript-vueuse';
-import CustomPage from './CustomPage.vue';
 
 const {
   orientation,