atom-nuxt 1.4.19 → 1.4.21

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomengine/atom-nuxt",
   "configKey": "atomNuxt",
-  "version": "1.4.19",
+  "version": "1.4.21",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/CrudPaginatedLoader.vue

@@ -7,11 +7,9 @@ import CrudFilterList from "./CrudFilterList.vue";
 import { computed, ref, watch, onMounted, onBeforeUnmount, toRaw, nextTick } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import { useListenerService } from "../composables/useListenerService";
-import { useDisplay } from "vuetify";
 import CrudFormDialog from "./CrudFormDialog.vue";
 import CrudErrorDisplay from "./CrudErrorDisplay.vue";
 const { parseQuery, stringifyQuery, cloneDeep } = useCrudConverters();
-const { mdAndUp } = useDisplay();
 const props = defineProps({
   filtersTitle: {
     type: String,
@@ -512,15 +510,11 @@ const exportAction = async () => {
     >
     </slot>
     <div :class="contentClasses">
-      <v-row>
-        <v-col
+      <div class="crud-layout-wrapper">
+        <div
           v-if="!hideFilters && (filters.length > 0 || isInitialLoad)"
-          cols="12"
-          :style="{
-            width: mdAndUp ? `${filtersWidth}px` : undefined,
-            maxWidth: mdAndUp ? `${filtersWidth}px` : undefined,
-            flex: mdAndUp ? '0 0 auto' : undefined
-          }"
+          class="crud-filters-column"
+          :style="{ '--filters-width': `${filtersWidth}px` }"
         >
           <div>
             <Transition name="fade" mode="out-in">
@@ -542,13 +536,8 @@ const exportAction = async () => {
               </div>
             </Transition>
           </div>
-        </v-col>
-        <v-col
-          cols="12"
-          :style="{
-            flex: mdAndUp ? '1 1 auto' : undefined
-          }"
-        >
+        </div>
+        <div class="crud-content-column">
           <v-progress-linear :active="listPending && !isInitialLoad" indeterminate color="primary"></v-progress-linear>
           <div class="">
             <Transition name="fade" mode="out-in">
@@ -601,8 +590,8 @@ const exportAction = async () => {
               :length="totalPages"
               @input="getItems()"></v-pagination>
           </div>
-        </v-col>
-      </v-row>
+        </div>
+      </div>
     </div>
 
     <crud-form-dialog
@@ -644,5 +633,5 @@ const exportAction = async () => {
 </template>
 
 <style scoped>
-.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}
+.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.crud-layout-wrapper{display:flex;flex-wrap:wrap;gap:12px}.crud-content-column,.crud-filters-column{flex:1 1 100%}@media (min-width:960px){.crud-layout-wrapper{flex-wrap:nowrap}.crud-filters-column{flex:0 0 auto;max-width:var(--filters-width);width:var(--filters-width)}.crud-content-column{flex:1 1 auto}}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom-nuxt",
-  "version": "1.4.19",
+  "version": "1.4.21",
   "description": "My new Nuxt module",
   "repository": "atomengine/atom-nuxt",
   "license": "MIT",