build v0.6.4

perf: Navigation
perf: Examples completely converted to tsx files

Author: Arenukvern

package.json

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

src/abstract/Navigation.ts

@@ -34,7 +34,8 @@ export class NavigationController {
     return this._currentRoute?.widget
   }
   get _isFullscreen() {
-    return this._currentRoute?.fullscreen
+    const maybeFullscreen = this._currentRoute?.fullscreen
+    return maybeFullscreen == null || maybeFullscreen == true
   }
   get _isNotFullscreen() {
     return !this._isFullscreen

src/components/Navigation.tsx

@@ -3,9 +3,10 @@ import {
   computed,
   defineComponent,
   h,
-  Teleport,
+  Ref,
   watch,
 } from '@vue/runtime-core'
+import { Maybe } from '../abstract/BasicTypes'
 import { Colors } from '../abstract/Colors'
 import { EdgeInsetsStep } from '../abstract/EdgeInsets'
 import { NavigationController } from '../abstract/Navigation'
@@ -18,9 +19,10 @@ import { Center } from './Center'
 import { Positioned } from './Positioned'
 import { MultiProvider } from './Provider'
 import { Visibility } from './Visibility'
-
+import VueTeleport from './VueTeleport.vue'
 interface NavigationI {
   child: Component
+  debug?: Ref<Maybe<boolean>>
 }
 /**
  * This class provides a way to render and manage routes
@@ -40,23 +42,33 @@ interface NavigationI {
  *  })
  *  ```
  */
-export const Navigation = ({ child }: NavigationI) => {
+export const Navigation = ({ child, debug }: NavigationI) => {
   return defineComponent({
     name: 'Navigation',
-
+    components: {
+      VueTeleport,
+    },
     setup() {
       const routeController = MultiProvider.get<NavigationController>(
         NavigationController
       )
 
       const isRoutesExists = computed(() => routeController.count > 0)
-      watch(isRoutesExists, () => {
-        console.log({ isRoutesExists })
-      })
+      watch(
+        isRoutesExists,
+        () => {
+          if (debug?.value) console.log({ isRoutesExists })
+        },
+        { deep: true, immediate: true }
+      )
       const isFullscreen = computed(() => routeController._isFullscreen)
-      watch(isRoutesExists, () => {
-        console.log({ isFullscreen })
-      })
+      watch(
+        isRoutesExists,
+        () => {
+          if (debug?.value) console.log({ isFullscreen })
+        },
+        { deep: true, immediate: true }
+      )
       const isNotFullscreen = computed(() => routeController._isNotFullscreen)
       return () =>
         h('div', {}, [
@@ -65,7 +77,7 @@ export const Navigation = ({ child }: NavigationI) => {
             Visibility({
               visible: isRoutesExists,
               child: h(
-                <Teleport to="#app">
+                <vue-teleport to="#app">
                   {h(
                     Positioned({
                       _zIndex: routeController._backgroundZIndex.value,
@@ -147,7 +159,7 @@ export const Navigation = ({ child }: NavigationI) => {
                       ),
                     })
                   )}
-                </Teleport>
+                </vue-teleport>
               ),
             })
           ),

src/components/VueTeleport.vue

@@ -0,0 +1,16 @@
+<template>
+  <teleport :to="to">
+    <slot />
+  </teleport>
+</template>
+<script lang="ts">
+export default {
+  name: 'VueTeleport',
+  props: {
+    to: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>

src/example/App.ts src/example/App.tsxsrc/example/App.ts renamed to src/example/App.tsx

@@ -1,27 +1,19 @@
-<script lang="ts">
-import { h } from 'vue'
-import { WrapperApp } from '../example/App'
+import { NavigationController } from '@/abstract'
 import { MultiProvider, Navigation } from '@/components'
+import { h, ref } from 'vue'
+import { WrapperApp } from '../example/App'
 import { HeroesModel } from './HeroesModel'
-import { NavigationController } from '@/abstract'
-export default {
+export const AppProvider = {
   setup() {
     return () =>
       h(
         MultiProvider.create({
           models: [HeroesModel, NavigationController],
           child: Navigation({
             child: WrapperApp(),
+            debug: ref(true),
           }),
         })
       )
   },
 }
-</script>
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</style>

src/example/App.vue src/example/AppProvider.tsxsrc/example/App.vue renamed to src/example/AppProvider.tsx

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import vueGridLayout from 'vue-grid-layout'
 import 'vue3-virtual-scroller/dist/vue3-virtual-scroller.css'
 import './components/index.scss'
-import App from './example/App.vue'
+import { AppProvider } from './example/AppProvider'
 import './tailwind.css'
 
-createApp(App).use(vueGridLayout).mount('#app')
+createApp(AppProvider).use(vueGridLayout).mount('#app')