atom-nuxt 1.3.1 → 1.3.4

package/dist/runtime/components/CrudListLoader.vue

@@ -1,16 +1,15 @@
 <script setup async>
-import {useCrudApi} from "../composables/useCrudApi";
+import { useCrudApi } from "../composables/useCrudApi";
 import CrudErrorDisplay from "./CrudErrorDisplay.vue";
-import {useListenerService} from "../composables/useListenerService";
-import {watch, onMounted, onBeforeUnmount, ref} from "vue";
-import {useDebounceFn} from "@vueuse/core";
-
+import { useListenerService } from "../composables/useListenerService";
+import { watch, onMounted, onBeforeUnmount, ref } from "vue";
+import { useDebounceFn } from "@vueuse/core";
 const props = defineProps({
-  debounced : {
+  debounced: {
     type: Boolean,
-    default :false
+    default: false
   },
-  disableNoResults : {
+  disableNoResults: {
     type: Boolean,
     default: false
   },
@@ -37,7 +36,7 @@ const props = defineProps({
     required: false,
     default: false
   },
-  listeners : {
+  listeners: {
     type: Array,
     required: false,
     default: () => []
@@ -64,20 +63,16 @@ const {
   totalPages,
   hasListErrors
 } = useCrudApi(props.path);
-
 const debouncedGet = useDebounceFn(getItems, 500);
-
 const lastRequest = ref(null);
-
 const setLastRequest = () => {
-  lastRequest.value = JSON.stringify({page: props.page, perPage: props.perPage, customFilters: props.customFilters});
-}
-
+  lastRequest.value = JSON.stringify({ page: props.page, perPage: props.perPage, customFilters: props.customFilters });
+};
 watch(() => props.customFilters, () => {
-  if (lastRequest.value === JSON.stringify({page: props.page, perPage: props.perPage, customFilters: props.customFilters})) {
+  if (lastRequest.value === JSON.stringify({ page: props.page, perPage: props.perPage, customFilters: props.customFilters })) {
     return;
   }
-  if(props.debounced) {
+  if (props.debounced) {
     debouncedGet(props.page, props.perPage, props.customFilters);
   } else {
     getItems(props.page, props.perPage, props.customFilters);
@@ -87,27 +82,25 @@ watch(() => props.customFilters, () => {
 watch(() => props.page, () => {
   getItems(props.page, props.perPage, props.customFilters);
 });
-if(props.await) {
+if (props.await) {
   await getItems(props.page, props.perPage, props.customFilters);
 } else {
   getItems(props.page, props.perPage, props.customFilters);
 }
 setLastRequest();
-
-const {addListener, removeLocalListenersWithEvent, notify} = useListenerService();
+const { addListener, removeLocalListenersWithEvent, notify } = useListenerService();
 onMounted(() => {
   props.listeners.forEach((listener) => {
     addListener(listener, (data) => {
       getItems(props.page, null, props.customFilters);
     });
   });
-})
+});
 onBeforeUnmount(() => {
   props.listeners.forEach((listener) => {
     removeLocalListenersWithEvent(listener);
   });
-})
-
+});
 </script>
 
 <template>
@@ -135,7 +128,3 @@ onBeforeUnmount(() => {
     </slot>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/dist/runtime/components/CrudListLoader.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    page: number;
+    debounced: boolean;
+    disableNoResults: boolean;
+    path: string;
+    perPage: number;
+    await: boolean;
+    listeners: unknown[];
+    noResultsText: string;
+    useQueryParams: boolean;
+    customFilters?: Record<string, any> | undefined;
+    $props: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    errors?: ((props: {}) => any) | undefined;
+} & {
+    empty?: ((props: {}) => any) | undefined;
+} & {
+    loader?: ((props: {
+        empty: boolean;
+    }) => any) | undefined;
+} & {
+    default?: ((props: {
+        items: any;
+        pending: any;
+        totalItems: any;
+        totalPages: any;
+        currentPage: any;
+        perPage: any;
+        filters: any;
+    }) => any) | undefined;
+};

package/dist/runtime/components/CrudPaginatedLoader.vue

@@ -1,17 +1,40 @@
 <script setup async>
-import {useCrudApi} from "../composables/useCrudApi";
-import {useCrudConverters} from "../composables/useCrudConverters";
-import {usePreviousRoute} from "../composables/usePreviousRoute";
-import {useRoute, useRouter} from '#app';
+import { useCrudApi } from "../composables/useCrudApi";
+import { useCrudConverters } from "../composables/useCrudConverters";
+import { usePreviousRoute } from "../composables/usePreviousRoute";
+import { useRoute, useRouter } from "#app";
 import CrudFilterList from "./CrudFilterList.vue";
-import {computed, ref, watch, onMounted, onBeforeUnmount} from "vue";
-import {useDebounceFn} from '@vueuse/core'
-import {useListenerService} from "../composables/useListenerService";
+import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { useListenerService } from "../composables/useListenerService";
 import CrudFormDialog from "./CrudFormDialog.vue";
 import CrudErrorDisplay from "./CrudErrorDisplay.vue";
-
-const {parseQuery, stringifyQuery, cloneDeep} = useCrudConverters();
+const { parseQuery, stringifyQuery, cloneDeep } = useCrudConverters();
 const props = defineProps({
+  filtersTitle: {
+    type: String,
+    required: false,
+    default() {
+      return "Filters";
+    }
+  },
+  resultsTitle: {
+    type: String,
+    required: false,
+    default() {
+      return "Results";
+    }
+  },
+  filterClasses: {
+    type: String,
+    required: false,
+    default: ""
+  },
+  resultClasses: {
+    type: String,
+    required: false,
+    default: ""
+  },
   fullScreenDialog: {
     type: Boolean,
     required: false,
@@ -123,6 +146,36 @@ const props = defineProps({
     type: String,
     required: false,
     default: ""
+  },
+  dialogStyle: {
+    type: String,
+    required: false,
+    default: null
+  },
+  dialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  createDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  updateDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  deleteDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  viewDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
   }
 });
 const {
@@ -152,40 +205,29 @@ const {
   hasExportErrors,
   hasListErrors
 } = useCrudApi(props.path, false, props.transformItem, props.transformItems);
-
 perPage.value = props.perPage;
-
 const route = useRoute();
 const router = useRouter();
 const previousRoute = usePreviousRoute();
-
-const action = computed(() => route.query[(props.loaderKey ?? '') + 'action']);
-const actionId = computed(() => route.query[(props.loaderKey ?? '') + 'actionId']);
-
+const action = computed(() => route.query[(props.loaderKey ?? "") + "action"]);
+const actionId = computed(() => route.query[(props.loaderKey ?? "") + "actionId"]);
 const dialogOpen = computed({
-  get: () => !!(action.value === "create" || (action.value === "update" && actionId.value) || (action.value === "delete" && actionId.value) || (action.value === "view" && actionId.value)),
+  get: () => !!(action.value === "create" || action.value === "update" && actionId.value || action.value === "delete" && actionId.value || action.value === "view" && actionId.value),
   set: (value) => {
     if (!value) {
-      const hasBackState = router.options.history.state.back
-
-      console.log('hasBackState', hasBackState)
-      console.log('previousRoute', previousRoute.value)
-      console.log('route', route)
-
-      const previousRouteName = previousRoute.value?.name
-      const currentRouteName = route.name
-
-      console.log('previousRouteName', previousRouteName)
-      console.log('currentRouteName', currentRouteName)
-
-
-      if (hasBackState && previousRouteName === currentRouteName) { // Only go back if there's a back state AND the previous route is the same
-        console.log('going back')
+      const hasBackState = router.options.history.state.back;
+      console.log("hasBackState", hasBackState);
+      console.log("previousRoute", previousRoute.value);
+      console.log("route", route);
+      const previousRouteName = previousRoute.value?.name;
+      const currentRouteName = route.name;
+      console.log("previousRouteName", previousRouteName);
+      console.log("currentRouteName", currentRouteName);
+      if (hasBackState && previousRouteName === currentRouteName) {
+        console.log("going back");
         router.back();
       } else {
-        // ✅ Clone the query object!
-        const currentQuery = {...route.query};
-
+        const currentQuery = { ...route.query };
         if (props.loaderKey) {
           delete currentQuery[`${props.loaderKey}action`];
           delete currentQuery[`${props.loaderKey}actionId`];
@@ -193,40 +235,35 @@ const dialogOpen = computed({
           delete currentQuery.action;
           delete currentQuery.actionId;
         }
-
         const finalRoute = {
           path: route.path,
-          query: currentQuery,
+          query: currentQuery
         };
         router.replace(finalRoute);
       }
     }
   }
 });
-
-
 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])} ?? props.customFilters) : ref({...props.customFilters, ...route.query});
-const onQueryChange = (page) => {
+const filterValues = props.loaderKey ? ref({ ...props.customFilters, ...parseQuery(route.query[props.loaderKey]) }) : ref({ ...props.customFilters, ...route.query });
+const onQueryChange = (page2) => {
   console.error("QUERY CHANGED");
-  const newQuery = {}
+  const newQuery = {};
   const existingQuery = parseQuery(route.query);
-
   for (const key in filterValues.value) {
     if (filterValues.value[key] !== null && filterValues.value[key] !== "") {
       newQuery[key] = filterValues.value[key];
     }
   }
-  newQuery.page = page;
+  newQuery.page = page2;
   let finalQuery = {
-    ...existingQuery,
-  }
+    ...existingQuery
+  };
   if (props.loaderKey) {
     finalQuery[props.loaderKey] = stringifyQuery(newQuery);
   } else {
     finalQuery = newQuery;
   }
-  //Delete action and actionId from query when filters or page change
   if (props.loaderKey) {
     delete finalQuery[`${props.loaderKey}action`];
     delete finalQuery[`${props.loaderKey}actionId`];
@@ -235,76 +272,70 @@ const onQueryChange = (page) => {
     delete finalQuery.actionId;
   }
   console.error("Setting query", finalQuery);
-  router.replace({path: route.path, query: finalQuery, force: true})
-}
+  router.replace({ path: route.path, query: finalQuery, force: true });
+};
 watch(currentPage, (newVal, oldValue) => {
   onQueryChange(currentPage.value);
 });
 watch(filterValues, (newVal, oldValue) => {
   console.error("FILTERS CHANGED");
   onQueryChange(1);
-}, {deep: true});
-
-
+}, { deep: true });
 watch(() => page, () => {
   console.error("ROUTE CHANGED");
   debouncedGet();
-}, {deep: true});
+}, { deep: true });
 watch(() => filterValues, () => {
   console.error("ROUTE CHANGED");
   debouncedGet();
-}, {deep: true});
-
+}, { deep: true });
 const debouncedGet = useDebounceFn(() => {
   console.error("DEBOUNCED GET");
   getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
-}, 200)
-
+}, 200);
 const updateForm = async (id) => {
-  const newQuery = {query: {...route.query}};
+  const newQuery = { query: { ...route.query } };
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? '') + 'action'] = "update";
-    newQuery.query[(props.loaderKey ?? '') + 'actionId'] = id;
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "update";
+    newQuery.query[(props.loaderKey ?? "") + "actionId"] = id;
   } else {
     newQuery.query.action = "update";
     newQuery.query.actionId = id;
   }
   await router.push(newQuery);
-}
+};
 const deleteForm = async (id) => {
-
-  const newQuery = {query: {...route.query}};
+  const newQuery = { query: { ...route.query } };
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? '') + 'action'] = "delete";
-    newQuery.query[(props.loaderKey ?? '') + 'actionId'] = id;
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "delete";
+    newQuery.query[(props.loaderKey ?? "") + "actionId"] = id;
   } else {
     newQuery.query.action = "delete";
     newQuery.query.actionId = id;
   }
   await router.push(newQuery);
-}
+};
 const viewForm = async (id) => {
-  const newQuery = {query: {...route.query}};
+  const newQuery = { query: { ...route.query } };
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? '') + 'action'] = "view";
-    newQuery.query[(props.loaderKey ?? '') + 'actionId'] = id;
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "view";
+    newQuery.query[(props.loaderKey ?? "") + "actionId"] = id;
   } else {
     newQuery.query.action = "view";
     newQuery.query.actionId = id;
   }
   await router.push(newQuery);
-}
+};
 const createForm = () => {
   item.value = props.initialItem ? cloneDeep(props.initialItem) : {};
-  const newQuery = {query: {...route.query}};
+  const newQuery = { query: { ...route.query } };
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? '') + 'action'] = "create";
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "create";
   } else {
     newQuery.query.action = "create";
   }
   router.push(newQuery);
-}
-
+};
 const saveAction = async () => {
   formPending.value = true;
   let itemToSave = JSON.parse(JSON.stringify(item.value));
@@ -335,14 +366,12 @@ const saveAction = async () => {
     await getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
     notify(savedPath + ":" + savedAction, savedItem);
   }
-}
-
+};
 if (props.await) {
   await getItems(page.value ?? null, null, filterValues.value);
 } else {
   getItems(page.value ?? null, null, filterValues.value);
 }
-
 watch(action, (newVal, oldValue) => {
   try {
     if (action.value === "update" && actionId.value) {
@@ -357,28 +386,26 @@ watch(action, (newVal, oldValue) => {
   } catch (error) {
     console.error("Error in actionId watcher:", error);
   }
-}, {immediate: true});
-
-const {addListener, removeLocalListenersWithEvent, notify} = useListenerService();
+}, { immediate: true });
+const { addListener, removeLocalListenersWithEvent, notify } = useListenerService();
 onMounted(() => {
   props.listeners.forEach((listener) => {
     addListener(listener, (data) => {
       getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
     });
   });
-})
+});
 onBeforeUnmount(() => {
   props.listeners.forEach((listener) => {
     removeLocalListenersWithEvent(listener);
   });
-})
+});
 const exportAction = async () => {
   await exportItems(filterValues.value);
   if (!hasExportErrors.value) {
-    window.open(exportUrl.value, '_blank');
+    window.open(exportUrl.value, "_blank");
   }
-}
-
+};
 </script>
 
 <template>
@@ -404,13 +431,21 @@ const exportAction = async () => {
       <v-row>
         <v-col v-if="!hideFilters && filters.length > 0" cols="12" md="3">
           <div>
+            <slot name="filtersTitle">
+              <h3 v-if="filtersTitle" class="mb-2">{{ filtersTitle }}</h3>
+            </slot>
             <slot name="filters" :filters="filters">
-              <crud-filter-list v-model="filterValues" :filters="filters"></crud-filter-list>
+              <div :class="filterClasses">
+                <crud-filter-list v-model="filterValues" :filters="filters"></crud-filter-list>
+              </div>
             </slot>
           </div>
         </v-col>
         <v-col cols="12" :md="hideFilters || filters.length === 0 ? '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 }}
@@ -419,16 +454,18 @@ const exportAction = async () => {
             <slot v-if="hasListErrors" name="error" :errors="listErrors">
               <crud-error-display :errors="listErrors"></crud-error-display>
             </slot>
-            <slot
-              v-if="totalItems > 0"
-              :items="items"
-              :pending="listPending"
-              :update-action="updateForm"
-              :view-action="viewForm"
-              :delete-action="deleteForm"
-              :form-pending="formPending"
-            >
-            </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>
           </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>
@@ -457,6 +494,12 @@ const exportAction = async () => {
       :view-title="viewTitle"
       :save-action="saveAction"
       :full-screen="fullScreenDialog"
+      :dialog-style="dialogStyle"
+      :dialog-size="dialogSize"
+      :create-dialog-size="createDialogSize"
+      :update-dialog-size="updateDialogSize"
+      :delete-dialog-size="deleteDialogSize"
+      :view-dialog-size="viewDialogSize"
     >
       <slot
         name="form" :action="action"
@@ -469,7 +512,3 @@ const exportAction = async () => {
 
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/dist/runtime/components/CrudPaginatedLoader.vue.d.ts

@@ -0,0 +1,89 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    path: string;
+    customFilters: Record<string, any>;
+    perPage: number;
+    await: boolean;
+    listeners: unknown[];
+    noResultsText: string;
+    createTitle: string;
+    updateTitle: string;
+    deleteTitle: string;
+    viewTitle: string;
+    dialogStyle: string;
+    dialogSize: string | number;
+    createDialogSize: string | number;
+    updateDialogSize: string | number;
+    deleteDialogSize: string | number;
+    viewDialogSize: string | number;
+    allowCreate: boolean;
+    hideFilters: boolean;
+    filtersTitle: string;
+    resultsTitle: string;
+    filterClasses: string;
+    resultClasses: string;
+    fullScreenDialog: boolean;
+    contentClasses: string;
+    title?: string | undefined;
+    loaderKey?: string | undefined;
+    initialItem?: Record<string, any> | undefined;
+    transformItem?: Function | undefined;
+    transformItems?: Function | undefined;
+    beforeSave?: Function | undefined;
+    beforeCreate?: Function | undefined;
+    beforeUpdate?: Function | undefined;
+    beforeDelete?: Function | undefined;
+    $props: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    before?: ((props: {
+        items: any;
+        totalItems: any;
+        totalPages: any;
+        pending: any;
+        createAction: any;
+        updateAction: any;
+        viewAction: any;
+        deleteAction: any;
+        formPending: any;
+        exportAction: any;
+        exportPending: any;
+        exportErrors: any;
+    }) => any) | undefined;
+} & {
+    filtersTitle?: ((props: {}) => any) | undefined;
+} & {
+    filters?: ((props: {
+        filters: any;
+    }) => any) | undefined;
+} & {
+    resultsTitle?: ((props: {}) => any) | undefined;
+} & {
+    empty?: ((props: {
+        createAction: any;
+    }) => any) | undefined;
+} & {
+    error?: ((props: {
+        errors: any;
+    }) => any) | undefined;
+} & {
+    default?: ((props: {
+        items: any;
+        pending: any;
+        updateAction: any;
+        viewAction: any;
+        deleteAction: any;
+        formPending: any;
+    }) => any) | undefined;
+} & {
+    form?: ((props: {
+        action: any;
+        item: any;
+        originalItem: any;
+        errors: any;
+    }) => any) | undefined;
+};