atom-nuxt 1.4.3 → 1.4.5

package/dist/module.json

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

package/dist/runtime/components/CrudFilter.vue

@@ -193,41 +193,7 @@ const displayForChip = (item) => {
       ></v-autocomplete>
     </template>
     <template v-else-if="filter.type === 'multiOption'">
-      <div v-if="filter.options.length < 10" class="pa-3 rounded border bg-white" style="border-color: #999!important;">
-        <div class="d-flex justify-space-between border-b pb-3 align-center mb-2" style="border-color: #999!important;">
-          <span class="text-grey-darken-2"><small>{{ filter.label }}</small></span>
-          <v-chip size="x-small" v-if="selectedValue.length === 0">Showing all</v-chip>
-          <v-chip size="x-small" color="error" @click="selectedValue = []"
-                  v-if="selectedValue.length > 0">
-            <span class="mr-1">{{ selectedValue.length }} of {{ filter.options.length }}</span>
-            <v-icon size="14">mdi-close</v-icon>
-          </v-chip>
-        </div>
-        <v-chip-group
-          dense
-          :id="filter.key"
-          :column="true"
-          :disabled="disabled"
-          :label="filter.label"
-          :clearable="true"
-          :multiple="true"
-          clear-icon="mdi-backspace"
-          v-model="selectedValue"
-          :hint="filter.description"
-        >
-          <v-chip
-            v-for="(option, index) in filter.options"
-            :key="filter.key+'-'+index"
-            size="small"
-            color="success"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </v-chip>
-        </v-chip-group>
-      </div>
       <v-autocomplete
-        v-else
         dense
         :id="filter.key"
         :disabled="disabled"

package/dist/runtime/components/CrudPaginatedLoader.vue

@@ -246,6 +246,7 @@ const dialogOpen = computed({
 });
 const page = computed(() => props.loaderKey ? parseQuery(route.query[props.loaderKey])?.page ?? 1 : route.query.page ?? 1);
 const filterValues = props.loaderKey ? ref({ ...props.customFilters, ...parseQuery(route.query[props.loaderKey]) }) : ref({ ...props.customFilters, ...route.query });
+const isInitialLoad = ref(true);
 const onQueryChange = (page2) => {
   console.error("QUERY CHANGED");
   const newQuery = {};
@@ -289,6 +290,11 @@ watch(() => filterValues, () => {
   console.error("ROUTE CHANGED");
   debouncedGet();
 }, { deep: true });
+watch(listPending, (isPending) => {
+  if (!isPending && isInitialLoad.value) {
+    isInitialLoad.value = false;
+  }
+});
 const debouncedGet = useDebounceFn(() => {
   console.error("DEBOUNCED GET");
   getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
@@ -464,45 +470,61 @@ const exportAction = async () => {
     >
     </slot>
     <div :class="contentClasses">
-      <v-progress-linear :active="listPending" indeterminate color="primary"></v-progress-linear>
+      <v-progress-linear :active="listPending && !isInitialLoad" indeterminate color="primary"></v-progress-linear>
       <v-row>
-        <v-col v-if="!hideFilters && filters.length > 0" cols="12" md="3">
+        <v-col v-if="!hideFilters && (filters.length > 0 || isInitialLoad)" cols="12" md="3">
           <div>
-            <slot name="filtersTitle">
-              <h3 v-if="filtersTitle" class="mb-2">{{ filtersTitle }}</h3>
-            </slot>
-            <slot name="filters" :filters="filters">
-              <div :class="filterClasses">
-                <crud-filter-list v-model="filterValues" :filters="filters"></crud-filter-list>
-              </div>
-            </slot>
+            <div v-if="isInitialLoad">
+              <v-skeleton-loader
+                type="heading, list-item, list-item, list-item"
+                class="mb-3"
+              ></v-skeleton-loader>
+            </div>
+            <template v-else>
+              <slot name="filtersTitle">
+                <h3 v-if="filtersTitle" class="mb-2">{{ filtersTitle }}</h3>
+              </slot>
+              <slot name="filters" :filters="filters">
+                <div :class="filterClasses">
+                  <crud-filter-list v-model="filterValues" :filters="filters"></crud-filter-list>
+                </div>
+              </slot>
+            </template>
           </div>
         </v-col>
-        <v-col cols="12" :md="hideFilters || filters.length === 0 ? '12' : '9'">
+        <v-col cols="12" :md="hideFilters || (filters.length === 0 && !isInitialLoad) ? '12' : '9'">
           <div class="">
-            <slot name="resultsTitle">
-              <h3 v-if="resultsTitle" class="mb-2">{{ resultsTitle }}</h3>
-            </slot>
-            <slot v-if="!listPending && totalItems === 0 && !hasListErrors" name="empty" :create-action="createForm">
-              <v-alert icon="mdi-playlist-remove" type="info" class="pa-5">
-                {{ noResultsText }}
-              </v-alert>
-            </slot>
-            <slot v-if="hasListErrors" name="error" :errors="listErrors">
-              <crud-error-display :errors="listErrors"></crud-error-display>
-            </slot>
-            <div :class="resultClasses">
-              <slot
-                v-if="totalItems > 0"
-                :items="items"
-                :pending="listPending"
-                :update-action="updateForm"
-                :view-action="viewForm"
-                :delete-action="deleteForm"
-                :form-pending="formPending"
-              >
-              </slot>
+            <div v-if="isInitialLoad">
+              <v-skeleton-loader
+                type="heading, card, card, card"
+                class="mb-3"
+              ></v-skeleton-loader>
             </div>
+            <template v-else>
+              <slot name="resultsTitle">
+                <h3 v-if="resultsTitle" class="mb-2">{{ resultsTitle }}</h3>
+              </slot>
+              <slot v-if="!listPending && totalItems === 0 && !hasListErrors" name="empty" :create-action="createForm">
+                <v-alert icon="mdi-playlist-remove" type="info" class="pa-5">
+                  {{ noResultsText }}
+                </v-alert>
+              </slot>
+              <slot v-if="hasListErrors" name="error" :errors="listErrors">
+                <crud-error-display :errors="listErrors"></crud-error-display>
+              </slot>
+              <div :class="resultClasses">
+                <slot
+                  v-if="totalItems > 0"
+                  :items="items"
+                  :pending="listPending"
+                  :update-action="updateForm"
+                  :view-action="viewForm"
+                  :delete-action="deleteForm"
+                  :form-pending="formPending"
+                >
+                </slot>
+              </div>
+            </template>
           </div>
           <div v-if="totalItems > 0 && totalPages > 1" class="pa-3">
             <span class="d-none d-md-block pa-3">Page {{ currentPage }} of {{ totalPages }} pages with {{ totalItems }} items</span>

package/package.json

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