perf: refs #8110 #8110 use QPagintaion as QFooter

src/components/NavBar.vue

@@ -22,7 +22,7 @@ const pinnedModulesRef = ref();
 </script>
 
 <template>
-    <QHeader color="white" elevated>
+    <QHeader color="white" elevated reveal>
         <QToolbar class="q-py-sm q-px-md">
             <QBtn
                 @click="stateStore.toggleLeftDrawer()"

src/components/common/VnCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount, computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -57,6 +57,10 @@ if (props.baseUrl) {
         }
     });
 }
+const headerHeight = ref(0);
+onMounted(() => {
+    headerHeight.value = document.querySelector('.q-toolbar')?.offsetHeight + 'px';
+});
 </script>
 <template>
     <QDrawer
@@ -80,11 +84,12 @@ if (props.baseUrl) {
         </template>
     </RightMenu>
     <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
+        <QPage padding :style="{ 'padding-top': headerHeight }">
             <div :class="[useCardSize(), $attrs.class]">
-                <RouterView :key="route.path" />
-            </div>
-        </QPage>
+                <RouterView :key="route.path" /></div
+        ></QPage>
+        <QPageSticky expand position="top">
+            <VnSubToolbar />
+        </QPageSticky>
     </QPageContainer>
 </template>

src/components/ui/VnSubToolbar.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
 const stateStore = useStateStore();
 const actions = ref(null);
 const data = ref(null);
@@ -24,16 +23,18 @@ onMounted(() => {
     if (actions.value) observer.observe(actions.value, opts);
     if (data.value) observer.observe(data.value, opts);
 });
-
 onBeforeUnmount(() => stateStore.toggleSubToolbar());
 </script>
 
 <template>
     <QToolbar
         id="subToolbar"
-        class="justify-end sticky"
+        class="justify-end shadow-10"
         v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
     >
+        <!-- <slot name="title">
+                <QToolbarTitle>Title</QToolbarTitle>
+            </slot> -->
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
@@ -43,9 +44,3 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar());
         </slot>
     </QToolbar>
 </template>
-<style lang="scss" scoped>
-.sticky {
-    position: sticky;
-    z-index: 1;
-}
-</style>

src/layouts/MainLayout.vue

@@ -5,7 +5,7 @@ const quasar = useQuasar();
 </script>
 
 <template>
-    <QLayout view="hHh LpR fFf" v-shortcut>
+    <QLayout view="hHh lpR lFr" v-shortcut class="shadow-2">
         <Navbar />
         <RouterView></RouterView>
         <QFooter v-if="quasar.platform.is.mobile"></QFooter>

src/pages/Customer/Card/CustomerBalance.vue

@@ -185,8 +185,8 @@ const showBalancePdf = ({ id }) => {
         @on-fetch="getCurrentBalance"
     ></FetchData>
 
-    <VnSubToolbar class="q-mb-md">
-        <template #st-data>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#st-data">
             <div class="column justify-center q-px-md q-py-sm">
                 <span class="text-bold">{{ t('Total by company') }}</span>
                 <div class="row justify-center">
@@ -194,8 +194,8 @@ const showBalancePdf = ({ id }) => {
                     {{ toCurrency(currentBalance[companyId]?.amount) }}
                 </div>
             </div>
-        </template>
-        <template #st-actions>
+        </Teleport>
+        <Teleport to="#st-actions">
             <div>
                 <VnSelect
                     :label="t('Company')"
@@ -207,8 +207,8 @@ const showBalancePdf = ({ id }) => {
                     option-value="id"
                 ></VnSelect>
             </div>
-        </template>
-    </VnSubToolbar>
+        </Teleport>
+    </template>
     <VnTable
         ref="tableRef"
         data-key="CustomerBalance"

src/pages/Item/Card/ItemDiary.vue

@@ -38,12 +38,12 @@ const _showWhatsBeforeInventory = ref(false);
 const inventoriedDate = ref(null);
 const loading = ref(true);
 const pagination = ref({
-    rowsPerPage: 5,
+    rowsPerPage: 20,
     sortBy: 'desc',
     descending: false,
     page: 1,
 });
-
+const filterWarehouses = "{ fields: ['id', 'name'], order: 'name ASC' }";
 const columns = computed(() => [
     {
         name: 'claim',
@@ -200,55 +200,46 @@ const pagesNumber = computed(() =>
     />
     <FetchData
         url="Warehouses"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        :filter="filterWarehouses"
         auto-load
         @on-fetch="(data) => (warehousesOptions = data)"
     />
-    <QToolbar class="justify-end">
-        <div id="st-data" class="row">
-            <VnSelect
-                :label="t('itemDiary.warehouse')"
-                :options="warehousesOptions"
-                hide-selected
-                option-label="name"
-                option-value="id"
-                dense
-                v-model="itemsBalanceFilter.where.warehouseFk"
-                @update:model-value="fetchItemBalances"
-                class="q-mr-lg"
-            />
-            <QCheckbox
-                :label="t('itemDiary.showBefore')"
-                v-model="showWhatsBeforeInventory"
-                @update:model-value="fetchItemBalances"
-                class="q-mr-lg"
-            />
-            <VnInputDate
-                v-if="showWhatsBeforeInventory"
-                :label="t('itemDiary.since')"
-                dense
-                v-model="itemsBalanceFilter.where.date"
-                @update:model-value="fetchItemBalances"
-            />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
-    <QPage class="column items-center q-pa-md">
-        <div class="row justify-center">
-            <QPagination
-                v-model="pagination.page"
-                :max="pagesNumber"
-                size="sm"
-                input
-                ref="paginationRef"
-            />
-        </div>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#st-data">
+            <div class="row">
+                <VnSelect
+                    :label="t('itemDiary.warehouse')"
+                    :options="warehousesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    dense
+                    v-model="itemsBalanceFilter.where.warehouseFk"
+                    @update:model-value="fetchItemBalances"
+                    class="q-mr-lg"
+                />
+                <QCheckbox
+                    :label="t('itemDiary.showBefore')"
+                    v-model="showWhatsBeforeInventory"
+                    @update:model-value="fetchItemBalances"
+                    class="q-mr-lg"
+                />
+                <VnInputDate
+                    v-if="showWhatsBeforeInventory"
+                    :label="t('itemDiary.since')"
+                    dense
+                    v-model="itemsBalanceFilter.where.date"
+                    @update:model-value="fetchItemBalances"
+                />
+            </div>
+        </Teleport>
+    </template>
+    <QPage>
         <QTable
             :loading="loading"
             :rows="itemBalances"
             :columns="columns"
-            class="full-width q-mt-md"
+            class="full-width"
             v-model:pagination="pagination"
         >
             <template #body-cell-claim="{ row }">
@@ -355,6 +346,16 @@ const pagesNumber = computed(() =>
                 </QTd>
             </template>
         </QTable>
+        <QFooter elevated style="background-color: var(--vn-section-color)">
+            <QPagination
+                v-model="pagination.page"
+                :max="pagesNumber"
+                style="justify-content: center"
+                size="sm"
+                input
+                ref="paginationRef"
+            />
+        </QFooter>
     </QPage>
 </template>