feat: refs #6480 check if hasContent or slots

src/components/CrudModel.vue

@@ -9,7 +9,6 @@ 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 VnSubToolbar from './ui/VnSubToolbar.vue';
 
 const quasar = useQuasar();
 const stateStore = useStateStore();
@@ -259,8 +258,24 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <VnSubToolbar class="q-mb-md">
-        <template #st-actions>
+    <VnPaginate
+        :url="url"
+        v-bind="$attrs"
+        @on-fetch="fetch"
+        :skeleton="false"
+        ref="vnPaginateRef"
+    >
+        <template #body v-if="formData">
+            <slot
+                name="body"
+                :rows="formData"
+                :validate="validate"
+                :filter="filter"
+            ></slot>
+        </template>
+    </VnPaginate>
+    <SkeletonTable v-if="!formData" />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtnGroup push style="column-gap: 10px">
             <slot name="moreBeforeActions" />
             <QBtn
@@ -295,25 +310,7 @@ watch(formUrl, async () => {
             />
             <slot name="moreAfterActions" />
         </QBtnGroup>
-        </template>
-    </VnSubToolbar>
-    <VnPaginate
-        :url="url"
-        v-bind="$attrs"
-        @on-fetch="fetch"
-        :skeleton="false"
-        ref="vnPaginateRef"
-    >
-        <template #body v-if="formData">
-            <slot
-                name="body"
-                :rows="formData"
-                :validate="validate"
-                :filter="filter"
-            ></slot>
-        </template>
-    </VnPaginate>
-    <SkeletonTable v-if="!formData" />
+    </Teleport>
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"

src/components/common/VnCard.vue

@@ -3,9 +3,9 @@ import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
 </script>
 <template>
+    <VnSubToolbar />
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
             <div :class="useCardSize()">
                 <RouterView />
             </div>

src/components/ui/VnSubToolbar.vue

@@ -1,11 +1,25 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-// Falta si los divs tienen contenido o remplazar los teleport y usar siempre slots
 const stateStore = useStateStore();
+const actions = ref(null);
+const data = ref(null);
+const opts = { subtree: true, childList: true, attributes: true };
+const hasContent = ref(false);
 
 onMounted(() => {
     stateStore.toggleSubToolbar();
+    actions.value = document.querySelector('#st-actions');
+    data.value = document.querySelector('#st-data');
+
+    // Check if there's content to display
+    const observer = new MutationObserver(
+        () =>
+            (hasContent.value =
+                actions.value.childNodes.length + data.value.childNodes.length)
+    );
+    observer.observe(actions.value, opts);
+    observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
@@ -14,7 +28,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="justify-end sticky" v-if="$slots['st-data'] || $slots['st-actions']">
+    <QToolbar
+        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+    >
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -7,7 +7,6 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import { useCapitalize } from 'src/composables/useCapitalize';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
@@ -71,11 +70,7 @@ const suppliersRef = ref();
             </QItem>
             <QItem>
                 <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            v-model="params.from"
-                            is-outlined
-                        />
+                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
                 </QItemSection>
             </QItem>
             <QItem>