build v0.6.8

Author: Arenukvern

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xsoulspace/vue_flutter_tailwind",
   "description": "Vue3 styled like Flutter with Tailwind CSS",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "private": false,
   "author": {
     "name": "Anton Malofeev",

src/abstract/Navigation.ts

@@ -1,10 +1,9 @@
 import { Component, markRaw, reactive, ref } from 'vue'
-import { Container } from '../components/Container'
 import { Maybe } from './BasicTypes'
 
-interface NavigationControllerRoute {
+export interface NavigationControllerRoute {
   routeName: string
-  widget: Component
+  widget: Maybe<Component>
   fullscreen: boolean
 }
 
@@ -15,7 +14,7 @@ export class NavigationController {
 
   pop(counter = 1) {
     for (let i = 0; i < counter; i++) {
-      if (this.count == 0) return
+      if (this.routes.length == 0) return
       this.routes.shift()
     }
   }
@@ -32,27 +31,4 @@ export class NavigationController {
       fullscreen: fullscreen ?? true,
     })
   }
-  get currentRoute(): NavigationControllerRoute {
-    const maybeWidget = this.routes[0]
-    return (
-      maybeWidget ?? {
-        widget: Container({}),
-        fullscreen: true,
-        routeName: '',
-      }
-    )
-  }
-  get currentWidget(): Component {
-    return this.currentRoute.widget
-  }
-  get isFullscreen() {
-    const maybeFullscreen = this.currentRoute?.fullscreen
-    return maybeFullscreen == null || maybeFullscreen == true
-  }
-  get isNotFullscreen() {
-    return !this.isFullscreen
-  }
-  get count() {
-    return this.routes.length
-  }
 }

src/components/Navigation.tsx

@@ -1,8 +1,17 @@
-import { Component, computed, defineComponent, h } from '@vue/runtime-core'
+import {
+  Component,
+  defineComponent,
+  h,
+  reactive,
+  watch,
+} from '@vue/runtime-core'
 import { ref } from 'vue'
 import { Colors } from '../abstract/Colors'
 import { EdgeInsetsStep } from '../abstract/EdgeInsets'
-import { NavigationController } from '../abstract/Navigation'
+import {
+  NavigationController,
+  NavigationControllerRoute,
+} from '../abstract/Navigation'
 import {
   OpacityDecoration,
   OpacityDecorationSteps,
@@ -44,20 +53,40 @@ export const Navigation = ({ child }: NavigationI) => {
       const routeController = MultiProvider.get<NavigationController>(
         NavigationController
       )
-      const currentRoute = computed(() => routeController.currentRoute)
-      const currentWidget = computed(() => currentRoute.value.widget)
-
-      const isRoutesExists = computed(() => routeController.routes.length > 0)
-
-      const isFullscreen = computed(() => {
-        const maybeFullscreen = currentRoute.value.fullscreen
-        return maybeFullscreen == null || maybeFullscreen == true
+      const currentRoute = reactive<NavigationControllerRoute>({
+        widget: null,
+        fullscreen: true,
+        routeName: '',
       })
-      const isNotFullscreen = computed(() => !isFullscreen.value)
+      const isRoutesExists = ref<boolean>(false)
+      const isFullscreen = ref<boolean>(false)
+      const isNotFullscreen = ref<boolean>(false)
+
+      watch(
+        routeController.routes,
+        (newRoutes) => {
+          const newRoute = newRoutes[0]
+          if (newRoute == null) {
+            isRoutesExists.value = false
+            currentRoute.widget = null
+            return
+          }
+          currentRoute.widget = newRoute.widget
+          currentRoute.routeName = newRoute.routeName
+          currentRoute.fullscreen = newRoute.fullscreen
+          isNotFullscreen.value = !newRoute.fullscreen
+          isFullscreen.value = newRoute.fullscreen
+          isRoutesExists.value = true
+        },
+        {
+          deep: true,
+          immediate: true,
+        }
+      )
 
       return {
         isFullscreen,
-        currentWidget,
+        currentRoute,
         isNotFullscreen,
         isRoutesExists,
         routeController,
@@ -114,7 +143,7 @@ export const Navigation = ({ child }: NavigationI) => {
                                           event.stopPropagation()
                                         }
                                       >
-                                        {h(this.currentWidget)}
+                                        {h(this.currentRoute.widget ?? <div />)}
                                       </div>
                                     ),
                                   })
@@ -134,7 +163,7 @@ export const Navigation = ({ child }: NavigationI) => {
                                   new SizedBoxHeight({}).css,
                                 ]}
                               >
-                                {h(this.currentWidget)}
+                                {h(this.currentRoute.widget ?? <div />)}
                               </div>
                             ),
                             visible: ref(this.isFullscreen),