feat(teleport): teleport components

src/components/Navbar.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -11,6 +12,8 @@ const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 
+onMounted(() => (state.headerMounted.value = true));
+
 function onToggleDrawer() {
     state.drawer.value = !state.drawer.value;
 }
@@ -36,6 +39,8 @@ function onToggleDrawer() {
             </router-link>
             <q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
             <q-space></q-space>
+            <div id="searchbar"></div>
+            <q-space></q-space>
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <!-- <q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
                     <q-menu>
@@ -62,6 +67,7 @@ function onToggleDrawer() {
                         </div>
                     </q-menu>
                 </q-btn> -->
+                <div id="header-actions"></div>
                 <q-btn dense flat no-wrap id="favoriteModules">
                     <q-avatar size="lg">
                         <q-icon name="apps" size="s" />

src/composables/useState.js

@@ -12,6 +12,7 @@ const user = ref({
 
 const roles = ref([]);
 const drawer = ref(true);
+const headerMounted = ref(false);
 
 export function useState() {
     function getUser() {
@@ -67,6 +68,7 @@ export function useState() {
         set,
         get,
         unset,
-        drawer
+        drawer,
+        headerMounted
     };
 }

src/pages/Customer/Card/CustomerBasicData.vue

@@ -1,14 +1,16 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
+import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'src/components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 
 const route = useRoute();
 const { t } = useI18n();
+const state = useState();
 const session = useSession();
 const token = session.getToken();
 
@@ -40,6 +42,7 @@ const filterOptions = {
         });
     },
 };
+const headerMounted = computed(() => state.headerMounted.value);
 </script>
 <template>
     <fetch-data
@@ -50,7 +53,24 @@ const filterOptions = {
     />
     <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
     <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
-
+    <teleport v-if="headerMounted" to="#header-actions">
+        <div class="row q-gutter-x-sm">
+            <q-btn color="primary" dense flat no-wrap>
+                <q-avatar size="lg">
+                    <q-icon name="save" size="s" />
+                </q-avatar>
+                <q-tooltip bottom> Save </q-tooltip>
+            </q-btn>
+            <q-btn color="primary" dense flat no-wrap>
+                <q-avatar size="lg">
+                    <q-icon name="delete" size="s" />
+                </q-avatar>
+                <q-tooltip bottom> Delete </q-tooltip>
+            </q-btn>
+            <q-separator vertical />
+        </div>
+    </teleport>
+    <teleport v-if="headerMounted" to="#searchbar"> input </teleport>
     <div class="container">
         <q-card>
             <form-model :url="`Clients/${route.params.id}`" model="customer">