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,42 +276,44 @@ watch(formUrl, async () => {
         </template>
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 10px">
-            <slot name="moreBeforeActions" />
-            <QBtn
-                :label="tMobile('globals.remove')"
-                color="primary"
-                icon="delete"
-                flat
-                @click="remove(selected)"
-                :disable="!selected?.length"
-                :title="t('globals.remove')"
-                v-if="$props.defaultRemove"
-            />
-            <QBtn
-                :label="tMobile('globals.reset')"
-                color="primary"
-                icon="restart_alt"
-                flat
-                @click="reset"
-                :disable="!hasChanges"
-                :title="t('globals.reset')"
-                v-if="$props.defaultReset"
-            />
-            <QBtn
-                :label="tMobile('globals.save')"
-                ref="saveButtonRef"
-                color="primary"
-                icon="save"
-                @click="onSubmit"
-                :disable="!hasChanges"
-                :title="t('globals.save')"
-                v-if="$props.defaultSave"
-            />
-            <slot name="moreAfterActions" />
-        </QBtnGroup>
-    </Teleport>
+    <VnTeleport>
+        <template #st-actions>
+            <QBtnGroup push style="column-gap: 10px">
+                <slot name="moreBeforeActions" />
+                <QBtn
+                    :label="tMobile('globals.remove')"
+                    color="primary"
+                    icon="delete"
+                    flat
+                    @click="remove(selected)"
+                    :disable="!selected?.length"
+                    :title="t('globals.remove')"
+                    v-if="$props.defaultRemove"
+                />
+                <QBtn
+                    :label="tMobile('globals.reset')"
+                    color="primary"
+                    icon="restart_alt"
+                    flat
+                    @click="reset"
+                    :disable="!hasChanges"
+                    :title="t('globals.reset')"
+                    v-if="$props.defaultReset"
+                />
+                <QBtn
+                    :label="tMobile('globals.save')"
+                    ref="saveButtonRef"
+                    color="primary"
+                    icon="save"
+                    @click="onSubmit"
+                    :disable="!hasChanges"
+                    :title="t('globals.save')"
+                    v-if="$props.defaultSave"
+                />
+                <slot name="moreAfterActions" />
+            </QBtnGroup>
+        </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,23 +158,25 @@ function showImportDialog() {
 }
 </script>
 <template>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <div class="row q-gutter-md">
-            <div>
-                {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amount) }}
-                </QChip>
+    <VnTeleport>
+        <template #st-data>
+            <div class="row q-gutter-md">
+                <div>
+                    {{ t('Amount') }}
+                    <QChip :dense="$q.screen.lt.sm">
+                        {{ toCurrency(amount) }}
+                    </QChip>
+                </div>
+                <QSeparator dark vertical />
+                <div>
+                    {{ t('Amount Claimed') }}
+                    <QChip color="positive" :dense="$q.screen.lt.sm">
+                        {{ toCurrency(amountClaimed) }}
+                    </QChip>
+                </div>
             </div>
-            <QSeparator dark vertical />
-            <div>
-                {{ t('Amount Claimed') }}
-                <QChip color="positive" :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amountClaimed) }}
-                </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,20 +294,21 @@ const showLockIcon = (groupingMode, mode) => {
         auto-load
         @on-fetch="(data) => (packagingsOptions = data)"
     />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 10px">
-            <slot name="moreBeforeActions" />
-            <QBtn
-                :label="t('globals.remove')"
-                color="primary"
-                icon="delete"
-                flat
-                @click="openRemoveDialog()"
-                :disable="!rowsSelected?.length"
-                :title="t('globals.remove')"
-            />
-        </QBtnGroup>
-    </Teleport>
+    <VnTeleport>
+        <template #st-actions>
+            <QBtnGroup push style="column-gap: 10px">
+                <slot name="moreBeforeActions" />
+                <QBtn
+                    :label="t('globals.remove')"
+                    color="primary"
+                    icon="delete"
+                    flat
+                    @click="openRemoveDialog()"
+                    :disable="!rowsSelected?.length"
+                    :title="t('globals.remove')"
+                /> </QBtnGroup
+        ></template>
+    </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,27 +176,29 @@ const redirectToBuysView = () => {
         auto-load
     />
     <QForm>
-        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-            <div>
-                <QBtnGroup push class="q-gutter-x-sm">
-                    <QBtn
-                        :label="t('globals.cancel')"
-                        color="primary"
-                        icon="restart_alt"
-                        flat
-                        @click="redirectToBuysView()"
-                    />
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        icon="save"
-                        type="submit"
-                        :disable="!importData.file"
-                        @click="onSubmit()"
-                    />
-                </QBtnGroup>
-            </div>
-        </Teleport>
+        <VnTeleport>
+            <template #st-actions>
+                <div>
+                    <QBtnGroup push class="q-gutter-x-sm">
+                        <QBtn
+                            :label="t('globals.cancel')"
+                            color="primary"
+                            icon="restart_alt"
+                            flat
+                            @click="redirectToBuysView()"
+                        />
+                        <QBtn
+                            :label="t('globals.save')"
+                            color="primary"
+                            icon="save"
+                            type="submit"
+                            :disable="!importData.file"
+                            @click="onSubmit()"
+                        />
+                    </QBtnGroup>
+                </div>
+            </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()">
-            <QBtn color="primary" icon-right="archive" no-caps @click="downloadCSV()" />
-        </Teleport>
+        <VnTeleport>
+            <template #st-actions>
+                <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,31 +116,33 @@ onMounted(async () => {
 </script>
 
 <template>
-    <Teleport to="#st-actions" v-if="stateStore.isSubToolbarShown()">
-        <QBtn
-            :disabled="!dateRanges.from && !dateRanges.to"
-            color="primary"
-            icon-right="picture_as_pdf"
-            no-caps
-            class="q-mr-md"
-            @click="openReportPdf()"
-        >
-            <QTooltip>
-                {{ t('Open as PDF') }}
-            </QTooltip>
-        </QBtn>
-        <QBtn
-            :disabled="!dateRanges.from && !dateRanges.to"
-            color="primary"
-            icon-right="email"
-            no-caps
-            @click="openSendEmailDialog()"
-        >
-            <QTooltip>
-                {{ t('Send to email') }}
-            </QTooltip>
-        </QBtn>
-    </Teleport>
+    <VnTeleport>
+        <template #st-actions>
+            <QBtn
+                :disabled="!dateRanges.from && !dateRanges.to"
+                color="primary"
+                icon-right="picture_as_pdf"
+                no-caps
+                class="q-mr-md"
+                @click="openReportPdf()"
+            >
+                <QTooltip>
+                    {{ t('Open as PDF') }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                :disabled="!dateRanges.from && !dateRanges.to"
+                color="primary"
+                icon-right="email"
+                no-caps
+                @click="openSendEmailDialog()"
+            >
+                <QTooltip>
+                    {{ t('Send to email') }}
+                </QTooltip>
+            </QBtn>
+        </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,26 +214,28 @@ const onThermographCreated = async (data) => {
             class="full-width"
             style="max-width: 800px"
         >
-            <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-                <div>
-                    <QBtnGroup push class="q-gutter-x-sm">
-                        <slot name="moreActions" />
-                        <QBtn
-                            color="primary"
-                            icon="restart_alt"
-                            flat
-                            @click="reset()"
-                            :label="t('globals.reset')"
-                        />
-                        <QBtn
-                            color="primary"
-                            icon="save"
-                            @click="onSubmit()"
-                            :label="t('globals.save')"
-                        />
-                    </QBtnGroup>
-                </div>
-            </Teleport>
+            <VnTeleport>
+                <template #st-actions>
+                    <div>
+                        <QBtnGroup push class="q-gutter-x-sm">
+                            <slot name="moreActions" />
+                            <QBtn
+                                color="primary"
+                                icon="restart_alt"
+                                flat
+                                @click="reset()"
+                                :label="t('globals.reset')"
+                            />
+                            <QBtn
+                                color="primary"
+                                icon="save"
+                                @click="onSubmit()"
+                                :label="t('globals.save')"
+                            />
+                        </QBtnGroup>
+                    </div>
+                </template>
+            </VnTeleport>
             <QCard class="q-pa-lg">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">