refs #6416 feat: VnTeleport

src/components/CrudModel.vue

@@ -4,14 +4,15 @@ import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 const quasar = useQuasar();
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
 
@@ -275,7 +276,8 @@ watch(formUrl, async () => {
         </template>
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <VnTeleport>
+        <template #st-actions>
             <QBtnGroup push style="column-gap: 10px">
                 <slot name="moreBeforeActions" />
                 <QBtn
@@ -310,7 +312,8 @@ watch(formUrl, async () => {
                 />
                 <slot name="moreAfterActions" />
             </QBtnGroup>
-    </Teleport>
+        </template>
+    </VnTeleport>
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"

src/components/ui/VnTeleport.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <slot name="st-data"></slot>
+    </Teleport>
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <slot name="st-actions"></slot>
+    </Teleport>
+</template>

src/pages/Claim/Card/ClaimAction.vue

@@ -13,6 +13,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -267,7 +268,8 @@ async function importToNewRefundTicket() {
             />
         </QCard>
     </QDrawer>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
+    <VnTeleport></VnTeleport>
+    <!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> -->
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"

src/pages/Claim/Card/ClaimLines.vue

@@ -4,11 +4,12 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { toDate, toCurrency, toPercentage } from 'filters/index';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -17,7 +18,7 @@ const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -157,7 +158,8 @@ function showImportDialog() {
 }
 </script>
 <template>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+    <VnTeleport>
+        <template #st-data>
             <div class="row q-gutter-md">
                 <div>
                     {{ t('Amount') }}
@@ -173,7 +175,8 @@ function showImportDialog() {
                     </QChip>
                 </div>
             </div>
-    </Teleport>
+        </template>
+    </VnTeleport>
 
     <FetchData
         :url="`Claims/${route.params.id}`"

src/pages/Entry/Card/EntryBuys.vue

@@ -11,9 +11,10 @@ import VnInput from 'src/components/common/VnInput.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 import { useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -22,7 +23,7 @@ const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { notify } = useNotify();
 
 const rowsSelected = ref([]);
@@ -293,7 +294,8 @@ const showLockIcon = (groupingMode, mode) => {
         auto-load
         @on-fetch="(data) => (packagingsOptions = data)"
     />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <VnTeleport>
+        <template #st-actions>
             <QBtnGroup push style="column-gap: 10px">
                 <slot name="moreBeforeActions" />
                 <QBtn
@@ -304,9 +306,9 @@ const showLockIcon = (groupingMode, mode) => {
                     @click="openRemoveDialog()"
                     :disable="!rowsSelected?.length"
                     :title="t('globals.remove')"
-            />
+                /> </QBtnGroup
-        </QBtnGroup>
+        ></template>
-    </Teleport>
+    </VnTeleport>
     <VnPaginate
         ref="entryBuysPaginateRef"
         data-key="EntryBuys"

src/pages/Entry/Card/EntryBuysImport.vue

@@ -9,13 +9,14 @@ import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FilterItemForm from 'src/components/FilterItemForm.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { toCurrency } from 'filters/index';
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
@@ -175,7 +176,8 @@ const redirectToBuysView = () => {
         auto-load
     />
     <QForm>
-        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <VnTeleport>
+            <template #st-actions>
                 <div>
                     <QBtnGroup push class="q-gutter-x-sm">
                         <QBtn
@@ -195,7 +197,8 @@ const redirectToBuysView = () => {
                         />
                     </QBtnGroup>
                 </div>
-        </Teleport>
+            </template>
+        </VnTeleport>
         <QCard class="q-pa-lg">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -6,6 +6,7 @@ import { QCheckbox, QBtn } from 'quasar';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 import { toCurrency } from 'src/filters';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
@@ -217,9 +218,16 @@ const selectWorkerId = (id) => {
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <VnTeleport>
-            <QBtn color="primary" icon-right="archive" no-caps @click="downloadCSV()" />
+            <template #st-actions>
-        </Teleport>
+                <QBtn
+                    color="primary"
+                    icon-right="archive"
+                    no-caps
+                    @click="downloadCSV()"
+                />
+            </template>
+        </VnTeleport>
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -8,16 +8,17 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 import { toDate } from 'src/filters';
 import { dashIfEmpty } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
 const { openReport, sendEmail } = usePrintService();
@@ -115,7 +116,8 @@ onMounted(async () => {
 </script>
 
 <template>
-    <Teleport to="#st-actions" v-if="stateStore.isSubToolbarShown()">
+    <VnTeleport>
+        <template #st-actions>
             <QBtn
                 :disabled="!dateRanges.from && !dateRanges.to"
                 color="primary"
@@ -139,7 +141,8 @@ onMounted(async () => {
                     {{ t('Send to email') }}
                 </QTooltip>
             </QBtn>
-    </Teleport>
+        </template>
+    </VnTeleport>
 
     <QPage class="column items-center q-pa-md">
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>

src/pages/Travel/Card/TravelThermographsForm.vue

@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-
+import VnTeleport from 'components/ui/VnTeleport.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
@@ -11,7 +11,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import CreateThermographForm from 'src/components/CreateThermographForm.vue';
 
 import { useState } from 'src/composables/useState';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
@@ -22,7 +22,7 @@ const props = defineProps({
     },
 });
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
@@ -214,7 +214,8 @@ const onThermographCreated = async (data) => {
             class="full-width"
             style="max-width: 800px"
         >
-            <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+            <VnTeleport>
+                <template #st-actions>
                     <div>
                         <QBtnGroup push class="q-gutter-x-sm">
                             <slot name="moreActions" />
@@ -233,7 +234,8 @@ const onThermographCreated = async (data) => {
                             />
                         </QBtnGroup>
                     </div>
-            </Teleport>
+                </template>
+            </VnTeleport>
             <QCard class="q-pa-lg">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">