src/components/CrudModel.vue

@@ -9,6 +9,7 @@ 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();
@@ -258,6 +259,44 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
+    <VnSubToolbar class="q-mb-md">
+        <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>
+    </VnSubToolbar>
     <VnPaginate
         :url="url"
         v-bind="$attrs"
@@ -275,42 +314,6 @@ 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>
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"

src/components/common/VnCard.vue

@@ -0,0 +1,20 @@
+<script setup>
+import useCardSize from 'src/composables/useCardSize';
+import VnSubToolbar from 'src/components/common/VnSubToolbar.vue';
+defineProps({
+    component: {
+        type: String,
+        required: true,
+    },
+});
+</script>
+<template>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="useCardSize()">
+                <RouterView :name="component"> </RouterView>
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>

src/components/ui/VnSubToolbar.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, onUnmounted } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
+// Falta si los divs tienen contenido o remplazar los teleport y usar siempre slots
 const stateStore = useStateStore();
 
 onMounted(() => {
@@ -14,7 +14,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-section-color justify-end sticky">
+    <QToolbar class="justify-end sticky" v-if="$slots['st-data'] || $slots['st-actions']">
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
@@ -27,6 +27,7 @@ onUnmounted(() => {
 <style lang="scss">
 .q-toolbar {
     background: var(--vn-section-color);
+    border-radius: 2px;
 }
 </style>
 <style lang="scss" scoped>